/* ============================================================
   Ænglicium v3.1.1 — Night Mode = Minimal Clay (v3.1.0)
                       Day Mode  = Purple Glass (v3.0.15)
   ============================================================
   Esta camada repinta APENAS o modo noturno (body.night) com
   o visual minimal clay que foi introduzido na v3.1.0.

   Quando o usuário desativa o modo noturno, NADA aqui é
   aplicado — o app volta ao visual purple-glass original da
   v3.0.15 (style.css + glass.css).

   Default do app = noturno (ver main.js: getNightMode()).
   ============================================================ */

/* Tokens dark (aplicados só em night) */
body.night{
  /* Brand magenta */
  --mg:   #e0177e;
  --mg2:  #c41370;
  --mg-soft:rgba(224,23,126,.16);
  --mg-glow:0 10px 24px rgba(224,23,126,.34),0 1px 0 rgba(255,255,255,.22) inset;

  --bg-1:#0a0a0a;
  --bg-2:#0d0d0e;
  --card-1:#171719;
  --card-2:#1d1d20;
  --card-3:#26262a;
  --stroke-1:rgba(255,255,255,.07);
  --stroke-2:rgba(255,255,255,.14);
  --stroke-3:rgba(255,255,255,.22);
  --tx-1:#ffffff;
  --tx-2:rgba(255,255,255,.66);
  --tx-3:rgba(255,255,255,.42);
  --tx-4:rgba(255,255,255,.26);
  --shadow-card:0 1px 2px rgba(0,0,0,.40), 0 14px 36px rgba(0,0,0,.50);
  --shadow-soft:0 10px 28px rgba(0,0,0,.55);
  --shadow-nav:0 -10px 30px rgba(0,0,0,.55);
  --glass-bg:rgba(18,18,20,.72);
  --glass-stroke:rgba(255,255,255,.08);

  --ok:#1ea65d;
  --er:#e0173a;
}

/* ============ BACKGROUND ============ */
html body.night,
html body.night:has(.aeng-login){
  background:var(--bg-1) !important;
  color:var(--tx-1) !important;
  background-image:none !important;
}
/* nuke decorative layers só no night
   IMPORTANTE: #app.drawer-open NÃO entra aqui — precisa renderizar
   o miniature da home (igual ao modo claro). */
body.night .bg,
body.night .bg .blob,
body.night .glass-orb-field,
body.night .glass-grain,
body.night::after{
  background:transparent !important;
  background-image:none !important;
  display:none !important;
}
/* Miniature da home dentro do drawer (night) — força display + fundo
   que combina com o tema. O conteúdo real da home renderiza por cima. */
html body.night #app.drawer-open{
  display:flex !important;
  background:var(--bg-1) !important;
}

/* ============ TYPOGRAPHY ============ */
html body.night,html body.night *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

html body.night .top h1,
html body.night .top-greet,
html body.night .section-h h2,
html body.night .tab-tile-lbl,
html body.night .card-pl .ttl,
html body.night .lib-item .li .lt,
html body.night .liked-card .li .lt,
html body.night .liked-card .lt,
html body.night .media-card .mc-info h3,
html body.night .podcast .pi h3,
html body.night .sheet h3,
html body.night .m-title,
html body.night .l-title,
html body.night .aeng-login .l-title,
html body.night .aeng-login .keep-row .keep-txt,
html body.night .role-badge,
html body.night .viewer-body .vid-info h2,
html body.night .viewer-body .read-art h2,
html body.night .viewer-body .read-art{color:var(--tx-1) !important}

html body.night .top-greet,
html body.night .card-pl .sub,
html body.night .section-h .more,
html body.night .lib-item .li .ls,
html body.night .liked-card .li .ls,
html body.night .liked-card .ls,
html body.night .media-card .mc-info p,
html body.night .media-card .mc-info .meta,
html body.night .podcast .pi p,
html body.night .podcast .pi .pt,
html body.night .tr-lang-bar,
html body.night .aeng-login .l-sub,
html body.night .aeng-login .fl,
html body.night .l-version{color:var(--tx-2) !important}

/* ============ TOP BAR ============ */
html body.night .top{
  background:transparent !important;border:0 !important;
  padding:14px 2px 18px !important;margin:0 -2px 8px !important;
}
html body.night .top h1{font-size:34px !important;font-weight:800 !important;letter-spacing:-.025em !important;color:var(--tx-1) !important}
html body.night .top-greet{font-size:14px !important;font-weight:500 !important;color:var(--tx-2) !important;margin-bottom:0 !important;display:flex;align-items:center;gap:10px}
html body.night .top-avatar{
  width:34px !important;height:34px !important;border-radius:50% !important;
  background:linear-gradient(135deg,var(--mg) 0%,var(--mg2) 100%) !important;
  color:#fff !important;font-weight:700 !important;font-size:13px !important;
  border:0 !important;box-shadow:0 4px 12px rgba(224,23,126,.28) !important;
}

/* ============ ICON BUTTONS ============ */
html body.night .icon-btn{
  width:38px !important;height:38px !important;border-radius:50% !important;
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}
html body.night .icon-btn:active{background:var(--card-2) !important}
html body.night .icon-btn svg{stroke:var(--tx-1) !important;color:var(--tx-1) !important}

/* ============ ROLE BADGE ============ */
html body.night .role-badge,
html body.night .role-badge.student,
html body.night .role-badge.teacher,
html body.night .role-badge.master{
  background:rgba(224,23,126,.18) !important;
  border-color:rgba(224,23,126,.36) !important;
  color:#ff5fa8 !important;
  font-weight:800 !important;letter-spacing:.06em !important;text-transform:uppercase !important;
  padding:3px 9px !important;border-radius:50px !important;
}

/* ============ "START HERE" + SRS card ============ */
html body.night .anki,
html body.night .anki.yellow{
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  border-radius:18px !important;
  padding:16px !important;color:var(--tx-1) !important;
  box-shadow:var(--shadow-card) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  overflow:hidden !important;
}
html body.night .anki::before,
html body.night .anki::after,
html body.night .anki .anki-glow-2{display:none !important}
html body.night .anki .anki-tag{
  color:var(--tx-3) !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:.12em !important;text-transform:uppercase !important;margin-bottom:8px !important;text-shadow:none !important;
}
html body.night .anki h3{
  font-size:38px !important;font-weight:800 !important;letter-spacing:-.025em !important;
  line-height:1.05 !important;color:var(--tx-1) !important;text-shadow:none !important;
}
html body.night .anki p,
html body.night .anki .anki-feat-pt{color:var(--tx-2) !important;font-style:italic;font-weight:500 !important}
html body.night .anki .anki-num{color:var(--tx-1) !important;font-weight:800 !important}
html body.night .anki .anki-num-lbl{color:var(--tx-3) !important}
html body.night .anki .anki-cta{
  background:linear-gradient(180deg,var(--mg) 0%,var(--mg2) 100%) !important;
  color:#fff !important;font-weight:800 !important;border:0 !important;
  box-shadow:var(--mg-glow) !important;padding:11px 22px !important;border-radius:50px !important;
}
html body.night .anki .anki-cta svg,
html body.night .anki .anki-cta .ico-img{color:#fff !important;filter:none !important;stroke:#fff !important}

html body.night .anki-feat-tag{
  font-size:11px !important;font-weight:700 !important;
  letter-spacing:.12em !important;text-transform:uppercase !important;
  color:var(--tx-3) !important;margin-top:4px !important;
}
html body.night .anki-feat-pt{
  font-size:15px !important;color:var(--tx-2) !important;
  font-style:italic !important;font-weight:500 !important;
}
html body.night .anki-conj{
  margin-top:12px !important;
  background:var(--card-2) !important;
  border:1px solid var(--stroke-1) !important;
  border-radius:10px !important;padding:10px 12px !important;
}
html body.night .anki-conj-lbl{color:var(--tx-3) !important;font-weight:700 !important;letter-spacing:.06em !important;font-size:11px !important}
html body.night .anki-conj-val{color:var(--tx-1) !important;font-weight:700 !important;text-align:right !important}
html body.night .anki-back-card{background:var(--card-2) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important}
html body.night .anki-back-tag{color:var(--tx-3) !important}
html body.night .anki-back-word{color:var(--tx-1) !important}
html body.night .anki-back-ex{color:var(--tx-2) !important}
html body.night .anki-front-card{background:linear-gradient(135deg,var(--mg) 0%,var(--mg2) 100%) !important;color:#fff !important}
html body.night .anki-front-tag{color:rgba(255,255,255,.7) !important}
html body.night .anki-front-hint{color:rgba(255,255,255,.55) !important}

html body.night .anki-row{display:flex !important;align-items:center !important;gap:14px !important;margin-top:14px !important}
html body.night .anki .anki-num{font-size:30px !important;line-height:1 !important;letter-spacing:-.02em !important}
html body.night .anki .anki-num-lbl{font-size:10px !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--tx-3) !important;margin-top:4px !important}

/* ============ TAB GRID — CLAY ICON TILES ============ */
html body.night .tab-grid{gap:12px !important;margin:8px 0 24px !important}
html body.night .tab-tile{
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  border-radius:16px !important;
  padding:14px !important;min-height:74px !important;gap:14px !important;
  box-shadow:var(--shadow-card) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body.night .tab-tile.active{background:var(--card-2) !important;border-color:var(--stroke-2) !important}
html body.night .tab-tile-ico{
  width:52px !important;height:52px !important;border-radius:14px !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,0,0,.20) !important;
}
html body.night .tab-tile-ico .ico-img,
html body.night .tab-tile-ico svg{width:28px !important;height:28px !important;color:#fff !important;filter:none !important}
html body.night .tab-tile-ico .tab-gamepad svg{stroke:#fff !important}
html body.night .tab-tile-lbl{
  font-size:17px !important;font-weight:700 !important;color:var(--tx-1) !important;
  letter-spacing:-.01em !important;
}
html body.night .tab-tile-lbl .tt-tag{color:var(--tx-3) !important}

html body.night .tab-tile.tone-pink     .tab-tile-ico{background:linear-gradient(135deg,#ff2d87 0%,#b30f5d 100%) !important}
html body.night .tab-tile.tone-red      .tab-tile-ico{background:linear-gradient(135deg,#d42d3e 0%,#7a1a24 100%) !important}
html body.night .tab-tile.tone-indigo   .tab-tile-ico{background:linear-gradient(135deg,#373c8d 0%,#1d1f50 100%) !important}
html body.night .tab-tile.tone-lavender .tab-tile-ico{background:linear-gradient(135deg,#9d7ce8 0%,#5a3ea0 100%) !important}
html body.night .tab-tile.tone-orange   .tab-tile-ico{background:linear-gradient(135deg,#f5a23a 0%,#9e5e1d 100%) !important}
html body.night .tab-tile.tone-teal     .tab-tile-ico{background:linear-gradient(135deg,#11b6b4 0%,#066668 100%) !important}
html body.night .tab-tile.tone-sky      .tab-tile-ico{background:linear-gradient(135deg,#3aa7f2 0%,#1d6db3 100%) !important}

/* ============ SECTION HEADERS ============ */
html body.night .section-h h2{
  font-size:12px !important;font-weight:800 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:var(--tx-3) !important;
}
html body.night .section-h .add-btn{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
}
html body.night .section-h .add-btn svg{color:var(--tx-1) !important;stroke:var(--tx-1) !important}

/* ============ TRACKS / MEDIA / PODCAST / LIB items ============ */
html body.night .track,
html body.night .media-card,
html body.night .podcast,
html body.night .lib-item,
html body.night .liked-card,
html body.night .student-row,
html body.night .sub-item,
html body.night .tr-card,
html body.night .tr-result,
html body.night .tr-alt,
html body.night .tr-gr,
html body.night .vocab-row,
html body.night .quiz-q,
html body.night .sub-section{
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
  box-shadow:var(--shadow-card) !important;
}
html body.night .track:active,
html body.night .media-card:active,
html body.night .podcast:active,
html body.night .lib-item:active,
html body.night .student-row:active{background:var(--card-2) !important}
html body.night .track .ti .tt,
html body.night .student-row .info .nm,
html body.night .media-card .mc-info h3,
html body.night .lib-item .li .lt,
html body.night .liked-card .lt,
html body.night .podcast .pi h3{color:var(--tx-1) !important}
html body.night .track .ti .ts,
html body.night .student-row .info .ds,
html body.night .media-card .mc-info p,
html body.night .lib-item .li .ls,
html body.night .liked-card .ls,
html body.night .podcast .pi p{color:var(--tx-2) !important}

html body.night .liked-card .lc{
  background:linear-gradient(135deg,#5e5cf5 0%,#a14de8 100%) !important;
  width:60px !important;height:60px !important;border-radius:12px !important;
  box-shadow:0 8px 16px rgba(94,92,245,.32) !important;
}

/* ============ SEARCH BOX ============ */
html body.night .search-box{
  background:var(--card-1) !important;color:var(--tx-1) !important;
  border:1px solid var(--stroke-1) !important;border-radius:14px !important;
  box-shadow:var(--shadow-card) !important;
}
html body.night .search-box input{color:var(--tx-1) !important}
html body.night .search-box input::placeholder{color:var(--tx-3) !important}
html body.night .search-box svg{color:var(--tx-2) !important;stroke:var(--tx-2) !important}

/* ============ LIBRARY TABS ============ */
html body.night .lib-tab{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;
  color:var(--tx-2) !important;font-weight:700 !important;
}
html body.night .lib-tab.active{
  background:linear-gradient(180deg,var(--mg) 0%,var(--mg2) 100%) !important;
  color:#fff !important;border-color:transparent !important;
  box-shadow:var(--mg-glow) !important;
}

/* ============ BOTTOM NAV — Liquid Glass, blur reduzido ============ */
html body.night .nav{
  position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;
  height:calc(70px + var(--sb)) !important;
  padding:0 4px var(--sb) !important;margin:0 !important;
  background:var(--glass-bg) !important;
  backdrop-filter:blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%) !important;
  border-top:1px solid var(--glass-stroke) !important;
  box-shadow:var(--shadow-nav) !important;
  display:flex !important;justify-content:space-around !important;align-items:center !important;
  z-index:21 !important;
}
html body.night .nav::before,
html body.night .nav::after{display:none !important;content:none !important;background:none !important}

html body.night .nav-item{
  position:relative !important;flex:1 !important;height:100% !important;margin:0 !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
  gap:4px !important;padding:0 !important;
  color:var(--tx-2) !important;font-size:11px !important;font-weight:700 !important;letter-spacing:.01em !important;
  background:transparent !important;
}
html body.night .nav-item svg,
html body.night .nav-item img{
  width:26px !important;height:26px !important;opacity:1 !important;
  color:var(--tx-2) !important;stroke:var(--tx-2) !important;
  filter:none !important;
  transition:transform .15s, color .15s, stroke .15s, opacity .15s;
}
html body.night .nav-item img{filter:brightness(0) invert(1) !important;opacity:.55 !important}
html body.night .nav-item.active img{filter:brightness(0) saturate(100%) invert(46%) sepia(70%) saturate(3000%) hue-rotate(304deg) brightness(98%) contrast(95%) !important;opacity:1 !important}

html body.night .nav-item.active{color:#ff4d9c !important;font-weight:800 !important}
html body.night .nav-item.active svg{color:#ff4d9c !important;stroke:#ff4d9c !important}

html body.night .nav-item::after{
  content:'' !important;display:block !important;
  position:absolute !important;top:4px !important;left:50% !important;
  width:30px !important;height:3px !important;border-radius:30px !important;
  background:linear-gradient(90deg,var(--mg),var(--mg2)) !important;
  transform:translateX(-50%) scaleX(.92) !important;opacity:0 !important;
  transition:transform .22s, opacity .22s;
}
html body.night .nav-item.active::after{
  transform:translateX(-50%) scaleX(1) !important;opacity:1 !important;
}

/* ============ PRIMARY BUTTONS — magenta ============ */
html body.night .btn-enter,
html body.night .btn-primary,
html body.night .m-btn,
html body.night .tr-go,
html body.night .quiz-check,
html body.night .archive-btn,
html body.night .empty-state .empty-add,
html body.night .fb-fab,
html body.night .upl-btn{
  background:linear-gradient(180deg,var(--mg) 0%,var(--mg2) 100%) !important;
  color:#fff !important;border:0 !important;
  box-shadow:var(--mg-glow) !important;
}
html body.night .m-btn.sec{
  background:transparent !important;color:var(--tx-2) !important;
  border:1px solid var(--stroke-2) !important;box-shadow:none !important;
}
html body.night .m-btn.link{
  background:var(--card-1) !important;color:var(--tx-1) !important;
  border:1px solid var(--stroke-1) !important;box-shadow:none !important;
}
html body.night .fab-add{
  background:linear-gradient(180deg,var(--mg) 0%,var(--mg2) 100%) !important;
  color:#fff !important;
  box-shadow:0 14px 32px rgba(224,23,126,.45),0 1px 0 rgba(255,255,255,.25) inset !important;
}
html body.night .fab-add svg,
html body.night .fab-add .ico-img{filter:none !important;color:#fff !important;stroke:#fff !important}

html body.night .aeng-login .btn-enter{
  width:100% !important;
  margin-top:24px !important;
  padding:18px !important;border-radius:18px !important;
  font-size:17px !important;font-weight:800 !important;letter-spacing:.01em !important;
}

/* ============ LOGIN — minimal dark ============ */
html body.night .aeng-login{
  padding:calc(var(--st) + 50px) 24px calc(var(--sb) + 24px) !important;
  background:transparent !important;
}
html body.night .aeng-login .lw{max-width:380px !important}
html body.night .aeng-login .l-form{
  background:transparent !important;border:0 !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  box-shadow:none !important;padding:0 2px !important;gap:4px !important;
}
html body.night .aeng-login .l-logo{
  width:96px !important;height:96px !important;filter:none !important;
  margin:0 auto 22px !important;
}
html body.night .aeng-login .l-title{
  font-size:38px !important;font-weight:800 !important;letter-spacing:-.025em !important;
  color:var(--tx-1) !important;margin:0 0 6px !important;text-align:center !important;
}
html body.night .aeng-login .l-sub{
  font-size:13px !important;color:var(--tx-2) !important;
  margin:0 0 32px !important;text-align:center !important;
}
html body.night .aeng-login .fl{
  font-size:14px !important;font-weight:600 !important;letter-spacing:0 !important;
  text-transform:none !important;color:var(--tx-2) !important;
  margin:16px 0 8px !important;display:block !important;
}
html body.night .aeng-login .fi{
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
  border-radius:14px !important;padding:14px 16px !important;
  font-size:15px !important;font-weight:600 !important;box-shadow:none !important;
  width:100% !important;
}
html body.night .aeng-login .fi:focus{
  border-color:rgba(224,23,126,.55) !important;background:var(--card-2) !important;
  box-shadow:0 0 0 3px rgba(224,23,126,.12) !important;
}
html body.night .aeng-login .fi::placeholder{color:var(--tx-3) !important}
html body.night .aeng-login .keep-row{padding:14px 4px 0 !important}
html body.night .aeng-login .keep-row .keep-box{
  width:22px !important;height:22px !important;border-radius:6px !important;
  background:transparent !important;border:1.5px solid var(--stroke-3) !important;
  color:#fff !important;display:grid !important;place-items:center !important;
}
html body.night .aeng-login .keep-row .keep-box svg{stroke:#fff !important;color:#fff !important}
html body.night .aeng-login .keep-row.on .keep-box{
  background:linear-gradient(180deg,var(--mg) 0%,var(--mg2) 100%) !important;
  border-color:var(--mg) !important;
  box-shadow:0 0 0 4px rgba(224,23,126,.14) !important;
}
html body.night .aeng-login .keep-row .keep-txt{color:var(--tx-2) !important;font-weight:600 !important;font-size:14px !important}
html body.night .aeng-login .keep-row.on .keep-txt{color:var(--tx-1) !important}
html body.night .aeng-login .err{
  color:#ff7e8c !important;
  background:rgba(255,126,140,.08) !important;
  border:1px solid rgba(255,126,140,.24) !important;
}
html body.night .aeng-login .l-version{
  color:var(--tx-3) !important;font-weight:700 !important;opacity:1 !important;
}

/* ============ MINI PLAYER ============ */
html body.night .mini{
  background:var(--glass-bg) !important;
  backdrop-filter:blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%) !important;
  border:1px solid var(--glass-stroke) !important;
  color:var(--tx-1) !important;
  box-shadow:var(--shadow-soft) !important;
  bottom:calc(var(--sb) + 78px) !important;
}
html body.night .mini .mi .mt{color:var(--tx-1) !important}
html body.night .mini .mi .ms{color:var(--tx-2) !important}
html body.night .mini .mb button{color:var(--tx-1) !important}
html body.night .mini .mb button svg{stroke:var(--tx-1) !important;color:var(--tx-1) !important}
html body.night .mini .progress{background:var(--stroke-2) !important}
html body.night .mini .progress i{background:var(--mg) !important}

/* ============ SHEETS / MODALS ============ */
html body.night .sheet-bd,
html body.night .modal-ov{background:rgba(0,0,0,.55) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important}

html body.night .sheet,
html body.night .modal-sh{
  background:var(--bg-1) !important;
  border:1px solid var(--stroke-1) !important;
  border-top:1px solid var(--stroke-2) !important;
  color:var(--tx-1) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-radius:24px 24px 0 0 !important;
  box-shadow:0 -22px 60px rgba(0,0,0,.55) !important;
}
html body.night .sheet h3,html body.night .m-title{color:var(--tx-1) !important}
html body.night .sheet ul li{color:var(--tx-1) !important}
html body.night .sheet ul li:active{background:var(--card-1) !important}
html body.night .sheet ul li svg,html body.night .sheet h3 svg{color:var(--tx-2) !important;stroke:var(--tx-2) !important}
html body.night .sheet .form-block input,
html body.night .sheet .form-block textarea,
html body.night .sheet .form-block select,
html body.night .m-inp{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
}
html body.night .m-handle,html body.night .grab{background:var(--stroke-3) !important}
html body.night .m-lbl{color:var(--tx-2) !important}

/* settings popover menu */
html body.night .pmenu{
  background:var(--bg-1) !important;
  border:1px solid var(--stroke-1) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.55) !important;
}
html body.night .pmenu button{color:var(--tx-1) !important;background:transparent !important}
html body.night .pmenu button:hover{background:var(--card-1) !important}
html body.night .pmenu button svg{color:var(--tx-2) !important;stroke:var(--tx-2) !important}
html body.night .pmenu .sep{background:var(--stroke-1) !important}
html body.night .pmenu .out,html body.night .pmenu .out svg{color:var(--er) !important;stroke:var(--er) !important}
html body.night .pmenu .night-row{color:var(--tx-1) !important}
html body.night .pmenu .night-row svg{color:var(--tx-2) !important}
html body.night .night-track{background:var(--card-2) !important}
html body.night .night-thumb{background:var(--tx-2) !important}
html body.night .night-toggle input:checked ~ .night-track{background:var(--mg) !important}
html body.night .night-toggle input:checked ~ .night-thumb{background:#fff !important}

/* ============ TOAST ============ */
html body.night .toast{
  background:var(--bg-1) !important;color:var(--tx-1) !important;
  border:1px solid var(--stroke-1) !important;
  box-shadow:var(--shadow-soft) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}

/* ============ TRANSLATOR ============ */
html body.night .tr-card,
html body.night .tr-result,
html body.night .tr-alt,
html body.night .tr-gr{
  background:var(--card-1) !important;color:var(--tx-1) !important;
  border:1px solid var(--stroke-1) !important;
}
html body.night .tr-lang-bar,
html body.night .tr-result .pron,
html body.night .tr-alt .alt-tag,
html body.night .tr-gr .gr-tx{color:var(--tx-2) !important}
html body.night .tr-input{color:var(--tx-1) !important;background:transparent !important}
html body.night .tr-input::placeholder{color:var(--tx-3) !important}
html body.night .tr-mini-btn{background:var(--card-2) !important;color:var(--tx-1) !important;border:1px solid var(--stroke-1) !important}
html body.night .tr-grammar-h .ic{background:var(--card-2) !important;color:var(--mg) !important}

/* ============ VIEWER ============ */
html body.night .viewer{background:var(--bg-1) !important}
html body.night .viewer-hdr{
  background:var(--bg-1) !important;border-bottom:1px solid var(--stroke-1) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body.night .viewer-hdr .pl-tag{color:var(--tx-3) !important}
html body.night .viewer-hdr .pl-from{color:var(--tx-1) !important}
html body.night .viewer-body .vid-info h2,
html body.night .viewer-body .read-art h2,
html body.night .viewer-body .read-art{color:var(--tx-1) !important}
html body.night .viewer-body .vid-info p{color:var(--tx-2) !important}
html body.night .viewer-body .write-prompt{background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important}
html body.night .viewer-body .write-input,
html body.night .viewer-body .w-sent-inp{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
}
html body.night .viewer-body .write-input:focus,
html body.night .viewer-body .w-sent-inp:focus{border-color:var(--mg) !important}

/* quiz */
html body.night .quiz-q,
html body.night .quiz-opt,
html body.night .quiz-tf .tf-btn{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important;
}
html body.night .quiz-opt.selected,
html body.night .quiz-tf .tf-btn.selected{
  background:var(--mg-soft) !important;border-color:var(--mg) !important;color:var(--tx-1) !important;
}
html body.night .quiz-opt.correct,
html body.night .quiz-tf .tf-btn.correct{background:rgba(30,180,90,.16) !important;border-color:var(--ok) !important;color:#7ce8a8 !important}
html body.night .quiz-opt.wrong,
html body.night .quiz-tf .tf-btn.wrong{background:rgba(224,23,58,.16) !important;border-color:var(--er) !important;color:#ff8b97 !important}
html body.night .quiz-summary{background:linear-gradient(135deg,var(--mg) 0%,var(--mg2) 100%) !important;color:#fff !important}

/* ============ STUDENTS PAGE ============ */
html body.night .student-row{background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important}
html body.night .student-row:active{background:var(--card-2) !important}
html body.night .student-row .info .nm{color:var(--tx-1) !important}
html body.night .student-row .info .ds{color:var(--tx-2) !important}
html body.night .student-row .vocab-add{background:var(--card-2) !important;border:1px solid var(--stroke-1) !important}
html body.night .student-row .vocab-add img,
html body.night .student-row .vocab-add svg{filter:none !important;color:var(--tx-1) !important;stroke:var(--tx-1) !important}

/* Top bar settings/cog icon — dark mode */
html body.night .top .icon-btn svg,
html body.night .top .icon-btn img{
  color:var(--tx-1) !important;stroke:var(--tx-1) !important;filter:none !important;opacity:1 !important;
}
html body.night .top .icon-btn img{filter:brightness(0) invert(1) !important;opacity:.85 !important}

/* ============ "START HERE" trail CTA — clay-card style ============ */
html body.night .trail-cta{
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  box-shadow:var(--shadow-card) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:14px 16px !important;border-radius:18px !important;
  color:var(--tx-1) !important;
}
html body.night .trail-cta::before{display:none !important}
html body.night .trail-cta:hover{
  border-color:var(--stroke-2) !important;
  box-shadow:var(--shadow-soft) !important;
}
html body.night .trail-cta-ico{
  width:52px !important;height:52px !important;border-radius:14px !important;
  background:linear-gradient(135deg,#FFD93D 0%,#FF6B00 100%) !important;
  box-shadow:
    0 10px 22px rgba(255,107,0,.42),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.14) !important;
}
html body.night .trail-cta-ico .ico-img{width:28px !important;height:28px !important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) !important}
html body.night .trail-cta-title{
  font-size:17px !important;font-weight:800 !important;
  color:var(--tx-1) !important;letter-spacing:-.01em !important;
}
html body.night .trail-cta-sub{
  font-size:11px !important;color:var(--tx-2) !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  font-weight:600 !important;
}
html body.night .trail-cta-chev{
  font-size:22px !important;color:var(--tx-3) !important;font-weight:700;
}

/* "Continue / Recent" rows */
html body.night .recent-row{
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  box-shadow:var(--shadow-card) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:10px !important;border-radius:14px !important;
}
html body.night .recent-t{color:var(--tx-1) !important}
html body.night .recent-s{color:var(--tx-2) !important}
html body.night .recent-bar{background:var(--stroke-2) !important}
html body.night .recent-bar-fill{background:linear-gradient(90deg,var(--mg),var(--mg2)) !important}
html body.night .recent-play{
  background:var(--card-2) !important;
  border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
}

/* Trail page rows */
html body.night .trail-row{
  background:var(--card-1) !important;
  border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body.night .trail-row.over{border-color:var(--mg) !important;background:var(--mg-soft) !important}
html body.night .trail-handle{color:var(--tx-3) !important}
html body.night .trail-check{
  background:var(--card-2) !important;border:1.5px solid var(--stroke-2) !important;
  color:var(--ok) !important;
}
html body.night .trail-row.done .trail-check{background:rgba(30,180,90,.18) !important;border-color:var(--ok) !important}
html body.night .trail-kind{color:var(--tx-3) !important}
html body.night .trail-title{color:var(--tx-1) !important}
html body.night .trail-row.done .trail-title{color:var(--tx-3) !important;text-decoration:line-through}
html body.night .trail-mini-btn{
  background:var(--card-2) !important;border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
}
html body.night .trail-mini-btn:hover{background:var(--card-3) !important}
html body.night .trail-go{
  background:linear-gradient(180deg,var(--mg) 0%,var(--mg2) 100%) !important;
  color:#fff !important;border:0 !important;box-shadow:var(--mg-glow) !important;
}
html body.night .trail-empty{
  background:var(--card-1) !important;border:1px dashed var(--stroke-2) !important;
  color:var(--tx-2) !important;
}
html body.night .trail-add-btn{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;
  color:var(--tx-1) !important;
}
html body.night .trail-add-btn:hover{background:var(--card-2) !important;border-color:var(--stroke-2) !important}
html body.night .trail-progress-bar{background:var(--stroke-2) !important;border-color:var(--stroke-1) !important}
html body.night .trail-progress-fill{background:linear-gradient(90deg,var(--mg),var(--mg2)) !important;box-shadow:0 0 8px rgba(224,23,126,.4) !important}
html body.night .trail-progress-lbl{color:var(--tx-3) !important}
html body.night .trail-add-bar{border-top:1px solid var(--stroke-1) !important}
html body.night .trail-picker-row{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important;
}
html body.night .trail-picker-row:hover{background:var(--card-2) !important}
html body.night .trail-picker-title{color:var(--tx-1) !important}
html body.night .trail-picker-go{color:var(--tx-3) !important}

/* Empty states */
html body.night .empty-state{color:var(--tx-2) !important}
html body.night .empty-state .empty-ico{background:var(--card-1) !important;border:1px solid var(--stroke-1) !important}
html body.night .empty-state .empty-ico svg{color:var(--tx-2) !important}

/* Sub-section labels (data panel) */
html body.night .sub-section{background:var(--card-1) !important;border:1px solid var(--stroke-1) !important}
html body.night .sub-sec-hdr{color:var(--tx-1) !important}
html body.night .sub-meta{color:var(--tx-2) !important}
html body.night .sub-meta b{color:var(--tx-1) !important}
html body.night .sub-tag{background:var(--mg-soft) !important;border:1px solid rgba(224,23,126,.24) !important;color:#ff5fa8 !important}
html body.night .sub-empty-sm{color:var(--tx-3) !important}

/* Forms ge-* (genre editor) */
html body.night .ge-row{background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important}
html body.night .ge-fields input{background:var(--card-2) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important}
html body.night .ge-grip{color:var(--tx-3) !important}
html body.night .ge-actions button{background:var(--card-2) !important;border:1px solid var(--stroke-1) !important;color:var(--tx-1) !important}

/* Form-hint blocks */
html body.night .form-hint{
  background:var(--card-1) !important;border:1px solid var(--stroke-1) !important;
  color:var(--tx-2) !important;
}
html body.night .form-hint code{background:var(--card-2) !important;color:var(--tx-1) !important}

/* PAGE PADDING */
html body.night .page{padding:calc(var(--st) + 12px) 20px 200px !important}

/* MOTION */
html body.night{
  transition:background-color .35s ease, color .35s ease;
}
html body.night .tab-tile,
html body.night .nav,
html body.night .mini,
html body.night .sheet,
html body.night .modal-sh,
html body.night .aeng-login .fi,
html body.night .card-pl,
html body.night .track,
html body.night .media-card,
html body.night .podcast,
html body.night .lib-item,
html body.night .student-row,
html body.night .toast,
html body.night .icon-btn,
html body.night .pmenu,
html body.night .btn-enter,
html body.night .btn-primary,
html body.night .m-btn,
html body.night .tr-card,
html body.night .tr-result{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ============================================================
   v3.1.2 — UNIVERSAL OVERRIDES (aplicam em CLARO e ESCURO)
   ============================================================ */

/* ============ NAV INFERIOR — fixa, sem floating pill ============
   No modo claro o glass.css transforma a nav em uma pílula
   flutuante via .nav::before. Aqui forçamos a mesma estrutura
   fixa full-width que o modo escuro já usa. */
html body .nav{
  position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;
  height:calc(70px + var(--sb,0px)) !important;
  padding:0 4px var(--sb,0px) !important;margin:0 !important;
  display:flex !important;justify-content:space-around !important;align-items:center !important;
  z-index:21 !important;
}
html body .nav::before,
html body .nav::after{display:none !important;content:none !important;background:none !important}

/* LIGHT mode — vidro ESCURO translúcido + blur forte do fundo
   (mesma sensação visual do night mode, mas adaptado ao bg roxo do dia) */
html body:not(.night) .nav{
  background:rgba(14,10,30,.55) !important;
  backdrop-filter:blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 -10px 30px rgba(0,0,0,.30) !important;
}

/* LIGHT nav items — texto claro sobre vidro escuro */
html body:not(.night) .nav-item{
  position:relative !important;flex:1 !important;height:100% !important;margin:0 !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
  gap:4px !important;padding:0 !important;
  color:rgba(255,255,255,.62) !important;font-size:11px !important;font-weight:600 !important;
  background:transparent !important;
}
html body:not(.night) .nav-item svg{
  width:26px !important;height:26px !important;
  color:rgba(255,255,255,.66) !important;stroke:rgba(255,255,255,.66) !important;
  opacity:1 !important;
}
html body:not(.night) .nav-item img{
  width:26px !important;height:26px !important;
  filter:brightness(0) invert(1) !important;opacity:.62 !important;
}
/* LIGHT mode — CTA da aba ativa em BRANCO (sem magenta) */
html body:not(.night) .nav-item.active{color:#ffffff !important;font-weight:800 !important}
html body:not(.night) .nav-item.active svg{color:#ffffff !important;stroke:#ffffff !important}
html body:not(.night) .nav-item.active img{
  filter:brightness(0) invert(1) !important;
  opacity:1 !important;
}
html body:not(.night) .nav-item::after{
  content:'' !important;display:block !important;
  position:absolute !important;top:4px !important;left:50% !important;
  width:30px !important;height:3px !important;border-radius:30px !important;
  background:#ffffff !important;
  transform:translateX(-50%) scaleX(.92) !important;opacity:0 !important;
  transition:transform .22s ease, opacity .22s ease !important;
}
html body:not(.night) .nav-item.active::after{
  transform:translateX(-50%) scaleX(1) !important;opacity:1 !important;
}

/* ============ DRAWER — fundo sóbrio com blur ============
   Remove o degradê azul/roxo. Deixa só uma camada escura translúcida
   com blur forte, dando a impressão de "vidro fosco sobre a home". */
html body .settings-drawer .sd-scrim{
  background:rgba(20,20,28,.55) !important;
  backdrop-filter:blur(36px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(36px) saturate(140%) !important;
}
html body.night .settings-drawer .sd-scrim{
  background:rgba(0,0,0,.62) !important;
}

/* ============ DRAWER — miniature do app sempre visível ============
   Apenas mantemos o frame (z-index, cursor, raio, sombra) — sem
   sobrescrever o BACKGROUND do card. O glass.css já pinta o card
   no MODO CLARO com o gradiente colorido que reproduz a home roxo-glass.
   No NOTURNO, sobrescrevemos para acompanhar o tema escuro. */
html body .settings-drawer{z-index:90 !important}
html body #app.drawer-open{
  z-index:95 !important;
  cursor:pointer !important;
  overflow:hidden !important;
  border-radius:46px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.45) !important;
}

/* Item de menu drawer — cor de texto adapta ao tema */
html body .settings-drawer .sd-item{color:#f1eff7 !important}
html body .settings-drawer .sd-item>svg{color:rgba(255,255,255,.78) !important}
html body .settings-drawer .sd-lbl .lang-now{color:#fff !important}
html body .settings-drawer .sd-sep{background:rgba(255,255,255,.16) !important}
html body .settings-drawer .sd-out{color:#ff7e8c !important}
html body .settings-drawer .sd-out>svg{color:#ff7e8c !important}
html body .settings-drawer .sd-close{color:#fff !important}
html body .settings-drawer .sd-close svg{color:#fff !important;stroke:#fff !important}

/* Toggles do drawer */
html body .settings-drawer .night-track{background:rgba(255,255,255,.22) !important}
html body .settings-drawer .night-toggle input:checked ~ .night-track{
  background:#e0177e !important;
}
html body .settings-drawer .night-thumb{background:#fff !important}