/* ===== 2050 theme: deep navy, neon blue / cyan, AI purple, glass panels =====
   Loaded after app.css. Everything here is presentation only. */
:root {
  --bg: #050816; --bg-2: #0a1025; --side: #071126; --card: rgba(16, 26, 55, .88);
  --blue: #168bff; --cyan: #00e5ff; --purple: #8b5cf6; --violet: #a855f7;
  --green: #00f5a0; --orange: #ffaa33; --red: #ff4567;
  --tx: #f4f7ff; --tx-2: #a7b4d0; --bd: rgba(80, 150, 255, .25); --bd-soft: rgba(80, 150, 255, .13);
  --g-blue: linear-gradient(135deg, #087cff, #00d4ff); --g-purple: linear-gradient(135deg, #7028ff, #c026ff);
  --g-green: linear-gradient(135deg, #00b981, #00f5a0); --g-orange: linear-gradient(135deg, #ff8a00, #ffc247);
  --g-ai: linear-gradient(135deg, #168bff, #8b5cf6);

  /* map the older variable names onto the new palette so every page follows */
  --ink: var(--tx); --ink-2: #cbd5ee; --ink-3: var(--tx-2);
  --panel: var(--bg); --surface: var(--card); --line: var(--bd); --line-2: var(--bd-soft);
  --lamp: var(--blue); --lamp-dark: #0b6fdc; --lamp-ink: #fff; --lamp-soft: rgba(255, 170, 51, .14);
  --ok: var(--green); --ok-soft: rgba(0, 245, 160, .13);
  --fault: var(--red); --fault-soft: rgba(255, 69, 103, .14);
  --info: #4db5ff; --info-soft: rgba(22, 139, 255, .15);
  --rail: var(--side); --rail-w: 250px;
  --r-panel: 16px; --r-ctl: 10px;
  --bs-body-bg: var(--bg); --bs-body-color: var(--tx); --bs-border-color: var(--bd); --bs-link-color: #4db5ff; --bs-link-hover-color: var(--cyan);
  --bs-secondary-color: var(--tx-2); --bs-emphasis-color: var(--tx); --bs-tertiary-bg: rgba(22,139,255,.08);
  color-scheme: dark;
}
html, body { background: var(--bg); }
body, body.app {
  color: var(--tx);
  background:
    radial-gradient(900px 520px at 6% 105%, rgba(112, 40, 255, .25), transparent 60%),
    radial-gradient(800px 480px at 100% -5%, rgba(22, 139, 255, .22), transparent 60%),
    linear-gradient(rgba(22,139,255,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(22,139,255,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, #050816, #0a1025) fixed;
  background-attachment: fixed;
}
a { color: #4db5ff; } a:hover { color: var(--cyan); }
.text-muted, .text-secondary { color: var(--tx-2) !important; }
::selection { background: rgba(0, 229, 255, .3); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(80,150,255,.35); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }

/* ---------- sidebar ---------- */
.rail { background: radial-gradient(500px 360px at -10% 110%, rgba(52, 80, 255, .45), transparent 65%), linear-gradient(180deg, #071126, #060d20); border-right: 1px solid var(--bd); color: var(--tx); width: var(--rail-w); flex-basis: var(--rail-w); transition: width .2s ease, flex-basis .2s ease; }
.rail-brand { border-bottom: 1px solid var(--bd-soft); padding: 1rem 1rem .9rem; gap: .7rem; }
.rail-mark { width: 44px; height: 44px; border-radius: 13px; background: var(--g-ai); color: #fff; font-size: 1.4rem; box-shadow: 0 0 18px rgba(22,139,255,.6), inset 0 1px 0 rgba(255,255,255,.35); flex: 0 0 44px; }
.rail-name { font-family: var(--font); font-size: .98rem; font-weight: 700; line-height: 1.15; }
.rail-name small { display: block; font-size: .62rem; font-weight: 400; color: var(--tx-2); margin-top: .25rem; line-height: 1.25; }
.rail-nav { padding: .7rem .65rem 1rem; }
.rail-top { color: #dbe5ff; border-radius: 12px; border: 1px solid transparent; padding: .55rem .7rem; font-weight: 500; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.rail-top > i:first-child { background: transparent; box-shadow: none; color: #8fb8ff; font-size: 1.15rem; width: 1.9rem; height: 1.9rem; }
.rail-top:hover { background: rgba(22,139,255,.12); color: #fff; transform: translateX(2px); }
.rail-top.is-active, .rail-top.is-active:hover { background: linear-gradient(90deg, rgba(22,139,255,.35), rgba(0,229,255,.12)); border-color: rgba(0,229,255,.55); box-shadow: 0 0 16px rgba(22,139,255,.35), inset 0 0 12px rgba(0,229,255,.12); color: #fff; }
.rail-top.is-active > i:first-child { color: var(--cyan); }
details[open] > summary.rail-top { background: rgba(22,139,255,.1); }
.rail-sub { border-left: 1px solid var(--bd); margin-left: 1.35rem; }
.rail-sub .rail-link { color: #b9c7e6; border-radius: 9px; border: 1px solid transparent; transition: background .2s, color .2s; }
.rail-sub .rail-link i { color: #6fa4ee; }
.rail-sub .rail-link:hover { background: rgba(22,139,255,.14); color: #fff; }
.rail-sub .rail-link.is-active { background: linear-gradient(90deg, rgba(22,139,255,.32), rgba(0,229,255,.1)); border-color: rgba(0,229,255,.5); box-shadow: 0 0 12px rgba(22,139,255,.3); color: #fff; }
.rail-sub .rail-link.is-active i { color: var(--cyan); }
.rail-foot { padding: .7rem .65rem; border-top: 1px solid var(--bd-soft); }
.rail-collapse { width: 100%; display: flex; align-items: center; gap: .7rem; background: transparent; border: 1px solid var(--bd-soft); color: var(--tx-2); border-radius: 10px; padding: .45rem .7rem; font-size: .88rem; }
.rail-collapse:hover { color: #fff; border-color: var(--bd); background: rgba(22,139,255,.1); }
.rail-collapse i { transition: transform .2s; }
/* collapsed sidebar */
body.rail-mini { --rail-w: 76px; }
body.rail-mini .rail-name, body.rail-mini .rail-top > span, body.rail-mini .rail-caret, body.rail-mini .rail-sub, body.rail-mini .rail-collapse span { display: none; }
body.rail-mini .rail-brand { justify-content: center; padding-inline: .4rem; }
body.rail-mini .rail-top { justify-content: center; padding-inline: .4rem; }
body.rail-mini .rail-collapse { justify-content: center; }
body.rail-mini .rail-collapse i { transform: rotate(180deg); }
body.rail-mini .rail-nav { padding-inline: .5rem; }
#tipBox { position: fixed; z-index: 2000; pointer-events: none; background: #0b1636; color: var(--tx); border: 1px solid rgba(0,229,255,.5); border-radius: 8px; padding: .3rem .6rem; font-size: .82rem; box-shadow: 0 6px 20px rgba(0,0,0,.45); opacity: 0; transition: opacity .12s; white-space: nowrap; }
#tipBox.on { opacity: 1; }

/* ---------- top bar ---------- */
.topbar { background: rgba(7, 14, 34, .82); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(22,139,255,.7), rgba(139,92,246,.7), rgba(0,229,255,.4)) 1; box-shadow: 0 6px 24px rgba(0,0,0,.28); padding: .55rem 1.25rem; gap: .9rem; }
.rail-toggle { display: grid; place-items: center; background: rgba(22,139,255,.1); border: 1px solid var(--bd); color: #cfe0ff; border-radius: 12px; width: 42px; height: 42px; }
.rail-toggle:hover { border-color: var(--cyan); color: #fff; }
.top-search { flex: 1 1 22rem; max-width: 40rem; position: relative; display: flex; align-items: center; }
.top-search i { position: absolute; left: .95rem; color: #6fa4ee; }
.top-search input { width: 100%; background: rgba(22,139,255,.08); border: 1px solid var(--bd); color: var(--tx); border-radius: 99px; padding: .5rem 1rem .5rem 2.5rem; font-size: .92rem; }
.top-search input::placeholder { color: var(--tx-2); }
.top-search input:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.15); }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.top-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #cfe0ff; background: transparent; border: 1px solid transparent; font-size: 1.15rem; text-decoration: none; }
.top-btn:hover { background: rgba(22,139,255,.14); border-color: var(--bd); color: #fff; }
.top-badge { position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 10px rgba(255,69,103,.7); }
.top-user { display: flex; align-items: center; gap: .6rem; background: transparent; border: 1px solid transparent; color: var(--tx); border-radius: 14px; padding: .25rem .55rem .25rem .3rem; }
.top-user:hover { background: rgba(22,139,255,.12); border-color: var(--bd); }
.top-user .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--g-ai); display: grid; place-items: center; color: #fff; font-size: 1.2rem; box-shadow: 0 0 14px rgba(22,139,255,.55); }
.top-user .who { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.top-user .who b { font-size: .92rem; } .top-user .who small { font-size: .75rem; color: var(--tx-2); }
.dropdown-menu { background: #0b1636; border: 1px solid var(--bd); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); --bs-dropdown-link-color: var(--tx); --bs-dropdown-link-hover-bg: rgba(22,139,255,.18); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-divider-bg: var(--bd-soft); }
.dropdown-item i { margin-right: .5rem; color: #6fa4ee; }

/* ---------- page head ---------- */
.page { max-width: 1760px; padding: 1rem 1.4rem 3rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.2rem; margin-bottom: 1rem; }
.page-title { flex: 1 1 18rem; min-width: 0; }
.page-title h1 { font-size: 1.85rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.page-title p { margin: .2rem 0 0; color: var(--tx-2); font-size: .95rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.page-clock { color: var(--tx); font-size: .95rem; padding-bottom: .15rem; white-space: nowrap; }

/* ---------- panels ---------- */
.panel { --acc: var(--blue); background: var(--card); border: 1px solid var(--bd); border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(12px); transition: border-color .25s, box-shadow .25s, transform .25s; color: var(--tx); }
.panel:hover { border-color: rgba(0,229,255,.45); box-shadow: 0 8px 30px rgba(0,100,255,.14), 0 0 14px rgba(0,229,255,.08); }
.panel.hd-blue { --acc: var(--blue); } .panel.hd-green { --acc: var(--green); } .panel.hd-red { --acc: var(--red); } .panel.hd-orange { --acc: var(--orange); } .panel.hd-purple { --acc: var(--violet); }
.panel > .panel-head, details.panel > summary.panel-head, .panel.hd-blue > .panel-head, .panel.hd-green > .panel-head, .panel.hd-red > .panel-head, .panel.hd-purple > .panel-head, .panel.hd-orange > .panel-head,
details.panel.hd-red > summary.panel-head { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%); color: var(--tx); border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--bd-soft); }
.panel > .panel-head h2 { color: var(--tx); font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: .55rem; }
.panel > .panel-head h2 > i:first-child { color: var(--acc); font-size: 1.2rem; filter: drop-shadow(0 0 6px var(--acc)); }
.panel > .panel-head a, .panel > .panel-head .text-muted { color: #9fc4ff !important; }
.panel > .panel-head .btn-outline-secondary { color: #cfe0ff; border-color: var(--bd); background: rgba(22,139,255,.08); }
.panel-body, .panel-body.flush { color: var(--tx); }
.empty-state { color: var(--tx-2); } .empty-state i { color: rgba(80,150,255,.5); } .empty-state h2 { color: var(--tx); }

/* ---------- forms ---------- */
.form-label, .col-form-label { color: var(--tx-2); font-weight: 500; }
.form-control, .form-select { background-color: rgba(5, 10, 30, .75); border: 1px solid var(--bd); color: var(--tx); border-radius: 10px; }
.form-control::placeholder { color: rgba(167,180,208,.6); }
.form-control:focus, .form-select:focus { background-color: rgba(8, 16, 42, .95); color: var(--tx); border-color: var(--cyan); box-shadow: 0 0 0 .2rem rgba(0,229,255,.16); }
.form-control:disabled, .form-control[readonly] { background-color: rgba(22,139,255,.06); color: var(--tx-2); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a7b4d0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-select option { background: #0b1636; color: var(--tx); }
input[type="date"], input[type="month"], input[type="time"] { color-scheme: dark; }
.form-check-input { background-color: rgba(5,10,30,.8); border-color: var(--bd); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--cyan); }
.form-text, .hint { color: var(--tx-2); }
.btn-primary, .btn-primary:focus { background: var(--g-ai); border: 0; color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(22,139,255,.38), inset 0 1px 0 rgba(255,255,255,.25); transition: filter .2s, transform .15s, box-shadow .2s; }
.btn-primary:hover { background: var(--g-ai); color: #fff; filter: brightness(1.12); box-shadow: 0 8px 22px rgba(0,229,255,.35); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(22,139,255,.4); }
.btn-primary:disabled { opacity: .6; }
.btn-outline-secondary { --bs-btn-color: #cfe0ff; --bs-btn-border-color: var(--bd); --bs-btn-hover-bg: rgba(22,139,255,.18); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--cyan); --bs-btn-active-bg: rgba(22,139,255,.28); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--cyan); background: rgba(22,139,255,.06); }
.btn-outline-danger { --bs-btn-color: #ff8aa0; --bs-btn-border-color: rgba(255,69,103,.5); --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); --bs-btn-hover-color: #fff; }
.btn-danger { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: #e03352; --bs-btn-hover-border-color: #e03352; }
.btn-link { color: #4db5ff; }
.alert { background: rgba(22,139,255,.12); color: var(--tx); border-color: var(--bd); }
.alert-success { background: rgba(0,245,160,.12); border-color: rgba(0,245,160,.4); color: #9bf7d3; }
.alert-danger { background: rgba(255,69,103,.13); border-color: rgba(255,69,103,.45); color: #ffb0bf; }
.alert-info { background: rgba(22,139,255,.14); border-color: rgba(22,139,255,.45); color: #b6d8ff; }
.alert-warning { background: rgba(255,170,51,.13); border-color: rgba(255,170,51,.45); color: #ffd699; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- filters and tables ---------- */
.filters { background: rgba(22,139,255,.06); border-bottom: 1px solid var(--bd-soft); border-radius: 16px 16px 0 0; }
.panel > .filters:first-child { border-radius: 16px 16px 0 0; }
.filters .f label { color: var(--tx-2); }
.ledger th { background: rgba(10, 18, 44, .96); color: var(--tx-2); border-bottom: 1px solid var(--bd); }
.ledger td { border-bottom: 1px solid var(--bd-soft); color: var(--tx); }
.ledger tbody tr:nth-child(even) td { background: rgba(22,139,255,.035); }
.ledger tbody tr:hover td { background: rgba(22,139,255,.12); }
.ledger .dim { color: var(--tx-2); }
.ledger tr.row-done td { color: var(--tx-2); }
.ledger tr.row-hot > td { background: rgba(255,69,103,.16); color: #ffd0d9; }
.ledger tr.row-warm > td { background: rgba(255,170,51,.15); color: #ffe2b3; }
.ledger tr.row-ok > td { background: rgba(0,245,160,.1); color: #bdfbe3; }
.ledger tr.row-hot > td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.ledger tr.row-warm > td:first-child { box-shadow: inset 4px 0 0 var(--orange); }
.ledger tr.row-ok > td:first-child { box-shadow: inset 4px 0 0 var(--green); }
.ledger-foot { background: rgba(22,139,255,.07); border-top: 1px solid var(--bd); border-radius: 0 0 16px 16px; }
.ledger-foot .k { color: var(--tx-2); }
.thumb { background: #0b1636; border-color: var(--bd); }
.tag { background: rgba(22,139,255,.16); color: #bcd6ff; }
.tag-ok { background: rgba(0,245,160,.14); color: #8ff5cd; } .tag-warn { background: rgba(255,170,51,.16); color: #ffd699; }
.tag-fault { background: rgba(255,69,103,.16); color: #ffb0bf; } .tag-info { background: rgba(22,139,255,.2); color: #b6d8ff; }
.pager a, .pager span { background: rgba(22,139,255,.08); border-color: var(--bd); color: var(--tx); }
.pager .on { background: var(--g-ai); border-color: transparent; }
.pager a:hover { background: rgba(22,139,255,.22); }

/* ---------- login ---------- */
body.bare .panel { max-width: 26rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 991.98px) {
  :root { --rail-w: 270px; }
  body.rail-mini { --rail-w: 270px; }
  body.rail-mini .rail-name, body.rail-mini .rail-top > span, body.rail-mini .rail-sub { display: revert; }
  .rail { position: fixed; z-index: 40; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; }
  body.rail-open .rail { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  body.rail-open .rail-scrim { background: rgba(2,5,16,.7); }
  .top-search { flex: 1 1 8rem; } .top-user .who { display: none; }
  .page-clock { display: none; }
  .rail-foot { display: none; }
}

/* ================= dashboard ================= */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi { --kc: var(--blue); position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--kc) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--kc) 24%, #0a1025), rgba(10,16,37,.92) 70%); box-shadow: 0 0 22px -8px var(--kc), inset 0 1px 0 rgba(255,255,255,.07); min-width: 0; }
.k-blue { --kc: #12b5ff; } .k-green { --kc: #00f5a0; } .k-orange { --kc: #ffaa33; } .k-purple { --kc: #a855f7; }
.kpi-ico { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; border-radius: 15px; background: linear-gradient(135deg, var(--kc), color-mix(in srgb, var(--kc) 45%, #6d28d9)); box-shadow: 0 0 18px -2px var(--kc); }
.kpi-body { min-width: 0; position: relative; z-index: 1; }
.kpi-k { color: var(--tx-2); font-size: .9rem; }
.kpi-v { font-size: 1.55rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-v small { font-size: .78rem; font-weight: 500; color: var(--tx-2); }
.kpi-d { font-size: .82rem; margin-top: .15rem; }
.kpi-sub { color: var(--tx-2); }
.kpi-delta { font-weight: 600; color: var(--tx-2); } .kpi-delta.up { color: var(--red); } .kpi-delta.down { color: var(--green); }
.kpi-deco { position: absolute; right: 12px; bottom: 10px; width: 64px; height: 40px; opacity: .35; fill: var(--kc); }

.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.dash > .panel { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.d-trend { grid-column: span 6; } .d-cal { grid-column: span 3; } .d-quick { grid-column: span 3; }
.d-summary { grid-column: span 6; } .d-calc { grid-column: span 3; } .d-donut { grid-column: span 3; }
.d-latest { grid-column: span 7; } .d-remind { grid-column: span 5; } .d-drink { grid-column: span 12; }
.dash .panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.trend-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.trend-filter .form-select { width: auto; max-width: 11rem; }
.d-trend .chart-box { flex: 1; min-height: 300px; }

.widget-cal, .widget-calc { background: var(--card); color: var(--tx); }
.widget-cal .cal-nav button { background: rgba(22,139,255,.15); color: #cfe0ff; border: 1px solid var(--bd-soft); }
.widget-cal .cal-nav button:hover { background: rgba(0,229,255,.2); }
.cal-dow { color: var(--tx-2); font-weight: 600; font-size: .8rem; }
.cal-day { color: var(--tx); }
.cal-day:hover { background: rgba(22,139,255,.2); }
.cal-day.is-other { color: rgba(167,180,208,.4); }
.cal-day.is-today { background: var(--g-ai); color: #fff; box-shadow: 0 0 14px -2px var(--blue); }
.cal-day.is-picked { background: rgba(0,229,255,.18); color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.cal-day.is-today.is-picked { background: var(--g-ai); color: #fff; }
.cal-day.has-note::after { border-top-color: var(--orange); }
.cal-note { background: rgba(22,139,255,.1); border: 1px solid var(--bd-soft); color: var(--tx); }

.calc-screen { background: #050a1c; border: 1px solid var(--bd-soft); box-shadow: inset 0 2px 10px rgba(0,0,0,.6); }
.calc-hist { color: var(--tx-2); } .calc-disp { color: var(--cyan); text-shadow: 0 0 12px rgba(0,229,255,.45); }
.calc-keys button { color: var(--tx); background: rgba(22,139,255,.12); border: 1px solid var(--bd-soft); box-shadow: none; }
.calc-keys button:hover { background: rgba(22,139,255,.28); }
.calc-keys button:active { transform: scale(.96); box-shadow: none; }
.calc-keys .k-fn { background: rgba(168,85,247,.2); color: #e6d2ff; box-shadow: none; }
.calc-keys .k-op { background: rgba(0,229,255,.16); color: var(--cyan); box-shadow: none; }
.calc-keys .k-eq { background: var(--g-ai); color: #fff; box-shadow: 0 0 14px -2px var(--blue); border-color: transparent; }

.qa-tabs { display: flex; gap: .4rem; padding: .7rem 1rem 0; }
.qa-tab { background: rgba(22,139,255,.1); color: var(--tx-2); border: 1px solid var(--bd-soft); box-shadow: none; border-radius: 10px; }
.qa-tab.is-on { background: var(--g-ai); color: #fff; box-shadow: 0 0 14px -4px var(--blue); border-color: transparent; }
.d-quick .qa-form .btn { margin-top: .2rem; }

.es-form { gap: .6rem 1.2rem; border-bottom: 1px solid var(--bd-soft); }
.es-hide { color: var(--tx-2); font-size: .85rem; margin-left: auto; }
.es-table { width: 100%; }
.es-table tr.empty td { color: var(--tx-2); }
.es-table .dot, .d-latest .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; box-shadow: 0 0 8px currentColor; }
.es-barcol { width: 28%; min-width: 7rem; }
.es-table .bar { display: block; position: relative; height: 16px; border-radius: 8px; background: rgba(120,150,220,.12); overflow: hidden; }
.es-table .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; min-width: 2px; }
.es-table .bar em { position: absolute; right: 6px; top: 0; font-size: .68rem; font-style: normal; line-height: 16px; color: #fff; text-shadow: 0 0 3px #000; }
.es-table .bar.full i { background: var(--g-ai); }
.es-table tr.es-total td { border-top: 1px solid var(--bd); background: rgba(22,139,255,.1); }
.d-summary .ledger-wrap { max-height: 24rem; }

.donut-box { position: relative; max-width: 240px; margin: 0 auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; line-height: 1.25; }
.donut-center span { color: var(--tx-2); font-size: .8rem; } .donut-center strong { font-size: 1.15rem; }
.donut-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .8rem; font-size: .82rem; }
.donut-legend li { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.donut-legend .dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.donut-legend .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legend .pc { color: var(--tx-2); }

.act-list { list-style: none; margin: 0; padding: 0; }
.act-list li { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--bd-soft); }
.act-list .ico { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 1.1rem; }
.act-list .tx { flex: 1; min-width: 0; } .act-list .tx b { display: block; } .act-list .tx small { color: var(--tx-2); overflow-wrap: anywhere; }
.act-list .when { text-align: right; font-size: .82rem; color: var(--tx-2); white-space: nowrap; }
.act-list .hot .ico { background: var(--fault-soft); color: var(--red); } .act-list .warm .ico { background: rgba(255,170,51,.16); color: var(--orange); } .act-list .ok .ico { background: var(--ok-soft); color: var(--green); }
.badge-t { display: block; margin-top: .2rem; padding: .1rem .55rem; border-radius: 99px; font-size: .74rem; font-weight: 600; }
.badge-t.hot { background: var(--fault-soft); color: #ff8da1; } .badge-t.warm { background: rgba(255,170,51,.16); color: var(--orange); } .badge-t.ok { background: var(--ok-soft); color: var(--green); }

.d-drink .readout > div { border-color: var(--bd-soft); }

@media (max-width: 1399.98px) {
  .d-trend, .d-summary { grid-column: span 8; } .d-cal, .d-quick, .d-calc, .d-donut { grid-column: span 4; }
  .d-latest, .d-remind { grid-column: span 6; }
}
@media (max-width: 1199.98px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-trend, .d-summary, .d-latest, .d-remind { grid-column: span 12; } .d-cal, .d-quick, .d-calc, .d-donut { grid-column: span 6; }
}
@media (max-width: 767.98px) {
  .kpis { grid-template-columns: 1fr; gap: .7rem; }
  .d-cal, .d-quick, .d-calc, .d-donut { grid-column: span 12; }
  .d-trend .chart-box { min-height: 240px; }
  .es-hide { margin-left: 0; } .es-barcol { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.es-table { table-layout: fixed; }
.es-table th:nth-child(1), .es-table td:nth-child(1) { width: 2.6rem; }
.es-table th:nth-child(3), .es-table td:nth-child(3) { width: 7.5rem; }
.es-table th:nth-child(4), .es-table td:nth-child(4) { width: 6.5rem; }
.es-table th:nth-child(2), .es-table td:nth-child(2) { width: auto; text-align: left; overflow: hidden; text-overflow: ellipsis; }
body.bare { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
body.bare .shell, body.bare main { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 0; flex: 0 1 auto; padding: 0; }
body.bare .login { margin: 0 auto; }
body.bare .login .panel { box-shadow: 0 0 40px -10px rgba(22,139,255,.55); }
.tag-bad { background: rgba(255,80,100,.16); color: #ffb3bd; }
.stk-kpi { background: #0b1636; border-color: var(--bd); } .stk-kpi .k { color: #9fb4e6; }
.stk-low td { background: rgba(255,170,51,.10); } .stk-out td { background: rgba(255,80,100,.10); }