:root {
    color-scheme: dark;
    --bg: #070a12;
    --surface: #0d1220;
    --surface-2: #121a2c;
    --border: #25304a;
    --text: #f4f7ff;
    --muted: #99a6c2;
    --accent: #7c5cff;
    --accent-2: #22d3ee;
    --success: #36d399;
    --warning: #fbbf24;
    --danger: #fb7185;
    --radius: 16px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 12% 0%, rgba(124, 92, 255, .16), transparent 28rem),
        radial-gradient(circle at 88% 12%, rgba(34, 211, 238, .09), transparent 24rem),
        var(--bg);
    color: var(--text);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
code { color: #c4b5fd; }

.app-shell { min-height: 100vh; }
.topbar {
    height: 70px;
    padding: 0 clamp(1rem, 4vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(7,10,18,.72);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topnav { display: flex; align-items: center; gap: .8rem; }
.topnav a { color: var(--muted); font-size: .82rem; padding: .4rem .2rem; }
.topnav a.active { color: var(--text); }
.brand { display: flex; gap: .75rem; align-items: center; }
.brand-mark {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 10px; font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.brand span:last-child { display: grid; }
.brand small, .local-badge, small { color: var(--muted); }
.local-badge {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .4rem .75rem;
    font-size: .78rem;
}
main { max-width: 1600px; margin: auto; padding: 2.5rem clamp(1rem, 3vw, 3rem) 4rem; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.3rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.02; letter-spacing: -.045em; max-width: 850px; margin: .25rem 0 .8rem; }
.hero p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; max-width: 740px; margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; color: var(--accent-2); font-size: .72rem; font-weight: 800; margin: 0; }
.hero-actions, .primary-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.button, .template-strip button {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .68rem .95rem;
    color: var(--text);
    background: var(--surface-2);
}
.button:hover, .template-strip button:hover { border-color: #53648c; transform: translateY(-1px); }
.button.primary { background: linear-gradient(135deg, #6d4aff, #5940ca); border-color: #8b72ff; font-weight: 700; }
.button.ghost { background: transparent; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.template-strip {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .75rem 0 1.5rem; color: var(--muted); font-size: .85rem;
}
.template-strip button { padding: .4rem .7rem; font-size: .8rem; background: transparent; }

.workspace { display: grid; grid-template-columns: minmax(460px, .88fr) minmax(560px, 1.12fr); gap: 1.25rem; align-items: start; }
.panel {
    background: linear-gradient(180deg, rgba(18,26,44,.94), rgba(13,18,32,.96));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.results-panel { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.panel h2 { margin: .2rem 0 0; font-size: 1.35rem; }
.panel h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: #cad3e7; margin: 1.5rem 0 .7rem; }
.synced-heading { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.json-sync-badge { display: inline-flex; width: max-content; color: #b9abff; background: rgba(124,92,255,.13); border: 1px solid rgba(124,92,255,.35); border-radius: 999px; padding: .13rem .4rem; font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cost-related-badge { display: inline-flex; width: max-content; color: #86efac; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); border-radius: 999px; padding: .13rem .4rem; font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.step { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.form-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: .35rem; }
.field.full { margin-bottom: .9rem; }
.field label { font-size: .78rem; font-weight: 700; color: #cdd6e9; }
.field-label, .setting-header { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.setting-header { align-items: flex-start; }
.setting-header .setting-toggle { flex: 1; }
.docs-link { flex: 0 0 auto; color: #a5b4fc; font-size: .68rem; font-weight: 700; letter-spacing: 0; text-decoration: none; text-transform: none; white-space: nowrap; }
.docs-link:hover, .docs-link:focus-visible { color: #c7d2fe; text-decoration: underline; }
.field small { line-height: 1.4; }
.section-help { color: var(--muted); font-size: .8rem; margin: -.3rem 0 .8rem; }
.operation-context { display: grid; gap: .2rem; margin-top: .85rem; padding: .7rem .8rem; border-left: 3px solid var(--accent); border-radius: 7px; background: rgba(124,92,255,.08); }
.operation-context strong { color: #ddd6fe; font-size: .78rem; }
.operation-context span { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.guardrail-editor { display: grid; gap: .7rem; }
.budget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.setting-card { border: 1px solid var(--border); border-radius: 11px; padding: .85rem; background: rgba(9,14,27,.55); }
.scope-card { margin-bottom: 1rem; border-color: rgba(124,92,255,.5); background: rgba(124,92,255,.08); }
.default-badge { display: inline-flex; margin-left: .35rem; color: #ddd6fe; background: rgba(124,92,255,.22); border-radius: 999px; padding: .1rem .38rem; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.impacted-setting { scroll-margin-top: 100px; outline: 2px solid var(--danger); outline-offset: 3px; border-color: rgba(251,113,133,.75) !important; background-color: rgba(251,113,133,.08) !important; }
.impacted-setting::before { content: "Stopped here"; display: inline-flex; margin-bottom: .55rem; color: #fecdd3; background: rgba(251,113,133,.18); border-radius: 999px; padding: .18rem .48rem; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.setting-toggle { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.setting-toggle input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--accent); }
.setting-toggle span { display: grid; gap: .18rem; }
.setting-toggle small { font-size: .74rem; line-height: 1.35; }
.setting-card > .form-grid, .budget-fields { margin-top: .8rem; }
.budget-fields { display: grid; gap: .65rem; }
input, select, textarea {
    width: 100%;
    color: var(--text);
    background: #090e1b;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: .65rem .72rem;
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,.14); }
textarea { resize: vertical; }
.primary-actions { margin-top: 1.3rem; }
.simulation-note { color: var(--muted); font-size: .75rem; line-height: 1.45; margin: .65rem 0 0; }
.advanced { border-top: 1px solid var(--border); margin-top: 1.3rem; padding-top: 1rem; }
.advanced summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
.advanced summary span { font-weight: 700; }
.json-editor { min-height: 440px; margin-top: 1rem; font-family: "Cascadia Code", Consolas, monospace; font-size: .75rem; line-height: 1.5; }
.catalog-editor { min-height: 300px; }

.message { display: flex; gap: .8rem; border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.message.error { border: 1px solid rgba(251,113,133,.5); background: rgba(251,113,133,.1); }
.message.success { border: 1px solid rgba(54,211,153,.4); background: rgba(54,211,153,.08); }
.empty-state { min-height: 360px; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 12px; }
.decision-banner {
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    padding: 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
}
.decision-banner div { display: grid; gap: .2rem; }
.decision-banner strong { font-size: 1.55rem; }
.decision-banner.allowed, .decision-banner.passed { border-color: rgba(54,211,153,.55); background: rgba(54,211,153,.07); }
.decision-banner.blocked, .decision-banner.indeterminate { border-color: rgba(251,113,133,.55); background: rgba(251,113,133,.07); }
.decision-banner.waiting, .decision-banner.soft-stopped, .decision-banner.partiallysimulated { border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.07); }
.blocking-explanation { margin-top: .8rem; padding: 1rem; border: 1px solid rgba(251,113,133,.45); border-radius: 12px; background: rgba(251,113,133,.07); }
.blocking-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.blocking-heading small { color: var(--danger); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.blocking-heading h3 { margin: .2rem 0 0; color: var(--text); font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.blocking-explanation > p { margin: .7rem 0 0; color: #d8e0f2; font-size: .84rem; line-height: 1.5; }
.blocking-explanation .blocking-message { color: var(--muted); }
.blocking-link { display: inline-flex; width: auto; margin-top: .8rem; font-size: .78rem; }
.blocking-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-top: .8rem; }
.blocking-values span { display: grid; gap: .2rem; padding: .6rem; border-radius: 8px; background: rgba(9,14,27,.65); }
.blocking-values small { color: var(--muted); }
.blocking-values strong { font-size: .9rem; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: .8rem 0; }
.metric { background: #090e1b; border: 1px solid var(--border); border-radius: 10px; padding: .75rem; display: grid; gap: .35rem; }
.metric strong { font-size: 1.15rem; }
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; }
.summary-grid div { display: grid; gap: .15rem; }
.run-history { margin: .8rem 0; border: 1px solid var(--border); border-radius: 10px; padding: .8rem; }
.run-history summary { cursor: pointer; font-weight: 700; }
.run-table { display: grid; grid-template-columns: 35px 1fr .8fr .8fr 1fr; gap: .5rem; align-items: center; margin-top: .8rem; font-size: .75rem; }
.run-table > :nth-child(-n+5) { color: var(--muted); text-transform: uppercase; font-size: .65rem; letter-spacing: .05em; }
.run-table .allowed { color: var(--success); }
.run-table .blocked, .run-table .indeterminate { color: var(--danger); }
.run-table .waiting, .run-table .soft-stopped { color: var(--warning); }
.trace-heading { margin-top: 1.3rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.trace-heading h3 { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.trace-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.trace-heading select { width: auto; }
.category-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.category-filter label { display: flex; gap: .35rem; align-items: center; font-size: .75rem; border: 1px solid var(--border); padding: .35rem .55rem; border-radius: 999px; }
.category-filter input { width: auto; }
.check-list { display: grid; margin-top: .8rem; }
.check { display: grid; grid-template-columns: 25px 13px 1fr; gap: .6rem; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.07); }
.check-index { color: var(--muted); font-size: .72rem; padding-top: .2rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .22rem; background: var(--muted); box-shadow: 0 0 0 4px rgba(153,166,194,.1); }
.status-dot.passed, .status-dot.allowed { background: var(--success); box-shadow: 0 0 0 4px rgba(54,211,153,.1); }
.status-dot.blocked, .status-dot.indeterminate { background: var(--danger); box-shadow: 0 0 0 4px rgba(251,113,133,.1); }
.status-dot.waiting, .status-dot.soft-stopped { background: var(--warning); box-shadow: 0 0 0 4px rgba(251,191,36,.1); }
.check-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.check-title > span:not(.outcome) { color: var(--muted); font-size: .7rem; }
.outcome { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; padding: .18rem .4rem; border-radius: 999px; background: rgba(153,166,194,.1); }
.outcome.passed { color: var(--success); }
.outcome.blocked, .outcome.indeterminate { color: var(--danger); }
.outcome.waiting, .outcome.soft-stopped { color: var(--warning); }
.check-body p { margin: .3rem 0; color: var(--muted); font-size: .8rem; }
.check-values { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--muted); font-size: .7rem; }
.check-values strong { color: #d8e0f2; }
.explanation { border-top: 1px solid var(--border); margin-top: .8rem; padding-top: .8rem; }
.explanation summary { cursor: pointer; font-weight: 700; }
.explanation ol { padding-left: 1.4rem; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.assumption { border-left: 3px solid var(--warning); padding-left: .7rem; color: var(--muted); font-size: .8rem; }

.guide-page { max-width: 960px; margin: 0 auto; }
.guide-page > header { padding: 2rem 0 1rem; }
.guide-page > header h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.045em; margin: .3rem 0 .7rem; }
.guide-page > header > p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; max-width: 720px; line-height: 1.65; }
.guide-page > header .button { display: inline-block; margin-top: .8rem; }
.guide-page section { margin-top: 1.3rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(13,18,32,.8); }
.guide-page h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.guide-page h3 { margin: 1.2rem 0 .3rem; }
.guide-page p, .guide-page li { color: var(--muted); line-height: 1.65; }
.guide-page strong { color: var(--text); }
.guide-steps { display: grid; gap: .7rem; padding-left: 1.4rem; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.guide-grid div { display: grid; gap: .25rem; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; }
.guide-grid span { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.guide-callout { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--accent-2); background: rgba(34,211,238,.06); color: #cbd5e1; line-height: 1.55; }
.guide-table { width: 100%; border-collapse: collapse; }
.guide-table th, .guide-table td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border); }
.guide-table th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.guide-table td:last-child { color: var(--muted); }
.decision-reference { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.decision-reference > div { display: grid; grid-template-columns: 16px 1fr; column-gap: .5rem; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; }
.decision-reference .status-dot { grid-row: 1 / 3; }
.decision-reference p { margin: .2rem 0 0; font-size: .82rem; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; padding: .8rem; background: #7f1d1d; z-index: 100; }
.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto; margin: auto; }
.loading-progress circle { fill: none; stroke: var(--border); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

@media (max-width: 1100px) {
    .workspace { grid-template-columns: 1fr; }
    .results-panel { position: static; max-height: none; }
    .hero { align-items: start; flex-direction: column; }
}
@media (max-width: 680px) {
    main { padding-top: 1.5rem; }
    .local-badge { display: none; }
    .form-grid, .form-grid.compact, .metrics { grid-template-columns: repeat(2, 1fr); }
    .hero-actions { width: 100%; }
    .button { flex: 1; text-align: center; }
    .topnav a:first-child { display: none; }
    .guide-grid, .decision-reference { grid-template-columns: 1fr; }
    .budget-grid { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
    .form-grid, .form-grid.compact, .metrics, .summary-grid, .blocking-values { grid-template-columns: 1fr; }
    .panel { padding: 1rem; }
}