/* ============================================================
   TribeTrak · Home "Today" v2 — Dashboard styles
   Cosmic Bloom system + Home-only premium tier.
   Layer 1 cinematic photo · Layer 2 constellation · Layer 3 time-of-day tint.
   ============================================================ */

:root{
  --jakarta:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  --inter:'Inter',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

/* ---------- phone frame (shared with the rest of TribeTrak) ---------- */
.phone{
  width:390px;height:844px;border-radius:54px;position:relative;flex:none;padding:13px;
  background:linear-gradient(160deg,#2A2150,#171033);
  box-shadow:0 2px 4px rgba(20,11,46,.5) inset,
             0 40px 80px -24px rgba(36,26,77,.55),
             0 12px 28px -14px rgba(36,26,77,.45);
}
.phone::after{content:"";position:absolute;left:-3px;top:168px;width:3px;height:62px;border-radius:3px;
  background:#241A4D;box-shadow:0 86px 0 #241A4D,0 -90px 0 #241A4D;}
.screen{
  width:100%;height:100%;border-radius:42px;overflow:hidden;position:relative;
  background:var(--bg);font-family:var(--inter);color:var(--text);
}

/* ===================== THEME TOKENS ===================== */
.screen[data-theme="light"]{
  --bg:#FFFFFF; --tint:#FAF7FF; --surface:#FFFFFF; --surface-2:#FAF7FF; --surface-3:#F1ECFB;
  --violet:#6C4BD6; --violet-deep:#5838BE; --violet-soft:#8E6BEA; --violet-sat:#4F3FC4;
  --node:#F2A93B; --node-glow:rgba(242,169,59,.5); --node-hi:#FFE6B0;
  --gold-dot:#E7B95F; --gold-glow:rgba(231,185,95,.7);
  --coral:#FF6F91; --coral-deep:#F2557B; --coral-urgent:#E0563F;
  --teal:#3E8E80; --teal-soft:#4A9B8E;
  --text:#241A4D; --muted:#6B5E96; --faint:#9A8DC4;
  --border:#ECE6FA; --border-2:#E3DAF6; --chip:#F4EFFD; --chip-text:#6C4BD6;
  --route:#B7A6EE; --grid:rgba(108,75,214,.07);
  --glass:rgba(255,255,255,.78); --glass-strong:rgba(255,255,255,.9);
  --shadow-card:0 8px 22px -12px rgba(108,75,214,.22);
  --shadow-prem:0 12px 28px -8px rgba(79,63,196,.20);
  --user-glow:rgba(108,75,214,.45);
  --statusbar:#241A4D;
}
.screen[data-theme="dark"]{
  --bg:#140B2E; --tint:#1B1140; --surface:#241646; --surface-2:#2A1A52; --surface-3:#321F60;
  --violet:#9B7BF0; --violet-deep:#7C5BD0; --violet-soft:#B49AF6; --violet-sat:#7C66F0;
  --node:#FFC85C; --node-glow:rgba(255,200,92,.6); --node-hi:#FFF0CC;
  --gold-dot:#F2CC7A; --gold-glow:rgba(255,200,92,.75);
  --coral:#FF6F91; --coral-deep:#FF6F91; --coral-urgent:#FF8266;
  --teal:#5FBFAE; --teal-soft:#7AD0C0;
  --text:#F4F1FF; --muted:#C9BCF2; --faint:#8E7FC0;
  --border:#332159; --border-2:#3C2A66; --chip:#2C1C57; --chip-text:#C9BCF2;
  --route:#5A4490; --grid:rgba(155,123,240,.10);
  --glass:rgba(36,22,70,.72); --glass-strong:rgba(20,11,46,.7);
  --shadow-card:0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-prem:0 16px 34px -10px rgba(0,0,0,.66);
  --user-glow:rgba(155,123,240,.6);
  --statusbar:#F4F1FF;
}
/* nebula wash on the BELOW-hero canvas only */
.screen[data-theme="dark"] .app-body{background:
  radial-gradient(380px 320px at 6% 100%, rgba(255,111,145,.08), transparent 72%), var(--bg);}
.screen[data-theme="light"] .app-body{background:
  radial-gradient(420px 340px at 4% 100%, rgba(255,111,145,.05), transparent 72%), var(--bg);}

/* ---------- status bar ---------- */
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:108px;height:30px;background:#0A0620;border-radius:18px;z-index:60;}
.statusbar{position:absolute;top:0;left:0;right:0;height:50px;z-index:59;display:flex;align-items:center;
  justify-content:space-between;padding:16px 30px 0;font-family:var(--jakarta);font-weight:700;font-size:14px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.35);}
.statusbar .ic{display:flex;gap:6px;align-items:center;}

/* ---------- app shell ---------- */
.app{position:absolute;inset:0;display:flex;flex-direction:column;}
.app-body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;}
.app-body::-webkit-scrollbar{width:0;}
.app-body{scrollbar-width:none;}

/* staggered reveal helper */
.reveal{opacity:0;transform:translateY(14px);}
.play .reveal{animation:rise .6s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}
.screen.shown .reveal{opacity:1 !important;transform:none !important;animation:none !important;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none;}}

/* ============================================================
   HERO ZONE  (Layer 1 photo · 2 constellation · 3 time-of-day)
   ============================================================ */
.hero{position:relative;height:430px;overflow:hidden;isolation:isolate;}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  /* fallback colour if a photo ever fails to load */
  background:linear-gradient(160deg,#2b3a52,#101725);}
/* the bottom-darken legibility scrim (always on) */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,10,20,.18) 0%, rgba(8,10,20,0) 26%, rgba(8,10,20,.10) 52%, rgba(8,10,22,.62) 100%);}
/* extra top scrim so status bar + greeting stay legible on bright skies */
.hero-topscrim{position:absolute;top:0;left:0;right:0;height:188px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, rgba(6,8,18,.62), rgba(6,8,18,.18) 58%, rgba(6,8,18,0));}

/* ---------- Layer 3 · time-of-day tint ---------- */
.hero-tod{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  transition:opacity .8s ease, background 1.2s ease;}
.hero[data-tod="dawn"]  .hero-tod{background:linear-gradient(160deg, rgba(255,176,120,.85) 0%, rgba(255,138,150,.5) 42%, rgba(120,110,180,.45) 100%);}
.hero[data-tod="midday"] .hero-tod{background:linear-gradient(160deg, rgba(255,248,232,.55) 0%, rgba(255,250,240,.22) 50%, rgba(150,170,210,.3) 100%);}
.hero[data-tod="dusk"]  .hero-tod{background:linear-gradient(160deg, rgba(255,150,96,.7) 0%, rgba(214,90,110,.62) 45%, rgba(96,70,168,.7) 100%);}
.hero[data-tod="night"] .hero-tod{background:linear-gradient(160deg, rgba(30,40,96,.8) 0%, rgba(20,24,64,.78) 50%, rgba(10,14,40,.88) 100%);
  mix-blend-mode:multiply;}
/* a second additive wash for richer dusk/night colour over dark photos */
.hero-tod2{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;}
.hero[data-tod="dawn"]  .hero-tod2{opacity:.5;background:radial-gradient(120% 80% at 80% 0%, rgba(255,200,140,.5), transparent 60%);}
.hero[data-tod="dusk"]  .hero-tod2{opacity:.55;background:radial-gradient(120% 80% at 78% 4%, rgba(255,150,110,.5), transparent 58%);}
.hero[data-tod="night"] .hero-tod2{opacity:.7;background:radial-gradient(120% 90% at 50% -10%, rgba(70,90,180,.4), transparent 62%);}
/* slow living colour-drift when active (frozen for reduced-motion) */
.play .hero[data-tod] .hero-tod{animation:todDrift 18s ease-in-out infinite alternate;}
@keyframes todDrift{0%{filter:hue-rotate(0deg) saturate(1);}100%{filter:hue-rotate(-8deg) saturate(1.12);}}
@media (prefers-reduced-motion:reduce){.play .hero[data-tod] .hero-tod{animation:none;}}

/* night star-twinkle */
.hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s ease;}
.hero[data-tod="night"] .hero-stars{opacity:1;}
.hero-stars .st{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:0 0 4px 1px rgba(255,255,255,.8);}
.play .hero[data-tod="night"] .hero-stars .st{animation:twinkle 3.4s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.25;}50%{opacity:.95;}}
@media (prefers-reduced-motion:reduce){.play .hero-stars .st{animation:none;opacity:.7;}}

/* ---------- Layer 2 · constellation ---------- */
.constellation{position:absolute;inset:0;z-index:3;pointer-events:none;}
.cdot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  width:var(--d,9px);height:var(--d,9px);border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #fff7e6, var(--gold-dot) 64%);
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 10px 2px var(--gold-glow);}
.cdot::after{content:attr(data-fam);position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);
  font-family:var(--jakarta);font-weight:700;font-size:8.5px;letter-spacing:.02em;color:#fff;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:0;transition:opacity .18s;pointer-events:none;}
.cdot:hover::after,.cdot.show-label::after{opacity:.9;}
.play .cdot{animation:breathe var(--bz,4s) ease-in-out infinite;animation-delay:var(--bd,0s);}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.15);}}
.cdot.tapped{box-shadow:0 0 0 2px #fff,0 0 16px 4px var(--gold-glow);}
@media (prefers-reduced-motion:reduce){.play .cdot{animation:none;}}

.hero-attrib{position:absolute;right:13px;bottom:122px;z-index:3;font-size:9px;font-weight:500;color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(0,0,0,.5);letter-spacing:.01em;}
.hero-attrib a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* ---------- content floating ON the hero ---------- */
.hero-content{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;padding:58px 16px 0;}
.hero-text{text-shadow:0 1px 4px rgba(0,0,0,.45);}

/* greeting */
.greet{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.greet .hi{font-family:var(--jakarta);font-weight:800;font-size:24px;letter-spacing:-.025em;line-height:1.05;color:#fff;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.45), 0 0 20px rgba(255,255,255,.12);}
.greet .hi .spark{color:#FFE6B0;margin-left:3px;text-shadow:0 0 14px rgba(255,200,92,.9);}
.greet .day{font-size:12px;color:rgba(255,255,255,.9);font-weight:600;margin-top:4px;text-shadow:0 1px 5px rgba(0,0,0,.6);}
.greet-right{display:flex;align-items:center;gap:9px;flex:none;}
.theme-pill{display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px;cursor:pointer;}
.theme-pill button{width:26px;height:26px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;
  align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:.16s;}
.theme-pill button svg{width:14px;height:14px;}
.theme-pill button.on{background:rgba(255,255,255,.92);color:#241A4D;}
.hero-av{width:42px;height:42px;border-radius:50%;flex:none;position:relative;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--jakarta);font-weight:800;font-size:16px;
  background:radial-gradient(circle at 35% 30%, var(--violet-soft), var(--violet) 72%);
  box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 16px 1px var(--user-glow);}
.hero-av .pip{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--coral);
  border:2.5px solid #fff;}

/* ===================== LIVE PULSE STRIP ===================== */
.pulse{margin-top:14px;background:rgba(10,12,26,.34);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:2px 14px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);}
.pulse-hd{display:flex;align-items:center;gap:7px;padding:8px 0 5px;}
.pulse-hd .lbl{font-family:var(--jakarta);font-weight:800;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);}
.pulse-hd .live{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:9px;font-weight:700;color:rgba(255,255,255,.7);}
.pulse-hd .live .ld{width:6px;height:6px;border-radius:50%;background:#5FE0A8;box-shadow:0 0 8px 1px #5FE0A8;}
.play .pulse-hd .live .ld{animation:livePulse 2s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}
@media (prefers-reduced-motion:reduce){.play .pulse-hd .live .ld{animation:none;}}

.prow{display:flex;align-items:center;gap:11px;padding:8px 0;cursor:pointer;position:relative;}
.prow + .prow{border-top:1px solid rgba(255,255,255,.1);}
.prow .pg{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(231,185,95,.16);color:#FFD98A;}
.prow .pg svg{width:17px;height:17px;}
.prow .pmid{flex:1;min-width:0;}
.prow .ptop{font-family:var(--jakarta);font-weight:800;font-size:13.5px;color:#fff;letter-spacing:-.01em;
  display:flex;align-items:center;gap:6px;text-shadow:0 1px 3px rgba(0,0,0,.4);}
.prow .ptop .flag{font-size:14px;}
.prow .psub{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:11px;font-weight:600;color:rgba(255,255,255,.82);}
.prow .psub .wx{display:inline-flex;align-items:center;gap:4px;}
.prow .psub .wx svg{width:13px;height:13px;color:#FFE0A6;}
.prow .chev{color:rgba(255,255,255,.5);flex:none;}
.prow .chev svg{width:15px;height:15px;display:block;}
/* progress bar */
.pbar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;position:relative;max-width:130px;}
.pbar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(90deg, var(--gold-dot), #FFE6B0);box-shadow:0 0 10px 0 var(--gold-glow);}
.ppct{font-family:var(--jakarta);font-weight:800;font-size:10.5px;color:#FFE6B0;}
/* empty-state pulse line */
.pulse-empty{display:flex;align-items:center;gap:11px;padding:14px 2px;cursor:pointer;}
.pulse-empty .pg{width:32px;height:32px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(231,185,95,.18);color:#FFD98A;}
.pulse-empty .pg svg{width:18px;height:18px;}
.pulse-empty span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.4;}

/* ===================== TODAY'S CARDS (premium stack) ===================== */
/* floats up as a sibling of .hero, caught on the seam, casting shadow down */
.stack-wrap{position:relative;z-index:6;margin:-128px 16px 0;}
.stack-hd{display:flex;align-items:center;justify-content:space-between;padding:0 2px 9px;}
.stack-hd .l{font-family:var(--jakarta);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.45);}
.stack-hd .l b{color:#FFE6B0;}
.stack-hd .more{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.72);text-shadow:0 1px 3px rgba(0,0,0,.45);}

.stack{position:relative;height:216px;}
/* peek cards behind */
.peek{position:absolute;left:0;right:0;border-radius:24px;background:var(--surface);
  box-shadow:var(--shadow-prem);}
.peek.p1{top:10px;left:9px;right:9px;height:202px;opacity:.92;}
.peek.p2{top:18px;left:18px;right:18px;height:190px;opacity:.7;}

/* premium home card */
.hcard{position:absolute;left:0;right:0;top:0;border-radius:24px;padding:18px 20px 16px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-prem);cursor:grab;
  background-image:linear-gradient(165deg, color-mix(in srgb,var(--accent) 13%, var(--surface)) 0%, var(--surface) 56%);
  will-change:transform;touch-action:none;}
.hcard:active{cursor:grabbing;}
.screen[data-theme="dark"] .hcard{background-image:linear-gradient(165deg, color-mix(in srgb,var(--accent) 22%, var(--surface)) 0%, var(--surface) 60%);}
/* accent per type */
.hcard[data-accent="coral"]{--accent:var(--coral-urgent);}
.hcard[data-accent="gold"]{--accent:var(--node);}
.hcard[data-accent="teal"]{--accent:var(--teal);}
.hcard[data-accent="violet"]{--accent:var(--violet);}
.hcard.entering{animation:cardIn .28s cubic-bezier(.22,1,.36,1) both;}
@keyframes cardIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
.play .hcard.breath:not(.dragging){animation:cardBreath 4s ease-in-out infinite;}
@keyframes cardBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.006);}}
@media (prefers-reduced-motion:reduce){.play .hcard.breath{animation:none;}}

.hcard .ctop{display:flex;align-items:flex-start;gap:10px;}
.hcard .cicon{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 16%, transparent);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 26%, transparent);}
.hcard .cicon svg{width:18px;height:18px;}
.hcard .chead{flex:1;min-width:0;}
.hcard .ctitle{font-family:var(--jakarta);font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.16;color:var(--text);}
.hcard .cwhen{font-size:10px;font-weight:700;color:var(--faint);flex:none;text-align:right;padding-top:2px;white-space:nowrap;}
.hcard .cbody{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:8px;}
.hcard .cbody b{color:var(--text);font-weight:700;}
.hcard .cavs{display:flex;margin-top:11px;}
.hcard .cavs .av{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);margin-left:-9px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--jakarta);font-weight:800;font-size:11px;}
.hcard .cavs .av:first-child{margin-left:0;}
.hcard .cfoot{display:flex;align-items:center;gap:8px;margin-top:13px;}
.hcard .ctag{font-family:var(--jakarta);font-weight:700;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);display:inline-flex;align-items:center;gap:5px;}
.hcard .ctag .td{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.hcard .cact{display:flex;gap:8px;margin-left:auto;}
.btn{font-family:var(--jakarta);font-weight:800;font-size:12.5px;border-radius:12px;padding:9px 15px;cursor:pointer;
  border:none;display:inline-flex;align-items:center;gap:6px;transition:transform .12s,filter .15s;}
.btn:active{transform:scale(.95);}
.btn svg{width:14px;height:14px;}
.btn-primary{background:linear-gradient(150deg,var(--violet-sat),var(--violet-deep));color:#fff;
  box-shadow:0 8px 18px -7px var(--violet-sat), 0 0 16px -6px var(--violet-sat);}
.btn-primary.gold{background:linear-gradient(150deg,#FFC85C,#F2A93B);color:#3A2A08;box-shadow:0 8px 18px -7px var(--node-glow),0 0 16px -6px var(--node-glow);}
.btn-primary.coral{background:linear-gradient(150deg,var(--coral),var(--coral-deep));color:#fff;box-shadow:0 8px 18px -7px var(--coral),0 0 16px -6px var(--coral);}
.btn-primary.teal{background:linear-gradient(150deg,var(--teal-soft),var(--teal));color:#fff;box-shadow:0 8px 18px -7px var(--teal),0 0 16px -6px var(--teal);}
.btn-ghost{background:var(--surface-2);color:var(--muted);border:1px solid var(--border);}
.screen[data-theme="dark"] .btn-ghost{background:var(--surface-3);color:var(--text);border-color:var(--border-2);}

/* swipe affordance + drag feedback overlays */
.hcard .swipe-cue{position:absolute;top:14px;font-family:var(--jakarta);font-weight:800;font-size:13px;letter-spacing:.04em;
  padding:6px 12px;border-radius:10px;opacity:0;pointer-events:none;}
.hcard .cue-up{left:50%;transform:translateX(-50%);background:rgba(80,90,110,.9);color:#fff;}
.hcard .cue-left{left:16px;background:rgba(231,185,95,.95);color:#3A2A08;}
.stack-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px;
  font-size:10px;font-weight:700;color:rgba(255,255,255,.7);text-shadow:0 1px 3px rgba(0,0,0,.45);}
.stack-hint svg{width:12px;height:12px;}
.stack-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:24px;background:var(--glass-strong);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);}
.stack-empty .e1{font-family:var(--jakarta);font-weight:800;font-size:15px;color:var(--text);}
.stack-empty .e2{font-size:11.5px;color:var(--faint);}

/* the bleed: a soft shadow under the stack onto the seam */
.stack-bleed{height:30px;}

/* ===================== BELOW HERO — utilitarian ===================== */
.below{padding:14px 16px 0;position:relative;z-index:1;}
.sec-lab{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 11px;}
.sec-lab .l{display:flex;align-items:center;gap:8px;font-family:var(--jakarta);font-weight:800;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.sec-lab .l svg{width:14px;height:14px;color:var(--node);}
.sec-lab .all{font-size:11.5px;font-weight:700;color:var(--violet);cursor:pointer;}

/* tribe live */
.live-list{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);}
.ev{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;transition:background .14s;}
.ev + .ev{border-top:1px solid var(--border);}
.ev:active{background:var(--surface-2);}
.ev .eg{width:28px;height:28px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;}
.ev .eg svg{width:15px;height:15px;}
.ev.gold .eg{background:color-mix(in srgb,var(--node) 16%, transparent);color:var(--node);}
.screen[data-theme="dark"] .ev.gold .eg{color:var(--node-hi);}
.ev.teal .eg{background:color-mix(in srgb,var(--teal) 18%, transparent);color:var(--teal);}
.ev .etxt{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev .etxt b{font-family:var(--jakarta);font-weight:800;}
.ev .etime{font-size:10.5px;font-weight:700;color:var(--faint);flex:none;}
.live-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;cursor:pointer;
  font-family:var(--jakarta);font-weight:800;font-size:12px;color:var(--violet);border-top:1px solid var(--border);}
.live-foot svg{width:14px;height:14px;}
.live-empty{padding:26px 16px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-card);}
.live-empty .e1{font-family:var(--jakarta);font-weight:800;font-size:13.5px;color:var(--text);}
.live-empty .e2{font-size:11.5px;color:var(--faint);margin-top:3px;}

/* quick actions */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.qa{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:15px 8px 12px;cursor:pointer;box-shadow:var(--shadow-card);transition:transform .14s;min-height:90px;}
.qa:active{transform:scale(.96);}
.qa .qi{width:44px;height:44px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--violet) 12%, transparent);border:1px solid color-mix(in srgb,var(--violet) 22%, transparent);}
.qa .qi svg{width:21px;height:21px;color:var(--violet);}
.qa .ql{font-family:var(--jakarta);font-weight:700;font-size:11.5px;color:var(--text);text-align:center;line-height:1.15;}
.qa.coral .qi{background:linear-gradient(150deg,var(--coral),var(--coral-deep));border-color:transparent;
  box-shadow:0 12px 24px -10px var(--coral),0 0 16px -4px var(--coral);}
.qa.coral .qi svg{color:#fff;}
.qa.coral .ql{color:var(--coral);}
.screen[data-theme="dark"] .qa.coral .ql{color:#FF9DB6;}

.body-pad{height:20px;}

/* ===================== BOTTOM TAB BAR (4 tabs) ===================== */
.tabbar{flex:none;display:flex;align-items:flex-start;justify-content:space-around;padding:9px 8px 26px;
  background:var(--glass-strong);backdrop-filter:blur(14px);border-top:1px solid var(--border);position:relative;z-index:30;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:var(--faint);transition:color .18s;
  font-family:var(--jakarta);font-weight:700;font-size:9.5px;letter-spacing:.01em;background:none;border:none;padding:2px 0;}
.tab .ticon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.22s;}
.tab .ticon svg{width:22px;height:22px;}
.tab.on{color:var(--violet);}
.tab.on .ticon{background:radial-gradient(circle at 35% 28%, var(--node-hi), var(--node) 72%);
  box-shadow:0 0 0 3px var(--node-glow),0 0 18px 2px var(--node-glow);}
.tab.on .ticon svg{color:#3A2A08;}

/* long-press snooze sheet */
.sheet-scrim{position:absolute;inset:0;z-index:80;background:rgba(8,8,20,.42);backdrop-filter:blur(2px);opacity:0;
  pointer-events:none;transition:opacity .2s;}
.sheet-scrim.on{opacity:1;pointer-events:auto;}
.snooze-sheet{position:absolute;left:10px;right:10px;bottom:10px;z-index:81;background:var(--surface);border-radius:24px;
  padding:8px;box-shadow:var(--shadow-sheet,0 -18px 50px -16px rgba(0,0,0,.5));transform:translateY(120%);transition:transform .26s cubic-bezier(.22,1,.36,1);
  border:1px solid var(--border);}
.snooze-sheet.on{transform:translateY(0);}
.snooze-sheet .sh-t{font-family:var(--jakarta);font-weight:800;font-size:12px;color:var(--faint);text-transform:uppercase;
  letter-spacing:.1em;padding:12px 12px 8px;}
.snooze-opt{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;cursor:pointer;font-family:var(--jakarta);
  font-weight:700;font-size:14px;color:var(--text);}
.snooze-opt:active{background:var(--surface-2);}
.snooze-opt svg{width:18px;height:18px;color:var(--violet);}
.snooze-opt.danger{color:var(--coral);}
.snooze-opt.danger svg{color:var(--coral);}

/* ============================================================
   FRAMES-SHEET helpers (used only by the variation-frames page)
   ============================================================ */
/* a bare screen surface without the phone bezel, for cropped frames */
.scrn{position:relative;border-radius:30px;overflow:hidden;width:340px;
  font-family:var(--inter);color:var(--text);background:var(--bg);}
.scrn .app{position:static;}
.scrn .app-body{overflow:visible;}
/* solo card display (card-types sheet, interaction states) */
.card-solo{position:relative;padding:20px;border-radius:24px;display:flex;align-items:center;}
.card-solo .hcard{position:relative;width:100%;}
.card-solo .peek{display:none;}
.card-solo[data-theme]{background:var(--surface-2);}
.card-solo.on-photo{background:#1a2233;}
/* standard "elsewhere" card — utilitarian counterpart for the comparison */
.scard{border-radius:18px;background:var(--surface);border:1px solid var(--border);padding:16px;
  box-shadow:0 8px 18px -10px rgba(108,75,214,.16);}
.scard .ctop{display:flex;align-items:flex-start;gap:10px;}
.scard .cicon{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--node) 14%, transparent);color:var(--node);}
.scard .cicon svg{width:16px;height:16px;}
.scard .ctitle{font-family:var(--jakarta);font-weight:700;font-size:14.5px;letter-spacing:-.01em;line-height:1.2;color:var(--text);}
.scard .cbody{font-size:12px;line-height:1.4;color:var(--muted);margin-top:6px;}
.scard .cfoot{display:flex;align-items:center;gap:8px;margin-top:12px;}
.scard .btn-std{font-family:var(--jakarta);font-weight:700;font-size:12.5px;border-radius:11px;padding:8px 14px;border:none;cursor:pointer;
  background:var(--violet);color:#fff;margin-left:auto;}
.scard .ctag{font-family:var(--jakarta);font-weight:700;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}

/* cropped hero frame (hero / constellation / pulse / legibility sheets) */
.hero-frame{position:relative;width:340px;overflow:hidden;border-radius:30px;background:#0e1422;}
.hero-frame .hero{height:100%;}
.hero-frame .scrim-note{position:absolute;left:14px;bottom:12px;z-index:8;font-family:var(--jakarta);font-weight:700;
  font-size:11px;color:#fff;background:rgba(0,0,0,.4);padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px);}

/* time-of-day palette swatches */
.tod-swatch{height:60px;border-radius:12px;position:relative;overflow:hidden;}
.tod-swatch.dawn{background:linear-gradient(135deg,#FFB078,#FF8A96 50%,#786EB4);}
.tod-swatch.midday{background:linear-gradient(135deg,#FFF8E8,#FFFAF0 50%,#96AAD2);}
.tod-swatch.dusk{background:linear-gradient(135deg,#FF9660,#D65A6E 48%,#6046A8);}
.tod-swatch.night{background:linear-gradient(135deg,#1E2860,#141840 50%,#0A0E28);}

/* pulse demo frame — pulse panel on a dark photographic strip */
.pulse-frame{position:relative;width:330px;border-radius:24px;overflow:hidden;padding:16px;
  background:linear-gradient(160deg,#3a4a64,#1a2233);}
.pulse-frame::before{content:"";position:absolute;inset:0;background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,180,120,.25), transparent 60%);}
.pulse-frame .pulse{position:relative;margin-top:0;}

/* live-list / quick demo on themed surface */
.surf{padding:18px;border-radius:24px;background:var(--bg);}
.frame-box{border-radius:30px;overflow:hidden;}
.frame-box>.screen{width:100%;height:auto;display:block;}