:root{
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --blue:#4fa3f7; --blue2:#7dd3fc; --purple:#a050ff; --purple-light:#c084fc;
  --teal:#00c8b4; --orange:#ff9500; --red:#ff5252; --red2:#f87171; --green:#4ade80;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--sans); color:#fff; background:#000;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
  position:fixed; inset:0; overflow:hidden;
}
button,input,select,textarea{font-family:inherit; color:inherit;}
button{cursor:pointer;}
#root{height:100%; width:100%;}

/* ---------- generic screen shell ---------- */
.app-shell{ height:100%; display:flex; flex-direction:column; max-width:520px; margin:0 auto; position:relative; }
.topbar{
  flex:none; display:flex; align-items:center; justify-content:center; position:relative;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 12px; min-height:40px; box-sizing:border-box;
}
.topbar .side{ position:absolute; left:14px; bottom:12px; background:none; border:none; padding:4px; font-size:17px; opacity:.75; }
.topbar .side.right{ left:auto; right:10px; }
.topbar .side.text{ font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px; }
.topbar h1{ font-size:15px; font-weight:700; margin:0; }

.content{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 14px 24px; }
.content .stack{ display:flex; flex-direction:column; gap:12px; }

.tabbar{
  flex:none; display:flex; padding:6px 4px calc(env(safe-area-inset-bottom,0px) + 6px);
  border-top:1px solid rgba(255,255,255,.08); background:rgba(8,8,14,.86); backdrop-filter:blur(10px);
}
.tabbar button{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:9.5px; color:rgba(255,255,255,.4); padding:4px 0;
}
.tabbar button .ic{ font-size:19px; filter:grayscale(1) brightness(1.5); opacity:.6; }
.tabbar button.active{ color:var(--purple-light); }
.tabbar button.active .ic{ filter:none; opacity:1; }

/* ---------- cards / shared bits ---------- */
.card{ border-radius:16px; padding:14px 16px; }
.card-title{ font-size:12.5px; font-weight:700; color:#fff; }
.card-sub{ font-size:10px; color:rgba(255,255,255,.5); margin-top:2px; }
.section-label{ font-size:11px; font-weight:700; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.06em; margin:2px 2px 0; }

.diary-card{
  background: repeating-linear-gradient(180deg, transparent 0px, transparent 26px, rgba(154,120,66,.22) 27px), linear-gradient(135deg, #fbf3dc, #efdfb4);
  border: 1px solid #c9a86a; border-left: 10px solid #8a5a34;
  border-radius: 8px 16px 16px 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.3);
}
.diary-title{ font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 700; color: #5c3a1e; letter-spacing:.01em; }
.diary-empty{ margin-top:10px; font-size:12px; font-style:italic; color:rgba(90,62,38,.7); font-family: Georgia, serif; line-height:1.5; }
.diary-entries{ margin-top:10px; display:flex; flex-direction:column; gap:10px; max-height:200px; overflow-y:auto; }
.diary-entry{ padding-bottom:8px; border-bottom:1px dashed rgba(90,62,38,.28); }
.diary-entry:last-child{ border-bottom:none; padding-bottom:0; }
.diary-entry-time{ font-size:9.5px; font-weight:700; color:rgba(90,62,38,.6); text-transform:uppercase; letter-spacing:.06em; }
.diary-entry-text{ margin-top:2px; font-size:13px; font-family: Georgia, 'Times New Roman', serif; color:#3d2a18; line-height:1.55; white-space:pre-wrap; }
.diary-add-btn{
  margin-top:12px; display:inline-block; background:#8a5a34; color:#fdf3dd; border:none; border-radius:20px;
  padding:8px 16px; font-size:12px; font-weight:700; font-family: Georgia, serif; cursor:pointer;
}
.dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.chip-btn{
  border:none; font-size:10px; font-weight:700; padding:6px 11px; border-radius:20px; white-space:nowrap;
}
.stat-row{ display:flex; margin-top:10px; }
.stat{ flex:1; text-align:center; }
.stat b{ display:block; font-size:22px; font-weight:700; font-family:var(--mono); }
.stat span{ font-size:8.5px; color:rgba(255,255,255,.42); letter-spacing:.08em; }
.empty{ text-align:center; padding:40px 20px; color:rgba(255,255,255,.5); }
.empty .big{ font-size:36px; display:block; margin-bottom:10px; }
.empty b{ display:block; color:#fff; font-size:15px; margin-bottom:6px; }

/* ---------- Countdown tab ---------- */
[data-tab="countdown"] .topbar,[data-tab="countdown"] .content{ background:#0b0f2a; }
.ring-card{ display:flex; flex-direction:column; align-items:center; padding:18px 0 14px; }
.ring-wrap{ position:relative; width:210px; height:210px; }
.ring-wrap svg{ transform:rotate(-90deg); }
.ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ring-center .lbl{ font-size:12px; color:rgba(255,255,255,.6); }
.ring-center .age{ font-size:18px; font-weight:700; margin-top:2px; }
.ring-center .pct{ font-family:var(--mono); font-weight:800; color:var(--blue); font-size:50px; line-height:1; margin-top:4px; }
.ring-center .pct span{ font-size:24px; }
.ring-center .sub{ font-size:12px; color:rgba(255,255,255,.45); margin-top:2px; }
.goal-age-row{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:10px; }
.goal-age{ font-size:12px; font-weight:600; }
.battery{ display:flex; align-items:center; gap:3px; }
.battery-body{ width:34px; height:15px; border:1.5px solid rgba(255,255,255,.4); border-radius:3px; padding:2px; box-sizing:border-box; }
.battery-track{ position:relative; width:100%; height:100%; background:rgba(255,255,255,.08); border-radius:1px; overflow:hidden; }
.battery-fill{ position:absolute; top:0; left:0; bottom:0; border-radius:1px; transition:width .3s; }
.battery-cap{ width:2.5px; height:6px; border-radius:0 2px 2px 0; }
.battery-label{ font-family:var(--mono); font-size:10.5px; font-weight:700; margin-left:1px; }

.odo-label{ font-family:var(--mono); font-size:10px; font-weight:600; color:rgba(255,255,255,.5); letter-spacing:.16em; text-align:center; padding-top:2px; }
.odo-dial{ display:flex; justify-content:center; gap:3px; margin-top:10px; }
.odo-digit{
  width:34px; height:48px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:27px; line-height:1; color:#f5f1e6;
  background:linear-gradient(180deg,#2a2a2a 0%,#0c0c0c 55%,#000 100%);
  border-radius:4px; position:relative; overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.05);
  font-variant-numeric:tabular-nums;
}
.odo-digit::before{
  content:""; position:absolute; inset:0 0 55% 0;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  pointer-events:none;
}
.odo-digit::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(0,0,0,.6); transform:translateY(-.5px);
}
@keyframes odoFlip{
  0%{ transform:translateY(-60%); opacity:.15; }
  100%{ transform:translateY(0); opacity:1; }
}
.odo-digit.flip{ animation:odoFlip .25s cubic-bezier(.2,.8,.3,1); }
@media (prefers-reduced-motion: reduce){
  .odo-digit.flip{ animation:none; }
}

.sleep-toggle-btn{
  width:54px; height:54px; border-radius:50%; border:none; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:8.5px; line-height:1.15; letter-spacing:.01em;
  background:radial-gradient(circle at 35% 25%, #7c6bf2, #3a2f8f 60%, #1b1440 100%);
  box-shadow:0 0 0 3px rgba(124,107,242,.25), 0 6px 16px rgba(58,47,143,.55),
    inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.18);
  animation:sleepPulse 2.4s ease-in-out infinite;
}
.sleep-toggle-btn.active{
  background:radial-gradient(circle at 35% 25%, #ffd873, #fb923c 60%, #b45309 100%);
  box-shadow:0 0 0 3px rgba(251,146,60,.25), 0 6px 16px rgba(180,83,9,.55),
    inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.25);
  animation:none;
}
.sleep-toggle-icon{ font-size:18px; line-height:1; }
.sleep-toggle-label{ margin-top:2px; }
@keyframes sleepPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(124,107,242,.25), 0 6px 16px rgba(58,47,143,.55),
    inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.18); }
  50%{ box-shadow:0 0 0 7px rgba(124,107,242,.12), 0 6px 20px rgba(58,47,143,.65),
    inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.18); }
}
@media (prefers-reduced-motion: reduce){
  .sleep-toggle-btn{ animation:none; }
}
.activity-round-btn{
  width:54px; height:54px; border-radius:50%; border:none; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#00220f; font-weight:800; font-size:8.5px; line-height:1.15; letter-spacing:.01em; text-align:center;
  background:radial-gradient(circle at 35% 25%, #baffce, #4ade80 60%, #1c7d40 100%);
  box-shadow:0 0 0 3px rgba(74,222,128,.25), 0 6px 16px rgba(28,125,64,.55),
    inset 0 -4px 8px rgba(0,0,0,.25), inset 0 3px 6px rgba(255,255,255,.35);
}
.activity-round-btn.active{
  color:#fff;
  background:radial-gradient(circle at 35% 25%, #7c6bf2, #3a2f8f 60%, #1b1440 100%);
  box-shadow:0 0 0 3px rgba(124,107,242,.25), 0 6px 16px rgba(58,47,143,.55),
    inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.18);
}
.activity-round-icon{ font-size:18px; line-height:1; }
.activity-round-label{ margin-top:2px; }
.checkin-round-btn{
  width:54px; height:54px; border-radius:50%; border:none; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:8.5px; line-height:1.15; letter-spacing:.01em; text-align:center;
  background:radial-gradient(circle at 35% 25%, #d9a6ff, #a855f7 60%, #5b1fa3 100%);
  box-shadow:0 0 0 3px rgba(168,85,247,.25), 0 6px 16px rgba(91,31,163,.55),
    inset 0 -4px 8px rgba(0,0,0,.25), inset 0 3px 6px rgba(255,255,255,.25);
}
.checkin-round-btn.active{
  color:#00220f;
  background:radial-gradient(circle at 35% 25%, #baffce, #4ade80 60%, #1c7d40 100%);
  box-shadow:0 0 0 3px rgba(74,222,128,.25), 0 6px 16px rgba(28,125,64,.55),
    inset 0 -4px 8px rgba(0,0,0,.25), inset 0 3px 6px rgba(255,255,255,.35);
}
.sleep-hours-badge{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:42px; flex:none; }
.sleep-hours-badge b{ font-size:17px; font-weight:800; color:#fff; font-family:var(--mono); line-height:1; }
.sleep-hours-badge span{ font-size:6.8px; font-weight:700; color:rgba(255,255,255,.45); letter-spacing:.04em; margin-top:3px; text-align:center; }
.sleep-message{ margin-top:12px; font-size:11px; font-weight:600; color:#fff; line-height:1.35; padding:0 2px; }
.sleep-scene-card{
  border:1px solid rgba(140,160,255,.28);
  background:
    radial-gradient(16px 16px at 88% 18%, rgba(255,247,221,.95) 0%, rgba(255,247,221,.95) 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 32% 55%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 48% 15%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 62% 45%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 76% 62%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.2px 1.2px at 12% 68%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 58% 78%, rgba(255,255,255,.55), transparent),
    linear-gradient(160deg, #0d1330 0%, #1b2456 55%, #273463 100%);
}
.activity-scene-card{
  border:1px solid rgba(120,220,150,.3);
  background:
    radial-gradient(46px 46px at 85% 16%, rgba(255,224,138,.95) 0%, rgba(255,224,138,.95) 55%, transparent 60%),
    radial-gradient(170px 90px at 12% 118%, rgba(15,50,34,.92), transparent 68%),
    radial-gradient(210px 100px at 52% 130%, rgba(20,64,42,.88), transparent 68%),
    radial-gradient(230px 110px at 95% 122%, rgba(13,45,30,.92), transparent 68%),
    linear-gradient(180deg, #0d2b3d 0%, #1c5644 55%, #3c8654 100%);
}
.checkin-scene-card{
  border:1px solid rgba(200,140,255,.3);
  background:
    radial-gradient(34px 34px at 34% 62%, rgba(255,205,225,.55) 0%, rgba(255,205,225,.55) 55%, transparent 62%),
    radial-gradient(34px 34px at 62% 58%, rgba(255,205,225,.5) 0%, rgba(255,205,225,.5) 55%, transparent 62%),
    radial-gradient(1.6px 1.6px at 18% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 78% 25%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,.55), transparent),
    linear-gradient(160deg, #2c1240 0%, #5c1f5e 55%, #9c3f7a 100%);
}
.odo-remain{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--red); letter-spacing:.25em; text-align:center; margin-top:2px; }
.odo-clock-wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:flex-end; margin-top:14px; }
.odo-clock-spacer{ width:0; }
.odo-clock{ display:flex; justify-content:center; align-items:flex-end; gap:8px; }
.odo-unit{ text-align:center; width:60px; }
.odo-unit b{ display:block; font-family:var(--mono); font-size:26px; font-weight:700; color:rgba(255,255,255,.92); font-variant-numeric:tabular-nums; }
.odo-unit span{ font-size:9px; color:rgba(255,255,255,.42); letter-spacing:.1em; }
.odo-colon{ font-size:20px; color:rgba(255,255,255,.22); padding-bottom:14px; }
.odo-live{ display:flex; align-items:center; gap:4px; padding-bottom:5px; margin-left:6px; justify-self:start; }
.odo-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--red); }
.odo-live span{ font-size:10px; color:rgba(255,255,255,.4); }

.lastwish-card{ padding:14px 16px; }
.lastwish-row{ display:flex; align-items:center; gap:7px; }
.lastwish-row .lastwish-title{ flex:1; }
.lastwish-lock-sm{ font-size:11px; }
.lastwish-title{ font-size:12px; font-weight:700; color:#fff; }
.lastwish-seal{ position:relative; margin-top:12px; border-radius:12px; background:rgba(255,255,255,.05); padding:16px 14px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.lastwish-lock{ font-size:18px; }
.lastwish-opens{ font-size:9.5px; color:rgba(255,255,255,.45); }
.text-btn.lastwish-edit{ padding:3px 2px; font-size:11px; color:#dba53c; white-space:nowrap; }

.lastwish-editor{ align-items:center; text-align:center; }
.lastwish-editor-icon{ font-size:30px; }
.lastwish-editor-title{ font-size:14px; font-weight:700; color:#fff; margin-top:6px; }
.lastwish-editor-sub{ font-size:11px; color:rgba(255,255,255,.5); line-height:1.55; max-width:280px; margin:6px 0 0; }
.lastwish-textarea{
  width:100%; min-height:130px; margin-top:18px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1.4px solid #dba53c; padding:12px; text-align:left; font-size:13px; color:#fff; line-height:1.6;
  font-family:inherit; resize:vertical;
}
.lastwish-charcount{ align-self:flex-end; font-size:10px; color:rgba(255,255,255,.35); margin-top:6px; }
.lastwish-code-label{ align-self:flex-start; font-size:10px; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.06em; margin-top:18px; }
.lastwish-code-input{
  width:100%; margin-top:6px; border-radius:10px; background:rgba(255,255,255,.05);
  border:1.4px solid rgba(255,255,255,.16); padding:11px 12px; font-size:13px; color:#fff;
  font-family:var(--mono);
}
.lastwish-code-input:focus{ outline:none; border-color:#dba53c; }
.lastwish-code-input.big{ text-align:center; font-size:18px; letter-spacing:.15em; margin-top:22px; }
.lastwish-spacer{ flex:1; }
.primary-btn.lastwish-save{ background:#dba53c; color:#241703; }

/* ---------- Life Stats tab ---------- */
[data-tab="stats"] .topbar,[data-tab="stats"] .content{ background:#071a10; }
[data-tab="fitness"] .topbar,[data-tab="fitness"] .content{ background:#052018; }
.icon-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.icon-card{ text-align:center; padding:14px 8px; }
.icon-card .ic{ font-size:22px; display:block; }
.icon-card b{ display:block; font-size:15px; color:#fff; font-weight:700; margin-top:6px; }
.icon-card span{ font-size:8.5px; color:rgba(180,255,200,.55); letter-spacing:.05em; text-transform:uppercase; }
.gen-compact b{ font-size:12.5px; line-height:1.25; }
.gen-compact .gen-tagline{
  display:block; margin-top:4px; font-size:8.5px; color:rgba(255,255,255,.45);
  text-transform:none; letter-spacing:normal; line-height:1.4;
}
.fitness-count{ font-family:var(--mono); white-space:nowrap; }
.fitness-avg{ margin-top:8px; font-size:9.5px; color:rgba(255,255,255,.45); }
.fitness-count b{ font-size:19px; font-weight:800; color:#4ade80; }
.fitness-count span{ font-size:10px; color:rgba(255,255,255,.4); }
.fitness-check{
  width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(74,222,128,.5); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff;
}
.fitness-check.done{ background:#4ade80; border-color:#4ade80; color:#06240f; }

.mood-row{ display:flex; justify-content:space-between; gap:4px; margin-top:12px; }
.mood-btn{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:1.5px solid transparent; border-radius:12px; padding:8px 2px; }
.mood-emoji{ font-size:24px; filter:grayscale(.7); opacity:.55; transition:transform .15s, opacity .15s, filter .15s; }
.mood-label{ font-size:8px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.04em; }
.mood-btn.selected{ background:rgba(79,163,247,.15); border-color:rgba(79,163,247,.5); }
.mood-btn.selected .mood-emoji{ filter:none; opacity:1; transform:scale(1.15); }
.mood-btn.selected .mood-label{ color:#4fa3f7; font-weight:700; }
.wellness-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; width:100%; }
.wellness-grid .mood-btn.active{ background:rgba(167,139,250,.15); border-color:rgba(167,139,250,.5); }
.wellness-grid .mood-btn.active .mood-emoji{ filter:none; opacity:1; transform:scale(1.15); }
.wellness-grid .mood-btn.active .mood-label{ color:#a78bfa; font-weight:700; }

/* ---------- People tab ---------- */
[data-tab="people"] .topbar,[data-tab="people"] .content{ background:#110a1f; }
.inner-tabs{ display:flex; gap:2px; background:rgba(255,255,255,.07); padding:3px; border-radius:12px; }
.inner-tabs button{ flex:1; text-align:center; font-size:12px; font-weight:600; padding:8px 0; border-radius:9px; color:rgba(255,255,255,.4); background:none; border:none; }
.inner-tabs button.active{ background:rgba(160,80,255,.7); color:#fff; }
.person-card{ border-radius:16px; overflow:hidden; }
.person-top{ display:flex; align-items:center; gap:10px; padding:12px 12px 8px; }
.avatar{ width:40px; height:40px; border-radius:50%; background:rgba(160,80,255,.16); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--purple-light); flex:none; }
.person-name{ font-size:13.5px; font-weight:700; color:#fff; }
.person-sub{ font-size:9.5px; color:rgba(255,255,255,.5); margin-top:1px; }
.person-chips{ display:flex; gap:5px; margin-left:auto; }
.pchip{ border:none; font-size:9px; font-weight:700; padding:5px 8px; border-radius:20px; white-space:nowrap; }
.person-strip{ display:flex; align-items:center; justify-content:space-between; padding:7px 12px; background:rgba(0,0,0,.25); font-size:10px; }
.count-chunk{ font-family:var(--mono); color:#fff; font-weight:700; }
.count-chunk span{ color:rgba(255,255,255,.42); font-weight:600; margin-left:1px; }
.person-strip .to-exp{ font-size:9.5px; color:rgba(255,255,255,.35); font-style:italic; }
.person-band{ display:flex; align-items:center; gap:7px; padding:7px 12px; font-size:9.5px; }
.person-band b{ font-family:var(--mono); font-weight:700; }
.person-band .fill{ flex:1; }
.person-band .meta{ color:rgba(255,255,255,.3); font-size:8.5px; }
.celeb-card{ display:flex; align-items:flex-start; gap:10px; padding:12px; }
.celeb-avatar{ width:40px; height:40px; border-radius:50%; background:rgba(160,80,255,.15); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#a050ff; flex:none; }
.celeb-name{ font-size:12.5px; font-weight:700; color:#fff; }
.celeb-sub{ font-size:9.5px; color:rgba(255,255,255,.4); margin-top:1px; }
.celeb-bar{ height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:6px; }
.celeb-bar i{ display:block; height:100%; border-radius:3px; }
.celeb-tags{ display:flex; gap:6px; margin-top:6px; align-items:center; }
.celeb-tag{ font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; }

/* ---------- Bucket List tab ---------- */
[data-tab="bucket"] .topbar,[data-tab="bucket"] .content{ background:#041820; }
.world-ring-wrap{ display:flex; justify-content:center; padding-top:6px; }
.world-ring{ position:relative; width:150px; height:150px; }
.world-ring svg{ transform:rotate(-90deg); }
.world-ring .center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.world-ring .center b{ font-size:30px; font-weight:700; }
.world-ring .center span{ font-size:11px; color:rgba(255,255,255,.45); }
.world-pct{ text-align:center; font-size:14px; font-weight:600; color:var(--teal); margin-top:4px; }
.cont-row{ display:flex; align-items:center; gap:8px; font-size:10.5px; color:rgba(255,255,255,.55); }
.cont-name{ width:78px; flex:none; }
.cont-bar{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.cont-bar i{ display:block; height:100%; border-radius:3px; }
.cont-count{ width:40px; flex:none; text-align:right; color:rgba(255,255,255,.4); font-family:var(--mono); font-size:9.5px; }
.wish-stats{ display:flex; gap:8px; }
.wish-stat{ flex:1; text-align:center; padding:12px 4px; border-radius:12px; background:rgba(10,60,70,.6); border:1px solid rgba(0,200,180,.2); }
.wish-stat b{ display:block; font-size:19px; font-weight:800; color:var(--teal); font-family:var(--mono); }
.wish-stat span{ font-size:8px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.06em; }
.wish-block{ display:flex; flex-direction:column; gap:6px; }
.wish-cat{ font-size:10px; font-weight:700; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.07em; }
.wish-row{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:11px; background:rgba(10,50,56,.5); border:1px solid rgba(0,200,180,.15); }
.wish-check{ width:22px; height:22px; border-radius:50%; border:1.5px solid rgba(0,200,180,.5); flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; background:none; padding:0; }
.wish-check.done{ background:var(--teal); border-color:var(--teal); }
.wish-title{ flex:1; font-size:11.5px; font-weight:600; color:#fff; text-align:left; }
.wish-title.done{ color:rgba(255,255,255,.35); text-decoration:line-through; }
.wish-tag{ font-size:9px; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.wish-del{ background:none; border:none; color:rgba(255,255,255,.3); font-size:13px; padding:2px 4px; flex:none; }

/* ---------- Settings sheet ---------- */
.sheet-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:flex; align-items:flex-end; }
.sheet{
  width:100%; max-width:520px; margin:0 auto; background:#071a10; border-radius:22px 22px 0 0;
  max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
}
.sheet .grabber{ width:36px; height:5px; border-radius:3px; background:rgba(255,255,255,.28); margin:9px auto 2px; flex:none; }
.sheet-body{ overflow-y:auto; padding:6px 16px calc(env(safe-area-inset-bottom,0px) + 20px); display:flex; flex-direction:column; gap:16px; }
.set-header{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 2px 6px; }
.set-header.danger{ color:rgba(248,113,113,.65); }
.set-card{ border-radius:13px; overflow:hidden; background:rgba(255,255,255,.055); }
.set-row{ display:flex; align-items:center; gap:10px; padding:12px 13px; border-bottom:1px solid rgba(255,255,255,.08); background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; }
button.set-row{ border:none; border-bottom:1px solid rgba(255,255,255,.08); }
.set-card .set-row:last-child{ border-bottom:none; }
.set-ic{ font-size:13px; width:16px; text-align:center; flex:none; }
.set-label{ font-size:11.5px; font-weight:500; color:#fff; }
.set-val{ margin-left:auto; font-size:10.5px; color:rgba(255,255,255,.4); }
.set-chev{ font-size:11px; color:rgba(255,255,255,.28); margin-left:4px; }
.toggle{ margin-left:auto; width:38px; height:22px; border-radius:12px; position:relative; flex:none; border:none; padding:0; }
.toggle.on{ background:#34c759; }
.toggle.off{ background:rgba(255,255,255,.16); }
.toggle i{ position:absolute; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:left .15s,right .15s; }
.toggle.on i{ right:2px; }
.toggle.off i{ left:2px; }

/* ---------- forms / modal sheets ---------- */
.mood-fullscreen{
  position:fixed; inset:0; z-index:55; background:radial-gradient(circle at 50% 30%, #16204a, #05060d 70%);
  display:flex; flex-direction:column; align-items:center; overflow-y:auto;
  max-width:520px; margin:0 auto; text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 36px) 28px calc(env(safe-area-inset-bottom,0px) + 28px);
}
.mood-fs-top{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; min-height:0; }
.mood-fs-bottom{ flex:none; display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; margin-top:18px; }
.mood-fullscreen .mood-fs-icon{ font-size:60px; line-height:1; }
.mood-fullscreen .mood-fs-title{ font-size:20px; font-weight:800; color:#fff; }
.mood-fullscreen .mood-row{ width:100%; margin-top:0; }
.mood-fullscreen .mood-btn{ padding:16px 4px; min-width:0; }
.mood-fullscreen .mood-emoji{ font-size:38px; }
.mood-fullscreen .mood-label{ font-size:10.5px; }
.mood-fs-quote{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:16px 18px; margin-top:56px;
}
.mood-fs-quote-label{ font-size:13px; font-weight:800; color:#fbbf24; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; text-shadow:0 0 16px rgba(251,191,36,.35); }
.mood-fs-quote-text{ font-size:13.5px; font-style:italic; color:#fff; line-height:1.5; }
.mood-fs-quote-author{ margin-top:8px; font-size:11px; color:rgba(255,255,255,.5); }
.mood-fs-quote-explain{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); font-size:11.5px; color:rgba(255,255,255,.5); line-height:1.5; font-style:normal; text-align:left; }
.form-sheet{ position:fixed; inset:0; background:#0a0f18; z-index:50; display:flex; flex-direction:column; max-width:520px; margin:0 auto; }
.form-sheet .topbar{ background:#0e1428; }
.form-body{ flex:1; overflow-y:auto; padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 24px); display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:11px; font-weight:600; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.05em; }
.field input[type="text"],.field input[type="date"],.field input[type="number"],.field select,.field textarea{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  padding:11px 12px; font-size:14px; color:#fff; width:100%;
}
.field textarea{ resize:vertical; min-height:90px; }
.segmented{ display:flex; background:rgba(255,255,255,.07); border-radius:10px; padding:3px; gap:2px; }
.segmented button{ flex:1; border:none; background:none; padding:9px 0; border-radius:8px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.55); }
.segmented button.active{ background:var(--purple); color:#fff; }
.checkbox-group{ display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.07); border-radius:10px; padding:4px; }
.checkbox-row{ display:flex; align-items:center; gap:10px; padding:9px 8px; font-size:14px; color:#fff; }
.checkbox-row input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--purple); flex:none; }
.checkin-type-btn{ display:block; width:100%; text-align:left; padding:10px 12px; background:none; border:none; color:rgba(255,255,255,.7); font-size:13px; border-radius:8px; }
.checkin-type-btn.active{ background:rgba(0,224,138,.18); color:#fff; font-weight:700; }
.eyesight-value-row{ padding:0 8px 8px 36px; }
.eyesight-value-row input[type="text"]{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:8px;
  padding:8px 10px; font-size:13px; color:#fff; width:100%;
}
.primary-btn{ border:none; border-radius:14px; padding:14px; font-size:14px; font-weight:700; color:#fff; background:var(--blue); text-align:center; }
.primary-btn.danger{ background:var(--red2); color:#2a0a0a; }
.text-btn{ border:none; background:none; color:var(--blue); font-size:13px; font-weight:600; padding:8px; text-align:center; }
.text-btn.danger{ color:var(--red2); }
.error-msg{ color:var(--red2); font-size:12.5px; text-align:center; min-height:16px; }

/* ---------- login ---------- */
.login-screen{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#05060d; padding:24px; text-align:center; gap:22px; }
.login-screen .hero{ font-size:44px; }
.login-screen h1{ font-size:20px; font-weight:800; margin:0; }
.login-screen p{ font-size:12.5px; color:rgba(255,255,255,.45); margin:0; max-width:260px; }
.login-form{ width:100%; max-width:300px; display:flex; flex-direction:column; gap:12px; }
.login-form input{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:12px;
  padding:13px 14px; font-size:14px; color:#fff; width:100%; text-align:left;
}
.login-form input:focus{ outline:none; border-color:var(--blue); }
.login-form button{ margin-top:4px; }

/* ---------- onboarding ---------- */
.onboard-screen{ height:100%; display:flex; flex-direction:column; background:#0b0f2a; }
.onboard-screen .content{ background:transparent; flex:1; overflow-y:auto; padding:28px 22px 20px; }
.onboard-head{ text-align:center; margin-bottom:26px; }
.onboard-head .hero{ font-size:36px; }
.onboard-head h1{ font-size:19px; font-weight:800; margin:10px 0 4px; }
.onboard-head p{ font-size:12px; color:rgba(255,255,255,.5); margin:0; }
.onboard-foot{ flex:none; padding:14px 22px calc(env(safe-area-inset-bottom,0px) + 18px); }

::-webkit-scrollbar{ width:0; height:0; }

@media (min-width:560px){
  body{ background:#000; }
  .app-shell,.form-sheet,.login-screen,.onboard-screen{ box-shadow:0 0 0 1px rgba(255,255,255,.06); }
}