:root {
    --bg: #0d1117;
    --panel: #141b22;
    --panel-2: #1a232d;
    --border: #263340;
    --border-soft: #1e2933;
    --text: #d8e0e8;
    --muted: #8b99a7;
    --accent: #4682b4;
    --accent-bright: #5f9fd0;
    --accent-dim: rgba(70, 130, 180, 0.14);
    --ok: #4caf7d;
    --warn: #d0904a;
    --fail: #d06060;
    --radius: 8px;
    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "Cascadia Code", Consolas, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.7rem; margin: 0.2rem 0 0.4rem; }
h2 { font-size: 1.15rem; margin: 0; }
h3 { font-size: 1.02rem; margin: 0 0 0.4rem; }

a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

h1:focus { outline: none; }

/* ---- shell ---- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: #0a0e13;
    border-right: 1px solid var(--border-soft);
    padding: 1.1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.9rem;
    letter-spacing: 0.01em;
}
.brand span { color: var(--accent-bright); font-weight: 500; }
.brand .brand-icon { width: 20px; height: 20px; color: var(--accent-bright); }
.brand:hover { text-decoration: none; }

.side-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    margin: 0.7rem 0 0.2rem 0.35rem;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }

.side-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.6rem;
    border-radius: 6px;
    color: var(--text);
    font-size: 0.92rem;
}
.side-link:hover { background: var(--panel-2); text-decoration: none; }
.side-link.active { background: var(--accent-dim); color: var(--accent-bright); }

/* ---- icon nav ---- */

.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }
.side-link .nav-icon { color: var(--muted); transition: color 0.15s; }
.side-link:hover .nav-icon, .side-link.active .nav-icon { color: inherit; }
.side-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    line-height: 1.5;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0 0.45rem;
    color: var(--muted);
}
.side-count.accent { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-dim); }
.side-count.badge-running {
    color: var(--accent-bright);
    border-color: var(--accent);
    background: var(--accent-dim);
    animation: pulse 1.2s ease-in-out infinite;
}
/* Parked for a paste — waiting on the user, so it must not read as "busy". */
.side-count.badge-awaiting { color: var(--warn); border-color: var(--warn); background: rgba(208, 144, 74, 0.12); }

.side-project { padding-top: 0.28rem; padding-bottom: 0.28rem; font-size: 0.86rem; color: var(--muted); }
.side-project:hover { color: var(--text); }
.side-project.active { color: var(--accent-bright); }
.side-more { display: block; font-size: 0.78rem; color: var(--muted); padding: 0.25rem 0.6rem 0.1rem; }
.side-more:hover { color: var(--accent-bright); text-decoration: none; }

.side-foot { margin-top: auto; font-size: 0.75rem; padding: 0.5rem 0.35rem 0; }
.side-jobs-link { display: inline-flex; align-items: center; gap: 0.4rem; }
/* .running/.awaiting also set a colour; in the sidebar only the dot should. */
.side-jobs-link.running, .side-jobs-link.awaiting { color: inherit; font-size: inherit; }
.key-ok { color: var(--ok); }
.key-missing { color: var(--warn); }

.content {
    flex: 1;
    padding: 1.6rem 2.2rem 3rem;
    max-width: 1060px;
}

/* ---- common ---- */

.page-head { margin-bottom: 1.3rem; }
.lead { color: var(--muted); margin: 0.2rem 0 0; max-width: 70ch; }
.back { font-size: 0.85rem; color: var(--muted); display: inline-block; margin-bottom: 0.3rem; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.9rem;
    margin: 1.1rem 0;
}

.card {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    color: var(--text);
    transition: border-color 0.15s;
}
.card:hover { border-color: var(--accent); text-decoration: none; }

.kit-card .kit-title:hover { text-decoration: none; }
.kit-card .kit-title h3 { color: var(--accent-bright); }
.kit-concept { color: var(--muted); font-size: 0.86rem; margin: 0.35rem 0 0.6rem; }

/* Stretched link: the whole kit card navigates like the title does. The card
   also contains child variation links, so a wrapping <a> would nest anchors —
   instead the title link grows a full-card overlay and the children row sits
   above it. */
.kit-card { position: relative; }
.kit-card .kit-title::after { content: ""; position: absolute; inset: 0; }

.children { margin-top: 0.6rem; border-top: 1px solid var(--border-soft); padding-top: 0.5rem; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.child-link { font-size: 0.86rem; }

/* ---- move kits between projects ---- */

/* Above the stretched-link overlay, or the click would open the kit. */
.kit-card .sel-check {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 1;
    margin: 0;
    padding: 0.25rem;
    cursor: pointer;
}
.kit-card .sel-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; display: block; }

.move-bar { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.move-bar .move-count { font-weight: 600; color: var(--accent-bright); white-space: nowrap; }

.chip-row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.chip {
    font-size: 0.74rem;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    color: var(--muted);
    white-space: nowrap;
}
.chip.accent { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-dim); }
.chip a { color: var(--accent-bright); }

.panel {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin: 0.9rem 0;
}

details.panel > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-bright);
    user-select: none;
}
details.panel[open] > summary { margin-bottom: 0.8rem; }

/* ---- forms ---- */

.form-row { display: flex; gap: 0.6rem; margin: 0.6rem 0; align-items: center; flex-wrap: wrap; }

.input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.5rem 0.7rem;
    font-family: var(--font);
    font-size: 0.92rem;
    width: 100%;
}
.input:focus { outline: none; border-color: var(--accent); }
.input.slim { width: auto; min-width: 220px; }
textarea.input { resize: vertical; }
select.input { appearance: auto; }

.btn {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font);
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-bright); }
.btn.small { padding: 0.2rem 0.7rem; font-size: 0.78rem; }

.check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.83rem; color: var(--muted); margin-right: 0.7rem; cursor: pointer; }
.check input { accent-color: var(--accent); }

.ref-row { margin-top: 0.5rem; }
.hint { color: var(--muted); font-size: 0.82rem; }
.hint.warn { color: var(--warn); display: block; margin-top: 0.5rem; }

/* ---- jobs ---- */

.jobs-strip { display: flex; flex-direction: column; gap: 4px; margin: 0.8rem 0; }
.job {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}
.job-title { font-weight: 500; }
.job-detail { color: var(--muted); font-size: 0.8rem; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
/* Status colors ride on the status class itself (.job, .job-status chip, the sidebar link). */
.running .dot { background: var(--accent-bright); animation: pulse 1.2s ease-in-out infinite; }
/* Parked on purpose — waiting on a person, not broken and not in flight. */
.awaiting .dot { background: var(--warn); }
.done .dot { background: var(--ok); }
.failed .dot { background: var(--fail); }
.cancelled .dot, .interrupted .dot { background: var(--muted); }

.running { color: var(--accent-bright); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.awaiting { color: var(--warn); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.5rem; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- kit page ---- */

.variation { border-left: 3px solid var(--accent); }
.variation-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.descriptor { color: var(--muted); font-style: italic; margin: 0.3rem 0 0.6rem; font-size: 0.9rem; }

.block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.9rem 0 0.3rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.code {
    background: #0a0f14;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: #b9c6d2;
}
.code.styles { color: #9fc1dd; }

.melody-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.3rem; }
.melody-row audio { height: 36px; flex: 1; min-width: 260px; filter: invert(0.88) hue-rotate(180deg) saturate(0.7); }
.melody-links { display: flex; gap: 0.8rem; align-items: center; font-size: 0.84rem; }

/* ---- markdown render ---- */

.md-render { font-size: 0.92rem; }
.md-render h1 { font-size: 1.4rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.4rem; }
.md-render h2 { font-size: 1.15rem; margin: 1.4rem 0 0.5rem; color: var(--accent-bright); }
.md-render h3 { margin: 1rem 0 0.4rem; }
.md-render pre {
    background: #0a0f14;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    overflow-x: auto;
    font-size: 0.78rem;
    line-height: 1.6;
}
.md-render code { font-family: var(--mono); color: #9fc1dd; }
.md-render blockquote { border-left: 3px solid var(--accent); margin: 0.8rem 0; padding: 0.2rem 1rem; color: var(--muted); }
.md-render table { border-collapse: collapse; }
.md-render th, .md-render td { border: 1px solid var(--border-soft); padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.md-render hr { border: none; border-top: 1px solid var(--border-soft); margin: 1.4rem 0; }

/* ---- misc ---- */

/* A section heading with an action on its right (Home's Projects row). */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.section-head h2 { margin: 0; }
.inline-create { display: flex; gap: 0.5rem; align-items: center; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid var(--fail); }
.validation-message { color: var(--fail); }

/* ---- auth ---- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 2.2rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.login-card .brand { font-size: 1.25rem; font-weight: 600; }
.login-sub { color: var(--muted); font-size: 0.85rem; margin: 0; }

.login-card form { display: flex; flex-direction: column; gap: 0.9rem; }
.login-card label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--muted);
}
/* textarea as well as input: the auth card had only ever held single-line
   fields, so the contact form's Message box fell through to the browser
   default and rendered WHITE on a dark card. Green tests, unreadable form —
   only eyes-on sees render. */
.login-card input,
.login-card textarea {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    font-family: var(--font);
}
.login-card input:focus,
.login-card textarea:focus { outline: 1px solid var(--accent); }

.login-card .btn-primary {
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #eef4f9;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 0.3rem;
}
.login-card .btn-primary:hover { background: var(--accent-bright); }

.login-error {
    background: rgba(208, 96, 96, 0.12);
    border: 1px solid var(--fail);
    border-radius: 6px;
    color: var(--fail);
    padding: 0.5rem 0.8rem;
    font-size: 0.84rem;
}

.side-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-soft);
}
.side-user .user-email {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.logout-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
}
.logout-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---- credits ---- */

.side-balance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-bright);
    font-size: 0.82rem;
    margin-bottom: 0.45rem;
    text-decoration: none;
}
.side-balance:hover { text-decoration: underline; }
.side-balance .nav-icon, .side-admin .nav-icon { width: 14px; height: 14px; }

.banner {
    border-radius: 6px;
    padding: 0.55rem 0.9rem;
    margin: 0.6rem 0 1rem;
    font-size: 0.88rem;
    border: 1px solid var(--border);
}
.banner.ok { border-color: var(--ok); color: var(--ok); background: rgba(76, 175, 125, 0.08); }
.banner.warn { border-color: var(--warn); color: var(--warn); background: rgba(208, 144, 74, 0.08); }

.balance-hero {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.4rem;
    margin: 0.8rem 0 1.4rem;
}
.balance-hero .amount { font-size: 2rem; font-weight: 600; color: var(--accent-bright); }
.balance-hero .unit { color: var(--muted); }
.balance-hero .costs { margin-left: auto; color: var(--muted); font-size: 0.8rem; }

.packs { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.8rem 0 0.6rem; }
.pack {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pack-name { font-weight: 600; }
.pack-credits { color: var(--accent-bright); font-size: 0.95rem; }
.pack-price { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.5rem; }

.credit-table { border-collapse: collapse; margin: 0.6rem 0 1.4rem; width: 100%; max-width: 860px; }
.credit-table th, .credit-table td {
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    padding: 0.35rem 0.9rem 0.35rem 0;
    font-size: 0.86rem;
}
.credit-table th { color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.credit-table .mono { font-family: var(--mono); font-size: 0.78rem; }
.delta-pos { color: var(--ok); }
.delta-neg { color: var(--fail); }
.gen-status.done { color: var(--ok); }
.gen-status.failed { color: var(--fail); }
.gen-status.running { color: var(--warn); }

.auth-alt { display: block; margin-top: 0.4rem; font-size: 0.84rem; text-align: center; }

/* ---- terms of service ---- */

/* The register page's read-me-first scrollbox. */
.tos-box {
    max-height: 200px;
    overflow-y: auto;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.9rem;
    font-size: 0.8rem;
}
.tos-box.tos-read { border-color: var(--ok); }
.tos-box .tos-text h2 { font-size: 0.98rem; margin: 0.6rem 0 0.2rem; }
.tos-box .tos-text h3 { font-size: 0.85rem; margin: 0.8rem 0 0.2rem; color: var(--accent-bright); }
.tos-box .tos-text p { margin: 0.2rem 0 0.5rem; color: var(--muted); }

.tos-agree { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.84rem; color: var(--text); cursor: pointer; }
.tos-agree input { accent-color: var(--accent); flex-shrink: 0; }
.tos-agree input:disabled { cursor: not-allowed; }
.tos-agree .hint { font-size: 0.78rem; }

/* The /terms page reuses the auth card, widened to document width. */
.terms-card { max-width: 720px; }
.terms-card .tos-text h2 { margin-top: 0.4rem; }

.login-card .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- preset tools ---- */

.presets-select { min-width: 110px; }

.preset-vary {
    margin-top: 0.7rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 0.5rem;
}
.preset-vary > summary {
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--muted);
    user-select: none;
}
.preset-vary > summary:hover { color: var(--accent-bright); }
.preset-vary[open] > summary { margin-bottom: 0.5rem; color: var(--accent-bright); }

/* ---- admin ---- */

.side-admin { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.82rem; margin-bottom: 0.45rem; text-decoration: none; }
.side-admin:hover { color: var(--accent-bright); text-decoration: none; }

/* ---- suno-style list rows (projects, kit catalog) ---- */
/* Fixed row height on purpose: these lists virtualize, and <Virtualize>'s
   ItemSize must be the truth or the scrollbar lies. */

.list-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0.9rem 0 0.6rem; }
.search-box { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.search-box .nav-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.search-box .input { padding-left: 2.1rem; }
.list-count { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.toolbar-gap { flex: 1; }
.row-tile-empty { background: var(--panel-2); }

.row-list { margin: 0.4rem 0 2rem; }
.row-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 64px;
    padding: 0 0.7rem;
    border-radius: var(--radius);
    position: relative;
    transition: background 0.12s;
}
.row-item:hover { background: var(--panel); }

.row-tile {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    user-select: none;
}
.row-tile .nav-icon { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.8); }

.row-main { flex: 1; min-width: 0; }
.row-title-line { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.row-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-title a { color: var(--text); }
.row-title a:hover { text-decoration: none; color: var(--accent-bright); }
/* Stretched link: the whole row navigates; buttons sit above the overlay. */
.row-title a::after { content: ""; position: absolute; inset: 0; }
.row-chips { display: flex; gap: 0.35rem; flex-shrink: 0; align-items: center; }
.row-meta {
    color: var(--muted);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.row-actions { display: flex; gap: 0.45rem; align-items: center; flex-shrink: 0; position: relative; z-index: 1; }
.row-open { color: var(--muted); flex-shrink: 0; }
.row-item:hover .row-open { color: var(--accent-bright); }
.row-empty { color: var(--muted); padding: 1.2rem 0.7rem; }

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem;
    margin: 1rem 0 1.6rem;
}
.status-card {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
}
.status-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.status-value { font-size: 0.98rem; margin: 0.25rem 0 0.15rem; }
.status-value.ok { color: var(--ok); }
.status-value.warn { color: var(--warn); }
.status-sub { color: var(--muted); font-size: 0.78rem; }

.detail-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gen-status.cancelled { color: var(--muted); }

/* ---- run a job by hand ---- */

.job-manual {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0 0.2rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.job-manual:hover { color: var(--accent-bright); text-decoration: none; }
.job-actions { margin-left: auto; display: inline-flex; gap: 0.4rem; align-items: center; }

.chip.job-status { text-transform: capitalize; gap: 0.4rem; display: inline-flex; align-items: center; }

/* ---- jobs management page ---- */

.jobs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.4rem 0 0.9rem; flex-wrap: wrap; }
.chip.filter { cursor: pointer; text-transform: capitalize; }
.chip.filter:hover { border-color: var(--accent); }
.chip.filter.active { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-dim); }

.jobs-table .job-cell { display: flex; align-items: center; gap: 0.5rem; max-width: 420px; }
.jobs-table .job-cell a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-table .result-link { flex-shrink: 0; font-size: 0.8rem; }
.jobs-table .actions-cell { white-space: nowrap; }
.jobs-table .actions-cell .btn, .jobs-table .actions-cell .job-manual { margin-right: 0.35rem; }
.jobs-table .mono { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.btn.danger:hover:not(:disabled) { border-color: var(--fail); color: var(--fail); }

/* The pasted request is long: cap it so the response box stays on screen. */
.manual-request { max-height: 15rem; overflow-y: auto; }
.manual-response { font-family: var(--mono); font-size: 0.78rem; width: 100%; margin-top: 0.3rem; }

/* ---- by-hand dialog ---- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 11, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 50;
}

.modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    width: min(760px, 100%);
    /* The request and the paste box both scroll INSIDE the dialog, so the
       footer's Apply button is never pushed off screen. */
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem 0.6rem;
    border-bottom: 1px solid var(--border-soft);
}
.modal-head .hint { margin: 0.2rem 0 0; }

.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
}
.modal-close:hover { color: var(--text); }

.modal-body { padding: 0.4rem 1.2rem 1rem; overflow-y: auto; }

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--border-soft);
}

/* Inside the dialog the request gets less room than on the job page. */
.manual-modal .manual-request { max-height: 11rem; }

/* ---- workbench takes ---- */

.take { border-left: 3px solid var(--border); }
.take.active-take { border-left-color: var(--accent); }
.take-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.take-head h3 { margin-bottom: 0.15rem; }
.take-label { margin: 0 0 0.4rem; }
.take-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---- harmony review ---- */

.review {
    border-left: 3px solid var(--warn);
    background: var(--panel-2);
    border-radius: 6px;
    padding: 0.2rem 0.9rem 0.7rem;
    margin-top: 0.8rem;
}
.review .block-head { margin-top: 0.7rem; }
.review-verdict { margin: 0.2rem 0 0.7rem; font-size: 0.9rem; }

.finding { border-top: 1px solid var(--border-soft); padding: 0.55rem 0 0.2rem; }
.finding-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.finding-where { font-size: 0.82rem; color: var(--muted); }
.finding-problem { margin: 0 0 0.25rem; font-size: 0.88rem; }
.finding-fix { margin: 0; font-size: 0.88rem; color: var(--accent-bright); }

.chip.sev-minor { color: var(--muted); }
.chip.sev-notable { color: var(--warn); border-color: var(--warn); }
.chip.sev-serious { color: var(--fail); border-color: var(--fail); }

/* ---- generated ticks ---- */

.gen-check { margin-right: 0; }
.chip.gen-none { color: var(--muted); }
.chip.gen-partial { color: var(--accent-bright); border-color: var(--accent); }
.chip.gen-complete { color: var(--ok); border-color: var(--ok); }

/* ---- ai routing switch ---- */

.route-switch { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem; flex-wrap: wrap; }
.route-switch .chip.filter { text-transform: none; }
.route-switch .chip.filter:disabled { opacity: 0.45; cursor: not-allowed; }
.status-sub.note { margin-top: 0.5rem; color: var(--accent-bright); }

/* ---- admin shell (AdminLayout) ---- */

.admin-side { border-right-color: var(--border); }
.admin-side .brand span { color: var(--warn); font-weight: 600; }

/* ---- dashboards (tenant home + /admin) ---- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.9rem;
    margin: 1rem 0 1.4rem;
}
.stat-card {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.85rem 1rem 0.75rem;
    display: block;
    color: var(--text);
}
a.stat-card:hover { border-color: var(--accent); text-decoration: none; }
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stat-value { font-size: 1.55rem; font-weight: 600; margin: 0.15rem 0 0.05rem; color: var(--accent-bright); }
.stat-value.plain { color: var(--text); }
.stat-value.warn { color: var(--warn); }
.stat-sub { color: var(--muted); font-size: 0.78rem; }

.health-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 1.2rem; }
.health-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.22rem 0.75rem;
    color: var(--text);
    background: var(--panel);
}
.health-pill:hover { border-color: var(--accent); text-decoration: none; }
.health-pill .dot { width: 7px; height: 7px; }
.health-pill.ok .dot { background: var(--ok); }
.health-pill.warn .dot { background: var(--warn); }
.health-pill.off .dot { background: var(--muted); }

.dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.4rem;
    align-items: start;
}
@media (max-width: 1100px) { .dash-cols { grid-template-columns: 1fr; } }

.audit-strip { display: flex; flex-direction: column; gap: 4px; margin: 0.6rem 0; }
.audit-row {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}
.audit-row .when { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; flex-shrink: 0; }
.audit-row .detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- tabs (admin pages with two or more panes) ---- */

.tabs {
    display: flex;
    gap: 0.2rem;
    border-bottom: 1px solid var(--border-soft);
    margin: 0.9rem 0 1.1rem;
}
.tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 0.92rem;
    font-family: var(--font);
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-bright); border-bottom-color: var(--accent); }

/* ---- admin usage bars (P5.2) ---- */
/* Styled div widths, deliberately: no chart library for four tables. */

.credit-table .bar-col { width: 180px; white-space: nowrap; }
.bar {
    display: inline-block;
    height: 0.55rem;
    min-width: 1px;
    background: var(--accent);
    border-radius: 2px;
    vertical-align: middle;
}
.bar-label { color: var(--muted); font-size: 0.72rem; margin-left: 0.4rem; }
.row-quiet td { color: var(--muted); }
.gen-status.grant { color: var(--ok); }
.gen-status.sweep { color: var(--warn); }
.gen-status.route { color: var(--accent-bright); }

/* ---- app footer (N3) ----
   The one persistent home for Terms, Privacy, Contact and Support. Support
   used to be a sidebar nav item; the sidebar is where you work, and these are
   where you go when the work went wrong or when you want to read what you
   agreed to. Deliberately quiet: it must be findable, not prominent. */

.app-footer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-size: 0.8rem;
}

.footer-link {
    color: var(--muted);
    text-decoration: none;
}

.footer-link:hover { color: var(--text); text-decoration: underline; }

/* The auth pages stack the card and the footer; without column the footer
   would sit BESIDE the login card rather than under it. */
.auth-shell { flex-direction: column; }

.auth-shell .app-footer {
    border-top: none;
    margin-top: 1.5rem;
}

.auth-shell .footer-links { justify-content: center; }

/* The contact form's honeypot. Off-screen rather than display:none — some bots
   skip fields that are display:none, and the whole point is that they DO fill
   this one. aria-hidden and tabindex="-1" keep it away from people. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-card { max-width: 520px; }

/* ---- catalog preview page (N4) ---- */

.preview-list { display: flex; flex-direction: column; gap: 0.6rem; }
.preview-row { padding: 0.8rem 1rem; }
.preview-head { display: flex; align-items: center; gap: 0.5rem; }
.preview-sections { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.chip.subtle { background: var(--panel-2); color: var(--muted); }
a.row-title { color: var(--text); text-decoration: none; }
a.row-title:hover { color: var(--accent-bright); text-decoration: underline; }

/* Delete is the one irreversible action in the product; it should not look
   like the buttons beside it. */
.btn.danger { border-color: rgba(208, 96, 96, 0.5); color: var(--fail); }
.btn.danger:hover { background: rgba(208, 96, 96, 0.12); }
.btn.danger.primary { background: var(--fail); border-color: var(--fail); color: #fff; }
/* ★The armed state is ALWAYS seen under the pointer — arming it IS a click on
   it — and two earlier :hover rules each outrank a plain .btn.danger.primary:
   .btn.primary:hover:not(:disabled) painted the accent BACKGROUND and
   .btn.danger:hover:not(:disabled) painted the fail-red TEXT. Red on blue, at
   1.6:1, on the most dangerous button in the product. Only eyes-on found it. */
.btn.danger.primary:hover:not(:disabled) { background: #dc7a7a; border-color: #dc7a7a; color: #fff; }

/* The delete affordances the V3/V4 services were built for. Both sit under the
   thing they destroy and are deliberately quiet until armed — the confirm state
   is what turns them loud (.btn.danger.primary above). */
.head-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.7rem; }
.preset-danger {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.7rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 0.5rem;
}

/* ★★The Blazor error banner, GLOBAL and not scoped, and that is the whole
   point. It lived in MainLayout.razor.css — a scoped sheet, so its rules only
   ever matched elements MainLayout itself renders. AdminLayout carries its own
   copy of the same div and has no scoped sheet, so on every admin page the
   `display: none` never applied: the banner sat in the document flow, below the
   fold, permanently reading "An unhandled error has occurred". False alarm
   always — and a REAL circuit error then had nothing left to announce it with,
   because setting display:block on something already visible changes nothing. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ★An <a> styled as a .btn is INLINE, so its vertical padding falls outside
   the line box instead of taking up room. Everywhere else in the app these
   anchors sit inside a flex row (.melody-row, .form-row, .take-actions), which
   hid it — on the export panel, the one place one stands in normal flow, the
   button overlapped the chips above it. */
a.btn { display: inline-flex; align-items: center; }
/* ★And it must not inherit the CASE of whatever it sits in. A <button> gets
   text-transform: none and letter-spacing: normal from the UA stylesheet; an
   <a> inherits both. Inside a .block-head — which is uppercase and letter-
   spaced, because it labels a section — the same markup that renders "Copy" on
   a button rendered "WORKBENCH →" on a link, and read as a heading rather than
   as something you can press. */
a.btn { text-transform: none; letter-spacing: normal; }

/* The export panel is a vertical stack, so it says so rather than relying on
   whatever margins the elements happen to bring. */
.export-summary { margin-bottom: 1rem; }
.export-download { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }

/* ---- the composition review (V6) ----
   Its own panel above the takes, because it belongs to the PRESET: it outlives
   every take and exists before the first one. The findings reuse .finding, so
   a composition finding and a harmony finding read identically — they are the
   same kind of statement about the same piece of music. */
.review-panel { border-left: 3px solid var(--accent); }
.review-panel .review-verdict { margin-top: 0.1rem; }

/* The edits are the actionable half: what "apply" would actually write into
   the document the user pastes into Suno. Shown before applying, not after. */
.score-edits { margin-top: 0.7rem; border-top: 1px solid var(--border-soft); padding-top: 0.6rem; }
.score-edit { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; padding: 0.3rem 0; }
.score-edit-value { font-size: 0.88rem; color: var(--text); flex: 1 1 20rem; min-width: 0; }

/* ---- the finance dashboard (F1) ----
   In app.css and not a scoped .razor.css on purpose: scoped styles are keyed
   to the component that declares them, and the V5 lesson was a stylesheet that
   compiled, shipped, and never reached the admin layout it was written for. */

/* Anything derived from an assumption Kithara does not record wears this. The
   whole page's honesty rests on the mark being unmissable and consistent. */
.modelled {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--warn);
    border: 1px solid rgba(208, 144, 74, 0.35);
    border-radius: 3px;
    padding: 0 0.28rem;
    white-space: nowrap;
    vertical-align: 0.06em;
}

.fin-scope {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 400;
    margin-left: 0.4rem;
}

.fin-note { max-width: 62rem; margin: 0.2rem 0 0.9rem; }
.fin-note strong { color: var(--warn); font-weight: 500; }

.credit-table .num { text-align: right; }
.credit-table th.num { text-align: right; }

/* The P&L reads top-to-bottom as arithmetic, so the subtotals have to look
   like subtotals — a flat table of nine equal rows hides where the lines add
   up and where a deduction was applied. */
.fin-pnl { max-width: 46rem; }
.fin-pnl td:first-child { white-space: nowrap; }
.fin-pnl .fin-subtotal td { border-top: 1px solid var(--border); color: var(--text); }
.fin-pnl .fin-total td {
    border-top: 1px solid var(--border);
    border-bottom: none;
    font-size: 0.95rem;
    padding-top: 0.5rem;
}
.fin-pnl .hint { font-size: 0.76rem; }

.fin-actions { max-width: none; }

.fin-chart {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin: 0.5rem 0 1.4rem;
    overflow-x: auto;
}
.fin-svg { display: block; width: 100%; height: auto; min-width: 520px; }
.fin-svg .fin-grid { stroke: var(--border-soft); stroke-width: 1; }
.fin-svg .fin-axis { stroke: var(--border); stroke-width: 1; }
.fin-svg .fin-bar { fill: var(--accent); }
.fin-svg .fin-bar-cost { fill: var(--warn); }
/* An action that costs more than a credit earns is the one thing on this page
   that changes a price, so it is the one mark that changes colour. */
.fin-svg .fin-bar-over { fill: var(--fail); }
.fin-svg .fin-ref { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 4 3; }
.fin-svg .fin-tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.fin-svg .fin-label { fill: var(--text); font-size: 12px; font-family: var(--font); }
.fin-svg .fin-value { fill: var(--muted); font-size: 11px; font-family: var(--mono); }

.fin-assumptions {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    margin: 1.6rem 0 2rem;
    max-width: 62rem;
}
.fin-assumptions > summary { cursor: pointer; color: var(--accent-bright); font-size: 0.9rem; }
.fin-assumptions[open] > summary { margin-bottom: 0.6rem; }
.fin-knob { display: flex; flex-direction: column; gap: 0.2rem; }
.fin-knob > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.fin-knob .input { width: 7rem; }

/* The two numbers the finance page exists to answer carry a verdict colour;
   an unmeasured one gets neither, because "no data" has no verdict. */
.stat-value.good { color: var(--ok); }
.stat-value.bad { color: var(--fail); }

.fin-caveat {
    border-left: 2px solid var(--warn);
    padding-left: 0.7rem;
    max-width: 62rem;
    margin: 0.4rem 0 0.9rem;
}

.fin-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0.2rem 0 0.1rem; font-size: 0.8rem; color: var(--muted); }
.fin-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.fin-swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.fin-swatch.revenue { background: var(--accent); }
.fin-swatch.cost { background: var(--warn); }
.fin-knob-actions { margin-top: 0.8rem; }