axis-toast-host {
  --axis-toast-max-width: calc(var(--av-space-9) * 8);
}

axis-skeleton {
  --axis-skeleton-bg: var(--av-bg-surface-2);
  --axis-skeleton-highlight: var(--av-bg-surface-3);
}

axis-dialog::part(dialog) {
  border: 1px solid var(--av-line-strong);
  border-radius: var(--av-radius-lg);
  background: var(--av-bg-surface-2);
  color: var(--av-fg-primary);
  box-shadow: var(--av-shadow-high);
}

axis-command-palette::part(dialog) {
  border: 1px solid var(--av-line-strong);
  border-radius: var(--av-radius-lg);
  background: var(--av-bg-surface-2);
  color: var(--av-fg-primary);
}

axis-pipeline-stepper {
  --axis-stepper-pending: var(--av-fg-tertiary);
  --axis-stepper-active: var(--av-accent-cyan);
  --axis-stepper-passed: var(--av-state-success);
  --axis-stepper-failed: var(--av-state-danger);
}

@media (prefers-reduced-motion: reduce) {
  axis-toast-host,
  axis-skeleton,
  axis-dialog,
  axis-command-palette,
  axis-pipeline-stepper {
    --av-duration-control: 0ms;
    --av-duration-panel: 0ms;
    --av-duration-dock: 0ms;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   /app/docs — Getting started guide (DOC-01)
   ═══════════════════════════════════════════════════════════════════ */
.docs-h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-family: var(--av-font-display, inherit);
  color: var(--av-fg-primary, #E6EAF2);
}
.docs-lead {
  margin: 0;
  font-size: 15px;
  color: var(--av-fg-secondary, #9CA3AF);
  line-height: 1.6;
}
.docs-h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--av-fg-primary, #E6EAF2);
}
.docs-hr {
  border: 0;
  border-top: 1px solid var(--av-line-soft, rgba(255,255,255,0.08));
  margin: 32px 0 0;
}
.docs-link {
  color: var(--av-accent-cyan, #18D2FF);
  text-decoration: none;
}
.docs-link:hover { text-decoration: underline; }

/* Steps */
.docs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.docs-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.docs-step-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--av-accent-cyan, #18D2FF), rgba(168,85,247,0.7));
  color: var(--av-bg-canvas, #090B0F);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.docs-step-body { flex: 1; }
.docs-step-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--av-fg-primary, #E6EAF2);
}
.docs-step-text {
  margin: 0;
  font-size: 13px;
  color: var(--av-fg-secondary, #9CA3AF);
  line-height: 1.6;
}
.docs-step-text a     { color: var(--av-accent-cyan, #18D2FF); }
.docs-step-text em    { color: var(--av-fg-primary); font-style: italic; }
.docs-step-text strong { color: var(--av-fg-primary); }
.docs-step-text kbd   {
  background: var(--av-bg-surface-2, #14181F);
  border: 1px solid var(--av-line-strong, rgba(255,255,255,0.16));
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: var(--av-font-mono, monospace);
  color: var(--av-fg-primary);
}

/* Code blocks */
.docs-code {
  display: block;
  background: var(--av-bg-surface-2, #14181F);
  border: 1px solid var(--av-line-soft, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--av-font-mono, monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--av-fg-primary, #E6EAF2);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* Concepts DL */
.docs-dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.docs-dl-row { display: flex; gap: 12px; align-items: baseline; }
.docs-dt {
  flex-shrink: 0;
  min-width: 160px;
  font-size: 13px;
  font-weight: 600;
  color: var(--av-accent-cyan, #18D2FF);
  font-family: var(--av-font-mono, monospace);
}
.docs-dd {
  margin: 0;
  font-size: 13px;
  color: var(--av-fg-secondary, #9CA3AF);
  line-height: 1.5;
}

/* Kinds table */
.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.docs-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--av-fg-secondary, #9CA3AF);
  border-bottom: 1px solid var(--av-line-soft, rgba(255,255,255,0.08));
}
.docs-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--av-line-soft, rgba(255,255,255,0.06));
  color: var(--av-fg-secondary, #9CA3AF);
  font-family: var(--av-font-mono, monospace);
}
.docs-table td:first-child { color: var(--av-fg-primary, #E6EAF2); }
.docs-table tr:last-child td { border-bottom: 0; }
.docs-table tr:hover td { background: var(--av-bg-surface-2, #14181F); }

/* API cards */
.docs-api-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.docs-api-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--av-bg-surface-1, #0E1116);
  border: 1px solid var(--av-line-soft, rgba(255,255,255,0.08));
  border-radius: 8px;
}
.docs-api-method {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--av-font-mono, monospace);
  letter-spacing: 0.05em;
}
.docs-api-method--post { background: rgba(24,210,255,0.12); color: var(--av-accent-cyan, #18D2FF); }
.docs-api-method--get  { background: rgba(52,211,153,0.12); color: #34D399; }
.docs-api-path {
  font-family: var(--av-font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--av-fg-primary, #E6EAF2);
}
.docs-api-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--av-fg-secondary, #9CA3AF);
  line-height: 1.5;
}
.docs-api-desc code {
  font-family: var(--av-font-mono, monospace);
  font-size: 11px;
  color: var(--av-fg-primary, #E6EAF2);
}

@media (max-width: 640px) {
  .docs-dl-row { flex-direction: column; gap: 4px; }
  .docs-dt { min-width: unset; }
  .docs-step-num { display: none; }
}

/* Docs sidebar layout (expanded docs) */
.docs-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.docs-sidebar {
  position: sticky; top: 60px; height: fit-content;
  padding: 24px 16px 24px 0;
  border-right: 1px solid var(--av-line-soft, #1E2430);
}
.docs-sidebar-title {
  font-family: var(--av-font-mono, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--av-fg-tertiary, #738398); margin: 0 0 12px;
}
.docs-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.docs-nav-link {
  display: block; padding: 6px 10px; font-size: 12.5px;
  color: var(--av-fg-secondary, #9CA3AF);
  border-radius: var(--av-radius-sm, 4px);
  transition: color .15s, background .15s;
  text-decoration: none;
}
.docs-nav-link:hover { color: var(--av-fg-primary, #EEF4FA); background: var(--av-bg-surface-1, #10141A); }
.docs-nav-link.active { color: var(--av-accent-cyan, #18D2FF); background: color-mix(in srgb, var(--av-accent-cyan, #18D2FF) 10%, transparent); }
.docs-sidebar-foot { margin-top: 24px; font-size: 11px; }
.docs-main { padding: 24px 32px 64px; }
.docs-hero { margin-bottom: 32px; }
.docs-section { margin-bottom: 12px; }
.docs-h2 { font-size: 20px; font-weight: 700; color: var(--av-fg-primary, #EEF4FA); margin: 0 0 16px; scroll-margin-top: 80px; }
.docs-h3 { font-size: 14px; font-weight: 600; color: var(--av-fg-primary, #EEF4FA); margin: 0 0 10px; }

/* Pipeline stage list */
.docs-pipeline { display: flex; flex-direction: column; gap: 4px; }
.docs-pipe-step {
  display: grid; grid-template-columns: 28px 160px 1fr;
  gap: 12px; align-items: baseline; padding: 8px 12px;
  background: var(--av-bg-surface-1, #10141A);
  border-radius: var(--av-radius-sm, 4px);
  border-left: 2px solid transparent;
  font-size: 12.5px;
  transition: border-color .15s;
}
.docs-pipe-step:hover { border-left-color: var(--av-accent-cyan, #18D2FF); }
.docs-pipe-num { font-family: var(--av-font-mono, monospace); font-size: 10px; color: var(--av-fg-quaternary, #4B5563); }
.docs-pipe-name { font-family: var(--av-font-mono, monospace); font-size: 11px; font-weight: 600; color: var(--av-accent-cyan, #18D2FF); }
.docs-pipe-desc { color: var(--av-fg-secondary, #9CA3AF); }

/* Validation cards */
.docs-val-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.docs-val-card { background: var(--av-bg-surface-1, #10141A); border: 1px solid var(--av-line-soft, #1E2430); border-radius: var(--av-radius-md, 8px); padding: 16px; }
.docs-val-cat { font-size: 12px; font-weight: 600; color: var(--av-accent-cyan, #18D2FF); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; }
.docs-val-list { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 5px; }
.docs-val-list li { font-size: 12px; color: var(--av-fg-secondary, #9CA3AF); }

/* CLI command table */
.docs-cli-table { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.docs-cli-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: baseline;
  padding: 8px 12px; background: var(--av-bg-surface-1, #10141A);
  border-radius: var(--av-radius-sm, 4px); font-size: 12.5px;
}
.docs-cli-cmd { font-family: var(--av-font-mono, monospace); font-size: 11.5px; color: var(--av-accent-cyan, #18D2FF); white-space: nowrap; }
.docs-cli-row span { color: var(--av-fg-secondary, #9CA3AF); }

/* Deployment cards */
.docs-deploy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.docs-deploy-card { background: var(--av-bg-surface-1, #10141A); border: 1px solid var(--av-line-soft, #1E2430); border-radius: var(--av-radius-md, 8px); padding: 20px; }
.docs-deploy-card h3 { font-size: 13px; font-weight: 600; color: var(--av-fg-primary, #EEF4FA); margin: 0 0 8px; }
.docs-deploy-card p { font-size: 12px; color: var(--av-fg-secondary, #9CA3AF); line-height: 1.5; margin: 0 0 10px; }
.docs-deploy-url { font-family: var(--av-font-mono, monospace); font-size: 11px; color: var(--av-accent-cyan, #18D2FF); }

/* Docs link style */
.docs-link { color: var(--av-accent-cyan, #18D2FF); }

@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; border-right: none; border-bottom: 1px solid var(--av-line-soft, #1E2430); padding: 16px 0; }
  .docs-nav-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .docs-main { padding: 20px 16px 48px; }
  .docs-pipe-step { grid-template-columns: 28px 1fr; }
  .docs-pipe-name { grid-column: 2; }
  .docs-pipe-desc { grid-column: 1 / -1; padding-left: 40px; }
  .docs-cli-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Shared badge tokens — used by marketplace route + docs route
   (portal-layout.css has copies for landing.html; these serve the SPA shell)
   ═══════════════════════════════════════════════════════════════════ */
.kind-badge {
  display: inline-block; font-family: var(--av-font-mono, monospace); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--av-accent-cyan, #18D2FF);
  border: 1px solid var(--av-accent-cyan, #18D2FF); border-radius: 999px;
  padding: 2px 7px;
}
.kind-badge--sm { font-size: 9px; padding: 1px 6px; }
.quality-badge {
  display: inline-block; font-family: var(--av-font-mono, monospace); font-size: 10px;
  font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 2px 7px;
}
.quality-badge--aplus { background: rgba(0,245,160,.15); color: #00F5A0; border: 1px solid #00F5A0; }
.quality-badge--a     { background: rgba(24,210,255,.15); color: var(--av-accent-cyan, #18D2FF); border: 1px solid var(--av-accent-cyan, #18D2FF); }
.quality-badge--b     { background: rgba(126,185,255,.15); color: #7EB9FF; border: 1px solid #7EB9FF; }
.quality-badge--c     { background: rgba(245,166,35,.15); color: #F5A623; border: 1px solid #F5A623; }

/* ═══════════════════════════════════════════════════════════════════
   App-shell component primitives
   Buttons, inputs, forms, tables, page layout helpers.
   Loaded by /app/index.html for every route. Studio uses its own
   .studio-* classes and is unaffected by the scoped bare-element rules.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page layout ─────────────────────────────────────────────────── */
.page-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 0 64px;
}
.page-h1 {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-fg-primary);
}
.page-h2 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--av-fg-tertiary);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-space-2);
  padding: 8px 16px;
  font-family: var(--av-font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--av-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background     var(--av-duration-control) var(--av-easing-out),
    border-color   var(--av-duration-control) var(--av-easing-out),
    box-shadow     var(--av-duration-control) var(--av-easing-out),
    color          var(--av-duration-control) var(--av-easing-out),
    filter         var(--av-duration-control) var(--av-easing-out);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--av-glow-cyan);
  border-color: var(--av-accent-cyan);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — orange action (Averionics 5 % action allocation) */
.btn-primary {
  background: var(--av-accent-orange);
  color: var(--av-bg-canvas);
  border-color: var(--av-accent-orange);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: var(--av-glow-orange);
}
.btn-primary:focus-visible {
  box-shadow: var(--av-glow-orange);
  border-color: var(--av-accent-orange);
}

/* Cyan — confirmation / low-friction action */
.btn-cyan {
  background: rgba(24,210,255,0.1);
  color: var(--av-accent-cyan);
  border-color: rgba(24,210,255,0.32);
}
.btn-cyan:hover:not(:disabled) {
  background: rgba(24,210,255,0.18);
  border-color: var(--av-accent-cyan);
  box-shadow: var(--av-glow-cyan);
}
.btn-cyan:focus-visible {
  border-color: var(--av-accent-cyan);
  box-shadow: var(--av-glow-cyan);
}

/* Secondary — medium-emphasis surface button */
.btn-secondary {
  background: var(--av-bg-surface-3);
  color: var(--av-fg-primary);
  border-color: var(--av-line-strong);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--av-accent-cyan);
  background: var(--av-bg-elevated);
  color: var(--av-accent-cyan);
}

/* Ghost — low-emphasis, border only */
.btn-ghost {
  background: transparent;
  color: var(--av-fg-secondary);
  border-color: var(--av-line-strong);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--av-fg-primary);
  border-color: var(--av-accent-cyan);
  background: rgba(24,210,255,0.05);
}

/* Danger */
.btn-danger {
  background: rgba(255,90,95,0.1);
  color: var(--av-state-danger);
  border-color: rgba(255,90,95,0.3);
}
.btn-danger:hover:not(:disabled) {
  background: var(--av-state-danger);
  color: #fff;
  border-color: var(--av-state-danger);
}

/* Size modifiers */
.btn-sm  { padding: 5px 12px; font-size: 11px; }
.btn-xs  { padding: 3px 9px;  font-size: 10px; }
.btn-lg  { padding: 11px 22px; font-size: 14px; }

/* ── Inputs ──────────────────────────────────────────────────────── */
/* Explicit class variants (safe everywhere) */
.input,
.form-input {
  display: block;
  width: 100%;
  background: var(--av-bg-surface-1);
  color: var(--av-fg-primary);
  border: 1px solid var(--av-line-soft);
  border-radius: var(--av-radius-sm);
  padding: 8px 12px;
  font-family: var(--av-font-ui);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
  transition:
    border-color var(--av-duration-control) var(--av-easing-out),
    box-shadow   var(--av-duration-control) var(--av-easing-out);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus, .input:focus-visible,
.form-input:focus, .form-input:focus-visible {
  outline: none;
  border-color: var(--av-accent-cyan);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.2),
    0 0 0 1px rgba(24,210,255,0.38),
    0 0 14px rgba(24,210,255,0.08);
}
.input::placeholder, .form-input::placeholder {
  color: var(--av-fg-tertiary);
  opacity: 0.7;
}
.input--sm { padding: 4px 8px; font-size: 12px; }

/* Bare-element instrument styling — scoped to .av-panel so the studio
   controls (inside .studio-body, never inside .av-panel) are unaffected */
.av-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.av-panel select,
.av-panel textarea,
.page-section input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.page-section select,
.page-section textarea {
  display: block;
  width: 100%;
  background: var(--av-bg-surface-1);
  color: var(--av-fg-primary);
  border: 1px solid var(--av-line-soft);
  border-radius: var(--av-radius-sm);
  padding: 8px 12px;
  font-family: var(--av-font-ui);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
  box-sizing: border-box;
  transition:
    border-color var(--av-duration-control) var(--av-easing-out),
    box-shadow   var(--av-duration-control) var(--av-easing-out);
  -webkit-appearance: none;
  appearance: none;
}
.av-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
.av-panel select:focus,
.av-panel textarea:focus,
.page-section input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
.page-section select:focus,
.page-section textarea:focus {
  outline: none;
  border-color: var(--av-accent-cyan);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.2),
    0 0 0 1px rgba(24,210,255,0.38),
    0 0 14px rgba(24,210,255,0.08);
}
.av-panel input::placeholder,
.av-panel textarea::placeholder,
.page-section input::placeholder,
.page-section textarea::placeholder {
  color: var(--av-fg-tertiary);
  opacity: 0.7;
}
.av-panel textarea,
.page-section textarea {
  resize: vertical;
  min-height: 80px;
}
.av-panel select,
.page-section select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23738398'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

/* ── Labels ──────────────────────────────────────────────────────── */
.form-label,
.av-panel label,
.page-section label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--av-fg-tertiary);
  margin-bottom: 5px;
}

/* ── Form group spacing ──────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.form-group:last-child { margin-bottom: 0; }

/* ── Panel heading reset — .av-panel h1/h2/h3 ───────────────────── */
.av-panel h1 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--av-fg-primary);
  letter-spacing: -0.01em;
}
.av-panel h2 {
  margin: 20px 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-fg-tertiary);
}
.av-panel h2:first-child { margin-top: 0; }
.av-panel h3 {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--av-fg-primary);
}

/* ── Panel bare submit button ────────────────────────────────────── */
.av-panel button:not([class]),
.page-section button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--av-font-ui);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--av-radius-sm);
  border: 1px solid var(--av-line-strong);
  background: var(--av-bg-surface-3);
  color: var(--av-fg-primary);
  cursor: pointer;
  transition:
    border-color var(--av-duration-control) var(--av-easing-out),
    background   var(--av-duration-control) var(--av-easing-out);
  margin-top: 10px;
}
.av-panel button:not([class]):hover,
.page-section button:not([class]):hover {
  border-color: var(--av-accent-cyan);
  background: var(--av-bg-elevated);
  color: var(--av-accent-cyan);
}
.av-panel button:not([class]):focus-visible,
.page-section button:not([class]):focus-visible {
  outline: none;
  border-color: var(--av-accent-cyan);
  box-shadow: var(--av-glow-cyan);
}

/* ── Tables in panels ────────────────────────────────────────────── */
.av-panel table,
.page-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 4px;
}
.av-panel th,
.page-section th {
  text-align: left;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-fg-tertiary);
  border-bottom: 1px solid var(--av-line-soft);
}
.av-panel td,
.page-section td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(36,49,64,0.5);
  color: var(--av-fg-secondary);
}
.av-panel tr:last-child td,
.page-section tr:last-child td { border-bottom: 0; }
.av-panel tr:hover td,
.page-section tr:hover td { background: rgba(24,210,255,0.03); }

/* ── Panel p / li spacing ────────────────────────────────────────── */
.av-panel p { margin: 0 0 10px; font-size: 13px; color: var(--av-fg-secondary); line-height: 1.55; }
.av-panel p:last-child { margin-bottom: 0; }
.av-panel p strong { color: var(--av-fg-primary); }
.av-panel + .av-panel { margin-top: 20px; }

/* ── Links in panels (prevents browser-default blue on dark bg) ─── */
/* underline is required by WCAG 2 link-in-text-block rule */
.av-panel a:not(.btn),
.page-section a:not(.btn) {
  color: var(--av-accent-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(24, 210, 255, 0.45);
  text-underline-offset: 2px;
}

/* Button size modifiers (legacy aliases kept) */

/* ═══════════════════════════════════════════════════════════════════
   /app/marketplace — full card-grid marketplace route (MKT-01)
   ═══════════════════════════════════════════════════════════════════ */
.mkt-page { padding: var(--av-space-5, 20px) var(--av-space-4, 16px); max-width: 1200px; margin: 0 auto; }
.mkt-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--av-space-4, 16px); margin-bottom: var(--av-space-5, 20px); flex-wrap: wrap;
}
.mkt-title { font-size: clamp(22px, 4vw, 32px); font-weight: 700; color: var(--av-fg-primary, #EEF4FA); margin: 0; }
.mkt-subtitle { font-size: 13px; color: var(--av-fg-secondary, #9CA3AF); margin: 4px 0 0; }

.mkt-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--av-line-soft, #1E2430);
  margin-bottom: var(--av-space-4, 16px);
}
.mkt-tab {
  all: unset; cursor: pointer; padding: 9px 16px; font-size: 13px; font-weight: 500;
  color: var(--av-fg-secondary, #9CA3AF); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.mkt-tab:hover { color: var(--av-fg-primary, #EEF4FA); }
.mkt-tab.active { color: var(--av-accent-cyan, #18D2FF); border-bottom-color: var(--av-accent-cyan, #18D2FF); }

.mkt-controls { display: flex; flex-direction: column; gap: var(--av-space-3, 12px); margin-bottom: var(--av-space-5, 20px); }
.mkt-search { max-width: 360px; }
.mkt-filter-row { display: flex; flex-wrap: wrap; gap: var(--av-space-2, 8px); align-items: center; }
.mkt-filter-label {
  font-size: 11px; font-family: var(--av-font-mono, monospace); text-transform: uppercase;
  letter-spacing: .06em; color: var(--av-fg-tertiary, #738398); min-width: 44px;
}
.mkt-filter.active {
  background: rgba(24,210,255,.12); color: var(--av-accent-cyan, #18D2FF);
  border-color: var(--av-accent-cyan, #18D2FF);
}
.mkt-sort { max-width: 200px; margin-left: auto; }

.mkt-grid { display: grid; gap: var(--av-space-4, 16px); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mkt-listing-card {
  background: var(--av-bg-surface-1, #10141A); border: 1px solid var(--av-line-soft, #1E2430);
  border-radius: var(--av-radius-lg, 12px); overflow: hidden;
  transition: border-color .15s, transform .15s;
  display: flex; flex-direction: column;
}
.mkt-listing-card:hover { border-color: var(--av-accent-cyan, #18D2FF); transform: translateY(-2px); }
.mkt-listing-preview {
  height: 130px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #13171D 0%, var(--av-bg-canvas, #090B0F) 100%);
  color: var(--av-accent-cyan, #18D2FF);
}
.mkt-listing-preview svg { width: 56px; height: 56px; opacity: .55; }
.mkt-listing-body { padding: var(--av-space-3, 12px) var(--av-space-4, 16px); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mkt-listing-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.mkt-listing-name { font-weight: 600; font-size: 13px; color: var(--av-fg-primary, #EEF4FA); margin-top: 2px; }
.mkt-listing-creator { font-size: 11px; color: var(--av-fg-tertiary, #738398); }
.mkt-listing-meta { font-size: 11px; color: var(--av-fg-tertiary, #738398); }
.mkt-listing-price { font-family: var(--av-font-mono, monospace); font-size: 12px; font-weight: 700; color: #F5A623; margin-top: auto; padding-top: 6px; }
.mkt-listing-actions { display: flex; gap: var(--av-space-2, 8px); margin-top: var(--av-space-2, 8px); align-items: center; }

.mkt-btn-wish { padding: 5px 8px; line-height: 1; }
.mkt-btn-wish svg { width: 14px; height: 14px; }
.mkt-btn-wish--active { color: #F05B7D; border-color: #F05B7D; }

.mkt-empty { padding: 48px 16px; text-align: center; color: var(--av-fg-secondary, #9CA3AF); }
.mkt-count { font-size: 12px; color: var(--av-fg-tertiary, #738398); text-align: right; margin-top: var(--av-space-3, 12px); }
.mkt-loading { padding: 48px 16px; text-align: center; color: var(--av-fg-secondary, #9CA3AF); font-size: 13px; }

.mkt-create-form { margin-bottom: var(--av-space-5, 20px); }
.mkt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--av-space-4, 16px); margin: var(--av-space-4, 16px) 0; }
.mkt-form-actions { display: flex; gap: var(--av-space-3, 12px); margin-top: var(--av-space-4, 16px); }
@media (max-width: 500px) { .mkt-form-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   /app/billing — Plan comparison & token packs (ACC-02)
   ═══════════════════════════════════════════════════════════════════ */
.billing-page { max-width: 900px; margin: 0 auto; padding: 32px 24px 64px; }

.billing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.billing-h1 {
  margin: 0;
  font-size: 24px;
  font-family: var(--av-font-display, inherit);
  color: var(--av-fg-primary, #EEF4FA);
}
.billing-h2 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--av-fg-secondary, #A9B7C7);
}
.billing-sub {
  margin: -8px 0 14px;
  font-size: 13px;
  color: var(--av-fg-tertiary, #738398);
}

/* Balance card */
.balance-card {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(24,210,255,0.08), rgba(139,92,246,0.05));
  border: 1px solid rgba(24,210,255,0.2);
  border-radius: 12px;
  min-width: 200px;
  text-align: right;
}
.balance-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-fg-tertiary, #738398);
  margin-bottom: 4px;
}
.balance-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-end;
}
.balance-amount span:first-child {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--av-font-mono, monospace);
  color: var(--av-accent-cyan, #18D2FF);
  line-height: 1;
}
.balance-unit { font-size: 13px; color: var(--av-fg-secondary, #A9B7C7); }
.balance-period { font-size: 11px; color: var(--av-fg-tertiary, #738398); margin-top: 4px; }

/* Plan grid */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px;
  background: var(--av-bg-surface-1, #11161D);
  border: 1px solid var(--av-line-soft, #243140);
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-card:hover {
  border-color: var(--av-line-strong, #344658);
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
}
.plan-card--featured {
  border-color: var(--av-accent-cyan, #18D2FF);
  background: linear-gradient(
    135deg,
    rgba(24,210,255,0.05),
    var(--av-bg-surface-1, #11161D)
  );
  box-shadow: 0 0 0 1px rgba(24,210,255,0.2), 0 8px 32px rgba(24,210,255,0.08);
}
.plan-card--current {
  border-color: var(--av-state-success, #37D67A) !important;
}
.plan-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--av-accent-cyan, #18D2FF);
  color: #090B0F;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--av-fg-primary, #EEF4FA);
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: -4px;
}
.plan-price-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--av-fg-primary, #EEF4FA);
  line-height: 1;
}
.plan-price-period { font-size: 12px; color: var(--av-fg-tertiary, #738398); }
.plan-tokens {
  font-size: 12px;
  font-family: var(--av-font-mono, monospace);
  color: var(--av-accent-cyan, #18D2FF);
  font-weight: 600;
}
.plan-features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--av-fg-secondary, #A9B7C7);
  flex: 1;
}
.plan-features li { line-height: 1.4; }

/* Token packs */
.packs-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  background: var(--av-bg-surface-1, #11161D);
  border: 1px solid var(--av-line-soft, #243140);
  border-radius: 10px;
  min-width: 120px;
  transition: border-color 0.15s;
}
.pack-card:hover { border-color: var(--av-accent-cyan, #18D2FF); }
.pack-tokens {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--av-font-mono, monospace);
  color: var(--av-fg-primary, #EEF4FA);
  line-height: 1;
}
.pack-label { font-size: 11px; color: var(--av-fg-tertiary, #738398); margin-top: -2px; }
.pack-price { font-size: 13px; font-weight: 600; color: var(--av-accent-cyan, #18D2FF); }
.billing-loading { font-size: 13px; opacity: 0.55; }

/* Responsive */
@media (max-width: 860px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .plan-grid { grid-template-columns: 1fr; }
  .billing-header { flex-direction: column; }
  .balance-card { text-align: left; width: 100%; }
  .balance-amount { justify-content: flex-start; }
}