/* WODDI App v121 — the mobile-app concept skin (warm cream, magenta, soft cards).
   Scoped to body.woddi-app: app.html only. index.html keeps the premium dark. */
body.woddi-app {
  --app-bg:#FAF3EC; --app-card:#FFFFFF; --app-ink:#2A2320; --app-ink2:#6B5F58;
  --app-mag:#C4006A; --app-mag-deep:#8E004C; --app-lime:#7CB518; --app-border:#EFE4DA;
  background:var(--app-bg) !important; color:var(--app-ink);
  font-family:'Manrope','Plus Jakarta Sans',system-ui,sans-serif;
}
html.dark body.woddi-app { background:var(--app-bg) !important; color:var(--app-ink); }
body.woddi-app .card, body.woddi-app .learn-hero, body.woddi-app .xp-card,
body.woddi-app .wa-tile, body.woddi-app .wp-tile {
  background:var(--app-card) !important; border:1px solid var(--app-border) !important;
  border-radius:20px !important; box-shadow:0 6px 24px rgba(90,50,30,.07) !important; color:var(--app-ink);
}
body.woddi-app .primary-btn {
  background:var(--app-mag) !important; color:#fff !important; border:none !important;
  border-radius:14px !important; font-weight:800 !important; box-shadow:0 6px 18px rgba(196,0,106,.28) !important;
}
body.woddi-app .secondary-btn, body.woddi-app .ghost {
  border:1.5px solid var(--app-mag) !important; color:var(--app-mag) !important;
  background:transparent !important; border-radius:14px !important;
}
/* Today's Focus — the concept's magenta gradient hero */
body.woddi-app .wp-continue, body.woddi-app .learn-hero {
  background:linear-gradient(135deg,#C4006A 0%,#8E004C 100%) !important;
  border:none !important; color:#fff !important;
}
body.woddi-app .wp-continue .kicker { color:#FFD9EC; }
body.woddi-app .wp-continue h3, body.woddi-app .learn-hero h3, body.woddi-app .learn-hero h2 { color:#fff !important; }
body.woddi-app .wp-continue .sub { color:#F3C4DD; }
body.woddi-app .wp-continue .primary-btn { background:#fff !important; color:var(--app-mag) !important; box-shadow:none !important; }
body.woddi-app .wp-ring > span { background:#A50059; color:#fff; }
/* week strip */
body.woddi-app .wp-day { background:#fff; border-color:var(--app-border); color:var(--app-ink2); }
body.woddi-app .wp-day.done { background:rgba(124,181,24,.16); color:#4C7205; }
body.woddi-app .wp-day.today { background:var(--app-mag); color:#fff; box-shadow:0 4px 14px rgba(196,0,106,.35); }
/* quick access */
body.woddi-app .wp-tile i { color:var(--app-mag); }
body.woddi-app .wp-tile span { color:var(--app-ink2); }
/* header + bottom nav to the concept */
body.woddi-app .app-header, body.woddi-app header.topbar { background:var(--app-bg) !important; border-bottom:none !important; }
body.woddi-app .bottom-nav {
  background:#FFFFFF !important; border-top:1px solid var(--app-border) !important;
  box-shadow:0 -6px 24px rgba(90,50,30,.08) !important;
}
body.woddi-app .bottom-nav .nav-item { color:#9A8C83 !important; }
body.woddi-app .bottom-nav .nav-item.active { color:var(--app-mag) !important; }
/* community pills + xp tabs on cream */
body.woddi-app .comm-tab, body.woddi-app .xp-tab { background:#fff; border-color:var(--app-border); color:var(--app-ink2); }
body.woddi-app .comm-tab.active, body.woddi-app .xp-tab.active { background:var(--app-mag); border-color:var(--app-mag); color:#fff; }
/* ── splash ── */
#app-splash {
  position:fixed; inset:0; z-index:99999; background:#FAF3EC;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem; transition:opacity .4s ease;
}
#app-splash.gone { opacity:0; pointer-events:none; }
#app-splash .as-logo { width:96px; height:96px; border-radius:24px; margin-bottom:1.4rem; }
#app-splash h1 { font-size:1.55rem; font-weight:900; color:#2A2320; margin:0 0 .6rem; line-height:1.25; }
#app-splash p { font-size:.8125rem; color:#8E004C; font-weight:700; letter-spacing:.02em; margin:0 0 2rem; }
#app-splash .as-ring {
  width:44px; height:44px; border-radius:50%;
  border:4px solid rgba(196,0,106,.15); border-top-color:#C4006A;
  animation:as-spin .9s linear infinite;
}
@keyframes as-spin { to { transform:rotate(360deg); } }
/* account deletion (Play compliance) — styled on both skins */
.wdel-entry { display:flex; align-items:center; gap:.6rem; width:100%; margin:.4rem 0;
  padding:.8rem 1rem; border:1.5px solid #D64545; color:#D64545; background:transparent;
  border-radius:14px; font-weight:800; font-size:.9063rem; cursor:pointer; }
.wdel-privacy { display:block; text-align:center; margin:.4rem 0 .6rem; font-size:.8125rem;
  color:#8E004C; text-decoration:underline; }
.wdel-modal { position:fixed; inset:0; z-index:99998; background:rgba(20,10,16,.55);
  display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.wdel-box { background:#fff; color:#2A2320; border-radius:20px; padding:1.4rem 1.3rem; max-width:420px; width:100%; }
.wdel-box h3 { margin:0 0 .5rem; }
.wdel-box p { font-size:.875rem; margin:.4rem 0; color:#5A4F49; }
.wdel-input { width:100%; padding:.7rem .8rem; border:1.5px solid #D9CCC2; border-radius:12px;
  font-weight:800; letter-spacing:.1em; font-size:1rem; margin:.3rem 0 .8rem; }
.wdel-actions { display:flex; gap:.6rem; }
.wdel-cancel { flex:1; padding:.75rem; border:1.5px solid #C9BDB4; background:#fff; border-radius:12px; font-weight:700; cursor:pointer; }
.wdel-go { flex:1; padding:.75rem; border:none; background:#D64545; color:#fff; border-radius:12px; font-weight:800; cursor:pointer; }
.wdel-go:disabled { opacity:.45; }
.wdel-status { margin-top:.7rem; font-size:.8125rem; color:#8E004C; min-height:1.2em; }
/* v122 — the app's welcome screen (concept image) */
#wapp-welcome { position:fixed; inset:0; z-index:9000; background:#FAF3EC; overflow-y:auto;
  padding:max(2.2rem,env(safe-area-inset-top)) 1.4rem 2rem; display:flex; flex-direction:column; }
.ww-head { display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; }
.ww-head img { width:44px; height:44px; border-radius:12px; }
.ww-head b { display:block; font-size:1.05rem; font-weight:900; color:#8E004C; letter-spacing:.02em; }
.ww-head span { font-size:.72rem; color:#8E004C; font-weight:700; }
#wapp-welcome h1 { font-size:2.1rem; line-height:1.12; font-weight:900; color:#2A2320; margin:0 0 .7rem; letter-spacing:-.01em; }
.ww-sub { font-size:.9375rem; color:#6B5F58; margin:0 0 1.4rem; line-height:1.55; max-width:420px; }
.ww-primary, .ww-outline, .ww-plain { display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:460px; min-height:54px; padding:0 1.2rem; margin-bottom:.7rem;
  border-radius:14px; font-size:1rem; font-weight:800; cursor:pointer; }
.ww-primary { background:#C4006A; color:#fff; border:none; box-shadow:0 6px 18px rgba(196,0,106,.3); }
.ww-outline { background:#fff; color:#C4006A; border:1.5px solid #C4006A; }
.ww-plain { background:#F1EAE2; color:#2A2320; border:none; }
.ww-choose { font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#6B5F58; margin:1rem 0 .6rem; }
.ww-nets { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; max-width:460px; }
.ww-net { background:#fff; border:1.5px solid #EFE4DA; border-radius:18px; padding:1rem .9rem; cursor:pointer; }
.ww-net b { display:block; font-size:1rem; font-weight:900; margin:.5rem 0 .15rem; }
.ww-net[data-net="gmn"] b { color:#C4006A; }
.ww-net[data-net="nnn"] b { color:#5F8E10; }
.ww-net span { font-size:.75rem; color:#6B5F58; line-height:1.4; display:block; min-height:2.2em; }
.ww-net em { display:inline-flex; align-items:center; gap:.35rem; font-style:normal; font-size:.72rem;
  font-weight:800; color:#B9AFA7; margin-top:.5rem; }
.ww-net em::before { content:''; width:8px; height:8px; border-radius:50%; background:#D8CFC7; }
.ww-net.selected { border-color:#C4006A; box-shadow:0 6px 20px rgba(196,0,106,.14); }
.ww-net.selected[data-net="nnn"] { border-color:#7CB518; box-shadow:0 6px 20px rgba(124,181,24,.16); }
.ww-net.selected em { color:#C4006A; }
.ww-net.selected[data-net="nnn"] em { color:#5F8E10; }
.ww-net.selected em::before { background:currentColor; }
.ww-net-ic { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.ww-net-ic.gmn { background:rgba(196,0,106,.12); color:#C4006A; }
.ww-net-ic.nnn { background:rgba(124,181,24,.16); color:#5F8E10; }
.ww-foot { margin-top:auto; padding-top:1.4rem; text-align:center; font-size:.78rem; color:#8A7C73; }
.ww-foot i { color:#C4006A; }
/* v123 — welcome sits above floating utility buttons (Aa overlapped the GMN card) */
#wapp-welcome { z-index:99997; }
/* keep floating buttons clear of the bottom nav inside the app */
body.woddi-app .woddi-a11y-btn, body.woddi-app .woddi-top-btn {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}
/* app home breathing room */
body.woddi-app .wp-home { padding-top:.4rem; }
/* ── v124 interiors ── */
/* Learn: illustrated course cards */
body.woddi-app .course-card-modern { overflow:hidden; }
body.woddi-app .wart-head { height:120px; background-size:cover; background-position:center;
  border-radius:14px 14px 0 0; margin:-1px -1px 10px; background-color:#F6EDE3; }
body.woddi-app .course-card-modern .primary-btn, body.woddi-app .course-card-modern button {
  border-radius:12px !important; }
/* Mentor: cream conversation to the concept */
body.woddi-app .m3-msg { max-width:82%; }
body.woddi-app .m3-mentor { background:#fff !important; color:#2A2320 !important;
  border:1px solid #EFE4DA !important; border-radius:18px 18px 18px 6px !important;
  box-shadow:0 4px 14px rgba(90,50,30,.06) !important; }
body.woddi-app .m3-user { background:#FBD8E9 !important; color:#5A1030 !important;
  border-radius:18px 18px 6px 18px !important; border:none !important; }
body.woddi-app .m3-avatar { width:34px !important; height:34px !important; border-radius:50% !important;
  background:#FDF3E7 !important; overflow:hidden; }
body.woddi-app .m3-avatar img { width:100%; height:100%; object-fit:cover; }
body.woddi-app .m3-chip { background:#fff !important; border:1.5px solid #EFE4DA !important;
  border-radius:99px !important; color:#5A4F49 !important; font-weight:700 !important; }
body.woddi-app .m3-chip:active { border-color:#C4006A !important; color:#C4006A !important; }
/* Profile: concept feel — centered identity, tile stats */
body.woddi-app .profile-avatar { box-shadow:0 8px 24px rgba(196,0,106,.22) !important; }
body.woddi-app #student-main .profile-header, body.woddi-app #student-main .profile-top { text-align:center; }
/* ── v128 audit fixes ── */
/* bottom-nav selector fix: the real nav uses .bottom-nav-item (audit finding, mine) */
body.woddi-app .bottom-nav-item { color:#9A8C83 !important; }
body.woddi-app .bottom-nav-item.active { color:#C4006A !important; }
body.woddi-app .bottom-nav-item span, body.woddi-app .bottom-nav-item small { font-size:12px !important; }
/* minimum touch targets + legible labels (audit P2) */
body.woddi-app button i:only-child { min-width:20px; }
body.woddi-app .icon-btn, body.woddi-app .woddi-top-btn, body.woddi-app .woddi-a11y-btn {
  min-width:44px !important; min-height:44px !important; }
/* ── v130: complete dark mode for the app shell ──
   When the member toggles dark (html.dark), the whole cream skin flips
   coherently instead of partially. Token remap + hardcoded-spot overrides. */
html.dark body.woddi-app {
  --app-bg:#131016; --app-card:#1E1822; --app-ink:#F2EAE4; --app-ink2:#BCADA4;
  --app-border:#342A38; --app-mag:#E4407F; --app-mag-deep:#C4006A;
}
html.dark body.woddi-app .card, html.dark body.woddi-app .learn-hero,
html.dark body.woddi-app .xp-card, html.dark body.woddi-app .wa-tile,
html.dark body.woddi-app .wp-tile { box-shadow:0 6px 24px rgba(0,0,0,.45) !important; }
html.dark body.woddi-app .wp-day { background:#241C28; border-color:var(--app-border); color:var(--app-ink2); }
html.dark body.woddi-app .wp-day.done { background:rgba(124,181,24,.22); color:#A5D65A; }
html.dark body.woddi-app .bottom-nav { background:#191420 !important; border-top-color:var(--app-border) !important; }
html.dark body.woddi-app .bottom-nav-item, html.dark body.woddi-app .bottom-nav .nav-item { color:#8E7F86 !important; }
html.dark body.woddi-app .bottom-nav-item.active, html.dark body.woddi-app .bottom-nav .nav-item.active { color:#F06AA7 !important; }
/* welcome screen */
html.dark body.woddi-app #wapp-welcome { background:var(--app-bg); }
html.dark body.woddi-app #wapp-welcome h1 { color:var(--app-ink); }
html.dark body.woddi-app .ww-sub, html.dark body.woddi-app .ww-choose { color:var(--app-ink2); }
html.dark body.woddi-app .ww-outline { background:transparent; }
html.dark body.woddi-app .ww-plain { background:#241C28; color:var(--app-ink); }
html.dark body.woddi-app .ww-net { background:var(--app-card); border-color:var(--app-border); }
html.dark body.woddi-app .ww-net span { color:var(--app-ink2); }
html.dark body.woddi-app .ww-foot { color:#9A8A91; }
/* mentor chat */
html.dark body.woddi-app .m3-mentor { background:var(--app-card) !important; color:var(--app-ink) !important; border-color:var(--app-border) !important; }
html.dark body.woddi-app .m3-user { background:#4A1030 !important; color:#FBD8E9 !important; }
html.dark body.woddi-app .m3-chip { background:var(--app-card) !important; border-color:var(--app-border) !important; color:var(--app-ink2) !important; }
html.dark body.woddi-app .m3-avatar { background:#241C28 !important; }
/* learn card art strip + deletion modal */
html.dark body.woddi-app .wart-head { background-color:#241C28; }
html.dark body.woddi-app .wdel-box { background:var(--app-card); color:var(--app-ink); }
html.dark body.woddi-app .wdel-box p { color:var(--app-ink2); }
html.dark body.woddi-app .wdel-input { background:#241C28; border-color:var(--app-border); color:var(--app-ink); }
html.dark body.woddi-app .wdel-cancel { background:var(--app-card); border-color:var(--app-border); color:var(--app-ink); }
/* ── v136: real course thumbnails (web + app) ── */
.course-card-modern { overflow:hidden; }
.wthumb-head { height:132px; background-size:cover; background-position:center;
  border-radius:14px 14px 0 0; margin:-1px -1px 12px; background-color:#F6EDE3; }
html.dark .wthumb-head { background-color:#241C28; }
/* ── v137: course-page hero banner ── */
.wthumb-hero { max-width:920px; height:212px; margin:14px auto 4px; border-radius:20px;
  background-size:cover; background-position:center; background-color:#F6EDE3;
  box-shadow:0 10px 30px rgba(90,50,30,.12); }
@media (max-width:640px){ .wthumb-hero { height:150px; margin:10px 12px 2px; border-radius:16px; } }
html.dark .wthumb-hero { background-color:#241C28; box-shadow:0 10px 30px rgba(0,0,0,.4); }