/* LifeOS Suite v1.1.1 — Mobile-first responsive stylesheet */
:root{
  --los-bg:#0f1117;
  --los-s1:#1a1d27;
  --los-s2:#22263a;
  --los-s0:#0c0e16;
  --los-border:rgba(255,255,255,0.08);
  --los-border2:rgba(255,255,255,0.14);
  --los-text:#e8e6e0;
  --los-muted:#8b8985;
  --los-sub:#4a4845;
  --los-accent:#6366f1;
  --los-a-bg:rgba(99,102,241,0.12);
  --los-a-border:rgba(99,102,241,0.3);
  --los-green:#1baf7a;
  --los-g-bg:rgba(27,175,122,0.12);
  --los-g-border:rgba(27,175,122,0.3);
  --los-red:#e34948;
  --los-r-bg:rgba(227,73,72,0.12);
  --los-r-border:rgba(227,73,72,0.3);
  --los-amber:#eda100;
  --los-am-bg:rgba(237,161,0,0.12);
  --los-am-border:rgba(237,161,0,0.3);
  --los-pro:#8b5cf6;
  --los-p-bg:rgba(139,92,246,0.12);
  --los-p-border:rgba(139,92,246,0.3);
  --los-radius:8px;
  --los-font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --sidebar-w:220px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  margin:0!important;padding:0!important;
  min-height:100vh;background:var(--los-bg);
  font-family:var(--los-font);font-size:14px;line-height:1.5;
  -webkit-text-size-adjust:100%;
}
#wpadminbar{display:none!important}
html{margin-top:0!important}

/* ── App shell ───────────────────────────────────────────────── */
#lifeos-root{
  display:flex;min-height:100vh;
  background:var(--los-bg);color:var(--los-text);
  font-family:var(--los-font);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.los-sidebar{
  width:var(--sidebar-w);min-height:100vh;
  background:var(--los-s1);border-right:0.5px solid var(--los-border);
  display:flex;flex-direction:column;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:50;
  transition:transform .25s ease;
}
.los-logo{
  padding:16px 18px 14px;font-size:16px;font-weight:700;
  color:var(--los-text);border-bottom:0.5px solid var(--los-border);
  letter-spacing:-.02em;flex-shrink:0;
}
.los-logo span{color:var(--los-accent)}
.los-user-pill{
  padding:9px 16px;border-bottom:0.5px solid var(--los-border);
  font-size:11px;color:var(--los-muted);flex-shrink:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.los-nav{flex:1;padding:6px 0;overflow-y:auto}
.los-nav-section{
  padding:14px 16px 3px;font-size:10px;font-weight:600;
  color:var(--los-sub);text-transform:uppercase;letter-spacing:.08em;
}
.los-nav-btn{
  display:flex;align-items:center;gap:9px;
  padding:10px 16px;font-size:13px;color:var(--los-muted);
  cursor:pointer;border:none;background:transparent;
  width:100%;text-align:left;font-family:var(--los-font);
  transition:all .15s;white-space:nowrap;
}
.los-nav-btn i{font-size:16px;width:18px;flex-shrink:0}
.los-nav-btn:hover{background:var(--los-a-bg);color:var(--los-text)}
.los-nav-btn.active{background:var(--los-a-bg);color:var(--los-accent);font-weight:500}
.los-sidebar-footer{padding:12px 16px;border-top:0.5px solid var(--los-border);flex-shrink:0}
.los-logout-btn{
  width:100%;padding:8px 12px;font-size:12px;cursor:pointer;
  border:0.5px solid var(--los-border2);background:transparent;
  color:var(--los-muted);border-radius:var(--los-radius);
  font-family:var(--los-font);transition:all .15s;
}
.los-logout-btn:hover{background:var(--los-r-bg);color:var(--los-red);border-color:var(--los-r-border)}

/* Mobile sidebar overlay + hamburger */
.los-hamburger{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border:0.5px solid var(--los-border2);
  border-radius:var(--los-radius);background:transparent;cursor:pointer;
  color:var(--los-muted);font-size:20px;flex-shrink:0;
}
.los-sidebar-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.6);z-index:49;
}
.los-sidebar-backdrop.open{display:block}

/* ── Main area ───────────────────────────────────────────────── */
.los-main{flex:1;min-width:0;display:flex;flex-direction:column}
.los-topbar{
  padding:12px 20px;border-bottom:0.5px solid var(--los-border);
  background:var(--los-s1);position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:10px;
}
.los-topbar-title{font-size:14px;font-weight:500;color:var(--los-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.los-topbar-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.los-topbar-actions #los-mode-btn { margin-left: 4px; border-left: 1px solid var(--los-border2); padding-left: 16px; }
.los-content{padding:20px;flex:1}

/* ── Cards ───────────────────────────────────────────────────── */
.los-card{
  background:var(--los-s1);border:0.5px solid var(--los-border);
  border-radius:12px;padding:16px 18px;margin-bottom:14px;
}
.los-card-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}
.los-card-hdr h3{font-size:14px;font-weight:500;color:var(--los-text);min-width:0}

/* ── KPI grid ────────────────────────────────────────────────── */
.los-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:18px}
.los-kpi{background:var(--los-s1);border:0.5px solid var(--los-border);border-radius:var(--los-radius);padding:12px 14px}
.los-kpi-l{font-size:10px;color:var(--los-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.los-kpi-v{font-size:18px;font-weight:500;color:var(--los-text)}
.los-kpi-s{font-size:11px;color:var(--los-muted);margin-top:2px}

/* ── Inner tabs ──────────────────────────────────────────────── */
.los-tabs{display:flex;flex-wrap:wrap;border-bottom:0.5px solid var(--los-border);margin-bottom:18px;gap:0}
.los-tab{
  padding:8px 12px;font-size:12px;cursor:pointer;border:none;
  background:transparent;color:var(--los-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font-family:var(--los-font);white-space:nowrap;transition:all .15s;
}
.los-tab.on{color:var(--los-accent);border-bottom-color:var(--los-accent);font-weight:500}
.los-tab:hover:not(.on){color:var(--los-text)}
.los-pnl{display:none}.los-pnl.on{display:block}

/* ── Buttons ─────────────────────────────────────────────────── */
.los-btn{
  padding:7px 12px;font-size:12px;cursor:pointer;
  border-radius:var(--los-radius);font-family:var(--los-font);
  border:0.5px solid var(--los-border2);background:transparent;
  color:var(--los-text);transition:all .15s;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.los-btn:hover{background:var(--los-s2)}
.los-btn.p{background:var(--los-accent);color:#fff;border-color:var(--los-accent)}
.los-btn.p:hover{opacity:.9}
.los-btn.sm{padding:5px 9px;font-size:11px}
.los-btn.d{border-color:var(--los-r-border);color:var(--los-red)}
.los-btn.d:hover{background:var(--los-r-bg)}
.los-btn.ok{border-color:var(--los-g-border);color:var(--los-green)}
.los-btn.ok:hover{background:var(--los-g-bg)}
.los-btn.ghost{border-color:var(--los-border);color:var(--los-muted)}
.los-btn.ghost:hover{color:var(--los-text)}
.los-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Form fields ─────────────────────────────────────────────── */
.los-field{margin-bottom:10px}
.los-field label{font-size:12px;color:var(--los-muted);display:block;margin-bottom:3px;font-weight:500}
.los-field input,
.los-field select,
.los-field textarea{
  width:100%;background:var(--los-s2);border:0.5px solid var(--los-border2);
  color:var(--los-text);border-radius:var(--los-radius);padding:9px 12px;
  font-size:13px;font-family:var(--los-font);outline:none;transition:border-color .15s;
  -webkit-appearance:none;appearance:none;
}
.los-field input:focus,
.los-field select:focus,
.los-field textarea:focus{border-color:var(--los-accent);box-shadow:0 0 0 2px rgba(99,102,241,0.12)}
.los-field select option{background:var(--los-s2)}
.los-field textarea{resize:vertical;min-height:60px}
.los-fr{display:flex;gap:8px;flex-wrap:wrap}
.los-fr .los-field{flex:1;min-width:120px}

/* ── Item rows ───────────────────────────────────────────────── */
.los-irow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:0.5px solid var(--los-border)}
.los-irow:last-child{border-bottom:none}
.los-iname{flex:1;font-size:13px;color:var(--los-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.los-imeta{font-size:11px;color:var(--los-muted);white-space:nowrap;flex-shrink:0}
.los-iamt{font-size:13px;font-weight:500;color:var(--los-text);min-width:72px;text-align:right;white-space:nowrap;flex-shrink:0}
.los-empty{font-size:13px;color:var(--los-muted);font-style:italic;padding:.5rem 0}

/* ── Tags ────────────────────────────────────────────────────── */
.los-tag{font-size:10px;padding:2px 7px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.los-tag.success{background:var(--los-g-bg);color:var(--los-green)}
.los-tag.danger{background:var(--los-r-bg);color:var(--los-red)}
.los-tag.warning{background:var(--los-am-bg);color:var(--los-amber)}
.los-tag.accent{background:var(--los-a-bg);color:var(--los-accent)}
.los-tag.pro{background:var(--los-p-bg);color:var(--los-pro)}
.los-tag.muted{background:rgba(255,255,255,0.06);color:var(--los-muted);border:0.5px solid var(--los-border)}

/* ── Progress bars ───────────────────────────────────────────── */
.los-bar-wrap{background:rgba(255,255,255,0.06);border-radius:4px;height:6px;overflow:hidden;flex:1}
.los-bar-fill{height:100%;border-radius:4px;transition:width .35s}
.los-pr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.los-pl{font-size:12px;color:var(--los-muted);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:130px}
.los-pv{font-size:11px;color:var(--los-muted);min-width:36px;text-align:right;flex-shrink:0}

/* ── Alert strips ────────────────────────────────────────────── */
.los-strip{border-radius:10px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.los-strip.pos{background:var(--los-g-bg);border:0.5px solid var(--los-g-border)}
.los-strip.neg{background:var(--los-r-bg);border:0.5px solid var(--los-r-border)}
.los-strip.warn{background:var(--los-am-bg);border:0.5px solid var(--los-am-border)}

/* ── 2-column grid ───────────────────────────────────────────── */
.los-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}

/* ── Modal overlay ───────────────────────────────────────────── */
.los-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:1000;overflow-y:auto;
}
.los-modal{
  background:var(--los-s1);border:0.5px solid var(--los-border2);
  border-radius:16px 16px 0 0;padding:20px;width:100%;
  max-height:92vh;overflow-y:auto;
  animation:slideUp .22s ease;
}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.los-modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;position:sticky;top:-20px;background:var(--los-s1);padding:4px 0 10px;z-index:1;border-bottom:0.5px solid var(--los-border)}
.los-modal-hd h3{font-size:15px;font-weight:600;color:var(--los-text)}

/* ── Segment tabs inside modal ───────────────────────────────── */
.los-segs{
  display:flex;background:rgba(255,255,255,.04);border-radius:var(--los-radius);
  padding:3px;margin-bottom:14px;overflow-x:auto;gap:2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.los-segs::-webkit-scrollbar{display:none}
.los-seg{
  flex-shrink:0;padding:7px 12px;font-size:11px;border:none;
  background:transparent;cursor:pointer;border-radius:6px;
  font-family:var(--los-font);color:var(--los-muted);white-space:nowrap;transition:all .15s;
}
.los-seg.on{background:var(--los-s2);color:var(--los-text);font-weight:500}
.los-sec{display:none}.los-sec.on{display:block}

/* ── Project / biz cards ─────────────────────────────────────── */
.los-proj-card{
  background:var(--los-s1);border:0.5px solid var(--los-border);
  border-radius:12px;padding:14px 16px;margin-bottom:10px;
}
.los-proj-card.active{border-left:3px solid var(--los-green)}
.los-proj-card.paused{border-left:3px solid var(--los-amber)}
.los-proj-card.done{opacity:.65}
.los-proj-card.dropped{opacity:.45}

/* ── Checklist ───────────────────────────────────────────────── */
.los-chk-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--los-border)}
.los-chk-row:last-child{border-bottom:none}
.los-chk-box{
  width:20px;height:20px;border-radius:5px;border:1.5px solid var(--los-border2);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  margin-top:1px;transition:all .15s;
}
.los-chk-box.ticked{background:var(--los-green);border-color:var(--los-green)}
.los-chk-label{font-size:13px;color:var(--los-text);line-height:1.4}
.los-chk-sub{font-size:11px;color:var(--los-muted);margin-top:2px}

/* ── Stat boxes ──────────────────────────────────────────────── */
.los-stat-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:7px;margin:.75rem 0}
.los-stat-b{background:rgba(255,255,255,.04);border-radius:var(--los-radius);padding:10px 11px}
.los-stat-b .sl{font-size:10px;color:var(--los-muted)}
.los-stat-b .sv{font-size:14px;font-weight:500;color:var(--los-text)}

/* ── FIRE stages ─────────────────────────────────────────────── */
.los-fire-stage{border-radius:10px;padding:12px 14px;margin-bottom:8px;border:0.5px solid var(--los-border)}
.los-fire-stage.done{border-color:var(--los-g-border);background:var(--los-g-bg)}
.los-fire-stage.active{border-color:var(--los-a-border);background:var(--los-a-bg)}
.los-fire-stage.locked{background:rgba(255,255,255,.02)}
.los-fs-hd{display:flex;align-items:center;gap:10px;margin-bottom:.375rem;flex-wrap:wrap}
.los-fs-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
.los-fs-title{font-size:13px;font-weight:500}
.los-fs-desc{font-size:12px;line-height:1.6;margin-left:32px;color:var(--los-muted)}
.los-fs-val{font-size:12px;font-weight:500;margin-left:32px;margin-top:4px}

/* ── Filter bar ──────────────────────────────────────────────── */
.los-fb-bar{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;
  -webkit-overflow-scrolling:touch;
}
.los-fb{
  padding:5px 12px;font-size:11px;border-radius:20px;
  border:0.5px solid var(--los-border);background:transparent;
  color:var(--los-muted);cursor:pointer;font-family:var(--los-font);transition:all .15s;
  white-space:nowrap;flex-shrink:0;
}
.los-fb.on{background:var(--los-a-bg);border-color:var(--los-a-border);color:var(--los-accent)}

/* ── Compliance ──────────────────────────────────────────────── */
.los-comp-card{border-radius:12px;padding:.875rem 1rem;margin-bottom:8px;border:0.5px solid var(--los-border);background:var(--los-s1)}
.los-comp-card.overdue{border-left:3px solid var(--los-red);background:var(--los-r-bg)}
.los-comp-card.due-soon{border-left:3px solid var(--los-amber);background:var(--los-am-bg)}
.los-comp-card.comp-done{border-left:3px solid var(--los-green);opacity:.7}
.los-comp-card.na{opacity:.45}
.los-comp-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:.5rem}
.los-comp-name{font-size:14px;font-weight:500;color:var(--los-text)}
.los-comp-meta{font-size:11px;color:var(--los-muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.los-comp-actions{display:flex;gap:4px;flex-shrink:0}
.los-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}

/* Compliance calendar */
.los-cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-bottom:1rem}
.los-cal-month{background:var(--los-s1);border:0.5px solid var(--los-border);border-radius:10px;padding:.6rem .75rem;cursor:pointer;transition:border-color .15s}
.los-cal-month:hover{border-color:var(--los-border2)}
.los-cal-month.has-items{border-color:var(--los-a-border)}
.los-cal-month.curr{border-color:var(--los-am-border);background:var(--los-am-bg)}
.los-cal-month.has-overdue{border-color:var(--los-r-border);background:var(--los-r-bg)}
.los-cal-mname{font-size:12px;font-weight:500;color:var(--los-text);margin-bottom:2px}
.los-cal-count{font-size:10px;color:var(--los-muted)}
.los-cal-dots{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap}

/* Timeline */
.los-tl-yr{font-size:13px;font-weight:500;color:var(--los-text);margin:1rem 0 .5rem;padding:6px 12px;background:var(--los-s1);border-radius:var(--los-radius);border:0.5px solid var(--los-border)}
.los-tl-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--los-border)}
.los-tl-item:last-child{border-bottom:none}
.los-tl-dot-wrap{display:flex;flex-direction:column;align-items:center;padding-top:3px}
.los-tl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.los-tl-line{width:1px;flex:1;background:var(--los-border);margin-top:4px;min-height:20px}
.los-tl-content{flex:1;min-width:0}
.los-tl-name{font-size:13px;font-weight:500;color:var(--los-text)}
.los-tl-info{font-size:11px;color:var(--los-muted);margin-top:2px}
.los-status-chip{font-size:10px;padding:2px 8px;border-radius:20px;white-space:nowrap}
.los-month-hdr{font-size:11px;font-weight:600;color:var(--los-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;display:flex;align-items:center;gap:8px}

/* ── Inline add row ──────────────────────────────────────────── */
.los-inline-add{display:flex;gap:6px;margin-top:8px;align-items:flex-end;flex-wrap:wrap}
.los-inline-add input{
  margin-bottom:0;flex:1;min-width:120px;
  background:var(--los-s2);border:0.5px solid var(--los-border2);
  color:var(--los-text);border-radius:var(--los-radius);
  padding:8px 10px;font-size:12px;font-family:var(--los-font);outline:none;
}
.los-inline-add input.narrow{max-width:110px}

/* ── Download bar ────────────────────────────────────────────── */
.los-dl-bar{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;
  padding:12px 14px;background:var(--los-s1);
  border:0.5px solid var(--los-border);border-radius:var(--los-radius);align-items:center;
}
.los-dl-bar span{font-size:12px;color:var(--los-muted)}

/* ── Table ───────────────────────────────────────────────────── */
.los-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.los-tbl{width:100%;border-collapse:collapse;font-size:12px}
.los-tbl th{text-align:left;padding:8px 10px;font-weight:500;color:var(--los-muted);border-bottom:0.5px solid var(--los-border);white-space:nowrap}
.los-tbl td{padding:8px 10px;color:var(--los-text);border-bottom:0.5px solid var(--los-border)}
.los-tbl tr:last-child td{border-bottom:none}

/* ── Divider ─────────────────────────────────────────────────── */
.los-divider{border:none;border-top:0.5px solid var(--los-border);margin:.875rem 0}

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES — Standalone full-screen
═══════════════════════════════════════════════════════════════ */
.los-auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1.5rem 1rem;
  background:#0f1117;
  background-image:radial-gradient(ellipse at 50% 35%,rgba(99,102,241,0.08) 0%,transparent 65%);
}
.los-auth-card{
  background:#1a1d27;border:0.5px solid rgba(255,255,255,0.1);
  border-radius:16px;padding:36px 32px;width:100%;max-width:420px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 0 0.5px rgba(99,102,241,0.12);
}
.los-auth-logo{font-size:22px;font-weight:700;color:#e8e6e0;margin-bottom:4px;letter-spacing:-.02em}
.los-auth-logo span{color:#6366f1}
.los-auth-sub{font-size:13px;color:#5a5854;margin-bottom:28px}
.los-field{margin-bottom:14px}
.los-field label{font-size:12px;color:#8b8985;display:block;margin-bottom:5px;font-weight:500}
.los-field input{
  width:100%;background:#0f1117;border:0.5px solid rgba(255,255,255,0.12);
  color:#e8e6e0;border-radius:8px;padding:12px 14px;
  font-size:15px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.los-field input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
.los-field input::placeholder{color:#3a3835}
.los-auth-btn{
  width:100%;padding:14px;font-size:15px;font-weight:600;cursor:pointer;
  border:none;background:#6366f1;color:#fff;border-radius:10px;
  font-family:inherit;margin-top:6px;margin-bottom:16px;
  transition:opacity .15s,transform .1s;letter-spacing:.01em;
  -webkit-appearance:none;
}
.los-auth-btn:hover:not(:disabled){opacity:.92;transform:translateY(-1px)}
.los-auth-btn:active:not(:disabled){transform:translateY(0)}
.los-auth-btn:disabled{opacity:.5;cursor:not-allowed}
.los-auth-links{font-size:13px;color:#5a5854;text-align:center}
.los-auth-links a{color:#6366f1;text-decoration:none}
.los-auth-links a:hover{text-decoration:underline}
.los-msg{font-size:13px;padding:12px 14px;border-radius:8px;margin-bottom:16px;line-height:1.5}
.los-msg-ok{background:rgba(27,175,122,0.12);color:#1baf7a;border:0.5px solid rgba(27,175,122,0.3)}
.los-msg-error{background:rgba(227,73,72,0.12);color:#e34948;border:0.5px solid rgba(227,73,72,0.3)}

/* ── Gate pages ──────────────────────────────────────────────── */
.los-gate{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem;background:#0f1117;
}
.los-gate > *{
  max-width:460px;background:#1a1d27;border-radius:14px;
  padding:32px 24px;border:0.5px solid rgba(255,255,255,0.08);
}
.los-gate p{color:#8b8985;font-size:14px;margin-top:8px}
.los-gate a{color:#6366f1;text-decoration:none}
.los-gate-warn h3{color:#eda100;margin-bottom:8px;font-size:17px}
.los-gate-error h3{color:#e34948;margin-bottom:8px;font-size:17px}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 900px)
═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  :root{--sidebar-w:200px}
  .los-content{padding:16px}
  .los-kpis{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 680px)
   Sidebar becomes a slide-over drawer, hamburger menu shows
═══════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* Shell: stacked, sidebar hidden off-screen */
  #lifeos-root{flex-direction:column}

  .los-sidebar{
    position:fixed;top:0;left:0;height:100vh;
    width:280px;max-width:80vw;
    transform:translateX(-100%);
    box-shadow:4px 0 24px rgba(0,0,0,0.4);
    transition:transform .25s ease;
    z-index:50;
  }
  .los-sidebar.open{transform:translateX(0)}
  .los-hamburger{display:flex}

  /* Topbar */
  .los-topbar{padding:10px 14px}
  .los-topbar-title{font-size:13px}
  .los-topbar-actions .los-btn:not(.los-hamburger){display:none}

  /* Content */
  .los-content{padding:12px}

  /* KPI grid — 2 columns on mobile */
  .los-kpis{grid-template-columns:1fr 1fr;gap:7px}
  .los-kpi-v{font-size:16px}

  /* 2-col grid → single column */
  .los-g2{grid-template-columns:1fr}

  /* Stat boxes → 2 cols */
  .los-stat-g{grid-template-columns:1fr 1fr}

  /* Form rows → single column */
  .los-fr{flex-direction:column;gap:0}
  .los-fr .los-field{min-width:100%;flex:none}

  /* Cards */
  .los-card{padding:14px}
  .los-card-hdr{flex-wrap:wrap;gap:8px}

  /* Modal — full-width bottom sheet */
  .los-overlay{align-items:flex-end;padding:0}
  .los-modal{border-radius:20px 20px 0 0;max-height:90vh;padding:16px 14px 24px}
  .los-modal-hd{top:-16px;padding:2px 0 10px}

  /* Segment bar — scrollable */
  .los-segs{flex-wrap:nowrap;overflow-x:auto}

  /* Item rows — allow wrapping of amounts */
  .los-irow{flex-wrap:wrap;gap:5px}
  .los-iamt{min-width:auto;font-size:12px}
  .los-imeta{font-size:10px}

  /* Filter bars — horizontal scroll */
  .los-fb-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .los-fb-bar::-webkit-scrollbar{display:none}

  /* Progress bars */
  .los-pr{flex-wrap:nowrap}
  .los-pl{width:100px;font-size:11px}

  /* Inline add rows */
  .los-inline-add{flex-direction:column;gap:8px}
  .los-inline-add input,.los-inline-add input.narrow{max-width:100%;width:100%}
  .los-inline-add .los-btn{width:100%;justify-content:center}

  /* Strips */
  .los-strip{flex-direction:column;align-items:flex-start;gap:8px}

  /* Calendar grid — 3 cols */
  .los-cal-grid{grid-template-columns:repeat(3,1fr);gap:6px}

  /* Timeline */
  .los-tl-item{gap:7px}

  /* Auth card */
  .los-auth-card{padding:28px 20px;border-radius:16px}
  .los-field input{font-size:16px;padding:13px 14px} /* 16px prevents iOS zoom */
  .los-auth-btn{font-size:16px;padding:14px}

  /* Compliance cards */
  .los-comp-hd{flex-wrap:wrap;gap:6px}
  .los-comp-actions{width:100%;justify-content:flex-end}

  /* Download bar */
  .los-dl-bar{flex-direction:column;align-items:flex-start}
  .los-dl-bar .los-btn{width:100%;justify-content:center}

  /* Tables — horizontal scroll */
  .los-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* proj/biz card actions */
  .los-proj-card > div:first-child{flex-wrap:wrap}

  /* Nav sections visible as small headers in drawer */
  .los-nav-section{display:block}
  .los-nav-btn{padding:10px 16px;font-size:13px}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤ 380px)
═══════════════════════════════════════════════════════════════ */
@media (max-width:380px){
  .los-kpis{grid-template-columns:1fr 1fr}
  .los-kpi{padding:10px 11px}
  .los-kpi-v{font-size:15px}
  .los-stat-g{grid-template-columns:1fr 1fr}
  .los-cal-grid{grid-template-columns:repeat(3,1fr)}
  .los-auth-card{padding:24px 16px}
  .los-content{padding:10px}
  .los-card{padding:12px}
  .los-fs-desc,.los-fs-val{margin-left:0;margin-top:4px}
}

/* ─── Desktop — modal centers (not bottom sheet) ─────────────── */
@media (min-width:681px){
  .los-overlay{align-items:center;padding:1.5rem 1rem}
  .los-modal{border-radius:16px;max-width:600px;max-height:90vh}
  .los-modal-hd{position:sticky}
}

/* ─── Touch targets — bigger on mobile ──────────────────────── */
@media (hover:none) and (pointer:coarse){
  .los-btn{min-height:38px}
  .los-btn.sm{min-height:32px}
  .los-nav-btn{min-height:42px}
  .los-chk-box{width:22px;height:22px}
  .los-fb{min-height:30px}
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — toggled via html.los-light
═══════════════════════════════════════════════════════════════ */
html.los-light {
  --los-bg:#f4f5f7;
  --los-s1:#ffffff;
  --los-s2:#f0f1f4;
  --los-s0:#e8e9ec;
  --los-border:rgba(0,0,0,0.08);
  --los-border2:rgba(0,0,0,0.14);
  --los-text:#1a1d27;
  --los-muted:#6b6f7a;
  --los-sub:#9ca0aa;
  --los-accent:#5254d4;
  --los-a-bg:rgba(82,84,212,0.08);
  --los-a-border:rgba(82,84,212,0.25);
  --los-green:#0e9563;
  --los-g-bg:rgba(14,149,99,0.08);
  --los-g-border:rgba(14,149,99,0.25);
  --los-red:#d63031;
  --los-r-bg:rgba(214,48,49,0.08);
  --los-r-border:rgba(214,48,49,0.25);
  --los-amber:#c67c00;
  --los-am-bg:rgba(198,124,0,0.08);
  --los-am-border:rgba(198,124,0,0.25);
  --los-pro:#6d28d9;
  --los-p-bg:rgba(109,40,217,0.08);
  --los-p-border:rgba(109,40,217,0.25);
}

/* Light mode overrides */
html.los-light body { background:#f4f5f7; }
html.los-light #lifeos-root { background:#f4f5f7; color:#1a1d27; }
html.los-light .los-sidebar { background:#fff; box-shadow:1px 0 0 rgba(0,0,0,0.06); }
html.los-light .los-topbar { background:#fff; }
html.los-light .los-card { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
html.los-light .los-kpi { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
html.los-light .los-proj-card { background:#fff; }
html.los-light .los-comp-card { background:#fff; }
html.los-light .los-auth-wrap { background:#f4f5f7; background-image:radial-gradient(ellipse at 50% 35%,rgba(82,84,212,0.06) 0%,transparent 65%); }
html.los-light .los-auth-card { background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.08); }
html.los-light .los-auth-logo { color:#1a1d27; }
html.los-light .los-field input,
html.los-light .los-field select,
html.los-light .los-field textarea { background:#f8f9fb; border-color:rgba(0,0,0,0.14); color:#1a1d27; }
html.los-light .los-field input::placeholder { color:#b0b4bc; }
html.los-light .los-modal { background:#fff; }
html.los-light .los-modal-hd { background:#fff; }
html.los-light .los-overlay { background:rgba(0,0,0,0.3); }
html.los-light .los-nav-btn:hover { background:rgba(82,84,212,0.06); }
html.los-light .los-nav-btn.active { background:rgba(82,84,212,0.08); }
html.los-light .los-logout-btn:hover { background:rgba(214,48,49,0.06); }
html.los-light .los-sidebar-footer { border-top-color:rgba(0,0,0,0.08); }
html.los-light .los-user-pill { border-bottom-color:rgba(0,0,0,0.08); }
html.los-light .los-logo { border-bottom-color:rgba(0,0,0,0.08); }
html.los-light .los-topbar { border-bottom-color:rgba(0,0,0,0.08); }
html.los-light .los-irow { border-bottom-color:rgba(0,0,0,0.06); }
html.los-light .los-chk-row { border-bottom-color:rgba(0,0,0,0.06); }
html.los-light .los-chk-box { border-color:rgba(0,0,0,0.2); }
html.los-light .los-bar-wrap { background:rgba(0,0,0,0.08); }
html.los-light .los-stat-b { background:rgba(0,0,0,0.04); }
html.los-light .los-tl-yr { background:#fff; }
html.los-light .los-fire-stage.locked { background:rgba(0,0,0,0.02); }
html.los-light .los-inline-add input { background:#f8f9fb; border-color:rgba(0,0,0,0.14); color:#1a1d27; }
html.los-light .los-segs { background:rgba(0,0,0,0.04); }
html.los-light .los-seg.on { background:#fff; }
html.los-light .los-cal-month { background:#fff; }
html.los-light .los-tag.muted { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); }
html.los-light .los-strip.pos { background:rgba(14,149,99,0.08); }
html.los-light .los-strip.neg { background:rgba(214,48,49,0.08); }
html.los-light .los-strip.warn { background:rgba(198,124,0,0.08); }
html.los-light .los-comp-card.overdue { background:rgba(214,48,49,0.06); }
html.los-light .los-comp-card.due-soon { background:rgba(198,124,0,0.06); }
html.los-light .los-dl-bar { background:#fff; }
html.los-light .los-gate > * { background:#fff; }
html.los-light .los-sidebar-backdrop { background:rgba(0,0,0,0.35); }

/* Light mode auth page fields */
html.los-light .los-auth-wrap .los-field input { background:#f8f9fb; color:#1a1d27; border-color:rgba(0,0,0,0.14); }
html.los-light .los-auth-wrap .los-field input::placeholder { color:#c0c4cc; }
html.los-light .los-auth-wrap .los-auth-sub { color:#888; }
html.los-light .los-auth-wrap .los-auth-links { color:#888; }
html.los-light .los-auth-wrap .los-msg-ok { background:rgba(14,149,99,0.1); }
html.los-light .los-auth-wrap .los-msg-error { background:rgba(214,48,49,0.1); }

/* Smooth theme transition */
#lifeos-root, .los-sidebar, .los-card, .los-modal, .los-topbar,
.los-kpi, .los-proj-card, .los-comp-card, .los-auth-card, .los-auth-wrap,
.los-field input, .los-field select, .los-field textarea {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* Theme button sizing */
#los-theme-btn { width:36px; height:32px; padding:0; justify-content:center; flex-shrink:0; }
#los-theme-btn i { font-size:16px; }

/* ─── Toast notification ─────────────────────────────────────── */
@keyframes losToastIn {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ─── Spinner for save button loading state ─────────────────── */
@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ─── Edit button — slightly smaller on mobile ───────────────── */
@media (max-width:680px) {
  .los-irow .los-btn.sm { padding:4px 7px; font-size:11px; }
  /* Stack action buttons below item name on very small rows */
  .los-irow { flex-wrap:wrap; }
  .los-irow > div[style*="display:flex"] { width:100%; justify-content:flex-end; }
}

/* ─── Light mode toast ───────────────────────────────────────── */
html.los-light #los-toast {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ─── EMI cards ──────────────────────────────────────────────── */
.los-emi-card {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--los-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color .15s;
}
.los-emi-card:hover { border-color: var(--los-border2); }
html.los-light .los-emi-card { background: var(--los-s2); }

/* ─── Remaining days badge on EMI ────────────────────────────── */
.los-emi-card .los-stat-g { gap: 6px; }
.los-emi-card .los-stat-b { padding: 8px 10px; }
.los-emi-card .los-stat-b .sl { font-size: 9px; }
.los-emi-card .los-stat-b .sv { font-size: 13px; }

@media (max-width: 680px) {
  .los-emi-card .los-stat-g { grid-template-columns: 1fr 1fr; }
}

/* ─── Theme toggle slider ─────────────────────────────────────── */
.los-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--los-border2);
  border-radius: 20px;
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  color: var(--los-muted);
  font-size: 12px;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}
.los-theme-toggle:hover { border-color: var(--los-accent); color: var(--los-text); }
.los-theme-track {
  position: relative;
  width: 28px;
  height: 16px;
  background: var(--los-border2);
  border-radius: 8px;
  flex-shrink: 0;
  transition: background .2s;
}
.los-theme-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--los-muted);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.los-theme-toggle.los-theme-on .los-theme-track { background: var(--los-accent); }
.los-theme-toggle.los-theme-on .los-theme-thumb { transform: translateX(12px); background: #fff; }
.los-theme-toggle.los-theme-on .los-theme-lbl { color: var(--los-accent); }

/* ─── Delete inline confirm ───────────────────────────────────── */
#los-del-confirm button:hover { opacity: 0.85; }

/* ─── Text action buttons (edit/delete) ─────────────────────── */
.los-btn.ghost.sm { min-width: 44px; }
.los-btn.d.sm { min-width: 36px; }