:root {
    --ink: #102820;
    --ink-2: #17382e;
    --ink-3: #214b3e;
    --canvas: #f5f4ef;
    --surface: #ffffff;
    --surface-2: #f0efe9;
    --line: #dfded7;
    --line-dark: rgba(255,255,255,.12);
    --text: #17221e;
    --muted: #68736e;
    --subtle: #8b938f;
    --accent: #b7d377;
    --accent-strong: #f0da1b;
    --gold: #bf9b5f;
    --success: #287a55;
    --warning: #a8691d;
    --danger: #ad3f3f;
    --shadow-sm: 0 1px 2px rgba(17,36,29,.04), 0 8px 24px rgba(17,36,29,.04);
    --shadow-lg: 0 28px 70px rgba(11,31,24,.18);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --sidebar: 264px;
    --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--text); font-family: Inter, "Avenir Next", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(145,184,73,.55); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 9999; left: 16px; top: 12px; transform: translateY(-160%); padding: 10px 16px; border-radius: 8px; background: white; color: var(--ink); font-weight: 700; transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 10px; color: var(--accent-strong); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: var(--muted); }
.security-alert { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid #d9b36a; border-radius: var(--radius-sm); color: #5c3b08; background: #fff7e6; }
.security-alert span { color: inherit; font-size: 14px; }
[data-theme="dark"] .security-alert { border-color: #7d632f; color: #ffe2a3; background: #302711; }
.form-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-section-title strong { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.form-section-title span { color: var(--muted); font-size: 12px; text-align: right; }
[data-theme="dark"] .form-section-title { border-color: var(--line-dark); }

/* Access */
.access-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(380px, .88fr) minmax(480px, 1.12fr); background: var(--surface); }
.access-brand { position: relative; display: flex; min-height: 100dvh; flex-direction: column; overflow: hidden; padding: 48px clamp(36px, 6vw, 92px); color: white; background: var(--ink); }
.access-brand::before { content: ""; position: absolute; right: -28%; bottom: -10%; width: 78%; aspect-ratio: 1; border: 1px solid rgba(183,211,119,.2); border-radius: 50%; box-shadow: 0 0 0 70px rgba(183,211,119,.025), 0 0 0 140px rgba(183,211,119,.02); }
.access-brand::after { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
.brand { position: relative; z-index: 1; display: flex; align-items: center; width: max-content; color: white; text-decoration: none; }
.brand-logo { display: block; width: 174px; height: auto; }
.brand-logo--inverse { filter: invert(1); }
.brand-extension { margin-left: 10px; color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .12em; white-space: nowrap; }
.sidebar .brand-logo { width: 116px; }
.sidebar .brand-extension { margin-left: 7px; font-size: 8px; letter-spacing: .08em; }
.brand-mark { color: var(--accent); font-family: Georgia, serif; font-size: 27px; font-weight: 700; letter-spacing: .03em; }
.brand-divider { width: 1px; height: 31px; margin: 0 12px; background: rgba(255,255,255,.28); }
.brand-name { font-size: 9px; font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; }
.access-statement { position: relative; z-index: 1; max-width: 560px; margin: auto 0; }
.access-statement h1 { margin: 0 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px, 5vw, 76px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.access-statement > p:last-child { max-width: 450px; margin: 0; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.75; }
.access-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6); font-size: 12px; }
.access-foot svg { width: 17px; color: var(--accent); }
.access-panel { display: grid; place-items: center; padding: 48px; background: #faf9f6; }
.login-card, .eligibility-card, .decline-card { width: min(100%, 470px); }
.login-card h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 36px; font-weight: 500; letter-spacing: -.025em; }
.eligibility-card h2, .decline-card h2 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.gate-icon { display: grid; width: 46px; height: 46px; margin-bottom: 24px; place-items: center; border-radius: 13px; color: var(--success); background: #eaf2ea; }
.gate-icon svg { width: 22px; height: 22px; }
.gate-notice { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.criteria-list { display: grid; gap: 10px; }
.criterion { display: grid; grid-template-columns: 23px 1fr; gap: 10px; align-items: start; color: #3e4a45; font-size: 12px; line-height: 1.55; }
.criterion span:first-child { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--accent); font-size: 9px; font-weight: 900; }
.minimum-card { margin: 18px 0 14px; padding: 14px 16px; border-left: 3px solid var(--gold); border-radius: 0 9px 9px 0; color: #4a4e4b; background: #f3eee5; font-size: 11px; line-height: 1.55; }
.gate-warning { margin: 0 0 18px; color: var(--danger); font-size: 11px; font-weight: 700; }
.gate-actions { display: grid; gap: 4px; }
.btn--text { color: var(--muted); background: transparent; }
.btn--text:hover { color: var(--text); background: rgba(16,40,32,.04); }
.btn:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.login-card > .muted { margin: 0 0 36px; }
.mobile-brand { display: none; }
.mobile-brand-logo { display: block; width: 178px; height: auto; }
.mobile-brand { align-items: center; gap: 10px; }
.mobile-brand span { color: var(--success); font-size: 11px; font-weight: 850; letter-spacing: .12em; white-space: nowrap; }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; color: #35403b; font-size: 13px; font-weight: 700; }
.label-row { display: flex; justify-content: space-between; align-items: center; }
.label-row a { margin-bottom: 8px; color: var(--success); font-size: 12px; font-weight: 700; text-decoration: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #d5d7d3; border-radius: var(--radius-sm); color: var(--text); background: white; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder { color: #9aa19d; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-strong); outline: none; box-shadow: 0 0 0 4px rgba(145,184,73,.12); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { display: block; min-height: 18px; padding-top: 4px; color: var(--danger); font-size: 12px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 52px; }
.input-icon { position: absolute; right: 3px; top: 3px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); }
.btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 800; text-decoration: none; transition: background .2s, border-color .2s, transform .2s, color .2s; }
.btn:active { transform: scale(.98); }
.btn--primary { color: #fff; background: var(--ink); }
.btn--primary:hover { background: var(--ink-2); }
.btn--primary svg { width: 17px; }
.btn--secondary { border-color: var(--line); color: var(--text); background: var(--surface); }
.btn--secondary:hover { border-color: #bec2bc; background: #fafafa; }
.btn--accent { color: var(--ink); background: var(--accent); }
.btn--full { width: 100%; min-height: 52px; }
.form-message { min-height: 22px; margin: -4px 0 10px; color: var(--danger); font-size: 13px; }
.demo-link { display: block; width: 100%; min-height: 44px; margin-top: 12px; border: 0; color: var(--success); background: transparent; font-size: 12px; font-weight: 800; }
.security-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0; color: var(--subtle); font-size: 11px; }
.security-note svg { width: 15px; }

/* Shell */
.portal { min-height: 100dvh; }
.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; width: var(--sidebar); flex-direction: column; padding: 32px 20px 20px; overflow-y: auto; color: rgba(255,255,255,.75); background: var(--ink); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 34px; }
.close-sidebar { display: none !important; }
.primary-nav { display: grid; gap: 5px; }
.nav-label { margin: 18px 12px 8px; color: rgba(255,255,255,.35); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-item { display: flex; min-height: 46px; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 10px; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 650; text-decoration: none; transition: background .2s, color .2s; }
.nav-item svg { width: 19px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: white; background: rgba(183,211,119,.12); }
.nav-item.active svg { color: var(--accent); }
.nav-item--button { width: 100%; border: 0; text-align: left; background: transparent; }
.nav-label--help { margin-top: 24px; }
.nav-item.wizard-focus { color: white; background: rgba(240,218,27,.14); box-shadow: inset 3px 0 0 var(--accent-strong); }
.sidebar-support { margin-top: auto; padding: 18px; border: 1px solid var(--line-dark); border-radius: 14px; background: rgba(255,255,255,.035); }
.support-icon { display: grid; width: 34px; height: 34px; margin-bottom: 12px; place-items: center; border-radius: 9px; color: var(--accent); background: rgba(183,211,119,.1); }
.support-icon svg { width: 17px; }
.sidebar-support strong, .sidebar-support span { display: block; }
.sidebar-support strong { color: white; font-size: 12px; }
.sidebar-support span { margin-top: 4px; color: rgba(255,255,255,.45); font-size: 10px; line-height: 1.5; }
.sidebar-support a { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent); font-size: 10px; font-weight: 800; text-decoration: none; }
.sidebar-support a svg { width: 12px; }
.sidebar-user { display: grid; grid-template-columns: 38px 1fr 40px; gap: 10px; align-items: center; margin: 20px -2px 0; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.sidebar-user strong, .sidebar-user span { display: block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: white; font-size: 11px; }
.sidebar-user span { color: rgba(255,255,255,.4); font-size: 9px; text-transform: capitalize; }
.avatar { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--ink); background: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.avatar--small { width: 34px; height: 34px; }
.icon-btn { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 10px; color: inherit; background: transparent; transition: background .2s, color .2s; }
.icon-btn:hover { color: var(--text); background: rgba(16,40,32,.07); }
.sidebar .icon-btn:hover { color: white; background: rgba(255,255,255,.08); }
.portal-frame { min-height: 100dvh; margin-left: var(--sidebar); }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; height: 72px; align-items: center; gap: 24px; padding: 0 clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line); background: rgba(245,244,239,.92); backdrop-filter: blur(14px); }
.menu-button { display: none; }
.search-box { position: relative; display: flex; max-width: 410px; flex: 1; align-items: center; }
.search-box > svg { position: absolute; left: 13px; width: 17px; color: var(--subtle); }
.search-box input { width: 100%; height: 40px; padding: 0 54px 0 40px; border: 1px solid transparent; border-radius: 10px; color: var(--text); background: rgba(16,40,32,.045); font-size: 12px; }
.search-box input:focus { border-color: #c8cbc5; outline: none; background: white; box-shadow: 0 4px 14px rgba(16,40,32,.05); }
.search-box kbd { position: absolute; right: 9px; padding: 2px 6px; border: 1px solid #d3d3cc; border-radius: 5px; color: var(--subtle); background: rgba(255,255,255,.7); font-family: inherit; font-size: 9px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.secure-pill { display: flex; align-items: center; gap: 7px; margin-right: 8px; color: var(--muted); font-size: 10px; font-weight: 700; }
.secure-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(40,122,85,.12); }
.notification-button { position: relative; color: var(--muted); }
.notification-button i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1px solid var(--canvas); border-radius: 50%; background: var(--gold); }
.profile-button { display: flex; min-width: 54px; height: 44px; align-items: center; gap: 2px; padding: 4px; border: 0; border-radius: 22px; background: transparent; }
.profile-button > svg { width: 13px; color: var(--muted); transform: rotate(90deg); }

/* Dashboard */
#main-content { padding: clamp(24px, 3.5vw, 48px); }
.page-container { max-width: 1440px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-head h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(30px, 3vw, 42px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.page-head p:not(.eyebrow) { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.page-actions { display: flex; gap: 10px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }
.metric-card { position: relative; min-height: 156px; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.metric-card--dark { color: white; border-color: var(--ink); background: var(--ink); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 750; }
.metric-card--dark .metric-label { color: rgba(255,255,255,.58); }
.metric-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--success); background: rgba(40,122,85,.08); }
.metric-card--dark .metric-icon { color: var(--accent); background: rgba(183,211,119,.1); }
.metric-icon svg { width: 17px; }
.metric-value { margin-top: 17px; font-family: Georgia, serif; font-size: clamp(24px, 2.1vw, 32px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric-foot { display: flex; align-items: center; gap: 6px; margin-top: 13px; color: var(--muted); font-size: 10px; }
.metric-foot strong { color: var(--success); }
.metric-card--dark .metric-foot { color: rgba(255,255,255,.48); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,.75fr); gap: 18px; }
.stack { display: grid; gap: 18px; align-content: start; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 800; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.text-link { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; border: 0; color: var(--success); background: transparent; font-size: 10px; font-weight: 800; text-decoration: none; }
.text-link svg { width: 13px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 12px 20px; color: var(--subtle); background: #fafaf8; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.data-table td { padding: 16px 20px; border-top: 1px solid #eeeee9; color: #45504b; font-size: 11px; font-variant-numeric: tabular-nums; }
.data-table tbody tr { cursor: pointer; transition: background .15s; }
.data-table tbody tr:hover { background: #fbfbf8; }
.data-table strong { color: var(--text); font-size: 11px; }
.cell-title { display: flex; align-items: center; gap: 11px; }
.product-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--ink-3); background: #edf2e8; }
.product-icon svg { width: 16px; }
.cell-title span span { display: block; margin-top: 2px; color: var(--subtle); font-size: 9px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 99px; color: #286047; background: #e8f3ec; font-size: 9px; font-weight: 800; text-transform: capitalize; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status--pending { color: #8a5e22; background: #f8efe0; }
.status--paid, .status--completed { color: #58645f; background: #eceeec; }
.status--suspended, .status--closed { color: #9b4141; background: #f8e8e8; }
.progress-track { width: 88px; height: 5px; overflow: hidden; border-radius: 99px; background: #e7e9e5; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); }
.due-card { padding: 22px; color: white; background: var(--ink-2); }
.due-card .eyebrow { color: var(--accent); }
.due-card h3 { margin: 0; font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.due-amount { margin: 28px 0 6px; color: var(--accent); font-family: Georgia, serif; font-size: 32px; }
.due-meta { display: flex; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.due-meta div { flex: 1; }
.due-meta span, .due-meta strong { display: block; }
.due-meta span { color: rgba(255,255,255,.46); font-size: 9px; text-transform: uppercase; }
.due-meta strong { margin-top: 5px; font-size: 11px; }
.allocation { padding: 20px; }
.allocation-bar { display: flex; height: 8px; overflow: hidden; border-radius: 99px; background: #e8e9e5; }
.allocation-bar span:nth-child(1) { background: var(--ink); }
.allocation-bar span:nth-child(2) { background: var(--accent-strong); }
.allocation-bar span:nth-child(3) { background: var(--gold); }
.allocation-list { display: grid; gap: 13px; margin-top: 20px; }
.allocation-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; font-size: 10px; }
.allocation-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.allocation-item:nth-child(2) i { background: var(--accent-strong); }
.allocation-item:nth-child(3) i { background: var(--gold); }
.allocation-item span { color: var(--muted); }
.allocation-item strong { font-variant-numeric: tabular-nums; }
.activity-list { padding: 5px 20px; }
.activity-item { display: grid; grid-template-columns: 35px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #ecece7; }
.activity-item:last-child { border: 0; }
.activity-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--success); background: #edf4ef; }
.activity-icon svg { width: 15px; }
.activity-copy strong, .activity-copy span { display: block; }
.activity-copy strong { font-size: 10px; }
.activity-copy span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.activity-amount { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.activity-amount.negative { color: var(--danger); }

/* General pages */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar-search { position: relative; flex: 1; max-width: 330px; }
.toolbar-search svg { position: absolute; left: 13px; top: 13px; width: 16px; color: var(--subtle); }
.toolbar input, .toolbar select { min-height: 42px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface); font-size: 11px; }
.toolbar-search input { width: 100%; padding-left: 38px; }
.empty-state { padding: 64px 24px; color: var(--muted); text-align: center; }
.empty-state .metric-icon { margin: 0 auto 16px; }
.empty-state h3 { margin: 0 0 6px; color: var(--text); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-card { padding: 24px; }
.settings-card h2 { margin: 0 0 6px; font-size: 15px; }
.settings-card > p { margin: 0 0 24px; color: var(--muted); font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin: 4px 0 20px; background: var(--line); }
.detail-grid div { padding: 16px; background: var(--surface); }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.detail-grid strong { margin-top: 5px; font-size: 13px; }
.modal { width: min(92vw, 640px); max-height: 86dvh; padding: 0; overflow: auto; border: 0; border-radius: 18px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgba(5,20,15,.58); backdrop-filter: blur(3px); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.modal-head h2 { margin: 0; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
#modal-content { padding: 24px; }
.modal-form { display: grid; gap: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }
.field--wide { grid-column: 1/-1; }
.checkbox-field { display: flex; min-height: 44px; align-items: flex-start; gap: 10px; margin: 4px 0 16px; color: var(--muted); font-size: 11px; }
.checkbox-field input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.helper-text { display: block; margin-top: 4px; color: var(--subtle); font-size: 10px; }
.notification-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 18px; margin-bottom: 18px; }
.notification-composer form { padding: 24px; }
.audience-field { margin: 0 0 22px; padding: 0; border: 0; }
.audience-field legend { margin-bottom: 8px; color: #35403b; font-size: 13px; font-weight: 700; }
.audience-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.audience-options label { position: relative; cursor: pointer; }
.audience-options input { position: absolute; opacity: 0; pointer-events: none; }
.audience-options label > span { display: flex; min-height: 68px; flex-direction: column; justify-content: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); transition: border-color .2s, background .2s, box-shadow .2s; }
.audience-options strong, .audience-options small { display: block; }
.audience-options strong { font-size: 11px; }
.audience-options small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.audience-options input:checked + span { border-color: var(--success); background: rgba(40,122,85,.06); box-shadow: inset 0 0 0 1px var(--success); }
.audience-options input:focus-visible + span { outline: 3px solid rgba(145,184,73,.55); outline-offset: 3px; }
#recipient-select[multiple] { min-height: 170px; padding: 7px; }
#recipient-select[multiple] option { padding: 9px 10px; border-radius: 6px; }
.all-recipient-note { display: flex; min-height: 74px; align-items: center; gap: 13px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid rgba(40,122,85,.2); border-radius: 11px; background: rgba(40,122,85,.06); }
.all-recipient-note > svg { width: 21px; color: var(--success); }
.all-recipient-note strong, .all-recipient-note span { display: block; }
.all-recipient-note strong { font-size: 12px; }
.all-recipient-note span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.notification-guidance { align-self: start; }
.automation-list { padding: 8px 20px; }
.automation-list > div { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.automation-list > div:last-child { border: 0; }
.automation-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--success); background: rgba(40,122,85,.08); }
.automation-icon svg { width: 17px; }
.automation-list p { margin: 0; }
.automation-list strong, .automation-list small { display: block; }
.automation-list strong { font-size: 11px; }
.automation-list small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.notification-history { margin-bottom: 20px; }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 10px; }
.toast { display: flex; min-width: 280px; max-width: 380px; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: white; background: var(--ink); box-shadow: var(--shadow-lg); font-size: 12px; animation: toast-in .25s var(--ease); }

/* Guided help wizard */
.help-wizard { width: min(94vw, 920px); max-height: min(88dvh, 720px); padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: var(--text); background: var(--surface); box-shadow: 0 36px 100px rgba(5,20,15,.3); font-family: inherit; }
.help-wizard::backdrop { background: rgba(5,20,15,.62); backdrop-filter: blur(5px); }
.wizard-shell { display: grid; min-height: 570px; grid-template-columns: 250px minmax(0,1fr); }
.wizard-rail { display: flex; flex-direction: column; padding: 34px 28px; color: white; background: var(--ink); }
.wizard-mark { display: grid; width: 48px; height: 48px; margin-bottom: 20px; place-items: center; border-radius: 14px; color: var(--ink); background: var(--accent); }
.wizard-mark svg { width: 22px; }
.wizard-rail p { margin: 0; color: rgba(255,255,255,.45); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.wizard-rail strong { display: block; margin-top: 5px; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.wizard-dots { display: grid; gap: 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.wizard-dots li { display: grid; min-height: 30px; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; color: rgba(255,255,255,.42); }
.wizard-dots span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: 8px; font-weight: 800; }
.wizard-dots em { overflow: hidden; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.wizard-dots li.active { color: white; }
.wizard-dots li.active span { border-color: var(--accent); color: var(--ink); background: var(--accent); }
.wizard-dots li.complete span { border-color: rgba(183,211,119,.45); color: var(--accent); }
.wizard-main { display: grid; min-width: 0; grid-template-rows:auto 3px 1fr auto; }
.wizard-head { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 30px; border-bottom: 1px solid var(--line); }
.wizard-head .eyebrow { margin-bottom: 3px; color: var(--success); }
.wizard-count { color: var(--subtle); font-size: 10px; }
.wizard-progress { overflow: hidden; background: var(--surface-2); }
.wizard-progress span { display: block; width: 0; height: 100%; background: var(--accent-strong); transition: width .25s var(--ease); }
.wizard-content { min-height: 0; align-self:center; max-width: 620px; padding: 34px clamp(30px,5vw,58px); }
.wizard-page-icon { display: grid; width: 54px; height: 54px; margin-bottom: 24px; place-items: center; border-radius: 15px; color: var(--success); background: rgba(40,122,85,.09); }
.wizard-page-icon svg { width: 24px; height: 24px; }
.wizard-content h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(30px,4vw,43px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.wizard-content > p { max-width: 590px; margin: 14px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.wizard-content ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wizard-content li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; }
.wizard-content li span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--success); background: rgba(183,211,119,.2); }
.wizard-content li svg { width: 13px; height: 13px; }
.wizard-content li p { margin: 4px 0 0; color: var(--text); font-size: 12px; line-height: 1.55; }
.wizard-actions { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 30px; border-top: 1px solid var(--line); background: var(--surface); }
.wizard-actions > div { display: flex; gap: 8px; }
.wizard-actions .btn { min-height: 46px; }
.wizard-actions .btn:disabled { visibility: hidden; }
.wizard-page-button { color: var(--success); }
.skeleton { position: relative; overflow: hidden; min-height: 18px; border-radius: 7px; background: #e8e8e2; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1120px) {
    .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .stack { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .notification-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .access-screen { grid-template-columns: 1fr; }
    .access-brand { display: none; }
    .access-panel { min-height: 100dvh; padding: 28px 20px; }
    .mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 72px; color: var(--ink); }
    .mobile-brand strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
    .sidebar { transform: translateX(-105%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .close-sidebar { display: inline-grid !important; }
    .mobile-scrim { position: fixed; z-index: 45; inset: 0; visibility: hidden; opacity: 0; background: rgba(5,20,15,.5); transition: opacity .2s, visibility .2s; }
    .mobile-scrim.open { visibility: visible; opacity: 1; }
    .portal-frame { margin-left: 0; }
    .menu-button { display: inline-grid; }
    .search-box { max-width: none; }
    .search-box kbd, .secure-pill { display: none; }
    .topbar { padding: 0 16px; }
    #main-content { padding: 26px 18px 40px; }
    .page-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
    .login-card h2 { font-size: 31px; }
    .mobile-brand { margin-bottom: 48px; }
    .topbar { gap: 6px; }
    .search-box input { padding-right: 12px; }
    .profile-button > svg { display: none; }
    .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric-card { min-height: 140px; padding: 17px; }
    .metric-value { font-size: 23px; }
    .metric-foot { align-items: flex-start; flex-direction: column; gap: 2px; }
    .stack, .settings-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-section-title { align-items: flex-start; flex-direction: column; gap: 4px; }
    .form-section-title span { text-align: left; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar-search { max-width: none; }
    .toolbar input, .toolbar select { width: 100%; }
    .data-table th, .data-table td { padding-right: 14px; padding-left: 14px; }
    .help-wizard { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
    .wizard-shell { min-height: calc(100dvh - 24px); grid-template-columns: 1fr; }
    .wizard-rail { display: none; }
    .wizard-head { min-height: 76px; padding: 16px 20px; }
    .wizard-content { align-self:start; padding: 28px 22px; overflow-y:auto; }
    .wizard-content h2 { font-size: 32px; }
    .wizard-actions { min-height: 78px; padding: 13px 18px; }
    .wizard-actions > div { margin-left: auto; }
    .wizard-actions .wizard-page-button { display: none; }
    .wizard-actions .btn { min-width: 74px; padding-inline: 13px; }
    .audience-options { grid-template-columns: 1fr; }
    .audience-options label > span { min-height: 58px; }
    .notification-composer form { padding: 20px 16px; }
}
@media (max-width: 390px) {
    .metrics { grid-template-columns: 1fr; }
    .metric-card { min-height: 132px; }
    .notification-button { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Admin-selected dark theme */
html[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #0b1411;
    --surface: #12201b;
    --surface-2: #182822;
    --line: #293a33;
    --text: #edf3ef;
    --muted: #a6b3ad;
    --subtle: #7f9088;
    --success: #82c89f;
    --warning: #e0a557;
    --danger: #ef8d8d;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.14);
}
html[data-theme="dark"] body { background: var(--canvas); color: var(--text); }
html[data-theme="dark"] .topbar { border-color: var(--line); background: rgba(11,20,17,.9); }
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { border-color: var(--line); color: var(--text); background: #0f1b17; }
html[data-theme="dark"] .search-box input:focus { background: #14231d; }
html[data-theme="dark"] .search-box kbd { border-color: #405149; color: var(--muted); background: #17251f; }
html[data-theme="dark"] .metric-card:not(.metric-card--dark),
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .detail-grid div { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .modal-actions { border-color: var(--line); }
html[data-theme="dark"] .modal-head { background: rgba(18,32,27,.96); }
html[data-theme="dark"] .data-table th { color: var(--subtle); background: #101c18; }
html[data-theme="dark"] .data-table td { border-color: #26362f; color: #c2cec8; }
html[data-theme="dark"] .data-table strong,
html[data-theme="dark"] .activity-copy strong,
html[data-theme="dark"] .panel-head h2,
html[data-theme="dark"] .settings-card h2 { color: var(--text); }
html[data-theme="dark"] .data-table tbody tr:hover { background: #17251f; }
html[data-theme="dark"] .product-icon,
html[data-theme="dark"] .activity-icon,
html[data-theme="dark"] .metric-icon { color: #a9d8bc; background: #1d3329; }
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .allocation-bar { background: #314139; }
html[data-theme="dark"] .status { color: #9ed6b5; background: #1b392b; }
html[data-theme="dark"] .status--pending { color: #ecc487; background: #3b3020; }
html[data-theme="dark"] .status--paid,
html[data-theme="dark"] .status--completed { color: #c2cbc7; background: #29352f; }
html[data-theme="dark"] .status--suspended,
html[data-theme="dark"] .status--closed { color: #f2a1a1; background: #442525; }
html[data-theme="dark"] .btn--secondary { border-color: var(--line); color: var(--text); background: var(--surface); }
html[data-theme="dark"] .btn--secondary:hover { border-color: #53645c; background: #192a23; }
html[data-theme="dark"] .icon-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }
html[data-theme="dark"] .theme-toggle { color: var(--accent); background: rgba(183,211,119,.1); }
html[data-theme="dark"] .skeleton { background: #23332c; }
html[data-theme="dark"] .help-wizard,
html[data-theme="dark"] .wizard-main,
html[data-theme="dark"] .wizard-actions { color: var(--text); background: var(--surface); }
html[data-theme="dark"] .wizard-head,
html[data-theme="dark"] .wizard-actions { border-color: var(--line); }
html[data-theme="dark"] .wizard-progress { background: #26362f; }
html[data-theme="dark"] .wizard-page-icon { color: #a9d8bc; background: #1d3329; }
html[data-theme="dark"] .audience-field legend { color: var(--text); }
html[data-theme="dark"] .audience-options label > span { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .audience-options input:checked + span,
html[data-theme="dark"] .all-recipient-note { border-color: #4c8067; background: #193329; }
html[data-theme="dark"] .automation-list > div { border-color: var(--line); }
html[data-theme="dark"] .automation-icon { color: #a9d8bc; background: #1d3329; }

/* Market intelligence and support workspace */
.oil-list{display:grid;padding:4px 20px}.oil-row{display:flex;min-height:56px;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.oil-row:last-child{border-bottom:0}.oil-row>span:first-child strong,.oil-row>span:first-child small{display:block}.oil-row>span:first-child strong{font-size:12px}.oil-row>span:first-child small{margin-top:3px;color:var(--subtle);font-size:9px}.oil-quote{text-align:right}.oil-quote strong{display:block;font-family:Georgia,serif;font-size:20px;font-variant-numeric:tabular-nums}.oil-change{color:var(--success);font-size:9px;font-weight:800}.oil-change.negative{color:var(--danger)}.live-pill{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.live-pill i{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(40,122,85,.12)}.oil-foot{padding:10px 20px;border-top:1px solid var(--line);color:var(--subtle);font-size:9px}.oil-empty{display:grid;justify-items:start;gap:5px;padding:22px 0;color:var(--muted)}.oil-empty svg{margin-bottom:5px;color:var(--success)}.oil-empty strong{color:var(--text);font-size:12px}.oil-empty span{max-width:270px;font-size:10px;line-height:1.55}
.ticket-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}.ticket-summary div{padding:18px 22px;border-right:1px solid var(--line)}.ticket-summary div:last-child{border-right:0}.ticket-summary strong,.ticket-summary span{display:block}.ticket-summary strong{font-family:Georgia,serif;font-size:28px;font-weight:500}.ticket-summary span{margin-top:2px;color:var(--muted);font-size:10px}.priority{display:inline-flex;align-items:center;padding:5px 9px;border-radius:99px;color:#58645f;background:#eceeec;font-size:9px;font-weight:800;text-transform:capitalize}.priority--high{color:#8a5e22;background:#f8efe0}.priority--urgent{color:#9b4141;background:#f8e8e8}.status--waiting_customer{color:#5b538f;background:#eeebfa}.ticket-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:20px;color:var(--muted);font-size:11px}.ticket-thread{display:grid;gap:12px;max-height:360px;padding:18px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--canvas)}.ticket-message{max-width:86%;padding:14px 16px;border:1px solid var(--line);border-radius:4px 14px 14px;background:var(--surface)}.ticket-message--admin{justify-self:end;border-color:#d6e4bd;border-radius:14px 4px 14px 14px;background:#f3f8e9}.ticket-message>div{display:flex;align-items:center;justify-content:space-between;gap:18px}.ticket-message>div strong{font-size:11px}.ticket-message>div span{color:var(--subtle);font-size:9px}.ticket-message p{margin:8px 0 0;color:#45504b;font-size:12px;line-height:1.65}.ticket-reply{margin-top:20px}.ticket-controls{margin-bottom:4px}
html[data-theme="dark"] .oil-row,html[data-theme="dark"] .oil-foot,html[data-theme="dark"] .ticket-summary div,html[data-theme="dark"] .ticket-thread,html[data-theme="dark"] .ticket-message{border-color:#26362f}html[data-theme="dark"] .ticket-summary,html[data-theme="dark"] .ticket-message{background:#17251f}html[data-theme="dark"] .ticket-thread{background:#101c18}html[data-theme="dark"] .ticket-message--admin{background:#1d3329}html[data-theme="dark"] .ticket-message p{color:#c2cec8}html[data-theme="dark"] .priority{color:#c2cbc7;background:#29352f}html[data-theme="dark"] .priority--high{color:#ecc487;background:#3b3020}html[data-theme="dark"] .priority--urgent{color:#f2a1a1;background:#442525}html[data-theme="dark"] .status--waiting_customer{color:#c6bdf5;background:#302b4b}
@media(max-width:600px){.ticket-summary{grid-template-columns:1fr}.ticket-summary div{border-right:0;border-bottom:1px solid var(--line)}.ticket-summary div:last-child{border-bottom:0}.ticket-message{max-width:96%}.ticket-table{white-space:normal;table-layout:fixed}.ticket-table--admin th:nth-child(3),.ticket-table--admin td:nth-child(3),.ticket-table--admin th:nth-child(4),.ticket-table--admin td:nth-child(4),.ticket-table--admin th:nth-child(5),.ticket-table--admin td:nth-child(5),.ticket-table--admin th:nth-child(7),.ticket-table--admin td:nth-child(7),.ticket-table--admin th:nth-child(8),.ticket-table--admin td:nth-child(8){display:none}.ticket-table--admin th:nth-child(1){width:55%}.ticket-table--admin th:nth-child(2){width:45%}.ticket-table--admin th:nth-child(6),.ticket-table--admin td:nth-child(6){display:none}.ticket-table--partner th:nth-child(2),.ticket-table--partner td:nth-child(2),.ticket-table--partner th:nth-child(3),.ticket-table--partner td:nth-child(3),.ticket-table--partner th:nth-child(5),.ticket-table--partner td:nth-child(5),.ticket-table--partner th:nth-child(6),.ticket-table--partner td:nth-child(6){display:none}.ticket-table td{overflow-wrap:anywhere}}
@media(max-width:480px){.topbar .search-box{display:none}.topbar-actions{margin-left:auto}}