/* ============================================================================
   BUDGETGRID — base + shared components (all portals)
   ==========================================================================*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; transition: background var(--t-base), color var(--t-base); }
body.has-modal, body.has-drawer { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 .4em; color: var(--ink); }
h1 { font-size: clamp(28px, 4vw, 44px); } h2 { font-size: clamp(22px, 2.6vw, 30px); } h3 { font-size: 18px; } h4 { font-size: 15px; font-family: var(--font-ui); font-weight: 700; }
p { margin: 0 0 1em; } a { color: var(--cobalt-ink); text-decoration: none; } a:hover { text-decoration: underline; }
small, .muted { color: var(--ink-3); } .muted-2 { color: var(--ink-4); } .sm { font-size: 13px; } .xs { font-size: 12px; } .b { font-weight: 700; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; }
.mono, .hash { font-family: var(--font-mono); font-size: 12.5px; } .hash { word-break: break-all; color: var(--ink-3); }
.money { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: -0.01em; } .money.neg { color: var(--brick-ink); }
.display { font-family: var(--font-display); } .num { text-align: right; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
svg.spark, svg.area { display: block; max-width: 100%; }
.crash { padding: 48px; text-align: center; }
#app { min-height: 100vh; }

/* ---- layout helpers */
.stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; min-width: 0; } .wrap { flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: minmax(0, 1fr); } }
.container { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; min-height: 40px; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); white-space: nowrap; text-decoration: none; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); text-decoration: none; } .btn:active { transform: translateY(0) scale(.985); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--grid); border-color: var(--grid); color: var(--on-fill); } .btn-primary:hover { background: var(--grid-600); }
.btn-cobalt { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-fill); } .btn-cobalt:hover { background: var(--cobalt-600); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--inverse); }
.btn-amber { background: var(--amber); border-color: var(--amber); color: #2a1a02; } .btn-brick, .btn-danger { background: var(--brick); border-color: var(--brick); color: var(--on-fill); } .btn-danger:hover { background: var(--brick-600); } .btn-plum { background: var(--plum); border-color: var(--plum); color: var(--on-fill); } .btn-teal { background: var(--teal); border-color: var(--teal); color: var(--on-fill); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--neutral-wash); box-shadow: none; }
.btn-soft { background: var(--neutral-wash); border-color: transparent; } .btn-soft-grid { background: var(--grid-wash); color: var(--grid-ink); border-color: transparent; } .btn-soft-cobalt { background: var(--cobalt-wash); color: var(--cobalt-ink); border-color: transparent; } .btn-soft-plum { background: var(--plum-wash); color: var(--plum-ink); border-color: transparent; } .btn-soft-brick { background: var(--brick-wash); color: var(--brick-ink); border-color: transparent; } .btn-soft-amber { background: var(--amber-wash); color: var(--amber-ink); border-color: transparent; }
.btn-outline { background: transparent; } .btn-sm { padding: 6px 11px; min-height: 32px; font-size: 13px; border-radius: var(--r-1); } .btn-xs { padding: 4px 8px; min-height: 26px; font-size: 12px; border-radius: 6px; } .btn-lg { padding: 14px 22px; min-height: 50px; font-size: 16px; border-radius: var(--r-3); } .btn-xl { padding: 18px 28px; min-height: 60px; font-size: 18px; border-radius: var(--r-3); } .btn-block { width: 100%; } .btn-pill { border-radius: var(--r-pill); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-2); border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); font: inherit; } .icon-btn:hover { background: var(--neutral-wash); color: var(--ink); } .icon-btn .ic { width: 20px; height: 20px; } .icon-btn.is-on { background: var(--grid-wash); color: var(--grid-ink); }
.btn .ic { width: 18px; height: 18px; }

/* ---- inputs */
.input, select.input, textarea.input { width: 100%; padding: 10px 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; min-height: 40px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .input:focus { outline: none; border-color: var(--grid); box-shadow: var(--glow-grid); } .input::placeholder { color: var(--ink-4); } textarea.input { min-height: 80px; resize: vertical; } select.input { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .input.is-err { border-color: var(--brick); box-shadow: 0 0 0 4px var(--brick-wash); } .input-money { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; } .field-l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; } .field-h { font-size: 12px; color: var(--ink-3); } .field-err { font-size: 12px; color: var(--brick-ink); }
.search { position: relative; } .search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-4); width: 18px; height: 18px; } .search .input { padding-left: 38px; }
.switch { position: relative; width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--bg-3); border: none; cursor: pointer; transition: background var(--t-fast); flex: none; padding: 0; } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-1); transition: transform var(--t-base) var(--ease-spring); } .switch.is-on { background: var(--grid); } .switch.is-on::after { transform: translateX(18px); }
.seg { display: inline-flex; background: var(--bg-2); border-radius: var(--r-2); padding: 3px; gap: 2px; } .seg button { border: none; background: transparent; padding: 7px 12px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all var(--t-fast); white-space: nowrap; } .seg button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); } .seg button:hover:not(.is-on) { color: var(--ink); }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; } .chips-row button.chip { cursor: pointer; border: 1px solid var(--line); background: var(--card); font: inherit; } .chips-row button.chip.is-on { background: var(--ink); color: var(--inverse); border-color: var(--ink); }

/* ---- cards, kpis, chips */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: 18px; box-shadow: var(--shadow-1); } .card-2 { background: var(--card-2); } .card-flat { box-shadow: none; } .card-pad { padding: 22px; } .card-tight { padding: 14px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .card-head h3 { margin: 0; } .card-head .sub { font-size: 13px; color: var(--ink-3); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px; box-shadow: var(--shadow-1); min-width: 0; position: relative; overflow: hidden; } .kpi-l { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; } .kpi-v { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .kpi-s { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; } .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; } .kpi-grid::before { background: var(--grid); } .kpi-cobalt::before { background: var(--cobalt); } .kpi-amber::before { background: var(--amber); } .kpi-brick::before { background: var(--brick); } .kpi-plum::before { background: var(--plum); } .kpi-teal::before { background: var(--teal); } .kpi-grid .kpi-v { color: var(--grid-ink); } .kpi-brick .kpi-v { color: var(--brick-ink); } .kpi-amber .kpi-v { color: var(--amber-ink); } .kpi-cobalt .kpi-v { color: var(--cobalt-ink); } .kpi-plum .kpi-v { color: var(--plum-ink); } .kpi-teal .kpi-v { color: var(--teal-ink); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; background: var(--neutral-wash); color: var(--ink-2); } .chip .ic { width: 13px; height: 13px; } .chip-grid { background: var(--grid-wash); color: var(--grid-ink); } .chip-cobalt { background: var(--cobalt-wash); color: var(--cobalt-ink); } .chip-amber { background: var(--amber-wash); color: var(--amber-ink); } .chip-brick { background: var(--brick-wash); color: var(--brick-ink); } .chip-plum { background: var(--plum-wash); color: var(--plum-ink); } .chip-teal { background: var(--teal-wash); color: var(--teal-ink); } .chip-neutral { background: var(--neutral-wash); color: var(--ink-2); } .chip-solid { background: var(--ink); color: var(--inverse); } .chip-gold { background: rgba(212, 168, 67, .18); color: var(--gold-ink); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); } .dot-grid { background: var(--grid); } .dot-amber { background: var(--amber); } .dot-brick { background: var(--brick); } .dot-cobalt { background: var(--cobalt); } .dot-teal { background: var(--teal); } .dot-plum { background: var(--plum); } .dot.live { box-shadow: 0 0 0 0 var(--grid); animation: ping 1.8s infinite; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: hsl(var(--h) 55% 88%); color: hsl(var(--h) 50% 28%); font-weight: 700; flex: none; letter-spacing: .02em; } :root[data-theme="dark"] .avatar { background: hsl(var(--h) 40% 30%); color: hsl(var(--h) 60% 88%); } .avatar-sys { background: var(--neutral-wash); color: var(--ink-3); } .avatar-sys .ic { width: 55%; height: 55%; }
.who { display: inline-flex; align-items: center; gap: 7px; }
.delta { font-size: 12.5px; font-weight: 700; } .delta.good { color: var(--grid-ink); } .delta.bad { color: var(--brick-ink); } .delta.flat { color: var(--ink-4); }
.lane, .chan { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); } .lane .ic, .chan .ic { width: 14px; height: 14px; } .chan-whatsapp { color: var(--grid-ink); } .chan-ussd { color: var(--cobalt-ink); }
.callout { padding: 12px 14px; border-radius: var(--r-2); background: var(--neutral-wash); border-left: 4px solid var(--ink-4); font-size: 13.5px; } .callout-grid { background: var(--grid-wash); border-color: var(--grid); } .callout-brick { background: var(--brick-wash); border-color: var(--brick); } .callout-amber { background: var(--amber-wash); border-color: var(--amber); } .callout-cobalt { background: var(--cobalt-wash); border-color: var(--cobalt); } .callout-plum { background: var(--plum-wash); border-color: var(--plum); } .callout-teal { background: var(--teal-wash); border-color: var(--teal); }
.empty { text-align: center; padding: 28px 12px; color: var(--ink-3); } .empty .ic { width: 32px; height: 32px; color: var(--ink-4); margin-bottom: 6px; } .empty p { margin: 0; font-weight: 600; } .empty small { display: block; margin-top: 4px; }
.meter { height: 8px; background: var(--bg-3); border-radius: var(--r-pill); overflow: hidden; } .meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grid); transition: width var(--t-slow) var(--ease-out); } .meter .meter-amber { background: var(--amber); } .meter .meter-brick { background: var(--brick); } .meter .meter-cobalt { background: var(--cobalt); } .meter .meter-plum { background: var(--plum); } .meter .meter-teal { background: var(--teal); }

/* ---- the four-position bar */
.posbar { position: relative; display: flex; height: var(--h, 10px); border-radius: var(--r-pill); background: var(--pos-available); overflow: visible; } .posbar i { display: block; height: 100%; transition: width var(--t-slow) var(--ease-out); } .posbar .pb-a { background: var(--pos-actual); border-radius: var(--r-pill) 0 0 var(--r-pill); } .posbar .pb-o { background: var(--pos-obligated); } .posbar .pb-c { background: var(--pos-committed); } .posbar.is-over { background: var(--brick-wash); } .posbar.is-over .pb-c { border-radius: 0 var(--r-pill) var(--r-pill) 0; } .posbar .pb-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--brick); border-radius: 2px; } .posbar-l { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 6px; } .posbar-l span { display: inline-flex; align-items: center; gap: 5px; } .posbar-l i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .posbar-l .pb-a { background: var(--pos-actual); } .posbar-l .pb-o { background: var(--pos-obligated); } .posbar-l .pb-c { background: var(--pos-committed); } .posbar-l .pb-v { background: var(--pos-available); border: 1px solid var(--grid); } .posbar-l .neg { color: var(--brick-ink); font-weight: 700; }

/* ---- tables & lists */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--card); } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--neutral-wash); } .table.is-dense td, .table.is-dense th { padding: 6px 10px; } .table tr[data-act] { cursor: pointer; } .table .num { text-align: right; font-variant-numeric: tabular-nums; }
.list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .list-item:last-child { border-bottom: none; } .list-item[data-act] { cursor: pointer; border-radius: var(--r-1); padding-inline: 8px; margin-inline: -8px; transition: background var(--t-fast); } .list-item[data-act]:hover { background: var(--neutral-wash); } .li-main { flex: 1; min-width: 0; } .li-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .li-s { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .li-end { text-align: right; flex: none; }
.tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { border: none; background: transparent; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); } .tab:hover { color: var(--ink); } .tab.is-on { color: var(--ink); border-bottom-color: var(--grid); } .tab .count { font-size: 11px; background: var(--neutral-wash); padding: 1px 6px; border-radius: var(--r-pill); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); } .timeline li { position: relative; padding: 0 0 14px 14px; font-size: 13.5px; } .timeline li::before { content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink-4); } .timeline li.is-ok::before { border-color: var(--grid); background: var(--grid); } .timeline li.is-cur::before { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 0 4px var(--amber-wash); } .timeline li.is-bad::before { border-color: var(--brick); background: var(--brick); } .timeline small { display: block; color: var(--ink-3); }

/* ---- charts */
.bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 6px; } .bar-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; } .bar { height: var(--v); min-height: 2px; border-radius: 4px 4px 2px 2px; background: var(--grid); transition: height var(--t-slow) var(--ease-out); } .bar-grid { background: var(--grid); } .bar-cobalt { background: var(--cobalt); } .bar-amber { background: var(--amber); } .bar-brick { background: var(--brick); } .bar-teal { background: var(--teal); } .bar-plum { background: var(--plum); } .bar-ink { background: var(--ink-4); } .bar.is-hi { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px currentColor; } .bar-l { font-size: 10.5px; color: var(--ink-4); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bva { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 8px; } .bva-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; } .bva-g { display: flex; align-items: end; gap: 2px; height: calc(100% - 18px); } .bva-g i { flex: 1; display: block; height: var(--v); min-height: 2px; border-radius: 3px 3px 0 0; transition: height var(--t-slow) var(--ease-out); } .bva-b { background: var(--pos-available); border: 1px solid var(--grid); border-bottom: none; } .bva-a { background: var(--pos-actual); } .bva-a.is-over { background: var(--pos-over); } .bva-a.is-future { background: repeating-linear-gradient(135deg, var(--ink-4) 0 3px, transparent 3px 6px); opacity: .7; }
.area { width: 100%; height: auto; } .area-band { fill: var(--cobalt); opacity: .14; } .area-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .area-budget { fill: none; stroke: var(--grid); stroke-width: 1.5; stroke-dasharray: 4 4; } .area-now { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 2 3; } .area-dot { fill: var(--ink); } .area-dot.is-fc { fill: var(--cobalt); } .area-x { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-4); margin-top: 4px; }
.ring { position: relative; display: inline-grid; place-items: center; } .ring svg { position: absolute; inset: 0; } .ring-fg { transition: stroke-dashoffset var(--t-slow) var(--ease-out); } .ring-l { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 15px; }

/* ---- modal / drawer / toasts */
.modal-back { position: fixed; inset: 0; z-index: 900; background: rgba(8, 14, 26, 0.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity var(--t-base); } .modal-back.in { opacity: 1; } .modal { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--card); border-radius: var(--r-4); box-shadow: var(--shadow-3); transform: translateY(12px) scale(.98); transition: transform var(--t-base) var(--ease-out); } .modal-back.in .modal { transform: none; } .modal-wide { width: min(820px, 100%); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; } .modal-head h3 { margin: 0; } .modal-body { padding: 16px 22px 22px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; flex-wrap: wrap; } .modal-body .modal-actions { padding: 8px 0 0; } .modal-back.is-sheet { align-items: flex-end; padding: 0; } .modal-back.is-sheet .modal { width: 100%; max-width: 560px; border-radius: var(--r-4) var(--r-4) 0 0; transform: translateY(30px); } .modal-back.is-sheet.in .modal { transform: none; }
.drawer-back { position: fixed; inset: 0; z-index: 850; background: rgba(8, 14, 26, 0.35); opacity: 0; transition: opacity var(--t-base); } .drawer-back.in { opacity: 1; } .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--card); box-shadow: var(--shadow-3); display: flex; flex-direction: column; transform: translateX(40px); opacity: 0; transition: transform var(--t-base) var(--ease-out), opacity var(--t-base); } .drawer-back.in .drawer { transform: none; opacity: 1; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); } .drawer-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .drawer-body { flex: 1; overflow: auto; padding: 18px 22px; } .drawer-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: var(--card-2); }
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(440px, calc(100% - 24px)); } .toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-2); background: var(--ink); color: var(--inverse); box-shadow: var(--shadow-3); font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: all var(--t-base) var(--ease-out); pointer-events: auto; width: 100%; } .toast.in { opacity: 1; transform: none; } .toast-ic .ic { width: 18px; height: 18px; } .toast-ok .toast-ic { color: #3FC48F; } .toast-err .toast-ic { color: #FF8A73; } .toast-warn .toast-ic { color: #F4BE5E; } .toast-ai .toast-ic { color: #BC9BF6; } .toast-m { flex: 1; } .t-act { border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: inherit; border-radius: var(--r-1); padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer; }

/* ---- launcher & global bars */
.launcher { position: fixed; right: 18px; bottom: 18px; z-index: 800; }
body[data-portal="approve"] .launcher, body[data-portal="envelope"] .launcher { bottom: 88px; }
@media (min-width: 641px) { body[data-portal="approve"] .launcher, body[data-portal="envelope"] .launcher { bottom: 18px; } } .launcher-btn { width: 50px; height: 50px; border-radius: 50%; border: none; background: var(--ink); color: var(--inverse); box-shadow: var(--shadow-3); cursor: pointer; display: grid; place-items: center; transition: transform var(--t-fast) var(--ease-spring); } .launcher-btn:hover { transform: scale(1.06); } .launcher-btn .ic { width: 22px; height: 22px; } .launcher-menu { position: absolute; right: 0; bottom: 60px; width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-3); padding: 6px; opacity: 0; transform: translateY(8px) scale(.97); pointer-events: none; transition: all var(--t-base) var(--ease-out); } .launcher.open .launcher-menu { opacity: 1; transform: none; pointer-events: auto; } .launcher-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: transparent; border-radius: var(--r-2); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; } .launcher-item:hover { background: var(--neutral-wash); color: var(--ink); } .launcher-item.is-cur { background: var(--grid-wash); color: var(--grid-ink); } .launcher-foot { font-size: 11px; color: var(--ink-4); padding: 8px 12px 4px; display: flex; align-items: center; gap: 6px; }
.offline-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 950; background: var(--brick); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; transform: translateY(-100%); transition: transform var(--t-base) var(--ease-out); } .offline-bar.in { transform: none; }

/* ---- logo */
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: calc(var(--s, 28px) * .6); color: var(--ink); letter-spacing: -0.01em; } .logo-mark { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--s) * .07); width: var(--s); height: var(--s); } .logo-mark i { display: block; border-radius: calc(var(--s) * .14); } .logo-mark i:nth-child(1) { background: var(--korevra); } .logo-mark i:nth-child(2) { background: var(--korevra-2); } .logo-mark i:nth-child(3) { background: var(--korevra-3); } .logo-mark i:nth-child(4) { background: var(--korevra-4); } .logo-word b { font-weight: 800; }

/* ---- phone frame (approver + envelope) */
.phone-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; background: radial-gradient(1200px 600px at 50% -10%, var(--grid-wash), transparent 60%), var(--bg); } .phone { width: 400px; max-width: 100%; height: min(860px, calc(100vh - 56px)); min-height: 620px; background: var(--bg); border-radius: 44px; border: 10px solid #0E1A2B; box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 0 0 2px #222d3d; overflow: hidden; position: relative; display: flex; flex-direction: column; } .phone::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; background: #0E1A2B; border-radius: 0 0 16px 16px; z-index: 3; } .phone-screen { flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } @media (max-width: 640px) { .phone-stage { padding: 0; } .phone { width: 100%; height: 100vh; height: 100dvh; min-height: 0; border: none; border-radius: 0; box-shadow: none; } .phone::before { display: none; } }

@media print { .launcher, .toasts, .offline-bar { display: none !important; } }