use-agentz 0.1.0

package/dist/ui/web/styles.css

@@ -0,0 +1,2338 @@
+/*
+ * AgentZ UI — control-panel restyle (dark zinc + cobalt).
+ *
+ * Token invariants: every --as-* var name from the base sheet is preserved
+ * (values changed, names never). New vars are additive (--as-warn, --as-focus,
+ * --as-accent-fill-text, ...). classNames stay stable; new classes are
+ * additive (as-dep-*, as-card-meta, as-preview-status, as-logo).
+ *
+ * All contrast pairs verified AA normal (see design note):
+ *   #fafafa/#09090b 19.1 · #a1a1aa/#18181b 6.9 · #91aaff/#18181b 7.9
+ *   #ffffff/#4565d5 5.2 · #e6ad4a/#18181b 8.8 · badge worst hue 6.1
+ */
+
+:root {
+  color-scheme: dark;
+
+  /* color tokens (zinc scale, dark-first) */
+  --as-bg: #09090b;
+  --as-surface: #18181b;
+  --as-surface-2: #27272a;
+  --as-border: #27272a;
+  --as-border-strong: #3f3f46;
+  --as-text: #fafafa;
+  --as-text-muted: #a1a1aa;
+  --as-accent: #d59245;          /* cobalt — fills / selected borders */
+  --as-accent-text: #ffc691;     /* accent as text on dark (AAA 7.9:1) */
+  --as-accent-soft: #362715;     /* cobalt-tinted surface for selected/notice */
+  --as-danger: #f47184;
+  --as-ok: #4ade80;
+
+  /* additive tokens */
+  --as-accent-fill-text: #ffffff; /* text ON an accent fill (AA 5.3:1) */
+  --as-accent-hover: #b07e34;
+  --as-warn: #e6ad4a;             /* amber, experimental/warning */
+  --as-warn-soft: #2a2010;
+  --as-focus: #ffcf91;
+  --as-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --as-dur: 150ms;
+
+  /* spacing + shape */
+  --as-radius: 8px;
+  --as-radius-sm: 6px;
+  --as-gap: 16px;
+  --as-gap-sm: 8px;
+  --as-pad: 20px;
+  --as-maxw: 1200px;
+
+  /* typography */
+  --as-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --as-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
+  --as-fs: 14px;
+  --as-fs-sm: 12.5px;
+  --as-fs-lg: 18px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--as-font);
+  font-size: var(--as-fs);
+  color: var(--as-text);
+  background: var(--as-bg);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* one focus system for everything interactive */
+:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 2px var(--as-bg),
+    0 0 0 4px var(--as-focus);
+  border-radius: var(--as-radius-sm);
+}
+
+.as-app {
+  max-width: var(--as-maxw);
+  margin: 0 auto;
+  padding: var(--as-pad) var(--as-pad) 64px;
+  /* Base UI portal setup: keep in-app stacking below portalled popups. */
+  isolation: isolate;
+}
+
+/* header ----------------------------------------------------------- */
+.as-header {
+  display: flex;
+  align-items: center;
+  gap: var(--as-gap);
+  padding: 14px 0;
+  border-bottom: 1px solid var(--as-border);
+  margin-bottom: calc(var(--as-gap) * 1.5);
+}
+.as-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--as-fs-lg);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin: 0;
+  white-space: nowrap;
+}
+.as-logo {
+  height: 22px;
+  width: auto;
+  display: block;
+  flex-shrink: 0;
+  color: var(--as-accent);
+}
+.as-steps {
+  display: flex;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+}
+.as-step {
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-weight: 500;
+}
+.as-step[data-active="true"] {
+  background: var(--as-accent-soft);
+  border-color: var(--as-accent);
+  color: var(--as-accent-text);
+  font-weight: 600;
+}
+
+/* cards + grid ------------------------------------------------------ */
+.as-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--as-gap);
+}
+.as-card {
+  position: relative;
+  display: block;
+  width: 100%;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius);
+  background: var(--as-surface);
+  padding: var(--as-pad);
+  transition:
+    border-color var(--as-dur) ease-in-out,
+    background var(--as-dur) ease-in-out;
+}
+/* real selection button: fills the card, invisible chrome so the card reads
+ * as one surface; the composition <details> sits below it as a sibling. */
+.as-card-select {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+.as-card-select:focus-visible {
+  outline: 2px solid var(--as-accent);
+  outline-offset: 2px;
+  border-radius: var(--as-radius);
+}
+.as-card:hover {
+  border-color: var(--as-border-strong);
+  background: #1c1c1f;
+}
+.as-card:active {
+  transform: translateY(1px);
+}
+.as-card[data-selected="true"] {
+  border-color: var(--as-accent);
+  background: var(--as-accent-soft);
+  box-shadow: inset 0 0 0 1px var(--as-accent);
+}
+/* check indicator, reserved space -> zero shift on select */
+.as-card-check {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1.5px solid var(--as-border-strong);
+  color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background var(--as-dur) ease-in-out,
+    border-color var(--as-dur) ease-in-out;
+}
+.as-card[data-selected="true"] .as-card-check {
+  background: var(--as-accent);
+  border-color: var(--as-accent);
+  color: var(--as-accent-fill-text);
+}
+.as-card-title {
+  display: block;
+  font-weight: 600;
+  margin: 0 24px 4px 0;
+}
+.as-card-desc {
+  display: block;
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  margin: 0;
+}
+/* per-tier model@effort chips on pack cards (derived from pack tier defs) */
+.as-card-tiers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 10px 0 0;
+}
+.as-tier-chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border: 1px solid var(--as-border);
+  border-radius: 999px;
+}
+.as-tier-name {
+  font-weight: 600;
+  color: var(--as-text);
+}
+.as-tier-effort {
+  opacity: 0.8;
+}
+
+/* composition meta line on preset/pack cards */
+.as-card-meta {
+  display: block;
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  font-variant-numeric: tabular-nums;
+  margin: 10px 0 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--as-border);
+}
+.as-card[data-selected="true"] .as-card-meta {
+  border-top-color: rgb(69 101 213 / 0.35);
+}
+.as-card-comp {
+  margin: 6px 0 0;
+  border: none;
+  background: none;
+  padding: 0;
+}
+.as-card-comp > summary {
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  cursor: pointer;
+  padding: 2px 0;
+  font-weight: 500;
+}
+.as-card-comp > summary:hover {
+  color: var(--as-text);
+}
+.as-card-comp ul {
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+}
+.as-card-comp li {
+  padding: 1px 0;
+}
+.as-card-comp li > .as-dep-kind {
+  margin-right: 6px;
+}
+
+/* sections ----------------------------------------------------------- */
+.as-section {
+  margin-bottom: 18px;
+}
+.as-section-title {
+  font-size: var(--as-fs);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  margin: 0 0 4px;
+}
+.as-section-hint {
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  margin: 0 0 12px;
+}
+
+.as-panel {
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius);
+  background: var(--as-surface);
+  padding: 6px var(--as-pad);
+  box-shadow: var(--as-shadow);
+}
+
+/* rows (toggle lists, agent list) ------------------------------------ */
+.as-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--as-surface-2);
+}
+.as-row:last-child {
+  border-bottom: none;
+}
+.as-row-main {
+  flex: 1;
+  min-width: 0;
+}
+.as-row-name {
+  font-weight: 500;
+}
+.as-row-desc {
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+}
+.as-row-detail {
+  font-family: var(--as-mono);
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  margin-top: 2px;
+}
+
+/* dependency chips (graph-driven, degrade to nothing) ----------------- */
+.as-dep-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  font-size: var(--as-fs-sm);
+}
+.as-dep-label {
+  color: var(--as-text-muted);
+}
+.as-dep-chip {
+  display: inline-block;
+  font-family: var(--as-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: var(--as-text-muted);
+  background: var(--as-surface-2);
+  border: 1px solid var(--as-border-strong);
+  border-radius: 999px;
+  padding: 0 8px;
+  white-space: nowrap;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.as-dep-more {
+  font: inherit;
+  font-size: 11.5px;
+  color: var(--as-text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 4px;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.as-dep-more:hover {
+  color: var(--as-text);
+}
+.as-dep-kind {
+  display: inline-block;
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--as-text-muted);
+}
+
+/* form controls ------------------------------------------------------- */
+.as-select,
+.as-input {
+  font: inherit;
+  font-size: var(--as-fs-sm);
+  padding: 7px 10px;
+  border: 1px solid var(--as-border-strong);
+  border-radius: var(--as-radius-sm);
+  background: var(--as-bg);
+  color: var(--as-text);
+  transition: border-color var(--as-dur) ease-in-out;
+}
+.as-select:hover,
+.as-input:hover {
+  border-color: #52525b;
+}
+.as-input {
+  font-family: var(--as-mono);
+  min-width: 220px;
+}
+.as-input::placeholder {
+  color: #71717a;
+}
+.as-label {
+  display: block;
+  font-size: var(--as-fs-sm);
+  font-weight: 500;
+  color: var(--as-text-muted);
+  margin-bottom: 4px;
+}
+/* item switch (Base UI Switch: zinc track, cobalt when checked) -------- */
+.as-switch-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.as-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 32px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid #71717a; /* 3:1 UI boundary on the panel surface */
+  border-radius: 999px;
+  background: var(--as-surface-2);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background var(--as-dur) ease-in-out,
+    border-color var(--as-dur) ease-in-out;
+}
+.as-switch[data-checked] {
+  background: var(--as-accent);
+  border-color: var(--as-accent);
+}
+.as-switch[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.as-switch[readonly],
+.as-switch[data-readonly] {
+  opacity: 0.55;
+  cursor: default;
+}
+.as-switch-thumb {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--as-text);
+  transform: translateX(2px);
+  transition: transform var(--as-dur) ease-out;
+}
+.as-switch[data-checked] .as-switch-thumb {
+  background: var(--as-accent-fill-text);
+  transform: translateX(16px);
+}
+.as-lock {
+  color: var(--as-text-muted);
+  flex-shrink: 0;
+}
+.as-lock-note {
+  display: block;
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  margin-top: 2px;
+}
+
+/* buttons -------------------------------------------------------------- */
+.as-actions {
+  display: flex;
+  gap: var(--as-gap-sm);
+  justify-content: flex-end;
+  margin-top: var(--as-gap);
+}
+.as-btn {
+  font: inherit;
+  font-size: var(--as-fs-sm);
+  font-weight: 600;
+  padding: 8px 18px;
+  border-radius: var(--as-radius-sm);
+  border: 1px solid var(--as-border-strong);
+  background: var(--as-surface);
+  color: var(--as-text);
+  cursor: pointer;
+  transition:
+    background var(--as-dur) ease-in-out,
+    border-color var(--as-dur) ease-in-out;
+}
+.as-btn:hover {
+  background: var(--as-surface-2);
+}
+.as-btn:active {
+  transform: translateY(1px);
+}
+.as-btn[data-variant="primary"] {
+  background: var(--as-accent);
+  border-color: var(--as-accent);
+  color: var(--as-accent-fill-text);
+}
+.as-btn[data-variant="primary"]:hover {
+  background: var(--as-accent-hover);
+  border-color: var(--as-accent-hover);
+}
+.as-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+.as-btn[data-variant="danger"] {
+  border-color: #4c1d24;
+  color: var(--as-danger);
+}
+.as-btn[data-variant="danger"]:hover {
+  background: #2a1215;
+  border-color: var(--as-danger);
+}
+
+/* status + notes -------------------------------------------------------- */
+.as-notes {
+  margin: var(--as-gap-sm) 0 0;
+  padding-left: 18px;
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+}
+.as-error {
+  color: var(--as-danger);
+  font-size: var(--as-fs-sm);
+  background: #2a1215;
+  border: 1px solid #4c1d24;
+  border-left: 3px solid var(--as-danger);
+  border-radius: var(--as-radius);
+  padding: var(--as-gap-sm) var(--as-gap);
+  margin: var(--as-gap-sm) 0;
+}
+.as-ok {
+  color: var(--as-ok);
+  font-weight: 600;
+}
+.as-notice {
+  color: var(--as-text);
+  background: var(--as-accent-soft);
+  border: 1px solid var(--as-border);
+  border-left: 3px solid var(--as-accent);
+  border-radius: var(--as-radius);
+  font-size: var(--as-fs-sm);
+  padding: var(--as-gap-sm) var(--as-gap);
+  margin: 0 0 var(--as-gap);
+}
+.as-filelist {
+  font-family: var(--as-mono);
+  font-size: var(--as-fs-sm);
+  list-style: none;
+  margin: var(--as-gap-sm) 0 0;
+  padding: 0;
+  max-height: 260px;
+  overflow: auto;
+}
+.as-filelist li {
+  padding: 2px 0;
+  color: var(--as-text-muted);
+}
+.as-file-status {
+  display: inline-block;
+  width: 90px;
+  color: var(--as-accent-text);
+}
+.as-file-status[data-removed],
+.as-file-removed {
+  color: var(--as-danger);
+  font-weight: 600;
+}
+
+.as-spinner {
+  color: var(--as-text-muted);
+  font-size: var(--as-fs-sm);
+}
+
+.as-summary-grid {
+  display: grid;
+  grid-template-columns: 130px 1fr;
+  gap: 8px var(--as-gap);
+  font-size: var(--as-fs-sm);
+  padding: 10px 0;
+}
+.as-summary-grid dt {
+  color: var(--as-text-muted);
+}
+.as-summary-grid dd {
+  margin: 0;
+  font-family: var(--as-mono);
+  color: var(--as-text);
+  overflow-wrap: anywhere;
+}
+
+/* model badge chip (deterministic hue via --model-hue).
+ * Text hsl(H 55% 72%) on chip hsl(H 45% 15%): worst-case hue verified
+ * >= 6:1 AA normal across the wheel. */
+.as-model-badge {
+  display: inline-block;
+  font-family: var(--as-mono);
+  font-size: 11.5px;
+  line-height: 1.6;
+  padding: 1px 9px;
+  border-radius: 999px;
+  color: hsl(var(--model-hue, 210) 55% 72%);
+  background: hsl(var(--model-hue, 210) 45% 15%);
+  border: 1px solid hsl(var(--model-hue, 210) 45% 28%);
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+/* project switcher (header) */
+.as-project-switch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+.as-project-switch .as-label {
+  margin: 0;
+}
+
+/* success banner (post-install, dismissible) */
+.as-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--as-gap-sm);
+  background: #0f2318;
+  border: 1px solid #1d4028;
+  border-left: 3px solid var(--as-ok);
+  border-radius: var(--as-radius);
+  padding: var(--as-gap-sm) var(--as-gap);
+  margin: 0 0 var(--as-gap);
+  font-size: var(--as-fs-sm);
+}
+.as-banner-detail {
+  color: var(--as-text-muted);
+}
+.as-banner-close {
+  margin-left: auto;
+  border: none;
+  background: none;
+  font-size: var(--as-fs-lg);
+  line-height: 1;
+  cursor: pointer;
+  color: var(--as-text-muted);
+  padding: 2px 6px;
+  border-radius: var(--as-radius-sm);
+}
+.as-banner-close:hover {
+  color: var(--as-text);
+  background: rgb(255 255 255 / 0.06);
+}
+
+/* collapsible details (bulk add, file previews, experimental targets) */
+.as-details {
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius);
+  background: var(--as-surface);
+  margin-bottom: var(--as-gap-sm);
+  padding: 4px var(--as-gap);
+}
+.as-details[open] {
+  padding-bottom: var(--as-gap-sm);
+}
+.as-summary {
+  cursor: pointer;
+  font-weight: 500;
+  font-size: var(--as-fs-sm);
+  padding: 8px 0;
+  color: var(--as-text);
+  border-radius: var(--as-radius-sm);
+}
+.as-summary:hover {
+  color: var(--as-accent-text);
+}
+.as-count {
+  color: var(--as-accent-text);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* amber = deliberate experimental warning, NOT an error */
+.as-details[data-variant="warn"] {
+  border-color: #4a3a18;
+  background: var(--as-warn-soft);
+}
+.as-details[data-variant="warn"] > .as-summary {
+  color: var(--as-warn);
+}
+.as-warn {
+  color: var(--as-warn);
+  font-size: var(--as-fs-sm);
+  margin: var(--as-gap-sm) 0;
+}
+
+.as-code {
+  font-family: var(--as-mono);
+  font-size: var(--as-fs-sm);
+  background: var(--as-bg);
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-sm);
+  padding: 12px;
+  margin: var(--as-gap-sm) 0 0;
+  max-height: 320px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--as-text-muted);
+  transition: opacity var(--as-dur) ease-in-out;
+}
+
+/* preview refetch affordance: fixed-width status slot -> no layout shift */
+.as-preview-status {
+  display: inline-block;
+  width: 80px;
+  margin-left: 8px;
+  font-size: var(--as-fs-sm);
+  font-weight: 400;
+  color: var(--as-text-muted);
+  vertical-align: baseline;
+}
+.as-section[data-loading="true"] .as-code {
+  opacity: 0.55;
+}
+
+/* ==================================================================== */
+/* review app shell: main column + sticky right rail                    */
+/* ==================================================================== */
+.as-review {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  gap: calc(var(--as-gap) * 1.5);
+  align-items: start;
+}
+.as-review-main {
+  min-width: 0;
+}
+.as-rail {
+  position: sticky;
+  top: var(--as-gap);
+}
+.as-rail-panel {
+  padding: var(--as-gap) var(--as-gap);
+}
+.as-rail-grid {
+  grid-template-columns: 70px 1fr;
+  padding: 6px 0;
+}
+.as-rail-counts {
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  font-variant-numeric: tabular-nums;
+  margin: 0 0 var(--as-gap-sm);
+  padding-top: var(--as-gap-sm);
+  border-top: 1px solid var(--as-border);
+}
+.as-rail-deletions {
+  color: var(--as-danger);
+  border-top: none;
+  padding-top: 0;
+}
+.as-rail-previews {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--as-gap-sm) 0;
+  border-top: 1px solid var(--as-border);
+}
+.as-rail-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--as-gap-sm);
+  padding-top: var(--as-gap);
+  border-top: 1px solid var(--as-border);
+  margin-top: var(--as-gap-sm);
+}
+.as-rail-error {
+  flex-basis: 100%;
+  margin: 0;
+  font-size: var(--as-fs-sm);
+}
+.as-rail-actions .as-btn[data-variant="primary"] {
+  flex: 1;
+}
+@media (max-width: 900px) {
+  .as-review {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .as-rail {
+    position: static;
+    order: -1;
+  }
+}
+
+/* section header with an inline "+ Add" action */
+.as-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--as-gap-sm);
+  margin-bottom: 4px;
+}
+.as-section-head .as-section-title {
+  margin: 0;
+}
+/* right-aligned cluster of header actions (e.g. global toggle + "+ Add") */
+.as-section-head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--as-gap);
+}
+.as-btn[data-size="sm"] {
+  padding: 4px 10px;
+  font-weight: 500;
+}
+
+/* row variants */
+.as-row-nested {
+  padding-left: 44px;
+}
+.as-row-controls {
+  gap: calc(var(--as-gap) * 2);
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.as-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.as-agent-row {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.as-agent-model {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+}
+.as-agent-controls {
+  display: flex;
+  gap: var(--as-gap);
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.as-tag {
+  display: inline-block;
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--as-text-muted);
+  border: 1px solid var(--as-border-strong);
+  border-radius: 999px;
+  padding: 0 7px;
+  margin-left: 8px;
+  line-height: 1.6;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.as-tag[data-variant="custom"] {
+  color: var(--as-accent-text);
+  border-color: rgb(69 101 213 / 0.5);
+  margin-left: 0;
+}
+.as-tag[data-variant="default"] {
+  margin-left: 0;
+}
+.as-tag-warn {
+  color: var(--as-warn);
+  border-color: var(--as-warn);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.as-contradict-summary {
+  margin: 0 0 8px;
+  font-size: var(--as-fs-sm);
+}
+.as-remove {
+  font: inherit;
+  font-size: var(--as-fs-lg);
+  line-height: 1;
+  border: none;
+  background: none;
+  color: var(--as-text-muted);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: var(--as-radius-sm);
+  flex-shrink: 0;
+}
+.as-remove:hover {
+  color: var(--as-text);
+  background: rgb(255 255 255 / 0.06);
+}
+
+/* segmented control (Base UI ToggleGroup) ----------------------------- */
+.as-seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--as-border-strong);
+  border-radius: var(--as-radius-sm);
+  background: var(--as-bg);
+  width: fit-content;
+}
+.as-seg-item {
+  font: inherit;
+  font-size: var(--as-fs-sm);
+  font-weight: 500;
+  border: none;
+  background: none;
+  color: var(--as-text-muted);
+  padding: 3px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition:
+    background var(--as-dur) ease-in-out,
+    color var(--as-dur) ease-in-out;
+}
+.as-seg-item:hover {
+  color: var(--as-text);
+}
+.as-seg-item[data-pressed] {
+  background: var(--as-surface-2);
+  color: var(--as-text);
+  font-weight: 600;
+}
+
+/* popovers / positioners (shared surface for Popover + Combobox) ------- */
+.as-positioner {
+  z-index: 10;
+}
+.as-popover {
+  background: var(--as-surface);
+  border: 1px solid var(--as-border-strong);
+  border-radius: var(--as-radius);
+  box-shadow:
+    0 8px 24px rgb(0 0 0 / 0.5),
+    var(--as-shadow);
+  color: var(--as-text);
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity 140ms ease-out,
+    transform 140ms ease-out;
+}
+.as-popover[data-starting-style],
+.as-popover[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* tooltip */
+.as-tooltip {
+  background: var(--as-surface-2);
+  border: 1px solid var(--as-border-strong);
+  border-radius: var(--as-radius-sm);
+  color: var(--as-text);
+  font-size: var(--as-fs-sm);
+  padding: 4px 9px;
+  transition: opacity 140ms ease-out;
+}
+.as-tooltip[data-starting-style],
+.as-tooltip[data-ending-style] {
+  opacity: 0;
+}
+
+/* model combobox */
+.as-combo {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.as-combo .as-input {
+  padding-right: 26px;
+}
+.as-combo-clear {
+  position: absolute;
+  right: 4px;
+  border: none;
+  background: none;
+  color: var(--as-text-muted);
+  font-size: var(--as-fs);
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 5px;
+  border-radius: var(--as-radius-sm);
+}
+.as-combo-clear:hover {
+  color: var(--as-text);
+}
+.as-combo-popup {
+  width: var(--anchor-width);
+  min-width: 260px;
+  max-height: min(320px, var(--available-height));
+  overflow: auto;
+  padding: 4px;
+}
+.as-combo-list {
+  display: flex;
+  flex-direction: column;
+}
+.as-combo-group-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--as-text-muted);
+  padding: 6px 8px 2px;
+}
+.as-combo-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--as-mono);
+  font-size: var(--as-fs-sm);
+  padding: 5px 8px;
+  border-radius: var(--as-radius-sm);
+  cursor: pointer;
+  color: var(--as-text);
+}
+.as-combo-item[data-highlighted] {
+  background: var(--as-surface-2);
+}
+.as-combo-item[data-selected] {
+  color: var(--as-accent-text);
+}
+.as-combo-indicator {
+  width: 12px;
+  flex-shrink: 0;
+  display: inline-flex;
+  color: var(--as-accent-text);
+}
+.as-combo-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.as-combo-empty {
+  font-size: var(--as-fs-sm);
+  color: var(--as-text-muted);
+  padding: 8px;
+  margin: 0;
+}
+.as-combo-empty:empty {
+  display: none;
+}
+
+/* "+ Add" popover: search on top, multiselect checklist below ---------- */
+.as-add-popup {
+  width: 340px;
+  max-height: min(400px, var(--available-height));
+  display: flex;
+  flex-direction: column;
+  padding: var(--as-gap-sm);
+}
+.as-add-search {
+  width: 100%;
+  min-width: 0;
+  font-family: var(--as-font);
+  margin-bottom: 6px;
+}
+.as-add-list {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.as-add-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  text-align: left;
+  font: inherit;
+  border: none;
+  background: none;
+  color: var(--as-text);
+  padding: 6px 8px;
+  border-radius: var(--as-radius-sm);
+  cursor: pointer;
+}
+.as-add-item:hover {
+  background: var(--as-surface-2);
+}
+.as-add-check {
+  width: 15px;
+  height: 15px;
+  margin-top: 2px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 1.5px solid var(--as-border-strong);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--as-accent-fill-text);
+}
+.as-add-check[data-on="true"] {
+  background: var(--as-accent);
+  border-color: var(--as-accent);
+}
+.as-add-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.as-add-main .as-row-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* config preview sheet (Dialog styled as a right drawer) --------------- */
+.as-sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(0 0 0 / 0.55);
+  transition: opacity 160ms ease-out;
+}
+.as-sheet-backdrop[data-starting-style],
+.as-sheet-backdrop[data-ending-style] {
+  opacity: 0;
+}
+.as-sheet {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(560px, 92vw);
+  background: var(--as-surface);
+  border-left: 1px solid var(--as-border-strong);
+  padding: var(--as-gap) var(--as-pad);
+  display: flex;
+  flex-direction: column;
+  gap: var(--as-gap-sm);
+  transition:
+    transform 160ms ease-out,
+    opacity 160ms ease-out;
+}
+.as-sheet[data-starting-style],
+.as-sheet[data-ending-style] {
+  transform: translateX(24px);
+  opacity: 0;
+}
+.as-sheet-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--as-gap-sm);
+}
+.as-sheet-title {
+  font-size: var(--as-fs);
+  font-weight: 600;
+  margin: 0;
+}
+.as-sheet-code {
+  flex: 1;
+  max-height: none;
+  margin: 0;
+}
+.as-sheet[data-loading="true"] .as-sheet-code {
+  opacity: 0.55;
+}
+
+/* collapsible (experimental targets), amber = warning not error -------- */
+.as-collapse {
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius);
+  background: var(--as-surface);
+  margin: var(--as-gap-sm) 0;
+  padding: 0 var(--as-gap);
+}
+.as-collapse[data-variant="warn"] {
+  border-color: #4a3a18;
+  background: var(--as-warn-soft);
+}
+.as-collapse-trigger {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  font-weight: 500;
+  font-size: var(--as-fs-sm);
+  border: none;
+  background: none;
+  color: var(--as-text);
+  cursor: pointer;
+  padding: 10px 0;
+  border-radius: var(--as-radius-sm);
+}
+.as-collapse[data-variant="warn"] .as-collapse-trigger {
+  color: var(--as-warn);
+}
+.as-collapse-panel {
+  padding-bottom: var(--as-gap-sm);
+}
+
+/* collapsible review sections (Skills/Tools/Plugins/Commands/Rules/MCPs) ---
+   start collapsed; header row is always visible, body animates open/closed. */
+.as-section-collapsible {
+  /* section card already provides border/padding; keep the header flush. */
+}
+.as-collapse-head {
+  margin-bottom: 0;
+  /* subtle separator so the whole header reads as a clickable trigger row.
+     Uses the semantic border token; sits on the header container (not the
+     trigger button) so it spans full width and never doubles with the panel
+     card border below when the section is expanded. */
+  border-bottom: 1px solid var(--as-border);
+}
+.as-collapse-head-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--as-gap-sm);
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  font: inherit;
+  border: none;
+  background: none;
+  color: var(--as-text);
+  cursor: pointer;
+  padding: var(--as-gap-sm) 8px;
+  margin: 0 -8px;
+  border-radius: var(--as-radius-sm);
+  transition:
+    background-color 120ms ease-out,
+    color 120ms ease-out;
+}
+/* whole trigger row lifts on hover/focus so it reads as expandable */
+.as-collapse-head-trigger:hover,
+.as-collapse-head-trigger:focus-visible {
+  background: var(--as-surface-hover, rgb(255 255 255 / 0.04));
+}
+.as-collapse-head-trigger .as-section-title {
+  margin: 0;
+   /* dotted underline hints "expandable"; firms up + shifts accent on hover. */
+  text-decoration: underline dotted var(--as-border-strong);
+  text-underline-offset: 4px;
+  transition:
+    text-decoration-color 120ms ease-out,
+    color 120ms ease-out;
+}
+.as-collapse-head-trigger:hover .as-section-title,
+.as-collapse-head-trigger:focus-visible .as-section-title {
+  color: var(--as-accent-text);
+  text-decoration-style: solid;
+  text-decoration-color: currentColor;
+}
+.as-section-count {
+  font-size: var(--as-fs-sm);
+}
+.as-chevron {
+  margin-left: auto;
+  color: var(--as-text-muted);
+  transition:
+    transform 140ms ease-out,
+    color 120ms ease-out;
+  flex-shrink: 0;
+}
+.as-collapse-head-trigger:hover .as-chevron,
+.as-collapse-head-trigger:focus-visible .as-chevron {
+  color: var(--as-accent-text);
+}
+.as-collapse-head-trigger[data-panel-open] .as-chevron {
+  transform: rotate(180deg);
+}
+/* Base UI reports the natural panel height via --collapsible-panel-height;
+   animate height + opacity for a smooth, jank-free open/close. */
+.as-section-panel {
+  overflow: hidden;
+  padding-bottom: 0;
+  transition:
+    height 140ms ease-out,
+    opacity 140ms ease-out;
+}
+.as-section-panel[data-open] {
+  height: var(--collapsible-panel-height);
+  opacity: 1;
+}
+.as-section-panel[data-starting-style],
+.as-section-panel[data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+.as-section-panel[hidden] {
+  display: none;
+}
+/* breathing room between the header separator line and the panel card */
+.as-section-panel > .as-panel,
+.as-section-panel > .as-warn {
+  margin-top: var(--as-gap-sm);
+}
+
+/* "+ Add" popover: skills group headers ------------------------------- */
+.as-add-group + .as-add-group {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--as-border);
+}
+.as-add-group-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px 2px;
+}
+.as-add-group-label {
+  font-size: var(--as-fs-sm);
+  font-weight: 600;
+  color: var(--as-text);
+}
+.as-add-group-count {
+  font-size: var(--as-fs-sm);
+}
+.as-add-group-head .as-btn {
+  margin-left: auto;
+}
+
+/* per-agent "override defaults" toggle: label + switch on ONE row, aligned
+   with the "+ Add" button in the section header actions cluster. */
+.as-override-toggle {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--as-gap-sm);
+}
+.as-override-toggle .as-label {
+  margin-bottom: 0;
+}
+
+/* tier model overrides (the normal path: one model per cheap/normal/expert).
+   Description stacks ABOVE the fields so it keeps a readable full-width measure
+   instead of collapsing to a narrow squashed column; the three pickers form one
+   horizontal row that wraps only when the container is genuinely too narrow. */
+.as-tier-overrides {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--as-gap-sm);
+}
+.as-tier-overrides .as-row-main {
+  flex: none;
+}
+.as-tier-overrides .as-row-desc {
+  max-width: 65ch;
+  line-height: 1.5;
+}
+.as-tier-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--as-gap);
+}
+.as-tier-field {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--as-gap-sm);
+}
+.as-tier-field .as-select {
+  width: 100%;
+}
+/* Keep the tier ModelPicker within its grid cell: the global `.as-input`
+   min-width (220px) exceeds the ~197px tier column at 1024, so without these
+   the input and its inline-flex `.as-combo` wrapper overflow and eat the grid
+   gaps. Scope stays tier-local; global input sizing is untouched elsewhere. */
+.as-tier-field .as-combo {
+  width: 100%;
+}
+.as-tier-field .as-input {
+  min-width: 0;
+  width: 100%;
+}
+@media (max-width: 560px) {
+  .as-tier-fields {
+    grid-template-columns: 1fr;
+  }
+}
+.as-tier-hint {
+  font-weight: 400;
+  color: var(--as-text-muted);
+}
+.as-tier-sublabel {
+  display: block;
+  font-size: var(--as-fs-xs, 11px);
+  font-weight: 500;
+  color: var(--as-text-muted);
+  letter-spacing: 0.01em;
+}
+
+/* nested "Model overrides" collapsible inside Targets & options: a compact
+   card whose full trigger row (title + chevron) opens it. Collapsed by default;
+   avoids nested-card clutter by reusing the tier fields directly in the panel. */
+.as-tier-collapse {
+  margin: var(--as-gap-sm) 0 0;
+}
+.as-tier-collapse-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--as-gap-sm);
+}
+.as-tier-collapse-title {
+  font-weight: 500;
+}
+.as-tier-collapse-trigger:hover .as-tier-collapse-title,
+.as-tier-collapse-trigger:focus-visible .as-tier-collapse-title {
+  color: var(--as-accent-text);
+}
+.as-tier-collapse-trigger:hover .as-chevron,
+.as-tier-collapse-trigger:focus-visible .as-chevron {
+  color: var(--as-accent-text);
+}
+.as-tier-collapse-trigger[data-panel-open] .as-chevron {
+  transform: rotate(180deg);
+}
+/* tier fields inside the nested panel: drop the bottom row border (it is the
+   last thing in the panel) and keep the fields flush to the trigger. */
+.as-tier-collapse .as-tier-overrides {
+  border-bottom: none;
+  padding-top: 0;
+}
+
+/* post-install terminal panel (server stopped) ------------------------ */
+.as-stopped {
+  text-align: center;
+}
+
+/* ==================================================================== */
+/* neo-brutalist visual layer                                           */
+/* ==================================================================== */
+
+body {
+  min-width: 320px;
+  min-height: 100dvh;
+  background: var(--as-bg);
+  color: var(--as-text);
+  font-family: var(--as-font);
+  letter-spacing: 0.01em;
+}
+
+button,
+input,
+select {
+  border-radius: 0;
+}
+
+:focus-visible {
+  outline: 3px solid var(--as-focus);
+  outline-offset: 3px;
+  box-shadow: 0 0 0 2px var(--as-bg), 0 0 0 5px var(--as-focus);
+}
+
+.as-app {
+  max-width: var(--as-maxw);
+  min-height: 100dvh;
+  padding: 24px 24px 72px;
+}
+
+/* header */
+.as-header {
+  min-height: 74px;
+  gap: 14px;
+  padding: 12px 14px;
+  margin-bottom: 28px;
+  border: 3px solid var(--as-border-strong);
+  background: var(--as-surface);
+  box-shadow: 6px 6px 0 var(--as-color-shadow);
+}
+
+.as-title {
+  gap: 10px;
+  font-family: var(--as-font-display);
+  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
+  font-weight: 900;
+  letter-spacing: -0.055em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.as-logo {
+  width: 30px;
+  height: 30px;
+  color: var(--as-accent);
+}
+
+.as-project-switch {
+  gap: 7px;
+  padding-left: 14px;
+  border-left: 2px solid var(--as-border-strong);
+}
+
+.as-project-switch .as-label {
+  font-family: var(--as-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.as-steps {
+  gap: 6px;
+  margin-left: auto;
+  font-family: var(--as-mono);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.as-step {
+  padding: 6px 10px;
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+  color: var(--as-text-muted);
+}
+
+.as-step[data-active="true"] {
+  border-color: var(--as-accent);
+  background: var(--as-accent);
+  color: var(--as-accent-fill-text);
+  font-weight: 900;
+}
+
+/* page hierarchy */
+.as-section {
+  margin-bottom: 28px;
+}
+
+.as-section-title {
+  display: inline-block;
+  margin: 0 0 6px;
+  padding-left: 10px;
+  border-left: 5px solid var(--as-accent);
+  color: var(--as-text);
+  font-family: var(--as-font-display);
+  font-size: clamp(1rem, 1.6vw, 1.2rem);
+  font-weight: 900;
+  letter-spacing: -0.035em;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.as-section-hint {
+  max-width: 68ch;
+  margin: 0 0 13px;
+  color: var(--as-text-muted);
+  font-size: var(--as-fs-sm);
+  line-height: 1.5;
+}
+
+.as-section-head {
+  align-items: flex-end;
+  min-height: 35px;
+  margin-bottom: 8px;
+}
+
+.as-section-head-actions {
+  gap: 10px;
+}
+
+/* selectable setup cards */
+.as-grid {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+  gap: 20px;
+}
+
+@media (min-width: 720px) {
+  .as-grid > .as-card:first-child {
+    grid-column: span 2;
+  }
+}
+
+.as-card {
+  min-height: 164px;
+  border: 3px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-surface);
+  box-shadow: 5px 5px 0 var(--as-color-shadow);
+  padding: 20px;
+  transition:
+    background var(--as-dur) ease-out,
+    border-color var(--as-dur) ease-out,
+    box-shadow var(--as-dur) ease-out,
+    transform var(--as-dur) ease-out;
+}
+
+.as-card:hover {
+  border-color: var(--as-accent);
+  background: var(--as-surface-2);
+  box-shadow: 7px 7px 0 var(--as-color-shadow);
+  transform: translate(-2px, -2px);
+}
+
+.as-card:active {
+  box-shadow: 2px 2px 0 var(--as-color-shadow);
+  transform: translate(3px, 3px);
+}
+
+.as-card[data-selected="true"] {
+  border-color: var(--as-accent);
+  background: var(--as-accent-soft);
+  box-shadow: 5px 5px 0 var(--as-accent);
+}
+
+.as-card-select:focus-visible {
+  outline-color: var(--as-focus);
+  outline-offset: 5px;
+  border-radius: 0;
+}
+
+.as-card-check {
+  top: 14px;
+  right: 14px;
+  width: 23px;
+  height: 23px;
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+}
+
+.as-card[data-selected="true"] .as-card-check {
+  border-color: var(--as-accent);
+  background: var(--as-accent);
+}
+
+.as-card-title {
+  margin-right: 32px;
+  color: var(--as-text);
+  font-family: var(--as-font-display);
+  font-size: 1rem;
+  font-weight: 900;
+  letter-spacing: -0.025em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.as-card-desc {
+  margin-top: 7px;
+  color: var(--as-text-muted);
+  font-size: var(--as-fs-sm);
+  line-height: 1.45;
+}
+
+.as-card-tiers {
+  gap: 6px;
+  margin-top: 14px;
+}
+
+.as-tier-chip,
+.as-tag,
+.as-dep-chip {
+  border: 1px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-bg);
+}
+
+.as-tier-chip {
+  gap: 5px;
+  padding: 3px 7px;
+  color: var(--as-text-muted);
+  font-family: var(--as-mono);
+  font-size: 10.5px;
+}
+
+.as-tier-name {
+  color: var(--as-accent-text);
+}
+
+.as-card-meta {
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 2px solid var(--as-border);
+  color: var(--as-text-muted);
+  font-family: var(--as-mono);
+  font-size: 11px;
+}
+
+.as-card[data-selected="true"] .as-card-meta {
+  border-top-color: var(--as-accent);
+}
+
+.as-card-comp > summary {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.as-card-comp > summary:hover {
+  color: var(--as-accent);
+}
+
+/* panels, rows, data */
+.as-panel,
+.as-details,
+.as-collapse {
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-surface);
+  box-shadow: var(--as-shadow);
+}
+
+.as-panel {
+  padding: 5px 18px;
+}
+
+.as-details {
+  padding: 4px 18px;
+}
+
+.as-collapse {
+  padding: 0 18px;
+}
+
+.as-collapse[data-variant="warn"],
+.as-details[data-variant="warn"] {
+  border-color: var(--as-accent);
+  background: var(--as-accent-soft);
+}
+
+.as-row {
+  min-height: 54px;
+  gap: 14px;
+  padding: 11px 0;
+  border-bottom: 1px solid var(--as-border);
+  transition: background var(--as-dur) ease-out;
+}
+
+.as-panel > .as-row:hover {
+  background: var(--as-surface-2);
+}
+
+.as-row-name {
+  color: var(--as-text);
+  font-weight: 800;
+}
+
+.as-row-desc,
+.as-row-detail,
+.as-lock-note {
+  color: var(--as-text-muted);
+}
+
+.as-row-detail,
+.as-summary-grid dd,
+.as-filelist,
+.as-code {
+  font-family: var(--as-mono);
+}
+
+.as-summary-grid {
+  gap: 9px 20px;
+  padding: 12px 0;
+}
+
+.as-summary-grid dt {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.as-summary-grid dd {
+  color: var(--as-text);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.as-dep-chips {
+  gap: 5px;
+  margin-top: 6px;
+}
+
+.as-dep-label,
+.as-dep-kind {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+  font-weight: 700;
+}
+
+.as-dep-chip {
+  max-width: 260px;
+  padding: 1px 6px;
+  color: var(--as-text-muted);
+  font-size: 10.5px;
+}
+
+.as-dep-more {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+  font-weight: 700;
+}
+
+.as-dep-more:hover {
+  color: var(--as-accent);
+}
+
+/* controls */
+.as-select,
+.as-input {
+  min-height: 42px;
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-bg);
+  color: var(--as-text);
+  font-family: var(--as-mono);
+  font-size: 12px;
+  transition:
+    border-color var(--as-dur) ease-out,
+    background var(--as-dur) ease-out;
+}
+
+.as-select:hover,
+.as-input:hover {
+  border-color: var(--as-accent);
+  background: var(--as-surface-2);
+}
+
+.as-input::placeholder {
+  color: var(--as-text-muted);
+  opacity: 0.78;
+}
+
+.as-label,
+.as-tier-sublabel {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+  font-size: 10.5px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.as-switch-wrap {
+  min-width: 44px;
+  min-height: 44px;
+  justify-content: center;
+}
+
+.as-switch {
+  width: 42px;
+  height: 24px;
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-bg);
+}
+
+.as-switch:hover {
+  border-color: var(--as-accent);
+}
+
+.as-switch[data-checked] {
+  border-color: var(--as-accent);
+  background: var(--as-accent);
+}
+
+.as-switch-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 0;
+  background: var(--as-text-muted);
+  transform: translateX(3px);
+}
+
+.as-switch[data-checked] .as-switch-thumb {
+  background: var(--as-accent-fill-text);
+  transform: translateX(21px);
+}
+
+.as-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 8px 16px;
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-surface);
+  box-shadow: 3px 3px 0 var(--as-color-shadow);
+  color: var(--as-text);
+  font-family: var(--as-mono);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.045em;
+  text-transform: uppercase;
+  transition:
+    background var(--as-dur) ease-out,
+    border-color var(--as-dur) ease-out,
+    box-shadow var(--as-dur) ease-out,
+    transform var(--as-dur) ease-out;
+}
+
+.as-btn:hover {
+  border-color: var(--as-accent);
+  background: var(--as-surface-2);
+  color: var(--as-accent-text);
+  transform: translate(-1px, -1px);
+}
+
+.as-btn:active {
+  box-shadow: 1px 1px 0 var(--as-color-shadow);
+  transform: translate(2px, 2px);
+}
+
+.as-btn[data-variant="primary"] {
+  border-color: var(--as-accent);
+  background: var(--as-accent);
+  box-shadow: 3px 3px 0 var(--as-color-orange-700);
+  color: var(--as-accent-fill-text);
+}
+
+.as-btn[data-variant="primary"]:hover {
+  border-color: var(--as-accent-hover);
+  background: var(--as-accent-hover);
+  color: var(--as-accent-fill-text);
+}
+
+.as-btn[data-variant="danger"] {
+  border-color: var(--as-danger);
+  color: var(--as-danger);
+}
+
+.as-btn[data-variant="danger"]:hover {
+  border-color: var(--as-danger);
+  background: var(--as-accent-soft);
+}
+
+.as-btn[data-size="sm"] {
+  min-height: 34px;
+  padding: 5px 10px;
+  font-size: 10px;
+}
+
+.as-actions {
+  margin-top: 22px;
+}
+
+.as-seg {
+  gap: 0;
+  padding: 0;
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-bg);
+}
+
+.as-seg-item {
+  min-height: 36px;
+  border-right: 1px solid var(--as-border-strong);
+  border-radius: 0;
+  color: var(--as-text-muted);
+  font-family: var(--as-mono);
+  font-size: 10.5px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.as-seg-item:last-child {
+  border-right: 0;
+}
+
+.as-seg-item:hover {
+  background: var(--as-surface-2);
+  color: var(--as-text);
+}
+
+.as-seg-item[data-pressed] {
+  background: var(--as-accent);
+  color: var(--as-accent-fill-text);
+}
+
+.as-tag {
+  padding: 1px 5px;
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+  font-size: 9.5px;
+  line-height: 1.6;
+}
+
+.as-tag[data-variant="custom"] {
+  border-color: var(--as-accent);
+  color: var(--as-accent-text);
+}
+
+.as-tag-warn {
+  border-color: var(--as-accent);
+  color: var(--as-accent);
+}
+
+.as-remove,
+.as-banner-close,
+.as-combo-clear {
+  min-width: 38px;
+  min-height: 38px;
+  border: 1px solid transparent;
+  border-radius: 0;
+  color: var(--as-text-muted);
+  transition:
+    color var(--as-dur) ease-out,
+    background var(--as-dur) ease-out,
+    border-color var(--as-dur) ease-out;
+}
+
+.as-remove:hover,
+.as-banner-close:hover,
+.as-combo-clear:hover {
+  border-color: var(--as-accent);
+  background: var(--as-accent-soft);
+  color: var(--as-accent);
+}
+
+/* feedback, lists, and code */
+.as-notice,
+.as-error,
+.as-banner {
+  border: 2px solid var(--as-border-strong);
+  border-left: 6px solid var(--as-accent);
+  border-radius: 0;
+  box-shadow: var(--as-shadow);
+}
+
+.as-notice {
+  background: var(--as-accent-soft);
+  color: var(--as-text);
+}
+
+.as-error {
+  border-color: var(--as-danger);
+  border-left-color: var(--as-danger);
+  background: var(--as-accent-soft);
+  color: var(--as-danger);
+}
+
+.as-banner {
+  background: var(--as-surface-2);
+}
+
+.as-ok {
+  color: var(--as-ok);
+}
+
+.as-warn,
+.as-file-status {
+  color: var(--as-accent-text);
+}
+
+.as-file-status[data-removed],
+.as-file-removed {
+  color: var(--as-danger);
+}
+
+.as-code {
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+  background: var(--as-bg);
+  color: var(--as-text-muted);
+}
+
+.as-details > .as-summary,
+.as-collapse-trigger {
+  min-height: 42px;
+  color: var(--as-text);
+  font-family: var(--as-mono);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.as-summary:hover,
+.as-collapse-trigger:hover {
+  color: var(--as-accent-text);
+}
+
+.as-count,
+.as-section-count {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+}
+
+/* review rail and expanders */
+.as-review {
+  gap: 28px;
+}
+
+.as-rail {
+  top: 20px;
+}
+
+.as-rail-panel {
+  border-color: var(--as-accent);
+  padding: 17px;
+  box-shadow: 6px 6px 0 var(--as-accent);
+}
+
+.as-rail-grid {
+  grid-template-columns: 76px minmax(0, 1fr);
+}
+
+.as-rail-counts,
+.as-rail-previews,
+.as-rail-actions {
+  border-top: 2px solid var(--as-border);
+}
+
+.as-rail-deletions {
+  color: var(--as-danger);
+}
+
+.as-collapse-head {
+  min-height: 48px;
+  border-bottom: 2px solid var(--as-border-strong);
+}
+
+.as-collapse-head-trigger {
+  min-height: 48px;
+  padding: 8px 10px;
+  margin: 0 -10px;
+  border-radius: 0;
+}
+
+.as-collapse-head-trigger:hover,
+.as-collapse-head-trigger:focus-visible {
+  background: var(--as-surface-2);
+}
+
+.as-collapse-head-trigger .as-section-title {
+  border-left-width: 4px;
+  text-decoration: none;
+}
+
+.as-collapse-head-trigger:hover .as-section-title,
+.as-collapse-head-trigger:focus-visible .as-section-title,
+.as-collapse-head-trigger:hover .as-chevron,
+.as-collapse-head-trigger:focus-visible .as-chevron {
+  color: var(--as-accent-text);
+}
+
+.as-chevron {
+  color: var(--as-accent-text);
+}
+
+.as-section-panel > .as-panel,
+.as-section-panel > .as-warn {
+  margin-top: 12px;
+}
+
+.as-tier-fields {
+  gap: 14px;
+}
+
+.as-tier-field {
+  padding: 12px;
+  border: 2px solid var(--as-border);
+  background: var(--as-bg);
+}
+
+.as-row-nested {
+  padding-left: 44px;
+  background: var(--as-bg);
+}
+
+/* floating surfaces */
+.as-positioner {
+  z-index: 1000;
+}
+
+.as-popover,
+.as-tooltip {
+  border: 2px solid var(--as-accent);
+  border-radius: 0;
+  background: var(--as-surface);
+  box-shadow: 6px 6px 0 var(--as-color-shadow);
+}
+
+.as-popover {
+  color: var(--as-text);
+}
+
+.as-tooltip {
+  color: var(--as-text);
+  font-family: var(--as-mono);
+}
+
+.as-combo-popup,
+.as-add-popup {
+  padding: 8px;
+}
+
+.as-combo-group-label,
+.as-add-group-label {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+  font-weight: 800;
+}
+
+.as-combo-item,
+.as-add-item {
+  border-radius: 0;
+}
+
+.as-combo-item[data-highlighted],
+.as-add-item:hover {
+  background: var(--as-accent-soft);
+  color: var(--as-text);
+}
+
+.as-combo-item[data-selected],
+.as-combo-indicator {
+  color: var(--as-accent);
+}
+
+.as-add-check {
+  border: 2px solid var(--as-border-strong);
+  border-radius: 0;
+}
+
+.as-add-check[data-on="true"] {
+  border-color: var(--as-accent);
+  background: var(--as-accent);
+  color: var(--as-accent-fill-text);
+}
+
+.as-add-group + .as-add-group {
+  border-top: 1px solid var(--as-border);
+}
+
+.as-model-badge {
+  border: 1px solid var(--as-accent);
+  border-radius: 0;
+  background: var(--as-accent-soft);
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+}
+
+.as-sheet-backdrop {
+  background: rgb(17 16 14 / 0.78);
+}
+
+.as-sheet {
+  border-left: 3px solid var(--as-accent);
+  background: var(--as-surface);
+  box-shadow: -8px 0 0 var(--as-color-shadow);
+}
+
+.as-sheet-title {
+  font-family: var(--as-font-display);
+  font-size: 1.1rem;
+  font-weight: 900;
+  letter-spacing: -0.035em;
+  text-transform: uppercase;
+}
+
+.as-preview-status {
+  color: var(--as-accent-text);
+  font-family: var(--as-mono);
+}
+
+.as-stopped {
+  max-width: 540px;
+  margin: 56px auto;
+  padding: 28px;
+  border: 3px solid var(--as-accent);
+  background: var(--as-surface);
+  box-shadow: 7px 7px 0 var(--as-accent);
+}
+
+@media (max-width: 720px) {
+  .as-app {
+    padding: 16px 16px 56px;
+  }
+
+  .as-header {
+    align-items: flex-start;
+    margin-bottom: 24px;
+  }
+
+  .as-project-switch {
+    margin-left: auto;
+    padding-left: 0;
+    border-left: 0;
+  }
+
+  .as-project-switch .as-label {
+    display: none;
+  }
+
+  .as-steps {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .as-step {
+    flex: 1;
+    padding-inline: 4px;
+    text-align: center;
+  }
+
+  .as-grid > .as-card:first-child {
+    grid-column: span 1;
+  }
+
+  .as-card {
+    min-height: 0;
+  }
+
+  .as-panel {
+    padding-inline: 14px;
+  }
+
+  .as-row-nested {
+    padding-left: 18px;
+  }
+}