/* =========================================================
   Client Totals — Dark Glass UI (Clean + Stable Mobile)
   - Stable theme/state restore on load
   - Clean sections, reduced duplicates
   - Optional FAB add-client support
========================================================= */

/* =========================
   1) Theme + Base
========================= */

:root{
  --bg:#0b1220;
  --card:#101a2f;
  --text:#e7eefc;
  --muted:#9db0d6;
  --line:rgba(255,255,255,.10);
  --accent:#5dd4ff;
  --ok:#34d399;
  --danger:#ff5d5d;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  min-height:100%;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(93,212,255,.20), transparent 50%),
    radial-gradient(900px 700px at 90% 0%, rgba(52,211,153,.16), transparent 55%),
    var(--bg);
  color:var(--text);
}

/* =========================
   2) Topbar
========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(11,18,32,.85);
  backdrop-filter:blur(10px);
}

/* =========================
   3) Controls layout
========================= */

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  overflow:hidden;
  max-height:1200px;
  opacity:1;
}

.actions-left{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
}

.actions-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.backup-row{ opacity:.95; }

@media (max-width:700px){
  .actions-right{ align-items:stretch; width:100%; }
  .btn-row{ justify-content:stretch; }
  .btn-row .btn,
  .btn-row .file{ flex:1; text-align:center; }
}

/* =========================
   4) Fields + Inputs
========================= */

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field span{
  font-size:12px;
  color:var(--muted);
}

.field input,
.select{
  height:38px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

.field input:focus,
.select:focus{
  border-color:rgba(93,212,255,.65);
}

.select{ min-width:180px; }

.group-field .group-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* =========================
   5) Buttons
========================= */

.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
}

.btn:hover{
  border-color:rgba(255,255,255,.22);
}

.btn.primary{
  background:rgba(93,212,255,.20);
  border-color:rgba(93,212,255,.45);
}

.btn.danger{
  background:rgba(255,93,93,.16);
  border-color:rgba(255,93,93,.38);
}

.btn.ghost{ background:transparent; }
.btn.small{
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
}
.btn.file{
  position:relative;
  overflow:hidden;
}

/* =========================
   6) Container + Cards
========================= */

.container{
  max-width:1100px;
  margin:18px auto;
  padding:0 14px 40px;
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

/* =========================
   7) Summary (Grand total)
========================= */

.summary h2{
  margin:0 0 10px 0;
  font-size:16px;
}

.summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.kpi{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.05);
  min-width:0;
}

.kpi-label{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.2px;
}

.kpi-value{
  font-size:clamp(18px, 3.2vw, 22px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.01em;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   8) Toggle (Active / All)
========================= */

.toggle{
  display:flex;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:4px;
  gap:4px;
}

.toggle-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}

.toggle-btn.active{
  background:rgba(93,212,255,.18);
  color:var(--text);
  border:1px solid rgba(93,212,255,.28);
}

/* =========================
   9) Period cards + table
========================= */

.period{ margin-top:14px; }

.period-head{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.period-title h2{
  margin:0;
  font-size:16px;
}

.period-dates{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.period-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.table-wrap{
  margin-top:12px;
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--line);
}

.tbl{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
  background:rgba(0,0,0,.10);
}

.tbl th,
.tbl td{
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
}

.tbl th{
  font-size:12px;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  position:sticky;
  top:0;
}

.tbl td input{
  width:100%;
  height:36px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:8px 10px;
  outline:none;
}

.tbl td input:focus{
  border-color:rgba(93,212,255,.65);
}

.total-row td{
  background:linear-gradient(
    90deg,
    rgba(34,197,94,.30),
    rgba(16,185,129,.24)
  );
  border:1px solid rgba(34,197,94,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 18px rgba(16,185,129,.18);
  font-weight:900;
  border-bottom:none;
  letter-spacing:.3px;
}

.total-label{ letter-spacing:.4px; }

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(93,212,255,.14);
  border:1px solid rgba(93,212,255,.28);
}

/* =========================
   10) Review mode cards
========================= */

#reviewView{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.review-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

.review-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.review-title{
  font-size:16px;
  font-weight:900;
  margin:0;
}

.review-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

.review-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}

@media (max-width:700px){
  .review-kpis{ grid-template-columns:1fr; }
}

.period-card{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.12);
}

.period-card summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  user-select:none;
}

.period-card summary::-webkit-details-marker{ display:none; }

.period-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.period-range{
  font-weight:900;
  font-size:14px;
}

.period-mini{
  font-size:12px;
  color:var(--muted);
}

.period-sum{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.badge{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  font-weight:800;
  font-size:12px;
}

.badge b{ font-weight:900; }

.period-body{
  padding:0 14px 14px 14px;
}

.client-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.client-item{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.client-name{
  font-weight:900;
  font-size:13px;
}

.client-values{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  color:var(--text);
  font-size:12px;
}

.client-values span{ color:var(--muted); }

/* =========================
   11) Modal (Confirm)
========================= */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  z-index:999;
  padding:16px;
}

.modal{
  width:min(420px, 100%);
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  padding:14px;
}

.modal-title{
  font-weight:900;
  font-size:16px;
  margin-bottom:8px;
}

.modal-text{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}

/* =========================
   12) To-top button
========================= */

.to-top{
  position:fixed;
  right:16px;
  bottom:140px;
  width:46px;
  height:46px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:20px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  background:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.92);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  z-index:5000;
}

.to-top.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* =========================
   13) Optional FAB “+ Add Client”
========================= */

.fab-add-client{
  position:fixed;
  right:16px;
  bottom:72px;
  z-index:5000;
  padding:12px 14px;
  border-radius:999px;
  font-weight:700;
  display:none;
}

html.is-edit .fab-add-client{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

html.keyboard-open .fab-add-client{
  bottom:90px;
}

html.all-periods-collapsed .fab-add-client{
  display:none !important;
}

/* =========================
   14) Small helpers
========================= */

.footer{ display:none; }
.hint{ display:none !important; }

/* =========================
   15) Search
========================= */

.review-search{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.review-search-input{
  height:40px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

.review-search-input:focus{
  border-color:rgba(93,212,255,.65);
}

.review-search-results{
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.review-search-item{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}

.review-search-item:last-child{ border-bottom:none; }

.review-search-name{
  font-weight:900;
  font-size:13px;
}

.review-search-meta{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.review-search-empty{
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
}

/* =========================
   16) Theme switch + mode switch
========================= */

.mode-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
}

.mode-switch{
  display:flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:999px;
}

.mode-switch .btn{
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  padding:6px 9px;
  min-width:56px;
  font-weight:800;
  box-shadow:none;
  font-size:12px;
}

.mode-switch .btn.active{
  background:rgba(93,212,255,.28);
  color:#ffffff;
  border:1px solid rgba(93,212,255,.55);
  box-shadow:0 0 0 2px rgba(93,212,255,.12) inset;
}

#controlsToggle{
  margin:0;
  white-space:nowrap;
  flex-shrink:0;
  min-width:154px;
  text-align:center;
  background:rgba(168,85,247,.16);
  border-color:rgba(168,85,247,.35);
  color:#e9d5ff;
}

.theme-switch{
  margin-left:0;
  flex-shrink:0;
  position:relative;
  width:54px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}

.theme-switch input{ display:none; }

.theme-switch .slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);
  transition:background .2s ease, border-color .2s ease;
  z-index:1;
}

.theme-switch .slider::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#ffffff;
  transition:transform .2s ease;
}

.theme-switch input:checked + .slider::before{
  transform:translateX(26px);
}

.theme-switch .icon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:.9;
  pointer-events:none;
  z-index:2;
}

.theme-switch .moon{ left:7px; }
.theme-switch .sun{ right:7px; }

/* =========================
   17) Summary collapse + Monthly Statistics
========================= */

.summary-title-btn{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius:14px;
  padding:10px 14px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.35px;
  cursor:pointer;
}

.summary-collapse-icon{
  font-size:14px;
  opacity:.9;
  transition:transform .2s ease;
}

.summary-body{
  margin-top:12px;
  overflow:hidden;
  max-height:1200px;
  opacity:1;
}

html.summary-collapsed .summary-body{
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
  pointer-events:none !important;
}

html.summary-collapsed .summary-collapse-icon{
  transform:rotate(-90deg);
}

.monthly-stats{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.monthly-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.monthly-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.3px;
  color:var(--text);
}

.month-nav{
  display:flex;
  align-items:center;
  gap:8px;
}

.month-label{
  min-width:120px;
  text-align:center;
  font-weight:800;
  color:var(--text);
}

.monthly-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.month-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-radius:16px;
  margin-bottom:0;
  font-size:15px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  gap:10px;
}

.month-row span{
  opacity:.75;
  font-weight:500;
}

.month-row b{
  font-size:18px;
  font-weight:700;
}

.month-badges{
  display:flex;
  gap:8px;
  align-items:center;
}

.badge-done,
.badge-fail{
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}

.badge-done{ background:#22c55e; }
.badge-fail{ background:#ef4444; }
.badge-fixed{background:#facc15; color:#111827;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}

@media (max-width:700px){
  .summary-title-btn{
    font-size:15px;
    padding:9px 12px;
  }

  .month-nav{
    width:100%;
    justify-content:space-between;
  }

  .month-label{
    flex:1;
  }

  .monthly-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   18) Period collapse
========================= */

.period-top{
  margin-bottom:12px;
}

.period-collapse-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  text-align:left;
}

.period-collapse-title{
  font-size:16px;
  font-weight:800;
  white-space:nowrap;
}

.period-collapse-meta{
  flex:1;
  min-width:0;
  color:var(--muted);
  font-size:13px;
}

.period-group-preview{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--accent);
  margin-bottom:2px;
  opacity:.95;
}

.period-range-preview{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.period-collapse-icon{
  font-size:14px;
  opacity:.9;
  transition:transform .22s ease;
}

.period-body-wrap{
  overflow:hidden;
  max-height:2500px;
  opacity:1;
}

.period.is-collapsed .period-body-wrap{
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
  pointer-events:none !important;
}

.period.is-collapsed .period-collapse-icon{
  transform:rotate(-90deg);
}

.period-group-box{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  margin:8px 0 2px 0;
  width:fit-content;
}

/* =========================
   19) Client status button (3 states)
========================= */

.done-head{
  text-align:center;
  padding-left:18px !important;
}

.done-cell{
  text-align:center;
  vertical-align:middle;
}

.doneBtn{
  width:16px;
  height:16px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  cursor:pointer;
  display:inline-block;
  padding:0;
  position:relative;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.doneBtn:active{
  transform:scale(.92);
}

.doneBtn.state-none{
  background:transparent;
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.doneBtn.state-done{
  background:#22c55e;
  border-color:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.14);
}

.doneBtn.state-done::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.doneBtn.state-fail{
  background:#ef4444;
  border-color:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.14);
}

.doneBtn.state-fail::before,
.doneBtn.state-fail::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:2px;
  height:10px;
  background:#fff;
  border-radius:2px;
}

.doneBtn.state-fixed{
  background:#facc15;
  border-color:#facc15;
  box-shadow:0 0 0 2px rgba(250,204,21,.16);
}

.doneBtn.state-fixed::after{
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff8cc;
}

.doneBtn.state-fail::before{ transform:rotate(45deg); }
.doneBtn.state-fail::after{ transform:rotate(-45deg); }

/* =========================
   20) Review status badge
========================= */

.client-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.review-status{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
}

.review-status-done{
  background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.34);
  color:#22c55e;
}

.review-status-fail{
  background:rgba(239,68,68,.16);
  border:1px solid rgba(239,68,68,.34);
  color:#ef4444;
}

.review-status-fixed{
background:#f1c40f;
color:#1a1a1a;
border-radius:8px;
padding:2px 8px;
font-size:12px;
font-weight:600;
}

/* =========================
   21) Number styling
========================= */

html[data-theme="dark"] .kpi-value{
  color:#f0d78a;
}

html[data-theme="light"] .kpi-value{
  color:#6a4d00;
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
}

/* =========================
   22) Grand Total subtle glow
========================= */

html[data-theme="dark"] .summary.card{
  background:
linear-gradient(
180deg,
rgba(22,60,55,.65),
rgba(10,28,30,.90)
);

  border:1px solid rgba(240,215,138,.45);

  box-shadow:
    0 0 0 1px rgba(240,215,138,.18),
    0 12px 28px rgba(0,0,0,.45),
    0 0 28px rgba(240,215,138,.14);
}

html[data-theme="light"] .summary.card{

  background:
  linear-gradient(
  180deg,
  rgba(220,226,235,.96),
  rgba(200,208,218,.94)
  );

  border:1px solid rgba(110,125,145,.28);

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.55),
  0 0 0 1px rgba(110,125,145,.18),
  0 14px 26px rgba(0,0,0,0.10),
  0 0 20px rgba(110,125,145,.14);

  backdrop-filter: blur(12px);
  
  position:relative;
  overflow:hidden;
  background-clip: padding-box;

}

html[data-theme="dark"] .btn{
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}

html[data-theme="dark"] .btn.primary{
  box-shadow:0 2px 10px rgba(93,212,255,.10);
}

html[data-theme="dark"] .btn.danger{
  box-shadow:0 2px 10px rgba(255,93,93,.08);
}

/* =========================
   23) Light theme
========================= */

html[data-theme="light"] body{
  color:#0f172a;
  background:
    radial-gradient(1100px 800px at 10% -10%, rgba(93,212,255,.18), transparent 58%),
    radial-gradient(1000px 750px at 90% 0%, rgba(52,211,153,.13), transparent 62%),
    #c6d0dc;
}

html[data-theme="light"] .topbar{
  background:rgba(238,242,247,.92);
  border-bottom:1px solid rgba(15,23,42,.10);
}

html[data-theme="light"] .subtitle,
html[data-theme="light"] .kpi-label,
html[data-theme="light"] .field span,
html[data-theme="light"] .period-mini,
html[data-theme="light"] .review-sub,
html[data-theme="light"] .client-values span,
html[data-theme="light"] .footer{
  color:#475569 !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .period-card,
html[data-theme="light"] .kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
  border-color:rgba(15,23,42,.14);
  box-shadow:
    0 10px 26px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
  color:#0f172a;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .select,
html[data-theme="light"] .tbl td input,
html[data-theme="light"] .review-search-input{
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.18);
  color:#0f172a;
}

html[data-theme="light"] .tbl th{
  background:rgba(15,23,42,.06);
  color:#475569;
}

html[data-theme="light"] .btn{
  background:rgba(15,23,42,.11);
  border-color:rgba(15,23,42,.24);
  color:#0f172a;
  box-shadow:0 2px 8px rgba(15,23,42,.10);
}

html[data-theme="light"] .btn.primary{
  background:rgba(93,212,255,.30);
  border-color:rgba(93,212,255,.52);
  box-shadow:0 2px 8px rgba(93,212,255,.14);
}

html[data-theme="light"] .btn.danger{
  background:rgba(255,93,93,.20);
  border-color:rgba(255,93,93,.38);
  box-shadow:0 2px 8px rgba(255,93,93,.10);
}

html[data-theme="light"] .btn:hover{
  background:rgba(15,23,42,.15);
  border-color:rgba(15,23,42,.30);
}

html[data-theme="light"] .btn.primary:hover{
  background:rgba(93,212,255,.36);
  border-color:rgba(93,212,255,.60);
}

html[data-theme="light"] .btn.danger:hover{
  background:rgba(255,93,93,.26);
  border-color:rgba(255,93,93,.46);
}

html[data-theme="light"] .toggle{
  border-color:rgba(15,23,42,.14);
  background:rgba(15,23,42,.04);
}

html[data-theme="light"] .toggle-btn{
  color:#475569;
}

html[data-theme="light"] .toggle-btn.active{
  color:#0f172a;
  background:rgba(93,212,255,.22);
  border:1px solid rgba(93,212,255,.30);
}

html[data-theme="light"] .total-row td{
  background:linear-gradient(
    90deg,
    rgba(34,197,94,.35),
    rgba(16,185,129,.28)
  );
  border:1px solid rgba(16,185,129,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 6px 16px rgba(16,185,129,.22);
  color:#064e3b;
  font-weight:900;
  letter-spacing:.3px;
}

html[data-theme="light"] .theme-switch .slider{
  background:rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.14);
}

html[data-theme="light"] .modal{
  border:1px solid rgba(15,23,42,.16);
  background:linear-gradient(180deg, rgba(214,223,234,.98), rgba(198,209,222,.98));
  box-shadow:0 18px 40px rgba(15,23,42,.22);
}

html[data-theme="light"] .modal-title{
  color:#0f172a;
}

html[data-theme="light"] .modal-text{
  color:#334155;
}

html[data-theme="light"] .modal .btn{
  background:rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.16);
  color:#0f172a;
  font-weight:700;
}

html[data-theme="light"] .modal .btn.danger{
  background:rgba(255,93,93,.18);
  border-color:rgba(255,93,93,.34);
  color:#7f1d1d;
}

html[data-theme="light"] .mode-switch{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.12);
}

html[data-theme="light"] .mode-switch .btn{
  color:#475569;
}

html[data-theme="light"] .mode-switch .btn.active{
  background:rgba(93,212,255,.28);
  color:#0f172a;
  border:1px solid rgba(93,212,255,.50);
  box-shadow:0 0 0 2px rgba(93,212,255,.12) inset;
}

html[data-theme="light"] #controlsToggle{
  color:#6b21a8;
}

html[data-theme="light"] .to-top{
  background:rgba(15,23,42,.18);
  color:#0f172a;
  box-shadow:0 10px 30px rgba(15,23,42,.25);
}

html[data-theme="light"] .pill{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.75),
    rgba(220,252,231,.85)
  );
  border:1px solid rgba(16,185,129,.45);
  color:#065f46;
  font-weight:800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 14px rgba(16,185,129,.20);
}

html[data-theme="light"] .client-values{
  color:#0f172a;
}

html[data-theme="light"] .client-values span{
  color:#475569;
  font-weight:600;
}

html[data-theme="light"] .review-card,
html[data-theme="light"] .period-card{
  border:1px solid rgba(15,23,42,.22);
}

html[data-theme="light"] .client-item{
  border:1px solid rgba(15,23,42,.20);
  background:rgba(255,255,255,.72);
}

html[data-theme="light"] .badge{
  border:1px solid rgba(15,23,42,.18);
  background:rgba(255,255,255,.60);
}

html[data-theme="light"] .summary-title-btn{
  background:rgba(255,255,255,.58);
  border-color:rgba(15,23,42,.16);
  color:#0f172a;
}

html[data-theme="light"] .monthly-stats{
  border-top:1px solid rgba(15,23,42,.12);
}

html[data-theme="light"] .monthly-title,
html[data-theme="light"] .month-label{
  color:#0f172a;
}

html[data-theme="light"] .period-collapse-btn{
  background:rgba(255,255,255,.58);
  border-color:rgba(15,23,42,.16);
  color:#0f172a;
}

html[data-theme="light"] .period-collapse-meta{
  color:#475569;
}

html[data-theme="light"] .period-group-preview{
  color:#6d28d9;
}

html[data-theme="light"] .period-group-box{
  background:rgba(109,40,217,.08);
  border-color:rgba(109,40,217,.18);
  color:#6d28d9;
}

html[data-theme="light"] .doneBtn.state-none{
  border-color:rgba(15,23,42,.22);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);
}

html[data-theme="light"] .review-status-done{
  color:#15803d;
  border-color:rgba(21,128,61,.28);
  background:rgba(21,128,61,.10);
}

html[data-theme="light"] .review-status-fail{
  color:#b91c1c;
  border-color:rgba(185,28,28,.24);
  background:rgba(185,28,28,.08);
}

html[data-theme="light"] .month-row{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 2px 10px rgba(15,23,42,.03);
}

/* =========================
   24) Stable startup + smooth after ready
========================= */

/* თავიდან ანიმაციები გამორთულია */
.controls,
.summary-body,
.period-body-wrap{
  transition:none !important;
}

/* როცა აპი მზად გახდება, მერე ჩაირთოს */
html.ready .controls,
html.ready .summary-body,
html.ready .period-body-wrap{
  transition:max-height .28s ease, opacity .2s ease, margin-top .2s ease !important;
}

/* Controls state */
html.controls-collapsed .controls{
  max-height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

html.controls-collapsed .topbar{
  padding-bottom:10px;
}

/* =========================
   25) Total change animation
========================= */

.total-flash{
  animation:totalFlash .28s ease;
}

@keyframes totalFlash{
  0%{
    transform:scale(1);
    filter:brightness(1);
  }
  50%{
    transform:scale(1.06);
    filter:brightness(1.35);
  }
  100%{
    transform:scale(1);
    filter:brightness(1);
  }
}

/* ===== Boot fix: no flash on startup ===== */

html[data-theme="light"],
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 800px at 10% -10%, rgba(93,212,255,.18), transparent 58%),
    radial-gradient(1000px 750px at 90% 0%, rgba(52,211,153,.13), transparent 62%),
    #c6d0dc;
  color:#0f172a;
}

html[data-theme="dark"],
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(93,212,255,.20), transparent 50%),
    radial-gradient(900px 700px at 90% 0%, rgba(52,211,153,.16), transparent 55%),
    #0b1220;
  color:#e7eefc;
}

body.booting .controls,
body.booting .summary-body,
body.booting .period-body-wrap{
  transition:none !important;
}

body.booting .controls{
  max-height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

body.booting .summary-body{
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

body.booting .period-body-wrap{
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

html:not(.controls-collapsed) body.booting .controls{
  max-height:1200px !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

html:not(.summary-collapsed) body.booting .summary-body{
  max-height:1200px !important;
  opacity:1 !important;
  margin-top:12px !important;
  pointer-events:auto !important;
}

body.booting .period:not(.is-collapsed) .period-body-wrap{
  max-height:2500px !important;
  opacity:1 !important;
  margin-top:0 !important;
  pointer-events:auto !important;
}

html.app-ready body{
  visibility: visible;
  animation: appFade .18s ease;
}

@keyframes appFade{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

#splash{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:22px;
  background:#0b1220;
  z-index:99999;
  transition:opacity .25s ease;
}

html[data-theme="light"] #splash{
  background:#c6d0dc;
}

.loader-ring{
  width:54px;
  height:54px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.14);
  border-top-color:#5dd4ff;
  animation:loaderSpin .9s linear infinite;
  box-shadow:0 0 24px rgba(93,212,255,.18);
}

html[data-theme="light"] .loader-ring{
  border:4px solid rgba(15,23,42,.12);
  border-top-color:#6d28d9;
  box-shadow:0 0 18px rgba(109,40,217,.10);
}

.loader-bar{
  width:140px;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  position:relative;
}

html[data-theme="light"] .loader-bar{
  background:rgba(15,23,42,.10);
}

.loader-bar-fill{
  position:absolute;
  top:0;
  left:-45%;
  width:45%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#5dd4ff,#34d399);
  animation:loaderSlide 1.1s ease-in-out infinite;
}

html[data-theme="light"] .loader-bar-fill{
  background:linear-gradient(90deg,#6d28d9,#5dd4ff);
}

.splash-hide{
  opacity:0;
  pointer-events:none;
}

@keyframes loaderSpin{
  to{ transform:rotate(360deg); }
}

@keyframes loaderSlide{
  0%{ left:-45%; }
  100%{ left:100%; }
}

html.app-preload .topbar,
html.app-preload .container,
html.app-preload .fab-add-client,
html.app-preload .to-top{
  visibility:hidden;
  opacity:0;
}

html.app-ready .topbar,
html.app-ready .container,
html.app-ready .fab-add-client,
html.app-ready .to-top{
  visibility:visible;
  animation:appFade .18s ease;
}

@keyframes appFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ===== Button press feedback ===== */

.btn{
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn:active{
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  filter: brightness(.96);
}

/* ===== Block press feedback ===== */

.summary-title-btn,
.period-collapse-btn,
.period-card summary{
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.summary-title-btn:active,
.period-collapse-btn:active,
.period-card summary:active{
  transform: translateY(2px) scale(.985);
  filter: brightness(.95);
}

@media (hover:hover){

.summary-title-btn:hover,
.period-collapse-btn:hover,
.period-card summary:hover{
  transform: translateY(-1px);
}

}

/* =========================
   Tap / Focus fix
========================= */

.btn,
.summary-title-btn,
.period-collapse-btn,
.period-card summary{
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
}

.btn:focus,
.btn:focus-visible,
.summary-title-btn:focus,
.summary-title-btn:focus-visible,
.period-collapse-btn:focus,
.period-collapse-btn:focus-visible,
.period-card summary:focus,
.period-card summary:focus-visible{
  outline: none;
  box-shadow: none;
}

.toggle-btn{
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
}

.toggle-btn:focus,
.toggle-btn:focus-visible,
.toggle-btn:active{
  outline: none;
  box-shadow: none;
}

/* =========================
   Stronger press feedback
========================= */

.btn,
.summary-title-btn,
.period-collapse-btn,
.period-card summary{
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    background-color .16s ease;
  transform: translateZ(0);
}

.btn:focus,
.btn:focus-visible,
.summary-title-btn:focus,
.summary-title-btn:focus-visible,
.period-collapse-btn:focus,
.period-collapse-btn:focus-visible,
.period-card summary:focus,
.period-card summary:focus-visible{
  outline: none;
  box-shadow: none;
}

/* პატარა ღილაკები */
.btn:active{
  transform: translateY(2px) scale(0.96);
  filter: brightness(.93);
}

/* დიდი clickable ბლოკები */
.summary-title-btn:active,
.period-collapse-btn:active,
.period-card summary:active{
  transform: translateY(2px) scale(.988);
  filter: brightness(.94);
}

.toggle-btn:active{
  transform: translateY(2px) scale(0.96);
  filter: brightness(.93);
}

/* ===== Full card press feedback ===== */

.summary.card,
.period.card{
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}

.summary.card:active,
.period.card:active{
  transform: translateY(2px) scale(.992);
  filter: brightness(.975);
}

.summary.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,.35),
  rgba(255,255,255,.10) 30%,
  transparent 60%
  );

  pointer-events:none;
  opacity:.35;
}

.status-list-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  max-height:55vh;
  overflow:auto;
}

.status-list-item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  transition: transform .14s ease, filter .14s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
}

.status-list-item:active{
  transform: translateY(1px) scale(.992);
  filter: brightness(.97);
}

.status-list-name{
  font-weight:900;
  font-size:13px;
}

.status-list-meta{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.status-list-empty{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

html[data-theme="light"] .status-list-empty{
  color:#1e293b;
}

html[data-theme="light"] .status-list-item{
  background: rgba(255,255,255,.68);
  border-color: rgba(15,23,42,.14);
}

.row-highlight{
  animation: rowFlash 1.8s ease;
}

@keyframes rowFlash{
  0%{
    background: rgba(250,204,21,.30);
  }
  100%{
    background: transparent;
  }
}

.premium-status-row{
  margin-top: 18px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background:
    linear-gradient(135deg,
      rgba(20,34,58,.92) 0%,
      rgba(28,52,86,.88) 52%,
      rgba(16,30,52,.92) 100%);
  border: 1px solid rgba(120,190,255,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 10px 26px rgba(0,0,0,.22),
    0 0 0 1px rgba(120,190,255,.06),
    0 0 28px rgba(70,150,255,.10);
}

.premium-status-row > span{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #eef4ff;
  text-shadow: 0 1px 8px rgba(0,0,0,.22);
}

.premium-status-row .month-badges{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.premium-status-row .badge-done,
.premium-status-row .badge-fail,
.premium-status-row .badge-fixed{
  min-width: 42px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: 15px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 6px 14px rgba(0,0,0,.18);
}

.premium-status-row .badge-done{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 14px rgba(28,180,90,.22);
}

.premium-status-row .badge-fail{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 14px rgba(220,60,60,.22);
}

.premium-status-row .badge-fixed{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 14px rgba(230,185,20,.22);
}

html[data-theme="light"] .premium-status-row{
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.78) 0%,
      rgba(244,248,255,.92) 50%,
      rgba(238,244,252,.84) 100%);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 10px 22px rgba(15,23,42,.08);
}

html[data-theme="light"] .premium-status-row > span{
  color:#0f172a;
  text-shadow:none;
}

.premium-status-row > span{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}

.premium-status-row .month-badges{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-theme="light"] .premium-status-row{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.74),
    rgba(255,255,255,.62)
  );
  border: 1px solid rgba(15,23,42,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 8px 18px rgba(15,23,42,.08);
}

body[data-theme="light"] .premium-status-row > span{
  color:#0f172a;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.3px;
  margin-right:8px;
}

.status-badge-done{
  background:#1fae5b;
  color:white;
}

.status-badge-fail{
  background:#e23a3a;
  color:white;
}

.status-badge-fixed{
  background:#e6b414;
  color:black;
}

.global-search-card{
  margin-top: 18px;
  margin-bottom: 18px;
}

.global-search-card .review-head{
  display:block;
}

.global-search-card .review-search{
  width:100%;
}

.global-search-card .review-search-results{
  margin-top: 14px;
  position: static;
  max-height: 340px;
  overflow: auto;
  border-radius: 22px;
}

.global-search-card .review-search-item{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}

html[data-theme="light"] .global-search-card .review-search-item{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
}

.global-search-card .review-search-name{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 8px;
  color: #0f172a;
}

.global-search-card .review-search-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

.global-search-card .review-search-meta span{
  color: #64748b;
}

.global-search-card .review-search-meta b{
  color: #475569;
  font-weight: 800;
}

/* Dark theme */

html[data-theme="dark"] .global-search-card .review-search-name{
  color: #f8fafc;
}

html[data-theme="dark"] .global-search-card .review-search-meta{
  color: #a8b3cf;
}

html[data-theme="dark"] .global-search-card .review-search-meta span{
  color: #a8b3cf;
}

html[data-theme="dark"] .global-search-card .review-search-meta b{
  color: #dbe7ff;
}

.review-search-name-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.search-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
}

.search-status-done{
  background:#1fae5b;
  color:#fff;
}

.search-status-fail{
  background:#e23a3a;
  color:#fff;
}

.search-status-fixed{
  background:#e6b414;
  color:#111827;
}

.search-highlight{
  padding: 1px 3px;
  border-radius: 4px;
  font-weight: 900;
  background: rgba(255,210,80,0.35);
  color: #111827;
}

html[data-theme="dark"] .search-highlight{
  background: rgba(255,210,80,0.22);
  color: #ffe08a;
}

#textPromptInput{
  width:100%;
}

html[data-theme="light"] #textPromptInput{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.18);
  color:#0f172a;
}

html[data-theme="dark"] #textPromptInput{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
}

/* Update bar */

.update-bar{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 20px;
  background: #101a2f;
  color: #e7eefc;
  padding: 14px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.38);
  z-index: 9999;
  max-width: 420px;
  margin: 0 auto;
}

.update-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.update-title{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.update-text{
  font-size: 14px;
  color: #9db0d6;
  line-height: 1.35;
}

.update-actions{
  display:flex;
  gap:10px;
  width:100%;
}

.update-actions .btn{
  flex:1;
  justify-content:center;
}

@media (max-width: 420px){
  .update-title{
    font-size: 18px;
  }

  .update-text{
    font-size: 13px;
  }
}

/* ===== Update popup final fix ===== */
#updateBar{
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 20px !important;
  width: auto !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 16px !important;
  border-radius: 18px !important;
  display: none;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] #updateBar{
  background: #0f1b35 !important;
  color: #e7eefc !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}

html[data-theme="light"] #updateBar{
  background: #ffffff !important;
  color: #142033 !important;
  box-shadow: 0 12px 30px rgba(19,33,58,0.18) !important;
  border: 1px solid rgba(80,110,160,0.18) !important;
}

#updateBar .update-copy{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

#updateBar .update-title{
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

#updateBar .update-text{
  font-size: 16px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

html[data-theme="dark"] #updateBar .update-text{
  color: #9db0d6 !important;
}

html[data-theme="light"] #updateBar .update-text{
  color: #5b6b84 !important;
}

#updateBar .update-actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

#updateBar .update-actions .btn{
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 12px 10px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  border-radius: 14px !important;
}

html[data-theme="light"] #updateBar #updateExportBtn{
  background: #eef3fb !important;
  color: #20304a !important;
  border: 1px solid rgba(80,110,160,0.22) !important;
}

html[data-theme="dark"] #updateBar #updateExportBtn{
  background: rgba(255,255,255,0.06) !important;
  color: #e7eefc !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

@media (max-width: 420px){
  #updateBar .update-title{
    font-size: 24px !important;
  }

  #updateBar .update-text{
    font-size: 15px !important;
  }

  #updateBar .update-actions .btn{
    font-size: 15px !important;
    padding: 11px 8px !important;
  }
}