/* =============================================================
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:#64748b;--mt:#64748b;--br:rgba(56,189,248,0.15);--r:14px;
/* ── UNIFIED CARD/BANNER SYSTEM (Settings → Card Style) ──────
Default: Kingdom — purple gradient + purple glow, matching the
Christian Life Guide and Worship Playlist sections. Toggle in
Settings sets data-card-theme="brand" on to swap to the
cyan/violet brand palette. */
--cd-banner: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--cd-banner-text: #ffffff;
--cd-banner-text-muted: rgba(255,255,255,.78);
--cd-banner-shadow: 0 10px 40px rgba(124,58,237,.25);
--cd-card-bg: rgba(255,255,255,.03);
--cd-card-border: 1.5px solid rgba(124,58,237,.35);
--cd-card-border-hover: rgba(124,58,237,.65);
--cd-card-shadow: 0 10px 30px rgba(15,23,42,.10), 0 18px 55px rgba(124,58,237,.14);
--cd-card-shadow-hover: 0 14px 40px rgba(15,23,42,.14), 0 26px 75px rgba(124,58,237,.22);
--cd-card-radius: 16px;
--fh:'Bebas Neue',sans-serif;--fm:'Inter',sans-serif;--fn:'Inter',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;
/* ── Section accent tokens (Phase B-Lite, 2026-05-14) ───
One persistent accent per non-faith section. Indigo + teal stay
reserved for faith chrome per docs/design-system.md §1.
Applied progressively across sections in later Phase B-Lite sessions. */
--section-daily-life:#f59e0b;
--section-school:#0284c7;
--section-health:#34d399;
--section-finance:#16a34a;
--section-goals:#f97316;
--section-journal:#c084fc;
--section-sports:#dc2626;
--section-life-skills:var(--c);
}
/* ── LIGHT MODE ─────────────────────────────────── */
/* LIGHT MODE REBUILD v150 - 2026-05-14 */
/* 2026-05-15 — Professional light-mode overhaul. Tokens tuned per the
spec: soft blue-gray body, white cards with subtle shadow, light
gray sidebar, near-black text. Inline gold #fbbf24 text on white
bg was the worst readability issue — handled by the override block
at the bottom of this file. */
:root.light{
--bg:#e8e9ec; /* medium cool gray — macOS desktop feel */
--s1:#f2f3f5; /* cards / surfaces */
--s2:#e4e5e8; /* section headers */
--s3:#d8d9de; /* hover / inset */
--s4:#cccdd4; /* deeper accent */
--c:#5a5c6b; /* generic accent → neutral slate (not sky-blue) */
--tx:#1a1b1e; /* near-black body text */
--tx2:#4a4b52; /* secondary text */
--tx3:#7a7b85; /* tertiary text */
--mt:#7a7b85; /* very muted */
--br:rgba(0,0,0,0.15);
--card-shadow:0 1px 4px rgba(0,0,0,.10);
--card-bg:#f2f3f5;
--card-border:#d0d1d6;
--input-bg:#ffffff;
--input-border:#c0c1c6;
--sel-bg:#eaebef;
}
*{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:.7rem;font-weight:600;letter-spacing:.02em;color:var(--mt);padding:.8rem 1.1rem .2rem;}
.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;z-index:910;
/* Phase C-fix-1: safe-area-inset-top so the logo clears the iPhone
status bar / Dynamic Island. min() floor keeps a reasonable top
padding on devices without notches. */
min-height:54px;
padding:max(env(safe-area-inset-top), 8px) 1rem 0;
-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;
}
.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;}
/* Phase C-fix-1: offset matches the new mBar height (54px content +
safe-area top padding). calc + max keeps the visible content below
the status bar on iPhone X+. */
#mainWrap{padding-top: calc(54px + max(env(safe-area-inset-top), 8px));}
#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);}
/* Radio + checkbox shouldn't inherit text-input box styling. The global
input,textarea,select rule above gives every width:100% and
.58rem padding, which stretches radios/checkboxes to fill their column
and makes their labels wrap into a thin sliver. Override here. */
input[type=radio],input[type=checkbox]{width:auto;padding:0;background:transparent;border:0;border-radius:0;}
input[type=radio]:focus,input[type=checkbox]:focus{background:transparent;}
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;}
:root.light .st{color:#0f172a;}
.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:100000;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;-webkit-overflow-scrolling:touch;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:#dfe0e4;border-right-color:#c8c9ce;}
:root.light .sid-logo{border-bottom-color:#c8c9ce;}
:root.light .sid-logo-sub{color:#7a7b85;}
:root.light .nav-item{color:#4a4b52;}
:root.light .nav-item:hover{color:#1a1b1e;background:rgba(0,0,0,.06);border-left-color:rgba(0,0,0,.25);}
:root.light .nav-item.active{color:#1a1b1e;background:rgba(0,0,0,.08);border-left-color:#5a5c6b;font-weight:700;}
:root.light .sid-bottom{border-top-color:#c8c9ce;}
:root.light #mBar,
:root.light #mobileQuickRow{background:#dfe0e4;border-bottom-color:#c8c9ce;}
:root.light #mobileQuickRow .mqb{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.15);color:#4a4b52;}
:root.light #mobileQuickRow .mqb-lang{background:rgba(0,0,0,.06);}
:root.light .mBar-title{color:#1a1b1e;}
:root.light .hamb{border-color:rgba(0,0,0,.25);color:#4a4b52;}
:root.light .card{background:#f2f3f5;border-color:#d0d1d6;box-shadow:0 1px 4px rgba(0,0,0,.10);}
:root.light .card-dark{background:#e8e9ec;}
:root.light input,:root.light textarea,:root.light select{background:#ffffff;border-color:#c0c1c6;color:#1a1b1e;}
:root.light input:focus,:root.light textarea:focus,:root.light select:focus{background:#ffffff;border-color:#9a9ba6;}
:root.light select option{background:#ffffff;color:#1a1b1e;}
:root.light .btn.bgh{background:rgba(0,0,0,.08);color:#4a4b52;border-color:rgba(0,0,0,.18);}
:root.light .btn.bgh:hover{background:rgba(0,0,0,.13);color:#1a1b1e;}
:root.light .tab{color:#4a4b52;}
:root.light .tab.active{background:#5a5c6b;color:#ffffff;}
:root.light .sh{border-bottom-color:#c8c9ce;}
:root.light .sl{background:rgba(0,0,0,.12);}
:root.light .chi{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12);color:#4a4b52;}
:root.light .chi.done{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4);}
:root.light .sb{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);}
:root.light .qs{background:transparent;}
:root.light .qsc{background:#f2f3f5;border:1px solid #d0d1d6;box-shadow:0 1px 6px rgba(0,0,0,.08);}
:root.light .fst{background:#f2f3f5;border:1px solid #d0d1d6;}
:root.light .tip-btn{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.18);}
:root.light .tip-box{background:#f2f3f5;border-color:#d0d1d6;box-shadow:0 8px 24px rgba(0,0,0,.15);color:#4a4b52;}
:root.light .tip-title{color:#1a1b1e;}
:root.light .tip-box b{color:#1a1b1e;}
:root.light #sp{background:#f2f3f5;border-left-color:#c8c9ce;}
:root.light #sp label{color:#4a4b52;}
:root.light .sched-table th{background:#d8d9de;color:#4a4b52;}
:root.light .sched-table td.time-cell{background:#e4e5e8;color:#4a4b52;}
:root.light .sched-table td{border-color:rgba(0,0,0,.08);}
:root.light .act-cell{background:#edeef1;}
:root.light .act-cell select{background:#ffffff;color:#1a1b1e;}
:root.light .act-cell select option{background:#ffffff;color:#1a1b1e;}
:root.light #schedPicker{background:#f2f3f5;border-color:#d0d1d6;}
:root.light .toast{background:#1a1b1e;color:#fff;}
:root.light .bdg{color:#4a4b52;}
: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:#5a5c6b;}
:root.light label{color:#4a4b52;}
:root.light .tut-body,:root.light #tutInner{background:#f2f3f5;}
:root.light .tut-header{background:rgba(0,0,0,.04);}
:root.light .tut-nav,:root.light .tut-foot{background:#e8e9ec;}
:root.light .tut-nb{background:rgba(0,0,0,.08);color:#4a4b52;}
:root.light .tut-step p{color:#4a4b52;}
:root.light .mo{background:rgba(0,0,0,.55);}
:root.light .md{background:#f2f3f5;border-color:#d0d1d6;}
:root.light #themeBtn{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.18);color:#4a4b52;}
:root.light #themeBtnMob{background:rgba(0,0,0,.10);border-color:rgba(0,0,0,.20);color:#4a4b52;}
/* ── Phase 3 light-mode contrast pass (bulk class rescue) ───── */
:root.light .ai2{background:rgba(0,0,0,.05);color:#1a1b1e;}
:root.light .ai2 .ck{border-color:rgba(0,0,0,.3);}
:root.light .ai2 .pl{border-left-color:rgba(0,0,0,.18);}
:root.light .cc{background:#f2f3f5;border-color:#d0d1d6;box-shadow:0 1px 6px rgba(0,0,0,.08);}
:root.light .stat-tile{background:#f2f3f5;border-color:#d0d1d6;box-shadow:0 1px 6px rgba(0,0,0,.08);}
:root.light .qsl,
:root.light .stat-lbl{color:#7a7b85;}
:root.light .pin-btn,
:root.light .child-pin-btn{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.14);color:#1a1b1e;}
:root.light .pin-btn:hover,
:root.light .child-pin-btn:hover{background:rgba(0,0,0,.12);}
:root.light .eb{color:#4a4b52;}
:root.light .eb:hover{color:#1a1b1e;}
:root.light .db{color:rgba(0,0,0,.45);}
:root.light .db:hover{color:var(--pk);}
/* ── 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(146,64,14,.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(146,64,14,.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(146,64,14,.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);}
/* Status indicator on home tiles. Mom-persona Phase 6: tone down so the
home view doesn't read as "alerts on every card."
- Green = "everything's fine" — silent. No bar shown.
- Yellow = soft heads-up.
- Red = real attention needed; still visible but less alarming. */
.dcard-status{position:absolute;top:0;left:0;right:0;height:2px;border-radius:14px 14px 0 0;}
.dcard-status.green{display:none;}
.dcard-status.red{background:rgba(239,68,68,.55);}
.dcard-status.yellow{background:rgba(251,191,36,.5);}
.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;}
.ph-nav-group-label{font-size:.55rem;letter-spacing:.08em;color:#64748b;text-transform:uppercase;font-weight:700;padding:.55rem .6rem .25rem;}
.phHomeAction{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .15s;}
.phHomeAction:hover{border-color:rgba(56,189,248,.4);}
.phHomeAction .phaIc{font-size:1.1rem;margin-bottom:5px;}
.phHomeAction .phaLb{font-size:.78rem;font-weight:700;color:var(--tx);}
.phHomeAction .phaSb{font-size:.65rem;color:var(--tx2);margin-top:2px;}
.phKidCard{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .15s;}
.phKidCard:hover{border-color:rgba(56,189,248,.4);}
.phKidCard .pkHead{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.phKidCard .pkAva{width:38px;height:38px;border-radius:50%;background:#1e3a8a;display:grid;place-items:center;font-size:1rem;}
.phKidCard .pkName{font-weight:800;color:var(--tx);font-size:.95rem;}
.phKidCard .pkStatus{font-size:.66rem;color:var(--tx2);}
.phKidCard .pkPills{display:flex;gap:6px;flex-wrap:wrap;}
.phKidCard .pkPill{font-size:.64rem;padding:4px 9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:99px;color:var(--tx2);}
.phKidCard .pkPill.due{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3);color:#fde68a;}
.phKidCard .pkPill.win{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#86efac;}
@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;}.ph-nav-group-label{display:none!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: #92400e !important; }
/* Parent Bucks label */
:root.light [style*="color:#92400e"] { color: #92400e !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; }
/* Devotional card sub-boxes — `rgba(,.04)` backgrounds vanish on
light page bg; bump alpha so they read as cards, not phantom borders. */
:root.light #bf-devotional [style*="rgba(167,139,250,.04)"]{background:rgba(167,139,250,.14) !important;}
:root.light #bf-devotional [style*="rgba(34,197,94,.04)"]{background:rgba(34,197,94,.10) !important;}
:root.light #bf-devotional [style*="rgba(244,114,182,.04)"]{background:rgba(244,114,182,.10) !important;}
/* Story Mode card (F4-G) — dark gradient is intentional for the
"starry-night storybook" feel; in light mode swap to warm
cream/lavender to keep the warmth without dropping a dark slab
onto a light page. Cream/gold text is rerouted to deep purple
+ slate so the headline, subhead, and italic blurb remain
legible against the new background. */
:root.light #fhStoriesCard{
background:linear-gradient(135deg,#fef9e7 0%,#ede5f5 100%) !important;
border-color:rgba(146,64,14,.5) !important;
}
:root.light #fhStoriesCard .fh-card-hdr{ color:#5b21b6 !important; }
:root.light #fhStoriesCard .fh-card-sub{ color:rgba(124,58,237,.7) !important; }
:root.light #fhStoriesCard > div[style*="rgba(254,243,199,.78)"]{ color:#475569 !important; }
/* Child PIN login screen — dark gradient is hardcoded inline at
#childLoginScreen; no light-mode override existed. Also rescues the
PIN dot 2px borders (existing 1px-border attribute rescue at
line 2140 doesn't match the dots' 2px pattern). */
:root.light #childLoginScreen{
background:linear-gradient(135deg,#f0f4f8,#e2e8f0,#cbd5e1) !important;
}
:root.light #childLoginScreen [style*="border:2px solid rgba(255,255,255,.25)"]{
border-color:rgba(15,23,42,.3) !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; }
/* 2026-05-15 — Legacy #heroCard photo-hero (Good Evening, CHAMPION)
force-shown by body.child-view here was overriding the inline
display:none added in the Phase C-hero rebuild. The new warm
greeting opener (#heroGreeting) replaces it everywhere. The
markup is preserved so chores.js / skills.js / ui.js references
stay graceful-null. */
body.parent-view #parentWelcomeCard{ display: block !important; }
body.child-view #heroCard { display: none !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; }
/* Parent Home content (What's New + Updates) — shown only in parent view. */
body.parent-view #parentHomeContent { display: block !important; }
body.child-view #parentHomeContent { display: none !important; }
/* ── HIDE ADULT-ONLY SURFACES IN CHILD PROFILE ──────────────
Kids shouldn't see referral CTAs, child-login (they're already
logged in), or the parent account/privacy/terms/sign-out block.
Sign-out in particular would log out the parent account if a kid
tapped it from within their own profile.
Scoped with :not(.parent-unlocked) — body.child-view is set whenever
the active profile is a child, including the case where a parent has
PIN-unlocked Parent Hub from a child-profile context. In that case
the parent IS in control and needs full access to these surfaces.
parent.js sets/removes body.parent-unlocked on _doUnlockParent /
lockParentDash so the hides only fire in the kid-controlled state.
─────────────────────────────────────────────────────────────── */
body.child-view:not(.parent-unlocked) #topQuickBtns button[onclick*="s-referral"] { display: none !important; }
body.child-view:not(.parent-unlocked) #childLoginTopBtn { display: none !important; }
body.child-view:not(.parent-unlocked) #sideSignOutBtn { display: none !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;
}
/* ── MOBILE QUICK ROW — light mode ──────────────────────────── */
:root.light #mobileQuickRow {
background: rgba(255,255,255,.97) !important;
border-bottom-color: rgba(0,0,0,.08) !important;
}
:root.light #mobileQuickRow .mqb {
background: rgba(0,0,0,.05) !important;
border-color: rgba(0,0,0,.12) !important;
color: #334155 !important;
}
/* ── LIGHT-MODE CONTENT TEXT FIXES ──────────────────────────
Many cards / modals / Parent Hub surfaces have inline color:#fff or
color:rgba(255,255,255,.x) that was correct under the dark default
but turns invisible on cream/sage/teal/light backgrounds. These rules
force inline-white text back to var(--tx) inside content containers.
Buttons with explicit dark gradient backgrounds keep their white via
the more-specific overrides above (e.g. #topQuickBtns button[...]).
─────────────────────────────────────────────────────────────── */
/* Generic: text inside main content sections, cards, parent-hub panels,
and the home dashboard cards switches to var(--tx) when inline-white. */
:root.light .sec [style*="color:#fff"]:not(button):not(a),
:root.light .sec [style*="color:white"]:not(button):not(a),
:root.light .sec [style*="color: #fff"]:not(button):not(a),
:root.light .sec [style*="color: white"]:not(button):not(a),
:root.light .card [style*="color:#fff"]:not(button):not(a),
:root.light .dcard [style*="color:#fff"]:not(button):not(a),
:root.light #parentDashContent [style*="color:#fff"]:not(button):not(a),
:root.light #heroCard [style*="color:#fff"]:not(button):not(a),
:root.light #parentWelcomeCard [style*="color:#fff"]:not(button):not(a),
:root.light #ph-home [style*="color:#fff"]:not(button):not(a) {
color: var(--tx) !important;
}
/* Translucent white (rgba(255,255,255,.X)) used for body text on dark
surfaces also needs to flip in light mode, but keep behavior on
buttons + clickable affordances that sit on dark gradients. */
:root.light .sec [style*="color:rgba(255,255,255"]:not(button):not(a):not([style*="gradient"]),
:root.light .card [style*="color:rgba(255,255,255"]:not(button):not(a):not([style*="gradient"]),
:root.light #parentDashContent [style*="color:rgba(255,255,255"]:not(button):not(a):not([style*="gradient"]),
:root.light #ph-home [style*="color:rgba(255,255,255"]:not(button):not(a):not([style*="gradient"]) {
color: var(--tx2) !important;
}
/* Modal panels — most use dark backgrounds in dark mode, but in light
mode they inherit the light surface tokens. Force their copy dark. */
:root.light #welcomeModal [style*="color:#fff"]:not(button),
:root.light #dailyDevModal [style*="color:#fff"]:not(button),
:root.light #planPickerModal [style*="color:#fff"]:not(button),
:root.light #firstTimePinGate [style*="color:#fff"]:not(button),
:root.light #pinModal [style*="color:#fff"]:not(button),
:root.light #characterModal [style*="color:#fff"]:not(button),
:root.light #childLoginModal [style*="color:#fff"]:not(button),
:root.light #deleteAccountModal [style*="color:#fff"]:not(button),
:root.light #subBlockedScreen [style*="color:#fff"]:not(button),
:root.light #scratchModal [style*="color:#fff"]:not(button) {
color: var(--tx) !important;
}
/* Specific known IDs that needed inline-white-on-glass in dark mode and
should now read as primary text in light mode. */
:root.light #phApprovalHead,
:root.light #ddmTitle,
:root.light #charTitle,
:root.light #devTitle,
:root.light #devScripture,
:root.light #pinModalTitle,
:root.light #subBlockedMsg,
:root.light #clChildName,
:root.light #scratchResult,
:root.light #savingsJarPct {
color: var(--tx) !important;
text-shadow: none !important;
}
/* Hero card greet text — gold verse + bright accents stay, but the
plain white name/greeting flip in calm-theme light mode. */
:root.light .hero-greet,
:root.light .hero-name,
:root.light .hero-date {
color: var(--tx) !important;
}
/* ─── UNIFIED CARD / BANNER SYSTEM ─────────────────────────────
Brand alternative — Settings → Card Style flips this on. */
:root[data-card-theme="brand"]{
--cd-banner: linear-gradient(135deg, #38bdf8 0%, #a78bfa 100%);
--cd-banner-text: #0b1220;
--cd-banner-text-muted: rgba(11,18,32,.7);
--cd-banner-shadow: 0 10px 40px rgba(56,189,248,.22);
--cd-card-border: 1.5px solid rgba(56,189,248,.35);
--cd-card-border-hover: rgba(56,189,248,.65);
--cd-card-shadow: 0 10px 30px rgba(15,23,42,.10), 0 18px 55px rgba(56,189,248,.14);
--cd-card-shadow-hover: 0 14px 40px rgba(15,23,42,.14), 0 26px 75px rgba(56,189,248,.22);
}
/* Banner — used for tab heroes, modal headers, big CTAs. */
.ylcc-banner{
background: var(--cd-banner);
color: var(--cd-banner-text);
border-radius: 18px;
box-shadow: var(--cd-banner-shadow);
}
/* Card — Christian Life Guide style: subtle bg, purple glow, hover lift. */
.ylcc-card{
background: var(--cd-card-bg);
border: var(--cd-card-border);
border-radius: var(--cd-card-radius);
box-shadow: var(--cd-card-shadow);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ylcc-card:hover{
transform: translateY(-4px);
border-color: var(--cd-card-border-hover);
box-shadow: var(--cd-card-shadow-hover);
}
/* ─── FAITH-FREE TIER CHROME ────────────────────────────────────
The faith-only tier is a single-person Bible-study product. Hide
parent/child onboarding chrome and extra Settings sections via CSS
(more robust than JS-only — works even if applySettings hasn't run
yet, and survives any rendering race). The data attribute is set in
ui.js applySettings when window._faithFree is true. */
html[data-faith-free="1"] #childLoginTopBtn,
html[data-faith-free="1"] #childLoginMobBtn,
html[data-faith-free="1"] #childAvatarWrap,
html[data-faith-free="1"] #parentWelcomeCard,
html[data-faith-free="1"] button[onclick*="quickParentHub"],
html[data-faith-free="1"] button[onclick*="showSection('s-referral'"],
html[data-faith-free="1"] #startHereBtn,
html[data-faith-free="1"] #gettingStarted,
html[data-faith-free="1"] .mqb-child,
html[data-faith-free="1"] .mqb-parent {
display: none !important;
}
/* Solo mode — single-user account with no parent/child split. Hides Parent Hub
entry points (header + mobile-quick-row buttons), the Parent Welcome card,
and the s-parent sidebar nav item. Mirrors the faith_free pattern above. */
body.solo-mode button[onclick*="quickParentHub"],
body.solo-mode #parentWelcomeCard,
body.solo-mode #ni-s-parent,
body.solo-mode .mqb-parent {
display: none !important;
}
/* Phase 5.3: Solo mode — hide family-management UI inside Settings.
Functional/preference settings (theme, palette, sections toggle, cloud sync,
subscription, support, data management, etc.) remain available — solo users
get full feature access. Currently tags: Quick Start Wizard button (which
auto-closes for solo via showParentOnboard's signup_source check, so the
button does nothing visible), and the "When You Sign In" parent/child
landing-preference panel. */
body.solo-mode .sp-family-only { display: none !important; }
/* ══════════ Phase 5.8 Pass C — LIFE SKILLS card grid + inline modal ══════════
The 42-category grid uses the global .topic-card-grid pattern. The
skillsModal is moved into #s-skills by JS and rendered inline (no
fixed overlay). Hides the grid / stats / PB bar when a category is
open; restores them on close via a MutationObserver in skills.js. */
#s-skills #skillsGrid.topic-card-grid { /* already styled by the global rule */ }
.sk-topic-card { position: relative; }
.sk-cert-pill {
position: absolute; top: .4rem; right: .4rem;
font-size: .55rem; font-weight: 800; letter-spacing: .06em;
background: rgba(34,197,94,.18); color: #22c55e;
border: 1px solid rgba(34,197,94,.3);
padding: .12rem .35rem; border-radius: 5px;
z-index: 1;
}
:root.light .sk-cert-pill { background: rgba(34,197,94,.14); color: #166534; }
/* Inline modal mode — skillsModal lives inside #s-skills after relocation */
#s-skills > #skillsModal {
position: static !important;
background: transparent !important;
backdrop-filter: none !important;
padding: 0 !important;
z-index: auto !important;
margin-top: .6rem;
inset: auto !important;
}
#s-skills > #skillsModal.open {
display: block !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
#s-skills > #skillsModal > .md {
max-width: none !important;
max-height: none !important;
width: 100% !important;
border-radius: 14px !important;
box-shadow: 0 4px 18px rgba(15,23,42,.10) !important;
background: rgba(255,255,255,.04) !important;
}
:root.light #s-skills > #skillsModal > .md {
background: rgba(15,23,42,.03) !important;
border-color: rgba(15,23,42,.10) !important;
}
/* ← Back pill — injected at top of skillsModal */
.sk-back-btn {
display: inline-flex; align-items: center; gap: .4rem;
background: rgba(56,189,248,.12);
border: 1px solid rgba(56,189,248,.3);
color: var(--c);
padding: .55rem 1.1rem;
border-radius: 10px;
font-size: .82rem; font-weight: 800;
cursor: pointer; font-family: var(--fm);
margin: 0 0 .85rem;
transition: background .15s, transform .1s;
}
.sk-back-btn:hover { background: rgba(56,189,248,.22); }
.sk-back-btn:active { transform: scale(.97); }
/* ══════════ Phase 5.8: GLOBAL CARD-GRID NAVIGATION ══════════
Reusable .topic-card-grid + .topic-card pattern. Updated in the
user's "uniform & realistic" pass: 260px minmax (3-4/row desktop,
2/row mobile), 180px photo heroes, no emoji icons by default. */
.topic-card-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:1rem;
margin-bottom:1rem;
}
.topic-card{
background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
overflow:hidden;
cursor:pointer;
display:flex;
flex-direction:column;
text-align:left;
min-height:300px;
transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
font-family:var(--fm);
}
.topic-card:hover{
transform:scale(1.02);
border-color:rgba(56,189,248,.5);
box-shadow:0 8px 26px rgba(15,23,42,.28);
}
.topic-card:active{transform:scale(.98);}
/* Hero — image wrap; gradient on the wrap shows through while image loads
and is the visible fallback when no photo is available for a card. */
.topic-card-hero-wrap{
position:relative;
width:100%;
height:180px;
overflow:hidden;
border-radius:14px 14px 0 0;
border-bottom:1px solid rgba(255,255,255,.06);
display:block;
}
img.topic-card-hero{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.94) saturate(1.05);
transition:transform .35s ease,filter .25s ease;
}
.topic-card:hover img.topic-card-hero{
transform:scale(1.04);
filter:brightness(1) saturate(1.1);
}
.topic-card-hero-fallback{
width:100%;
height:100%;
display:block;
}
/* Legacy div-hero (pre-photo pattern) — keep visually consistent if any
card still uses the old shape during transition. */
.topic-card > .topic-card-hero:not(img){
width:100%;
height:180px;
display:block;
border-bottom:1px solid rgba(255,255,255,.06);
}
/* Suppress the central emoji icon row — uniform photo-first look. */
.topic-card-icon{display:none;}
.topic-card-title{
font-family:var(--fh,var(--fm));
font-size:1rem;
font-weight:800;
color:var(--tx);
padding:.95rem .9rem .35rem;
line-height:1.25;
letter-spacing:.01em;
}
.topic-card-desc{
font-size:.74rem;
font-weight:600;
color:var(--tx2);
padding:0 .9rem 1rem;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* Accent variants — pass via inline style or section accent class for now */
.topic-card.accent-cyan:hover {border-color:rgba(56,189,248,.55);}
.topic-card.accent-violet:hover{border-color:rgba(167,139,250,.55);}
.topic-card.accent-gold:hover {border-color:rgba(251,191,36,.55);}
.topic-card.accent-green:hover {border-color:rgba(52,211,153,.55);}
.topic-card.accent-pink:hover {border-color:rgba(244,114,182,.55);}
.topic-card.accent-orange:hover{border-color:rgba(251,146,60,.55);}
/* "← Back" pill used at the top of an opened topic content panel */
.topic-back-btn{
display:inline-flex;
align-items:center;
gap:.4rem;
background:rgba(56,189,248,.1);
border:1px solid rgba(56,189,248,.3);
color:var(--c);
padding:.5rem 1rem;
border-radius:10px;
font-size:.78rem;
font-weight:800;
cursor:pointer;
font-family:var(--fm);
margin-bottom:.85rem;
transition:background .15s,transform .1s;
}
.topic-back-btn:hover{background:rgba(56,189,248,.2);}
.topic-back-btn:active{transform:scale(.97);}
/* Light-mode adjustments */
:root.light .topic-card{
background:linear-gradient(135deg,rgba(15,23,42,.04),rgba(15,23,42,.02));
border-color:rgba(15,23,42,.1);
}
:root.light .topic-card:hover{border-color:rgba(56,189,248,.45);}
:root.light .topic-card-hero{background:linear-gradient(135deg,rgba(56,189,248,.08),rgba(167,139,250,.08));border-bottom-color:rgba(15,23,42,.06);}
/* ──────────────────────────────────────────────────────────────
Story Mode tiles (inside #bf-stories) + Reading Plan tiles
(inside #bf-plans) — pinned to the .topic-card spec so they
visually align with the Faith Home navigation grid and respond
to :root.light theme swap correctly. The per-story / per-plan
accent comes in via inline `--accent` CSS variable.
────────────────────────────────────────────────────────────── */
#fhStoryList,
#bf-plans .pl-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:1rem;
}
/* Modal-open guard — hide top mobile nav and quick row whenever any
modal is open (planDetailModal, lessonModal, ppModal, ppConvinceModal,
storyPlayerModal, etc.). Wired via document.body.classList.toggle
in ui.js openModal/closeModal and in the per-feature open/close
helpers for modals that don't route through ui.js. */
body.modal-open #mBar,
body.modal-open #mqRow,
body.modal-open .navbar{
display:none !important;
}
.fh-story-tile,
.pl-card-v2{
background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
color:var(--tx);
border-radius:14px;
padding:1rem 1.1rem;
cursor:pointer;
display:block;
width:100%;
text-align:left;
font:inherit;
font-family:var(--fm);
appearance:none;
-webkit-appearance:none;
position:relative;
overflow:hidden;
box-shadow:0 4px 18px rgba(0,0,0,.10);
transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
align-self:start;
}
.fh-story-tile:hover,
.pl-card-v2:hover{
transform:scale(1.02);
border-color:var(--accent,rgba(56,189,248,.55));
box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.fh-story-tile:active,
.pl-card-v2:active{transform:scale(.98);}
:root.light .fh-story-tile,
:root.light .pl-card-v2{
background:linear-gradient(135deg,rgba(15,23,42,.04),rgba(15,23,42,.02)) !important;
border-color:rgba(15,23,42,.1) !important;
color:var(--tx) !important;
}
:root.light .fh-story-tile:hover,
:root.light .pl-card-v2:hover{border-color:var(--accent,rgba(56,189,248,.45));}
.fh-story-tile{color:var(--tx,#0f172a) !important;background:rgba(0,0,0,.04) !important;border:1px solid rgba(0,0,0,.08) !important;}
:root.light .fh-story-tile{color:#0f172a !important;}
/* The Story Mode tab wrapper and Home-grid story-promo card carry a
hardcoded dark navy/purple gradient inline in index.html
("background:linear-gradient(135deg, rgba(10,13,26,.95) 0%, rgba(26,18,51,.92) 100%)").
That gradient is opaque enough to block any tile-level light-mode
styling — the cards LOOK dark because their container is dark. The
only safe way to override an inline style is via [style*=""] +
!important (same pattern already used at lines 2114-2116 for
#bf-devotional). */
:root.light #fhStoriesPromoCard,
:root.light #bf-stories [style*="rgba(10,13,26,.95)"]{
background:linear-gradient(135deg,rgba(15,23,42,.04) 0%,rgba(56,189,248,.06) 100%) !important;
border-color:rgba(15,23,42,.12) !important;
color:var(--tx) !important;
}
/* Hardcoded cream text colors inside those wrappers — flip to slate. */
:root.light #fhStoriesPromoCard [style*="color:#fef3c7"],
:root.light #bf-stories [style*="color:#fef3c7"]{
color:var(--tx) !important;
}
:root.light #fhStoriesPromoCard [style*="rgba(254,243,199"],
:root.light #bf-stories [style*="rgba(254,243,199"]{
color:var(--tx2) !important;
}
/* The hero-grid #fhStoryList carries an inline grid-template-columns
minmax(220px,1fr). Inline styles beat plain CSS without !important —
pin our 260px / 1rem spec so the grid actually picks it up. */
#fhStoryList{
grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;
gap:1rem !important;
}
/* Story-tile inline text colors set via inline style on inner spans
(var(--tx), var(--tx2), var(--tx3)) already swap via the variable
system. Nothing more needed for those. */
/* Home-tab Devotional card scripture quote is `color:#fff` inline in
index.html (#devScripture). White on the white light-mode background
is invisible. Override via id selector + !important. */
:root.light #devScripture{color:var(--tx) !important;}
/* Light-mode rescue for any other lingering #fff text inside the
Devotional section that wasn't caught by the var(--tx*) sweep. */
:root.light #bf-devotional [style*="color:#fff"]{color:var(--tx) !important;}
/* ──────────────────────────────────────────────────────────────
Defensive uniform sizing for every .topic-card living inside
a .topic-card-grid. Some cards (notably Devotional and Bible
Flashcards) were rendering smaller than Story Mode and other
tiles in the home grid. Lock the spec with !important so any
per-section inline overrides cannot drift below 300px tall or
180px-photo-hero.
────────────────────────────────────────────────────────────── */
.topic-card-grid > .topic-card{
min-height:300px !important;
display:flex !important;
flex-direction:column !important;
padding:0 !important; /* hero-wrap + title/desc handle their own padding */
}
.topic-card-grid > .topic-card > .topic-card-hero-wrap{
height:180px !important;
flex:0 0 180px !important;
}
.topic-card-grid > .topic-card > .topic-card-title{
font-size:1rem !important;
padding:.95rem .9rem .35rem !important;
}
.topic-card-grid > .topic-card > .topic-card-desc{
font-size:.74rem !important;
padding:0 .9rem 1rem !important;
}
/* ──────────────────────────────────────────────────────────────
Modal scroll-area fix — Plan Detail, Story Player, charModal
used to clip content with fixed max-heights. Convert .md into
a flex column so the body grows to fill space between header
and footer. -webkit-overflow-scrolling for iOS smooth scroll.
Body padding aligned to the 1.25rem/1.5rem/2rem spec.
────────────────────────────────────────────────────────────── */
#planDetailModal .md,
#storyPlayerModal .md,
#charModal .md{
display:flex;
flex-direction:column;
max-height:92vh;
padding:0;
overflow:hidden;
}
#planDetailHeader,
#planDetailFooter,
#storyPlayerModal .sp-stage,
#storyPlayerModal .sp-controls,
#charModal .md > .md-head,
#charModal .md > .md-foot{flex:0 0 auto;}
/* Body sections grow + scroll. !important needed to override the
inline max-height/padding on planDetailBody and charBody. */
#planDetailBody{
flex:1 1 auto !important;
max-height:none !important;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:1.25rem 1.5rem 2rem !important;
min-height:0;
}
#storyPlayerModal .sp-narration{
flex:1 1 auto;
max-height:none;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:1.25rem 1.5rem 2rem;
min-height:0;
}
#charBody{
flex:1 1 auto !important;
max-height:none !important;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:1.25rem 1.5rem 2rem !important;
min-height:0;
}
/* Mobile: shrink the fixed-height modal headers so the scroll
area gets more vertical room. Plan-detail icon + title compress. */
@media (max-width:640px){
#planDetailHeader{padding:.85rem 1rem .8rem !important;}
#planDetailHeader #planDetailIcon{font-size:1.5rem !important;margin-bottom:.18rem !important;}
#planDetailHeader #planDetailTitle{font-size:1.05rem !important;}
#planDetailHeader #planDetailShort{font-size:.72rem !important;}
#planDetailBody{padding:1rem 1.1rem 1.6rem !important;}
#charBody{padding:1rem 1.1rem 1.6rem !important;}
#storyPlayerModal .sp-narration{padding:1rem 1.1rem 1.6rem;}
}
/* ══════════ Phase 7: BIBLE FLASHCARDS — cinematic redesign (gold + navy) ══════════ */
.fc-hud{
display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;flex-wrap:wrap;
padding:.6rem .85rem;border-radius:14px;
background:linear-gradient(135deg,rgba(251,191,36,.10),rgba(251,191,36,.02));
border:1px solid rgba(251,191,36,.28);
}
.fc-hud-stat{
display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
padding:.42rem .7rem;
background:rgba(10,13,26,.55);
border:1px solid rgba(251,191,36,.22);
border-radius:10px;
}
.fc-hud-label{
font-size:.58rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
color:#fef3c7;opacity:.72;
}
.fc-hud-val{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:1.18rem;font-weight:700;letter-spacing:.05em;
color:#fef3c7;
}
.fc-hud-val strong{color:#fbbf24;font-weight:900;}
.fc-streak{
display:flex;align-items:center;gap:.3rem;padding:.42rem .75rem;
background:linear-gradient(135deg,rgba(251,191,36,.28),rgba(251,191,36,.08));
border:1px solid rgba(251,191,36,.65);border-radius:10px;
color:#fbbf24;font-weight:900;font-size:1rem;
font-family:'Bebas Neue', var(--fh, var(--fm));letter-spacing:.05em;
box-shadow:0 0 18px rgba(251,191,36,.42);
opacity:0;transform:scale(.5);pointer-events:none;
transition:opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.fc-streak.show{opacity:1;transform:scale(1);}
.fc-streak-flame{display:inline-block;animation:fcFlameFlicker 1.2s infinite ease-in-out;}
@keyframes fcFlameFlicker{
0%,100%{transform:scale(1) rotate(-3deg);}
50%{transform:scale(1.18) rotate(3deg);}
}
.fc-shuffle{
margin-left:auto;
background:linear-gradient(135deg,#fbbf24,#f59e0b);
border:none;color:#0a0d1a;padding:.55rem 1.05rem;border-radius:10px;
font-size:.78rem;font-weight:900;letter-spacing:.06em;cursor:pointer;
font-family:var(--fn);
box-shadow:0 4px 14px rgba(251,191,36,.38);
transition:transform .15s, box-shadow .15s;
}
.fc-shuffle:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(251,191,36,.6);}
.fc-shuffle:active{transform:scale(.97);}
/* Stage = backdrop scene that hosts the page-flip opener + 3D card */
.fc-stage{
position:relative;
background:
radial-gradient(ellipse at top, rgba(251,191,36,.12), transparent 60%),
linear-gradient(180deg,#0a0d1a 0%,#06080f 100%);
border:1px solid rgba(251,191,36,.22);border-radius:18px;
padding:1.6rem 1.3rem 1.8rem;
min-height:500px;
overflow:hidden;
perspective:1400px;
margin-bottom:1rem;
}
.fc-stage::before{
content:"";position:absolute;inset:0;
background:url("data:image/svg+xml;utf8,");
pointer-events:none;opacity:.5;
}
/* Bible page-flip opener: stylized open book with flipping pages */
.fc-opener{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
pointer-events:none;opacity:0;z-index:5;
}
.fc-opener.run{animation:fcOpenerRun 1.4s cubic-bezier(.55,.08,.35,1) forwards;}
@keyframes fcOpenerRun{
0%{opacity:0;}
12%{opacity:1;}
80%{opacity:1;}
100%{opacity:0;}
}
.fc-book{
position:relative;width:260px;height:180px;
transform-style:preserve-3d;perspective:1200px;
}
.fc-book-half{
position:absolute;top:0;width:50%;height:100%;
background:linear-gradient(180deg,#fef3c7,#e6d5a0);
border:1px solid rgba(120,80,20,.4);
box-shadow:inset 0 0 22px rgba(120,80,20,.18);
opacity:.92;
}
.fc-book-half.left{left:0;border-radius:6px 0 0 6px;transform-origin:right center;transform:rotateY(75deg);}
.fc-book-half.right{right:0;border-radius:0 6px 6px 0;transform-origin:left center;transform:rotateY(-75deg);}
.fc-opener.run .fc-book-half.left{animation:fcBookOpenL 1.2s cubic-bezier(.55,.08,.35,1) forwards;}
.fc-opener.run .fc-book-half.right{animation:fcBookOpenR 1.2s cubic-bezier(.55,.08,.35,1) forwards;}
@keyframes fcBookOpenL{
0%{transform:rotateY(75deg);}
35%,100%{transform:rotateY(0deg);}
}
@keyframes fcBookOpenR{
0%{transform:rotateY(-75deg);}
35%,100%{transform:rotateY(0deg);}
}
.fc-page{
position:absolute;top:2px;left:50%;width:calc(50% - 4px);height:calc(100% - 4px);
background:linear-gradient(180deg,#fffbf0,#f5e8c6);
border:1px solid rgba(120,80,20,.25);border-radius:0 5px 5px 0;
transform-origin:left center;transform:rotateY(0deg);
box-shadow:0 2px 8px rgba(0,0,0,.18);
opacity:0;
}
.fc-page::after{
content:"";position:absolute;inset:14px 18px;
background:repeating-linear-gradient(180deg, rgba(120,80,20,.25) 0, rgba(120,80,20,.25) 1px, transparent 1px, transparent 12px);
opacity:.55;
}
.fc-opener.run .fc-page{animation:fcPageFlip .95s cubic-bezier(.55,.05,.45,.95) forwards;}
.fc-opener.run .fc-page.p1{animation-delay:.30s;}
.fc-opener.run .fc-page.p2{animation-delay:.45s;}
.fc-opener.run .fc-page.p3{animation-delay:.60s;}
.fc-opener.run .fc-page.p4{animation-delay:.75s;}
@keyframes fcPageFlip{
0%{opacity:0;transform:rotateY(0deg);}
15%{opacity:1;}
85%{opacity:.9;}
100%{opacity:0;transform:rotateY(-175deg);}
}
.fc-opener-glow{
position:absolute;left:0;right:0;bottom:-40px;height:100px;margin:auto;
background:radial-gradient(ellipse at center, rgba(251,191,36,.5), transparent 70%);
filter:blur(8px);opacity:0;
}
.fc-opener.run .fc-opener-glow{animation:fcOpenerGlow 1.4s ease-out forwards;}
@keyframes fcOpenerGlow{
0%,25%{opacity:0;}
60%{opacity:.9;}
100%{opacity:0;}
}
/* 3D flip card */
.fc-card-wrap{
position:relative;width:100%;max-width:520px;margin:0 auto;
perspective:1400px;z-index:2;
}
.fc-card{
position:relative;width:100%;min-height:420px;
transform-style:preserve-3d;
transition:transform .7s cubic-bezier(.34,1.56,.64,1);
}
.fc-card.before-init{opacity:0;}
.fc-card.flipped{transform:rotateY(180deg);}
.fc-card.entering{animation:fcCardEnter .85s cubic-bezier(.34,1.56,.64,1) backwards;}
.fc-card.shake{animation:fcShake .42s ease-in-out;}
@keyframes fcCardEnter{
0%{opacity:0;transform:scale(.35) rotateY(-90deg);}
60%{opacity:1;}
100%{opacity:1;transform:scale(1) rotateY(0deg);}
}
@keyframes fcShake{
0%,100%{transform:translateX(0);}
15%{transform:translateX(-12px);}
30%{transform:translateX(12px);}
45%{transform:translateX(-9px);}
60%{transform:translateX(9px);}
75%{transform:translateX(-4px);}
}
.fc-face{
position:absolute;inset:0;min-height:420px;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
display:flex;flex-direction:column;
padding:1.4rem 1.4rem 1.5rem;
border-radius:18px;
background:linear-gradient(180deg,#111827 0%,#100a26 100%);
border:1px solid rgba(251,191,36,.48);
box-shadow:
0 0 40px rgba(251,191,36,.30),
inset 0 1px 0 rgba(251,191,36,.18);
}
.fc-front{justify-content:flex-start;}
.fc-back{transform:rotateY(180deg);justify-content:center;align-items:center;}
.fc-face::before{
content:"";position:absolute;inset:7px;border-radius:14px;
border:1px solid rgba(251,191,36,.18);
pointer-events:none;
}
.fc-card-ref{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:1.4rem;font-weight:700;letter-spacing:.18em;
color:#fbbf24;
text-shadow:0 0 18px rgba(251,191,36,.6);
text-align:center;margin-bottom:.45rem;
}
.fc-card-sub{
font-family:Georgia, 'Times New Roman', serif;
font-style:italic;font-size:.86rem;
color:#fef3c7;opacity:.78;
text-align:center;line-height:1.4;
margin-bottom:1.15rem;
}
.fc-question{
font-size:1.15rem;font-weight:700;color:#fef3c7;
line-height:1.5;text-align:center;
padding:0 .5rem;margin-bottom:1.3rem;
min-height:3em;
display:flex;align-items:center;justify-content:center;
}
.fc-choices{display:flex;flex-direction:column;gap:.6rem;margin-top:auto;}
.fc-choice{
position:relative;
background:linear-gradient(180deg, rgba(251,191,36,.14), rgba(251,191,36,.04));
border:1.5px solid rgba(251,191,36,.48);
color:#fef3c7;
padding:.85rem 1rem;border-radius:99px;
font-size:.95rem;font-weight:700;letter-spacing:.02em;
cursor:pointer;font-family:var(--fn);
text-align:center;
opacity:0;transform:translateY(20px);
transition:background .15s, border-color .15s, transform .15s, box-shadow .25s, color .15s;
}
.fc-choice.in{animation:fcChoiceIn .45s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes fcChoiceIn{
0%{opacity:0;transform:translateY(20px);}
100%{opacity:1;transform:translateY(0);}
}
.fc-choice:hover:not(:disabled){
background:linear-gradient(180deg, rgba(251,191,36,.24), rgba(251,191,36,.08));
border-color:rgba(251,191,36,.85);
box-shadow:0 0 22px rgba(251,191,36,.35);
}
.fc-choice:active:not(:disabled){transform:scale(.97);}
.fc-choice:disabled{cursor:default;}
.fc-choice-correct{
background:linear-gradient(180deg,rgba(34,197,94,.34),rgba(22,163,74,.18)) !important;
border-color:#22c55e !important;
color:#bbf7d0 !important;
box-shadow:0 0 30px rgba(34,197,94,.6) !important;
animation:fcCorrectPulse 1.0s ease-out;
}
.fc-choice-incorrect{
background:linear-gradient(180deg,rgba(239,68,68,.28),rgba(220,38,38,.14)) !important;
border-color:#ef4444 !important;
color:#fecaca !important;
box-shadow:0 0 24px rgba(239,68,68,.5) !important;
}
.fc-choice-correct::after{
content:"✓";position:absolute;right:1rem;top:50%;transform:translateY(-50%);
font-weight:900;color:#22c55e;font-size:1.1rem;
}
@keyframes fcCorrectPulse{
0%{box-shadow:0 0 28px rgba(34,197,94,.55);}
50%{box-shadow:0 0 50px rgba(34,197,94,.85);}
100%{box-shadow:0 0 28px rgba(34,197,94,.55);}
}
/* Back face */
.fc-result-icon{
font-size:3.2rem;line-height:1;margin-bottom:.4rem;
font-weight:900;
animation:fcIconFloat 1.0s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fcIconFloat{
0%{transform:scale(0);opacity:0;}
60%{transform:scale(1.25);opacity:1;}
100%{transform:scale(1);opacity:1;}
}
.fc-result-label{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:1.6rem;font-weight:700;letter-spacing:.10em;
margin-bottom:.85rem;text-shadow:0 0 14px currentColor;
}
.fc-result-label.correct{color:#22c55e;}
.fc-result-label.incorrect{color:#f87171;}
.fc-correct-row{
display:flex;align-items:center;gap:.5rem;justify-content:center;
background:rgba(251,191,36,.10);
border:1px solid rgba(251,191,36,.4);
border-radius:99px;
padding:.5rem 1rem;margin-bottom:.95rem;
}
.fc-correct-tag{
font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
color:#fbbf24;
}
.fc-correct-text{
font-size:1rem;font-weight:800;color:#fef3c7;
}
.fc-scripture{
max-width:90%;margin:0 auto .8rem;
opacity:0;transform:translateY(10px);
animation:fcFadeUp .55s ease-out .35s forwards;
}
@keyframes fcFadeUp{
to{opacity:1;transform:translateY(0);}
}
.fc-scripture-msg{
font-family:Georgia,'Times New Roman',serif;font-style:italic;
font-size:1rem;color:#fef3c7;
line-height:1.55;text-align:center;
margin-bottom:.4rem;
}
.fc-scripture-ref{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:.95rem;color:#fbbf24;
font-weight:700;letter-spacing:.1em;text-align:center;
}
.fc-next-wrap{
display:flex;align-items:center;gap:.85rem;justify-content:center;
margin-top:.4rem;
}
.fc-countdown{position:relative;width:54px;height:54px;}
.fc-countdown svg{transform:rotate(-90deg);width:100%;height:100%;}
.fc-countdown-track{fill:none;stroke:rgba(251,191,36,.20);stroke-width:4;}
.fc-countdown-bar{
fill:none;stroke:#fbbf24;stroke-width:4;stroke-linecap:round;
stroke-dasharray:150.8;stroke-dashoffset:0;
}
.fc-countdown-num{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:1.4rem;color:#fbbf24;font-weight:700;
}
.fc-next-btn{
background:linear-gradient(135deg,#fbbf24,#f59e0b);
color:#0a0d1a;border:none;
padding:.78rem 1.5rem;border-radius:99px;
font-size:.92rem;font-weight:900;letter-spacing:.04em;cursor:pointer;
font-family:var(--fn);
box-shadow:0 4px 18px rgba(251,191,36,.45);
transition:transform .15s, box-shadow .15s;
}
.fc-next-btn:hover{transform:translateY(-1px);box-shadow:0 6px 26px rgba(251,191,36,.65);}
.fc-next-btn:active{transform:scale(.97);}
/* Confetti-style gold particles on correct answer */
.fc-particles{
position:absolute;inset:0;pointer-events:none;overflow:hidden;
border-radius:18px;
}
.fc-particle{
position:absolute;width:8px;height:8px;border-radius:50%;
background:#fbbf24;opacity:0;
box-shadow:0 0 8px rgba(251,191,36,.7);
}
.fc-particle.go{animation:fcParticle 1.1s cubic-bezier(.4,0,.7,.2) forwards;}
@keyframes fcParticle{
0%{opacity:1;transform:translate(0,0) scale(1);}
100%{opacity:0;transform:translate(var(--fc-x,0),var(--fc-y,-60px)) scale(.4);}
}
/* Results screen */
.fc-results{
display:none;position:relative;overflow:hidden;
background:
radial-gradient(ellipse at top, rgba(251,191,36,.14), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%);
border:1px solid rgba(251,191,36,.48);
border-radius:18px;
box-shadow:0 0 50px rgba(251,191,36,.30);
padding:1.7rem 1.3rem;text-align:center;margin-top:.5rem;
}
.fc-results.show{display:block;}
.fc-results.show > *{
opacity:0;transform:translateY(14px);
animation:fcFadeUp .55s ease-out forwards;
}
.fc-results.show > *:nth-child(1){animation-delay:.05s;}
.fc-results.show > *:nth-child(2){animation-delay:.22s;}
.fc-results.show > *:nth-child(3){animation-delay:.40s;}
.fc-results.show > *:nth-child(4){animation-delay:.62s;}
.fc-results.show > *:nth-child(5){animation-delay:.82s;}
.fc-results-title{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:1.4rem;font-weight:700;letter-spacing:.18em;
color:#fbbf24;
text-shadow:0 0 18px rgba(251,191,36,.55);
margin-bottom:.85rem;
}
.fc-results-score{margin-bottom:1.1rem;}
.fc-results-num{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:4rem;font-weight:900;color:#fbbf24;line-height:1;
text-shadow:0 0 24px rgba(251,191,36,.7);
}
.fc-results-out{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:1.4rem;font-weight:700;letter-spacing:.06em;
color:#fef3c7;opacity:.8;margin-left:.4rem;
}
.fc-rating-stars{
display:flex;justify-content:center;gap:.5rem;margin:.4rem 0 1.1rem;
}
.fc-star-lg{font-size:2.6rem;line-height:1;}
.fc-star-lg.filled{
color:#fbbf24;text-shadow:0 0 18px rgba(251,191,36,.7);
animation:fcStarPop .65s cubic-bezier(.34,1.56,.64,1) backwards;
}
.fc-star-lg.empty{color:rgba(251,191,36,.18);}
.fc-rating-stars .fc-star-lg.filled:nth-child(1){animation-delay:.45s;}
.fc-rating-stars .fc-star-lg.filled:nth-child(2){animation-delay:.62s;}
.fc-rating-stars .fc-star-lg.filled:nth-child(3){animation-delay:.79s;}
@keyframes fcStarPop{
0%{opacity:0;transform:scale(.2) rotate(-90deg);}
60%{opacity:1;transform:scale(1.3) rotate(10deg);}
100%{opacity:1;transform:scale(1) rotate(0deg);}
}
.fc-results-msg-wrap{
margin:0 auto 1.2rem;max-width:90%;
padding:.95rem 1.1rem;
background:rgba(251,191,36,.08);
border:1px solid rgba(251,191,36,.32);
border-radius:14px;
}
.fc-results-msg{
font-family:Georgia,'Times New Roman',serif;font-style:italic;
font-size:1.05rem;color:#fef3c7;
line-height:1.55;margin-bottom:.45rem;
}
.fc-results-ref{
font-family:'Bebas Neue', var(--fh, var(--fm));
font-size:.95rem;color:#fbbf24;font-weight:700;letter-spacing:.1em;
}
.fc-results-actions{
display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;
}
.fc-play-again-btn, .fc-new-round-btn{
background:linear-gradient(135deg,#fbbf24,#f59e0b);
color:#0a0d1a;border:none;
padding:.85rem 1.5rem;border-radius:99px;
font-size:.92rem;font-weight:900;letter-spacing:.06em;cursor:pointer;
font-family:var(--fn);
box-shadow:0 4px 18px rgba(251,191,36,.45);
transition:transform .15s, box-shadow .15s;
}
.fc-play-again-btn:hover, .fc-new-round-btn:hover{
transform:translateY(-1px);box-shadow:0 6px 26px rgba(251,191,36,.65);
}
.fc-play-again-btn:active, .fc-new-round-btn:active{transform:scale(.97);}
.fc-new-round-btn{
background:linear-gradient(135deg,#a78bfa,#8b5cf6);
color:#fff;
box-shadow:0 4px 18px rgba(167,139,250,.45);
}
.fc-new-round-btn:hover{box-shadow:0 6px 26px rgba(167,139,250,.65);}
@media (max-width: 640px){
.fc-stage{padding:1.2rem .9rem 1.4rem;min-height:480px;}
.fc-card-ref{font-size:1.18rem;letter-spacing:.14em;}
.fc-question{font-size:1.02rem;padding:0;}
.fc-choice{font-size:.88rem;padding:.78rem .9rem;}
.fc-results-num{font-size:3.2rem;}
.fc-star-lg{font-size:2.1rem;}
.fc-book{width:200px;height:140px;}
}
/* ── Flashcards: always dark navy/gold regardless of body theme ── */
:root.light #flashcardGame,
:root.light .fc-container,
:root.light .fc-stage,
:root.light .fc-stage::before {
/* Reset CSS variable scope so child elements use dark values */
--bg:#0a0d1a;
--s1:#161b27;
--s2:#1c2333;
--tx:#f1f5f9;
--tx2:#94a3b8;
--g:#92400e;
}
:root.light #flashcardGame{ background:#0a0d1a !important; color:#f1f5f9 !important; }
:root.light .fc-stage{ background:linear-gradient(180deg,#0f1324 0%,#070a14 100%) !important; border-color:rgba(146,64,14,.18) !important; }
:root.light .fc-stage::before{ opacity:1; }
/* Simplify Settings for faith_free — only Appearance + Support remain. */
html[data-faith-free="1"] #sp .sp-pb { display: none !important; }
html[data-faith-free="1"] #sp-faith-support { display: block !important; }
/* Phase 5.4: Faith-free upgrade CTA card on Bible & Faith Home tab.
Visible only to faith_free users; paid users keep it hidden (default
inline display:none on the card). */
html[data-faith-free="1"] #fhUpgradeCard { display: block !important; }
/* The faith-free Support card (hidden by default; shown only via the
data-faith-free selector above). */
#sp-faith-support { display: none; }
/* ─── F4 — VISUAL LAYER ─────────────────────────────────────────
Reduced-motion users get the same content with no movement —
transitions snap, celebrations don't fire visually (toast still does). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* F4-I — Faith Home card entrance: stagger fade + slide up. Only fires
on first paint via the .fh-enter class added by renderFaithHome and
removed after the animation. */
@keyframes fhCardEnter {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
#bf-home.fh-enter > .fh-grid > .fh-card,
#bf-home.fh-enter > #fhFamilyVerseCard {
animation: fhCardEnter .42s cubic-bezier(.21,.78,.35,1) both;
}
#bf-home.fh-enter > #fhFamilyVerseCard { animation-delay: 0ms; }
#bf-home.fh-enter > .fh-grid > .fh-card:nth-child(1) { animation-delay: 60ms; }
#bf-home.fh-enter > .fh-grid > .fh-card:nth-child(2) { animation-delay: 140ms; }
#bf-home.fh-enter > .fh-grid > .fh-card:nth-child(3) { animation-delay: 220ms; }
#bf-home.fh-enter > .fh-grid > .fh-card:nth-child(4) { animation-delay: 300ms; }
#bf-home.fh-enter > .fh-grid > .fh-card:nth-child(5) { animation-delay: 380ms; }
/* F4-A — Animated route polylines. Each Leaflet polyline path gets
class .bw-route-anim with stroke-dasharray + dashoffset animated
from full length to 0 (line draws progressively). */
@keyframes bwRouteDraw {
to { stroke-dashoffset: 0; }
}
.leaflet-pane path.bw-route-anim {
animation: bwRouteDraw var(--bw-route-dur, 4500ms) ease-out forwards;
}
@keyframes bwWaypointPulse {
0% { transform: scale(1); opacity: .9; }
60% { transform: scale(1.6); opacity: 1; }
100% { transform: scale(1); opacity: .9; }
}
.bw-route-waypoint .leaflet-marker-icon { animation: bwWaypointPulse .9s ease-out 1; }
/* F4-C — Celebration overlay (full-screen, pointer-events none, top of stack).
Used for dove / sparkle / confetti / cross / flame on key faith actions. */
#fxOverlay {
position: fixed; inset: 0; pointer-events: none; z-index: 99998;
overflow: hidden; display: none;
}
#fxOverlay.fx-on { display: block; }
@keyframes fxDoveFly {
0% { transform: translate(-30vw, 60vh) rotate(-12deg); opacity: 0; }
20% { opacity: 1; }
60% { transform: translate(60vw, 22vh) rotate(8deg); opacity: 1; }
100% { transform: translate(110vw, 8vh) rotate(2deg); opacity: 0; }
}
.fx-dove {
position: absolute; left: 0; top: 0; width: 80px; height: 80px;
animation: fxDoveFly 2.6s cubic-bezier(.4,0,.3,1) forwards;
filter: drop-shadow(0 4px 12px rgba(167,139,250,.4));
}
@keyframes fxSparkleBurst {
0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
20% { opacity: 1; }
100% { transform: translate(-50%, -50%) scale(2.6) rotate(180deg); opacity: 0; }
}
.fx-sparkle {
position: absolute; left: 50%; top: 38%; width: 200px; height: 200px;
animation: fxSparkleBurst 1.6s cubic-bezier(.21,.78,.35,1) forwards;
filter: drop-shadow(0 0 18px rgba(251,191,36,.55));
}
@keyframes fxConfettiFall {
0% { transform: translateY(-12vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.fx-confetti-piece {
position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px;
animation: fxConfettiFall 2.6s linear forwards;
}
@keyframes fxCrossLight {
0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
30% { opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
.fx-cross {
position: absolute; left: 50%; top: 42%; width: 160px; height: 160px;
animation: fxCrossLight 1.6s ease-out forwards;
filter: drop-shadow(0 0 24px rgba(251,191,36,.6));
}
/* F4-E — Modal fullscreen mode. Triggered by the .mo-fullscreen class
(set by toggleModalFullscreen in ui.js). Acts as a CSS fallback when
the native Fullscreen API is rejected and as the primary style when
the browser grants requestFullscreen() since the dialog itself becomes
the fullscreen element. */
.mo.mo-fullscreen .md {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
/* When the dialog is the actual native fullscreen element, ensure inner
content can scroll and any inner panels stretch sensibly. */
.md:fullscreen { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; overflow:auto; padding: 0 !important; }
.md:-webkit-full-screen { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; overflow:auto; padding: 0 !important; }
/* F4-H — Plan mini-map progress marker pulse. */
@keyframes planMarkerPulse {
0%, 100% { transform: scale(1); opacity: .35; }
50% { transform: scale(1.45); opacity: .15; }
}
@keyframes fxFlameRise {
0% { transform: translate(-50%, 0) scale(.4); opacity: 0; }
30% { opacity: 1; }
100% { transform: translate(-50%, -40vh) scale(1.6); opacity: 0; }
}
.fx-flame {
position: absolute; left: 50%; bottom: 0; width: 120px; height: 120px;
animation: fxFlameRise 1.8s cubic-bezier(.21,.78,.35,1) forwards;
filter: drop-shadow(0 0 18px rgba(251,113,38,.7));
}
/* ── PHASE 2.4 PARENT HUB TAB BAR ───────────────────────────────────────── */
.ph-home-crumb {
margin-bottom: .35rem;
}
.ph-home-crumb a {
font-size: .72rem;
font-weight: 600;
color: var(--tx2);
text-decoration: none;
padding: .25rem .5rem;
border-radius: 6px;
transition: color .15s, background .15s;
}
.ph-home-crumb a:hover {
color: var(--c);
background: rgba(255,255,255,.04);
}
.ph-tab-bar {
display: flex;
gap: .35rem;
padding: .35rem;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
position: sticky;
top: 0;
z-index: 10;
margin-bottom: .7rem;
}
.ph-tab {
flex: 1;
background: none;
border: 1px solid transparent;
border-radius: 10px;
padding: .6rem .4rem;
font-size: .82rem;
font-weight: 700;
color: var(--tx2);
cursor: pointer;
transition: all .15s;
font-family: var(--fn);
}
.ph-tab:hover {
background: rgba(255,255,255,.04);
color: var(--tx);
}
.ph-tab.active {
background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(167,139,250,.08));
border-color: rgba(56,189,248,.25);
color: var(--tx);
}
/* Mobile: smaller labels, tighter padding */
@media (max-width: 600px) {
.ph-tab { font-size: .72rem; padding: .5rem .25rem; }
}
/* ── PHASE 2.1 AGE PICKER ──────────────────────────────────────────────── */
.age-bracket-card:hover {
transform: translateY(-2px);
filter: brightness(1.15);
}
.age-bracket-card:active {
transform: translateY(0);
filter: brightness(.95);
}
.age-bracket-card:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
/* ════════════════════════════════════════════════════════════════════
PHASE 7 — Bible & Faith typography unification (Timeline-style)
Replaces purple rounded banners with a clean header pattern, and
lightens body-text weight + adds breathing room throughout the
Bible & Faith tabs.
════════════════════════════════════════════════════════════════════ */
/* Reusable section-header pattern — match the Timeline hero */
.bf-section-hdr{
padding:1.1rem 0 1rem;
margin-bottom:1.1rem;
border-bottom:1px solid rgba(251,191,36,0.15);
}
.bf-eyebrow{
font-family:var(--fm);
font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
color:#fbbf24;opacity:.78;
margin-bottom:.45rem;
}
.bf-title{
font-family:'Bebas Neue', var(--fm);
font-size:1.95rem;line-height:1;letter-spacing:.04em;
background:linear-gradient(135deg,#fef3c7 0%,#fbbf24 60%,#d97706 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
color:#fbbf24; /* fallback */
margin-bottom:.45rem;
}
.bf-sub{
font-family:Georgia, 'Times New Roman', serif;font-style:italic;
font-size:.95rem;line-height:1.6;
color:#fef3c7;opacity:.82;
max-width:560px;
font-weight:400;
}
:root.light .bf-eyebrow{color:#92400e;opacity:.9;}
:root.light .bf-sub{color:#4a4b52;opacity:1;}
:root.light .bf-section-hdr{border-bottom-color:rgba(180,120,20,.22);}
/* Recolor the purple "active" chips/tabs to gold so the palette stays unified */
#bf-plans .pl-chip.active{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border-color:transparent !important;
box-shadow:0 4px 14px rgba(251,191,36,.35) !important;
}
#bf-memorize .mv-tab.active{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border-color:transparent !important;
}
#bf-memorize .mv-cat-chip.active{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border-color:transparent !important;
}
/* Active-plan banner inside #bf-plans: navy+gold instead of purple */
#bf-plans .pl-active-banner{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.16), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
color:#fef3c7 !important;
border:1px solid rgba(251,191,36,.32) !important;
box-shadow:0 0 28px rgba(251,191,36,.18) !important;
}
#bf-plans .pl-active-bar{background:rgba(251,191,36,.18) !important;}
#bf-plans .pl-active-bar-fill{background:linear-gradient(90deg,#fbbf24,#f59e0b) !important;}
/* ─── Typography cleanup across #bf-* tabs ────────────────────────
Lighter body weight + more line-height + remove forced 900s on
non-headings. Headings (Bebas Neue titles, stat numbers, badges)
keep their existing weights. */
[id^="bf-"] p{
font-weight:400;
line-height:1.65;
}
[id^="bf-"] .pl-card-short,
[id^="bf-"] .pl-hero-sub,
[id^="bf-"] .fh-devo-snippet,
[id^="bf-"] .fh-plan-empty,
[id^="bf-"] .mv-hero-sub,
[id^="bf-"] .mv-card-text,
[id^="bf-"] .fh-streak-sub,
[id^="bf-"] .pl-empty,
[id^="bf-"] .mv-empty,
[id^="bf-"] .dev-snippet,
[id^="bf-"] .dev-body,
[id^="bf-"] [class*="-desc"],
[id^="bf-"] [class*="-description"]{
font-weight:400 !important;
line-height:1.65 !important;
}
/* Verse-of-the-day body keeps slight weight for readability but not bold */
[id^="bf-"] .fh-votd-text{
font-weight:500 !important;
line-height:1.7 !important;
}
/* Card headers stay readable but drop from 800 to 600 */
[id^="bf-"] .fh-card-hdr,
[id^="bf-"] .fh-card-title{
font-weight:600 !important;
letter-spacing:.02em;
}
/* Section sub-headers (small caps) keep their identity but soften */
[id^="bf-"] .pl-section-hdr,
[id^="bf-"] .mv-section-hdr{
font-weight:700 !important;
letter-spacing:.18em !important;
color:#fbbf24 !important;
opacity:.78;
}
:root.light [id^="bf-"] .pl-section-hdr,
:root.light [id^="bf-"] .mv-section-hdr{color:#92400e !important;}
/* Devotional inner body text (the inline-styled blocks in bf-devotional) */
#bf-devotional [id="devBody"],
#bf-devotional [id="devReflect"],
#bf-devotional [id="devPrayer"]{
font-weight:400 !important;
line-height:1.7 !important;
}
/* ─── Override the purple `--cd-banner` blocks that act as banners ── */
#bf-home .fh-votd{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.18), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
border:1px solid rgba(251,191,36,.32) !important;
color:#fef3c7 !important;
box-shadow:0 0 32px rgba(251,191,36,.18) !important;
}
#bf-home .fh-votd-eyebrow{color:#fbbf24 !important;opacity:.8;}
#bf-home .fh-votd-text{color:#fef3c7 !important;}
#bf-home .fh-votd-ref{color:#fbbf24 !important;opacity:.9;}
#bf-home .fh-votd-actions button{
background:rgba(251,191,36,.12) !important;
color:#fef3c7 !important;
border:1px solid rgba(251,191,36,.32) !important;
}
#bf-home .fh-votd-actions button:hover{
background:rgba(251,191,36,.22) !important;
}
:root.light #bf-home .fh-votd{
background:
radial-gradient(ellipse at top, rgba(146,64,14,.18), transparent 60%),
linear-gradient(180deg,#fffaeb 0%,#fdf0c8 100%) !important;
border-color:rgba(180,120,20,.45) !important;
color:#111827 !important;
}
:root.light #bf-home .fh-votd-text{color:#111827 !important;}
:root.light #bf-home .fh-votd-eyebrow{color:#92400e !important;}
:root.light #bf-home .fh-votd-ref{color:#92400e !important;}
:root.light #bf-home .fh-votd-actions button{
background:rgba(146,64,14,.18) !important;
color:#111827 !important;
border-color:rgba(180,120,20,.4) !important;
}
/* CTA buttons keep purple-gradient identity since they're action targets,
but live-plan/active state buttons get gold treatment via .pl-chip.active
and .mv-tab.active overrides above. The .fh-btn primary action remains
purple by design (it's a button, not a banner). */
/* Prayer prompt card — drop purple banner, navy+gold instead */
#bf-prayer .pr-prompt{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.14), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
border:1px solid rgba(251,191,36,.28) !important;
color:#fef3c7 !important;
box-shadow:0 0 28px rgba(251,191,36,.16) !important;
}
#bf-prayer .pr-prompt-eyebrow{color:#fbbf24 !important;opacity:.85;}
#bf-prayer .pr-prompt-text{color:#fef3c7 !important;font-weight:500 !important;line-height:1.55;}
#bf-prayer .pr-prompt-cta{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
}
#bf-prayer .pr-chip.active[data-grp="type"]{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
}
#bf-prayer .pr-tab.active{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
}
#bf-bibleworld .bw-chip.active{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
}
/* Light-mode variants for the navy → parchment swap on the de-purpled banners */
:root.light #bf-prayer .pr-prompt,
:root.light #bf-plans .pl-active-banner{
background:
radial-gradient(ellipse at top, rgba(146,64,14,.16), transparent 60%),
linear-gradient(180deg,#fffaeb 0%,#fdf0c8 100%) !important;
color:#111827 !important;
border-color:rgba(180,120,20,.4) !important;
}
:root.light #bf-prayer .pr-prompt-eyebrow{color:#92400e !important;}
:root.light #bf-prayer .pr-prompt-text{color:#111827 !important;}
/* ════════════════════════════════════════════════════════════════════
F9 — Final consistency sweep across The Well
════════════════════════════════════════════════════════════════════ */
/* ─── Shared .well-card alias — future tabs can use this to inherit
the topic-card spec without re-declaring CSS. */
.well-card{
background:rgba(255,255,255,.03);
border:1px solid rgba(251,191,36,.18);
border-radius:14px;
min-height:260px;
padding:1rem;
cursor:pointer;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.well-card:hover{
transform:translateY(-3px);
box-shadow:0 14px 36px rgba(251,191,36,.22);
border-color:rgba(251,191,36,.5);
}
:root.light .well-card{background:#ffffff;border-color:#d0d1d6;box-shadow:0 1px 3px rgba(0,0,0,.06);}
/* ─── Plans tab: hero + plan-detail modal header + card glow → gold ─── */
#bf-plans .pl-hero{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.16), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
color:#fef3c7 !important;
border:1px solid rgba(251,191,36,.32) !important;
box-shadow:0 0 28px rgba(251,191,36,.18) !important;
}
#bf-plans .pl-hero-title{color:#fbbf24 !important;}
#bf-plans .pl-hero-sub{color:#fef3c7 !important;opacity:.85;}
#bf-plans .pl-card{
box-shadow:0 8px 24px rgba(15,23,42,.18), 0 0 16px rgba(251,191,36,.08) !important;
}
#bf-plans .pl-card:hover{
box-shadow:0 14px 36px rgba(15,23,42,.28), 0 0 28px rgba(251,191,36,.22) !important;
}
#planDetailModal #planDetailHeader{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.18), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
color:#fef3c7 !important;
border-bottom:1px solid rgba(251,191,36,.22);
}
/* ─── Bible Lands: modal headers + card glow + tagline font ─── */
#bf-bibleworld .bw-card{
background:rgba(255,255,255,.03) !important;
border:1px solid rgba(251,191,36,.2) !important;
box-shadow:0 8px 24px rgba(15,23,42,.18), 0 0 16px rgba(251,191,36,.08) !important;
}
#bf-bibleworld .bw-card:hover{
border-color:rgba(251,191,36,.5) !important;
box-shadow:0 14px 36px rgba(15,23,42,.28), 0 0 28px rgba(251,191,36,.22) !important;
}
#bf-bibleworld .bw-card-tagline{
font-family:Georgia,'Times New Roman',serif !important;
font-style:italic !important;
font-weight:400 !important;
line-height:1.6 !important;
}
#bf-bibleworld .bw-chip.active{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border-color:transparent !important;
box-shadow:0 4px 14px rgba(251,191,36,.32) !important;
}
#bwDiscoveryModal .md > div:first-of-type,
#bwSiteModal .md > div:first-of-type{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.18), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
color:#fef3c7 !important;
}
#bwDiscHeader,
#bwSiteHeader{color:#fbbf24 !important;}
/* ─── Memorize: hero + card glow → gold ─── */
#bf-memorize .mv-hero{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.16), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
color:#fef3c7 !important;
border:1px solid rgba(251,191,36,.32) !important;
}
#bf-memorize .mv-card{
background:rgba(255,255,255,.03) !important;
border:1px solid rgba(251,191,36,.2) !important;
box-shadow:0 8px 24px rgba(15,23,42,.18), 0 0 16px rgba(251,191,36,.08) !important;
}
#bf-memorize .mv-card:hover{
border-color:rgba(251,191,36,.5) !important;
box-shadow:0 14px 36px rgba(15,23,42,.28), 0 0 28px rgba(251,191,36,.22) !important;
}
#bf-memorize .mv-card-text{line-height:1.6 !important;}
/* ─── Bible tab: replace remaining cd-banner CTAs with gold ─── */
#bf-bible button[onclick="runEsvSearch()"]{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border:none !important;
}
#askBibleModal button[type="submit"],
#askBibleModal .ask-bible-submit{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
}
/* ─── Home tab: VOTD action buttons + tile hover + XP label → gold ─── */
#bf-home .fh-tile:hover{
border-color:rgba(251,191,36,.45) !important;
}
#bf-home .fh-xp-label{color:#fbbf24 !important;}
/* ─── Devotional tab: title gradient + scripture cream + reflection cyan→gold ─── */
#bf-devotional #devTitle{
font-family:'Bebas Neue',var(--fm) !important;
background:linear-gradient(135deg,#fef3c7 0%,#fbbf24 60%,#d97706 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
color:#fbbf24;
text-shadow:0 2px 28px rgba(251,191,36,.22);
}
:root.light #bf-devotional #devTitle{
background:linear-gradient(135deg,#d97706 0%,#92400e 60%,#7c2d12 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
color:#92400e;
}
#bf-devotional #devScripture{color:#fef3c7 !important;}
/* ─── Universal modal polish — close button minimum 44x44, modal z-index ─── */
.mo .md > [onclick*="close"],
.mo .md button[aria-label="Close"]{
min-width:44px;
min-height:44px;
}
/* Story characters / Bible reader chapter / Bible Project popup all share #charModal.
Already updated inline. Keep modal-base z-index uniform. */
.mo{z-index:100000;}
/* ─── Bottom nav: active state must inherit gold from top tab when tab is active ─── */
#s-scripture .scrTabs-bottom .tab.active{
background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(251,191,36,.06)) !important;
border-color:rgba(251,191,36,.55) !important;
color:#fef3c7 !important;
}
/* ─── "Coming Soon" replacement for old phase tag ─── */
#bf-home .fh-tile-soon::after{
content:'Coming Soon' !important;
background:rgba(251,191,36,.12) !important;
color:#fbbf24 !important;
border-color:rgba(251,191,36,.3) !important;
}
/* ════════════════════════════════════════════════════════════════════
F9.1 — Targeted fixes (Devotional modal, Bible Lands cards, Family
verse home card). The Devotional and Family verse fixes are inline
in index.html / faith.js; this block covers the Bible Lands cards
that needed CSS to match the .topic-card visual spec.
════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
F9.3 — Biblical Archaeology cards visual warmth match
Goal: same feel as Reading Plans cards. Era-tinted gradient bg,
photo thumb top-right, Bebas title + pill row, Georgia italic
tagline, scripture ref + EXPLORE → CTA at the bottom.
The render function sets --era-tint (two color stops) and --era-c
(period accent color) as inline CSS vars on each .bw-card.
════════════════════════════════════════════════════════════════════ */
#bf-bibleworld .bw-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:1rem;
}
#bf-bibleworld .bw-card{
background:linear-gradient(135deg, var(--era-tint, rgba(251,191,36,.06), rgba(167,139,250,.04))) !important;
border:1px solid rgba(251,191,36,.18) !important;
border-left-width:1px !important;
border-radius:16px !important;
min-height:180px !important;
padding:1.1rem 1.1rem 1rem !important;
box-shadow:0 4px 18px rgba(0,0,0,.10) !important;
display:flex !important;
flex-direction:column !important;
gap:.65rem !important;
cursor:pointer;
width:100%;
text-align:left;
appearance:none;
-webkit-appearance:none;
position:relative;
overflow:hidden;
font:inherit;
font-family:var(--fm);
color:var(--tx);
transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#bf-bibleworld .bw-card:hover{
transform:translateY(-3px) !important;
border-color:rgba(251,191,36,.5) !important;
box-shadow:0 8px 28px rgba(251,191,36,.18) !important;
}
#bf-bibleworld .bw-card:active{transform:scale(.98) !important;}
/* Top row: title block on the left, photo thumb top-right */
#bf-bibleworld .bw-card-top{
display:flex;
align-items:flex-start;
gap:.7rem;
}
#bf-bibleworld .bw-card-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:.45rem;}
#bf-bibleworld .bw-card-name{
font-family:'Bebas Neue', var(--fh, var(--fm)) !important;
font-size:1.1rem !important;
letter-spacing:.06em !important;
color:var(--tx) !important;
font-weight:700 !important;
line-height:1.15 !important;
margin:0 !important;
text-shadow:none !important;
}
#bf-bibleworld .bw-card-photo{
flex:0 0 auto;
width:48px;height:48px;
border-radius:10px;overflow:hidden;
background:rgba(10,13,26,.4);
border:1px solid rgba(251,191,36,.22);
display:flex;align-items:center;justify-content:center;
font-size:1.4rem;
}
#bf-bibleworld .bw-card-photo img{
width:100%;height:100%;object-fit:cover;display:block;
}
#bf-bibleworld .bw-card-photo-fallback{
background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.06));
}
/* Era pill row — same compact treatment as plan category chips */
#bf-bibleworld .bw-card-eras{
display:flex !important;
flex-wrap:wrap !important;
gap:.25rem !important;
margin:0 !important;
}
#bf-bibleworld .bw-card-era{
display:inline-flex;
align-items:center;
padding:.16rem .5rem;
border-radius:99px;
background:color-mix(in srgb, var(--era-c, #38bdf8) 18%, transparent);
border:1px solid color-mix(in srgb, var(--era-c, #38bdf8) 38%, transparent);
color:var(--era-c, #38bdf8);
font-family:var(--fm);
font-size:.56rem;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
line-height:1.2;
white-space:nowrap;
}
@supports not (color: color-mix(in srgb, red, blue)){
#bf-bibleworld .bw-card-era{
background:rgba(56,189,248,.18);
border-color:rgba(56,189,248,.4);
color:#7dd3fc;
}
}
#bf-bibleworld .bw-card-tagline{
font-family:Georgia,'Times New Roman',serif !important;
font-style:italic !important;
font-size:.88rem !important;
font-weight:400 !important;
line-height:1.55 !important;
color:var(--tx2) !important;
opacity:1 !important;
margin:0 !important;
flex:1 1 auto;
}
/* Bottom row: scripture ref pill on the left, EXPLORE → on the right */
#bf-bibleworld .bw-card-foot{
display:flex;align-items:center;gap:.5rem;
margin-top:auto;padding-top:.3rem;
border-top:1px solid rgba(251,191,36,.1);
}
#bf-bibleworld .bw-card-ref{
display:inline-flex;align-items:center;gap:.25rem;
font-family:var(--fm);
font-size:.6rem;font-weight:700;letter-spacing:.06em;
color:var(--tx2);
background:rgba(56,189,248,.12);
border:1px solid rgba(56,189,248,.28);
border-radius:99px;
padding:.15rem .55rem;
white-space:nowrap;
}
#bf-bibleworld .bw-card-cta{
margin-left:auto;
font-family:var(--fm);
font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:var(--era-c, #fbbf24);
}
/* Legacy .bw-card-meta retained in case other render paths still use it */
#bf-bibleworld .bw-card-meta{
font-family:var(--fm);
font-size:.62rem !important;
letter-spacing:.16em !important;
color:var(--tx2) !important;
font-weight:700 !important;
text-transform:uppercase;
margin-bottom:0 !important;
}
/* Light-mode parchment treatment */
:root.light #bf-bibleworld .bw-card{
background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,250,235,.78)) !important;
border-color:rgba(180,120,20,.32) !important;
box-shadow:0 4px 14px rgba(60,40,15,.08) !important;
color:#111827 !important;
}
:root.light #bf-bibleworld .bw-card:hover{
border-color:rgba(180,120,20,.55) !important;
box-shadow:0 8px 28px rgba(180,120,20,.22) !important;
}
:root.light #bf-bibleworld .bw-card-name{color:#111827 !important;}
:root.light #bf-bibleworld .bw-card-tagline{color:#7a7b85 !important;opacity:1;}
:root.light #bf-bibleworld .bw-card-era{color:var(--era-c, #111827);}
:root.light #bf-bibleworld .bw-card-photo{background:rgba(255,250,235,.7);border-color:rgba(180,120,20,.32);}
:root.light #bf-bibleworld .bw-card-ref{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.4);color:#1e3a8a;}
:root.light #bf-bibleworld .bw-card-foot{border-top-color:rgba(180,120,20,.18);}
/* ─── Family verse card light-mode parchment ─── */
:root.light #fhFamilyVerseCard{
background:rgba(255,255,255,.65) !important;
border-color:rgba(180,120,20,.28) !important;
}
:root.light #fhFamilyVerseCard #fhFamilyVerseText{color:#111827 !important;}
:root.light #fhFamilyVerseCard #fhFamilyVerseRef{color:#92400e !important;}
:root.light #fhFamilyVerseCard > div:first-child{color:#92400e !important;}
/* ════════════════════════════════════════════════════════════════════
F10 — Close-out consistency pass for The Well
Final sweep across every tab. Resolves P0 close-button sizing
(the F9 selector used > child instead of descendant — most buttons
bypassed it), P1 purple holdouts + light-mode gaps, P2 card spec
gaps on Memorize/Plans, P3 typography/color polish.
════════════════════════════════════════════════════════════════════ */
/* ─── P0 · Universal 44×44 minimum on every Well modal close button ─── */
.mo .md [onclick*="close"],
.mo .md button[aria-label="Close"],
.mo .md .lm-close,
.mo .md .tlm-close,
.mo .md .sp-close{
min-width:44px !important;
min-height:44px !important;
}
/* Daily devotional popup lives outside .mo — explicit selector */
#dailyDevModal [onclick*="closeDailyDevModal"]{
min-width:44px !important;
min-height:44px !important;
}
/* ─── P1 · Remaining purple CTAs and hero blocks → gold ─── */
#sermonNoteModal button[onclick*="saveSermon"],
#sermonNoteModal button[onclick*="Save"]{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border:none !important;
}
#acCertModal button[onclick*="Download"],
#acCertModal button[onclick*="acCertDownload"]{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border:none !important;
}
#bf-bibleworld .bw-hero{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.16), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
color:#fef3c7 !important;
border:1px solid rgba(251,191,36,.28) !important;
box-shadow:0 0 24px rgba(251,191,36,.16) !important;
}
#bf-bibleworld .bw-vtab.active,
#bf-bibleworld button.bw-vtab[onclick*="bwView"][style*="cd-banner"]{
background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
color:#0a0d1a !important;
border-color:transparent !important;
}
/* Devotional scripture reference: violet #a78bfa → gold */
#bf-devotional #devRef{color:#fbbf24 !important;}
/* Devotional "Reflection" label: cyan var(--c) → gold */
#bf-devotional .content-section span[style*="color:var(--c)"],
#bf-devotional > div:first-of-type span[style*="color:var(--c)"]{
color:#fbbf24 !important;
}
/* Academy legacy hero (.ac-hero) — wasn't overridden in F9 */
#bf-academy .ac-hero{
background:
radial-gradient(ellipse at top, rgba(251,191,36,.16), transparent 60%),
linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
color:#fef3c7 !important;
border:1px solid rgba(251,191,36,.28) !important;
box-shadow:0 0 24px rgba(251,191,36,.16) !important;
}
/* ─── P1 · Light-mode parchment for surfaces that were missing it ─── */
/* Devotional inner card body */
:root.light #bf-devotional > div:nth-of-type(2){
background:#ffffff !important;
border-color:#d0d1d6 !important;
}
:root.light #bf-devotional #devScripture{color:#111827 !important;}
:root.light #bf-devotional #devRef{color:#92400e !important;}
:root.light #bf-devotional #devBody,
:root.light #bf-devotional #devReflect,
:root.light #bf-devotional #devPrayer{color:#4a4b52 !important;}
/* Journey tab surfaces */
:root.light #bf-journey div[style*="rgba(255,255,255,.03)"]{
background:rgba(255,255,255,.7) !important;
border-color:rgba(180,120,20,.22) !important;
}
:root.light #bf-journey .bf-sub-eye{color:#92400e !important;}
/* Memorize hero — was overridden to dark navy in F9. Now flips to
parchment in light mode. */
:root.light #bf-memorize .mv-hero{
background:
radial-gradient(ellipse at top, rgba(146,64,14,.18), transparent 60%),
linear-gradient(180deg,#fffaeb 0%,#fdf0c8 100%) !important;
color:#111827 !important;
border-color:rgba(180,120,20,.4) !important;
}
:root.light #bf-memorize .mv-card{
background:rgba(255,255,255,.7) !important;
border-color:rgba(180,120,20,.28) !important;
}
/* Academy hero light mode */
:root.light #bf-academy .ac-hero{
background:
radial-gradient(ellipse at top, rgba(146,64,14,.18), transparent 60%),
linear-gradient(180deg,#fffaeb 0%,#fdf0c8 100%) !important;
color:#111827 !important;
border-color:rgba(180,120,20,.4) !important;
}
/* ─── P2 · Academy legacy modules: gold border (was purple via --cd-card-border) ─── */
#bf-academy .ac-module{
background:rgba(255,255,255,.03) !important;
border:1px solid rgba(251,191,36,.18) !important;
border-left-width:4px !important;
border-left-color:rgba(251,191,36,.45) !important;
box-shadow:0 4px 14px rgba(15,23,42,.18) !important;
}
#bf-academy .ac-module:hover{
border-color:rgba(251,191,36,.4) !important;
box-shadow:0 8px 24px rgba(251,191,36,.12) !important;
}
:root.light #bf-academy .ac-module{
background:rgba(255,255,255,.7) !important;
border-color:rgba(180,120,20,.28) !important;
}
/* ─── P2 · Default modal gold-on-dark for the seven that lacked it ─── */
#sermonNoteModal .md,
#prayerAnswerModal .md,
#verseNoteModal .md,
#readerSettingsModal .md,
#askBibleModal .md,
#acQuizModal .md,
#acCertModal .md{
background:linear-gradient(180deg,#111827 0%,#0a0d1a 100%) !important;
border:1px solid rgba(251,191,36,.32) !important;
box-shadow:0 0 40px rgba(251,191,36,.18), 0 30px 80px rgba(0,0,0,.5) !important;
}
:root.light #sermonNoteModal .md,
:root.light #prayerAnswerModal .md,
:root.light #verseNoteModal .md,
:root.light #readerSettingsModal .md,
:root.light #askBibleModal .md,
:root.light #acQuizModal .md,
:root.light #acCertModal .md{
background:#ffffff !important;
border-color:#d0d1d6 !important;
}
/* ─── P3 · Memorize verse text: Georgia italic (was plain Inter) ─── */
#bf-memorize .mv-card-text{
font-family:Georgia,'Times New Roman',serif !important;
font-style:italic !important;
font-weight:400 !important;
line-height:1.6 !important;
}
/* ─── P3 · Bring lessonModal + tlEventModal border opacity up to .45 spec ─── */
#lessonModal .md,
#tlEventModal .md{
border-color:rgba(251,191,36,.45) !important;
box-shadow:0 0 40px rgba(251,191,36,.20), 0 30px 80px rgba(0,0,0,.5) !important;
}
/* ─── P3 · Story player needs a real border (inset box-shadow disappears in light) ─── */
#storyPlayerModal .md{
border:1px solid rgba(251,191,36,.32) !important;
}
/* ─── P3 · Hover transform on home topic-cards (translateY matches well-card spec) ─── */
#bf-home .topic-card:hover{
transform:translateY(-3px) !important;
}
/* ─── P3 · Faith-card description text → Georgia italic on Well surfaces only.
Scoped to #s-scripture so general topic-card-desc elsewhere is untouched. */
#s-scripture .topic-card-desc,
#bf-home .topic-card-desc{
font-family:Georgia,'Times New Roman',serif !important;
font-style:italic !important;
font-weight:400 !important;
line-height:1.55 !important;
}
/* ══════════════════════════════════════════════════════════════════
F11.1 — Mobile audit fixes (iPhone-focused, 2026-05-14)
Implements 9 of the 11 findings from docs/F11-mobile-audit-iphone.md.
Skipped: P1-02 schedule mobile variant, P1-03 marketing compare-table
mobile variant — both need design work, tracked as follow-ups.
══════════════════════════════════════════════════════════════════ */
/* ── P0-01 — iOS X+ home-indicator safe area ─────────────────────
Pair with viewport-fit=cover on app/index.html. env() resolves to 0
on devices without an indicator, so this is harmless everywhere. */
@media (max-width: 860px){
#app{ padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
.toast{ bottom: calc(1.8rem + env(safe-area-inset-bottom)); }
#tutReturnBtn{ bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
#s-worship .wp-mini{ padding-bottom: env(safe-area-inset-bottom); }
/* ── P0-02 — Apple HIG 44pt action button minimum ──────────────── */
.btn{ min-height:44px; padding:.7rem 1.15rem; }
/* ── P1-01 — Enlarge tap targets on small icons & controls.
Visual size stays close to current; hit area expands via either
a transparent ::before overlay (icons, toggles) or a small size
bump (the checkbox, which IS a primary user action). */
.hlp, .tip-btn{ position:relative; }
.hlp::before, .tip-btn::before{
content:''; position:absolute; inset:-12px; border-radius:50%;
}
/* Checkbox bumped from 18→24px + hit-area overlay → 44px tappable. */
.ck{ width:24px; height:24px; font-size:.78rem; position:relative; }
.ck::before{ content:''; position:absolute; inset:-10px; border-radius:8px; }
/* Toggle: keep visible track at 42×23 but expand hit area to 44×45. */
.tg::before{
content:''; position:absolute; inset:-11px -1px;
border-radius:100px; z-index:0;
}
.tg::after{ z-index:1; } /* keep the thumb above the new ::before overlay */
/* Inline edit/delete text buttons — expand vertical hit area only so
rows of these don't visually merge horizontally. */
.eb, .db{ position:relative; }
.eb::before, .db::before{
content:''; position:absolute; inset:-10px 0;
}
/* ── P1-05 — Modal padding compresses on phones ─────────────────── */
@media (max-width: 520px){
.md{ padding:1.1rem; }
}
/* ── P2-01 — Dynamic viewport height (100dvh) where used.
100vh on iOS Safari includes the address bar; when it collapses
on scroll, layouts sized to 100vh have 60-90px of content cut
off the bottom. 100dvh follows the dynamic viewport. We pair the
two declarations so older browsers fall back to 100vh. */
body{ min-height:100vh; min-height:100dvh; }
#mainWrap{ min-height:100vh; min-height:100dvh; }
#sp{ height:100vh; height:100dvh; }
.md:fullscreen{
height:100vh; height:100dvh;
max-height:100vh; max-height:100dvh;
}
.md:-webkit-full-screen{
height:100vh; height:100dvh;
max-height:100vh; max-height:100dvh;
}
/* ── P2-03 — Form inputs ≥16px to prevent iOS Safari focus-zoom.
html font-size is 17px, so 1rem = 17px = safely > 16. */
input, textarea, select{ font-size:1rem; }
input[type=file]{ font-size:1rem; }
/* ── P2-04 — Marketing-style CTA buttons meet 44pt where the .btn
class isn't applied (rare, but covers the inline-styled pattern
cases). Anything that uses the standard .btn class is already
handled above. */
button.bp, button.bgh, button.bgr, button.bo{ min-height:44px; }
/* ── P3-02 — Long toast strings wrap on phones instead of clipping
off both edges of the viewport. */
@media (max-width: 520px){
.toast{
white-space:normal;
max-width:calc(100vw - 2rem);
left:1rem;
right:1rem;
transform:translateY(100px);
text-align:center;
}
.toast.show{ transform:translateY(0); } /* defensive — kept consistent with the desktop reveal */
}
/* ── P3-03 — Sidebar overlay clearly tappable to close drawer. */
#sideOverlay{ cursor:pointer; }
/* Phase C-fix-2 (2026-05-15) — Google Translate widget positioning.
Anchors the native widget below the mBar (54px content + safe-area
top inset) on the right side, clear of the iPhone status bar /
Dynamic Island. !important needed because the widget element at
index.html:682 carries an inline top:50px;right:16px;z-index:999999
that would otherwise win the cascade. */
#google_translate_element {
position: fixed !important;
top: max(calc(env(safe-area-inset-top) + 54px), 70px) !important;
right: 8px !important;
left: auto !important;
z-index: 9999 !important;
}
/* Phase C-fix-3 (2026-05-15) — Tab landing layout: clear bottom tab
bar + cards start near the top of the visible area. */
@media (max-width: 860px) {
body.teen-tabs #mainWrap,
body.teen-tabs .section-content,
body.teen-tabs #contentArea {
padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
}
/* Tab landings (s-learn / s-life / s-me) — trim section-header bottom
margin (default .sh is 1.5rem / ~25px) and tab-landing padding-top
so the first card sits closer to the section header. The default
header → card gap was pushing the first card below the fold on
small phones. */
#s-learn .sh,
#s-life .sh,
#s-me .sh {
margin-bottom: .6rem;
}
#s-learn .tab-landing,
#s-life .tab-landing,
#s-me .tab-landing {
padding-top: 0;
}
/* ════════════════════════════════════════════════════════════
Phase B-Lite session 2 — Bottom tab bar + tab landing pages
Mobile-only (≤860px), teen accounts only (hidden under
body.parent-view per the Greenlight dual-surface model).
Parents on mobile keep the slide-in sidebar pattern.
════════════════════════════════════════════════════════════ */
#bottomTabBar{
display:none;
position:fixed; left:0; right:0; bottom:0;
z-index:950;
background:var(--s1);
border-top:1px solid rgba(255,255,255,.08);
padding-bottom:env(safe-area-inset-bottom, 0);
box-shadow:0 -4px 24px rgba(0,0,0,.45);
}
#bottomTabBar .tab-btn{
flex:1 1 0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:3px;
padding:8px 4px 6px;
min-height:56px;
background:none; border:none;
color:var(--tx2);
font-family:var(--fm);
cursor:pointer;
transition:color .15s ease;
position:relative;
-webkit-tap-highlight-color:transparent;
}
#bottomTabBar .tab-btn .tab-icon{
font-size:1.35rem; line-height:1;
filter:grayscale(.3); opacity:.75;
transition:filter .15s ease, opacity .15s ease, transform .15s ease;
}
#bottomTabBar .tab-btn .tab-label{
font-size:.66rem;
letter-spacing:.02em;
font-weight:600;
line-height:1;
}
#bottomTabBar .tab-btn:hover .tab-icon,
#bottomTabBar .tab-btn:focus-visible .tab-icon{
filter:none; opacity:1;
}
#bottomTabBar .tab-btn.active{
color:var(--tab-accent, var(--c));
}
#bottomTabBar .tab-btn.active .tab-icon{
filter:none; opacity:1;
transform:translateY(-2px);
}
#bottomTabBar .tab-btn.active::before{
content:'';
position:absolute;
top:0; left:18%; right:18%;
height:3px;
border-radius:0 0 3px 3px;
background:var(--tab-accent, var(--c));
}
@media (max-width:860px){
/* Phase B-Lite session 4: gate flipped from body:not(.parent-view) to
body.teen-tabs. The old inverse gate relied on parent-view being a
"currently in parent UI" signal, but in this codebase parent-view
is set for ANY account whose active profile isn't explicitly a
child — i.e. the default state for most users. That hid the tab
bar by default. body.teen-tabs is now a positive signal added by
applyHeroViewMode and toggled by showSection (off only inside
s-parent), preserving the Greenlight dual-surface intent. */
body.teen-tabs #bottomTabBar{ display:flex; }
body.teen-tabs #app{
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important;
}
/* mBar (mobile top bar) stays visible so the logo persists. Hide
hamburger and the horizontally-scrolling button row — the bottom
tab bar handles all navigation in teen-tabs mode.
Phase C-fix-2: specificity doubled via the body.teen-tabs.teen-tabs
repeat-class trick (valid CSS, raises (0,1,1,0) to (0,2,1,0)). This
defeats a recent commit that re-introduced higher-specificity show
rules on the quick row. */
body.teen-tabs #sidebar,
body.teen-tabs #sideOverlay,
body.teen-tabs #mobileMenuHint,
body.teen-tabs.teen-tabs #mobileQuickRow,
body.teen-tabs.teen-tabs #mBar .hamb,
body.teen-tabs.teen-tabs #mBar button.hamb{
display:none !important;
}
/* Phase C-fix-2/3: the new globe + avatar buttons live in mBar always
but stay hidden until teen-tabs is on. inline-flex preserves the
icon-centering style on the button. */
body.teen-tabs #mBarLangBtn,
body.teen-tabs #mBarAvatarBtn{
display:inline-flex !important;
}
}
@media (min-width:861px){ #bottomTabBar{ display:none !important; } }
/* ── Tab landing card grid ────────────────────────────────── */
.tab-landing{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:14px;
padding:8px 0 24px;
}
@media (max-width:520px){
.tab-landing{ grid-template-columns:1fr; gap:12px; }
}
@media (min-width:861px){
.tab-landing{ grid-template-columns:repeat(3, 1fr); gap:18px; }
}
.tab-landing-card{
position:relative;
background:var(--card-bg, rgba(255,255,255,.04));
border:1px solid var(--card-border, rgba(255,255,255,.08));
border-left:4px solid var(--card-accent, var(--c));
border-radius:16px;
padding:18px 18px 16px;
cursor:pointer;
text-align:left;
font-family:var(--fm);
color:var(--tx);
transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
display:flex; flex-direction:column; gap:4px;
min-height:96px;
-webkit-tap-highlight-color:transparent;
}
.tab-landing-card:hover,
.tab-landing-card:focus-visible{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,0,0,.35);
outline:none;
}
.tab-landing-card .tlc-icon{
font-size:1.7rem; line-height:1;
margin-bottom:4px;
}
.tab-landing-card .tlc-label{
font-family:var(--fh);
font-size:1.25rem;
letter-spacing:.04em;
color:var(--tx);
line-height:1.1;
}
/* ════════════════════════════════════════════════════════════
Phase B-Lite session 3 — Reduced-motion accessibility
Per docs/design-system.md §5: collapse all motion to near-zero
when prefers-reduced-motion is set. Cross-fades stay perceptible
via the .cross-fade opt-in class. Celebration FX (canvas + rAF
confetti in misc.js) is guarded at the JS function level — see
launchBigConfetti / launchSideConfetti.
WCAG 2.3.3 accessibility requirement, not a preference.
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Cross-fade exception — opacity transitions stay at 100ms so they
don't become harsh flashes. Opt-in via the .cross-fade class. */
.cross-fade {
transition-duration: 100ms !important;
}
}
/* ════════════════════════════════════════════════════════════
2026-05-15 — Light-mode pass for Phase B-Lite + C + F surfaces.
The earlier :root.light block (around line 48–600) doesn't touch
the new elements because they use inline rgba(255,255,255,...)
styles set at render time. !important is the only way to override
inline styles cleanly. Targeted at IDs/classes added in:
• Phase B-Lite: bottom tab bar, tab landings, hero opener
• Phase C-Health: mood check-in, sleep / mind / meals tabs
• Phase C-Finance: summary opener, donut card, paycheck sim
• Phase C-Goals: gv-goal-card with milestones
• Phase F: study partner card, goal suggest modal, faith entry
• Phase E: onboarding overlay
Section accent tokens (--section-*) are kept — they read in both
themes. Where inline styles set rgba(255,255,255,X) for bg or
borders, the override flips to rgba(0,0,0,X) or solid white.
════════════════════════════════════════════════════════════ */
:root.light #heroGreeting{
background:linear-gradient(135deg,rgba(56,189,248,.10),rgba(167,139,250,.06)) !important;
border-color:rgba(56,189,248,.25) !important;
}
:root.light #heroGreeting > div:first-child{ color:#0f172a !important; }
:root.light #heroGreeting > div:last-child{ color:#475569 !important; }
:root.light #heroTodaysVerse{
background:#ffffff !important;
border:1px solid #d0d1d6 !important;
border-left:3px solid #92400e !important;
}
:root.light #heroTodaysVerseText{ color:#4a4b52 !important; }
:root.light #heroReflectCard{
background:#ffffff !important;
border-color:#d0d1d6 !important;
}
:root.light #heroReflectBody #heroReflectStatus{ color:#7a7b85 !important; }
:root.light #heroReflectQuestion{
background:#f3f4f6 !important;
color:#4a4b52 !important;
border-left-color:#92400e !important;
}
:root.light #heroReflectResponse{
background:#fff !important;
border-color:rgba(0,0,0,.15) !important;
color:#0f172a !important;
}
:root.light #heroQuickActions button{
background:#fff !important;
border-color:rgba(0,0,0,.10) !important;
box-shadow:0 2px 10px rgba(0,0,0,.05);
color:#0f172a !important;
}
:root.light #heroQuickActions button > div:nth-child(2){ color:#0f172a !important; }
:root.light #heroQuickActions button > div:nth-child(3){ color:#475569 !important; }
:root.light #heroQuickStats{ border-bottom-color:rgba(0,0,0,.08) !important; color:#475569 !important; }
:root.light #heroQuickStats b{ color:#0f172a !important; }
/* Bottom tab bar — light surface, dark icons. --tab-accent stays for active state. */
:root.light #bottomTabBar{
background:#ffffff !important;
border-top-color:rgba(0,0,0,.08) !important;
box-shadow:0 -4px 20px rgba(0,0,0,.08) !important;
}
:root.light #bottomTabBar .tab-btn{ color:#64748b !important; }
:root.light #bottomTabBar .tab-btn .tab-icon{ filter:none !important; }
/* Tab landing cards (s-learn / s-life / s-me) */
:root.light .tab-landing-card{
background:#fff !important;
border-color:rgba(0,0,0,.08) !important;
box-shadow:0 2px 12px rgba(0,0,0,.05);
color:#0f172a !important;
}
:root.light .tab-landing-card .tlc-label{ color:#0f172a !important; }
/* mBar globe + avatar buttons (Phase C mobile-header fix) */
:root.light #mBarLangBtn{
background:rgba(0,0,0,.05) !important;
border-color:rgba(0,0,0,.14) !important;
color:#0f172a !important;
}
:root.light #mBarAvatarBtn{
background:rgba(56,189,248,.14) !important;
border-color:rgba(56,189,248,.4) !important;
color:var(--c) !important;
}
/* Phase C-Health — mood check-in, sleep panel, PHQ-2 cards, meal log */
:root.light #healthMoodCheckin{
background:linear-gradient(135deg,rgba(52,211,153,.10),rgba(34,197,94,.06)) !important;
border-color:rgba(52,211,153,.35) !important;
}
:root.light #healthMoodCheckin > div:first-child{ color:#0f172a !important; }
:root.light #healthMoodCheckin > div:nth-child(2){ color:#4a4b52 !important; }
:root.light #healthMoodCheckin button{ background:#fff !important; border-color:rgba(52,211,153,.35) !important; color:#0f172a !important; }
:root.light #ht-sleep .card,
:root.light #ht-mind .card,
:root.light #ht-meals .card{ background:#fff !important; border-color:rgba(0,0,0,.08) !important; }
:root.light #ht-sleep #sleepList > div,
:root.light #ht-meals .card > div[style*="background:rgba(255,255,255,.04)"]{
background:rgba(0,0,0,.04) !important;
}
:root.light .phq2-opt{ background:#fff !important; border-color:rgba(52,211,153,.35) !important; color:#0f172a !important; }
/* Phase C-Finance — summary opener, donut card, paycheck sim */
:root.light .finance-summary-opener{
background:linear-gradient(135deg,rgba(22,163,74,.10),rgba(34,211,153,.05)) !important;
border-color:rgba(22,163,74,.30) !important;
}
:root.light .finance-summary-opener > div:first-child{ color:var(--section-finance) !important; }
:root.light #finSumBalance, :root.light #finSumMonthSpend{ color:#0f172a !important; }
:root.light #spendingDonut text[fill="var(--tx)"]{ fill:#0f172a !important; }
:root.light #spendingDonut text[fill="var(--tx2)"]{ fill:#475569 !important; }
:root.light #paySimOutput > div{
background:#fff !important;
border-color:rgba(0,0,0,.08) !important;
}
/* Phase C-Goals — goal cards + milestones + motivation + completion stamp */
:root.light .gv-goal-card{ background:#fff !important; }
:root.light .gv-goal-card .gv-goal-text{ color:#0f172a !important; }
:root.light .gv-goal-card svg text{ fill:#0f172a !important; }
:root.light .gv-goal-card > div > div[style*="background:rgba(249,115,22,.04)"],
:root.light .gv-goal-card > div > div[style*="background:rgba(249,115,22,.05)"]{
background:rgba(249,115,22,.08) !important;
}
/* Phase F — AI Study Partner, Goal Suggest modal, Faith entry card */
:root.light #st-aiTutor .card{ background:#fff !important; }
:root.light #apOutput > div{
background:#fff !important;
border-color:rgba(0,0,0,.08) !important;
color:#0f172a !important;
}
:root.light .ap-mode-btn{ background:#fff !important; border-color:rgba(56,189,248,.30) !important; color:#475569 !important; }
:root.light .ap-mode-btn[style*="background:rgba(56,189,248,.18)"]{
background:rgba(56,189,248,.18) !important; color:#0f172a !important;
}
:root.light #goalSuggestModal .md{ background:#fff !important; }
:root.light #gsList > div{
background:#fff !important;
border-color:rgba(249,115,22,.30) !important;
}
:root.light #s-scripture > div[onclick*="openAskBible"]{
background:linear-gradient(135deg,rgba(67,56,202,.14),rgba(20,184,166,.06)) !important;
border-color:rgba(67,56,202,.35) !important;
}
:root.light #s-scripture > div[onclick*="openAskBible"] div[style*="font-family:var(--fh)"]{
color:#0f172a !important;
}
/* Phase E — onboarding overlay flips to light surface */
:root.light #onboardingOverlay{ background:#ffffff !important; }
:root.light #onboardingOverlay h2{ color:#0f172a !important; }
:root.light #onboardingOverlay .onb-sub{ color:#475569 !important; }
:root.light #onboardingOverlay .onb-card{
background:#fff !important;
border-color:rgba(0,0,0,.12) !important;
box-shadow:0 2px 10px rgba(0,0,0,.04);
}
:root.light #onboardingOverlay .onb-card .onb-label{ color:#0f172a !important; }
:root.light #onboardingOverlay .onb-card .onb-cap{ color:#475569 !important; }
:root.light #onboardingOverlay .onb-card.selected{ box-shadow:0 6px 20px rgba(146,64,14,.20); }
:root.light #onboardingOverlay .onb-tile{
background:#fff !important;
border-color:rgba(0,0,0,.12) !important;
}
:root.light #onboardingOverlay .onb-tile .onb-tile-label{ color:#0f172a !important; }
:root.light #onboardingOverlay .onb-toggle-row{
background:#fff !important;
border-color:rgba(0,0,0,.10) !important;
}
:root.light #onboardingOverlay .onb-toggle-row .onb-toggle-label{ color:#0f172a !important; }
:root.light #onboardingOverlay .onb-toggle-row .onb-toggle-cap{ color:#64748b !important; }
:root.light #onboardingOverlay input[type=text]{
background:#fff !important;
border-color:rgba(0,0,0,.18) !important;
color:#0f172a !important;
}
:root.light #onboardingOverlay .onb-yesno{ background:rgba(0,0,0,.06) !important; }
:root.light #onboardingOverlay .onb-yesno button{ color:#475569 !important; }
:root.light #onboardingOverlay .onb-dot{ background:rgba(0,0,0,.18) !important; }
:root.light #onboardingOverlay .onb-dot.done{ background:rgba(146,64,14,.55) !important; }
:root.light #onboardingOverlay .onb-back{
background:rgba(0,0,0,.05) !important;
border-color:rgba(0,0,0,.14) !important;
color:#0f172a !important;
}
/* ════════════════════════════════════════════════════════════
LIGHT-MODE GRAY SYSTEM — all surfaces gray, not white.
Body #e8e9ec · Cards #f2f3f5 · Chrome #dfe0e4 · Inputs white.
Gold text → #8a5200. Generic blue → slate #5a5c6b.
Flashcards always dark (override in flashcard section above).
════════════════════════════════════════════════════════════ */
/* ── Chrome surfaces ─────────────────────────────────────── */
:root.light body{ background:var(--bg); }
:root.light #sidebar{ background:#dfe0e4 !important; border-right-color:#c8c9ce !important; }
:root.light #mBar{
background:#dfe0e4 !important;
border-bottom-color:#c8c9ce !important;
box-shadow:0 1px 3px rgba(0,0,0,.08);
}
:root.light .mBar-title{ color:#1a1b1e !important; }
:root.light .sh{ background:#e4e5e8 !important; border-radius:10px; padding:.75rem 1rem; }
:root.light .sh .st{ color:#1a1b1e !important; }
:root.light #topQuickBtns{ background:#dfe0e4 !important; border-bottom-color:#c8c9ce !important; }
/* ── Cards everywhere ────────────────────────────────────── */
:root.light .card{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10) !important;
}
:root.light .card:hover{ background:#edeef1 !important; }
/* ── Hero opener ─────────────────────────────────────────── */
:root.light #heroGreeting{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10);
}
:root.light #heroGreeting > div:first-child{ color:#1a1b1e !important; }
:root.light #heroGreeting > div:last-child{ color:#4a4b52 !important; }
:root.light #heroTodaysVerse{
background:#f2f3f5 !important;
border:1px solid #d0d1d6 !important;
border-left:3px solid #92400e !important;
box-shadow:0 1px 4px rgba(0,0,0,.10);
}
:root.light #heroTodaysVerseText{ color:#4a4b52 !important; }
:root.light #heroReflectCard{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
}
:root.light #heroReflectBtn{ color:#92400e !important; }
:root.light #heroReflectQuestion{ background:#e4e5e8 !important; color:#4a4b52 !important; border-left-color:#92400e !important; }
:root.light #heroReflectResponse{ background:#ffffff !important; border-color:#c0c1c6 !important; color:#1a1b1e !important; }
:root.light #heroQuickActions button{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10);
color:#1a1b1e !important;
}
:root.light #heroQuickActions button > div:nth-child(2){ color:#1a1b1e !important; }
:root.light #heroQuickActions button > div:nth-child(3){ color:#4a4b52 !important; }
:root.light #heroQuickStats{ border-bottom-color:#d0d1d6 !important; color:#4a4b52 !important; }
:root.light #heroQuickStats b{ color:#1a1b1e !important; }
/* ── Bottom tab bar ──────────────────────────────────────── */
:root.light #bottomTabBar{
background:#dfe0e4 !important;
border-top-color:#c8c9ce !important;
box-shadow:0 -1px 4px rgba(0,0,0,.08) !important;
}
:root.light #bottomTabBar .tab-btn{ color:#4a4b52 !important; }
:root.light #bottomTabBar .tab-btn .tab-icon{ filter:none !important; }
/* ── Tab landings (s-learn / s-life / s-me) ──────────────── */
:root.light .tab-landing-card{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10);
color:#1a1b1e !important;
}
:root.light .tab-landing-card .tlc-label{ color:#1a1b1e !important; }
/* ── Misc surfaces ───────────────────────────────────────── */
:root.light .well-card{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; box-shadow:0 1px 4px rgba(0,0,0,.10) !important; }
:root.light .ja-card{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; }
:root.light .sk-q-opt-btn{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; color:#1a1b1e !important; }
:root.light .gv-tl-card{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; }
:root.light .cv-card{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; }
:root.light .dcard{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; }
/* ── Faith stack — amber readability ─────────────────────── */
:root.light .bf-eyebrow{ color:#92400e !important; opacity:1 !important; }
:root.light .bf-title{ color:#92400e !important; }
:root.light .bf-card{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; box-shadow:0 1px 4px rgba(0,0,0,.10); }
:root.light .scrTabs .tab.active,
:root.light .scrTabs-bottom .tab.active{ color:#92400e !important; }
:root.light #s-scripture .sh .st{ color:#92400e !important; }
:root.light #s-scripture > div[onclick*="openAskBible"]{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10);
}
/* ── Phase C-Health ──────────────────────────────────────── */
:root.light #healthMoodCheckin{
background:linear-gradient(135deg,rgba(52,211,153,.10),rgba(34,197,94,.06)) !important;
border-color:rgba(22,101,52,.25) !important;
}
:root.light #healthMoodCheckin > div:first-child{ color:#1a1b1e !important; }
:root.light #healthMoodCheckin > div:nth-child(2){ color:#4a4b52 !important; }
:root.light #healthMoodCheckin button{ background:#f2f3f5 !important; border-color:rgba(22,101,52,.25) !important; color:#1a1b1e !important; }
:root.light .phq2-opt{ background:#f2f3f5 !important; border-color:rgba(22,101,52,.25) !important; color:#1a1b1e !important; }
/* ── Phase C-Finance ─────────────────────────────────────── */
:root.light .finance-summary-opener{
background:linear-gradient(135deg,rgba(22,163,74,.12),rgba(34,211,153,.05)) !important;
border-color:rgba(20,83,45,.30) !important;
}
:root.light .finance-summary-opener > div:first-child{ color:#14532d !important; }
:root.light #finSumBalance, :root.light #finSumMonthSpend{ color:#1a1b1e !important; }
:root.light #finSumSavPct{ color:#14532d !important; }
:root.light #spendingDonut text[fill="var(--tx)"]{ fill:#1a1b1e !important; }
:root.light #spendingDonut text[fill="var(--tx2)"]{ fill:#4a4b52 !important; }
:root.light #paySimOutput > div{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; box-shadow:0 1px 4px rgba(0,0,0,.10); }
/* ── Phase C-Goals ───────────────────────────────────────── */
:root.light .gv-goal-card{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10);
}
:root.light .gv-goal-card .gv-goal-text{ color:#1a1b1e !important; }
:root.light .gv-goal-card svg text{ fill:#1a1b1e !important; }
/* ── Phase F — AI surfaces ───────────────────────────────── */
:root.light #st-aiTutor .card{ background:#f2f3f5 !important; }
:root.light #apOutput > div{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; color:#1a1b1e !important; box-shadow:0 1px 4px rgba(0,0,0,.10); }
:root.light .ap-mode-btn{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; color:#4a4b52 !important; }
:root.light .ap-mode-btn[style*="background:rgba(56,189,248,.18)"]{
background:rgba(90,92,107,.15) !important; border-color:#5a5c6b !important; color:#1a1b1e !important;
}
:root.light #goalSuggestModal .md{ background:#f2f3f5 !important; box-shadow:0 20px 60px rgba(0,0,0,.18) !important; }
:root.light #gsList > div{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; box-shadow:0 1px 4px rgba(0,0,0,.10); }
/* ── Phase E — onboarding overlay ────────────────────────── */
:root.light #onboardingOverlay{ background:#e8e9ec !important; }
:root.light #onboardingOverlay h2{ color:#1a1b1e !important; }
:root.light #onboardingOverlay .onb-sub{ color:#4a4b52 !important; }
:root.light #onboardingOverlay .onb-step > div[style*="font-family:var(--fh)"]{ color:#1a1b1e !important; }
:root.light #onboardingOverlay .onb-card{
background:#f2f3f5 !important; border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10);
}
:root.light #onboardingOverlay .onb-card .onb-label{ color:#1a1b1e !important; }
:root.light #onboardingOverlay .onb-card .onb-cap{ color:#4a4b52 !important; }
:root.light #onboardingOverlay .onb-card.selected{ box-shadow:0 6px 20px rgba(146,64,14,.18); border-color:#92400e !important; }
:root.light #onboardingOverlay .onb-tile{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; }
:root.light #onboardingOverlay .onb-tile .onb-tile-label{ color:#1a1b1e !important; }
:root.light #onboardingOverlay .onb-toggle-row{ background:#f2f3f5 !important; border-color:#d0d1d6 !important; }
:root.light #onboardingOverlay .onb-toggle-row .onb-toggle-label{ color:#1a1b1e !important; }
:root.light #onboardingOverlay .onb-toggle-row .onb-toggle-cap{ color:#7a7b85 !important; }
:root.light #onboardingOverlay input[type=text]{ background:#ffffff !important; border-color:#c0c1c6 !important; color:#1a1b1e !important; }
:root.light #onboardingOverlay .onb-yesno{ background:rgba(0,0,0,.08) !important; }
:root.light #onboardingOverlay .onb-yesno button{ color:#4a4b52 !important; }
:root.light #onboardingOverlay .onb-yesno button.active{ background:rgba(255,255,255,0.15) !important; color:#fff !important; }
:root.light #onboardingOverlay .onb-dot{ background:rgba(0,0,0,.20) !important; }
:root.light #onboardingOverlay .onb-dot.active{ background:#92400e !important; }
:root.light #onboardingOverlay .onb-dot.done{ background:rgba(146,64,14,.55) !important; }
:root.light #onboardingOverlay .onb-back{ background:rgba(0,0,0,.06) !important; border-color:rgba(0,0,0,.15) !important; color:#1a1b1e !important; }
:root.light #onboardingOverlay .onb-primary{ background:linear-gradient(135deg,#78350f,#ea580c) !important; box-shadow:0 8px 24px rgba(146,64,14,.22) !important; color:#ffffff !important; }
/* ── Modals (.mo / .md) ──────────────────────────────────── */
:root.light .mo{ background:rgba(0,0,0,.55) !important; }
:root.light .md{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 20px 60px rgba(0,0,0,.18) !important;
}
:root.light .mdt{ color:#1a1b1e !important; }
:root.light .md label{ color:#4a4b52 !important; }
/* ── Inputs ──────────────────────────────────────────────── */
:root.light input, :root.light textarea, :root.light select{
background:#ffffff !important;
border-color:#c0c1c6 !important;
color:#1a1b1e !important;
}
:root.light input::placeholder, :root.light textarea::placeholder{ color:#7a7b85 !important; }
/* ── GOLD-TEXT → DARK AMBER #8a5200 ─────────────────────────
Inline gold on gray surfaces would be illegible. All gold/amber
text remapped to dark amber that reads on #f2f3f5 / #e8e9ec. */
:root.light *[style*="color:#92400e"]:not(button):not(a):not([style*="background:#92400e"]):not([style*="background:linear-gradient"]){
color:#92400e !important;
}
:root.light *[style*="color:#f5c842"]:not(button):not(a){ color:#92400e !important; }
:root.light *[style*="color:#fde68a"]:not(button):not(a){ color:#92400e !important; }
:root.light *[style*="color:#fef3c7"]:not(button):not(a){ color:#92400e !important; }
:root.light *[style*="color:var(--g)"]:not(button):not(a){ color:#92400e !important; }
:root.light *[style*="color:var(--gold)"]:not(button):not(a){ color:#92400e !important; }
/* var(--accent) indigo → darker indigo. */
:root.light *[style*="color:var(--accent"]:not(button):not(a){ color:#3730a3 !important; }
/* var(--c) now slate in light mode via token — belt-and-suspenders for inline styles. */
:root.light *[style*="color:var(--c);"]:not(button):not(a):not([style*="background:var(--c)"]){
color:#5a5c6b !important;
}
/* Section accents as text — darken so they read on gray. */
:root.light *[style*="color:var(--section-daily-life)"]:not(button):not(a){ color:#92400e !important; }
:root.light *[style*="color:var(--section-school)"]:not(button):not(a){ color:#075985 !important; }
:root.light *[style*="color:var(--section-health)"]:not(button):not(a){ color:#047857 !important; }
:root.light *[style*="color:var(--section-finance)"]:not(button):not(a){ color:#15803d !important; }
:root.light *[style*="color:var(--section-goals)"]:not(button):not(a){ color:#9a3412 !important; }
:root.light *[style*="color:var(--section-journal)"]:not(button):not(a){ color:#7c3aed !important; }
:root.light *[style*="color:var(--section-sports)"]:not(button):not(a){ color:#991b1b !important; }
/* Generic text remap. */
:root.light *[style*="color:var(--tx);"]:not(button):not(a){ color:#1a1b1e !important; }
:root.light *[style*="color:var(--tx2)"]:not(button):not(a){ color:#4a4b52 !important; }
:root.light *[style*="color:var(--tx3)"]:not(button):not(a){ color:#7a7b85 !important; }
:root.light *[style*="color:#c8d4e8"]:not(button):not(a){ color:#4a4b52 !important; }
:root.light *[style*="color:rgba(255,255,255"]:not(button):not(a){ color:#1a1b1e !important; }
/* Inline rgba(255,255,255,X) backgrounds → gray equivalents. */
:root.light *[style*="background:rgba(255,255,255,.04)"]:not(button):not(.tab){
background:rgba(0,0,0,.05) !important;
}
:root.light *[style*="background:rgba(255,255,255,.06)"]:not(button):not(.tab){
background:rgba(0,0,0,.05) !important;
}
:root.light *[style*="background:rgba(255,255,255,.08)"]:not(button):not(.tab){
background:rgba(0,0,0,.07) !important;
}
:root.light *[style*="background:rgba(255,255,255,.1)"]:not(button):not(.tab){
background:rgba(0,0,0,.07) !important;
}
:root.light *[style*="border:1px solid rgba(255,255,255"]{
border-color:rgba(0,0,0,.12) !important;
}
:root.light *[style*="border-color:rgba(255,255,255"]{
border-color:rgba(0,0,0,.12) !important;
}
/* ── Timeline modal — title / era color in light mode ────── */
:root.light #tlEventModal .tlm-title{
background:none !important;
-webkit-text-fill-color:#1a1b1e !important;
color:#1a1b1e !important;
text-shadow:none !important;
}
:root.light #tlEventModal .tlm-era{ color:#92400e !important; opacity:1 !important; }
:root.light #tlEventModal .md{ background:#f2f3f5 !important; }
:root.light #tlEventModal .tlm-hdr{ border-bottom-color:#d0d1d6 !important; }
:root.light #tlEventModal .tlm-subtitle{ color:#4a4b52 !important; }
:root.light #tlEventModal .tlm-body,
:root.light #tlEventModal .tlm-body p{ color:#4a4b52 !important; }
:root.light #tlEventModal .tlm-callout{
background:rgba(146,64,14,.08) !important;
border-color:rgba(146,64,14,.25) !important;
}
:root.light #tlEventModal .tlm-callout-eye{ color:#92400e !important; }
:root.light #tlEventModal .tlm-callout p{ color:#4a4b52 !important; }
:root.light #tlEventModal .tlm-keyverse{
background:rgba(0,0,0,.04) !important;
border-color:#d0d1d6 !important;
}
:root.light #tlEventModal .tlm-keyverse-text{ color:#1a1b1e !important; }
:root.light #tlEventModal .tlm-keyverse-ref{ color:#92400e !important; }
:root.light #tlEventModal .tlm-ref-chip{
background:#e4e5e8 !important;
border-color:#d0d1d6 !important;
color:#1a1b1e !important;
}
:root.light #tlEventModal .tlm-related-link{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
color:#1a1b1e !important;
}
/* .bf-title gradient clip — must unset -webkit-text-fill-color too */
:root.light .bf-title{
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
-webkit-text-fill-color:#92400e !important;
color:#92400e !important;
}
:root.light .ob-tip{ color:#92400e !important; }
:root.light .hero-greet,
:root.light .hero-name{ color:#1a1b1e !important; }
:root.light #ddmBody,
:root.light #ddmReflect,
:root.light #ddmPrayer{ color:#4a4b52 !important; }
:root.light .bf-gold,
:root.light [class*="gold-text"]{ color:#92400e !important; }
:root.light [style*="color:#92400e"],
:root.light [style*="color: #92400e"],
:root.light [style*="color:#f5c842"],
:root.light [style*="color: #f5c842"],
:root.light [style*="color:var(--gold)"],
:root.light [style*="color: var(--gold)"]{
color:#92400e !important;
}
:root.light [style*="color:rgba(251,191,36"]{ color:#92400e !important; }
:root.light [style*="color:rgba(245,200,66"]{ color:#92400e !important; }
/* ──────────────────────────────────────────────────────────────────────
Light-mode amber-brown CTA / hero overrides
Gold-on-cream gradients read as washed out and cheap in light mode;
these rules swap to a deep amber-brown (#92400e) with white text on
the high-emphasis surfaces the gold gradient previously occupied.
Dark mode untouched.
────────────────────────────────────────────────────────────────────── */
/* Primary gold-gradient CTAs across the app — convert to solid amber */
:root.light #bf-prayer .pr-add-btn,
:root.light .fo-hero-cta,
:root.light #lessonModal .lm-quiz-btn,
:root.light #lessonModal .lm-quiz-actions button,
:root.light #lessonModal .lm-quiz-next button{
background:#92400e !important;
background-image:none !important;
color:#ffffff !important;
box-shadow:0 4px 16px rgba(146,64,14,.28) !important;
filter:none !important;
}
:root.light #bf-prayer .pr-add-btn:hover,
:root.light .fo-hero-cta:hover,
:root.light #lessonModal .lm-quiz-btn:hover{
background:rgba(0,0,0,.08) !important;
box-shadow:none !important;
}
/* Today's verse hero card — gold left-border / glow → amber */
:root.light #heroTodaysVerse{
border-color:#92400e !important;
border-left:4px solid #92400e !important;
box-shadow:0 8px 24px rgba(146,64,14,.08) !important;
}
/* Reflect with AI dashboard surfaces — drop the gold-on-cream reads */
:root.light #heroReflectCard,
:root.light #heroReflect,
:root.light .heroReflect-btn{
color:#92400e !important;
}
/* Prayer Wall left-border accents in light mode — uniform amber so the
per-category color (orange/blue/purple etc) doesn't fight the bg */
:root.light #bf-prayer .pr-wall-card{
border-left-color:#92400e !important;
}
:root.light #bf-prayer .pr-wall-card-cat{
color:#92400e !important;
border-color:rgba(146,64,14,.32) !important;
background:rgba(146,64,14,.08) !important;
}
:root.light #bf-prayer .pr-praying-btn{
color:#ffffff !important;
background:#92400e !important;
border-color:#92400e !important;
}
:root.light #bf-prayer .pr-praying-btn:hover{
background:rgba(0,0,0,.08) !important;
}
/* Active sub-tab pill */
:root.light #bf-prayer .pr-subtab.active{
background:rgba(0,0,0,.08) !important;
background-image:none !important;
color:#1a1b1e !important;
box-shadow:none !important;
}
/* Active filter chips in faith surfaces */
:root.light #bf-academy .ac-chip.active,
:root.light .pr-chip-c.active{
background:rgba(0,0,0,.08) !important;
background-image:none !important;
color:#1a1b1e !important;
}
/* ── Story Player — keep cinematic dark even in light mode ── */
:root.light #storyPlayerModal .md{
background:linear-gradient(180deg,#0a0d1a 0%,#1a1233 100%) !important;
color:#fef3c7 !important;
}
:root.light #storyPlayerModal .sp-narration{
color:rgba(254,243,199,.9) !important;
border-top-color:rgba(146,64,14,.12) !important;
}
:root.light #storyPlayerModal .sp-controls{
background:rgba(10,13,26,.6) !important;
border-top-color:rgba(146,64,14,.12) !important;
}
/* ── Faith Academy cards — light backgrounds ── */
:root.light #bf-academy .ac-card{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
box-shadow:0 1px 4px rgba(0,0,0,.10) !important;
}
:root.light #bf-academy .ac-card-tint{ opacity:0 !important; }
:root.light #bf-academy .ac-card-eye{ color:#92400e !important; opacity:1 !important; }
:root.light #bf-academy .ac-card-title{ color:#1a1b1e !important; text-shadow:none !important; }
:root.light #bf-academy .ac-card-desc{ color:#4a4b52 !important; }
:root.light #bf-academy .ac-card-meta{ color:#7a7b85 !important; }
:root.light #bf-academy .ac-card-badge{
color:#92400e !important;
background:rgba(146,64,14,.10) !important;
border-color:rgba(146,64,14,.30) !important;
}
/* ── Devotional — fix white scripture text and dark background ── */
:root.light #bf-devotional > div[style*="linear-gradient"]{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
}
:root.light #devScripture{ color:#4a4b52 !important; }
:root.light #devTitle{
color:#92400e !important;
-webkit-text-fill-color:#92400e !important;
}
/* ── Faith Academy featured lesson modal light mode ─────────── */
:root.light #lessonModal .md{
background:#f2f3f5 !important;
border-color:#d0d1d6 !important;
}
:root.light #lessonModal .lm-svg::after{
background:linear-gradient(180deg,transparent 0%,rgba(242,243,245,.92) 100%) !important;
}
:root.light #lessonModal .lm-close{
background:rgba(0,0,0,.12) !important;
border-color:rgba(146,64,14,.35) !important;
color:#1a1b1e !important;
}
:root.light #lessonModal .lm-hdr{ border-bottom-color:#d0d1d6 !important; }
:root.light #lessonModal .lm-eye{ color:#92400e !important; opacity:1 !important; }
:root.light #lessonModal .lm-title{
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
-webkit-text-fill-color:#1a1b1e !important;
color:#1a1b1e !important;
text-shadow:none !important;
}
:root.light #lessonModal .lm-sub{ color:#4a4b52 !important; opacity:1 !important; }
:root.light #lessonModal .lm-section h4{ color:#92400e !important; }
:root.light #lessonModal .lm-section p{ color:#1a1b1e !important; }
.lm-section h4{font-weight:600 !important;}
.lm-section p{font-weight:400 !important;}
:root.light #lessonModal .lm-keyverse{
background:rgba(146,64,14,.06) !important;
border-color:rgba(146,64,14,.22) !important;
border-left-color:#92400e !important;
}
:root.light #lessonModal .lm-keyverse-text{ color:#1a1b1e !important; }
:root.light #lessonModal .lm-keyverse-ref{ color:#92400e !important; }
:root.light #lessonModal .lm-callout{
background:rgba(146,64,14,.07) !important;
border-color:rgba(146,64,14,.28) !important;
border-left-color:#92400e !important;
}
:root.light #lessonModal .lm-callout-eye{ color:#92400e !important; }
:root.light #lessonModal .lm-callout p{ color:#1a1b1e !important; }
:root.light #lessonModal .lm-quiz-progress{ color:#92400e !important; opacity:1 !important; }
:root.light #lessonModal .lm-quiz-q{ color:#1a1b1e !important; }
:root.light #lessonModal .lm-quiz-opt{
background:rgba(0,0,0,.05) !important;
border-color:#c0c1c6 !important;
color:#1a1b1e !important;
}
:root.light #lessonModal .lm-quiz-opt:hover:not(:disabled){
background:rgba(0,0,0,.09) !important;
border-color:rgba(146,64,14,.55) !important;
box-shadow:none !important;
}
:root.light #lessonModal .lm-quiz-feedback{
background:rgba(0,0,0,.04) !important;
border-color:#d0d1d6 !important;
color:#1a1b1e !important;
}
:root.light #lessonModal .lm-quiz-result-title{ color:#92400e !important; text-shadow:none !important; }
:root.light #lessonModal .lm-quiz-result-score{ color:#92400e !important; }
:root.light #lessonModal .lm-quiz-star.empty{ color:rgba(146,64,14,.22) !important; }
/* ── FAITH-FREE MOBILE BOTTOM NAV ─────────────────────────── */
/* Only visible for faith-free users on mobile */
#ffBottomNav,
#ffProfileBackdrop,
#ffProfileSheet { display: none; }
html[data-faith-free="1"] #ffBottomNav {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
height: 60px;
background: var(--bg, #0d1424);
border-top: 1px solid rgba(56,189,248,.15);
z-index: 900;
align-items: stretch;
padding-top: 2px;
padding-bottom: max(2px, env(safe-area-inset-bottom, 2px));
}
/* Hide on desktop */
@media (min-width: 768px) {
html[data-faith-free="1"] #ffBottomNav { display: none !important; }
}
/* Push page content above the nav bar on mobile */
@media (max-width: 767px) {
html[data-faith-free="1"] body { padding-bottom: 60px; }
}
.ff-nav-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: opacity .15s;
}
.ff-nav-btn:active { opacity: .6; }
.ff-nav-btn.active .ff-nav-icon,
.ff-nav-btn.active .ff-nav-label { color: #38bdf8; }
.ff-nav-icon { font-size: 1.3rem; line-height: 1; }
.ff-nav-label {
font-size: .6rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: #64748b;
}
html[data-faith-free="1"] .ff-nav-icon { font-size: 1.1rem !important; line-height: 1 !important; }
html[data-faith-free="1"] .ff-nav-label { font-size: 9px !important; line-height: 1 !important; margin-top: 1px !important; }
/* Profile bottom sheet */
#ffProfileBackdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
z-index: 1100;
backdrop-filter: blur(3px);
}
#ffProfileSheet {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--bg2, #0d1424);
border-radius: 20px 20px 0 0;
border-top: 1px solid rgba(56,189,248,.2);
z-index: 1101;
padding-bottom: env(safe-area-inset-bottom);
transform: translateY(100%);
transition: transform .3s cubic-bezier(.32,.72,0,1);
}
#ffProfileSheet.open,
#ffProfileBackdrop.open { display: block; }
#ffProfileSheet.open { transform: translateY(0); }
.ff-sheet-handle {
width: 36px; height: 4px;
background: rgba(255,255,255,.15);
border-radius: 2px;
margin: 10px auto 0;
}
.ff-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .85rem 1.25rem .5rem;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.ff-sheet-title {
font-size: .9rem;
font-weight: 700;
color: #f1f5f9;
letter-spacing: -.01em;
}
.ff-sheet-close {
background: rgba(255,255,255,.08);
border: none;
color: #94a3b8;
font-size: .85rem;
width: 28px; height: 28px;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.ff-theme-btn {
background: rgba(255,255,255,.08);
border: none;
width: 28px; height: 28px;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: .85rem;
}
.ff-sheet-user {
padding: .75rem 1.25rem;
font-size: .78rem;
color: #94a3b8;
font-family: var(--fm, monospace);
letter-spacing: .03em;
}
.ff-sheet-divider {
height: 1px;
background: rgba(255,255,255,.06);
margin: .25rem 0;
}
.ff-sheet-row {
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
padding: .85rem 1.25rem;
background: none;
border: none;
color: #cbd5e1;
font-size: .88rem;
text-align: left;
cursor: pointer;
transition: background .1s;
}
.ff-sheet-row:active { background: rgba(255,255,255,.05); }
.ff-row-icon { font-size: 1rem; width: 1.4rem; text-align: center; }
.ff-row-arrow { margin-left: auto; color: #475569; font-size: 1rem; }
.ff-sheet-version {
padding: .75rem 1.25rem 1rem;
font-size: .68rem;
color: #475569;
font-family: var(--fm, monospace);
letter-spacing: .06em;
text-align: center;
}
/* ── Standard modal close button ───────────────────────────── */
.modal-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 10;
background: rgba(255,255,255,.1);
border: none;
color: #f1f5f9;
font-size: 1.1rem;
width: 34px; height: 34px;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
.modal-close-btn:active { opacity: .6; }
.ff-account-block {
padding: .85rem 1.25rem .75rem;
}
.ff-account-label {
font-size: .62rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #475569;
margin-bottom: .25rem;
font-family: var(--fm, monospace);
}
.ff-account-email {
font-size: .82rem;
color: #38bdf8;
font-family: var(--fm, monospace);
margin-bottom: .75rem;
word-break: break-all;
}
.ff-account-actions {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.ff-account-btn {
flex: 1;
padding: .5rem .75rem;
border-radius: 8px;
font-size: .75rem;
font-weight: 700;
cursor: pointer;
border: 1px solid;
white-space: nowrap;
}
.ff-btn-upgrade {
background: rgba(56,189,248,.1);
border-color: rgba(56,189,248,.3);
color: #38bdf8;
}
.ff-btn-close-account {
background: rgba(248,113,113,.08);
border-color: rgba(248,113,113,.25);
color: #f87171;
}
/* Cookie modal — slides in over the sheet body */
#ffCookieModal {
position: absolute;
inset: 0;
background: var(--bg2, #0d1424);
border-radius: 20px 20px 0 0;
z-index: 10;
overflow-y: auto;
}
.ff-cookie-header {
display: flex;
align-items: center;
gap: .75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.ff-cookie-back {
background: none;
border: none;
color: #38bdf8;
font-size: .82rem;
cursor: pointer;
padding: 0;
}
.ff-cookie-title {
font-size: .88rem;
font-weight: 700;
color: #f1f5f9;
}
.ff-cookie-body { padding: 1rem 1.25rem; }
.ff-cookie-desc {
font-size: .78rem;
color: #94a3b8;
line-height: 1.6;
margin-bottom: 1rem;
}
.ff-cookie-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .75rem 0;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.ff-cookie-name {
font-size: .82rem;
font-weight: 600;
color: #e2e8f0;
margin-bottom: .2rem;
}
.ff-cookie-sub {
font-size: .7rem;
color: #64748b;
line-height: 1.4;
}
.ff-cookie-badge {
font-size: .62rem;
font-weight: 700;
color: #34d399;
border: 1px solid rgba(52,211,153,.3);
border-radius: 20px;
padding: .2rem .55rem;
white-space: nowrap;
}
/* Toggle switch */
.ff-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.ff-toggle input { opacity: 0; width: 0; height: 0; }
.ff-toggle-track {
position: absolute; inset: 0;
background: #1e293b;
border: 1px solid rgba(255,255,255,.12);
border-radius: 24px;
cursor: pointer;
transition: background .2s;
}
.ff-toggle-track::before {
content: '';
position: absolute;
width: 18px; height: 18px;
left: 2px; top: 2px;
background: #64748b;
border-radius: 50%;
transition: transform .2s, background .2s;
}
.ff-toggle input:checked + .ff-toggle-track { background: rgba(56,189,248,.25); border-color: #38bdf8; }
.ff-toggle input:checked + .ff-toggle-track::before { transform: translateX(18px); background: #38bdf8; }
.btn-clear-cache {
background: rgba(248,113,113,.08);
border: 1px solid rgba(248,113,113,.25);
color: #f87171;
font-size: .72rem;
font-weight: 700;
padding: .4rem .9rem;
border-radius: 7px;
cursor: pointer;
white-space: nowrap;
font-family: var(--fm, monospace);
transition: background .15s;
}
.btn-clear-cache:hover { background: rgba(248,113,113,.15); }
.btn-clear-cache:disabled { opacity: .5; cursor: not-allowed; }
.ff-signout-row { color: #f87171; }
.ff-signout-row .ff-row-arrow { color: #f87171; }
/* ── Faith-free mobile fixes ─────────────────────────────── */
/* Fix 1: hide profile icon — s-me is not in FAITH_FREE_ALLOWED */
html[data-faith-free="1"] #mBarAvatarBtn { display: none !important; }
/* Fix 2 reverted — the flex/overflow approach caused .dashGrid to appear
below the cinematic hero within #s-hero instead of staying hidden. */
/* ── Faith-free Search overlay ─────────────────────────────── */
#ffSearchOverlay {
position: fixed;
bottom: 80px;
left: 0;
right: 0;
z-index: 1100;
display: none;
flex-direction: column;
max-height: calc(100svh - 80px);
box-shadow: 0 -4px 24px rgba(0,0,0,.55);
}
#ffSearchOverlay.open { display: flex; }
/* Input bar anchored at bottom; results body above (order trick) */
.ff-search-header {
display: flex;
align-items: center;
gap: .5rem;
padding: .65rem .9rem;
border-top: 1px solid rgba(255,255,255,.12);
background: rgba(11,18,40,.97);
backdrop-filter: blur(10px);
flex-shrink: 0;
order: 2;
}
.ff-search-back {
background: none;
border: none;
color: #94a3b8;
font-size: 1.25rem;
line-height: 1;
padding: .25rem .4rem;
cursor: pointer;
flex-shrink: 0;
}
.ff-search-back:hover { color: #fff; }
.ff-search-input {
flex: 1;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
color: #e2e8f0;
font-size: .95rem;
padding: .5rem .75rem;
outline: none;
font-family: var(--fs, sans-serif);
}
.ff-search-input::placeholder { color: #64748b; }
.ff-search-input:focus { border-color: rgba(56,189,248,.4); background: rgba(255,255,255,.09); }
.ff-search-clear {
background: none;
border: none;
color: #64748b;
font-size: 1rem;
padding: .25rem .4rem;
cursor: pointer;
flex-shrink: 0;
}
.ff-search-clear:hover { color: #e2e8f0; }
.ff-search-body {
order: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: .5rem 0;
background: var(--bg, #070b14);
}
.ff-search-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 3rem 2rem;
text-align: center;
}
.ff-search-empty-icon { font-size: 2.5rem; opacity: .4; }
.ff-search-empty-text { color: #64748b; font-size: .88rem; line-height: 1.5; }
.ff-search-no-results {
text-align: center;
color: #64748b;
font-size: .88rem;
padding: 2.5rem 1.5rem;
}
.ff-search-group {
padding: .25rem 0;
}
.ff-search-group-label {
font-size: .65rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: #475569;
padding: .6rem .95rem .3rem;
}
.ff-search-item {
display: flex;
align-items: center;
gap: .7rem;
padding: .65rem .95rem;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.04);
transition: background .12s;
}
.ff-search-item:hover { background: rgba(255,255,255,.05); }
.ff-search-item:last-child { border-bottom: none; }
.ff-search-icon {
font-size: 1.25rem;
flex-shrink: 0;
width: 2rem;
text-align: center;
}
.ff-search-text { flex: 1; min-width: 0; }
.ff-search-title {
font-size: .88rem;
font-weight: 600;
color: #e2e8f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ff-search-sub {
font-size: .72rem;
color: #64748b;
margin-top: .1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ff-search-arrow {
color: #475569;
font-size: .9rem;
flex-shrink: 0;
}
/* ── FLASH PREVENTION ──────────────────────────────────────── */
/* data-app-loading="1" set unconditionally in before first paint;
removed in finishInit() after routing settles. */
html[data-app-loading="1"] #mainWrap { visibility: hidden; }
/* data-faith-free="1" set in for faith_free users; mainWrap
stays hidden until renderFaithOnlyHero() reveals it. */
html[data-faith-free="1"] #mainWrap { visibility: hidden; }
html[data-faith-free="1"] #faithHeroCinematic { visibility: visible; }
html[data-faith-free="1"] #bottomTabBar { display: none !important; }
/* Remove bottom padding so fo-hero fills the viewport without extra scroll */
html[data-faith-free="1"] #app { padding-bottom: 0 !important; }
/* ── Fix 2: Hide Well bottom tab bar for faith-free users ────────── */
html[data-faith-free="1"] #s-scripture .scrTabs-bottom { display: none !important; }
/* ── Fix 1: Sidebar collapse toggle ─────────────────────────────── */
.sid-collapse-btn{
position:absolute;top:.85rem;right:.45rem;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
border-radius:6px;color:var(--tx3);font-size:.75rem;font-weight:700;
width:22px;height:22px;cursor:pointer;display:flex;
align-items:center;justify-content:center;
transition:background .15s,color .15s;z-index:1;line-height:1;padding:0;
}
.sid-collapse-btn:hover{background:rgba(255,255,255,.15);color:var(--tx);}
#sideExpandTab{
display:none;position:fixed;left:0;top:50%;
transform:translateY(-50%);z-index:901;
background:var(--s1);border:1px solid rgba(255,255,255,.1);
border-left:none;border-radius:0 8px 8px 0;
padding:.6rem .3rem;color:var(--tx3);cursor:pointer;
font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
writing-mode:vertical-lr;line-height:1;
transition:background .15s,color .15s;
}
#sideExpandTab:hover{background:var(--bg2);color:var(--tx);}
@media(min-width:861px){
body.sidebar-collapsed #sidebar{transform:translateX(-220px) !important;}
body.sidebar-collapsed #mainWrap{margin-left:0 !important;width:100vw !important;}
body.sidebar-collapsed #sideExpandTab{display:flex;align-items:center;}
}
/* ── Fix 3: Lock Well hero home screen — no scroll ───────────────── */
body.ff-hero-active{overflow:hidden;}
body.ff-hero-active #mainWrap{padding-top:0;overflow:hidden;}
body.ff-hero-active #app{padding:0 !important;overflow:hidden;}
body.ff-hero-active #faithHeroCinematic .fo-hero{
/* dvh first; JS sets exact window.innerHeight for Android Chrome fallback */
height:100dvh;min-height:-webkit-fill-available;
min-height:100dvh !important;max-height:100dvh !important;
border-radius:0 !important;margin:0 !important;
}
@media(max-width:860px){
body.ff-hero-active #mainWrap{padding-top:44px;}
body.ff-hero-active #faithHeroCinematic .fo-hero{
min-height:calc(100dvh - 44px) !important;
max-height:calc(100dvh - 44px) !important;
}
}
/* ── Fix 4: Button always visible — safe-area and z-index ────────── */
body.ff-hero-active #faithHeroCinematic{
margin-top:0;padding-top:0;
}
body.ff-hero-active #faithHeroCinematic .fo-hero{
margin-top:0 !important;padding-top:0 !important;
}
body.ff-hero-active #faithHeroCinematic .fo-hero-content{
position:relative;z-index:10;
padding-top:0 !important;margin-top:0 !important;
padding-bottom:env(safe-area-inset-bottom,20px);
}
html[data-faith-free="1"] #mBar{
margin-bottom:0;
}
body.ff-hero-active #faithHeroCinematic .fo-cta-zone{
bottom:max(9%,env(safe-area-inset-bottom,16px));
}
body.ff-hero-active #faithHeroCinematic .fo-hero-cta{
position:relative;z-index:10;
margin-bottom:max(20px,env(safe-area-inset-bottom));
}
/* ── Fix 5: Tighten bottom nav for faith-free so hero CTA isn't obscured ── */
html[data-faith-free="1"] #bottomTabBar{
padding-top:4px;
padding-bottom:max(4px,env(safe-area-inset-bottom,4px));
}
html[data-faith-free="1"] #bottomTabBar .tab-btn{
padding:6px 4px 4px;
min-height:48px;
}
html[data-faith-free="1"] #bottomTabBar .tab-btn .tab-icon{
font-size:1.1rem;
}
body.ff-hero-active #faithHeroCinematic .fo-cta-zone,
body.ff-hero-active #faithHeroCinematic .fo-hero-cta{
margin-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
}
/* ── Fix 6: Eliminate top gap — zero mainWrap offset on mobile for faith-free ── */
/* The @media(max-width:860px) block restores padding-top:44px on #mainWrap which
creates the gap between the top bar and hero. Zero it for faith-free and restore
the hero to full 100dvh. Add matching padding-top to fo-hero-content so the
greeting text starts below the mBar rather than behind it. */
html[data-faith-free="1"] body.ff-hero-active #mainWrap{
padding-top:0 !important;
}
html[data-faith-free="1"] body.ff-hero-active #faithHeroCinematic .fo-hero{
min-height:100dvh !important;
max-height:100dvh !important;
}
html[data-faith-free="1"] body.ff-hero-active #faithHeroCinematic .fo-hero-content{
padding-top:calc(54px + max(env(safe-area-inset-top),8px)) !important;
}