/* ═══════════════════════════════════════════════════════
   LifeOS — shared.css
   Used by: hub.html, habits.html, tools.html
   Contains: themes, reset, topbar base, animations, auth, toast, safe area
═══════════════════════════════════════════════════════ */

/* ─── THEMES ─── */
[data-theme="wincity"]{
  --bg:#060408;--bg1:#09070e;--bg2:#0d0b16;--bg3:#13101e;--bg4:#191526;--bg5:#201c30;
  --brd:rgba(195,158,40,.11);--brd2:rgba(195,158,40,.24);--brd3:rgba(195,158,40,.44);
  --txt:#fff8ec;--txt2:#dbb96e;--txt3:#9c8654;
  --gold:#c39e28;--gold2:#e0c060;--golddim:rgba(195,158,40,.10);--goldglow:rgba(195,158,40,.35);--goldfull:#c39e28;
  --gr:#34c77a;--grdim:rgba(52,199,122,.10);--or:#d08030;--ordim:rgba(208,128,48,.10);
  --re:#e05050;--redim:rgba(224,80,80,.10);--te:#38a8d0;--tedim:rgba(56,168,208,.10);
  --hi:#e0c060;--hi2:#c4a86a;--hi3:rgba(195,158,40,.45);--hi4:rgba(195,158,40,.08);
  --s1:#0d0b16;--s2:#181428;--s3:#201c30;--s4:#2a2438;
  --topbar-bg:rgba(6,4,8,.82);
  --shadow:0 4px 16px rgba(0,0,0,.6),0 8px 32px rgba(0,0,0,.3);
  --shadow-lg:0 12px 48px rgba(0,0,0,.7),0 4px 16px rgba(0,0,0,.5);
  --row1:transparent;--row2:rgba(255,255,255,.018);--rowh:rgba(195,158,40,.06);--sumrow:rgba(195,158,40,.05);
  --icon-size:72px;--icon-r:18px;
  --glass-bg:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.12);--glass-shine:rgba(255,255,255,.08);
  --fs:13px;--fsm:12px;--fss:11px;
}
[data-theme="void"]{
  --bg:#000;--bg1:#060606;--bg2:#0a0a0a;--bg3:#0f0f0f;--bg4:#161616;--bg5:#1a1a1a;
  --brd:rgba(0,220,160,.08);--brd2:rgba(0,220,160,.18);--brd3:rgba(0,220,160,.34);
  --txt:#edfff9;--txt2:#7acfbd;--txt3:#4a8878;
  --gold:#00dca0;--gold2:#00ffc0;--golddim:rgba(0,220,160,.08);--goldglow:rgba(0,220,160,.3);--goldfull:#00dca0;
  --gr:#00dca0;--grdim:rgba(0,220,160,.08);--or:#ffd080;--ordim:rgba(255,208,128,.08);
  --re:#ff5060;--redim:rgba(255,80,96,.08);--te:#60c0ff;--tedim:rgba(96,192,255,.08);
  --hi:#00ffc0;--hi2:#00dca0;--hi3:rgba(0,220,160,.4);--hi4:rgba(0,220,160,.07);
  --s1:#060606;--s2:#0d0d0d;--s3:#141414;--s4:#1a1a1a;
  --topbar-bg:rgba(0,0,0,.88);
  --shadow:0 4px 16px rgba(0,0,0,.8),0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,.9),0 4px 16px rgba(0,0,0,.7);
  --row1:transparent;--row2:rgba(255,255,255,.02);--rowh:rgba(0,220,160,.06);--sumrow:rgba(0,220,160,.04);
  --icon-size:72px;--icon-r:18px;
  --glass-bg:rgba(0,220,160,.03);--glass-border:rgba(0,220,160,.15);--glass-shine:rgba(0,220,160,.06);
  --fs:13px;--fsm:12px;--fss:11px;
}
[data-theme="light"]{
  --bg:#f2ece0;--bg1:#ede6d8;--bg2:#e6dece;--bg3:#ddd5c4;--bg4:#d2c8b4;--bg5:#c8bda8;
  --brd:rgba(0,0,0,.09);--brd2:rgba(0,0,0,.16);--brd3:rgba(0,0,0,.26);
  --txt:#1a1510;--txt2:#5a4a30;--txt3:#9a8a70;
  --gold:#a07a0a;--gold2:#c09820;--golddim:rgba(160,122,10,.10);--goldglow:rgba(160,122,10,.3);--goldfull:#a07a0a;
  --gr:#1a8040;--grdim:rgba(26,128,64,.10);--or:#b06010;--ordim:rgba(176,96,16,.10);
  --re:#b02020;--redim:rgba(176,32,32,.10);--te:#006090;--tedim:rgba(0,96,144,.10);
  --hi:#a07a0a;--hi2:#7a5a08;--hi3:rgba(160,122,10,.35);--hi4:rgba(160,122,10,.08);
  --s1:#ede6d8;--s2:#e6dece;--s3:#ddd5c4;--s4:#d2c8b4;
  --topbar-bg:rgba(242,236,224,.88);
  --shadow:0 2px 12px rgba(0,0,0,.12),0 4px 24px rgba(0,0,0,.08);
  --shadow-lg:0 8px 40px rgba(0,0,0,.16),0 2px 12px rgba(0,0,0,.1);
  --row1:transparent;--row2:rgba(0,0,0,.02);--rowh:rgba(160,122,10,.05);--sumrow:rgba(160,122,10,.04);
  --icon-size:72px;--icon-r:18px;
  --glass-bg:rgba(255,255,255,.55);--glass-border:rgba(255,255,255,.75);--glass-shine:rgba(255,255,255,.4);
  --fs:13px;--fsm:12px;--fss:11px;
}

/* ─── RESET ─── */
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:var(--fs);}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);color:var(--txt);
  min-height:100vh;overflow-x:hidden;
  transition:background .3s,color .3s;
}
/* grain texture */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}
/* dot grid */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,var(--brd) 1px,transparent 1px);
  background-size:32px 32px;opacity:.5;
}
button{cursor:pointer;border:none;background:none;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}

/* ─── TOPBAR (shared base — each app can extend) ─── */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:56px;
  background:var(--topbar-bg);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid var(--brd);
}
.topbar::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold2) 25%,var(--gold) 75%,transparent);
  opacity:.6;
}
.tbr{display:flex;align-items:center;gap:7px;}
.tbbtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--brd);background:var(--s1);color:var(--txt3);font-size:14px;display:flex;align-items:center;justify-content:center;transition:.18s;}
.tbbtn:hover{border-color:var(--hi3);color:var(--hi);background:var(--s2);}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;color:#000;cursor:pointer;letter-spacing:.5px;}

/* Theme picker */
.theme-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--brd);background:var(--s1);display:flex;align-items:center;justify-content:center;transition:.18s;cursor:pointer;position:relative;}
.theme-btn:hover{border-color:var(--hi3);background:var(--s2);}
.theme-btn svg{width:15px;height:15px;stroke:var(--txt2);fill:none;stroke-width:1.8;transition:.18s;}
.theme-btn:hover svg{stroke:var(--hi);}
.theme-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--s1);border:1px solid var(--brd2);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:160px;box-shadow:var(--shadow-lg);z-index:300;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.2s;}
.theme-dropdown.open{opacity:1;pointer-events:all;transform:none;}
.theme-opt{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:.15s;font-size:14px;color:var(--txt2);font-weight:500;}
.theme-opt:hover{background:var(--hi4);color:var(--hi);}
.theme-opt.active{background:var(--hi4);color:var(--hi);}
.theme-swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;}

/* Back nav link (habits/tools apps) */
.back-link{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt3);font-weight:600;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif;transition:.15s;padding:6px 10px;border-radius:8px;border:1px solid transparent;}
.back-link:hover{color:var(--hi);border-color:var(--brd);background:var(--hi4);}
.back-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}

/* Overlay backdrop height fix for Safari keyboard */
.ovl,.mod-ov,.mbg{height:100dvh;}

/* ─── KEYFRAMES ─── */
@keyframes fu{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes fuL{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
@keyframes shimmer{0%,100%{opacity:.6;transform:scaleX(.8);}50%{opacity:1;transform:scaleX(1);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes jig{from{transform:rotate(-2deg) scale(1.0);}to{transform:rotate(2deg) scale(1.02);}}

/* ─── AUTH OVERLAY ─── */
.auth-ov{position:fixed;inset:0;z-index:9998;background:var(--bg);display:none;align-items:center;justify-content:center;padding:24px;}
.auth-ov.show{display:flex;}
.auth-box{background:var(--s1);border:1px solid var(--brd2);border-radius:22px;padding:32px 28px;width:100%;max-width:380px;text-align:center;}
.auth-logo{margin-bottom:20px;}
.auth-ttl{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:26px;color:var(--txt);margin-bottom:6px;letter-spacing:-.4px;}
.auth-sub{font-size:12px;color:var(--txt3);margin-bottom:26px;font-family:'JetBrains Mono',monospace;letter-spacing:.08em;}
.auth-input{width:100%;padding:13px 16px;background:var(--s2);border:1px solid var(--brd);border-radius:12px;color:var(--txt);font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;outline:none;transition:.2s;margin-bottom:12px;}
.auth-input:focus{border-color:var(--hi3);box-shadow:0 0 0 3px var(--hi4);}
.auth-input::placeholder{color:var(--txt3);}
.auth-btn{width:100%;padding:13px;border-radius:12px;background:var(--gold);color:#000;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;transition:.15s;margin-bottom:10px;}
.auth-btn:hover{filter:brightness(1.08);}
.auth-btn:disabled{opacity:.5;cursor:not-allowed;}
.auth-msg{font-size:12px;color:var(--txt3);font-family:'JetBrains Mono',monospace;min-height:18px;letter-spacing:.04em;}
.auth-msg.ok{color:var(--gr);}.auth-msg.err{color:var(--re);}
.auth-spinner{display:none;width:20px;height:20px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto;}
.signout-btn{font-size:11px;color:var(--txt3);cursor:pointer;font-family:'JetBrains Mono',monospace;background:none;border:1px solid var(--brd);border-radius:6px;padding:4px 10px;transition:.15s;letter-spacing:.04em;}
.signout-btn:hover{border-color:var(--brd2);color:var(--txt2);}

/* ─── TOAST ─── */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(64px + env(safe-area-inset-top));
  background:var(--s3);border:1px solid var(--brd2);border-radius:10px;
  padding:10px 18px;font-size:13px;font-weight:600;color:var(--txt);
  z-index:9999;pointer-events:none;white-space:nowrap;
  animation:fu .2s ease both;
}

/* ─── SAFE AREA (iOS Dynamic Island / home indicator) ─── */
.tv-panel{padding-top:env(safe-area-inset-top);}
.habits-panel{padding-top:env(safe-area-inset-top);}
.jig-hint{bottom:calc(28px + env(safe-area-inset-bottom));}
.habits-panel .ht-freq-modal{padding-bottom:env(safe-area-inset-bottom);}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--brd3);}