:root {
    --px-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --px-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    --px-bg: #f5f6f8;
    --px-surface: #ffffff;
    --px-surface-2: #f2f4f7;
    --px-ink: #1a1d21;
    --px-ink-soft: #3f434a;
    --px-muted: #737882;
    --px-line: #e6e8ec;
    --px-line-strong: #d3d7dd;

    --px-accent: #2f6b46;
    --px-accent-ink: #245537;
    --px-accent-wash: #e9f1ec;

    --px-success: #217a49; --px-success-wash: #e7f3ec;
    --px-warning: #9a6410; --px-warning-wash: #f6eddb;
    --px-danger: #b0402c; --px-danger-wash: #f6e6e2;
    --px-info: #2f5c8a; --px-info-wash: #e8eef5;

    --px-radius: 12px;
    --px-radius-sm: 8px;
    --px-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    --px-nav-bg: #1c1f24;
    --px-nav-ink: #cdd2da;
}

/* ── Standalone console chrome (PraxisConsoleLayout) ─── */
.px-topnav {
    display: flex; align-items: center; gap: 4px;
    background: var(--px-nav-bg); color: var(--px-nav-ink);
    padding: 0 20px; height: 54px;
    font-family: var(--px-font);
}
.px-brand { font-weight: 700; color: #fff; text-decoration: none; margin-right: 18px; font-size: 15px; letter-spacing: -0.01em; }
.px-navlink { color: var(--px-nav-ink); text-decoration: none; padding: 8px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 500; }
.px-navlink:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.px-navlink.active { background: rgba(255, 255, 255, 0.14); color: #fff; }
.px-console-body { padding: 24px; max-width: 1200px; }

/* ── Drop-in nav for embedding hosts (<PraxisNav />) ─── */
.px-tabs {
    display: flex; flex-wrap: wrap; gap: 2px;
    border-bottom: 1px solid var(--px-line); margin-bottom: 20px;
    font-family: var(--px-font);
}
/* Section sub-nav: a quiet secondary row under the section tabs. The selected item gets a discreet
   tinted background, no pills, no borders, no underline. */
.px-subnav {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: -8px 0 20px; font-family: var(--px-font);
}
.px-subnav a {
    padding: 4px 10px; border-radius: 7px; text-decoration: none;
    font-size: 12.5px; font-weight: 500; color: var(--px-muted);
}
.px-subnav a:hover { color: var(--px-ink); background: var(--px-surface-2); }
.px-subnav a.active { color: var(--px-accent-ink); font-weight: 600; background: var(--px-accent-wash); }
.px-tab {
    padding: 9px 14px; text-decoration: none; margin-bottom: -1px;
    color: var(--px-muted); font-size: 13.5px; font-weight: 600;
    border-bottom: 2px solid transparent;
}
.px-tab:hover { color: var(--px-ink); }
.px-tab.active { color: var(--px-accent-ink); border-bottom-color: var(--px-accent); }

/* ── Page shell, every Praxis page wraps its content in .px-page ─── */
.px-page {
    font-family: var(--px-font);
    color: var(--px-ink);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}
.px-page *, .px-page *::before, .px-page *::after { box-sizing: border-box; }
.px-page code {
    font-family: var(--px-mono); font-size: 0.85em;
    background: var(--px-surface-2); color: var(--px-accent-ink);
    padding: 1px 5px; border-radius: 4px;
}
.px-title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.px-title:focus { outline: none; }
.px-subtitle { font-size: 15px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.px-muted { color: var(--px-muted); }
.px-danger-text { color: var(--px-danger); }
.px-page small { font-size: 11.5px; }

/* ── Cards ─── */
.px-card {
    background: var(--px-surface); border: 1px solid var(--px-line);
    border-radius: var(--px-radius); box-shadow: var(--px-shadow);
    margin-bottom: 16px;
}
.px-card--accent { border-color: var(--px-accent); }
.px-card-header { padding: 14px 18px; border-bottom: 1px solid var(--px-line); }
.px-card-title { font-size: 14px; font-weight: 700; margin: 0; }
.px-card-body { padding: 18px; }
.px-card-body--flush { padding: 0; }

/* ── Layout helpers ─── */
.px-grid { display: grid; gap: 16px; }
.px-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.px-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.px-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .px-grid.cols-3, .px-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .px-grid { grid-template-columns: 1fr !important; } }
.px-row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.px-row > * { flex: 1 1 auto; }
.px-mt { margin-top: 16px; }

/* ── Stat card (TokenCostCard) ─── */
.px-stat { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: 15px 17px; box-shadow: var(--px-shadow); }
.px-stat-label { font-size: 12px; color: var(--px-muted); font-weight: 600; }
.px-stat-value { font-family: var(--px-mono); font-size: 24px; font-weight: 600; margin-top: 8px; letter-spacing: -0.02em; }

/* ── Tables ─── */
.px-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.px-table th {
    text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--px-muted); padding: 11px 14px; border-bottom: 1px solid var(--px-line); white-space: nowrap;
}
.px-table td { padding: 11px 14px; border-bottom: 1px solid var(--px-line); vertical-align: middle; }
.px-table tbody tr:last-child td { border-bottom: none; }
.px-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--px-surface-2) 55%, transparent); }
.px-table tbody tr:hover td { background: var(--px-surface-2); }
.px-sort {
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--px-muted); white-space: nowrap;
}
.px-sort:hover { color: var(--px-ink); }
.px-sort.active { color: var(--px-accent-ink); }

/* ── Badges ─── */
.px-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.px-badge--accent { background: var(--px-accent-wash); color: var(--px-accent-ink); }
.px-badge--success { background: var(--px-success-wash); color: var(--px-success); }
.px-badge--warning { background: var(--px-warning-wash); color: var(--px-warning); }
.px-badge--danger { background: var(--px-danger-wash); color: var(--px-danger); }
.px-badge--info { background: var(--px-info-wash); color: var(--px-info); }
.px-badge--neutral { background: var(--px-surface-2); color: var(--px-ink-soft); border-color: var(--px-line); }
.px-badge--dark { background: var(--px-ink); color: #fff; }

/* ── Buttons ─── */
.px-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: 8px; border: 1px solid var(--px-line-strong);
    background: var(--px-surface); color: var(--px-ink); cursor: pointer;
    transition: background 120ms ease;
}
.px-btn:hover:not(:disabled) { background: var(--px-surface-2); }
.px-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.px-btn--primary { background: var(--px-accent); color: #fff; border-color: transparent; }
.px-btn--primary:hover:not(:disabled) { background: var(--px-accent-ink); }
.px-btn--sm { padding: 5px 10px; font-size: 12px; }

/* ── Definition list (BOM runtime) ─── */
.px-deflist { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: center; }
.px-deflist dt { color: var(--px-muted); font-size: 12.5px; font-weight: 600; }
.px-deflist dd { margin: 0; font-size: 13px; }

/* ── Misc ─── */
.px-center { text-align: center; }
.px-pad { padding: 28px; }
.px-empty { text-align: center; padding: 22px; color: var(--px-muted); font-size: 13px; }
.px-spinner { width: 26px; height: 26px; border: 3px solid var(--px-line); border-top-color: var(--px-accent); border-radius: 50%; animation: px-spin 0.7s linear infinite; display: inline-block; }
.px-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes px-spin { to { transform: rotate(360deg); } }
.px-alert { padding: 11px 14px; border-radius: var(--px-radius-sm); font-size: 13px; border: 1px solid var(--px-line); }
.px-alert--info { background: var(--px-info-wash); color: var(--px-info); border-color: transparent; }
.px-alert--warning { background: var(--px-warning-wash); color: var(--px-warning); border-color: transparent; }

/* ── Form controls ─── */
.px-input, .px-select {
    width: 100%; font-family: inherit; font-size: 13px; color: var(--px-ink);
    background: var(--px-surface); border: 1px solid var(--px-line-strong);
    border-radius: var(--px-radius-sm); padding: 8px 10px;
}
.px-input:focus, .px-select:focus { outline: none; border-color: var(--px-accent); box-shadow: 0 0 0 3px var(--px-accent-wash); }
.px-field { display: block; margin-bottom: 12px; }
.px-field > span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--px-muted); margin-bottom: 5px; }
.px-field-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--px-muted); font-weight: 600; }
.px-field-inline .px-select { width: auto; }
.px-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }

/* ── Studio ─── */
.px-studio-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.px-studio-commit { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.px-studio-commit .px-input { width: 220px; }
.px-studio { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .px-studio { grid-template-columns: 1fr; } }
.px-registry { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.px-registry > .px-card { min-width: 0; }
.px-registry > .px-card .px-card-body--flush { overflow-x: auto; }
.px-registry > .px-card:last-child { max-width: 360px; }
.px-studio-files { margin: 0; }
.px-studio-editor { margin: 0; min-width: 0; }
.px-studio-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.px-filelist { display: flex; flex-direction: column; padding: 6px; gap: 1px; }
.px-fileitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; padding: 8px 10px; border-radius: 7px; font-family: var(--px-mono); font-size: 12px; color: var(--px-ink-soft); }
.px-fileitem:hover { background: var(--px-surface-2); }
.px-fileitem.sel { background: var(--px-accent-wash); color: var(--px-accent-ink); font-weight: 600; }
.px-file-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.px-file-dot.on { background: var(--px-warning); }
.px-file-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-newfile { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--px-line); }
.px-newfile .px-input { font-family: var(--px-mono); font-size: 12px; padding: 6px 8px; }
.px-editor { width: 100%; min-height: 340px; resize: vertical; font-family: var(--px-mono); font-size: 12.5px; line-height: 1.55; color: var(--px-ink); background: var(--px-surface-2); border: 1px solid var(--px-line); border-radius: var(--px-radius-sm); padding: 12px; }
.px-editor:focus { outline: none; border-color: var(--px-accent); box-shadow: 0 0 0 3px var(--px-accent-wash); background: var(--px-surface); }
.px-studio-actions { display: flex; gap: 8px; margin-top: 14px; }
.px-tabs--inline { border-bottom: none; margin: 0; gap: 4px; }
.px-tabs--inline .px-tab { padding: 5px 10px; font-size: 12px; border: 1px solid var(--px-line); border-radius: 7px; margin: 0; }
.px-tabs--inline .px-tab.active { border-color: var(--px-accent); color: var(--px-accent-ink); background: var(--px-accent-wash); }

/* diff view */
.px-diff { font-family: var(--px-mono); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--px-line); border-radius: var(--px-radius-sm); overflow: auto; max-height: 420px; }
.px-diff-line { padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }
.px-diff-sign { display: inline-block; width: 14px; color: var(--px-muted); user-select: none; }
.px-diff-added { background: var(--px-success-wash); color: var(--px-success); }
.px-diff-removed { background: var(--px-danger-wash); color: var(--px-danger); }
.px-diff-unchanged { color: var(--px-ink-soft); }

/* ── Feedback signals ─── */
.px-signal-list { display: flex; flex-direction: column; gap: 6px; }
.px-signal { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.px-signal .px-badge { flex: none; font-family: var(--px-mono); }
.px-signal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── Version card ─── */
.px-version { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.px-version-main { min-width: 0; }
.px-version-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-version-meta { color: var(--px-muted); font-size: 12px; margin-top: 8px; }
.px-version-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }