:root {
  --ink: #122b2b;
  --ink-soft: #58706b;
  --paper: #f6f8f4;
  --surface: #ffffff;
  --line: #dfe8e2;
  --mint: #dff2e9;
  --mint-strong: #b5dfcd;
  --coral: #ee8a61;
  --coral-deep: #d66846;
  --sun: #f8cf75;
  --blue: #7fb9cf;
  --shadow: 0 18px 45px rgba(22, 52, 45, .09);
  --shadow-sm: 0 7px 22px rgba(22, 52, 45, .07);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --sidebar-width: 270px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --night: #111522;
  --night-deep: #090c14;
  --ember: #ff7656;
  --ember-soft: #ffb18e;
  --cream: #fff8ed;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family: "DM Sans", "Segoe UI", sans-serif; font-size:15px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { border:0; cursor:pointer; }
:focus-visible { outline:3px solid rgba(238,138,97,.45); outline-offset:3px; }

.skip-link { position:absolute; left:1rem; top:-4rem; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:8px; z-index:100; }
.skip-link:focus { top:1rem; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:var(--sidebar-width); background:var(--ink); color:#eef8f3; padding:26px 18px 18px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:20; }
.brand { display:flex; gap:12px; align-items:center; padding:0 10px 28px; }
.brand-mark { width:38px; height:38px; border-radius:13px; background:var(--coral); color:var(--ink); display:grid; place-items:center; font-size:20px; font-weight:800; box-shadow:0 7px 18px rgba(238,138,97,.25); }
.brand-logo-frame, .ops-app .brand .brand-logo-frame, .login-brand-mark.brand-logo-frame, .login-mobile-mark.brand-logo-frame { background:transparent; border-radius:0; box-shadow:none; }
.brand-logo { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.ops-app .brand .brand-logo-frame { width:84px; height:84px; flex:0 0 84px; }
.ops-app .brand .brand-live { display:none; }
.login-brand-mark.brand-logo-frame { width:clamp(112px,14vw,160px); height:clamp(112px,14vw,160px); flex:0 0 clamp(112px,14vw,160px); }
.login-mobile-mark.brand-logo-frame { width:96px; height:96px; }
.brand-name { font-weight:800; letter-spacing:-.04em; font-size:1.05rem; }
.brand-sub { display:block; color:#a8c8bc; font-size:.72rem; margin-top:1px; }
.nav-label { color:#7fa59a; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; font-weight:700; padding:12px 12px 8px; }
.side-nav { display:grid; gap:4px; }
.nav-item { display:flex; align-items:center; gap:11px; color:#b7d0c6; padding:11px 12px; border-radius:11px; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.nav-item svg { width:18px; height:18px; stroke-width:1.8; }
.nav-item:hover { color:#fff; background:rgba(255,255,255,.08); transform:translateX(2px); }
.nav-item.active { color:var(--ink); background:var(--mint); font-weight:700; }
.nav-badge { margin-left:auto; min-width:22px; padding:2px 6px; text-align:center; border-radius:99px; background:var(--coral); color:var(--ink); font-size:.7rem; font-weight:800; }
.sidebar-foot { margin-top:auto; }
.help-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:15px; padding:14px; margin:0 4px 14px; }
.help-card strong { display:block; font-size:.86rem; margin-bottom:4px; }
.help-card p { margin:0; color:#a8c8bc; font-size:.76rem; }
.user-mini { display:flex; align-items:center; gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.1); }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--sun); color:var(--ink); font-weight:800; font-size:.78rem; flex:0 0 auto; }
.user-meta { min-width:0; flex:1; }
.user-meta strong,.user-meta span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.user-meta strong { font-size:.83rem; }
.user-meta span { color:#9abbb0; font-size:.72rem; }
.icon-btn { width:38px; height:38px; display:grid; place-items:center; background:transparent; color:inherit; border-radius:10px; }
.icon-btn:hover { background:rgba(255,255,255,.1); }
.main { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); min-height:100vh; }
.topbar { height:76px; padding:0 34px; border-bottom:1px solid var(--line); background:rgba(246,248,244,.9); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:12; }
.menu-toggle { display:none; color:var(--ink); background:transparent; }
.breadcrumb { color:var(--ink-soft); font-size:.78rem; }
.breadcrumb strong { color:var(--ink); font-weight:700; }
.top-actions { display:flex; align-items:center; gap:8px; }
.top-actions .icon-btn { color:var(--ink-soft); }
.notification-dot { position:absolute; width:7px; height:7px; background:var(--coral); border-radius:50%; top:5px; right:6px; border:2px solid var(--paper); }
.page { padding:34px; max-width:1600px; margin:0 auto; }
.page-head { display:flex; gap:20px; align-items:flex-end; justify-content:space-between; margin-bottom:28px; }
.eyebrow { color:var(--coral-deep); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; font-weight:800; margin-bottom:7px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.8rem,3vw,2.55rem); line-height:1.08; letter-spacing:-.055em; margin-bottom:9px; }
h2 { font-size:1.15rem; letter-spacing:-.025em; margin-bottom:4px; }
h3 { font-size:.98rem; margin-bottom:3px; }
.page-intro { max-width:650px; color:var(--ink-soft); margin-bottom:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:10px 15px; font-weight:700; font-size:.84rem; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn svg { width:16px; height:16px; }
.btn-primary { color:var(--ink); background:var(--coral); box-shadow:0 8px 16px rgba(214,104,70,.2); }
.btn-primary:hover { background:#f39a73; transform:translateY(-2px); box-shadow:0 11px 20px rgba(214,104,70,.24); }
.btn-ghost { color:var(--ink); background:var(--surface); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--mint-strong); background:var(--mint); }
.btn-dark { color:#fff; background:var(--ink); }
.btn-sm { padding:7px 10px; font-size:.76rem; }

.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.kpi { padding:19px; position:relative; overflow:hidden; }
.kpi::after { content:""; position:absolute; width:95px; height:95px; right:-28px; bottom:-42px; border-radius:50%; background:var(--mint); opacity:.7; }
.kpi:nth-child(2)::after { background:#fdebd7; }
.kpi:nth-child(3)::after { background:#e1eef7; }
.kpi:nth-child(4)::after { background:#f8e7b3; }
.kpi-top { display:flex; align-items:center; justify-content:space-between; color:var(--ink-soft); font-size:.77rem; }
.kpi-icon { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--mint); color:#2a8061; }
.kpi-icon svg { width:16px; height:16px; }
.kpi:nth-child(2) .kpi-icon { background:#fdebd7; color:#c76844; }
.kpi:nth-child(3) .kpi-icon { background:#e1eef7; color:#477d98; }
.kpi:nth-child(4) .kpi-icon { background:#f8e7b3; color:#9f7820; }
.kpi-value { font-size:1.78rem; line-height:1; letter-spacing:-.06em; font-weight:800; margin:18px 0 7px; position:relative; z-index:1; }
.kpi-note { color:var(--ink-soft); font-size:.74rem; position:relative; z-index:1; }
.positive { color:#328361; font-weight:700; }
.negative { color:#c76546; font-weight:700; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:18px; }
.panel { padding:21px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:18px; }
.panel-title { margin:0; }
.panel-sub { color:var(--ink-soft); font-size:.78rem; margin:4px 0 0; }
.chart-wrap { height:265px; position:relative; }
.legend { display:flex; gap:14px; align-items:center; color:var(--ink-soft); font-size:.72rem; }
.legend i { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; }
.legend .mint { background:#62a889; }.legend .coral { background:var(--coral); }
.activity-list { display:grid; gap:2px; }
.activity { display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid #edf2ee; }
.activity:last-child { border-bottom:0; }
.activity-icon { width:31px; height:31px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; background:var(--mint); color:#2a8061; }
.activity-icon svg { width:15px; height:15px; }
.activity-text { min-width:0; flex:1; }
.activity-text strong { display:block; font-size:.81rem; }
.activity-text span { display:block; color:var(--ink-soft); font-size:.72rem; margin-top:2px; }
.activity-time { color:#91a39d; font-size:.68rem; white-space:nowrap; }
.alert-list { display:grid; gap:9px; }
.alert { border-radius:11px; padding:12px; display:flex; align-items:flex-start; gap:9px; font-size:.78rem; }
.alert strong { display:block; font-size:.79rem; margin-bottom:2px; }.alert span { color:var(--ink-soft); font-size:.7rem; }
.alert.warn { background:#fff5e3; }.alert.warn svg { color:#bb841e; }.alert.danger { background:#fff0eb; }.alert.danger svg { color:#cb6646; }.alert.info { background:#eaf4f7; }.alert.info svg { color:#477d98; }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; min-width:580px; }
.data-table th { color:#82928c; text-transform:uppercase; letter-spacing:.11em; font-size:.65rem; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.data-table td { padding:13px 12px; border-bottom:1px solid #edf2ee; font-size:.8rem; vertical-align:middle; }
.data-table tbody tr:hover { background:#fbfcfa; }
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:4px 8px; font-size:.67rem; font-weight:700; }
.badge.green { color:#287555; background:#e3f3eb; }.badge.orange { color:#b96635; background:#fff0df; }.badge.red { color:#bc5840; background:#ffebe5; }.badge.blue { color:#427890; background:#e8f3f7; }
.empty-state { text-align:center; color:var(--ink-soft); padding:36px 20px; }
.empty-state svg { width:30px; height:30px; color:var(--mint-strong); margin-bottom:10px; }
.filters { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:17px; }
.input,.select { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:9px; padding:10px 11px; font-size:.82rem; transition:border .2s, box-shadow .2s; }
.input:focus,.select:focus { border-color:var(--mint-strong); box-shadow:0 0 0 3px rgba(181,223,205,.35); outline:0; }
.search-wrap { position:relative; min-width:220px; flex:1; }.search-wrap svg { position:absolute; left:10px; top:10px; width:16px; color:#91a39d; }.search-wrap .input { padding-left:33px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:grid; gap:6px; }.field.full { grid-column:1/-1; }.field label,.field-label { color:var(--ink-soft); font-size:.76rem; font-weight:700; }.sale-total-preview { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:12px; color:var(--ink); background:color-mix(in srgb, var(--mint) 12%, transparent); border:1px solid color-mix(in srgb, var(--mint) 32%, transparent); }.sale-total-preview strong { color:var(--ink); font-size:.95rem; }
.modal-backdrop { position:fixed; inset:0; background:rgba(12,35,32,.46); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; backdrop-filter:blur(3px); }.modal-backdrop.open { display:flex; }.modal { width:min(560px,100%); background:var(--surface); border-radius:20px; box-shadow:var(--shadow); padding:23px; animation:pop .25s var(--ease); }.modal-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }.modal-head h2 { margin:0; }.modal-close { color:var(--ink-soft); background:transparent; width:32px; height:32px; border-radius:8px; }.modal-close:hover { background:var(--paper); }.modal-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
.toast-stack { position:fixed; right:22px; bottom:22px; z-index:70; display:grid; gap:8px; width:min(360px,calc(100vw - 44px)); }.toast { display:flex; gap:9px; align-items:flex-start; background:var(--ink); color:#fff; padding:13px; border-radius:12px; box-shadow:var(--shadow); animation:slide-in .3s var(--ease); font-size:.8rem; }.toast.success { border-left:4px solid #7bcca7; }.toast.error { border-left:4px solid var(--coral); }
.danger-action { color: #d97962; }.danger-action:hover { color: #fff; background: rgba(217,121,98,.18); }.table-muted { color: var(--ink-soft); font-size: .72rem; }
.notification-wrap { position:relative; }
.notification-toggle { position:relative; }
.notification-toggle .notification-dot { top:6px; right:5px; min-width:8px; width:auto; height:8px; padding:0; border:2px solid var(--paper); }
.notification-panel { position:absolute; top:calc(100% + 12px); right:-8px; z-index:65; width:min(390px,calc(100vw - 28px)); max-height:min(560px,calc(100vh - 110px)); overflow:auto; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.notification-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 17px 13px; border-bottom:1px solid var(--line); }
.notification-head strong,.notification-head span { display:block; }
.notification-head strong { color:var(--ink); font-size:.9rem; }
.notification-head span { margin-top:3px; color:var(--ink-soft); font-size:.7rem; }
.notification-read-all { padding:5px 0; color:var(--coral-deep); background:transparent; font-size:.68rem; font-weight:800; white-space:nowrap; }
.notification-list { display:grid; }
.notification-item { display:flex; align-items:flex-start; gap:10px; width:100%; padding:13px 16px; text-align:left; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); }
.notification-item:last-child { border-bottom:0; }
.notification-item:hover { background:rgba(104,217,172,.08); }
.notification-item.unread { background:rgba(104,217,172,.06); }
.notification-item-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:10px; }
.notification-item-icon svg { width:15px; }
.notification-item-icon.danger { color:#d97958; background:rgba(255,155,99,.13); }
.notification-item-icon.warn { color:#bc8b32; background:rgba(255,211,122,.15); }
.notification-item-copy { min-width:0; display:grid; gap:3px; }
.notification-item-copy strong { color:var(--ink); font-size:.75rem; }
.notification-item-copy span { color:var(--ink-soft); font-size:.69rem; line-height:1.4; }
.notification-item-copy small { color:var(--ink-soft); font-size:.61rem; }
.notification-empty { display:grid; place-items:center; gap:8px; padding:32px 20px; color:var(--ink-soft); text-align:center; font-size:.72rem; }
.notification-empty svg { width:25px; color:var(--mint-strong); }
html[data-theme="dark"] .notification-panel { background:linear-gradient(145deg,#132e2a,#0d211f); border-color:rgba(174,222,207,.15); }
html[data-theme="dark"] .notification-item { border-bottom-color:rgba(174,222,207,.1); }
html[data-theme="dark"] .notification-item:hover,
html[data-theme="dark"] .notification-item.unread { background:rgba(104,217,172,.1); }
html[data-theme="light"] .notification-panel { background:#ffffff; border-color:#d4e4dc; }
html[data-theme="light"] .notification-item { border-bottom-color:rgba(42,105,83,.1); }
html[data-theme="light"] .notification-item:hover,
html[data-theme="light"] .notification-item.unread { background:rgba(79,189,145,.07); }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); background:var(--cream); }
.login-aside { background:var(--night-deep); color:#fff9f1; padding:clamp(28px,5vw,76px); display:flex; position:relative; overflow:hidden; isolation:isolate; }
.login-aside::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 23%,rgba(255,118,86,.22),transparent 28%),radial-gradient(circle at 22% 92%,rgba(255,177,142,.12),transparent 30%),linear-gradient(125deg,#0a0d16 0%,#151a2b 58%,#111522 100%); z-index:-3; }
.login-aside::after { content:""; position:absolute; inset:0; opacity:.1; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(to bottom,black,transparent 82%); z-index:-2; }
.login-aside-inner { width:min(650px,100%); display:flex; flex-direction:column; justify-content:space-between; position:relative; z-index:3; }
.login-brand { padding:0; color:#fff9f1; }.login-brand .brand-name { font-family:Manrope,"DM Sans",sans-serif; letter-spacing:-.055em; }.login-brand .brand-sub { color:#aeb5c9; }.login-brand-mark { width:43px; height:43px; border-radius:15px; background:linear-gradient(135deg,var(--ember),#ffb18e); color:#161827; box-shadow:0 10px 30px rgba(255,118,86,.3); }.login-brand-mark svg { width:22px; height:22px; stroke-width:2.5; }
.login-hero { max-width:560px; margin:clamp(52px,8vh,110px) 0 clamp(32px,7vh,90px); }.login-live { color:#d1d5e3; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }.login-live-dot { width:7px; height:7px; border-radius:99px; background:#69e0a7; box-shadow:0 0 0 5px rgba(105,224,167,.12); animation:pulse-dot 2s infinite; }.login-hero h1 { font-family:Manrope,"DM Sans",sans-serif; font-size:clamp(2.8rem,6vw,6.3rem); line-height:.99; letter-spacing:-.085em; color:#fff9f1; margin:24px 0 22px; }.login-hero h1 em { font-style:normal; color:var(--ember-soft); }.login-hero p { max-width:410px; color:#aeb5c9; font-size:clamp(.92rem,1.4vw,1.08rem); line-height:1.65; margin-bottom:32px; }
.login-signal { width:min(360px,100%); padding:17px; border-radius:18px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 60px rgba(0,0,0,.18); backdrop-filter:blur(18px); }.login-signal-head,.login-signal-foot { display:flex; justify-content:space-between; gap:12px; align-items:center; color:#aeb5c9; font-size:.7rem; }.login-signal-head strong,.login-signal-foot strong { color:#fff9f1; font-size:.74rem; }.login-signal-track { height:7px; border-radius:99px; background:rgba(255,255,255,.1); margin:14px 0 12px; overflow:hidden; }.login-signal-track span { display:block; width:68%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ember),var(--ember-soft)); animation:signal-load 1.8s var(--ease) both; }.login-signal-foot span { display:flex; align-items:center; gap:5px; color:#8de4b6; }.login-signal-foot svg { width:13px; height:13px; }
.login-aside-foot { color:#788198; font-size:.7rem; display:flex; align-items:center; justify-content:space-between; gap:12px; }.login-secure { display:flex; align-items:center; gap:5px; }.login-secure svg { width:14px; color:#8de4b6; }.login-glow { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:-1; }.login-glow-a { width:360px; height:360px; background:rgba(255,118,86,.13); right:7%; top:13%; animation:float-glow 8s ease-in-out infinite; }.login-glow-b { width:210px; height:210px; background:rgba(125,131,255,.12); left:16%; bottom:10%; animation:float-glow 10s 1s ease-in-out infinite reverse; }.login-noise { position:absolute; inset:0; opacity:.07; z-index:-1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); mix-blend-mode:screen; pointer-events:none; }
.login-orbit { position:absolute; border:1px solid rgba(255,177,142,.16); border-radius:50%; pointer-events:none; z-index:-1; }.login-orbit span { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--ember-soft); box-shadow:0 0 20px 5px rgba(255,177,142,.35); }.login-orbit-one { width:510px; height:510px; right:-210px; top:8%; transform:rotate(-28deg); animation:orbit-spin 22s linear infinite; }.login-orbit-one span { top:12%; left:15%; }.login-orbit-two { width:330px; height:330px; right:-70px; top:24%; border-color:rgba(132,155,255,.16); transform:rotate(28deg); animation:orbit-spin 16s linear infinite reverse; }.login-orbit-two span { bottom:9%; right:18%; background:#8998ff; box-shadow:0 0 20px 5px rgba(137,152,255,.35); }.login-cup-card { position:absolute; right:clamp(22px,5vw,76px); bottom:clamp(28px,11vh,120px); width:132px; padding:19px 15px 14px; border-radius:20px; display:grid; place-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(20px); transform:rotate(6deg); animation:cup-float 5s ease-in-out infinite; z-index:4; }.login-cup-card svg { width:30px; height:30px; color:var(--ember-soft); }.login-cup-card strong { font-size:.7rem; }.login-cup-card small { color:#aeb5c9; font-size:.62rem; }.login-cup-steam { position:absolute; width:2px; height:21px; border-radius:99px; background:#fff; opacity:.3; top:-15px; left:48%; transform:rotate(12deg); animation:steam 2.5s ease-in-out infinite; }.login-cup-steam-two { left:62%; height:17px; animation-delay:1s; }
.login-form-wrap { display:grid; place-items:center; padding:clamp(28px,6vw,90px); background:var(--cream); position:relative; }.login-form-wrap::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 86% 12%,rgba(255,118,86,.09),transparent 31%),radial-gradient(circle at 10% 100%,rgba(255,211,172,.25),transparent 33%); pointer-events:none; }.login-card { width:min(420px,100%); position:relative; z-index:1; }.login-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:48px; }.login-mobile-mark { display:none; width:37px; height:37px; border-radius:12px; place-items:center; background:#141827; color:var(--ember-soft); }.login-step { color:#9b958e; font-size:.68rem; letter-spacing:.14em; }.login-step span { opacity:.45; }.login-card-heading { margin-bottom:30px; }.login-kicker { color:var(--ember); font-size:.69rem; font-weight:800; text-transform:uppercase; letter-spacing:.18em; }.login-card h2 { font-family:Manrope,"DM Sans",sans-serif; color:#171821; font-size:clamp(2rem,4vw,2.55rem); line-height:1.03; letter-spacing:-.075em; margin:12px 0 13px; }.login-card-heading p { color:#817b77; font-size:.88rem; margin:0; }.login-form { display:grid; gap:18px; }.login-field { gap:8px; }.login-field label { color:#514b47; font-size:.73rem; letter-spacing:.02em; }.login-input-wrap { position:relative; }.login-input-wrap > svg { position:absolute; left:15px; top:14px; width:17px; height:17px; color:#a59b94; z-index:1; }.login-input-wrap .input { height:48px; padding:12px 45px; border:1px solid #e4dcd4; border-radius:13px; background:rgba(255,255,255,.68); color:#26232a; box-shadow:0 3px 12px rgba(80,57,35,.035); }.login-input-wrap .input::placeholder { color:#b1a8a0; }.login-input-wrap .input:focus { border-color:var(--ember); box-shadow:0 0 0 4px rgba(255,118,86,.13),0 5px 20px rgba(255,118,86,.08); }.login-password-toggle { position:absolute; right:7px; top:7px; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:transparent; color:#9b918a; }.login-password-toggle:hover { background:#f5e7dd; color:var(--ember); }.login-password-toggle svg { width:16px; }.login-options { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#817b77; font-size:.73rem; }.login-options label { display:flex; align-items:center; gap:7px; }.login-options input { accent-color:var(--ember); }.login-options a { color:#d45c3f; font-weight:700; }.login-submit { width:100%; min-height:50px; margin-top:5px; border-radius:13px; color:#fff9f1; background:#171a28; box-shadow:0 13px 25px rgba(23,26,40,.18); justify-content:space-between; padding:0 18px 0 20px; }.login-submit:hover { background:var(--ember); color:#171821; box-shadow:0 16px 30px rgba(255,118,86,.23); }.login-submit svg { width:19px; }.login-error { margin:0 0 20px; border-radius:12px; }.login-footer { margin-top:34px; color:#a29b95; font-size:.72rem; text-align:left; }.login-footer span { color:#817b77; }
@keyframes pulse-dot { 0%,100% { box-shadow:0 0 0 4px rgba(105,224,167,.11); } 50% { box-shadow:0 0 0 8px rgba(105,224,167,0); } } @keyframes signal-load { from { width:0; } to { width:68%; } } @keyframes float-glow { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-16px,20px,0) scale(1.08); } } @keyframes orbit-spin { to { transform:rotate(332deg); } } @keyframes cup-float { 0%,100% { transform:rotate(6deg) translateY(0); } 50% { transform:rotate(3deg) translateY(-12px); } } @keyframes steam { 0%,100% { opacity:0; transform:translateY(5px) rotate(12deg); } 40% { opacity:.35; } 70% { opacity:0; transform:translateY(-7px) rotate(-8deg); } }
.reveal { animation:rise .55s var(--ease) both; }.reveal:nth-child(2){animation-delay:.05s}.reveal:nth-child(3){animation-delay:.1s}.reveal:nth-child(4){animation-delay:.15s}
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } @keyframes pop { from { opacity:0; transform:scale(.97) translateY(8px); } to { opacity:1; transform:none; } } @keyframes slide-in { from { opacity:0; transform:translateX(15px); } to { opacity:1; transform:none; } }
@media (max-width:1100px) { .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns:1fr; } }
@media (max-width:820px) { .sidebar { transform:translateX(-100%); transition:transform .25s var(--ease); box-shadow:var(--shadow); }.sidebar.open { transform:none; }.main { margin-left:0; width:100%; }.topbar { padding:0 18px; }.menu-toggle { display:grid; place-items:center; }.page { padding:25px 18px; }.page-head { align-items:flex-start; flex-direction:column; }.login-page { grid-template-columns:1fr; }.login-aside { min-height:470px; padding:26px; }.login-hero { margin:55px 0 24px; }.login-hero h1 { font-size:clamp(2.65rem,10vw,4rem); }.login-cup-card { right:25px; bottom:32px; transform:scale(.86) rotate(6deg); }.login-orbit-one { right:-280px; top:2%; }.login-aside-foot { display:none; }.login-form-wrap { padding:42px 24px 56px; }.login-mobile-mark { display:grid; }.login-card-top { margin-bottom:38px; } }
@media (max-width:520px) { .kpi-grid { grid-template-columns:1fr; }.topbar .breadcrumb { display:none; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.panel { padding:16px; }.page-head .btn { width:100%; }.chart-wrap { height:220px; } }
@media (max-width:520px) { .kpi-grid { grid-template-columns:1fr; }.topbar .breadcrumb { display:none; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.panel { padding:16px; }.page-head .btn { width:100%; }.chart-wrap { height:220px; }.login-aside { min-height:430px; }.login-hero { margin-top:40px; }.login-hero h1 { font-size:2.75rem; }.login-hero p { font-size:.88rem; }.login-signal { width:100%; }.login-cup-card { display:none; }.login-form-wrap { padding:36px 20px 48px; }.login-card-top { margin-bottom:30px; }.login-card h2 { font-size:2.15rem; } }
@media (max-width:520px) { .notification-panel { position:fixed; top:70px; right:14px; left:14px; width:auto; max-height:calc(100vh - 88px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }
/* KafeOS modern operations layer */
:root {
  --ink: #eaf6f3;
  --ink-soft: #8fa9a6;
  --paper: #071716;
  --surface: #102523;
  --line: rgba(174, 222, 207, .13);
  --mint: #b9f2d5;
  --mint-strong: #68d9ac;
  --coral: #ff9b63;
  --coral-deep: #f47a4e;
  --sun: #ffd37a;
  --blue: #7dd4e7;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
  --shadow-sm: 0 14px 36px rgba(0,0,0,.2);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --sidebar-width: 286px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
html { background:var(--paper); color-scheme:dark; }
body.ops-app { background: radial-gradient(circle at 86% -10%, rgba(255,155,99,.11), transparent 31rem), radial-gradient(circle at 20% 40%, rgba(104,217,172,.08), transparent 34rem), var(--paper); color:var(--ink); }
body.ops-app::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom, #000, transparent 78%); }
.ops-app .sidebar { width:var(--sidebar-width); padding:22px 16px 16px; background:linear-gradient(180deg,#0b201e 0%,#071615 100%); border-right:1px solid rgba(174,222,207,.1); box-shadow:18px 0 60px rgba(0,0,0,.18); overflow:hidden; }
.sidebar-glow { position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.24; }.sidebar-glow-one { top:-100px; right:-100px; background:var(--coral); }.sidebar-glow-two { bottom:15%; left:-130px; background:var(--mint-strong); }
.ops-app .brand { position:relative; z-index:1; gap:11px; padding:0 10px 27px; }.ops-app .brand-mark { width:42px; height:42px; border-radius:14px; background:linear-gradient(145deg,var(--coral),#ffcf79); color:#17302b; box-shadow:0 10px 24px rgba(255,155,99,.28); }.ops-app .brand-mark svg { width:21px; height:21px; stroke-width:2.2; }.ops-app .brand-name { color:#effbf7; font-size:1.15rem; letter-spacing:-.06em; }.ops-app .brand-name span { color:var(--coral); }.ops-app .brand-sub { color:#82aaa0; letter-spacing:.02em; }.brand-live { display:grid; place-items:center; width:18px; height:18px; margin-left:auto; border:1px solid rgba(104,217,172,.3); border-radius:50%; }.brand-live i,.status-pulse { width:6px; height:6px; display:block; border-radius:50%; background:var(--mint-strong); box-shadow:0 0 0 5px rgba(104,217,172,.12); animation:live-pulse 2.4s infinite; }
.ops-app .nav-label { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; color:#628881; font-size:.62rem; padding:13px 12px 8px; }.nav-label span { color:#506e68; font-size:.5rem; letter-spacing:.11em; }
.ops-app .side-nav { position:relative; z-index:1; gap:3px; }.ops-app .nav-item { color:#99b9b0; padding:12px 13px; border:1px solid transparent; border-radius:13px; font-size:.82rem; }.ops-app .nav-item svg { color:#6f9a90; width:17px; }.ops-app .nav-item:hover { color:#ecfbf6; background:rgba(255,255,255,.055); border-color:rgba(174,222,207,.1); transform:translateX(3px); }.ops-app .nav-item.active { color:#102a25; background:linear-gradient(100deg,var(--mint),#95e8c0); box-shadow:0 8px 20px rgba(104,217,172,.16); }.ops-app .nav-item.active svg { color:#1c6b52; }
.ops-app .sidebar-foot { position:relative; z-index:1; }.ops-app .help-card { padding:14px; margin:0 2px 13px; background:linear-gradient(145deg,rgba(255,155,99,.12),rgba(104,217,172,.06)); border:1px solid rgba(255,181,133,.14); }.help-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }.help-orbit { display:grid; place-items:center; width:29px; height:29px; border-radius:10px; color:var(--coral); background:rgba(255,155,99,.15); }.help-orbit svg { width:15px; }.help-live { color:#85a79f; font-size:.58rem; text-transform:uppercase; letter-spacing:.12em; }.ops-app .help-card strong { font-size:.84rem; }.ops-app .help-card p { color:#89aaa2; font-size:.72rem; margin-bottom:11px; }.help-card a { display:flex; align-items:center; gap:4px; color:var(--coral); font-size:.68rem; font-weight:700; }.help-card a svg { width:12px; }
.ops-app .user-mini { border-top-color:rgba(174,222,207,.1); padding:13px 8px 7px; }.ops-app .avatar { color:#17302b; background:linear-gradient(145deg,var(--sun),#ff9b63); box-shadow:0 4px 12px rgba(255,155,99,.15); }.ops-app .user-meta strong { color:#e8f5f1; }.ops-app .user-meta span { color:#769a91; }.ops-app .user-mini .icon-btn { color:#72958e; }.ops-app .user-mini .icon-btn:hover { color:var(--coral); background:rgba(255,255,255,.07); }
.ops-app .main { background:transparent; }.ops-app .topbar { height:78px; padding:0 38px; background:rgba(7,23,22,.72); border-bottom-color:rgba(174,222,207,.1); backdrop-filter:blur(20px); }.ops-app .breadcrumb { display:flex; align-items:center; gap:10px; color:#6f958d; font-size:.78rem; }.crumb-home { display:grid; place-items:center; color:var(--coral); }.crumb-home svg { width:15px; }.crumb-slash { color:#42645d; }.ops-app .breadcrumb strong { color:#d9eee8; }.topbar-status { display:flex; align-items:center; gap:9px; color:#799b93; font-size:.68rem; margin-left:auto; margin-right:22px; }.topbar-divider { width:1px; height:14px; background:rgba(174,222,207,.15); }.ops-app .top-actions { gap:4px; }.ops-app .top-actions .icon-btn { color:#83a59c; }.ops-app .top-actions .icon-btn:hover { color:#effcf8; background:rgba(255,255,255,.07); }.ops-app .notification-dot { border-color:#0b201e; }
.ops-app .date-chip { background:rgba(255,255,255,.045); border-color:rgba(174,222,207,.15); }
.ops-app .chart-wrap-modern { background:linear-gradient(180deg,#112d29,#0c211f); }
.ops-app .chart-grid-lines { background:repeating-linear-gradient(to bottom,rgba(174,222,207,.12) 0 1px,transparent 1px 25%); }
.ops-app .panel-live { color:#83e4b7; background:rgba(104,217,172,.12); }
.ops-app .quick-action:hover { background:rgba(104,217,172,.1); }
.ops-app .page { padding:38px; max-width:1680px; }.ops-app h1 { color:#eefaf6; font-size:clamp(2rem,3.1vw,3rem); letter-spacing:-.07em; }.ops-app h2,.ops-app h3 { color:#e7f5f0; }.ops-app .eyebrow { color:var(--coral); letter-spacing:.2em; }.ops-app .page-intro,.ops-app .panel-sub { color:#87a7a0; }.ops-app .card { background:linear-gradient(145deg,rgba(17,39,36,.96),rgba(10,28,26,.96)); border-color:rgba(174,222,207,.12); box-shadow:var(--shadow-sm); }.ops-app .card:hover { border-color:rgba(174,222,207,.21); }.ops-app .btn-primary { color:#17302b; background:linear-gradient(100deg,var(--coral),#ffbe73); box-shadow:0 9px 23px rgba(255,155,99,.18); }.ops-app .btn-primary:hover { background:linear-gradient(100deg,#ffb079,#ffd083); }.ops-app .btn-ghost { color:#d7eee8; background:rgba(255,255,255,.045); border-color:rgba(174,222,207,.15); }.ops-app .btn-ghost:hover { color:#15302b; border-color:var(--mint-strong); background:var(--mint); }.ops-app .kpi { background:linear-gradient(145deg,rgba(19,45,40,.95),rgba(12,30,28,.95)); }.ops-app .kpi-top,.ops-app .kpi-note { color:#87a7a0; }.ops-app .kpi-value { color:#effaf6; }.ops-app .kpi::after { opacity:.12; }.ops-app .panel-title { color:#eaf8f3; }.ops-app .legend { color:#87a7a0; }.ops-app .activity { border-bottom-color:rgba(174,222,207,.1); }.ops-app .activity-icon { background:rgba(104,217,172,.12); color:var(--mint-strong); }.ops-app .activity-text strong { color:#dfefeb; }.ops-app .activity-text span,.ops-app .activity-time { color:#789992; }.ops-app .alert.warn { background:rgba(255,211,122,.1); }.ops-app .alert.danger { background:rgba(255,155,99,.1); }.ops-app .alert.info { background:rgba(125,212,231,.1); }.ops-app .data-table th { color:#6f918a; border-bottom-color:rgba(174,222,207,.14); }.ops-app .data-table td { color:#c6ddd8; border-bottom-color:rgba(174,222,207,.08); }.ops-app .data-table tbody tr:hover { background:rgba(255,255,255,.045); }.ops-app .input,.ops-app .select { color:#e4f3ef; background:rgba(255,255,255,.045); border-color:rgba(174,222,207,.15); }.ops-app .input::placeholder { color:#6f918a; }.ops-app .input:focus,.ops-app .select:focus { border-color:var(--mint-strong); box-shadow:0 0 0 3px rgba(104,217,172,.12); }.ops-app .modal-backdrop { background:rgba(1,12,12,.78); backdrop-filter:blur(15px); }.ops-app .modal { background:linear-gradient(145deg,#132e2a,#0d211f); border:1px solid rgba(174,222,207,.15); }.ops-app .field label { color:#8caea5; }.ops-app .modal-close { color:#8caea5; }.ops-app .modal-close:hover { color:#eaf8f3; background:rgba(255,255,255,.08); }
@keyframes live-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 4px rgba(104,217,172,.12); } 50% { opacity:.6; box-shadow:0 0 0 8px rgba(104,217,172,0); } }
@media (max-width:900px) { .topbar-status { display:none; } .ops-app .topbar { padding:0 22px; } .ops-app .page { padding:28px 22px; } }
@media (max-width:520px) { .ops-app .page { padding:24px 16px; } .ops-app .topbar { padding:0 16px; } }

/* Daylight theme: the same operational layout with a brighter reading surface. */
html[data-theme="light"] {
  color-scheme:light;
  --ink: #17302d;
  --ink-soft: #607873;
  --paper: #f3f7f4;
  --surface: #ffffff;
  --line: #d9e6df;
  --mint: #d9f3e6;
  --mint-strong: #4fbd91;
  --coral: #e9794f;
  --coral-deep: #c95d3d;
  --sun: #f2c966;
  --blue: #63b6d0;
  --shadow: 0 24px 70px rgba(24, 65, 53, .12);
  --shadow-sm: 0 12px 30px rgba(24, 65, 53, .09);
}
html[data-theme="light"] body.ops-app {
  background: radial-gradient(circle at 86% -10%, rgba(233,121,79,.12), transparent 31rem), radial-gradient(circle at 20% 40%, rgba(79,189,145,.09), transparent 34rem), var(--paper);
  color: var(--ink);
}
html[data-theme="light"] body.ops-app::before { opacity: .2; background-image: linear-gradient(rgba(27,74,61,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(27,74,61,.035) 1px, transparent 1px); }
html[data-theme="light"] .ops-app .sidebar { background: linear-gradient(180deg, #f8fcfa 0%, #edf6f1 100%); border-right-color: rgba(42,105,83,.13); box-shadow: 18px 0 60px rgba(24,65,53,.08); }
html[data-theme="light"] .ops-app .brand-name { color: #17302d; }
html[data-theme="light"] .ops-app .brand-sub { color: #699087; }
html[data-theme="light"] .ops-app .nav-label { color: #688b81; }
html[data-theme="light"] .ops-app .nav-label span { color: #8aa9a0; }
html[data-theme="light"] .ops-app .nav-item { color: #4e7369; }
html[data-theme="light"] .ops-app .nav-item svg { color: #6e978a; }
html[data-theme="light"] .ops-app .nav-item:hover { color: #17302d; background: rgba(63, 139, 111, .08); border-color: rgba(42,105,83,.12); }
html[data-theme="light"] .ops-app .nav-item.active { color: #14392d; background: linear-gradient(100deg, #b8edd3, #8cdbb7); }
html[data-theme="light"] .ops-app .help-card { background: linear-gradient(145deg, rgba(233,121,79,.12), rgba(79,189,145,.1)); border-color: rgba(201,93,61,.16); }
html[data-theme="light"] .ops-app .help-card p { color: #668b81; }
html[data-theme="light"] .ops-app .help-live { color: #6b8e85; }
html[data-theme="light"] .ops-app .user-mini { border-top-color: rgba(42,105,83,.13); }
html[data-theme="light"] .ops-app .user-meta strong { color: #17302d; }
html[data-theme="light"] .ops-app .user-meta span { color: #6f9188; }
html[data-theme="light"] .ops-app .user-mini .icon-btn { color: #658b80; }
html[data-theme="light"] .ops-app .topbar { background: rgba(248,252,250,.82); border-bottom-color: rgba(42,105,83,.13); }
html[data-theme="light"] .ops-app .breadcrumb { color: #698d83; }
html[data-theme="light"] .ops-app .breadcrumb strong { color: #17302d; }
html[data-theme="light"] .ops-app .topbar-status { color: #64877e; }
html[data-theme="light"] .ops-app .top-actions .icon-btn { color: #63857d; }
html[data-theme="light"] .ops-app .top-actions .icon-btn:hover { color: #17302d; background: rgba(34,100,77,.08); }
html[data-theme="light"] .ops-app .date-chip { background: rgba(255,255,255,.78); border-color: #d4e4dc; }
html[data-theme="light"] .ops-app .chart-wrap-modern { background: linear-gradient(180deg,#fbfdfb,#f4f9f5); }
html[data-theme="light"] .ops-app .chart-grid-lines { background: repeating-linear-gradient(to bottom,rgba(90,135,115,.12) 0 1px,transparent 1px 25%); }
html[data-theme="light"] .ops-app .panel-live { color: #368c69; background: #e8f7ef; }
html[data-theme="light"] .ops-app .quick-action:hover { background: #f1faf5; }
html[data-theme="light"] .ops-app .card,
html[data-theme="light"] .ops-app .kpi { background: rgba(255,255,255,.88); border-color: rgba(42,105,83,.13); box-shadow: var(--shadow-sm); }
html[data-theme="light"] .ops-app .kpi-top,
html[data-theme="light"] .ops-app .kpi-note,
html[data-theme="light"] .ops-app .panel-sub { color: #6e8d85; }
html[data-theme="light"] .ops-app h1,
html[data-theme="light"] .ops-app h2,
html[data-theme="light"] .ops-app h3,
html[data-theme="light"] .ops-app .kpi-value,
html[data-theme="light"] .ops-app .panel-title { color: #17302d; }
html[data-theme="light"] .ops-app .activity { border-bottom-color: rgba(42,105,83,.1); }
html[data-theme="light"] .ops-app .activity-text strong { color: #23433d; }
html[data-theme="light"] .ops-app .activity-text span,
html[data-theme="light"] .ops-app .activity-time { color: #71928a; }
html[data-theme="light"] .ops-app .data-table td { color: #31534b; border-bottom-color: rgba(42,105,83,.09); }
html[data-theme="light"] .ops-app .data-table tbody tr:hover { background: rgba(48,132,99,.05); }
html[data-theme="light"] .ops-app .input,
html[data-theme="light"] .ops-app .select { color: #17302d; background: rgba(255,255,255,.9); border-color: #d4e4dc; }
html[data-theme="light"] .ops-app .input::placeholder { color: #88a29a; }
html[data-theme="light"] .ops-app .modal-backdrop { background: rgba(19,52,43,.36); }
html[data-theme="light"] .ops-app .modal { background: #ffffff; border-color: #d4e4dc; }
html[data-theme="light"] .ops-app .field label,
html[data-theme="light"] .ops-app .modal-close { color: #688b81; }
html[data-theme="light"] .ops-app .modal-close:hover { color: #17302d; background: #edf6f1; }
.theme-toggle { position: relative; }
.theme-toggle svg { width: 17px; height: 17px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Final theme parity overrides for surfaces that also appear outside the dashboard. */
html[data-theme="light"] .ops-app .sidebar { color: #17302d; }
html[data-theme="light"] .ops-app .crumb-slash { color: #8aa9a0; }
html[data-theme="light"] .ops-app .topbar-divider { background: rgba(42,105,83,.13); }
html[data-theme="light"] .ops-app .btn-ghost { color: #31534b; background: rgba(255,255,255,.9); border-color: #d4e4dc; }
html[data-theme="light"] .ops-app .page-intro,
html[data-theme="light"] .ops-app .legend { color: #6e8d85; }
html[data-theme="light"] .ops-app .data-table th { color: #6e8d85; border-bottom-color: rgba(42,105,83,.13); }
html[data-theme="light"] .ops-app .alert.warn { background: #fff5e3; }
html[data-theme="light"] .ops-app .alert.danger { background: #fff0eb; }
html[data-theme="light"] .ops-app .alert.info { background: #eaf4f7; }
html[data-theme="light"] .ops-app .notification-dot { border-color: #f3f7f4; }
html[data-theme="light"] .ops-app .kpi::after { opacity: .45; }

html[data-theme="dark"] .ops-app .badge.green { color: #8de4bb; background: rgba(104,217,172,.14); }
html[data-theme="dark"] .ops-app .badge.orange { color: #ffb18e; background: rgba(255,155,99,.14); }
html[data-theme="dark"] .ops-app .badge.red { color: #ffad95; background: rgba(255,155,99,.14); }
html[data-theme="dark"] .ops-app .badge.blue { color: #9cdeec; background: rgba(125,212,231,.14); }
html[data-theme="dark"] .ops-app .positive { color: #8de4bb; }
html[data-theme="dark"] .ops-app .negative { color: #ffad95; }
html[data-theme="dark"] .ops-app .select option { color: #e4f3ef; background: #132e2a; }
html[data-theme="light"] .ops-app .select option { color: #17302d; background: #ffffff; }
html[data-theme="dark"] .ops-app .toast { background: #102523; color: #eaf6f3; border: 1px solid rgba(174,222,207,.15); }
html[data-theme="light"] .ops-app .toast { background: #17302d; color: #f6fffb; border: 1px solid rgba(42,105,83,.16); }
.date-filter-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.date-filter-group label{font-size:.68rem;color:var(--ink-soft);font-weight:700}.date-filter-group .input{width:145px;min-width:0}.report-summary{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.report-summary span{display:flex;flex-direction:column;gap:3px;min-width:130px}.report-summary strong{font-size:1rem;color:var(--ink)}.report-summary small{font-size:.66rem;color:var(--ink-soft)}
@media (max-width:700px){.date-filter-group{width:100%;align-items:flex-end}.date-filter-group .input{flex:1;min-width:125px}.date-filter-group button{flex:1}}
.table-detail{display:block;margin-top:3px;color:var(--ink-soft);font-size:.66rem;font-weight:500;line-height:1.35}