:root{
  --bg:#000; --panel:#0f121b; --line:rgba(255,255,255,.07);
  --tx:#e7e9ee; --tx2:#8b90a0; --tx3:#565b6b;
  --sheet:#0d1019; --input:#12161f; --deep:#07090f; --chipbg:#161a26;
  --faint:rgba(255,255,255,.06); --navfade:rgba(0,0,0,.94);
  /* isla · tema oscuro (noche profunda, paleta rincón) */
  --i-rock1:#3a2b58; --i-rock2:#1c1038; --i-rockLine:#5a4a86;
  --i-strat1:#33265a; --i-strat2:#281d4a; --i-rockBack:#160f2e;
  --i-soil:#2a1846; --i-soilLine:#3a2657; --i-soilDark:#140a26;
  --i-grass:#1e3a30; --i-grassLine:#356450; --i-grassHi:rgba(150,215,185,.16);
  --i-house:#2e2450; --i-houseRoof:#3a2c60; --i-houseLine:#6a58a0; --i-houseDark:#1c1038;
  --i-metal:#2a2148; --i-metalHi:#4a3d78; --i-crystal:#26547e; --i-crystalLine:#3a7fb8;
  --i-root:#20143a; --i-edge:rgba(178,141,255,.14);
  --i-water:#0e2a44; --i-waterLine:#2f6a9c; --i-waterHi:#9ae0ff;
  --deen:#3ddc97; --cuerpo:#ffb454; --mente:#5ab8ff; --social:#ff7a90; --orden:#b18cff;
  --r:18px; --ease:cubic-bezier(.2,.7,.3,1);
}
[data-theme="light"]{
  --bg:#f2f1ec; --panel:#ffffff; --line:rgba(22,26,42,.1);
  --tx:#1b1e28; --tx2:#575d6e; --tx3:#8d93a5;
  --sheet:#ffffff; --input:#efeee8; --deep:#f6f5f1; --chipbg:#ffffff;
  --faint:rgba(22,26,42,.07); --navfade:rgba(242,241,236,.96);
  /* isla · tema claro (roca cálida al amanecer, paleta rincón) */
  --i-rock1:#e9b98f; --i-rock2:#c98860; --i-rockLine:#f5d9bc;
  --i-strat1:#e0a982; --i-strat2:#d19670; --i-rockBack:#b87a56;
  --i-soil:#d99e7a; --i-soilLine:#e8b896; --i-soilDark:#a86a48;
  --i-grass:#7fb583; --i-grassLine:#a5d4a0; --i-grassHi:rgba(255,255,255,.45);
  --i-house:#fdf1e7; --i-houseRoof:#e8c4a0; --i-houseLine:#fff9f2; --i-houseDark:#d9a878;
  --i-metal:#8a7a6a; --i-metalHi:#c9b8a0; --i-crystal:#7ab8d8; --i-crystalLine:#a0d0e8;
  --i-root:#b8906e; --i-edge:rgba(200,120,80,.22);
  --i-water:#5ab0d8; --i-waterLine:#3d8ab0; --i-waterHi:#e8faff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--tx);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
.disp{font-family:"Chakra Petch",system-ui,sans-serif}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--mente); outline-offset:2px; border-radius:8px}
#app{max-width:480px; margin:0 auto; padding:14px 16px calc(86px + env(safe-area-inset-bottom));}

/* ---------- header ---------- */
header{display:flex; align-items:center; justify-content:space-between; padding:4px 2px 10px}
.brand{line-height:1}
.brand b{font-family:"Chakra Petch"; font-weight:700; font-size:20px; letter-spacing:.14em}
.brand b i{font-style:normal; color:var(--deen)}
.brand small{display:block; margin-top:4px; color:var(--tx3); font-size:11.5px; letter-spacing:.03em}
#lvlChip{font-family:"Chakra Petch"; font-weight:600; font-size:13px; letter-spacing:.08em;
  color:var(--tx2); border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  transition:transform .25s var(--ease), color .25s, border-color .25s}
#lvlChip b{color:var(--tx); font-size:15px}
#lvlChip.pulse{transform:scale(1.12); color:var(--tx); border-color:rgba(255,255,255,.28)}

/* ---------- cards / views ---------- */
.view{display:none; animation:vin .22s var(--ease)}
.view.active{display:block}
@keyframes vin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; margin-bottom:11px}
.eyebrow{font-family:"Chakra Petch"; font-weight:600; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tx3); margin:0 0 12px}
.greet{font-family:"Chakra Petch"; font-weight:600; font-size:22px; margin:2px 0 2px}
.dateline{color:var(--tx2); font-size:13.5px; margin-bottom:11px; text-transform:lowercase}

/* salat */
#salatCard{background:linear-gradient(180deg, rgba(61,220,151,.05), rgba(61,220,151,0) 46%), var(--panel)}
#nextWrap{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
#nextName{font-family:"Chakra Petch"; font-weight:700; font-size:26px; color:var(--deen)}
#nextTime{font-family:"Chakra Petch"; font-weight:700; font-size:30px; font-variant-numeric:tabular-nums}
#countdown{color:var(--tx2); font-size:12.5px; margin-top:1px; font-variant-numeric:tabular-nums}
#salatRow{display:flex; gap:6px; margin-top:11px}
#salatRow .chip{flex:1; text-align:center; border:1px solid var(--line); border-radius:12px;
  padding:7px 2px 8px; color:var(--tx2)}
#salatRow .chip s{display:block; text-decoration:none; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx3); margin-bottom:2px}
#salatRow .chip b{font-family:"Chakra Petch"; font-weight:600; font-size:12.5px; font-variant-numeric:tabular-nums}
#salatRow .chip.past{opacity:.35}
#salatRow .chip.next{border-color:rgba(61,220,151,.45); background:rgba(61,220,151,.08); color:var(--tx)}
#salatRow .chip.next s{color:var(--deen)}

/* nudge */
.nudge{display:flex; align-items:center; gap:10px; margin:-4px 0 14px;
  border:1px dashed rgba(255,180,84,.4); border-radius:14px; padding:10px 14px;
  color:var(--tx2); font-size:13.5px; width:100%; text-align:left; cursor:pointer}

/* quests */
.quest{display:flex; width:100%; text-align:left; gap:12px; align-items:center;
  padding:12px 4px; border-bottom:1px solid var(--line); transition:opacity .3s}
.quest:last-child{border-bottom:0; padding-bottom:6px}
.quest:first-of-type{padding-top:4px}
.quest .tick{flex:0 0 25px; height:25px; border-radius:50%; border:1.6px solid var(--qc,var(--tx3));
  display:grid; place-items:center; transition:background .25s var(--ease), transform .25s var(--ease)}
.quest .tick svg{width:12px; height:12px; stroke:#0a0c12; stroke-width:3; fill:none;
  stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s}
.quest span.qt{flex:1; font-size:14.5px; line-height:1.4}
.quest small{color:var(--qc,var(--tx3)); font-family:"Chakra Petch"; font-size:10px; letter-spacing:.14em; opacity:.85}
.quest.done{opacity:.45}
.quest.done .tick{background:var(--qc); border-color:var(--qc); transform:scale(1.08)}
.quest.done .tick svg{opacity:1}
.quest.done span.qt{text-decoration:line-through; text-decoration-color:var(--tx3)}
.qauto{font-size:11px; color:var(--tx3); padding:2px 0 6px}

/* quick actions */
.quick{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:11px}
.quick button{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 6px 10px; display:grid; justify-items:center; gap:8px;
  transition:transform .15s var(--ease), border-color .2s}
.quick button:active{transform:scale(.96)}
.quick svg{width:27px; height:27px; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.quick span{font-size:12.5px; color:var(--tx2)}
#qMood svg{stroke:var(--tx2)}
#qTrain{border-color:rgba(255,180,84,.26)} #qTrain svg{stroke:var(--cuerpo)}
#qOla{border-color:rgba(90,184,255,.34)}  #qOla svg{stroke:var(--mente)}

/* stats */
.srow{padding:8px 0}
.srow + .srow{border-top:1px solid var(--faint)}
.stop{display:flex; align-items:baseline; gap:9px; margin-bottom:7px}
.stop .sn{font-family:"Chakra Petch"; font-weight:600; font-size:13px; letter-spacing:.05em; color:var(--sc)}
.stop .snv{font-family:"Chakra Petch"; font-size:10.5px; letter-spacing:.08em; color:var(--tx2);
  border:1px solid rgba(255,255,255,.1); border-radius:99px; padding:1.5px 8px}
.stop .sxp{margin-left:auto; font-size:12px; color:var(--tx3); font-variant-numeric:tabular-nums}
.sbar{height:6px; border-radius:99px; background:var(--faint); overflow:hidden}
.sbar i{display:block; height:100%; width:0; border-radius:99px; background:var(--sc);
  box-shadow:0 0 8px 0 var(--sc); transition:width .55s var(--ease)}
.srow.pulse .snv{color:var(--sc); border-color:var(--sc)}

/* base row */
.baseBtns{display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:9px}
.baseBtns button{border:1px solid var(--line); border-radius:13px; padding:12px 6px;
  font-size:13px; color:var(--tx2); transition:border-color .2s, transform .15s var(--ease)}
.baseBtns button:active{transform:scale(.96)}
#bNoche{border-color:rgba(177,140,255,.3); color:#c9b4f5}

/* seal */
#sealCard{display:flex; align-items:center; gap:17px}
#sealBtn{position:relative; flex:0 0 92px; height:92px; border-radius:50%;
  display:grid; place-items:center; touch-action:none; user-select:none; -webkit-user-select:none}
#sealBtn .ringbg,#sealBtn .ring{position:absolute; inset:0; border-radius:50%}
#sealBtn .ringbg{border:5px solid var(--faint)}
#sealBtn .ring{background:conic-gradient(var(--orden) calc(var(--p,0)*1turn), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));}
#sealBtn .core{font-family:"Chakra Petch"; font-weight:600; font-size:12px; letter-spacing:.1em;
  color:var(--tx2); transition:transform .3s var(--ease), color .3s}
#sealBtn.sealed .core{color:var(--orden); animation:stamp .45s var(--ease)}
#sealBtn.sealed .ring{background:conic-gradient(var(--orden) 1turn, transparent 0)}
@keyframes stamp{0%{transform:scale(.5) rotate(-10deg)}60%{transform:scale(1.18) rotate(2deg)}100%{transform:scale(1)}}
#sealTx{flex:1}
#sealTitle{font-size:15px; margin:0 0 3px}
#sealHint{color:var(--tx3); font-size:12.5px; margin:0}
#insight{display:none; margin:8px 0 0; color:var(--tx2); font-size:13.5px; border-left:2px solid var(--orden); padding-left:10px}

/* ---------- isla ---------- */
#islaWrap{position:relative; border-radius:var(--r); border:1px solid var(--line);
  overflow:hidden; margin-bottom:14px; transition:background 1.2s linear}
/* cielo · tema oscuro (paleta rincón profunda) */
#islaWrap[data-phase="noche"]{background:radial-gradient(130% 95% at 50% -5%, #2a1450 0%, #160f2e 52%, #0d071d 100%)}
#islaWrap[data-phase="alba"]{background:linear-gradient(180deg,#1c1038 0%, #6a48c9 60%, #ff9e64 100%)}
#islaWrap[data-phase="dia"]{background:linear-gradient(180deg,#221743 0%, #3a2657 55%, #7c5cd6 100%)}
#islaWrap[data-phase="ocaso"]{background:linear-gradient(180deg,#160f2e 0%, #7c5cd6 52%, #d95f3b 100%)}
/* cielo · tema claro (amanecer luminoso rincón) */
[data-theme="light"] #islaWrap[data-phase="noche"]{background:linear-gradient(180deg,#d9d3ec 0%, #b8a8d8 55%, #9678b8 100%)}
[data-theme="light"] #islaWrap[data-phase="alba"]{background:linear-gradient(180deg,#fdf1e7 0%, #ffc9a0 55%, #ff9e64 100%)}
[data-theme="light"] #islaWrap[data-phase="dia"]{background:linear-gradient(180deg,#eef3fb 0%, #cfe0f5 55%, #a9c8ee 100%)}
[data-theme="light"] #islaWrap[data-phase="ocaso"]{background:linear-gradient(180deg,#f6edda 0%, #ffb08a 52%, #d95f3b 100%)}
#stars{position:absolute; inset:0; transition:opacity 1.2s}
#islaWrap[data-phase="dia"] #stars{opacity:0}
#islaWrap[data-phase="alba"] #stars{opacity:.22}
#islaWrap[data-phase="ocaso"] #stars{opacity:.35}
#stars i{position:absolute; border-radius:50%; background:#cdd6ff; opacity:.55}
[data-theme="light"] #stars i{background:#fff; opacity:.4}
#stars i.tw{animation:tw 3.4s ease-in-out infinite}
.ripple2{animation:rip 3.6s ease-out .6s infinite}
@keyframes rip{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@keyframes tw{50%{opacity:.12}}
#isleSvg{display:block; width:100%; height:auto; position:relative}
#moonEl,#sunEl,#clouds{transition:opacity 1.2s}
#moonEl{opacity:0} #sunEl{opacity:0} #clouds{opacity:0}
#islaWrap[data-phase="noche"] #moonEl{opacity:.9}
#islaWrap[data-phase="dia"] #sunEl{opacity:.65}
#islaWrap[data-phase="dia"] #clouds{opacity:.5}
#islaWrap[data-phase="alba"] #clouds{opacity:.3}
#islaWrap[data-phase="ocaso"] #clouds{opacity:.22}
.nightlight{transition:opacity 1.2s}
#islaWrap[data-phase="dia"] .nightlight{opacity:.18 !important}
#islaWrap[data-phase="dia"] #firefliesPh{opacity:0}
#firefliesPh{transition:opacity 1.2s}
.ffly{animation:ff 5.5s ease-in-out infinite}
.ffly:nth-child(2){animation-duration:7s; animation-delay:-2s}
.ffly:nth-child(3){animation-duration:6.2s; animation-delay:-4s}
@keyframes ff{0%,100%{transform:translate(0,0); opacity:.9}
  40%{transform:translate(7px,-9px); opacity:.35}
  70%{transform:translate(-5px,-4px); opacity:.8}}
.float{animation:bob 7s ease-in-out infinite}
.float2{animation:bob 9s ease-in-out -2.5s infinite}
.float3{animation:bob 11s ease-in-out -5s infinite}
@keyframes bob{50%{transform:translateY(-7px)}}
.ripple{transform-box:fill-box; transform-origin:center; animation:rip 3.6s ease-out infinite}
@keyframes rip{0%{transform:scale(.4); opacity:.7}100%{transform:scale(2.7); opacity:0}}
.glowPulse{animation:gp 3.2s ease-in-out infinite alternate}
@keyframes gp{to{opacity:.9}}
.shimmer{animation:shm 4.5s ease-in-out infinite}
@keyframes shm{50%{opacity:.15}}
.el{cursor:pointer}
.el.flash{animation:elf .7s var(--ease)}
@keyframes elf{30%{filter:brightness(1.9)}}
.ghosted{opacity:.4}
#phaseBtn{position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--line); color:var(--tx2); background:rgba(0,0,0,.3);
  font-size:15px; backdrop-filter:blur(4px)}
#isleInfo{min-height:52px; color:var(--tx2); font-size:13.5px; line-height:1.5}
#isleInfo b{color:var(--ic,var(--tx)); font-family:"Chakra Petch"}

/* radar */
#radarCard{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center}
#radar{width:190px; height:176px}
#legend{display:grid; gap:8px}
#legend .lg{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--tx2)}
#legend .lg i{width:9px; height:9px; border-radius:3px; background:var(--lc)}
#legend .lg b{margin-left:auto; font-family:"Chakra Petch"; font-weight:600; color:var(--tx); font-size:13px}

/* ---------- tabbar ---------- */
nav{position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--navfade) 60%, transparent);}
.tabs{max-width:480px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:5px}
.tabs button{padding:11px 2px; border-radius:12px; font-family:"Chakra Petch"; font-weight:600;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--tx3);
  transition:background .2s, color .2s; white-space:nowrap}
.tabs button.on{background:var(--faint); color:var(--tx)}

/* ---------- overlays / sheets ---------- */
.ovl{position:fixed; inset:0; z-index:40; display:none; background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.ovl.open{display:grid}
#sheet{align-items:end}
#sheet .box{background:var(--sheet); border:1px solid var(--line); border-radius:22px 22px 0 0;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom)); max-width:480px; margin:0 auto; width:100%;
  animation:up .25s var(--ease); position:relative;
  max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.sheetX{position:sticky; top:-6px; float:right; z-index:3; width:32px; height:32px; margin:-8px -6px 0 8px;
  border-radius:50%; background:var(--input); border:1px solid var(--line); color:var(--tx3); font-size:14px}
@keyframes up{from{transform:translateY(30px); opacity:0}}
.mrow{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px}
.mrow button, .crow button{border:1px solid var(--line); border-radius:14px; padding:12px 4px;
  display:grid; place-items:center; gap:5px; transition:transform .15s var(--ease), border-color .2s;
  color:var(--tx2); font-size:12.5px}
.mrow button:active, .crow button:active{transform:scale(.92)}
.mrow svg{width:30px; height:30px; stroke:var(--tx2); fill:none; stroke-width:1.7; stroke-linecap:round}
.crow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:14px}
.trow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.trow label{display:grid; gap:6px; font-size:12px; color:var(--tx3)}
.trow input, .steprow input{background:var(--input); border:1px solid var(--line); border-radius:12px;
  color:var(--tx); padding:12px; font:inherit; font-variant-numeric:tabular-nums; width:100%}
.steprow{display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--tx2); font-size:13.5px}
.steprow button{width:38px; height:38px; border:1px solid var(--line); border-radius:12px; font-size:18px; color:var(--tx2)}
.steprow b{font-family:"Chakra Petch"; min-width:22px; text-align:center}
.steprow .tipo{margin-left:auto; width:auto; height:auto; padding:8px 14px; border:1px solid var(--line);
  border-radius:10px; color:var(--tx3); font-family:"Chakra Petch"; font-size:11px}
.steprow .tipo.d{color:var(--cuerpo); border-color:rgba(255,180,84,.4)}
.steprow .tipo.w{color:var(--mente); border-color:rgba(90,184,255,.4)}
.logros input{margin-top:8px}
.cta{width:100%; border-radius:13px; padding:14px; font-family:"Chakra Petch"; font-weight:600;
  letter-spacing:.06em; background:rgba(90,184,255,.14); color:var(--mente);
  border:1px solid rgba(90,184,255,.35); transition:opacity .2s; margin-top:16px}
.cta[disabled]{opacity:.35}
.cta.alt{background:rgba(255,255,255,.05); color:var(--tx2); border-color:var(--line); margin-top:8px}
.cta.violet{background:rgba(177,140,255,.13); color:var(--orden); border-color:rgba(177,140,255,.35)}
.subtle{color:var(--tx3); font-size:12px; margin-top:10px; line-height:1.5}
.linkish{background:none; border:0; color:var(--tx3); font-size:12px; text-decoration:underline; padding:4px}

/* sello dentro del sheet */
#sealBtn2{position:relative; width:96px; height:96px; border-radius:50%; margin:14px auto 4px;
  display:grid; place-items:center; touch-action:none; user-select:none}
#sealBtn2 .ringbg,#sealBtn2 .ring{position:absolute; inset:0; border-radius:50%}
#sealBtn2 .ringbg{border:5px solid var(--faint)}
#sealBtn2 .ring{background:conic-gradient(var(--orden) calc(var(--p,0)*1turn), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));}
#sealBtn2 .core{font-family:"Chakra Petch"; font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--tx2)}

/* la ola */
#ola{place-items:center; padding:22px}
#ola .olabox{width:100%; max-width:420px; background:var(--sheet); border:1px solid var(--line);
  border-radius:24px; padding:26px 22px; text-align:center; position:relative; animation:up .25s var(--ease)}
#olaX{position:absolute; top:12px; right:14px; color:var(--tx3); font-size:20px; padding:6px}
.olastep{display:none} .olastep.on{display:block}
#ola h2{font-family:"Chakra Petch"; font-weight:600; font-size:19px; margin:4px 0 6px}
#ola p{color:var(--tx2); font-size:14px; margin:0 0 16px}
.chips{display:grid; gap:8px; margin-bottom:18px}
.chips button{border:1px solid var(--line); border-radius:12px; padding:12px; font-size:14px;
  color:var(--tx2); transition:border-color .2s, color .2s}
.chips button.sel{border-color:rgba(90,184,255,.6); color:var(--tx)}
#olaFase{font-family:"Chakra Petch"; font-size:13px; letter-spacing:.1em; text-transform:lowercase;
  color:var(--mente); margin:-4px 0 8px; min-height:18px}
#olaGround{margin-top:16px; color:var(--tx2); font-size:13.5px; line-height:1.55; max-width:300px;
  opacity:1; transition:opacity .25s; padding:6px}
#breath{width:130px; height:130px; margin:6px auto 14px; border-radius:50%;
  border:1.5px solid rgba(90,184,255,.5); display:grid; place-items:center; box-shadow:0 0 42px rgba(90,184,255,.12) inset}
@keyframes breathe{50%{transform:scale(1.12); box-shadow:0 0 60px rgba(90,184,255,.22) inset}}
#olaTimer{font-family:"Chakra Petch"; font-weight:700; font-size:30px; font-variant-numeric:tabular-nums}

/* modo noche */
#noche{position:fixed; inset:0; z-index:70; background:#000; display:grid; place-items:center;
  align-content:center; gap:10px; text-align:center; padding:30px}
#noche[hidden]{display:none}
.ntime{font-size:52px; font-weight:700; color:#2c3040; font-variant-numeric:tabular-nums}
.nmsg{color:#3a3f52; font-size:15px; margin:0}
.nsub{color:#262a3a; font-size:12.5px; margin:0}
#nClose{margin-top:26px; color:#31364a; font-size:13px; border:1px solid #171b28;
  border-radius:999px; padding:10px 22px}

/* toast / orbs / footer */
#toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(14px);
  background:var(--chipbg); border:1px solid var(--line); color:var(--tx); font-size:13.5px;
  padding:10px 16px; border-radius:999px; opacity:0; pointer-events:none; z-index:60;
  transition:opacity .25s, transform .25s var(--ease); max-width:86vw; text-align:center;
  display:flex; gap:12px; align-items:center}
#toast.on{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
#toast button{color:var(--mente); font-size:13px; text-decoration:underline; padding:0}
.orb{position:fixed; z-index:50; width:11px; height:11px; border-radius:50%;
  pointer-events:none; background:var(--oc); box-shadow:0 0 12px var(--oc), 0 0 4px #fff inset}
footer{color:var(--tx3); font-size:11.5px; text-align:center; line-height:1.6; padding:6px 10px 0}
footer b{color:var(--tx2); font-weight:600; cursor:pointer}

/* ---------- gym ---------- */
.gymseg{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:4px; margin-bottom:14px}
.gymseg button{padding:9px; border-radius:10px; font-family:"Chakra Petch"; font-weight:600;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3)}
.gymseg button.on{background:rgba(255,180,84,.1); color:var(--cuerpo)}
.gpane{display:none} .gpane.active{display:block}
.card.resume{width:100%; text-align:left; border-color:rgba(255,180,84,.4)}
#gymResumeTx{font-size:14.5px}
.gbtns{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
.gbtns button{border:1px solid var(--line); border-radius:13px; padding:12px 6px; font-size:13px; color:var(--tx2)}
.gbtns .accent{border-color:rgba(255,180,84,.35); color:var(--cuerpo); font-family:"Chakra Petch"; font-weight:600}
.rrow{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 2px; border-bottom:1px solid var(--line); font-size:14.5px}
.rrow:last-child{border-bottom:0}
.rrow small{color:var(--tx3); font-size:12px}
.rrow .go{margin-left:auto; color:var(--cuerpo); font-family:"Chakra Petch"; font-size:12px; letter-spacing:.08em}
.hrow{padding:9px 2px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--tx2)}
.hrow:last-child{border-bottom:0}
.hrow b{color:var(--tx); font-weight:600}
.hrow .pr{color:var(--cuerpo)}
#exBuscar{width:100%; background:var(--input); border:1px solid var(--line); border-radius:14px;
  color:var(--tx); padding:13px 15px; font:inherit; margin-bottom:11px}
.chipsflt{display:flex; gap:6px; overflow-x:auto; padding:0 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.chipsflt::-webkit-scrollbar{display:none}
.chipsflt button{flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  font-size:12px; color:var(--tx2); text-transform:capitalize; transition:border-color .2s, color .2s, background .2s}
.chipsflt button.on{border-color:rgba(255,180,84,.5); color:var(--cuerpo); background:rgba(255,180,84,.08)}
.exrow{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:9px 11px; margin-bottom:8px}
.exrow img{width:46px; height:46px; border-radius:10px; background:#fff; object-fit:cover; flex:0 0 46px}
.exrow .noimg{width:46px; height:46px; border-radius:10px; background:var(--chipbg); border:1px solid var(--line); flex:0 0 46px;
  display:grid; place-items:center; color:var(--tx3); font-size:10px}
.exrow .xn{flex:1; min-width:0}
.exrow .xn b{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize}
.exrow .xn small{color:var(--tx3); font-size:11.5px}
.exdet img.gif{width:180px; height:180px; border-radius:16px; background:#fff; display:block; margin:6px auto 10px}
.exdet .attr{color:var(--tx3); font-size:10.5px; text-align:center; margin:0 0 10px}
.exdet .musc{font-size:13px; color:var(--tx2); margin:0 0 10px; text-transform:capitalize}
.exdet ol{margin:8px 0 0; padding-left:18px; color:var(--tx2); font-size:13px; line-height:1.5}
.spark{width:100%; height:64px; margin-top:8px}
/* player */
#player{align-items:stretch}
.pbox{background:var(--deep); width:100%; max-width:480px; margin:0 auto; padding:14px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto; animation:up .25s var(--ease)}
#pHead{display:flex; align-items:center; gap:12px; padding:2px 0 12px; position:sticky; top:0; background:var(--deep); z-index:2}
#pHead b{flex:1; font-size:16px; letter-spacing:.04em}
#pDur{color:var(--tx3); font-size:13px; font-variant-numeric:tabular-nums}
#pX{color:var(--tx3); font-size:19px; padding:4px 8px}
.pex{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:13px 14px; margin-bottom:11px}
.pex .phead{display:flex; align-items:baseline; gap:9px}
.pex .phead b{font-size:14px; font-weight:600; text-transform:capitalize; flex:1}
.pex .phead button{color:var(--tx3); font-size:12px}
.pex .sug{color:var(--cuerpo); font-size:12px; margin:5px 0 2px}
.pex .lastx{color:var(--tx3); font-size:11.5px; margin:2px 0 6px}
.setrow{display:grid; grid-template-columns:22px 1fr 1fr 34px 34px; gap:8px; align-items:center; margin-top:7px}
.setrow s{color:var(--tx3); font-size:11px; text-decoration:none; font-family:"Chakra Petch"}
.setrow input{background:var(--input); border:1px solid var(--line); border-radius:10px; color:var(--tx);
  padding:9px 6px; font:inherit; font-size:14px; text-align:center; font-variant-numeric:tabular-nums; width:100%; min-width:0}
.setrow .tipo{border:1px solid var(--line); border-radius:10px; padding:8px 0; color:var(--tx3);
  font-family:"Chakra Petch"; font-size:11px}
.setrow .tipo.d{color:var(--cuerpo); border-color:rgba(255,180,84,.4)}
.setrow .tipo.w{color:var(--mente); border-color:rgba(90,184,255,.4)}
.setrow .ok{border:1.6px solid var(--line); border-radius:10px; height:34px; display:grid; place-items:center; color:transparent}
.setrow.done input{opacity:.5}
.setrow.done .ok{background:var(--cuerpo); border-color:var(--cuerpo); color:#0a0c12; font-weight:700}
.paddset{margin-top:9px; color:var(--tx3); font-size:12.5px; text-decoration:underline}
#restChip{position:fixed; right:14px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:75;
  background:var(--chipbg); border:1px solid rgba(255,180,84,.4); border-radius:999px; padding:9px 8px 9px 15px;
  display:flex; align-items:center; gap:9px; font-size:12px; color:var(--tx2)}
#restChip b{color:var(--cuerpo); font-size:15px; font-variant-numeric:tabular-nums}
#restChip button{color:var(--tx3); padding:2px 7px}
/* mapa */
.mg{fill:#ffb454; fill-opacity:.05; stroke:rgba(255,255,255,.07); stroke-width:.8; cursor:pointer;
  transition:fill-opacity .5s var(--ease)}
#mapaInfo{margin-top:10px; min-height:34px}
#mapaInfo b{color:var(--cuerpo); font-family:"Chakra Petch"; text-transform:capitalize}
/* pack */
.packbar{height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:9px}
.packbar i{display:block; height:100%; width:0; background:var(--cuerpo); border-radius:99px; transition:width .3s}

.mg{cursor:pointer}
#mapaLista{display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; margin-top:12px}
#mapaLista .ml{display:flex; align-items:baseline; gap:7px; font-size:12px; color:var(--tx2); padding:3px 0}
#mapaLista .ml i{width:8px; height:8px; border-radius:3px; flex:0 0 8px; align-self:center}
#mapaLista .ml b{font-family:"Chakra Petch"; font-size:11.5px; color:var(--tx)}
#mapaLista .ml small{margin-left:auto; color:var(--tx3); font-size:10.5px; font-variant-numeric:tabular-nums}
.mgdeco{pointer-events:none}
.dtabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--input); border:1px solid var(--line);
  border-radius:12px; padding:4px; margin:12px 0 10px}
.dtabs button{padding:8px; border-radius:9px; font-family:"Chakra Petch"; font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx3)}
.dtabs button.on{background:rgba(255,180,84,.1); color:var(--cuerpo)}
.dpane{display:none} .dpane.active{display:block}
.reg{padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--tx2)}
.reg:last-child{border-bottom:0}
.reg b{color:var(--tx); font-size:12px}
.pex .phead{align-items:center}
.pex .phead img{width:34px; height:34px; border-radius:8px; background:#fff; object-fit:cover; flex:0 0 34px}
.pex .phead .noimg{width:34px; height:34px; border-radius:8px; background:var(--chipbg); border:1px solid var(--line); flex:0 0 34px}
.pex .phead b{cursor:pointer}
.pex .phead .fold{color:var(--tx3); font-size:13px; padding:2px 6px; transition:transform .2s var(--ease)}
.pex.plegado .fold{transform:rotate(-90deg)}
.pex.plegado .pbody{display:none}
.pex .foldsum{display:none; color:var(--tx3); font-size:12px; margin-top:4px}
.pex.plegado .foldsum{display:block}
.exdet img.gif{width:220px; height:220px}
.exdet .prline{color:var(--cuerpo); font-size:13px; margin:0 0 4px; text-align:center}

/* corán */
.srow2{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--faint);
  width:100%; text-align:left; color:var(--tx)}
.srow2 .sn2{width:26px; font-family:"Chakra Petch"; color:var(--tx3); font-size:11.5px; flex:none}
.srow2 .sx{flex:1; min-width:0}
.srow2 .sx b{font-size:14px}
.srow2 .sx small{color:var(--tx3); font-size:11px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sest{font-size:10px; font-family:"Chakra Petch"; flex:none}
.sest.mem{color:var(--deen)} .sest.apr{color:var(--cuerpo)}
.aar{direction:rtl; font-family:'Noto Naskh Arabic','Scheherazade New',serif; color:var(--tx)}
#qArToggle.on{color:var(--deen) !important}
.aya{padding:13px 22px 13px 0; border-bottom:1px solid var(--faint); position:relative}
.aya .atr{font-size:16px; line-height:1.7}
.aya .aar{font-size:25px; line-height:2.1; text-align:right; margin-top:8px}
.aya .atd{font-size:12.5px; color:var(--tx2); margin-top:7px; line-height:1.55}
.aya .an{position:absolute; top:14px; right:0; font-family:"Chakra Petch"; font-size:10.5px; color:var(--deen)}
.basmala{text-align:center; color:var(--tx2); font-size:12.5px; padding:8px 0 14px; border-bottom:1px solid var(--faint)}
.basmala .aar{font-size:21px; text-align:center; margin-bottom:4px}
.memBox{padding:16px 0; border-bottom:1px solid var(--faint)}
.memBox .atr{font-size:19px; line-height:1.85; min-height:96px}
.memBox .aar{font-size:26px; line-height:2.1; text-align:right; margin-top:10px}
.memBox .atd{font-size:12.5px; color:var(--tx2); margin-top:10px}
.oc{font-style:normal; color:var(--tx3); letter-spacing:1px}
.memCtl{display:grid; grid-template-columns:56px 1fr 56px; gap:8px; margin-top:14px}

/* editor de quests */
.qrow{display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--faint);
  font-size:12.5px; color:var(--tx2)}
.qrow i{width:8px; height:8px; border-radius:50%; flex:none}
.qrow span{flex:1}
.qattr{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.qattr button{border:1px solid var(--line); border-radius:999px; padding:6px 11px; font-size:11.5px;
  color:var(--tx2); font-family:"Chakra Petch"}
.qattr button.on{border-color:var(--sc); color:var(--sc)}

/* píldoras de personaje */
.pills{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
.pill{position:relative; border:1px solid var(--line); border-radius:14px; padding:10px 3px 9px;
  display:grid; gap:3px; justify-items:center; overflow:hidden; transition:transform .15s var(--ease), border-color .3s}
.pill::before{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--sc) var(--p,0%), transparent var(--p,0%));
  opacity:.24; transition:background .5s var(--ease)}
.pill b{font-family:"Chakra Petch"; font-weight:600; font-size:10.5px; letter-spacing:.02em; color:var(--sc); position:relative}
.pill span{font-family:"Chakra Petch"; font-size:10px; color:var(--tx2); position:relative}
.pill:active{transform:scale(.94)}
.pill.pulse{border-color:var(--sc)}
/* cabecera: tema */
.hbtns{display:flex; align-items:center; gap:8px}
#themeBtn{width:36px; height:36px; border:1px solid var(--line); border-radius:50%; color:var(--tx2); font-size:15px}
/* resumen semanal */
.semgrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.sem b{display:block; font-family:"Chakra Petch"; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums}
.sem s{display:block; text-decoration:none; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3); margin:2px 0 3px}
.sem i{font-style:normal; font-size:11px; font-variant-numeric:tabular-nums}
.sem i.up{color:var(--deen)} .sem i.dn{color:var(--social)} .sem i.eq{color:var(--tx3)}
/* mapa: lienzo oscuro propio en ambos temas */
#mapa{background:#0b0d15; border-radius:14px; padding:6px 2px; display:block; width:100%}
svg.mini{width:100%; max-width:250px; display:block; margin:8px auto; background:#0b0d15; border-radius:12px; padding:4px 2px}
/* récords + rendimiento */
.recs{margin:2px 0 4px}
.rec{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--tx2)}
.rec:last-child{border-bottom:0}
.rec small{color:var(--tx3); font-size:11px}
.rec b{margin-left:auto; font-family:"Chakra Petch"; color:var(--cuerpo); font-size:14px; white-space:nowrap}
.rend{display:grid; grid-template-columns:44px 1fr auto; gap:8px; padding:5px 0; font-size:12.5px; color:var(--tx2); border-bottom:1px solid var(--faint)}
.rend s{text-decoration:none; color:var(--tx3); font-family:"Chakra Petch"; font-size:11px}
.rend em{font-style:normal; color:var(--tx3)}
.setline{display:grid; grid-template-columns:26px 1fr auto; gap:8px; padding:3px 0; font-size:12.5px; color:var(--tx2); font-variant-numeric:tabular-nums}
.setline s{text-decoration:none; color:var(--tx3); font-family:"Chakra Petch"; font-size:10.5px}
.setline s.c{color:var(--cuerpo)} .setline s.d{color:var(--mente)}
.setline em{font-style:normal; color:var(--tx3)}
.setline.top span, .setline.top em{color:var(--tx); font-weight:600}

@media (prefers-reduced-motion: reduce){
  .float,.float2,.float3,.ripple,.glowPulse,.shimmer,.ffly,#breath,.view,#stars i.tw{animation:none !important}
  *{transition-duration:.01ms !important}
}