/* =============================================================
   PRIME PHYSIQUE · "VOLTAGE" SKIN
   Athletic premium redesign — cobalt + acid lime on near-black,
   Newsreader (serif display) + Hanken Grotesk (sans) + Space Mono (labels).
   Loaded AFTER the inline <style>; pure visual layer, no logic touched.
   ============================================================= */

:root{
  /* near-black base, deeper & cooler */
  --bg:#06070e; --bg2:#080b16; --panel:#0c1022; --panel2:#111733; --panelhi:#18203c;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);

  --txt:#f4f7ff; --txt2:#98a6c6; --muted:#5d6c8e;

  /* cobalt — primary interactive */
  --blue:#4a76ff; --blue2:#7a9dff; --blueglow:rgba(74,118,255,.42);

  /* acid lime — the energy accent (remaps the old "gold" role) */
  --lime:#b9f23a; --lime2:#ccff5a;
  --gold:#aee23a; --gold2:#cbff52;
  --limeglow:rgba(185,242,58,.30); --lime-soft:rgba(185,242,58,.11); --lime-line:rgba(185,242,58,.34);

  --ok:#34e07e; --green:#3ce589; --danger:#ff5e72;

  --shadow:0 18px 60px rgba(0,0,0,.62);
  --shadow-sm:0 4px 18px rgba(0,0,0,.45);
  --card-shadow:0 16px 40px -14px rgba(0,0,0,.72), 0 2px 8px rgba(0,0,0,.4);
  --tabh:66px;

  --serif:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'Space Mono','SFMono-Regular',monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"]{
  --bg:#eef1f8; --bg2:#f6f8fc; --panel:#ffffff; --panel2:#f1f4fb; --panelhi:#e9eff9;
  --line:rgba(12,22,46,.07); --line2:rgba(12,22,46,.14);
  --txt:#0d1626; --txt2:#42557a; --muted:#7e8da9;
  --blue:#2b5fd6; --blue2:#3a7afe; --blueglow:rgba(43,95,214,.16);
  --lime:#5a8a14; --lime2:#6fa01c; --gold:#5a8a14; --gold2:#6fa01c;
  --limeglow:rgba(90,138,20,.22); --lime-soft:rgba(90,138,20,.10); --lime-line:rgba(90,138,20,.30);
  --green:#16a34a; --ok:#16a34a; --danger:#e2384a;
  --card-shadow:0 14px 34px -12px rgba(30,50,90,.2), 0 2px 6px rgba(30,50,90,.08);
  --shadow-sm:0 3px 14px rgba(30,50,90,.1);
}

/* ---- fonts ---- */
body{
  font-family:var(--sans) !important; letter-spacing:.1px;
  background:
    radial-gradient(120% 80% at 50% -18%, rgba(74,118,255,.12) 0%, transparent 52%),
    radial-gradient(120% 70% at 100% 6%, var(--lime-soft) 0%, transparent 46%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 62%) !important;
}
h1,h2,h3,h4,.cond{font-family:var(--serif) !important; font-weight:600; letter-spacing:-.3px}
button,input,select,textarea{font-family:var(--sans)}

::selection{background:rgba(185,242,58,.26); color:var(--txt)}
::-webkit-scrollbar-thumb{background:var(--line2)}

/* label/eyebrow/chip role -> Space Mono, tracked uppercase */
.hello .hi,.sectitle,.card .tag,.card .pl,.pcard .pbadge,.prcard .prchip,
.fmcard .fmcode,.fmcard .fmchip,.menusec,.acctcard .plan,.pfact .fk,
.pdtable .th,.pdl .dk,.pbanner .ptag,.rbanner .kick,.contbar .cb-tx b,
.rnav button small,.segbtn .lbl,.prtable .prh,.prtr .pcdos::before,
.prtr .pchor::before,.prtr .pcvia::before,.prtr .pcfun::before,
.sresult .sr-mod{
  font-family:var(--mono) !important; font-weight:700;
}

/* =============================================================
   GATE
   ============================================================= */
#gate{
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(74,118,255,.20) 0%, transparent 50%),
    radial-gradient(90% 60% at 50% 118%, var(--lime-soft) 0%, transparent 52%),
    linear-gradient(180deg,#0a1024 0%, var(--bg) 70%) !important;
}
#gate::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 100% at 50% 42%, transparent 56%, rgba(0,0,0,.5) 100%); }
#gate .gate-body,#gate .card{position:relative; z-index:1}
.gicon{
  width:96px; height:96px; border-radius:28px; margin-bottom:24px;
  background:radial-gradient(120% 120% at 50% 0%, rgba(74,118,255,.2), transparent 60%),
             linear-gradient(160deg,var(--panelhi),var(--panel)) !important;
  border:1px solid var(--line2) !important; font-size:0 !important; position:relative; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 36px var(--blueglow), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.gicon::after{ content:""; position:absolute; top:-60%; left:-30%; width:55%; height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(18deg); animation:sheen 4.6s var(--ease) infinite; }
@keyframes sheen{0%,60%{left:-40%}100%{left:130%}}
#gate .logo{
  font-family:var(--mono) !important; font-weight:700; font-size:12px; letter-spacing:5px;
  color:var(--lime2) !important; margin-bottom:14px;
}
#gate h1{font-size:46px !important; font-weight:600 !important; letter-spacing:-1px !important; line-height:1}
#gate .gsub{font-size:15px !important; color:var(--txt2) !important; margin-bottom:34px !important; max-width:32ch; margin-inline:auto}
#pwd{
  background:rgba(255,255,255,.025) !important; border:1.5px solid var(--line2) !important;
  border-radius:15px !important; letter-spacing:3px !important; font-family:var(--sans) !important;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
#pwd:focus{border-color:var(--blue) !important; box-shadow:0 0 0 4px var(--blueglow) !important; background:rgba(74,118,255,.04) !important}
#enter{
  font-family:var(--sans) !important; font-weight:800 !important; font-size:14px !important;
  letter-spacing:2px !important; text-transform:uppercase; border-radius:15px !important;
  background:linear-gradient(180deg,var(--blue2),var(--blue)) !important;
  box-shadow:0 16px 34px var(--blueglow), inset 0 1px 0 rgba(255,255,255,.28) !important;
  position:relative; overflow:hidden; transition:transform .14s var(--spring), filter .2s;
}
#enter::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg); animation:btnSheen 3.6s var(--ease) infinite; }
@keyframes btnSheen{0%,56%{left:-130%}100%{left:170%}}
#enter:active{transform:scale(.975); filter:brightness(1.05)}
.ghint{font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.5px; color:var(--muted) !important}
.ghint span:first-child{font-size:14px}

/* =============================================================
   APP BAR + segmented + back
   ============================================================= */
.appbar{
  background:linear-gradient(180deg, rgba(8,11,22,.92), rgba(8,11,22,0)) !important;
  backdrop-filter:blur(4px); padding-top:calc(env(safe-area-inset-top) + 14px);
}
html[data-theme="light"] .appbar{
  background:linear-gradient(180deg, var(--bg2) 60%, rgba(246,248,252,0)) !important;
}
.appbar .logo{font-family:var(--serif) !important; font-weight:600; font-size:21px; letter-spacing:-.3px}
.appbar .logo b{
  color:transparent; background:linear-gradient(180deg,#dfe8ff,#9db4ff);
  -webkit-background-clip:text; background-clip:text;
}
html[data-theme="light"] .appbar .logo b{
  background:linear-gradient(180deg,#3a6bdb,#1f3fa8); -webkit-background-clip:text; background-clip:text;
}
.appbar .logo small{
  font-family:var(--mono) !important; color:var(--lime2) !important; font-weight:700;
  font-size:8.5px; letter-spacing:3px; margin-top:5px; display:inline-flex; align-items:center; gap:6px;
}
.appbar .logo small::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--limeglow)}
.segctl{background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important; border-radius:13px; backdrop-filter:blur(8px)}
.segbtn{border-radius:10px; transition:opacity .2s, background .2s, transform .15s var(--spring)}
.segbtn.on{background:var(--panelhi) !important; border-color:var(--line2) !important; box-shadow:0 2px 8px rgba(0,0,0,.35) !important}
.segbtn.on .lbl{color:var(--lime2) !important}
.segbtn:active{transform:scale(.9)}
.barbtn{background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:12px; box-shadow:var(--shadow-sm); transition:transform .15s var(--spring)}
.barbtn:active{transform:scale(.9)}
.backbtn{font-family:var(--sans) !important; font-weight:700}

/* =============================================================
   HELLO + CONTINUE + SECTION TITLE
   ============================================================= */
.hello .hi{color:var(--lime2) !important; font-size:11px; letter-spacing:3px; display:inline-flex; align-items:center; gap:9px}
.hello .hi::before{content:""; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--lime),transparent)}
.hello h2{font-size:31px !important; font-weight:600 !important; letter-spacing:-.6px !important; line-height:1.04; margin-top:10px}
.hello p{font-size:14px !important; color:var(--txt2) !important; max-width:44ch; margin-top:8px !important}

.contbar{
  border-radius:18px !important; border:1px solid var(--line2) !important;
  background:linear-gradient(120deg,var(--panelhi),var(--panel)) !important;
  box-shadow:var(--card-shadow) !important; position:relative; overflow:hidden;
  transition:transform .18s var(--ease), border-color .2s;
}
.contbar::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--lime2),var(--lime))}
.contbar:active{transform:scale(.99)}
.contbar .cb-ic{
  background:linear-gradient(160deg,var(--blue2),var(--blue)) !important; border-radius:13px !important;
  box-shadow:0 8px 20px var(--blueglow), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.contbar .cb-tx b{color:var(--lime2) !important; letter-spacing:2px; font-size:9.5px}
.contbar .cb-tx p{font-weight:700 !important}

.sectitle{color:var(--txt2) !important; letter-spacing:2.5px; font-size:11px}
.sectitle::after{background:linear-gradient(90deg,var(--line2),transparent)}

/* =============================================================
   MODULE CARDS
   ============================================================= */
.card{
  border-radius:20px !important; border:1px solid var(--line2) !important;
  box-shadow:var(--card-shadow) !important; min-height:168px;
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.card:active{transform:scale(.985)}
.card .bg{transition:transform .5s var(--ease)}
.card:active .bg{transform:scale(1.04)}
.card .ov{background:linear-gradient(180deg, rgba(6,7,14,.04) 0%, rgba(6,7,14,.55) 45%, rgba(6,7,14,.96) 100%) !important}
.card .tag{
  background:rgba(8,11,22,.5) !important; color:var(--txt2) !important; border:1px solid var(--line) !important;
  backdrop-filter:blur(8px); letter-spacing:1.5px; border-radius:8px !important; font-size:10px; padding:5px 9px;
}
.card .num{
  border-radius:12px !important; width:38px; height:38px; font-family:var(--serif) !important; font-size:19px;
  background:linear-gradient(150deg,var(--lime2),var(--lime)) !important; color:#101a05 !important;
  box-shadow:0 6px 16px var(--limeglow), inset 0 1px 0 rgba(255,255,255,.5) !important; border:1px solid rgba(220,255,170,.5);
}
.card .cc h3{font-size:23px !important; letter-spacing:-.3px}
.card .prog i{background:linear-gradient(90deg,var(--blue),var(--blue2)) !important; box-shadow:0 0 12px var(--blueglow)}

/* =============================================================
   PÉPTIDOS grid + ficha
   ============================================================= */
.pcard{
  border-radius:18px !important; border:1px solid var(--line2) !important;
  box-shadow:var(--card-shadow) !important; min-height:150px;
  transition:transform .22s var(--ease), border-color .22s;
}
.pcard:active{transform:scale(.97)}
.pcard .pov{background:linear-gradient(180deg, rgba(6,7,14,0) 0%, rgba(6,7,14,.5) 48%, rgba(6,7,14,.95) 100%) !important}
.pcard .pn{font-family:var(--serif) !important; font-weight:600; font-size:21px !important; letter-spacing:-.2px; text-shadow:0 2px 12px rgba(0,0,0,.5)}
.pcard .pbadge{
  border-radius:7px !important; padding:3px 8px; letter-spacing:.7px; font-size:9px;
  background:rgba(74,118,255,.16) !important; border:1px solid rgba(122,157,255,.3) !important; color:var(--blue2) !important;
}
.pcard .pbadge.dose{background:rgba(60,229,137,.13) !important; border-color:rgba(60,229,137,.3) !important; color:var(--green) !important}

.pbanner{
  background:radial-gradient(120% 100% at 100% 0%, rgba(74,118,255,.16), transparent 55%),
            linear-gradient(135deg,#0e1936,#0a1224) !important;
  border-bottom:1px solid var(--line2) !important; padding:30px 20px 24px !important;
  position:relative; overflow:hidden; isolation:isolate;
}
.pbanner-art{position:absolute; inset:0; z-index:-2; opacity:.9}
.pbanner-art svg{width:100%; height:100%; display:block}
.pbanner::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,18,36,.35) 0%, rgba(10,18,36,.78) 70%, rgba(10,18,36,.92) 100%)}
.pbanner>.ptag,.pbanner>h1,.pbanner>.ptl{position:relative; z-index:1}
.pbanner .ptag{
  border-radius:8px !important; letter-spacing:2px; font-size:10px; padding:5px 10px;
  background:rgba(74,118,255,.16) !important; border:1px solid rgba(122,157,255,.34) !important; color:var(--blue2) !important;
}
.pbanner h1{font-size:36px !important; font-weight:600 !important; letter-spacing:-.8px !important; line-height:1.0}
.pbanner .ptl{color:var(--lime2) !important; font-size:16px !important; font-family:var(--sans) !important}

.psec-h h3{font-size:21px !important; letter-spacing:-.2px}
.psec-h .ic{border-radius:11px !important; width:34px; height:34px; background:var(--panel2) !important; border:1px solid var(--line) !important}
.psec-h.gold .ic{color:var(--lime2) !important; border-color:var(--lime-line) !important; background:var(--lime-soft) !important}
.psec-h.blue .ic{color:var(--blue2) !important}

.pfacts,.pdtable,.precon,.pfaq{border-radius:16px !important; border-color:var(--line) !important; box-shadow:var(--shadow-sm)}
.pfact .fk,.pdtable .th,.pdl .dk{letter-spacing:1.2px; color:var(--muted) !important}
.pdl .dk{color:var(--blue2) !important}
.pdose{
  border-radius:16px !important; border:1px solid var(--lime-line) !important;
  background:radial-gradient(100% 100% at 100% 0%, var(--lime-soft), transparent 60%),
            linear-gradient(120deg,var(--panelhi),var(--panel)) !important;
}
.pdl .dv b,.pdrow .c1 b,.ppu .ppu-d b,.prnv-i b,.prtr .pcdos b,#rcontent p.body b{color:var(--green) !important}

.ppu{border-radius:13px !important; border-left:3px solid var(--lime) !important; box-shadow:var(--shadow-sm)}
.ppu .ppu-de{color:var(--lime2) !important; font-family:var(--serif) !important; font-weight:600}
.ppu .ppu-h{color:var(--blue2) !important}
.pstack{border-radius:13px !important; border-left:3px solid var(--lime) !important; box-shadow:var(--shadow-sm)}
.pstack .sn{color:var(--lime2) !important; font-family:var(--serif) !important; font-weight:600; font-size:17px}
.ccard{border-radius:14px !important; border-left:3px solid var(--blue) !important; box-shadow:var(--shadow-sm)}
.ccard h4{color:var(--blue2) !important; font-family:var(--serif) !important; font-weight:600}
.pbitem{border-radius:13px !important}
.pbitem.mech .mt{color:var(--blue2) !important; font-family:var(--serif) !important; font-weight:600}
.pfaq .q{color:var(--blue2) !important; font-family:var(--serif) !important; font-weight:600}
.pbitem .bi{color:var(--lime2) !important}

.ptline .dot,.rtline .dot{background:var(--lime) !important; box-shadow:0 0 0 2px var(--lime), 0 0 10px var(--limeglow) !important}
.ptline .td b{color:var(--lime2) !important}
.ptline .tp,.rtline .tp{color:var(--blue2) !important}

.pnote{
  border-radius:13px !important; background:var(--lime-soft) !important;
  border:1px solid var(--lime-line) !important; color:var(--lime2) !important;
  font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.3px;
}

/* =============================================================
   PROTOCOLOS grid + ficha + FÓRMULAS
   ============================================================= */
.prcard{
  border-radius:18px !important; border:1px solid var(--line2) !important;
  background:linear-gradient(120deg,var(--panel2),var(--panel)) !important;
  box-shadow:var(--card-shadow) !important; gap:15px;
  transition:transform .2s var(--ease), border-color .2s;
}
.prcard:active{transform:scale(.985)}
.prcard::before{width:4px !important; background:linear-gradient(180deg,var(--prc,var(--blue)),transparent) !important}
.prcard .pric{
  width:50px !important; height:50px !important; border-radius:15px !important; font-size:24px;
  border:1px solid var(--line) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.3) !important;
}
.prcard .prtx h3{font-family:var(--serif) !important; font-weight:600; font-size:21px !important; letter-spacing:-.2px}
.prcard .prchip{border-radius:7px !important; padding:4px 8px; letter-spacing:.7px; font-size:9px; background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important; color:var(--txt2) !important}
.prcard .prchip.dur{color:var(--lime2) !important; border-color:var(--lime-line) !important; background:var(--lime-soft) !important}
.prcard .prgo{color:var(--muted); transition:transform .2s var(--spring), color .2s}
.prcard:active .prgo{transform:translateX(3px); color:var(--lime2)}

.prtable{border-radius:16px !important; border-color:var(--line) !important; box-shadow:var(--shadow-sm)}
.prtable .prh{background:var(--panel2) !important; letter-spacing:1px; color:var(--muted) !important}
.prtr .pcpep{font-family:var(--serif) !important; font-weight:600}
.prtr .pcvia{color:var(--blue2) !important}
@media(max-width:560px){.prtr .pcpep{color:var(--blue2) !important}}
.prnv{border-radius:14px !important; box-shadow:var(--shadow-sm)}
.prnv-h{color:var(--lime2) !important; font-family:var(--serif) !important; font-weight:600}
.prnv-n{background:linear-gradient(150deg,var(--lime2),var(--lime)) !important; color:#101a05 !important; box-shadow:0 3px 10px var(--limeglow), inset 0 1px 0 rgba(255,255,255,.4)}

.fmsub{font-size:13px !important; color:var(--txt2) !important}
/* Mezcla: full-bleed generative cover + bottom-anchored text */
.fmcard{
  position:relative !important; overflow:hidden !important; isolation:isolate;
  border-radius:16px !important; border:1px solid var(--line2) !important;
  background:var(--panel) !important; box-shadow:var(--card-shadow) !important;
  min-height:158px !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important;
  padding:0 !important; transition:transform .2s var(--ease), border-color .2s;
}
.fmcard:active{transform:scale(.97)}
.fmcard .fmbg{position:absolute; inset:0; z-index:-2}
.fmcard .fmbg svg{width:100%; height:100%; display:block}
.fmcard .fmov{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,7,14,0) 30%, rgba(6,7,14,.48) 58%, rgba(6,7,14,.93) 100%)}
.fmcard .fmcode{
  position:relative; z-index:2; align-self:flex-start; margin:0 0 9px 0;
  font-family:var(--mono) !important; font-weight:700; font-size:12px; letter-spacing:1px;
  background:linear-gradient(150deg,var(--lime2),var(--lime)) !important; color:#101a05 !important;
  border:1px solid rgba(220,255,170,.5) !important; border-radius:7px !important; padding:3px 8px;
  box-shadow:0 3px 10px var(--limeglow), inset 0 1px 0 rgba(255,255,255,.4);
}
.fmcard .fmbody{position:relative; z-index:1; padding:0 13px 13px}
.fmcard .fmname{
  font-family:var(--serif) !important; font-weight:600; font-size:18px !important; line-height:1.05;
  letter-spacing:-.2px; color:#fff !important; margin-top:0 !important; text-shadow:0 2px 12px rgba(0,0,0,.55);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.fmcard .fmobj{
  font-size:11.5px !important; color:#c4d2ea !important; margin-top:6px; line-height:1.32;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.fmcard .fmmeta{margin-top:10px}
.fmcard .fmchip{
  font-family:var(--mono) !important; font-weight:700; font-size:9px !important; letter-spacing:.6px;
  padding:3px 8px; border-radius:7px !important;
  background:rgba(122,157,255,.16) !important; border:1px solid rgba(122,157,255,.3) !important; color:var(--blue2) !important;
}

/* =============================================================
   READER + banner + TOC + nav
   ============================================================= */
.rbar{
  background:rgba(8,11,22,.82) !important; backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line) !important; padding-top:calc(env(safe-area-inset-top) + 13px);
}
.rbar .rtt{font-family:var(--serif) !important; font-weight:600; font-size:17px}
#rprog{background:linear-gradient(90deg,var(--lime),var(--lime2)) !important; box-shadow:0 0 10px var(--limeglow); height:3px !important}
.rbanner{border-radius:0 0 24px 24px !important}
.rbanner .ov{background:linear-gradient(180deg,rgba(6,7,14,.3),rgba(6,7,14,.92)) !important}
.rbanner .kick{color:var(--lime2) !important; letter-spacing:3px; font-size:11px}
.rbanner h2{font-size:28px !important; font-weight:600 !important; letter-spacing:-.4px}
#rcontent .chapter{font-size:25px !important; font-weight:600 !important; border-bottom:1px solid var(--line2) !important}
#rcontent .chapter::before{background:linear-gradient(180deg,var(--lime2),var(--lime)) !important; box-shadow:0 0 12px var(--limeglow)}
#rcontent h3.h2{color:var(--lime2) !important; font-size:20px !important; font-weight:600 !important}
#rcontent h4.h3{font-weight:600 !important}
#rcontent p.body{font-size:16.5px !important; line-height:1.75 !important}
#rcontent mark,.sresult mark{background:var(--lime-soft) !important; color:var(--lime2) !important; box-shadow:inset 0 -2px 0 var(--lime-line); border-radius:2px}
.rtline{border-radius:14px !important; border-color:var(--line) !important}
.rnav button{border-radius:13px !important; border:1px solid var(--line2) !important; font-family:var(--serif) !important; font-weight:600; transition:transform .15s var(--spring), border-color .2s}
.rnav button:active{transform:scale(.97)}
.rnav button small{color:var(--muted) !important; letter-spacing:1px}

#tocSheet .sh{border-radius:24px 24px 0 0 !important; border-top:1px solid var(--lime-line) !important}
#tocSheet .sh-h h3{font-size:20px !important; font-weight:600 !important}
.tocrow .tn{background:var(--panel2) !important; color:var(--lime2) !important; border:1px solid var(--line); border-radius:9px !important; font-family:var(--mono) !important}
.tocrow.sub .tn{background:var(--lime) !important; box-shadow:0 0 8px var(--limeglow)}

/* =============================================================
   SEARCH
   ============================================================= */
.searchbar{background:transparent !important}
.searchbox{
  border-radius:15px !important; border:1.5px solid var(--line2) !important;
  background:rgba(255,255,255,.025) !important;
}
.searchbox:focus-within{border-color:var(--blue) !important; box-shadow:0 0 0 4px var(--blueglow) !important}
#search{font-family:var(--sans) !important}
.searchinfo{font-family:var(--mono) !important; font-style:normal !important; font-size:11px}
.sresult{
  border-radius:14px !important; border:1px solid var(--line) !important;
  border-left:3px solid var(--lime) !important; box-shadow:var(--shadow-sm);
  transition:transform .15s var(--ease), border-color .15s;
}
.sresult:active{transform:translateX(2px); border-left-color:var(--lime2) !important}
.sresult .sr-mod{color:var(--lime2) !important; letter-spacing:1px}

/* =============================================================
   MENU
   ============================================================= */
.acctcard{
  border-radius:20px !important; border:1px solid var(--lime-line) !important;
  background:radial-gradient(120% 100% at 100% 0%, var(--lime-soft), transparent 55%),
            linear-gradient(120deg,var(--panelhi),var(--panel)) !important;
  box-shadow:var(--card-shadow) !important;
}
.acctcard .av{
  border-radius:15px !important; width:54px; height:54px;
  background:linear-gradient(160deg,#143461,#0d1f3d) !important; color:var(--blue2) !important;
  border:1px solid var(--line) !important;
}
.acctcard .ai b{font-family:var(--serif) !important; font-weight:600; font-size:17px}
.acctcard .plan{color:var(--lime2) !important; letter-spacing:1px}
.menusec{letter-spacing:2.5px; color:var(--muted) !important; font-size:11px}
.menuitem{
  border-radius:16px !important; border:1px solid var(--line) !important;
  background:rgba(255,255,255,.015) !important; box-shadow:var(--shadow-sm);
  transition:transform .15s var(--ease), border-color .15s, background .15s;
}
.menuitem:active{transform:scale(.98); border-color:var(--blue) !important}
.menuitem .mi-ic{border-radius:12px !important; background:var(--panel2) !important; border:1px solid var(--line) !important}
.menuitem .mi-tt{font-family:var(--serif) !important; font-weight:600; font-size:17px}
.menuitem.full .mi-val{color:var(--lime2) !important; font-family:var(--sans) !important; font-weight:700}

/* =============================================================
   TAB BAR
   ============================================================= */
#tabbar{
  background:rgba(8,11,22,.78) !important; backdrop-filter:blur(22px) saturate(1.3);
  border-top:1px solid var(--line) !important; box-shadow:0 -8px 30px rgba(0,0,0,.4);
}
html[data-theme="light"] #tabbar{background:rgba(246,248,252,.85) !important}
.tab{font-family:var(--sans) !important; font-weight:700; letter-spacing:.4px; position:relative; transition:color .2s}
.tab.on{color:var(--lime2) !important}
.tab.on svg{filter:drop-shadow(0 2px 8px var(--limeglow)) !important}
.tab.on::before{
  content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:24px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--lime),var(--lime2));
  box-shadow:0 0 10px var(--limeglow);
}
.tab svg{transition:transform .2s var(--spring)}
.tab.on svg{transform:scale(1.04)}
/* 6 tabs — keep labels legible on narrow phones */
#tabbar .tab{font-size:9.5px; letter-spacing:.2px; gap:4px; padding:0 2px}
#tabbar .tab svg{width:21px; height:21px}

/* =============================================================
   ENTRANCE ANIMATIONS  (fill-mode:none + no delay => content is
   NEVER left invisible if a device throttles the animation)
   ============================================================= */
@keyframes riseIn{from{transform:translateY(12px)} to{transform:translateY(0)}}
.view.on .wrap,
#pept.on #pcontent,#prot.on #prcontent,#fm.on #fmcontent,#reader.on .rwrap{
  animation:riseIn .42s var(--ease);
}

@media (prefers-reduced-motion: reduce){*{animation:none !important}}