/* ============================================================
   TFD Podcast Ops — console shell (dark, radiant purple)
   Ported from the approved Founder's Diary prototype.
   Loaded after site.css/tfd.css, so it wins.
   ============================================================ */

:root {
    --bg: #0F0D17;
    --sidebar: #14111F;
    --card: #1B1729;
    --card-hover: #211C33;
    --well: #14111F;
    --border: #2A2440;
    --text: #F3F1FA;
    --text-muted: #948FB0;
    --text-dim: #625D80;
    --accent: #8B5CF6;
    --accent-soft: #8B5CF61A;
    --accent-grad: linear-gradient(135deg, #9D7BFF 0%, #6D4CE8 100%);
    --green: #3DD9A4;
    --green-soft: #3DD9A41A;
    --amber: #F5B95C;
    --amber-soft: #F5B95C1A;
    --red: #F16A6A;
    --red-soft: #F16A6A1A;
    --radius: 14px;
}

/* Light theme — manual toggle only (sidebar button), not tied to OS preference. */
:root[data-theme="light"] {
    --bg: #F6F4FB;
    --sidebar: #FFFFFF;
    --card: #FFFFFF;
    --card-hover: #F1EDFA;
    --well: #F1EEFA;
    --border: #E4E0F0;
    --text: #1E1B2E;
    --text-muted: #5B5578;
    --text-dim: #8983A3;
}
:root[data-theme="light"] a { color: #6D4CE8; }
:root[data-theme="light"] a:hover { color: #5636C4; }

html, body { height: auto; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    margin: 0;
}
h1, h2, h3, .brand-name { font-family: 'Space Grotesk', 'Inter', sans-serif; }
button, input, select, textarea { font-family: 'Inter', sans-serif; }
a { color: #C6B4FF; text-decoration: none; }
a:hover { color: #DCCEFF; }

/* login / error screens use the same shell without a sidebar */
body.auth-page { display: block; }
body.auth-page .tfd-login-card { box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
body.auth-page .tfd-login-body { background: var(--card); }
body.auth-page .tfd-login-wrap { min-height: 100vh; }

/* ---------------- Sidebar ---------------- */
.sidebar {
    width: 248px; flex-shrink: 0; background: var(--sidebar);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 24px 16px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 24px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; }
.brand-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.brand-sub { font-size: 11px; color: var(--text-dim); font-weight: 500; letter-spacing: .04em; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; padding: 14px 12px 6px; }
.sidebar .nav-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
    color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 500;
    cursor: pointer; background: none; border: none; width: 100%; text-align: left;
}
.sidebar .nav-item svg { width: 17px; height: 17px; opacity: .85; flex-shrink: 0; }
.sidebar .nav-item:hover { background: var(--card-hover); color: var(--text); }
.sidebar .nav-item.active { background: var(--accent-soft); color: #C6B4FF; font-weight: 600; }
.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.user-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.user-role { font-size: 10.5px; color: var(--text-dim); }
.role-badge { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--accent-soft); color: #C6B4FF; margin-left: 6px; }
.logout-btn { width: 100%; margin-top: 10px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.logout-btn:hover { border-color: var(--accent); color: #C6B4FF; }
.theme-toggle-btn {
    width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.theme-toggle-btn:hover { border-color: var(--accent); color: #C6B4FF; }

/* ---------------- Main ---------------- */
.app-main { flex: 1; padding: 32px 40px 60px; max-width: 1320px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 14px; }
.topbar h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.topbar p { color: var(--text-muted); font-size: 13px; margin: 4px 0 0; }
/* ---- Global search (rendered by the layout, so it sits on every page) ---- */
.global-search {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 10px 8px 14px;
    margin-bottom: 18px;
}
.global-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.global-search-icon { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
.global-search input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; padding: 4px 0;
}
.global-search input::placeholder { color: var(--text-dim); }
/* the browser's own clear button is invisible on the dark shell */
.global-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.global-search .btn { flex-shrink: 0; }

@media (max-width: 640px) {
    .global-search { flex-wrap: wrap; }
    .global-search input { flex-basis: 100%; order: 3; }
}

.app-footer { margin-top: 26px; font-size: 11px; color: var(--text-dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------------- Buttons ---------------- */
.btn { border: none; padding: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
/* !important on color only: these classes land on Html::a(...) buttons too
   (e.g. podcast/import.php's "View podcasts"), i.e. real <a> tags, and a
   1-class selector loses to the light-theme `a { color }` override a few
   lines up — same white-text-on-purple-gradient bug as .fpill/.pagination. */
.btn-primary, .btn-tfd {
    background: var(--accent-grad); color: #fff !important;
    box-shadow: 0 4px 16px -4px rgba(139, 92, 246, .5); border: none;
}
.btn-primary:hover, .btn-tfd:hover { filter: brightness(1.07); color: #fff !important; }
.btn-ghost, .btn-outline-primary, .btn-dark, .btn-secondary {
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
}
.btn-ghost:hover, .btn-outline-primary:hover, .btn-dark:hover, .btn-secondary:hover {
    border-color: var(--accent); color: #C6B4FF; background: transparent;
}
.btn-danger { background: var(--red-soft); color: #F49B9B; border: 1px solid #F16A6A55; }
.btn-danger:hover { background: #F16A6A22; color: #F49B9B; }
.btn-sm { padding: 6px 11px; font-size: 12px; }

/* ---------------- Stat cards ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.stat-num { font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 8px; font-family: 'Space Grotesk', sans-serif; }
.stat-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.stat-card.accent .stat-num { color: #C6B4FF; }
.stat-card.green .stat-num { color: var(--green); }
.stat-card.amber .stat-num { color: var(--amber); }

/* ---------------- Panels & tables ----------------
   The table rules are scoped rather than global, so every container holding one
   has to be named. .stage-content is here because the stage accordion's tables
   live outside .panel and were rendering completely unstyled. */
.row-2col { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.panel-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-head h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
.panel-head a { font-size: 12px; color: var(--accent); font-weight: 600; }
.panel-body { padding: 18px 20px; }
.panel-scroll { overflow-x: auto; }

.panel table, table.data, .stage-content table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--text); }
.panel th, table.data th, .stage-content th { text-align: left; padding: 11px 18px; color: var(--text-dim); font-weight: 600; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: none; }
.panel td, table.data td, .stage-content td { padding: 12px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.panel tbody tr:last-child td, .stage-content tbody tr:last-child td { border-bottom: none; }
.panel tbody tr:hover td, .stage-content tbody tr:hover td { background: var(--card-hover); }
/* stage view row tables — stages 2-11 list their episodes instead of stacking
   editable cards; the stage work itself opens in a per-row modal */
.stage-table { padding: 0; }
.stage-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.stage-filters .col-filter { width: auto; min-width: 150px; flex: 0 1 190px; }
.stage-filter-count { font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-left: auto; }
/* "Operations Manager + Resource Allocation Team" is the longest owner label;
   capped and wrapped so it never crowds out the columns either side of it */
.stage-owner { color: var(--text-muted); max-width: 190px; white-space: normal; line-height: 1.35; }
.stage-empty-filter { padding: 22px 18px; text-align: center; color: var(--text-dim); font-size: 12.5px; }
.stage-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 18px; }
.stage-pager:empty { display: none; }
.stage-pager button { border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; min-width: 30px; padding: 5px 9px; border-radius: 7px; cursor: pointer; }
.stage-pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.stage-pager button.active { background: var(--accent-grad); color: #fff; border-color: transparent; }
.stage-pager button:disabled { opacity: .4; cursor: default; }
.stage-pager .stage-pager-info { font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-left: auto; }

/* a stage card rendered inside its row modal: it is the only thing in there,
   so it drops the grid-cell framing it needed when cards sat side by side */
.align-card--modal { border: none; background: transparent; padding: 0; margin: 0; box-shadow: none; }

/* per-column filter row inside the list header — controls sit flush under
   their column heading, so the row reads as part of the table, not a toolbar */
.filter-row th { padding: 8px 12px 10px; background: var(--well); border-bottom: 1px solid var(--border); }
.col-filter { box-sizing: border-box; width: 100%; min-width: 84px; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.col-filter:focus { outline: none; border-color: var(--accent); }
.col-filter::placeholder { color: var(--text-dim); }
.fpill-clear { border-color: var(--red); color: var(--red); }
.fpill-clear:hover { border-color: var(--red); color: var(--red); }
.filter-count { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }

.p-title { font-weight: 600; }
.p-title a { color: var(--text); }
.p-title a:hover { color: #C6B4FF; }
.p-title button { background: none; border: none; padding: 0; font-size: inherit; font-family: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.p-title button:hover { color: #C6B4FF; }
.guest-mini { display: flex; align-items: center; gap: 7px; color: var(--text-muted); }
.g-dot { width: 18px; height: 18px; border-radius: 50%; background: #2A2440; color: #C6B4FF; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 13px; }

/* tags / status pills */
.tag { font-size: 9.5px; font-weight: 700; padding: 2.5px 7px; border-radius: 5px; text-transform: uppercase; }
.tag.high { background: #F16A6A22; color: #F49B9B; }
.tag.medium { background: #F5B95C22; color: #F5C888; }
.tag.low { background: #3DD9A422; color: #7FE8C6; }
.status-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; display: inline-block; }
.status-pill.active { background: var(--accent-soft); color: #C6B4FF; }
.status-pill.completed { background: var(--green-soft); color: var(--green); }
.status-pill.on_hold { background: var(--amber-soft); color: var(--amber); }
.status-pill.cancelled, .status-pill.revoked { background: var(--red-soft); color: var(--red); }
.status-pill.muted { background: #2A2440; color: var(--text-dim); }
.deadline { color: var(--text-dim); }
.deadline.overdue { color: #F49B9B; font-weight: 600; }
.del-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 0; }
.del-btn:hover { color: var(--red); }

/* payment pills */
.payment-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; display: inline-block; }
.payment-pill.pending { background: var(--amber-soft); color: var(--amber); }
.payment-pill.partial { background: var(--accent-soft); color: #C6B4FF; }
.payment-pill.recovered { background: var(--green-soft); color: var(--green); }

/* stage progression control */
.stage-progress-cell { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.stage-arrow {
    width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.stage-arrow:hover:not(:disabled) { border-color: var(--accent); color: #C6B4FF; }
.stage-arrow:disabled { opacity: .3; cursor: not-allowed; }
.stage-arrow svg { width: 11px; height: 11px; }
.stage-progress-track { flex: 1; height: 5px; background: #2A2440; border-radius: 99px; overflow: hidden; min-width: 50px; }
.stage-progress-fill { height: 100%; background: var(--accent-grad); border-radius: 99px; }
.stage-progress-label { font-size: 10.5px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }

/* filters */
.filters { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 18px; flex-wrap: wrap; }
.filters .label { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-right: 4px; }
/* Scoped under .filters (every current fpill sits there) instead of a bare
   `.fpill`/`.fpill.active`: fpill is rendered via Html::a, i.e. a real <a>,
   and a 1-2 class selector loses to the `a { color }` rule above (3 classes
   once you count the light-theme override) — that's what made the selected
   "Sheet import" pill's white text the same purple as its own gradient
   background. The extra .filters level outranks it in both themes. */
.filters .fpill { border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 99px; cursor: pointer; display: inline-block; }
.filters .fpill:hover { border-color: var(--accent); color: var(--text); }
.filters .fpill.active { background: var(--accent-grad); color: #fff; border-color: transparent; }

/* pipeline rail */
.rail-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rail-head h3 { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 0; }
.rail-total { font-size: 11.5px; color: var(--text-dim); }
.rail-total b { color: var(--text); }
.rail-scroll { overflow-x: auto; padding-bottom: 6px; }
.rail-cards { display: flex; gap: 10px; min-width: max-content; }
.rail-card {
    width: 132px; flex-shrink: 0; background: var(--well); border: 1px solid var(--border);
    border-radius: 11px; padding: 12px; text-decoration: none; display: block;
    transition: border-color .15s, background .15s, transform .1s;
}
.rail-card:hover { border-color: var(--accent); background: var(--card-hover); transform: translateY(-2px); color: inherit; }
.rail-card.has-work { border-color: var(--accent); background: linear-gradient(160deg, #241C40 0%, #1B1729 100%); }
.rail-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rail-card-num { font-size: 10px; font-weight: 700; color: var(--text-dim); background: var(--well); border-radius: 5px; padding: 2px 7px; }
.rail-card.has-work .rail-card-num { color: #C6B4FF; }
.rail-card-count { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-dim); }
.rail-card.has-work .rail-card-count { color: #fff; }
.rail-card-name { font-size: 10.5px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.rail-card.has-work .rail-card-name { color: var(--text); }
.rail-card-bar { height: 3px; background: #2A2440; border-radius: 99px; margin-top: 9px; overflow: hidden; }
.rail-card-bar-fill { height: 100%; background: var(--accent-grad); }

/* stage accordion */
.stage-list { display: flex; flex-direction: column; gap: 10px; }
.stage-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 20px; transition: border-color .3s, box-shadow .3s; }
/* pipeline rail click -> open the section and mark it for a moment */
.stage-section.flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stage-toggle { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; color: var(--text); }
.stage-toggle-left { display: flex; align-items: center; gap: 12px; }
.stage-num { width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: #C6B4FF; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stage-titles { text-align: left; }
.stage-titles .name { font-size: 13.5px; font-weight: 600; }
.stage-titles .sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.stage-count { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--well); border: 1px solid var(--border); border-radius: 99px; padding: 3px 10px; }
.stage-count.has { color: #C6B4FF; border-color: var(--accent); }
.chevron { width: 14px; height: 14px; color: var(--text-dim); transition: transform .15s; }
.stage-section.open .chevron { transform: rotate(180deg); }
.stage-toggle-right { display: flex; align-items: center; gap: 12px; }
/* No height cap: every stage from S2 up is a paginated row table, so its height
   is already bounded by the page size. Capping it as well nested a scrollbar
   inside the accordion inside the page, and the old card stages had opted out of
   the cap anyway. Also keeps overflow visible, which the row modals rely on. */
.stage-content { border-top: 1px solid var(--border); display: none; }
.stage-section.open .stage-content { display: block; }
.empty-stage { padding: 18px; color: var(--text-dim); font-size: 12.5px; text-align: center; }
.stage-move-cell { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- S2 · Scheduling & Content Alignment ----
   This stage splits across two owners (Operations books the client call, the
   Content Team supplies the script) with the Operations Manager staying the
   client's POC, so it gets cards instead of the shared table. Colours come from
   the theme variables, so the cards follow the light/dark toggle. */
.align-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.align-card { background: var(--well); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.align-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.align-card-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.align-card-uid { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #C6B4FF; font-size: 13px; }
.align-card-uid:hover { color: #DCCEFF; }
.poc-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; color: var(--text-muted);
    background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 3px 10px;
}
.poc-tag svg { width: 11px; height: 11px; flex-shrink: 0; }
.align-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.align-field label { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.align-field input { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 7px; font-size: 12.5px; }
.align-field input:focus { outline: none; border-color: var(--accent); }
.align-field input:disabled { opacity: .5; cursor: not-allowed; }
.align-field textarea { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 7px; font-size: 12.5px; font-family: inherit; resize: vertical; }
.align-field textarea:focus { outline: none; border-color: var(--accent); }
.align-field textarea:disabled { opacity: .5; cursor: not-allowed; }
.align-field select { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 7px; font-size: 12.5px; font-family: inherit; }
.align-field select:focus { outline: none; border-color: var(--accent); }
.align-field select:disabled { opacity: .5; cursor: not-allowed; }
.raw-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.raw-file-row a { font-size: 12px; color: var(--text); overflow-wrap: anywhere; word-break: break-all; }
.align-field-value { font-size: 12.5px; color: var(--text); min-height: 18px; }
.note-thread { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.note-thread-label { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.note-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.note-item { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.note-meta { font-size: 10.5px; color: var(--text-dim); margin-bottom: 3px; font-weight: 600; }
.note-body { font-size: 12px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-empty { font-size: 11.5px; color: var(--text-dim); padding: 6px 0; }
.note-form { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.note-form textarea { flex: 1; min-height: 36px; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 7px; font-size: 12.5px; font-family: inherit; resize: vertical; }
.note-form textarea:focus { outline: none; border-color: var(--accent); }
.cal-event.recording { background: var(--green-soft); color: var(--green); }
.cal-event.recording.unfixed { background: var(--amber-soft); color: var(--amber); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.handover-toggle { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.handover-toggle-label { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.handover-toggle-row { display: flex; align-items: center; gap: 8px; }
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background .15s; }
.switch-slider::before { content: ''; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + .switch-slider { background: var(--green); }
.switch input:checked + .switch-slider::before { transform: translateX(17px); }
.switch input:disabled + .switch-slider { opacity: .5; cursor: not-allowed; }
.handover-toggle-state { font-size: 12px; font-weight: 600; }
.handover-toggle-state.is-fixed { color: var(--green); }
.handover-toggle-state.is-unfixed { color: var(--text-dim); }
.align-upload-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.align-upload-form { display: flex; margin: 0; }
.align-upload-btn {
    font-size: 11.5px; font-weight: 600; color: #C6B4FF; background: var(--accent-soft);
    border: 1px solid var(--accent); border-radius: 7px; padding: 7px 12px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif;
}
.align-upload-btn:hover { background: var(--accent); color: #fff; }
.align-file-name { font-size: 11px; color: var(--text-dim); min-width: 0; overflow-wrap: anywhere; }
.align-file-name.has-file { color: var(--green); font-weight: 600; }
.align-file-name.has-file a { color: inherit; text-decoration: underline; }
.align-card-move { display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); justify-content: flex-end; }

/* ---- light-theme corrections ----
   Everything below is a hardcoded colour that only reads on the dark shell:
   #C6B4FF-family inks (unreadable on a white card) and the #2A2440/#241C40
   surfaces (which turn near-black behind dark light-mode text). The variables
   already flip; these literals could not, so each gets a light counterpart. */
:root[data-theme="light"] .stage-num,
:root[data-theme="light"] .stage-count.has,
:root[data-theme="light"] .align-card-uid,
:root[data-theme="light"] .align-upload-btn,
:root[data-theme="light"] .sidebar .nav-item.active,
:root[data-theme="light"] .rail-card.has-work .rail-card-num,
:root[data-theme="light"] .stat-card.accent .stat-num { color: #6D4CE8; }
:root[data-theme="light"] .align-card-uid:hover { color: #5636C4; }
:root[data-theme="light"] .align-upload-btn:hover { color: #fff; }

/* the "has work" rail card was a dark gradient carrying dark light-mode text */
:root[data-theme="light"] .rail-card.has-work {
    background: linear-gradient(160deg, #EDE6FF 0%, #F8F6FD 100%);
}
:root[data-theme="light"] .rail-card.has-work .rail-card-count { color: #3B2E6B; }
:root[data-theme="light"] .rail-card-bar { background: #E4E0F0; }
:root[data-theme="light"] .g-dot { background: #EDE6FF; color: #5636C4; }

/* the remaining dark pill surfaces and pastel inks, same reason */
:root[data-theme="light"] .status-pill.muted,
:root[data-theme="light"] .pill-black { background: #EDE6FF; color: #5B5578; }
:root[data-theme="light"] .status-pill.active,
:root[data-theme="light"] .pill-purple { color: #5636C4; }
:root[data-theme="light"] .deadline.overdue { color: #C2352F; }

/* pastel-on-dark tag inks are too pale to read on white */
:root[data-theme="light"] .tag.high { background: #F16A6A1F; color: #B33232; }
:root[data-theme="light"] .tag.medium { background: #F5B95C2E; color: #8A5A0B; }
:root[data-theme="light"] .tag.low { background: #3DD9A42E; color: #107150; }

@media (max-width: 720px) {
    .align-grid { grid-template-columns: 1fr; }
}

/* calendar */
.cal-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cal-head h3 { font-size: 15px; font-weight: 600; margin: 0; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cal-nav-btn:hover { border-color: var(--accent); color: #C6B4FF; }
.cal-today-btn { font-size: 12px; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px; cursor: pointer; margin-left: 6px; }
.cal-today-btn:hover { border-color: var(--accent); color: #C6B4FF; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cal-cell { min-height: 96px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 7px; position: relative; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.pad { background: var(--well); }
.cal-daynum { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.cal-cell.today .cal-daynum { color: #fff; background: var(--accent-grad); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-event { margin-top: 5px; font-size: 10px; font-weight: 600; padding: 3px 6px; border-radius: 5px; background: var(--accent-soft); color: #C6B4FF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cal-event.overdue { background: var(--red-soft); color: #F49B9B; }
.cal-legend { display: flex; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; }
.cal-legend span { display: flex; align-items: center; gap: 6px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; }

/* activity log */
.activity-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.activity-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.activity-icon svg { width: 14px; height: 14px; }
.activity-icon.add { background: var(--green-soft); color: var(--green); }
.activity-icon.delete { background: var(--red-soft); color: var(--red); }
.activity-icon.update { background: var(--accent-soft); color: #C6B4FF; }
.activity-text { font-size: 13px; }
.activity-text b { font-weight: 600; }
.activity-time { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(10, 8, 16, .7); display: none; align-items: center; justify-content: center; z-index: 1050; }
.overlay.open { display: flex; }
/* The one shared shoot-details modal stacks above whichever row modal opened it. */
#shoot-modal { z-index: 1100; }
#shoot-modal .shoot-missing { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft); }
.modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; width: 460px; max-width: 92vw; padding: 24px; max-height: 88vh; overflow-y: auto; }
.modal-box--wide { width: 85vw; max-width: 1200px; }
/* Wider variant for modals that carry more than one column of fields. */
.modal-box.modal-lg { width: 640px; }
.modal-box h2 { font-size: 17px; font-weight: 600; margin-bottom: 18px; }
.modal-box h2 .modal-sub { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 4px; }
/* Side-by-side fields; min-width:0 keeps a long select from blowing the row out. */
.field-row { display: flex; gap: 14px; }
.field-row > .field { flex: 1; min-width: 0; }
@media (max-width: 560px) { .field-row { flex-direction: column; gap: 0; } }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.field input, .field select, .field textarea { box-sizing: border-box; width: 100%; background: var(--well); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field .hint { font-size: 11px; color: var(--text-dim); margin-top: 5px; }
.field-sheet { background: var(--well); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.field-sheet-title { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }

/* Read-only echo of the modules the chosen role can open — sits beside the
   role select, so it matches the input height rather than hugging its text. */
.modules-preview {
    background: var(--well); border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 12px; font-size: 12px; color: var(--text-muted); line-height: 1.55;
    min-height: 38px;
}

/* Stage access picker (Access Management) — a checkbox per pipeline stage.
   Every rule is scoped under .stage-pick: the items are <label>s, and the
   generic `.field label` (uppercase, display:block, 100%-wide inputs) would
   otherwise win on specificity and break the rows apart. */
.stage-pick { background: var(--well); border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; }
.stage-pick label { display: flex; align-items: center; text-transform: none; letter-spacing: 0; margin: 0; }
.stage-pick .stage-pick-all {
    gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--text);
    padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.stage-pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 9px 14px; }
.stage-pick-grid.is-locked { opacity: .5; pointer-events: none; }
.stage-pick .stage-pick-item { gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); min-width: 0; cursor: pointer; }
.stage-pick .stage-pick-item:hover { color: var(--text); }
.stage-pick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stage-pick-item b {
    flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--text-dim);
    background: var(--card); border: 1px solid var(--border); border-radius: 4px;
    padding: 2px 5px; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.stage-pick input[type=checkbox] { width: 14px; height: 14px; flex-shrink: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.modal-section-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.modal-section-label:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.uid-preview {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #221A3D 0%, #1B1729 100%);
    border: 1px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
}
:root[data-theme="light"] .uid-preview { background: linear-gradient(135deg, #EDE6FF 0%, #F6F4FB 100%); }
.uid-preview-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uid-preview-icon svg { width: 18px; height: 18px; color: #fff; }
.uid-preview-label { font-size: 10.5px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.uid-preview-value { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
.uid-preview-input {
    font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: .02em;
    background: transparent; border: none; outline: none; padding: 0; width: 100%;
}
.uid-preview-input::placeholder { color: var(--text-dim); font-weight: 600; }
.uid-preview-input.is-invalid { color: var(--danger, #e04b4b); }
.pending-amount-display {
    background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px;
    padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px;
}
.pending-amount-display .label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.pending-amount-display .value { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #C6B4FF; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* flash messages */
.flash { border-radius: 10px; padding: 11px 16px; font-size: 13px; margin-bottom: 16px; border: 1px solid var(--border); }
.flash-success { background: var(--green-soft); border-color: #3DD9A455; color: #9BEBCE; }
.flash-error { background: var(--red-soft); border-color: #F16A6A55; color: #F49B9B; }

/* ---------------- Bootstrap surfaces, darkened ----------------
   The detail/edit screens still use Bootstrap markup — keep them
   readable inside the dark shell. */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); box-shadow: none; }
.card-header { background: transparent; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 600; }
.table { color: var(--text); --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
.table thead th { background: transparent; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.table > :not(caption) > * > * { background: transparent; color: var(--text); border-bottom-color: var(--border); box-shadow: none; }
.form-control, .form-select, .input-group-text {
    background: var(--well); border: 1px solid var(--border); color: var(--text);
}
.form-control:focus, .form-select:focus { background: var(--well); border-color: var(--accent); color: var(--text); box-shadow: none; }
.form-control::placeholder { color: var(--text-dim); }
.form-label, .form-check-label { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
/* Bootstrap's helper text, dimmed to match the app's own .field .hint */
.form-text { color: var(--text-dim); font-size: 11px; }
.list-group { --bs-list-group-bg: transparent; }
.list-group-item { background: transparent; border-color: var(--border); color: var(--text); }
.list-group-item-action:hover { background: var(--card-hover); color: var(--text); }
.text-muted { color: var(--text-muted) !important; }
.progress { background: #2A2440; }
.progress-bar { background: var(--accent-grad); }

/* Bootstrap's pagination widget. Selectors are kept 3-4 classes deep on
   purpose: the plain `a { color }` rule above — and its light-theme override
   near the top of this file — outrank a 2-class selector like
   `.pagination .page-link`, which left the active page's number the same
   purple as the gradient square behind it (invisible). Matching the extra
   `.page-item` level beats that in both themes. */
.pagination .page-item .page-link {
    background: var(--card);
    border-color: var(--border);
    color: var(--text-muted);
}
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
    background: var(--card-hover);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: none;
}
.pagination .page-item.active .page-link {
    background: var(--accent-grad);
    border-color: transparent;
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    background: var(--well);
    border-color: var(--border);
    color: var(--text-dim);
}
.alert { border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.alert-success { background: var(--green-soft); border-color: #3DD9A455; color: #9BEBCE; }
.alert-danger, .alert-error { background: var(--red-soft); border-color: #F16A6A55; color: #F49B9B; }
.pill-purple { background: var(--accent-soft); color: #C6B4FF; }
.pill-black { background: #2A2440; color: var(--text-muted); }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-red { background: var(--red-soft); color: var(--red); }
.st-pending { background: #2A2440; color: var(--text-muted); }
.st-in_progress { background: var(--amber-soft); color: var(--amber); }
.st-done { background: var(--green-soft); color: var(--green); }
.st-skipped { background: var(--accent-soft); color: #C6B4FF; }
.pipeline .step { background: var(--well); border-color: var(--border); color: var(--text-muted); }
.pipeline .step.current { border-color: var(--accent); color: #C6B4FF; }
.section-title { color: var(--text); font-weight: 700; }
.text-purple { color: #C6B4FF !important; }
.tfd-footer, .tfd-navbar { display: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .row-2col { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; }
    .app-main { padding: 22px 16px 40px; }
    .rail { overflow-x: auto; }
    .rail-seg { min-width: 64px; }
}

/* ---------------- Finance: monthly bank hit + Collect Amount ----------------
   "Mark Paid" is gone; a podcast becomes Recovered on its own once the
   installments recorded through the Collect modal add up to the deal. */
.collect-link { font-size: 10.5px; font-weight: 700; color: var(--green); text-decoration: none; }
.collect-link:hover { text-decoration: underline; color: var(--green); }
.bank-hit-panel { margin-bottom: 20px; }
.bank-hit-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bank-hit-head h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
.bank-hit-sub { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.bank-hit-filter { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; align-items: center; }
.bank-hit-filter select,
.bank-hit-filter input[type="date"] { background: var(--well); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bank-hit-filter select:focus,
.bank-hit-filter input[type="date"]:focus { outline: none; border-color: var(--accent); }
.bank-hit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.bank-hit-card { padding: 18px 20px; border-right: 1px solid var(--border); }
.bank-hit-card:last-child { border-right: none; }
.bank-hit-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.bank-hit-num { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; margin: 6px 0 4px; color: var(--text); }
.bank-hit-card.total { background: var(--accent-soft); }
.bank-hit-card.total .bank-hit-num { color: #C6B4FF; }
.bank-hit-hint { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 760px) { .bank-hit-grid { grid-template-columns: 1fr; } .bank-hit-card { border-right: none; border-bottom: 1px solid var(--border); } }

.collect-btn { display: inline-flex; align-items: center; gap: 6px; }
.collect-btn svg { width: 12px; height: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px !important; }
.icon-btn svg { width: 14px; height: 14px; }
.collect-modal { width: 720px; }
.collect-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.collect-uid { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700; color: #C6B4FF; letter-spacing: .04em; margin-bottom: 4px; }
.collect-meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 6px; }
.collect-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.collect-sum-item { background: var(--well); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.collect-sum-label { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.collect-sum-num { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; margin-top: 4px; color: var(--text); }
.collect-sum-num.green { color: var(--green); }
.collect-sum-num.amber { color: var(--amber); }
.collect-progress { height: 6px; background: var(--well); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.collect-progress-bar { height: 100%; background: var(--accent-grad); border-radius: 99px; transition: width .3s; }
.collect-progress-bar.done { background: var(--green); }
.collect-progress-label { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.collect-ledger { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: 240px; overflow-y: auto; }
.collect-ledger table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.collect-ledger th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; background: var(--well); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.collect-ledger td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.collect-ledger tr:last-child td { border-bottom: none; }
.collect-ledger .ledger-idx { color: var(--text-dim); font-weight: 700; width: 28px; }
.collect-ledger .ledger-amt { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--green); white-space: nowrap; }
.collect-ledger .ledger-note { color: var(--text-muted); max-width: 220px; }
.collect-empty { font-size: 12.5px; color: var(--text-muted); background: var(--well); border: 1px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center; }
.collect-modal .field label .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-dim); margin-left: 4px; }
.collect-auto-hint { font-size: 11.5px; color: var(--text-muted); background: var(--green-soft); border: 1px solid #3DD9A433; border-radius: 8px; padding: 9px 12px; margin-top: 4px; }
.collect-paid-banner { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--green); background: var(--green-soft); border: 1px solid #3DD9A455; border-radius: 10px; padding: 12px 14px; margin-top: 16px; }
.collect-paid-banner svg { width: 16px; height: 16px; }