/* =============================================================
   YourLife CC — App Stylesheet
   Extracted from app/index.html
   DO NOT edit index.html styles — edit this file instead
============================================================= */

/* ── DARK MODE (default) ────────────────────────── */
:root{
  --bg:#0d1117;--s1:#161b27;--s2:#1c2333;--s3:#232d42;--s4:#2a3652;
  --c:#38bdf8;--g:#fbbf24;--gr:#34d399;--p:#a78bfa;--pk:#f472b6;--or:#fb923c;
  --tx:#f1f5f9;--tx2:#94a3b8;--tx3:#475569;--mt:#64748b;--br:rgba(56,189,248,0.15);--r:14px;
  --fh:'Bebas Neue',sans-serif;--fm:'Inter',sans-serif;--fn:'Orbitron',sans-serif;--f:'Inter',sans-serif;
  --card-shadow:0 4px 24px rgba(0,0,0,.5);
  --sidebar:220px;
  --card-bg:rgba(255,255,255,.07);--card-border:rgba(255,255,255,.1);
  --input-bg:#2a3652;--input-border:rgba(255,255,255,.15);
  --sel-bg:#1c2236;
}

/* ── LIGHT MODE ─────────────────────────────────── */
:root.light{
  --bg:#f0f4f8;--s1:#ffffff;--s2:#f8fafc;--s3:#e9eef5;--s4:#dde4ee;
  --tx:#0f172a;--tx2:#475569;--mt:#94a3b8;--br:rgba(56,189,248,0.25);
  --card-shadow:0 2px 12px rgba(0,0,0,.08);
  --card-bg:rgba(255,255,255,.9);--card-border:rgba(0,0,0,.08);
  --input-bg:#f1f5f9;--input-border:rgba(0,0,0,.15);
  --sel-bg:#f1f5f9;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:17px;scroll-behavior:smooth;}
body{font-family:var(--fm);background:var(--bg);color:var(--tx);line-height:1.6;font-size:15px;min-height:100vh;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 40% at 30% 10%,rgba(56,189,248,.05) 0%,transparent 60%),
  radial-gradient(ellipse 40% 50% at 80% 85%,rgba(167,139,250,.04) 0%,transparent 60%);}
:root.light body::before{background:radial-gradient(ellipse 60% 40% at 30% 10%,rgba(56,189,248,.07) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 80% 85%,rgba(167,139,250,.05) 0%,transparent 60%);}

/* ─── SIDEBAR (fixed left) ─────────────────────── */
#sidebar{
  width:var(--sidebar);
  background:var(--s1);
  border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  z-index:900;
  transition:transform .27s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.sid-logo{padding:1.25rem 1.1rem .85rem;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.sid-logo-title{font-family:var(--fh);font-size:1.5rem;letter-spacing:4px;color:var(--c);line-height:1;}
.sid-logo-sub{font-size:.56rem;color:var(--mt);letter-spacing:2px;margin-top:.15rem;}
.sid-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:.3rem 0;}
.sid-scroll::-webkit-scrollbar{width:3px;}
.sid-scroll::-webkit-scrollbar-track{background:transparent;}
.sid-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
.sid-sep{font-size:.56rem;font-weight:800;letter-spacing:2px;color:var(--mt);padding:.8rem 1.1rem .2rem;text-transform:uppercase;}
.nav-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.62rem 1rem .62rem 1.15rem;
  cursor:pointer;
  border:none;border-left:3px solid transparent;
  font-size:.82rem;font-weight:600;color:var(--tx2);
  background:none;width:100%;text-align:left;
  font-family:var(--fm);transition:all .15s;
  white-space:nowrap;
}
.nav-item:hover{color:var(--tx);background:rgba(255,255,255,.05);border-left-color:rgba(56,189,248,.35);}
.nav-item.active{color:var(--c);background:linear-gradient(90deg,rgba(56,189,248,.13),rgba(56,189,248,.03));border-left-color:var(--c);font-weight:700;}
.nav-item .ni{font-size:1rem;width:22px;text-align:center;flex-shrink:0;}
.sid-bottom{padding:.8rem .9rem;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.sid-status{display:flex;justify-content:space-between;font-size:.62rem;margin-bottom:.5rem;color:var(--mt);}

/* ─── MOBILE TOP BAR ──────────────────────────── */
#mBar{
  display:none;position:fixed;top:0;left:0;right:0;height:54px;z-index:910;
  -webkit-transform:translateZ(0);transform:translateZ(0);
  background:rgba(13,17,23,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  align-items:center;justify-content:space-between;padding:0 1rem;
}
.mBar-title{font-family:var(--fh);font-size:1.25rem;letter-spacing:3px;color:var(--c);}
/* ── MOBILE QUICK ROW (below mBar) ─────────────── */
#mobileQuickRow{
  display:none;
  position:relative;z-index:1;
  background:rgba(13,17,23,.97);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:6px 10px;gap:6px;align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
}
#mobileQuickRow::-webkit-scrollbar{display:none;}
#mobileQuickRow .mqb{
  flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--tx2);padding:5px 10px;border-radius:8px;
  cursor:pointer;font-size:.68rem;font-weight:700;font-family:var(--fn);
  display:flex;align-items:center;gap:.28rem;white-space:nowrap;
}
#mobileQuickRow .mqb-child{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.18);color:#38bdf8;}
#mobileQuickRow .mqb-parent{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.2);color:#a78bfa;}
#mobileQuickRow .mqb-lang{background:rgba(255,255,255,.05);}
#mobileQuickRow .mob-translate-wrap{position:relative;flex-shrink:0;}
/* mob_translate_element is now position:fixed — see #mob_translate_element below */

/* Mobile translate dropdown — fixed position so it floats ABOVE everything */
#mob_translate_element{
  position:fixed;
  top:100px;left:8px;
  z-index:999999;
  background:#1e1e3a;border:1px solid rgba(56,189,248,.3);
  border-radius:10px;padding:8px;display:none;
  min-width:200px;
  box-shadow:0 16px 48px rgba(0,0,0,.85);
}
#mob_translate_element select{
  width:100%;font-size:.85rem;padding:.4rem .5rem;
  background:#0d1b2a;color:#fff;border:1px solid rgba(56,189,248,.2);
  border-radius:6px;cursor:pointer;
}

.hamb{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;
  color:var(--tx);font-size:1rem;padding:.35rem .6rem;cursor:pointer;line-height:1;transition:background .15s;}
.hamb:hover{background:rgba(255,255,255,.2);}
#sideOverlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.65);z-index:890;
  backdrop-filter:blur(2px);
}
#sideOverlay.open{display:block;}

/* ─── MAIN CONTENT ────────────────────────────── */
#mainWrap{margin-left:220px;min-height:100vh;position:relative;width:calc(100vw - 220px);padding-top:44px;overflow-x:hidden;}
#app{padding:1.6rem 1.8rem 6rem;max-width:100%;}

/* ─── SECTIONS (SPA — only active shows) ─────── */
.sec{display:none;}
.sec.active{display:block;}
/* fadeUp animation removed — was creating stacking contexts trapping fixed dropdowns */

/* ─── RESPONSIVE ──────────────────────────────── */

/* Desktop: sidebar locked on left */
@media(min-width:861px){
  #sidebar{transform:none !important;}
  #mBar{display:none !important;}
  #sideOverlay{display:none !important;}
}

/* Mobile: slide-in sidebar */
@media(max-width:860px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.mob-open{transform:translateX(0) !important;}
  #mainWrap{margin-left:0 !important;width:100% !important;}
  #app{padding:1rem .95rem 5rem;}
  #mBar{display:flex;}
  #mainWrap{padding-top:54px;}

  #topQuickBtns{display:none !important;}
  #mobileQuickRow{display:flex !important;}
  .g3,.g4{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  #app{padding:.8rem .7rem 5rem;}
  .g2,.g3,.g4{grid-template-columns:1fr !important;}
  .qs{grid-template-columns:repeat(3,1fr);gap:.45rem;}
}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.75rem;}
.ga{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;}
@media(max-width:768px){.g2,.g3,.g4{grid-template-columns:1fr;}}
@media(max-width:500px){.g2{grid-template-columns:1fr;}}

/* ── CARDS ─────────────────────────────────────── */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r);padding:1.3rem;position:relative;box-shadow:var(--card-shadow);}
.card-dark{background:var(--s1);}
.ct{font-family:var(--fh);letter-spacing:1.5px;font-size:.82rem;color:var(--c);margin-bottom:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.4rem;text-transform:uppercase;}

/* ── FORMS ─────────────────────────────────────── */
label{display:block;font-size:.78rem;color:#c8d4e8;font-weight:700;margin:.7rem 0 .25rem;letter-spacing:.3px;}
input,textarea,select{width:100%;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;padding:.58rem .85rem;color:var(--tx);font-family:var(--fm);font-size:.92rem;outline:none;transition:border-color .18s;font-weight:500;}
input:focus,textarea:focus,select:focus{border-color:rgba(56,189,248,.6);background:var(--input-bg);}
select option{background:var(--sel-bg);color:var(--tx);}
textarea{resize:vertical;min-height:76px;}
input[type=range]{padding:0;height:6px;accent-color:var(--c);}
input[type=file]{font-size:.8rem;padding:.4rem;color:#c8d4e8;}

/* ── BUTTONS ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.5rem 1.15rem;border-radius:8px;font-family:var(--fm);font-weight:600;font-size:.83rem;cursor:pointer;border:none;transition:all .15s;white-space:nowrap;min-height:36px;}
.bp{background:var(--c);color:#000;}.bp:hover{filter:brightness(1.1);box-shadow:0 0 14px rgba(56,189,248,.3);}
.bg_{background:var(--g);color:#000;}.bg_:hover{filter:brightness(1.1);}
.bgr{background:var(--gr);color:#000;}.bgr:hover{filter:brightness(1.1);}
.bpu{background:var(--p);color:#fff;}
.bgh{background:rgba(255,255,255,.12);color:#d4e0f0;border:1px solid rgba(255,255,255,.2);}.bgh:hover{color:#fff;background:rgba(255,255,255,.2);}
.bda{background:rgba(244,114,182,.18);color:#f9a8d4;border:1px solid rgba(244,114,182,.35);}
.bo{background:transparent;border:1px solid currentColor;}
.bs{padding:.3rem .7rem;font-size:.76rem;border-radius:6px;}
.eb{background:none;border:none;cursor:pointer;color:#c8d4e8;font-size:.77rem;padding:2px 5px;border-radius:4px;transition:color .13s;font-family:var(--fm);}
.eb:hover{color:var(--c);}
.db{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.35);font-size:.8rem;padding:2px 5px;font-family:var(--fm);}
.db:hover{color:var(--pk);}

/* ── TABS ──────────────────────────────────────── */
.tabs{display:flex;gap:.28rem;flex-wrap:wrap;margin-bottom:1rem;}
.tab{padding:.42rem 1rem;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;background:rgba(255,255,255,.1);color:#d4e0f0;border:none;transition:all .13s;font-family:var(--fm);}
.tab.active,.tab:hover{background:var(--c);color:#000;font-weight:700;}

/* ── SECTIONS ──────────────────────────────────── */
.sec{padding:2.2rem 0 .5rem;}
.sh{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;}
.si{font-size:1.5rem;}
.st{font-family:var(--fh);font-size:1.7rem;letter-spacing:2.5px;color:#fff;}
.sl{flex:1;height:1px;background:linear-gradient(90deg,rgba(56,189,248,.3),transparent);}
.sdiv{height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.08),transparent);margin:.6rem 0;}

/* ── PROGRESS ──────────────────────────────────── */
.pt{background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden;}
.pf{height:100%;border-radius:100px;transition:width .6s cubic-bezier(.4,0,.2,1);}

/* ── BADGES ────────────────────────────────────── */
.bdg{display:inline-flex;align-items:center;padding:.14rem .52rem;border-radius:100px;font-size:.67rem;font-weight:700;}
.bc{background:rgba(56,189,248,.15);color:var(--c);}
.bg2{background:rgba(251,191,36,.15);color:var(--g);}
.bgr2{background:rgba(52,211,153,.15);color:var(--gr);}
.bp2{background:rgba(167,139,250,.15);color:var(--p);}
.bpk{background:rgba(244,114,182,.15);color:var(--pk);}

/* nav CSS now replaced by sidebar — see above */

/* ── SETTINGS PANEL ────────────────────────────── */
#sp{position:fixed;top:0;right:-315px;width:300px;height:100vh;background:var(--s1);border-left:1px solid rgba(56,189,248,.2);z-index:99995;transition:right .28s;overflow-y:auto;padding:1.3rem 1rem 3rem;}
#sp.open{right:0;}
#so{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8800;display:none;}
#so.open{display:block;}
.tr{display:flex;align-items:center;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.08);}
.tg{width:42px;height:23px;border-radius:100px;background:rgba(255,255,255,.15);cursor:pointer;position:relative;transition:background .2s;border:none;flex-shrink:0;}
.tg.on{background:var(--c);}
.tg::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.tg.on::after{transform:translateX(19px);}

/* ── MODALS ────────────────────────────────────── */
.mo{display:none;position:fixed;inset:0;background:rgba(10,15,30,.88);backdrop-filter:blur(10px);z-index:9999;align-items:center;justify-content:center;padding:1rem;}
.mo.open{display:flex;}
.md{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:1.8rem;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.5);}
.md.wide{max-width:740px;}
.mdt{font-family:var(--fh);font-size:1.2rem;letter-spacing:2px;color:var(--c);margin-bottom:1.1rem;}
.ma{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.1rem;flex-wrap:wrap;}

/* ── TOAST ─────────────────────────────────────── */
.toast{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(255,255,255,.1);border:1px solid rgba(56,189,248,.25);border-radius:10px;padding:.65rem 1.4rem;font-size:.88rem;font-weight:600;z-index:99999;transition:transform .28s;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.toast.show{transform:translateX(-50%) translateY(0);}

.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:transparent;transition:all .15s;}
.pin-dot.filled{background:#38bdf8;border-color:#38bdf8;}
.pin-dot.error{background:#ef4444;border-color:#ef4444;animation:pinShake .3s ease;}
@keyframes pinShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.pin-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:.9rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .1s;font-family:var(--fn);}
.pin-btn:hover{background:rgba(255,255,255,.15);}
.pin-btn:active{transform:scale(.94);}

.child-avatar-hero{position:relative;flex-shrink:0;}
.child-avatar-circle{
  width:110px;height:110px;border-radius:50%;
  border:3px solid rgba(255,255,255,.4);
  background:linear-gradient(135deg,rgba(56,189,248,.3),rgba(139,92,246,.25));
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;cursor:pointer;overflow:hidden;
  box-shadow:0 0 0 3px rgba(56,189,248,.35),0 6px 28px rgba(0,0,0,.5);
  transition:all .22s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(4px);
  position:relative;
}
.child-avatar-circle:hover{
  border-color:rgba(56,189,248,.85);
  box-shadow:0 0 0 4px rgba(56,189,248,.5),0 6px 30px rgba(56,189,248,.35);
  transform:scale(1.04);
}
.child-avatar-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:absolute;inset:0;}
.child-avatar-edit-btn{
  position:absolute;bottom:2px;right:2px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(13,17,23,.9);border:2px solid rgba(56,189,248,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;cursor:pointer;
  transition:all .15s;backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.child-avatar-edit-btn:hover{background:rgba(56,189,248,.25);border-color:rgba(56,189,248,.9);}
@media(max-width:860px){.child-avatar-hero{display:none !important;}}

/* ── CHILD AVATAR PICKER MODAL ─────────────────────────── */
#childAvatarModal{display:none;position:fixed;inset:0;background:rgba(4,6,16,.94);backdrop-filter:blur(18px);z-index:9999;align-items:center;justify-content:center;padding:1rem;}
#childAvatarModal.open{display:flex;animation:camFadeIn .2s ease;}
@keyframes camFadeIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
.cam-inner{
  background:#0f1523;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  padding:1.8rem 1.8rem 1.4rem;
  width:100%;max-width:560px;
  box-shadow:0 32px 80px rgba(0,0,0,.9);
}
.cam-title{
  font-family:var(--fn);font-size:.7rem;font-weight:700;letter-spacing:3px;
  color:var(--c);margin-bottom:1.4rem;text-align:center;text-transform:uppercase;
}
/* Preview — large, centered */
.cam-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem;}
.cam-preview{
  width:110px;height:110px;border-radius:50%;
  border:3px solid rgba(56,189,248,.55);
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;overflow:hidden;position:relative;
  box-shadow:0 0 0 6px rgba(56,189,248,.08),0 10px 32px rgba(0,0,0,.6);
}
.cam-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.cam-preview-label{font-size:.58rem;font-family:var(--fn);color:var(--tx2);letter-spacing:2px;text-transform:uppercase;font-weight:700;}
/* Upload zone */
.cam-upload-zone{
  border:1px dashed rgba(255,255,255,.2);border-radius:10px;
  padding:.75rem 1rem;cursor:pointer;margin-bottom:.2rem;
  transition:all .15s;background:rgba(255,255,255,.02);
  display:flex;align-items:center;gap:.7rem;
}
.cam-upload-zone:hover,.cam-upload-zone.drag-over{border-color:rgba(56,189,248,.6);background:rgba(56,189,248,.06);}
.cam-upload-icon{font-size:1.5rem;flex-shrink:0;}
.cam-upload-label{font-size:.72rem;font-weight:700;font-family:var(--fn);color:var(--c);display:block;letter-spacing:.5px;}
.cam-upload-sub{font-size:.62rem;color:var(--tx2);margin-top:.1rem;display:block;}
/* Section labels */
.cam-section-label{font-size:.56rem;font-weight:700;font-family:var(--fn);letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.35);margin:.9rem 0 .45rem;}
/* Avatar grid — NO background on tiles, pure emoji */
.cam-avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:.15rem;}
.cam-av{
  width:100%;height:46px;border-radius:8px;border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;cursor:pointer;background:transparent;
  transition:all .12s;line-height:1;
}
.cam-av:hover{border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.1);transform:scale(1.15);}
.cam-av.selected{border-color:var(--c);background:rgba(56,189,248,.15);transform:scale(1.12);box-shadow:0 0 8px rgba(56,189,248,.45);}
.cam-actions{display:flex;gap:.5rem;justify-content:space-between;align-items:center;margin-top:1.1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.07);}



/* ── HERO ──────────────────────────────────────── */
.hn{font-family:var(--fh);font-size:2.8rem;letter-spacing:2px;line-height:1;}
.ct2{font-family:var(--fn);font-size:1.8rem;font-weight:700;color:var(--c);}
.sb{background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.3);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.85rem;}
.qs{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin:.85rem 0;}
@media(max-width:700px){.qs{grid-template-columns:repeat(3,1fr);}}
@media(max-width:440px){.qs{grid-template-columns:repeat(2,1fr);}}
.qsc{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:.8rem .65rem;text-align:center;}
.qsv{font-family:var(--fn);font-size:1.1rem;font-weight:700;margin-bottom:.18rem;}
.qsl{font-size:.63rem;color:#c8d4e8;text-transform:uppercase;letter-spacing:.8px;font-weight:600;}

/* ── FINANCE ───────────────────────────────────── */
.fst{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:.9rem 1rem;}
.fa{font-family:var(--fn);font-size:1.1rem;font-weight:700;margin-top:.2rem;}

/* ── SCHOOL ────────────────────────────────────── */
.cc{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:1.1rem;}
.gb{font-family:var(--fn);font-size:1.1rem;font-weight:900;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gA{background:rgba(52,211,153,.15);color:var(--gr);}
.gB{background:rgba(56,189,248,.12);color:var(--c);}
.gC{background:rgba(251,191,36,.12);color:var(--g);}
.gD,.gF{background:rgba(244,114,182,.12);color:var(--pk);}
.ai2{display:flex;align-items:center;gap:.55rem;padding:.52rem .78rem;background:rgba(255,255,255,.09);border-radius:8px;margin-bottom:.28rem;font-size:.86rem;color:#fff;}
.ph{border-left:3px solid var(--pk);}.pm{border-left:3px solid var(--g);}.pl{border-left:3px solid rgba(255,255,255,.3);}
.ck{width:18px;height:18px;border-radius:5px;border:2px solid rgba(255,255,255,.35);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.62rem;transition:all .13s;}
.ck.on{background:var(--gr);border-color:var(--gr);color:#000;}

/* ── SCHEDULE ──────────────────────────────────── */
.sched-wrap{overflow-x:auto;border-radius:10px;}
.sched-table{border-collapse:collapse;min-width:900px;width:100%;}
.sched-table th{background:rgba(255,255,255,.12);padding:.5rem .3rem;font-size:.66rem;font-weight:700;text-align:center;color:#fff;border:1px solid rgba(255,255,255,.1);white-space:nowrap;}
.sched-table th.today-col{background:rgba(56,189,248,.25);color:#fff;}
.sched-table td{border:1px solid rgba(255,255,255,.07);padding:1px;vertical-align:top;}
.sched-table td.time-cell{background:var(--s1);padding:.24rem .5rem;font-size:.64rem;color:var(--tx2);white-space:nowrap;text-align:right;font-weight:700;min-width:55px;}
.sched-table td.act-cell{background:#1a2030;min-width:62px;}
.sched-table td.act-cell.today-col{background:#1a2840;}
.act-cell select{width:100%;height:28px;background:#1c2236;border:none;color:#e8edf8;font-size:.6rem;cursor:pointer;outline:none;padding:0 2px;font-family:var(--fm);}
.act-cell select option{background:var(--sel-bg);color:var(--tx);}

/* ── CALENDAR ──────────────────────────────────── */
#cg{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:2px!important;}
.cd{min-height:72px;background:rgba(255,255,255,.08);border-radius:7px;padding:4px;cursor:pointer;border:1px solid transparent;}
.cd:hover{border-color:rgba(56,189,248,.2);}
.cd.td{border:2px solid var(--c);}
.cd.om{opacity:.28;}
.cdn{display:block;font-size:.72rem;font-weight:700;color:#fff;margin-bottom:2px;}
.cep{display:block;font-size:.54rem;padding:1px 3px;border-radius:3px;margin-bottom:1px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.edj{background:rgba(56,189,248,.22);color:var(--c);}
.ebjj{background:rgba(244,114,182,.22);color:var(--pk);}
.ewk{background:rgba(167,139,250,.22);color:var(--p);}
.ech{background:rgba(251,191,36,.18);color:var(--g);}
.esc{background:rgba(52,211,153,.18);color:var(--gr);}
.eot{background:rgba(255,255,255,.1);color:#ccc;}

/* ── CHECK-INS ─────────────────────────────────── */
.chi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.6rem .75rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:600;color:var(--tx2);user-select:none;}
.chi.done{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.45);color:#6ee7b7;}

/* ── TIMER ─────────────────────────────────────── */
.tdisp{font-family:var(--fn);font-size:3rem;font-weight:900;color:var(--c);text-align:center;padding:.7rem 0;letter-spacing:2px;}
.gpab{font-family:var(--fn);font-size:3.5rem;font-weight:900;text-align:center;line-height:1;}

/* ── CRAFT ─────────────────────────────────────── */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── STAT TILES ────────────────────────────────── */
.stat-tile{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:11px;padding:.9rem 1rem;}
.stat-val{font-family:var(--fn);font-size:1.2rem;font-weight:700;margin:.18rem 0 .08rem;}
.stat-lbl{font-size:.64rem;color:#c8d4e8;text-transform:uppercase;letter-spacing:.8px;font-weight:600;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--s1);}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px;}

/* ── TOOLTIPS ───────────────────────────────────── */
/* ── INLINE HELP BUTTONS ─────────────────────────────────── */
.hlp{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(56,189,248,.15);border:1px solid rgba(56,189,248,.3);color:#38bdf8;font-size:.58rem;font-weight:900;cursor:pointer;flex-shrink:0;vertical-align:middle;margin-left:4px;transition:all .15s;user-select:none;line-height:1;position:relative;}
.hlp:hover{background:rgba(56,189,248,.32);transform:scale(1.2);}
#hlpBox{position:fixed;z-index:99998;background:#0c1422;border:1px solid rgba(56,189,248,.35);border-radius:10px;padding:.7rem .9rem;max-width:270px;font-size:.76rem;color:#c8d4e8;line-height:1.6;box-shadow:0 6px 28px rgba(0,0,0,.7);pointer-events:none;transition:opacity .12s;opacity:0;}
#hlpBox.show{opacity:1;}
#hlpBox .hb-t{font-weight:800;color:#38bdf8;font-size:.78rem;margin-bottom:.28rem;}
/* ── BOUNCING ARROW HINT on ? buttons ─────────────────────── */
@keyframes hlpArrowBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-4px);}}
.hlp-arrow{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:.65rem;color:#38bdf8;animation:hlpArrowBounce 1s ease-in-out infinite;pointer-events:none;line-height:1;text-shadow:0 0 6px rgba(56,189,248,.6);z-index:2;}
.hlp-hint-done .hlp-arrow{display:none !important;}

.tip-wrap{position:relative;display:inline-flex;align-items:center;gap:.3rem;}
.tip-btn{width:17px;height:17px;border-radius:50%;background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.35);color:var(--c);font-size:.65rem;font-weight:800;cursor:help;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;font-family:var(--fm);line-height:1;}
.tip-btn:hover{background:rgba(56,189,248,.4);}
.tip-box{visibility:hidden;opacity:0;position:absolute;z-index:8000;background:#1a2540;border:1px solid rgba(56,189,248,.35);border-radius:10px;padding:.8rem 1rem;width:250px;font-size:.79rem;color:#d8e4f5;line-height:1.62;pointer-events:none;transition:opacity .18s;box-shadow:0 10px 35px rgba(0,0,0,.7);}

/* Getting Started onboarding */
.gs-step{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;cursor:pointer;transition:all .15s;}
.gs-step:active{background:rgba(139,92,246,.08);}
.gs-step.gs-done{opacity:.5;}
.gs-tip{display:none;background:linear-gradient(135deg,#1a2540,#1e2d4a);border:1px solid rgba(139,92,246,.25);border-radius:10px;padding:.7rem .9rem;font-size:.7rem;color:#d8e4f5;line-height:1.6;margin-top:.25rem;margin-bottom:.15rem;box-shadow:0 6px 20px rgba(0,0,0,.4);animation:gsTipIn .2s ease-out;}
.gs-tip.gs-show{display:block;}
@keyframes gsTipIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.tip-box.tip-right{left:calc(100% + 8px);top:50%;transform:translateY(-50%);}
.tip-box.tip-left{right:calc(100% + 8px);top:50%;transform:translateY(-50%);}
.tip-box.tip-below{left:0;top:calc(100% + 8px);}
.tip-box.tip-above{left:0;bottom:calc(100% + 8px);}
.tip-wrap:hover .tip-box{visibility:visible;opacity:1;}
.tip-title{font-family:var(--fh);font-size:.82rem;letter-spacing:1.5px;color:var(--c);margin-bottom:.38rem;}
.tip-box b{color:#fff;}

/* ── TUTORIAL CSS → see full definitions below ── */
#tutReturnBtn{position:fixed;bottom:1.4rem;right:1.1rem;z-index:99990;background:linear-gradient(135deg,#38bdf8,#818cf8);color:#000;border:none;border-radius:30px;padding:.65rem 1.3rem;font-size:.82rem;font-weight:900;cursor:pointer;font-family:var(--fn);letter-spacing:.5px;box-shadow:0 6px 24px rgba(56,189,248,.6);display:none;align-items:center;gap:.5rem;animation:pulseBtn 1.8s ease-in-out infinite;}
@keyframes pulseBtn{0%,100%{box-shadow:0 6px 24px rgba(56,189,248,.6);}50%{box-shadow:0 6px 32px rgba(56,189,248,.9);transform:translateY(-2px);}}
#tutReturnBtn.visible{display:flex;}
#wizReturnBtn{
  position:fixed;bottom:4.8rem;right:1.1rem;z-index:99990;
  background:linear-gradient(135deg,#38bdf8,#818cf8);color:#000;
  border:none;border-radius:30px;padding:.65rem 1.3rem;
  font-size:.82rem;font-weight:900;cursor:pointer;
  font-family:var(--fn);letter-spacing:.5px;
  box-shadow:0 6px 24px rgba(56,189,248,.6);
  display:none;align-items:center;gap:.5rem;
  animation:pulseBtn 1.8s ease-in-out infinite;
}
#wizReturnBtn.visible{display:flex;}

.tut-go-btn{display:inline-flex;align-items:center;gap:.3rem;margin-top:.45rem;padding:.3rem .75rem;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3);border-radius:7px;color:#38bdf8;font-size:.72rem;font-weight:700;cursor:pointer;font-family:var(--fn);transition:all .15s;}
.tut-go-btn:hover{background:rgba(56,189,248,.22);}
.tut-important{background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(251,191,36,.04));border:1px solid rgba(251,191,36,.35);border-left:4px solid #fbbf24;border-radius:10px;padding:.8rem 1rem;margin:.6rem 0;}
.tut-important .tut-imp-label{font-size:.65rem;font-weight:900;color:#fbbf24;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.3rem;}
.tut-important .tut-imp-text{font-size:.82rem;color:#fde68a;line-height:1.65;}
.tut-important .tut-imp-text b{color:#fff;display:block;margin-bottom:.1rem;}
#sp.child-view .sp-pb{display:none !important;}
#settingsPickerModal{
  display:none;position:fixed;inset:0;z-index:99995;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
}
#settingsPickerModal.open{display:flex;}
#settingsPickerModal .spm-box{
  background:var(--s2);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:1.4rem 1.2rem;width:92%;max-width:340px;
  box-shadow:0 12px 48px rgba(0,0,0,.6);
}
#settingsPickerModal .spm-title{
  font-family:var(--fh);font-size:1rem;letter-spacing:2px;color:var(--c);
  margin-bottom:.3rem;text-align:center;
}
#settingsPickerModal .spm-sub{
  font-size:.72rem;color:var(--tx2);text-align:center;margin-bottom:1rem;
}
#settingsPickerModal .spm-btn{
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.7rem .9rem;border-radius:11px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:var(--tx);cursor:pointer;
  font-size:.85rem;font-weight:700;font-family:var(--fm);
  margin-bottom:.5rem;transition:all .15s;text-align:left;
}
#settingsPickerModal .spm-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(56,189,248,.3);}
#settingsPickerModal .spm-btn.parent{border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.07);}
#settingsPickerModal .spm-btn.child{border-color:rgba(56,189,248,.25);background:rgba(56,189,248,.06);}
#settingsPickerModal .spm-cancel{
  width:100%;padding:.45rem;background:none;border:none;
  color:var(--tx3);font-size:.72rem;cursor:pointer;margin-top:.3rem;
}


.editable-name{color:var(--c);cursor:pointer;position:relative;}
.editable-name::after{content:' ✎';font-size:.45em;opacity:0;transition:opacity .2s;vertical-align:middle;color:var(--mt);}
.editable-name:hover::after{opacity:1;}

/* ── LIGHT MODE OVERRIDES ───────────────────────── */
:root.light body{background:var(--bg);}
:root.light #sidebar{background:#fff;border-right-color:rgba(0,0,0,.08);}
:root.light .sid-logo{border-bottom-color:rgba(0,0,0,.08);}
:root.light .sid-logo-sub{color:#94a3b8;}
:root.light .nav-item{color:#64748b;}
:root.light .nav-item:hover{color:#0f172a;background:rgba(0,0,0,.04);border-left-color:rgba(56,189,248,.5);}
:root.light .nav-item.active{color:var(--c);background:rgba(56,189,248,.1);border-left-color:var(--c);}
:root.light .sid-bottom{border-top-color:rgba(0,0,0,.08);}
:root.light #mBar{background:rgba(255,255,255,.97);border-bottom-color:rgba(0,0,0,.08);}
:root.light .mBar-title{color:var(--c);}
:root.light .hamb{border-color:rgba(0,0,0,.2);color:#475569;}
:root.light .card{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 2px 12px rgba(0,0,0,.07);}
:root.light .card-dark{background:#f8fafc;}
:root.light input,:root.light textarea,:root.light select{background:#f1f5f9;border-color:rgba(0,0,0,.15);color:#0f172a;}
:root.light input:focus,:root.light textarea:focus,:root.light select:focus{background:#e9eef5;}
:root.light select option{background:#f1f5f9;color:#0f172a;}
:root.light .btn.bgh{background:rgba(0,0,0,.07);color:#334155;border-color:rgba(0,0,0,.15);}
:root.light .btn.bgh:hover{background:rgba(0,0,0,.12);color:#0f172a;}
:root.light .tab{color:#64748b;}
:root.light .tab.on{background:var(--c);color:#000;}
:root.light .sh{border-bottom-color:rgba(0,0,0,.08);}
:root.light .sl{background:rgba(0,0,0,.08);}
:root.light .chi{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:#334155;}
:root.light .chi.done{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4);}
:root.light .sb{background:rgba(56,189,248,.07);border-color:rgba(56,189,248,.25);}
:root.light .qs{background:transparent;}
:root.light .qsc{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 6px rgba(0,0,0,.06);}
:root.light .fst{background:#fff;border:1px solid rgba(0,0,0,.08);}
:root.light .tip-btn{background:rgba(56,189,248,.15);border-color:rgba(56,189,248,.4);}
:root.light .tip-box{background:#fff;border-color:rgba(56,189,248,.3);box-shadow:0 8px 24px rgba(0,0,0,.15);color:#334155;}
:root.light .tip-title{color:var(--c);}
:root.light .tip-box b{color:#0f172a;}
:root.light #sp{background:#fff;border-left-color:rgba(0,0,0,.1);}
:root.light #sp label{color:#475569;}
:root.light .sched-table th{background:#e9eef5;color:#475569;}
:root.light .sched-table td.time-cell{background:#f0f4f8;color:#475569;}
:root.light .sched-table td{border-color:rgba(0,0,0,.07);}
:root.light .act-cell{background:#f8fafc;}
:root.light .act-cell select{background:#f1f5f9;color:#0f172a;}
:root.light .act-cell select option{background:#f1f5f9;color:#0f172a;}
:root.light #schedPicker{background:#fff;border-color:rgba(56,189,248,.3);}
:root.light .toast{background:#0f172a;color:#fff;}
:root.light .bdg{color:#334155;}
:root.light .bdg.bp2{background:rgba(167,139,250,.15);color:var(--p);}
:root.light .bdg.bg2{background:rgba(52,211,153,.15);color:var(--gr);}
:root.light .ct{color:var(--c);}
:root.light label{color:#475569;}
:root.light .tut-body,:root.light #tutInner{background:#fff;}
:root.light .tut-header{background:linear-gradient(135deg,rgba(56,189,248,.08),rgba(167,139,250,.05));}
:root.light .tut-nav,:root.light .tut-foot{background:#f8fafc;}
:root.light .tut-nb{background:rgba(0,0,0,.06);color:#475569;}

:root.light .tut-step p{color:#475569;}
:root.light .mo{background:rgba(0,0,0,.5);}
:root.light .md{background:#fff;border-color:rgba(0,0,0,.1);}
:root.light #themeBtn{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15);color:#475569;}
:root.light #themeBtnMob{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.18);color:#475569;}

/* ── RESUME BUILDER ─────────────────────────────── */
.res-tmpl-btn{padding:.32rem .75rem;border-radius:7px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:var(--tx2);font-size:.75rem;font-weight:700;cursor:pointer;font-family:var(--fm);transition:all .15s;}
.res-tmpl-btn:hover{border-color:rgba(56,189,248,.4);color:var(--tx);}
.res-tmpl-btn.active{background:var(--c);border-color:var(--c);color:#000;}
.res-entry{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.75rem .85rem;margin-bottom:.5rem;}
.res-entry-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;cursor:pointer;gap:.5rem;}
.res-entry-title{font-size:.82rem;font-weight:700;color:var(--tx);flex:1;}
.res-entry-body{display:none;}
.res-entry-body.open{display:block;}
:root.light .res-entry{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);}
:root.light .res-tmpl-btn{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.15);color:#475569;}
:root.light .res-tmpl-btn.active{background:var(--c);color:#000;}

/* ── RESUME PREVIEW TEMPLATES ───────────────────── */
#resumePreview{font-size:11px;line-height:1.5;}

/* PRINT STYLES */
@media print{
  #sidebar,#mBar,#so,#sp,#resumeEditor,#resumeLayout>div:first-child,
  .sh,nav,.btn,button,#sideOverlay,#mobileBar{display:none!important;}
  #mainWrap{margin-left:0!important;}
  #s-resume{display:block!important;}
  #resumePreviewWrap{position:static!important;box-shadow:none!important;}
  #resumePreview{box-shadow:none!important;border-radius:0!important;}
  body{background:#fff!important;}
  @page{margin:.5in;size:letter;}
}

/* ── CAREER HUB TABS ────────────────────────────── */
.r-panel{display:none;}
.r-panel.active{display:block;animation:fadeUp .2s ease;}

/* ── JOB TRACKER ────────────────────────────────── */
.jb-link{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .85rem;border-radius:8px;font-size:.78rem;font-weight:700;color:#fff;text-decoration:none;transition:filter .15s;}
.jb-link:hover{filter:brightness(1.15);}
.ja-card{background:var(--s2);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.85rem 1rem;position:relative;transition:border-color .15s;}
.ja-card:hover{border-color:rgba(56,189,248,.3);}
.ja-status{display:inline-block;padding:.22rem .65rem;border-radius:100px;font-size:.68rem;font-weight:800;letter-spacing:.3px;}
.ja-stat-pill{display:flex;align-items:center;gap:.3rem;padding:.28rem .65rem;border-radius:100px;font-size:.7rem;font-weight:700;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);}

/* Status colors */
.st-applied{background:rgba(56,189,248,.18);color:#7dd3fc;}
.st-phone{background:rgba(251,191,36,.18);color:#fcd34d;}
.st-interview{background:rgba(251,146,60,.2);color:#fdba74;}
.st-interview2{background:rgba(167,139,250,.2);color:#c4b5fd;}
.st-final{background:rgba(244,114,182,.2);color:#f9a8d4;}
.st-offer{background:rgba(52,211,153,.25);color:#6ee7b7;}
.st-accepted{background:rgba(52,211,153,.4);color:#059669;}
.st-waiting{background:rgba(148,163,184,.15);color:#94a3b8;}
.st-no{background:rgba(248,113,113,.15);color:#fca5a5;}
.st-withdrew{background:rgba(148,163,184,.1);color:#64748b;}

/* ── INTERVIEW PREP ──────────────────────────────── */
.prep-tip-row{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem .7rem;border-radius:9px;margin-bottom:.35rem;background:rgba(255,255,255,.04);font-size:.82rem;color:var(--tx2);line-height:1.55;}
.prep-tip-row b{color:var(--tx);}
.prep-gold{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);}
.prep-gold b{color:#fcd34d;}
.prep-red{background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.15);}
.prep-red b{color:#fca5a5;}
.prep-num{min-width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.1);font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tx);}
.prep-gold .prep-num{background:rgba(251,191,36,.2);color:#fcd34d;}
.prep-red .prep-num{background:rgba(248,113,113,.15);color:#fca5a5;}
.star-row{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem .7rem;border-radius:9px;margin-bottom:.35rem;background:rgba(255,255,255,.04);border-left:3px solid;font-size:.82rem;color:var(--tx2);line-height:1.55;}
.star-letter{width:26px;height:26px;border-radius:7px;font-size:.9rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bq-item{padding:.5rem .75rem;border-radius:8px;background:rgba(255,255,255,.05);border-left:3px solid rgba(56,189,248,.3);font-size:.8rem;color:var(--tx2);cursor:pointer;transition:all .15s;}
.bq-item:hover{background:rgba(56,189,248,.08);color:var(--tx);border-left-color:var(--c);}

/* Light mode overrides */
:root.light .ja-card{background:#fff;border-color:rgba(0,0,0,.1);}
:root.light .prep-tip-row{background:rgba(0,0,0,.03);color:#475569;}
:root.light .prep-tip-row b{color:#0f172a;}
:root.light .prep-gold{background:rgba(251,191,36,.07);}
:root.light .prep-red{background:rgba(248,113,113,.06);}
:root.light .star-row{background:rgba(0,0,0,.03);color:#475569;}
:root.light .bq-item{background:rgba(0,0,0,.03);color:#475569;}
:root.light .jb-link{opacity:.95;}

/* ── HERO CARD (full bleed photo) ───────────────── */
.logo-color-opt{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .12s;}
.logo-color-opt.active{border-color:#fff;box-shadow:0 0 0 2px var(--c);}
.logo-icon-opt.active{background:var(--c) !important;border-radius:5px;padding:.15rem .35rem;}
.hero-card{
  position:relative;border-radius:20px;overflow:hidden;
  min-height:200px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 40px rgba(0,0,0,.4);
}
.hero-bg-layer{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(79,143,255,.18) 0%,rgba(6,214,160,.12) 30%,rgba(167,139,250,.14) 60%,rgba(244,114,182,.1) 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:opacity .3s;
}
/* Grid pattern overlay */
.hero-card::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 30%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 30%,transparent 70%);
}
/* Floating orbs */
.hero-card::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:300px;height:300px;border-radius:50%;
  top:-80px;right:-60px;
  background:radial-gradient(circle,rgba(6,214,160,.12),rgba(79,143,255,.06),transparent 70%);
  animation:heroOrb 8s ease-in-out infinite alternate;
}
@keyframes heroOrb{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-30px,20px) scale(1.15);}}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(10,14,26,.5) 0%,rgba(10,14,26,.2) 40%,rgba(10,14,26,.45) 100%);
  z-index:1;
}
/* When no photo: show the vibrant gradient */
.hero-card.no-photo .hero-overlay{
  background:linear-gradient(160deg,rgba(10,14,26,.45) 0%,rgba(10,14,26,.15) 50%,rgba(10,14,26,.35) 100%);
}
.hero-photo-btn{
  position:absolute;top:.85rem;right:.85rem;z-index:10;
  width:34px;height:34px;border-radius:10px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;
}
.hero-photo-btn:hover{background:rgba(0,0,0,.65);border-color:rgba(255,255,255,.4);}
.hero-remove-btn{
  position:absolute;top:.85rem;right:3.1rem;z-index:10;
  width:34px;height:34px;border-radius:10px;
  background:rgba(248,113,113,.4);backdrop-filter:blur(6px);
  border:1px solid rgba(248,113,113,.5);
  color:#fff;font-size:.75rem;font-weight:800;
  cursor:pointer;transition:all .15s;
}
.hero-remove-btn:hover{background:rgba(248,113,113,.7);}
.hero-content{
  position:relative;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding:1.8rem 1.9rem 1.6rem;
}
.hero-left{flex:1;min-width:0;}
.hero-greet{font-size:.68rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:.4rem;}
.hero-name-wrap{line-height:1;}
.hero-name{
  font-family:var(--fh);font-size:clamp(2.4rem,7vw,4rem);
  letter-spacing:3px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero-name.editable-name::after{color:rgba(255,255,255,.5);}
.hero-date{font-size:.72rem;color:rgba(255,255,255,.65);margin-top:.5rem;}
.hero-badges{margin-top:.65rem;display:flex;gap:.4rem;flex-wrap:wrap;}
.hero-right{text-align:right;flex-shrink:0;}
.hero-clock{
  font-family:var(--fn);
  font-size:clamp(2.8rem,6vw,4.2rem);
  font-weight:900;color:#fff;
  line-height:1;letter-spacing:-1px;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.hero-clock-sub{
  font-size:.72rem;color:rgba(255,255,255,.6);
  margin-top:.3rem;letter-spacing:.5px;
}

/* ── ACCENT PALETTE SYSTEM ──────────────────────── */
/* Default (Cyan) — already set in :root */

:root[data-palette="violet"]{
  --c:#8b5cf6;--p:#06b6d4;--gr:#34d399;--g:#fbbf24;
  --br:rgba(139,92,246,0.2);
}
:root[data-palette="rose"]{
  --c:#f43f5e;--p:#a78bfa;--gr:#34d399;--g:#fbbf24;
  --br:rgba(244,63,94,0.2);
}
:root[data-palette="emerald"]{
  --c:#10b981;--p:#6366f1;--gr:#34d399;--g:#fbbf24;
  --br:rgba(16,185,129,0.2);
}
:root[data-palette="amber"]{
  --c:#f59e0b;--p:#8b5cf6;--gr:#34d399;--g:#fb923c;
  --br:rgba(245,158,11,0.2);
}
:root[data-palette="coral"]{
  --c:#ff6b6b;--p:#4ecdc4;--gr:#45b7d1;--g:#ffd93d;
  --br:rgba(255,107,107,0.2);
}
:root[data-palette="neon"]{
  --c:#39ff14;--p:#ff00ff;--gr:#00ffff;--g:#ffff00;
  --bg:#050505;--s1:#0a0a0a;--s2:#111;--s3:#161616;--s4:#1a1a1a;
  --br:rgba(57,255,20,0.2);
}

/* Palette picker UI */
.palette-swatch{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .15s;flex-shrink:0;
}
.palette-swatch:hover,.palette-swatch.active{
  border-color:#fff;transform:scale(1.15);
  box-shadow:0 0 10px rgba(255,255,255,.3);
}

/* Light mode hero tweaks */
:root.light .hero-card.no-photo .hero-overlay{
  background:linear-gradient(160deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.1) 100%);
}
:root.light .hero-card.no-photo .hero-bg-layer{
  background:
    linear-gradient(135deg,rgba(79,143,255,.2) 0%,rgba(6,214,160,.15) 30%,rgba(167,139,250,.18) 60%,rgba(244,114,182,.12) 100%);
}
:root.light .hero-card::after{
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
}
:root.light .hero-card::before{
  background:radial-gradient(circle,rgba(6,214,160,.15),rgba(79,143,255,.08),transparent 70%);
}
:root.light .hero-name{text-shadow:0 2px 12px rgba(0,0,0,.15);color:#1e293b;}
:root.light .hero-greet{color:rgba(30,41,59,.7);}
:root.light .hero-date{color:rgba(30,41,59,.6);}

/* ── TAX EDUCATION ──────────────────────────────── */
.tax-lesson{border-left:3px solid rgba(251,191,36,.3);padding:.6rem .8rem;margin-bottom:.55rem;background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;}
.tax-lesson-title{font-size:.8rem;font-weight:800;color:var(--tx);margin-bottom:.3rem;letter-spacing:.3px;}
.tax-callout{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);border-radius:8px;padding:.55rem .75rem;font-size:.78rem;color:var(--tx2);line-height:1.55;}
.tax-callout b{color:var(--g);}
.tax-date-card{background:rgba(255,255,255,.06);border:1px solid rgba(251,191,36,.2);border-radius:10px;padding:.65rem .8rem;}
.tax-date-month{font-family:var(--fh);font-size:.95rem;letter-spacing:1px;color:var(--g);font-weight:800;}
.tax-date-label{font-size:.72rem;color:var(--tx2);margin-top:.2rem;line-height:1.4;}
.tax-flow-step{border-left:3px solid;padding:.45rem .75rem;border-radius:0 8px 8px 0;background:rgba(255,255,255,.04);font-size:.8rem;color:var(--tx);}
.tax-badge{display:inline-block;padding:.3rem .75rem;border-radius:100px;border:1px solid;font-size:.76rem;color:var(--tx);}
.tax-credit-row{display:flex;align-items:flex-start;gap:.65rem;padding:.45rem .6rem;border-radius:8px;background:rgba(255,255,255,.04);margin-bottom:.3rem;font-size:.78rem;color:var(--tx2);}
.tax-credit-row b{color:var(--tx);}
.tax-credit-amt{min-width:72px;font-weight:800;font-size:.75rem;color:var(--gr);flex-shrink:0;padding-top:.05rem;}
.tax-quarter{background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.2);border-radius:8px;padding:.5rem .6rem;text-align:center;color:var(--tx2);}
.tax-quarter b{color:var(--or);}
.tax-result-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.65rem .75rem;text-align:center;}
.tax-result-lbl{font-size:.65rem;color:var(--tx2);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem;}
.tax-result-val{font-family:var(--fn);font-size:1.2rem;font-weight:800;color:var(--c);}
.tax-link{display:block;padding:.5rem .75rem;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.8rem;color:var(--c);text-decoration:none;transition:all .15s;}
.tax-link:hover{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.25);}
.tax-pro-tip{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.15);border-radius:9px;padding:.65rem .8rem;font-size:.78rem;color:var(--tx2);line-height:1.55;}
.tax-pro-tip b{color:var(--g);}

:root.light .tax-lesson{background:rgba(0,0,0,.02);}
:root.light .tax-date-card{background:#f8fafc;}
:root.light .tax-result-box{background:#f8fafc;border-color:rgba(0,0,0,.08);}
:root.light .tax-link{background:#f8fafc;border-color:rgba(0,0,0,.08);color:var(--c);}
:root.light .tax-pro-tip{background:rgba(251,191,36,.05);}

/* ══ LIFE SKILLS ACADEMY ════════════════════════════════════ */

/* Grid cards */
.sk-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:1.1rem .85rem;text-align:center;
  cursor:pointer;transition:all .18s;position:relative;overflow:hidden;
}
.sk-card:hover{border-color:rgba(56,189,248,.4);transform:translateY(-3px);background:rgba(56,189,248,.08);}
.sk-card-icon{font-size:1.9rem;margin-bottom:.4rem;}
.sk-card-name{font-weight:800;font-size:.82rem;color:var(--tx);margin-bottom:.15rem;}
.sk-card-meta{font-size:.62rem;color:var(--tx2);}
.sk-card-status{font-size:.65rem;font-weight:700;margin-top:.35rem;padding:.18rem .5rem;border-radius:100px;display:inline-block;}
.sk-pass{background:rgba(52,211,153,.15);color:var(--gr);border:1px solid rgba(52,211,153,.3);}
.sk-pending{background:rgba(56,189,248,.1);color:var(--c);border:1px solid rgba(56,189,248,.2);}
.sk-card-score{font-size:.62rem;color:var(--g);margin-top:.15rem;}
.sk-certified{border-color:rgba(251,191,36,.4)!important;background:rgba(251,191,36,.06)!important;}
.sk-certified::after{content:'🏆';position:absolute;top:.4rem;right:.5rem;font-size:.8rem;}

/* Stats pills */
.sk-stat-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .65rem;border-radius:100px;font-size:.72rem;font-weight:700;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--tx2);}

/* Modal tabs */
.sk-modal-tab{padding:.32rem .75rem;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--tx2);font-size:.74rem;font-weight:700;cursor:pointer;font-family:var(--fm);transition:all .13s;}
.sk-modal-tab.active{background:var(--c);border-color:var(--c);color:#000;}
.sk-modal-tab:hover:not(.active){border-color:rgba(56,189,248,.3);color:var(--tx);}

/* Lesson items */
.sk-lesson{display:flex;gap:.75rem;margin-bottom:.75rem;padding:.85rem;background:rgba(255,255,255,.05);border-radius:11px;border-left:3px solid var(--c);}
.sk-lesson-num{min-width:24px;height:24px;border-radius:7px;background:var(--c);color:#000;font-size:.7rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.05rem;}
.sk-lesson-body{flex:1;min-width:0;}
.sk-lesson-title{font-size:.88rem;font-weight:800;color:var(--tx);margin-bottom:.3rem;}
.sk-lesson-text{font-size:.81rem;color:var(--tx2);line-height:1.65;}
.sk-lesson-tip{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);border-radius:7px;padding:.42rem .6rem;margin-top:.4rem;font-size:.76rem;color:var(--g);}
.sk-lesson-ref{margin-top:.35rem;font-size:.74rem;color:var(--tx2);}

/* Quiz */
.sk-q-block{margin-bottom:1rem;padding:.85rem;background:rgba(255,255,255,.05);border-radius:11px;border:1px solid rgba(255,255,255,.08);}
.sk-q-num{font-size:.72rem;font-weight:700;color:var(--tx2);margin-bottom:.5rem;}
.sk-q-text{font-size:.87rem;font-weight:700;color:var(--tx);margin-left:.3rem;}
.sk-q-opts{display:flex;flex-direction:column;gap:.35rem;}
.sk-q-opt{display:flex;align-items:flex-start;gap:.55rem;padding:.45rem .65rem;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);cursor:pointer;font-size:.81rem;color:var(--tx2);transition:all .12s;}
.sk-q-opt:hover{background:rgba(56,189,248,.06);border-color:rgba(56,189,248,.25);}
.sk-q-opt input{margin-top:.18rem;flex-shrink:0;}
.sk-q-correct{background:rgba(52,211,153,.12)!important;border-color:rgba(52,211,153,.4)!important;color:var(--gr)!important;}
.sk-q-wrong{background:rgba(248,113,113,.1)!important;border-color:rgba(248,113,113,.3)!important;color:#fca5a5!important;}
.sk-q-explain{margin-top:.5rem;font-size:.77rem;color:var(--tx2);padding:.45rem .65rem;background:rgba(255,255,255,.04);border-radius:7px;border-left:3px solid var(--c);}

/* Score banner */
.sk-score-banner{text-align:center;padding:1.2rem;border-radius:14px;margin-bottom:1rem;}
.sk-score-pass{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);}
.sk-score-fail{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);}

/* Certificate */
.sk-cert{background:linear-gradient(135deg,#0a0e1a 0%,#111827 50%,#0a0e1a 100%);border-radius:16px;overflow:hidden;font-family:'Georgia',serif;}
.sk-cert-border{border:3px solid var(--g);margin:12px;border-radius:12px;padding:2rem 1.5rem;text-align:center;background:linear-gradient(135deg,rgba(251,191,36,.05),transparent 60%);}
.sk-cert-academy{font-size:.65rem;font-weight:700;letter-spacing:4px;color:var(--g);font-family:var(--fh);margin-bottom:1rem;}
.sk-cert-icon{font-size:2.8rem;margin-bottom:.5rem;}
.sk-cert-title{font-size:.75rem;letter-spacing:3px;color:var(--tx2);font-family:var(--fh);margin-bottom:1.2rem;text-transform:uppercase;}
.sk-cert-presents{font-size:.75rem;color:var(--tx2);margin-bottom:.3rem;font-style:italic;}
.sk-cert-name{font-size:1.8rem;font-weight:700;color:#fff;margin:.4rem 0;letter-spacing:1px;}
.sk-cert-subject{font-size:1.1rem;font-weight:700;color:var(--g);margin:.4rem 0 .6rem;letter-spacing:1px;}
.sk-cert-score{font-size:1.5rem;font-weight:800;color:var(--gr);margin:.3rem 0 1.2rem;}
.sk-cert-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:1.2rem;padding-top:.8rem;border-top:1px solid rgba(251,191,36,.2);}
.sk-cert-date{font-size:.7rem;color:var(--tx2);}
.sk-cert-seal{font-size:.7rem;font-weight:800;letter-spacing:2px;color:var(--g);padding:.3rem .8rem;border:1px solid rgba(251,191,36,.3);border-radius:100px;}
.sk-cert-sig{font-size:.7rem;color:var(--tx2);font-style:italic;}

/* Light mode */
:root.light .sk-card{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);}
:root.light .sk-card:hover{background:rgba(56,189,248,.05);}
:root.light .sk-lesson{background:rgba(0,0,0,.03);}
:root.light .sk-q-block{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08);}
:root.light .sk-q-opt{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.08);color:#475569;}
:root.light .sk-q-opt:hover{background:rgba(56,189,248,.05);}
:root.light .sk-modal-tab{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#475569;}
:root.light .sk-cert{background:linear-gradient(135deg,#f8fafc 0%,#fff 50%,#f8fafc 100%);}
:root.light .sk-cert-name{color:#0f172a;}

/* ── UPGRADED ACADEMY CARDS ─────────────────────────── */
.sk-card{position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);}
.sk-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 8px 32px rgba(0,0,0,.3);}
.sk-card-glow{position:absolute;inset:0;pointer-events:none;transition:opacity .2s;}
.sk-card:hover .sk-card-glow{opacity:1.5;}
.sk-card-badge{font-size:.62rem;font-weight:800;margin-top:.4rem;padding:.2rem .55rem;border-radius:100px;border:1px solid;display:inline-block;}

/* ── REFERENCE LINKS ─────────────────────────────────── */
.sk-refs-block{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.08);}
.sk-refs-title{font-size:.7rem;font-weight:800;letter-spacing:1.5px;color:var(--tx2);text-transform:uppercase;margin-bottom:.55rem;}
.sk-ref-link{display:flex;align-items:flex-start;gap:.65rem;padding:.55rem .7rem;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;margin-bottom:.35rem;transition:all .14s;color:var(--tx);}
.sk-ref-link:hover{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.25);}
.sk-ref-icon{font-size:1.1rem;flex-shrink:0;margin-top:.05rem;}
.sk-ref-label{font-size:.8rem;font-weight:700;color:var(--c);}
.sk-ref-desc{font-size:.72rem;color:var(--tx2);margin-top:.1rem;}

/* ── GORGEOUS CERTIFICATE ────────────────────────────── */
.sk-cert-outer{background:linear-gradient(145deg,#0d1117 0%,#111827 40%,#0d1117 100%);border-radius:18px;padding:4px;background-clip:padding-box;}
.sk-cert-inner{position:relative;border-radius:15px;padding:2.2rem 1.8rem 1.8rem;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.04) 0%,transparent 70%),linear-gradient(145deg,#0f172a,#1e293b);}
.sk-cert-corner{position:absolute;width:22px;height:22px;border-width:3px;border-style:solid;}
.sk-cert-corner.tl{top:12px;left:12px;border-right:none;border-bottom:none;border-top-left-radius:5px;}
.sk-cert-corner.tr{top:12px;right:12px;border-left:none;border-bottom:none;border-top-right-radius:5px;}
.sk-cert-corner.bl{bottom:12px;left:12px;border-right:none;border-top:none;border-bottom-left-radius:5px;}
.sk-cert-corner.br{bottom:12px;right:12px;border-left:none;border-top:none;border-bottom-right-radius:5px;}
.sk-cert-top{font-family:var(--fh);font-size:.7rem;letter-spacing:5px;font-weight:900;text-align:center;margin-bottom:.2rem;}
.sk-cert-icon-big{font-size:3.5rem;text-align:center;margin:.5rem 0;}
.sk-cert-name{font-size:2rem;font-weight:900;color:#fff;letter-spacing:1.5px;text-align:center;margin:.3rem 0;text-shadow:0 0 30px rgba(255,255,255,.2);}
.sk-cert-subject{font-size:1.05rem;font-weight:900;letter-spacing:2px;text-align:center;margin:.3rem 0 .5rem;}
.sk-cert-stars{font-size:1rem;text-align:center;letter-spacing:4px;margin:.3rem 0 .8rem;opacity:.8;}
.sk-cert-score-wrap{display:flex;justify-content:center;margin-bottom:1rem;}
.sk-cert-score-box{padding:.7rem 2rem;border-radius:12px;border:1px solid;text-align:center;}
.sk-cert-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.06);}
.sk-cert-seal{width:56px;height:56px;border-radius:50%;border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;}

/* light mode refs */
:root.light .sk-ref-link{background:#f8fafc;border-color:rgba(0,0,0,.08);}
:root.light .sk-ref-link:hover{background:rgba(56,189,248,.06);}
:root.light .sk-cert-inner{background:linear-gradient(145deg,#f0f4f8,#fff);}
:root.light .sk-cert-name{color:#0f172a;}

/* ── QUIZ — one-at-a-time redesign ─────────────────── */
.sk-q-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.1rem;overflow:hidden;}
.sk-q-header{display:flex;gap:.75rem;align-items:flex-start;border-left:3px solid;padding-left:.75rem;margin-bottom:.85rem;}
.sk-q-tag{font-size:.65rem;font-weight:900;letter-spacing:1px;padding:.2rem .55rem;border-radius:6px;flex-shrink:0;margin-top:.1rem;}
.sk-q-text{font-size:.92rem;font-weight:700;color:var(--tx);line-height:1.5;}

.sk-q-opt-btn{
  display:flex;align-items:center;gap:.65rem;width:100%;padding:.6rem .85rem;
  border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  color:var(--tx);font-size:.84rem;cursor:pointer;transition:all .14s;text-align:left;
  font-family:var(--fm);margin-bottom:.35rem;
}
.sk-q-opt-btn:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);transform:translateX(2px);}
.sk-q-opt-letter{
  min-width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.1);
  font-size:.7rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sq-correct{background:rgba(52,211,153,.15)!important;border-color:rgba(52,211,153,.5)!important;color:var(--gr)!important;animation:sqCorrectPop .4s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes sqCorrectPop{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes cfFadeIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.sk-result-pass{animation:cfFadeIn .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes resultBounce{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.sk-result-emoji{animation:resultBounce .6s cubic-bezier(.34,1.56,.64,1) .1s both;}
.sq-correct .sk-q-opt-letter{background:rgba(52,211,153,.3)!important;color:#fff!important;}
.sq-wrong{background:rgba(248,113,113,.12)!important;border-color:rgba(248,113,113,.4)!important;color:#fca5a5!important;}
.sq-wrong .sk-q-opt-letter{background:rgba(248,113,113,.3)!important;color:#fff!important;}

.sk-q-feedback{
  display:flex;align-items:flex-start;gap:.65rem;
  padding:.65rem .85rem;border-radius:10px;margin-top:.65rem;font-size:.82rem;line-height:1.55;
  animation:fadeUp .2s ease;
}
.sk-fb-correct{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);}
.sk-fb-wrong{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);}
.sk-fb-emoji{font-size:1.3rem;flex-shrink:0;line-height:1;}

/* Result screen */
.sk-result-card{border-radius:16px;padding:1.75rem 1.2rem;text-align:center;border:1px solid;}
.sk-result-pass{background:rgba(52,211,153,.07);border-color:rgba(52,211,153,.25);}
.sk-result-fail{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.15);}
.sk-result-emoji{font-size:3rem;margin-bottom:.5rem;}
.sk-result-pct{font-family:var(--fn);font-size:3rem;font-weight:900;line-height:1;margin-bottom:.3rem;}
.sk-result-msg{font-size:.9rem;margin-bottom:.25rem;}
.sk-result-detail{font-size:.78rem;color:var(--tx2);margin-bottom:.75rem;}
.sk-result-breakdown{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap;margin-bottom:.4rem;}
.sk-result-dot{width:12px;height:12px;border-radius:50%;}
.sk-dot-pass{background:var(--gr);}
.sk-dot-fail{background:#f87171;}

:root.light .sk-q-card{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);}
:root.light .sk-q-opt-btn{background:#fff;border-color:rgba(0,0,0,.1);color:#0f172a;}
:root.light .sk-q-opt-btn:hover:not(:disabled){background:#f1f5f9;border-color:rgba(0,0,0,.2);}
:root.light .sk-q-opt-letter{background:rgba(0,0,0,.08);}
:root.light .sk-result-card{background:#f8fafc;}

/* ════════════════════════════════════════════════════
   IMMERSIVE LESSON MODAL — accordion + progress design
   ════════════════════════════════════════════════════ */

/* Hero banner inside modal */
.sk-hero{
  position:relative;overflow:hidden;border-radius:14px;
  padding:1.6rem 1.4rem 1.4rem;margin-bottom:1.1rem;
  background:linear-gradient(135deg,var(--sk-col,#38bdf8)18 0%,transparent 70%),
             rgba(255,255,255,.04);
  border:1px solid var(--sk-col,#38bdf8);
}
.sk-hero::before{
  content:'';position:absolute;top:-40px;right:-30px;
  width:140px;height:140px;border-radius:50%;
  background:var(--sk-col,#38bdf8);opacity:.08;
}
.sk-hero-icon{font-size:2.6rem;line-height:1;margin-bottom:.5rem;}
.sk-hero-tagline{font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--sk-col,#38bdf8);font-weight:800;margin-bottom:.3rem;}
.sk-hero-desc{font-size:.85rem;color:var(--tx2);line-height:1.55;max-width:500px;}

/* Progress bar row */
.sk-progress-row{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem 1rem;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  margin-bottom:1rem;
}
.sk-progress-track{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden;}
.sk-progress-fill{height:100%;border-radius:100px;transition:width .4s ease;background:var(--sk-col,#38bdf8);}
.sk-progress-label{font-size:.7rem;font-weight:700;color:var(--tx2);white-space:nowrap;}

/* Accordion lesson cards */
.sk-acc-item{
  border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);margin-bottom:.5rem;
  overflow:hidden;transition:border-color .18s,box-shadow .18s;
}
.sk-acc-item.open{
  border-color:var(--sk-col,#38bdf8);
  box-shadow:0 0 0 1px var(--sk-col,#38bdf8)22,0 4px 20px rgba(0,0,0,.2);
}
.sk-acc-header{
  display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;
  cursor:pointer;user-select:none;transition:background .13s;
}
.sk-acc-header:hover{background:rgba(255,255,255,.04);}
.sk-acc-num{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:900;
  background:rgba(255,255,255,.08);color:var(--tx2);
  transition:all .18s;
}
.sk-acc-item.open .sk-acc-num{background:var(--sk-col,#38bdf8);color:#000;}
.sk-acc-item.read .sk-acc-num{background:rgba(52,211,153,.2);color:#34d399;}
.sk-acc-title{flex:1;font-size:.88rem;font-weight:700;color:var(--tx);line-height:1.35;}
.sk-acc-check{font-size:.85rem;opacity:0;transition:opacity .2s;}
.sk-acc-item.read .sk-acc-check{opacity:1;}
.sk-acc-arrow{font-size:.7rem;color:var(--tx2);transition:transform .2s;flex-shrink:0;}
.sk-acc-item.open .sk-acc-arrow{transform:rotate(90deg);}

/* Lesson body */
.sk-acc-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.sk-acc-body-inner{
  padding:.1rem 1rem 1.1rem 1rem;border-top:1px solid rgba(255,255,255,.07);
}
.sk-acc-body-inner p{font-size:.86rem;color:var(--tx2);line-height:1.7;margin:.6rem 0;}
.sk-acc-body-inner p:first-child{margin-top:.8rem;}
.sk-acc-body-inner ul,.sk-acc-body-inner ol{
  padding-left:1.2rem;margin:.5rem 0;
}
.sk-acc-body-inner li{font-size:.84rem;color:var(--tx2);line-height:1.65;margin-bottom:.3rem;}
.sk-acc-body-inner strong{color:var(--tx);font-weight:700;}
.sk-acc-body-inner b{color:var(--tx);}

/* Tip box inside accordion */
.sk-acc-tip{
  margin-top:.85rem;padding:.7rem .9rem;border-radius:10px;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);
  display:flex;gap:.55rem;align-items:flex-start;
}
.sk-acc-tip-icon{font-size:1rem;flex-shrink:0;line-height:1.3;}
.sk-acc-tip-text{font-size:.79rem;color:var(--tx2);line-height:1.55;}
.sk-acc-tip-text strong{color:#fbbf24;}

/* Mark read button */
.sk-mark-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.9rem;padding:.4rem .85rem;border-radius:8px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
  font-size:.74rem;font-weight:700;color:var(--tx2);cursor:pointer;
  transition:all .14s;font-family:var(--fm);
}
.sk-mark-btn:hover{border-color:var(--sk-col,#38bdf8);color:var(--tx);}
.sk-mark-btn.marked{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.3);color:#34d399;}

/* Refs block */
.sk-refs-block{margin-top:1rem;}
.sk-refs-title{font-size:.68rem;font-weight:900;letter-spacing:2px;
  color:var(--tx2);text-transform:uppercase;margin-bottom:.5rem;}
.sk-ref-link{
  display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .7rem;
  border-radius:9px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);text-decoration:none;
  margin-bottom:.3rem;transition:all .13s;color:var(--tx);
}
.sk-ref-link:hover{background:rgba(56,189,248,.07);border-color:rgba(56,189,248,.25);}
.sk-ref-icon{font-size:1rem;flex-shrink:0;margin-top:.05rem;}
.sk-ref-label{font-size:.79rem;font-weight:700;color:var(--sk-col,#38bdf8);}
.sk-ref-desc{font-size:.71rem;color:var(--tx2);margin-top:.08rem;}

/* Light mode */
:root.light .sk-acc-item{background:#fff;border-color:rgba(0,0,0,.09);}
:root.light .sk-acc-item.open{box-shadow:0 2px 16px rgba(0,0,0,.1);}
:root.light .sk-acc-header:hover{background:rgba(0,0,0,.02);}
:root.light .sk-acc-num{background:rgba(0,0,0,.06);color:#64748b;}
:root.light .sk-acc-body-inner p,:root.light .sk-acc-body-inner li{color:#475569;}
:root.light .sk-acc-body-inner strong,:root.light .sk-acc-body-inner b{color:#0f172a;}
:root.light .sk-hero{background:linear-gradient(135deg,var(--sk-col,#38bdf8)15 0%,transparent 70%),#f8fafc;}
:root.light .sk-progress-row{background:#f1f5f9;border-color:#e2e8f0;}
:root.light .sk-ref-link{background:#f8fafc;border-color:#e2e8f0;}


/* ═══════════════════════════════════════
   GOALS & VISION — expanded section CSS
   ═══════════════════════════════════════ */

/* Vision statement banner */
.gv-vision-card{
  position:relative;overflow:hidden;
  border-radius:16px;padding:1.4rem 1.4rem 1.3rem;
  margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(139,92,246,.18) 0%,rgba(56,189,248,.1) 100%);
  border:1px solid rgba(139,92,246,.35);
}
.gv-vision-card::before{
  content:'';position:absolute;top:-50px;right:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.25),transparent 70%);
  pointer-events:none;
}
.gv-vision-label{
  font-size:.62rem;letter-spacing:3px;font-weight:900;
  text-transform:uppercase;color:rgba(139,92,246,.9);margin-bottom:.4rem;
}
.gv-vision-text{
  font-size:1.02rem;font-weight:700;color:var(--tx);
  line-height:1.5;min-height:1.4rem;
  font-style:italic;
}
.gv-vision-placeholder{color:var(--tx2);font-weight:400;font-style:normal;font-size:.88rem;}
.gv-vision-edit{
  margin-top:.75rem;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:700;color:rgba(139,92,246,.8);
  cursor:pointer;border:none;background:none;font-family:var(--fm);
  padding:.3rem .6rem;border-radius:7px;
  border:1px solid rgba(139,92,246,.25);transition:all .13s;
}
.gv-vision-edit:hover{background:rgba(139,92,246,.12);color:var(--tx);}

/* Timeline row — 1/3/5/10 year */
.gv-timeline{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:.5rem;margin-bottom:1rem;
}
.gv-tl-card{
  border-radius:12px;padding:.75rem .7rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  cursor:pointer;transition:all .16s;text-align:center;
  position:relative;
}
.gv-tl-card:hover{background:rgba(255,255,255,.07);border-color:var(--c);}
.gv-tl-card.has-content{border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.05);}
.gv-tl-year{
  font-size:.62rem;font-weight:900;letter-spacing:2px;
  text-transform:uppercase;color:var(--c);margin-bottom:.3rem;
}
.gv-tl-preview{
  font-size:.73rem;color:var(--tx2);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.gv-tl-add{font-size:.72rem;color:var(--tx2);opacity:.5;}
.gv-tl-dot{
  position:absolute;top:.5rem;right:.5rem;
  width:7px;height:7px;border-radius:50%;
  background:var(--c);opacity:0;transition:opacity .2s;
}
.gv-tl-card.has-content .gv-tl-dot{opacity:1;}

/* Goal cards */
.gv-goal-card{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.8rem 1rem;border-radius:12px;margin-bottom:.45rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:all .14s;
}
.gv-goal-card.done{opacity:.5;}
.gv-goal-check{
  width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  flex-shrink:0;margin-top:.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;transition:all .14s;
}
.gv-goal-card.done .gv-goal-check{background:#34d399;border-color:#34d399;}
.gv-goal-check:hover{border-color:var(--c);}
.gv-goal-body{flex:1;min-width:0;}
.gv-goal-text{font-size:.86rem;font-weight:600;color:var(--tx);line-height:1.4;}
.gv-goal-card.done .gv-goal-text{text-decoration:line-through;color:var(--tx2);}
.gv-goal-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem;align-items:center;}
.gv-goal-tag{
  font-size:.62rem;font-weight:800;letter-spacing:1px;
  padding:.15rem .45rem;border-radius:5px;
  text-transform:uppercase;
}
.gv-goal-tag.long{background:rgba(139,92,246,.15);color:#a78bfa;}
.gv-goal-tag.short{background:rgba(251,191,36,.12);color:#fbbf24;}
.gv-goal-tag.done-tag{background:rgba(52,211,153,.12);color:#34d399;}
.gv-goal-cat{font-size:.68rem;color:var(--tx2);}
.gv-goal-date{font-size:.65rem;color:var(--tx2);margin-left:auto;}
.gv-goal-del{
  background:none;border:none;color:var(--tx2);
  cursor:pointer;font-size:.8rem;padding:.2rem;opacity:.4;
  transition:opacity .13s;flex-shrink:0;
}
.gv-goal-del:hover{opacity:1;color:#f87171;}

/* Stats strip */
.gv-stats{
  display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;
}
.gv-stat{
  flex:1;min-width:80px;
  border-radius:11px;padding:.65rem .8rem;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.gv-stat-num{font-size:1.4rem;font-weight:900;color:var(--tx);line-height:1;}
.gv-stat-lbl{font-size:.64rem;color:var(--tx2);margin-top:.2rem;letter-spacing:.5px;}

/* Section header with add button */
.gv-subhead{
  display:flex;align-items:center;justify-content:space-between;
  margin:.9rem 0 .5rem;
}
.gv-subhead-title{
  font-size:.68rem;font-weight:900;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--tx2);
}
.gv-add-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:700;padding:.32rem .7rem;
  border-radius:8px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:var(--tx);
  cursor:pointer;transition:all .13s;font-family:var(--fm);
}
.gv-add-btn:hover{border-color:var(--c);background:rgba(56,189,248,.08);}

/* Empty state */
.gv-empty{
  text-align:center;padding:1.5rem;
  font-size:.83rem;color:var(--tx2);
}

/* Vision / Timeline edit modal fields */
#visionEditArea{
  width:100%;min-height:80px;resize:vertical;
  font-size:.93rem;line-height:1.6;padding:.7rem .9rem;
}
#tlEditArea{
  width:100%;min-height:90px;resize:vertical;
  font-size:.86rem;line-height:1.6;padding:.7rem .9rem;
}

/* Light mode */
:root.light .gv-vision-card{background:linear-gradient(135deg,rgba(139,92,246,.1) 0%,rgba(56,189,248,.06) 100%);}
:root.light .gv-tl-card{background:#fff;border-color:#e2e8f0;}
:root.light .gv-tl-card.has-content{border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.04);}
:root.light .gv-goal-card{background:#fff;border-color:#e2e8f0;}
:root.light .gv-stat{background:#fff;border-color:#e2e8f0;}


/* ═══════════════════════════════════════
   CAREER EXPLORER — cards + modal CSS
   ═══════════════════════════════════════ */

/* Career grid cards */
.cv-card{
  border-radius:12px;padding:.8rem .75rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  cursor:pointer;transition:all .16s;
  display:flex;flex-direction:column;gap:.25rem;
  position:relative;
}
.cv-card:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(56,189,248,.4);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.cv-card.starred{
  border-color:rgba(251,191,36,.45);
  background:rgba(251,191,36,.05);
}
.cv-card-top{display:flex;align-items:flex-start;justify-content:space-between;}
.cv-card-icon{font-size:1.7rem;line-height:1;}
.cv-card-star{
  font-size:1rem;cursor:pointer;opacity:.5;
  transition:opacity .13s,transform .13s;
  background:none;border:none;padding:.1rem;
  line-height:1;
}
.cv-card-star:hover{opacity:1;transform:scale(1.2);}
.cv-card.starred .cv-card-star{opacity:1;}
.cv-card-name{font-size:.82rem;font-weight:800;color:var(--tx);line-height:1.3;margin-top:.2rem;}
.cv-card-salary{font-size:.7rem;color:var(--c);font-weight:700;}
.cv-card-tag{
  display:inline-block;font-size:.6rem;font-weight:900;
  letter-spacing:1px;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:5px;
  margin-top:.1rem;align-self:flex-start;
}

/* Career Modal */
#careerModal .md{
  max-width:560px;width:95vw;max-height:90vh;
  overflow:hidden;display:flex;flex-direction:column;
  padding:0;border-radius:18px;
}
.cm-header{
  padding:1.3rem 1.4rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.cm-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;}
.cm-icon-wrap{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;background:rgba(255,255,255,.07);
  flex-shrink:0;
}
.cm-title-block{flex:1;}
.cm-name{font-size:1.15rem;font-weight:900;color:var(--tx);line-height:1.2;}
.cm-meta{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;flex-wrap:wrap;}
.cm-tag{
  font-size:.62rem;font-weight:900;letter-spacing:1px;
  text-transform:uppercase;padding:.18rem .5rem;border-radius:6px;
}
.cm-salary-badge{
  font-size:.75rem;font-weight:800;color:#4ade80;
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25);
  padding:.18rem .55rem;border-radius:6px;
}
.cm-star-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:.65rem;padding:.38rem .85rem;
  border-radius:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);font-size:.76rem;
  font-weight:800;color:var(--tx);cursor:pointer;
  transition:all .14s;font-family:var(--fm);
}
.cm-star-btn:hover{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08);color:#fbbf24;}

/* Modal scrollable body */
.cm-body{flex:1;overflow-y:auto;padding:1rem 1.4rem 1.2rem;}
.cm-section{margin-bottom:1rem;}
.cm-section-label{
  font-size:.63rem;font-weight:900;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--c);
  margin-bottom:.35rem;
}
.cm-text{font-size:.84rem;color:var(--tx2);line-height:1.68;margin:0;}
.cm-list{
  padding-left:1.2rem;margin:0;
}
.cm-list li{font-size:.83rem;color:var(--tx2);line-height:1.65;margin-bottom:.2rem;}

/* Faith callout */
.cm-faith{
  margin-top:1.1rem;padding:.85rem 1rem;
  border-radius:12px;
  background:rgba(192,132,252,.08);
  border:1px solid rgba(192,132,252,.25);
}
.cm-faith-label{
  font-size:.63rem;font-weight:900;letter-spacing:2px;
  text-transform:uppercase;color:#c084fc;margin-bottom:.35rem;
}
.cm-faith-text{font-size:.83rem;color:var(--tx2);line-height:1.65;margin:0;font-style:italic;}

/* Light mode */
:root.light .cv-card{background:#fff;border-color:#e2e8f0;}
:root.light .cv-card:hover{background:#f8fafc;}
:root.light .cv-card.starred{background:rgba(251,191,36,.06);}
:root.light .cm-text,:root.light .cm-list li,:root.light .cm-faith-text{color:#475569;}
:root.light .cm-header{border-bottom-color:#e2e8f0;}


/* ═══════════════════════════════════════
   USER PROFILE SYSTEM
   ═══════════════════════════════════════ */

/* Profile button in sidebar / hero */
.profile-btn{
  display:flex;align-items:center;gap:.55rem;
  padding:.45rem .75rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;transition:all .14s;
  font-family:var(--fm);color:var(--tx);
  font-size:.78rem;font-weight:700;
}
.profile-btn:hover{border-color:var(--c);background:rgba(56,189,248,.08);}
.profile-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
  background:linear-gradient(135deg,var(--c),#8b5cf6);
  color:#fff;font-weight:900;font-size:.85rem;
}
.profile-avatar.parent{background:linear-gradient(135deg,#f59e0b,#ef4444);}

/* Profile Modal */
.pm-header{
  padding:1.4rem 1.4rem .9rem;
  background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(139,92,246,.08));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pm-avatar-large{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;margin:0 auto .75rem;
  background:linear-gradient(135deg,var(--c),#8b5cf6);
  border:3px solid rgba(255,255,255,.15);
}
.pm-avatar-large.parent{background:linear-gradient(135deg,#f59e0b,#ef4444);}
.pm-name-display{
  text-align:center;font-size:1.1rem;font-weight:900;
  color:var(--tx);line-height:1.2;
}
.pm-sub-display{
  text-align:center;font-size:.75rem;color:var(--tx2);
  margin-top:.2rem;
}
.pm-badge-row{
  display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;
  margin-top:.6rem;
}
.pm-badge{
  font-size:.65rem;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:6px;
  background:rgba(255,255,255,.08);color:var(--tx2);
  border:1px solid rgba(255,255,255,.1);
}
.pm-badge.highlighted{background:rgba(56,189,248,.15);color:var(--c);border-color:rgba(56,189,248,.3);}

/* Profile form fields */
.pm-section-label{
  font-size:.63rem;font-weight:900;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--tx2);
  margin:1rem 0 .45rem;
}
.pm-field-row{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
  margin-bottom:.5rem;
}
.pm-field-full{margin-bottom:.5rem;}

/* Toggle pills for sex selection */
.pm-pill-group{display:flex;gap:.35rem;}
.pm-pill{
  flex:1;padding:.45rem;text-align:center;
  border-radius:9px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);cursor:pointer;
  font-size:.8rem;font-weight:700;color:var(--tx2);
  transition:all .13s;font-family:var(--fm);
}
.pm-pill:hover{border-color:var(--c);}
.pm-pill.active{
  border-color:var(--c);
  background:rgba(56,189,248,.12);color:var(--c);
}

/* Parent mode toggle */
.pm-parent-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem .9rem;border-radius:11px;
  background:rgba(245,158,11,.07);
  border:1px solid rgba(245,158,11,.2);
  margin-bottom:.5rem;cursor:pointer;
}
.pm-parent-toggle-info{flex:1;}
.pm-parent-toggle-label{font-size:.84rem;font-weight:800;color:var(--tx);}
.pm-parent-toggle-desc{font-size:.71rem;color:var(--tx2);margin-top:.1rem;}
.pm-toggle-switch{
  width:40px;height:22px;border-radius:11px;
  background:rgba(255,255,255,.1);position:relative;
  transition:background .2s;flex-shrink:0;
}
.pm-toggle-switch.on{background:var(--c);}
.pm-toggle-switch::after{
  content:'';position:absolute;
  width:18px;height:18px;border-radius:50%;
  background:#fff;top:2px;left:2px;
  transition:transform .2s;
}
.pm-toggle-switch.on::after{transform:translateX(18px);}

/* Parent fields */
.pm-parent-fields{
  max-height:0;overflow:hidden;transition:max-height .3s;
}
.pm-parent-fields.open{max-height:200px;}

/* Age range selector */
.pm-age-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;
}
.pm-age-btn{
  padding:.5rem .3rem;text-align:center;
  border-radius:9px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);cursor:pointer;
  font-size:.78rem;font-weight:700;color:var(--tx2);
  transition:all .13s;font-family:var(--fm);
}
.pm-age-btn:hover{border-color:var(--c);}
.pm-age-btn.active{border-color:var(--c);background:rgba(56,189,248,.12);color:var(--c);}

/* Education selector */
.pm-edu-list{display:flex;flex-direction:column;gap:.3rem;}
.pm-edu-btn{
  padding:.5rem .8rem;text-align:left;
  border-radius:9px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);cursor:pointer;
  font-size:.79rem;font-weight:700;color:var(--tx2);
  transition:all .13s;font-family:var(--fm);
  display:flex;align-items:center;gap:.5rem;
}
.pm-edu-btn:hover{border-color:var(--c);}
.pm-edu-btn.active{border-color:var(--c);background:rgba(56,189,248,.12);color:var(--c);}

/* Profile setup welcome (first launch) */
.pm-welcome{
  text-align:center;padding:.5rem 0 .75rem;
}
.pm-welcome-emoji{font-size:2.5rem;margin-bottom:.4rem;}
.pm-welcome-title{font-size:1rem;font-weight:900;color:var(--tx);margin-bottom:.25rem;}
.pm-welcome-desc{font-size:.8rem;color:var(--tx2);line-height:1.55;}

/* Light mode */
:root.light .pm-pill{background:#f8fafc;border-color:#e2e8f0;}
:root.light .pm-age-btn,:root.light .pm-edu-btn{background:#f8fafc;border-color:#e2e8f0;}
:root.light .pm-parent-toggle{background:rgba(245,158,11,.05);}


/* Dashboard Cards */
.dcard{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:.8rem;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dcard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.12);box-shadow:0 6px 20px rgba(0,0,0,.2);}
.dcard-status{position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;}
.dcard-status.green{background:#22c55e;}
.dcard-status.red{background:#ef4444;}
.dcard-status.yellow{background:#fbbf24;}
.dcard-icon{font-size:1.4rem;margin-bottom:.15rem;}
.dcard-label{font-size:.6rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--tx2);font-weight:700;margin-bottom:.1rem;}
.dcard-value{font-size:1.7rem;font-weight:900;color:var(--tx);line-height:1.1;}
.dcard-sub{font-size:.62rem;color:var(--tx2);margin-top:.1rem;}
@media(max-width:900px){.dashGrid{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:500px){.dashGrid{grid-template-columns:repeat(2,1fr)!important;}}


/* Lesson modal body styling */
.lesson-body h4{color:var(--c);font-size:.95rem;font-weight:800;margin:1.2rem 0 .5rem;padding-bottom:.3rem;border-bottom:2px solid rgba(56,189,248,.15);}
.lesson-body h4:first-child{margin-top:0;}
.lesson-body p{margin-bottom:.8rem;font-size:.88rem;line-height:1.8;}
.lesson-body b,.lesson-body strong{color:var(--tx);font-weight:700;}
.lesson-body ul,.lesson-body ol{padding-left:1.2rem;margin-bottom:.8rem;}
.lesson-body li{margin-bottom:.4rem;line-height:1.7;}

/* Parent Hub left nav */
.ph-nav-item{padding:.5rem .6rem;border-radius:8px;font-size:.72rem;font-weight:600;color:var(--tx2);cursor:pointer;margin-bottom:.15rem;transition:all .15s;border:1px solid transparent;}
.ph-nav-item:hover{background:rgba(255,255,255,.04);color:var(--tx);}
.ph-nav-item.active{background:rgba(139,92,246,.08);color:#a78bfa;border-color:rgba(139,92,246,.15);font-weight:700;}
@media(max-width:700px){#phLayout{flex-direction:column!important;}#phLeftNav{width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:.2rem!important;padding:.3rem!important;}.ph-nav-item{padding:.3rem .5rem!important;font-size:.6rem!important;}}

/* Nav group styling */
.nav-group{margin-bottom:.1rem;}
.nav-group-toggle{opacity:.85;}
.nav-group-toggle:hover{opacity:1;}
.nav-child{opacity:.9;font-size:.76rem!important;}
.nav-child:hover{opacity:1;}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.child-pin-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:.9rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .1s;font-family:var(--fn);}
.child-pin-btn:hover{background:rgba(255,255,255,.15);}
.child-pin-btn:active{transform:scale(.94);}
/* Google Translate */
#google_translate_element .goog-te-gadget{font-size:0!important;color:transparent!important;}
#google_translate_element .goog-te-gadget select,
#google_translate_element .goog-te-combo{
  font-size:.8rem!important;
  background:transparent!important;
  color:#e0e0e0!important;
  border:none!important;
  width:100%!important;
  cursor:pointer!important;
  outline:none!important;
  padding:2px 4px!important;
}
#google_translate_element .goog-te-gadget select option,
#google_translate_element .goog-te-combo option{
  background:#1e1e3a!important;
  color:#e0e0e0!important;
}
.goog-te-banner-frame{display:none!important;}
iframe.skiptranslate{display:none!important;}
body{top:0!important;}
#goog-gt-tt{display:none!important;}


/* ════ FLOATING START-HERE BUTTON ════════════════════════ */
#startHereBtn{
  position:fixed;
  /* Hero section center — below top bars, visible in hero */
  bottom:auto;
  top:50%;
  right:50%;
  transform:translate(50%,-50%);
  z-index:8800;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;
  transition:opacity .4s, transform .4s;
}
#startHereBtn.sh-hidden{
  opacity:0;pointer-events:none;transform:translate(50%,-50%) scale(.7);
}
#startHereBtn .sh-bubble{
  background:linear-gradient(135deg,#38bdf8,#818cf8);
  color:#fff;font-size:.8rem;font-weight:900;
  padding:6px 14px;border-radius:100px;white-space:nowrap;
  box-shadow:0 6px 24px rgba(56,189,248,.6);
  letter-spacing:.3px;
  animation:shPulse 2s ease-in-out infinite;
}
@keyframes shPulse{
  0%,100%{box-shadow:0 6px 24px rgba(56,189,248,.6);}
  50%{box-shadow:0 6px 36px rgba(56,189,248,1), 0 0 60px rgba(56,189,248,.3);}
}
#startHereBtn .sh-emoji{
  font-size:3rem;
  animation:shBounce 1s cubic-bezier(.36,.07,.19,.97) infinite;
  filter:drop-shadow(0 6px 12px rgba(56,189,248,.5));
}
@keyframes shBounce{
  0%,100%{transform:translateY(0) rotate(0deg);}
  30%{transform:translateY(-12px) rotate(-5deg);}
  60%{transform:translateY(-5px) rotate(3deg);}
  80%{transform:translateY(-9px) rotate(-2deg);}
}
#startHereBtn:hover .sh-emoji{animation-play-state:paused;transform:scale(1.2) rotate(0);}
@media(max-width:860px){
  #startHereBtn{ top:55%; right:12px; }
}

/* ════ ONBOARDING WIZARD (PARENT) ═══════════════════════ */
#parentOnboard{
  display:none;position:fixed;inset:0;z-index:99998;
  background:rgba(0,0,0,.93);backdrop-filter:blur(18px);
  align-items:center;justify-content:center;padding:1rem;
}
#parentOnboard.open{display:flex;animation:fadeInModal .35s ease;}

/* ════ ONBOARDING WIZARD (KID) ══════════════════════════ */
#kidOnboard{
  display:none;position:fixed;inset:0;z-index:99998;
  background:rgba(0,0,0,.93);backdrop-filter:blur(18px);
  align-items:center;justify-content:center;padding:1rem;
}
#kidOnboard.open{display:flex;animation:fadeInModal .35s ease;}

@keyframes fadeInModal{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}

/* ════ SHARED WIZARD STYLES ═════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   ONBOARDING WIZARD — FULL REWRITE (bigger, animated)
═══════════════════════════════════════════════════════ */

/* Backdrop */
#parentOnboard, #kidOnboard {
  display:none; position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(20px);
  align-items:center; justify-content:center;
  padding:1rem;
  overflow:hidden;
  box-sizing:border-box;
}
@media(max-width:860px){
  #parentOnboard, #kidOnboard {
    align-items:flex-start;
    padding-top:112px;
    padding-bottom:1rem;
    overflow-y:auto;
  }
  .ob-box {
    margin-top:0;
    max-height:calc(100vh - 124px);
  }
}
#parentOnboard.open, #kidOnboard.open {
  display:flex;
  animation:obBackdropIn .3s ease;
}
@keyframes obBackdropIn {
  from{opacity:0;} to{opacity:1;}
}

/* Main box */
.ob-box {
  background:linear-gradient(145deg,#0d1b2a 0%,#1a2640 50%,#0d1b2a 100%);
  border:1px solid rgba(56,189,248,.2);
  border-radius:24px;
  width:94vw;
  max-width:580px;
  max-height:92vh;
  display:flex; flex-direction:column;
  box-shadow:0 40px 120px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
  animation:obBoxIn .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  box-sizing:border-box;
}
@keyframes obBoxIn {
  from{opacity:0; transform:scale(.88) translateY(24px);}
  to{opacity:1; transform:none;}
}

/* Animated top border glow */
.ob-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#38bdf8,#818cf8,#34d399,transparent);
  background-size:200% 100%;
  animation:obBorderFlow 3s linear infinite;
}
@keyframes obBorderFlow {
  0%{background-position:200% 0;} 100%{background-position:-200% 0;}
}

/* Slide container */
.ob-slides-wrap {
  flex:1; overflow:hidden; min-height:0; position:relative;
}
.ob-slides {
  display:flex;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  height:100%;
}
.ob-slide {
  min-width:100%; flex-shrink:0; width:100%;
  padding:1.2rem 1.5rem 1rem;
  box-sizing:border-box;
  overflow-y:auto;
  max-height:calc(88vh - 80px);
}
@media(max-width:860px){
  .ob-slide { padding-top:2rem; }
  .ob-hero { padding-top:.5rem; }
  .ob-hero-emoji { font-size:2.4rem; margin-bottom:.3rem; }
  .ob-hero-title { font-size:1.15rem; }
}
.ob-slide::-webkit-scrollbar{width:4px;}
.ob-slide::-webkit-scrollbar-thumb{background:rgba(56,189,248,.3);border-radius:2px;}

/* Hero section per slide */
.ob-hero { text-align:center; margin-bottom:1rem; padding-top:.2rem; }
.ob-hero-emoji {
  font-size:3.2rem; display:block; margin-bottom:.5rem;
  animation:obFloat 2.8s ease-in-out infinite;
  filter:drop-shadow(0 8px 24px rgba(56,189,248,.3));
}
@keyframes obFloat {
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-14px) rotate(2deg);}
}
.ob-hero-title {
  font-family:var(--fh); font-size:1.35rem; letter-spacing:2px;
  color:var(--c); margin-bottom:.5rem;
  text-shadow:0 0 40px rgba(56,189,248,.4);
  word-break:break-word;
}
.ob-hero-sub {
  font-size:.83rem; color:var(--tx2); line-height:1.65;
  max-width:100%; margin:0 auto;
}

/* Feature cards grid */
.ob-steps-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem; margin-bottom:1rem;
  width:100%; box-sizing:border-box;
}
.ob-step-card:nth-child(1){animation:obFadeUp .35s ease .05s both;}
.ob-step-card:nth-child(2){animation:obFadeUp .35s ease .1s both;}
.ob-step-card:nth-child(3){animation:obFadeUp .35s ease .15s both;}
.ob-step-card:nth-child(4){animation:obFadeUp .35s ease .2s both;}
.ob-step-card:nth-child(5){animation:obFadeUp .35s ease .25s both;}
.ob-step-card:nth-child(6){animation:obFadeUp .35s ease .3s both;}
@keyframes obFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.ob-step-card {
  background:rgba(255,255,255,.04);
  border-radius:14px; padding:.85rem .8rem;
  border:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s, background .2s;
  cursor:default;
  box-sizing:border-box;
  min-width:0;
  word-break:break-word;
}
.ob-step-card:hover {
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.25);
  background:rgba(56,189,248,.05);
}
.ob-step-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent,#38bdf8),transparent);
}
.ob-step-card .osc-icon { font-size:1.6rem; margin-bottom:.4rem; display:block; }
.ob-step-card .osc-title { font-size:.85rem; font-weight:800; margin-bottom:.25rem; color:#fff; }
.ob-step-card .osc-desc { font-size:.73rem; color:var(--tx2); line-height:1.6; }

/* Numbered checklist */
.ob-checklist { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.1rem; }
.ob-checklist li {
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.81rem; color:var(--tx2); line-height:1.6;
  background:rgba(255,255,255,.03); border-radius:10px; padding:.55rem .75rem;
  border:1px solid rgba(255,255,255,.04);
  animation:obSlideIn .3s ease both;
  box-sizing:border-box; min-width:0; word-break:break-word;
}
.ob-checklist li:nth-child(1){animation-delay:.05s;}
.ob-checklist li:nth-child(2){animation-delay:.1s;}
.ob-checklist li:nth-child(3){animation-delay:.15s;}
.ob-checklist li:nth-child(4){animation-delay:.2s;}
.ob-checklist li:nth-child(5){animation-delay:.25s;}
@keyframes obSlideIn {
  from{opacity:0; transform:translateX(-12px);}
  to{opacity:1; transform:none;}
}
.ob-checklist li .obc-n {
  background:linear-gradient(135deg,#38bdf8,#818cf8); color:#06101e;
  border-radius:50%; width:22px; height:22px; font-size:.68rem; font-weight:900;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
  box-shadow:0 2px 8px rgba(56,189,248,.4);
}
.ob-checklist b { color:#fff; }

/* Tip box */
.ob-tip {
  background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.2);
  border-radius:12px; padding:.7rem .85rem; font-size:.76rem; color:#fde68a;
  margin-bottom:.8rem; line-height:1.6;
  display:flex; align-items:flex-start; gap:.5rem;
  width:100%; box-sizing:border-box; word-break:break-word;
}
.ob-tip strong { color:#fbbf24; }

/* Footer nav */
.ob-footer {
  padding:1rem 1.5rem 1.2rem;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:rgba(0,0,0,.25); flex-shrink:0;
}
.ob-dots { display:flex; gap:.45rem; align-items:center; }
.ob-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.15); transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.ob-dot.act { background:var(--c); width:22px; border-radius:4px; box-shadow:0 0 8px var(--c); }

.ob-nav-btn {
  background:linear-gradient(135deg,var(--c),var(--p));
  color:#06101e; border:none; border-radius:12px;
  padding:.65rem 1.6rem; font-size:.88rem; font-weight:900; cursor:pointer;
  font-family:var(--fn); transition:all .2s;
  box-shadow:0 4px 16px rgba(56,189,248,.35);
  letter-spacing:.3px;
}
.ob-nav-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(56,189,248,.5); filter:brightness(1.1); }
.ob-nav-btn:active { transform:translateY(0); }
.ob-nav-btn.ghost {
  background:rgba(255,255,255,.08); color:var(--tx2);
  border:1px solid rgba(255,255,255,.12); box-shadow:none;
}
.ob-nav-btn.ghost:hover { background:rgba(255,255,255,.14); transform:none; }
.ob-nav-btn:disabled { opacity:.3; cursor:not-allowed; transform:none !important; }
.ob-skip {
  font-size:.7rem; color:var(--tx3); cursor:pointer;
  text-decoration:underline; transition:color .15s;
}
.ob-skip:hover { color:var(--tx2); }

/* Kid wizard overrides */
#kidOnboard .ob-box { border-color:rgba(245,158,11,.25); }
#kidOnboard .ob-box::before { background:linear-gradient(90deg,transparent,#f59e0b,#ef4444,#f59e0b,transparent); }
#kidOnboard .ob-hero-title { color:#f59e0b; text-shadow:0 0 40px rgba(245,158,11,.4); }
#kidOnboard .ob-dot.act { background:#f59e0b; box-shadow:0 0 8px #f59e0b; }
#kidOnboard .ob-nav-btn { background:linear-gradient(135deg,#f59e0b,#ef4444); box-shadow:0 4px 16px rgba(245,158,11,.35); }
#kidOnboard .ob-step-card:hover { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.05); }
#kidOnboard .obc-n { background:linear-gradient(135deg,#f59e0b,#ef4444); box-shadow:0 2px 8px rgba(245,158,11,.4); }
#kidOnboard .ob-hero-emoji { filter:drop-shadow(0 8px 24px rgba(245,158,11,.3)); }


/* ════ ENHANCED TUTORIAL MODAL ══════════════════════════ */
#tutModal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.94);backdrop-filter:blur(16px);
  z-index:9999;align-items:flex-start;justify-content:center;
  padding:1rem;overflow-y:auto;
  /* Desktop: account for no top bar */
  padding-top:1.5rem;
}
@media(max-width:860px){
  #tutModal{ padding-top:108px; }
}
#tutModal.open{display:flex;}
#tutInner{
  background:linear-gradient(160deg,#0c1525,#111827);
  border-radius:20px;max-width:640px;width:100%;margin:auto;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  overflow:hidden;
}
.tut-header{
  padding:1.4rem 1.6rem 1rem;
  background:linear-gradient(135deg,rgba(56,189,248,.06),rgba(129,140,248,.04));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.tut-nav{
  display:flex;gap:.3rem;flex-wrap:wrap;padding:.7rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.2);
}
.tut-nb{
  background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--tx3);
  border-radius:6px;padding:.2rem .55rem;font-size:.62rem;font-weight:700;
  cursor:pointer;font-family:var(--fn);transition:all .15s;white-space:nowrap;
}
.tut-nb:hover{background:rgba(255,255,255,.06);color:var(--tx2);}
.tut-nb.active{background:var(--c);color:#06101e;border-color:var(--c);}
.tut-body{padding:1.2rem 1.6rem;}
.tut-step{display:none;}
.tut-step.active{display:block;animation:fadeUp .25s ease;}
.tut-step h3{
  font-family:var(--fh);font-size:1.05rem;letter-spacing:1px;color:var(--c);
  margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem;
}
.tut-step > p{font-size:.82rem;color:var(--tx2);line-height:1.65;margin-bottom:.9rem;}
.tut-row{
  display:flex;align-items:flex-start;gap:.75rem;
  background:rgba(255,255,255,.03);border-radius:10px;
  padding:.72rem .9rem;margin-bottom:.45rem;
  border-left:3px solid rgba(56,189,248,.25);
  transition:border-color .15s;
}
.tut-row:hover{border-left-color:rgba(56,189,248,.6);}
.tut-icon{font-size:1.2rem;flex-shrink:0;margin-top:.05rem;}
.tut-row-text{font-size:.82rem;color:#c8d4e8;line-height:1.65;}
.tut-row-text b{color:#fff;display:block;margin-bottom:.1rem;}
.tut-visual{
  background:rgba(56,189,248,.04);border:1px solid rgba(56,189,248,.1);
  border-radius:10px;padding:.7rem 1rem;margin-bottom:.7rem;
  font-size:.75rem;color:var(--tx2);line-height:1.7;
}
.tut-visual .tv-label{font-size:.62rem;color:var(--c);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.3rem;}
.tut-visual .tv-path{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;font-weight:600;color:var(--tx);}
.tut-visual .tv-path span{background:rgba(255,255,255,.08);border-radius:5px;padding:2px 7px;font-size:.72rem;}
.tut-visual .tv-path .arr{color:var(--tx3);}
.tut-footer{
  padding:.8rem 1.6rem 1.2rem;border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:rgba(0,0,0,.15);
}
:root.light .tut-row{background:rgba(0,0,0,.03);border-left-color:rgba(56,189,248,.3);}
:root.light .tut-row-text{color:#475569;}
:root.light .tut-row-text b{color:#0f172a;}
:root.light #tutInner{background:linear-gradient(160deg,#f8fafc,#f1f5f9);}
:root.light .tut-header{background:rgba(56,189,248,.04);}

/* ── AUTH SCREEN ─────────────────────────────────────────────── */
#authScreen input:focus {
  border-color: rgba(56,189,248,.5) !important;
  background: rgba(255,255,255,.09) !important;
}
#authScreen button:hover { opacity: .88; transform: translateY(-1px); }
#authLoading { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LIGHT MODE CONTRAST FIXES ───────────────────────────────
   Overrides hardcoded white/yellow text that's invisible on
   light backgrounds. Grouped by section.
─────────────────────────────────────────────────────────────── */

/* Hero — scripture/motivation text (hardcoded #fde68a yellow) */
:root.light #heroMotivation { color: #92400e !important; }
:root.light #heroMotivationAuthor { color: rgba(120,53,15,.6) !important; }

/* Hero — clock (hardcoded rgba(255,255,255,.85)) */
:root.light #heroClock { color: #1e3a5f !important; }

/* Hero card — ensure text readable when no photo set */
:root.light .hero-card.no-photo .hero-greet { color: #334155; }
:root.light .hero-card.no-photo .hero-name  { color: #0f172a; }
:root.light .hero-card.no-photo .hero-date  { color: #475569; }

/* Dashboard cards — white text on card backgrounds */
:root.light .dcard { background: #fff; border-color: rgba(0,0,0,.1); }
:root.light .dcard-label { color: #64748b; }
:root.light .dcard-value { color: #0f172a; }
:root.light .dcard-sub   { color: #94a3b8; }

/* Parent Bucks — hardcoded #fbbf24 yellow on white bg */
:root.light #heroPBBalance,
:root.light #qsPB,
:root.light #schoolPBBalance,
:root.light #goalsPBBalance,
:root.light #skillsPBBalance { color: #b45309 !important; }

/* Parent Bucks label */
:root.light [style*="color:#fbbf24"] { color: #b45309 !important; }

/* Scripture / Devotional section — hardcoded white text on dark cards */
:root.light #devTitle,
:root.light #devScripture,
:root.light #ddmTitle { color: #0f172a !important; }
:root.light #ddmVerse { color: #475569 !important; }

/* Scripture section header labels (rgba white) */
:root.light [style*="color:rgba(255,255,255,.7)"],
:root.light [style*="color:rgba(255,255,255,.8)"] { color: #475569 !important; }

/* Modals & overlays — PIN modal, char modal, child login */
:root.light #pinModalTitle,
:root.light #charTitle,
:root.light #ddmTitle { color: #0f172a !important; }
:root.light #pinModalSub,
:root.light #charSub    { color: #64748b !important; }

/* Child login screen */
:root.light #clChildName { color: #0f172a !important; }
:root.light [style*="color:rgba(255,255,255,.45)"] { color: #64748b !important; }

/* Toolbar buttons (resume editor) — white on white issue */
:root.light .rtb {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.15);
  color: #334155;
}
:root.light .rtb:hover {
  background: rgba(56,189,248,.12);
  color: #0369a1;
}

/* Sidebar buttons that use rgba white borders */
:root.light [style*="border:1px solid rgba(255,255,255,.1)"],
:root.light [style*="border: 1px solid rgba(255,255,255,.1)"] {
  border-color: rgba(0,0,0,.1) !important;
}

/* Reading speed / comprehension test — white placeholder */
:root.light [style*="color:rgba(255,255,255,.3)"] { color: #94a3b8 !important; }

/* Fuel wall / quote cards */
:root.light .fst { background: #fff; border-color: rgba(0,0,0,.1); }

/* Nav banner (top strip) — white links */
:root.light #topBanner a,
:root.light #topBanner span { color: #0f172a !important; }

/* Settings panel — rgba white borders/backgrounds — exclude swatches */
:root.light #sp button[style*="rgba(255,255,255"]:not(.swatch-btn) {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #334155 !important;
}
/* Swatch buttons: preserve their gradient background, just fix border */
:root.light .swatch-row > button {
  border-color: rgba(0,0,0,.25) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
  outline: none !important;
}
:root.light .swatch-row > button:first-child {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

/* Bible section dark card backgrounds */
:root.light [style*="background:rgba(0,0,0,.3)"],
:root.light [style*="background:rgba(0,0,0,.4)"],
:root.light [style*="background:rgba(0,0,0,.5)"] {
  background: rgba(0,0,0,.04) !important;
  color: #0f172a !important;
}

/* Holy Bible title card */
:root.light [style*="color:#fff"][style*="font-weight:900"] { color: #0f172a !important; }

/* Spin wheel / scratch card text */
:root.light [style*="color:rgba(255,255,255,.5)"] { color: #64748b !important; }

/* ── PARENT vs CHILD HERO CARD VISIBILITY ────────────────────
   body.parent-view = parent is the active viewer (no child PIN login)
   body.child-view  = a child profile is active
─────────────────────────────────────────────────────────────── */
body.parent-view #heroCard         { display: none !important; }
body.parent-view #parentWelcomeCard{ display: block !important; }
body.child-view  #heroCard         { display: block !important; }
body.child-view  #parentWelcomeCard{ display: none !important; }

/* ── SETTINGS PANEL — color swatch visibility in light mode ──
   All swatch types get visible borders/shadows against white bg.
─────────────────────────────────────────────────────────────── */

/* ── ACCENT swatch borders in light mode */
:root.light .palette-swatch {
  border: 2px solid rgba(0,0,0,.2) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
}
:root.light .palette-swatch.active {
  border-color: rgba(0,0,0,.45) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.15) !important;
}

/* ── CHILD DASHBOARD CONTENT — hidden in parent view ────────── */
body.parent-view #childDashContent { display: none !important; }
body.child-view  #childDashContent { display: block !important; }



/* ── TOP QUICK BUTTONS BAR — light mode fix ─────────────────
   #topQuickBtns has hardcoded dark background rgba(10,10,15,.95)
─────────────────────────────────────────────────────────────── */
:root.light #topQuickBtns {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: rgba(0,0,0,.1) !important;
  backdrop-filter: blur(12px);
}
:root.light #topQuickBtns button {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #334155 !important;
}
:root.light #topQuickBtns button:hover {
  background: rgba(0,0,0,.1) !important;
}
/* Keep colored buttons (Parent, Refer & Earn) readable */
:root.light #topQuickBtns button[style*="color:#fff"] {
  color: #fff !important;
}