/* IntelliNotebook de Smart Learning — prototipo visual (datos de ejemplo) */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;src:url(assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;src:url(assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --cyan:#22d3ee;--violet:#7c3aed;--pink:#ec4899;
  --grad:linear-gradient(120deg,#22d3ee 0%,#7c3aed 55%,#ec4899 100%);
  /* gradiente fuerte para fondos con texto blanco: ≥4.5:1 en todos sus puntos */
  --grad-strong:linear-gradient(120deg,#0e7490 0%,#6d28d9 55%,#be185d 100%);
  --radius:16px;--font:"Plus Jakarta Sans",system-ui,sans-serif;
}
[data-theme="light"]{
  --bg-base:#f4f2ff;
  --surface:rgba(255,255,255,.9);--surface-solid:#ffffff;--surface-2:#f5f3ff;--page:#ffffff;--page-line:#e4e7f5;
  --text:#172033;--muted:#475569;--subtle:#5b6478;--border:rgba(124,58,237,.16);--border-strong:#c7c2e6;
  --accent:#0e7490;--accent-bg:#e6fbff;--violet-text:#6d28d9;--violet-bg:#f1ebff;
  --pink-text:#be185d;--pink-bg:#fdeef6;--ok:#047857;--ok-bg:#e8fbf3;--warn:#a16207;--warn-bg:#fff8e1;
  --danger:#b91c1c;--danger-bg:#fef0f0;--mark:#fde68a;--mark-text:#172033;
  --glow:0 0 0 1px rgba(124,58,237,.10),0 10px 30px -12px rgba(109,40,217,.28);
  --glow-strong:0 0 0 1px rgba(34,211,238,.45),0 0 22px -4px rgba(124,58,237,.45);
  --shadow-book:0 34px 70px -24px rgba(76,29,149,.45);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg-base:#0f1629;
  --surface:rgba(30,41,59,.86);--surface-solid:#1e293b;--surface-2:rgba(49,46,96,.45);--page:#1e293b;--page-line:#33415c;
  --text:#e2e8f0;--muted:#b9c3d6;--subtle:#a3afc4;--border:rgba(167,139,250,.22);--border-strong:#4b4f86;
  --accent:#67e8f9;--accent-bg:rgba(34,211,238,.13);--violet-text:#c4b5fd;--violet-bg:rgba(124,58,237,.22);
  --pink-text:#f9a8d4;--pink-bg:rgba(236,72,153,.16);--ok:#6ee7b7;--ok-bg:rgba(16,185,129,.15);--warn:#fcd34d;--warn-bg:rgba(245,158,11,.15);
  --danger:#fca5a5;--danger-bg:rgba(239,68,68,.16);--mark:#7c5e10;--mark-text:#fef3c7;
  --glow:0 0 0 1px rgba(167,139,250,.18),0 14px 34px -14px rgba(0,0,0,.7),0 0 26px -12px rgba(124,58,237,.5);
  --glow-strong:0 0 0 1px rgba(34,211,238,.55),0 0 26px -2px rgba(124,58,237,.6);
  --shadow-book:0 36px 80px -20px rgba(0,0,0,.8),0 0 60px -20px rgba(124,58,237,.55);
  color-scheme:dark;
}
/* ---------- Fondos seleccionables ---------- */
body{background-color:var(--bg-base);background-attachment:fixed}
[data-theme="light"][data-bg="aurora"] body,body[data-bgx="light-aurora"]{}
html[data-bg="aurora"] body{background-image:radial-gradient(700px 420px at 8% -5%,rgba(34,211,238,.28),transparent 70%),radial-gradient(700px 480px at 100% 10%,rgba(236,72,153,.22),transparent 70%),radial-gradient(800px 500px at 50% 120%,rgba(124,58,237,.3),transparent 70%)}
html[data-bg="bits"] body{background-image:radial-gradient(600px 400px at 85% 0%,rgba(124,58,237,.22),transparent 70%),linear-gradient(rgba(124,58,237,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.10) 1px,transparent 1px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect x='24' y='24' width='8' height='8' fill='%2322d3ee' opacity='.35'/%3E%3Crect x='88' y='56' width='8' height='8' fill='%23ec4899' opacity='.3'/%3E%3Crect x='56' y='96' width='8' height='8' fill='%237c3aed' opacity='.35'/%3E%3C/svg%3E");background-size:auto,16px 16px,16px 16px,120px 120px}
html[data-bg="espacio"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='1'/%3E%3Ccircle cx='140' cy='20' r='1.4' opacity='.8'/%3E%3Ccircle cx='90' cy='110' r='.9'/%3E%3Ccircle cx='200' cy='150' r='1.2' opacity='.7'/%3E%3Ccircle cx='40' cy='190' r='1.1' opacity='.6'/%3E%3Ccircle cx='170' cy='80' r='.8'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(600px 400px at 15% 20%,rgba(34,211,238,.25),transparent 70%),radial-gradient(700px 500px at 90% 80%,rgba(236,72,153,.25),transparent 70%),radial-gradient(900px 600px at 50% 50%,rgba(124,58,237,.25),transparent 75%)}
html[data-theme="light"][data-bg="espacio"] body{background-color:#eef0ff}
html[data-theme="light"][data-bg="espacio"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%237c3aed'%3E%3Cpath d='M20 26l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z' opacity='.35'/%3E%3Ccircle cx='140' cy='20' r='1.6' opacity='.35'/%3E%3Ccircle cx='90' cy='110' r='1.2' opacity='.4'/%3E%3Cpath d='M190 146l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2z' fill='%23ec4899' opacity='.4'/%3E%3Ccircle cx='40' cy='190' r='1.3' fill='%2322d3ee' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(600px 400px at 15% 20%,rgba(34,211,238,.25),transparent 70%),radial-gradient(700px 500px at 90% 80%,rgba(236,72,153,.18),transparent 70%)}
html[data-bg="papel"] body{background-color:#fbf6ea;background-image:radial-gradient(rgba(120,90,40,.10) 1px,transparent 1px),linear-gradient(90deg,transparent 60px,rgba(236,72,153,.22) 60px,rgba(236,72,153,.22) 62px,transparent 62px),repeating-linear-gradient(transparent 0 27px,rgba(14,116,144,.14) 27px 28px);background-size:6px 6px,auto,auto}
html[data-theme="dark"][data-bg="papel"] body{background-color:#1b2233;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,transparent 60px,rgba(236,72,153,.28) 60px,rgba(236,72,153,.28) 62px,transparent 62px),repeating-linear-gradient(transparent 0 27px,rgba(103,232,249,.09) 27px 28px)}
html[data-bg="neon"] body{background-image:linear-gradient(transparent 60%,rgba(236,72,153,.18)),repeating-linear-gradient(90deg,rgba(34,211,238,.10) 0 1px,transparent 1px 60px),repeating-linear-gradient(rgba(124,58,237,.10) 0 1px,transparent 1px 60px),radial-gradient(900px 500px at 50% 0%,rgba(124,58,237,.35),transparent 70%)}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
svg.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Top bar ---------- */
.topbar{height:58px;display:flex;align-items:center;gap:16px;padding:0 18px;background:var(--surface);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);opacity:.85}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:32px;height:32px;filter:drop-shadow(0 0 8px rgba(124,58,237,.45))}
.brand .wm{display:flex;flex-direction:column;line-height:1.05}
.brand .wm b{font-size:18px;font-weight:800;letter-spacing:-.025em}
.brand .wm b span{background:var(--grad-strong);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .brand .wm b span{background:var(--grad);-webkit-background-clip:text;background-clip:text}
.brand .wm small{font-size:11px;color:var(--muted);font-weight:600}
.nav{display:flex;gap:4px;margin-left:10px;background:var(--surface-2);padding:4px;border-radius:14px;border:1px solid var(--border)}
.nav a{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:700;font-size:13px;transition:.2s}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{background:var(--surface-solid);color:var(--text);box-shadow:var(--glow-strong)}
.nav a[aria-current="page"] svg{color:var(--violet-text)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;background:var(--grad-strong);flex:none}
.theme-toggle{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}
.theme-toggle button{border:0;background:transparent;display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted)}
.theme-toggle button[aria-pressed="true"]{background:var(--surface-solid);color:var(--text);box-shadow:var(--glow-strong)}
.bg-picker{position:relative}
.bg-menu{position:absolute;right:0;top:44px;width:270px;padding:12px;display:none;z-index:60}
.bg-menu.show{display:block}
.bg-menu .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.bg-menu button.bgopt{border:2px solid var(--border);border-radius:12px;height:58px;padding:0;position:relative;overflow:hidden}
.bg-menu button.bgopt span{position:absolute;left:0;right:0;bottom:0;font-size:10.5px;font-weight:800;background:rgba(15,22,41,.78);color:#fff;padding:2px}
.bg-menu button.bgopt[aria-pressed="true"]{border-color:transparent;box-shadow:0 0 0 2px #22d3ee,0 0 14px rgba(124,58,237,.6)}

.proto-tag{position:fixed;right:12px;bottom:10px;z-index:90;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-solid);border:1px dashed var(--border-strong);padding:4px 10px;border-radius:999px;pointer-events:none}

/* ---------- Generic ---------- */
.screen{display:none;height:calc(100vh - 58px);overflow:hidden}
.screen.active{display:flex}
.card{background:var(--surface);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--glow);position:relative}
.card.lum{border-color:transparent;background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,linear-gradient(120deg,rgba(34,211,238,.7),rgba(124,58,237,.6),rgba(236,72,153,.7)) border-box}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);background:var(--surface-solid);padding:8px 14px;border-radius:11px;font-weight:700;font-size:13px;transition:transform .15s,box-shadow .2s}
.btn:hover{box-shadow:var(--glow-strong);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn.primary{border:0;color:#fff;background:var(--grad-strong);box-shadow:0 8px 22px -8px rgba(124,58,237,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{box-shadow:0 0 0 2px rgba(34,211,238,.5),0 10px 26px -6px rgba(236,72,153,.6)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:9px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);white-space:nowrap}
.chip.cyan{background:var(--accent-bg);color:var(--accent);border-color:rgba(34,211,238,.35)}
.chip.violet{background:var(--violet-bg);color:var(--violet-text);border-color:rgba(124,58,237,.3)}
.chip.pink{background:var(--pink-bg);color:var(--pink-text);border-color:rgba(236,72,153,.3)}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(16,185,129,.3)}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(245,158,11,.35)}
.chip.danger{background:var(--danger-bg);color:var(--danger);border-color:rgba(239,68,68,.3)}
.chip svg.ic{width:12px;height:12px}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.grad-text{background:var(--grad-strong);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:var(--surface-solid);color:var(--text);border:1px solid transparent;background-clip:padding-box;box-shadow:var(--glow-strong);padding:10px 16px;border-radius:14px;font-weight:700;font-size:13px;z-index:100;transition:.25s;pointer-events:none;max-width:560px;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:5px}
.seg button[aria-pressed="true"]{background:var(--surface-solid);color:var(--text);box-shadow:var(--glow-strong)}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes floaty{50%{transform:translateY(-5px)}}
@keyframes shimmer{to{background-position:200% 0}}
.spark{animation:pop .45s ease-out}

/* ---------- 1. Portada ---------- */
#s-portada{padding:20px 26px;gap:26px;align-items:stretch}
.cover-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:34px}
.cover-intro{max-width:300px}
.cover-intro h1{font-size:31px;line-height:1.1;margin:6px 0 10px}
.cover-intro p{color:var(--muted);margin:0 0 14px;font-weight:500}
.layer-legend{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.layer-legend div{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.layer-legend .dot{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none}
.cover{position:relative;width:410px;height:560px;border-radius:8px 20px 20px 8px;overflow:hidden;box-shadow:var(--shadow-book),inset 10px 0 18px -10px rgba(0,0,0,.35);flex:none;transition:background .4s;animation:floaty 6s ease-in-out infinite}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.1) 60%,transparent);z-index:3}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);pointer-events:none;z-index:4}
.cover.bg-aurora{background:radial-gradient(260px 200px at 80% 85%,rgba(236,72,153,.55),transparent),radial-gradient(260px 220px at 20% 40%,rgba(34,211,238,.45),transparent),linear-gradient(160deg,#0b1d3a,#3b1c6e 60%,#5b1747)}
.cover.bg-mint{background:radial-gradient(240px 200px at 85% 80%,rgba(34,211,238,.5),transparent),linear-gradient(160deg,#064e5b,#0f766e 60%,#1e3a8a)}
.cover.bg-sunset{background:radial-gradient(240px 200px at 20% 80%,rgba(251,191,36,.35),transparent),linear-gradient(160deg,#7c2d12,#9d174d 55%,#4c1d95)}
.cover.bg-grid{background:#131b33;background-image:radial-gradient(220px 200px at 75% 75%,rgba(124,58,237,.5),transparent),linear-gradient(rgba(34,211,238,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.2) 1px,transparent 1px);background-size:auto,22px 22px,22px 22px}
.cover.bg-paper{background:#fff8ec;background-image:repeating-linear-gradient(transparent 0 27px,rgba(14,116,144,.16) 27px 28px)}
.cover.bg-paper .cv-title,.cover.bg-paper .cv-student,.cover.bg-paper .teacher-zone{color:#172033}
.cover.bg-paper .cv-student small{color:#475569}
.cover.bg-paper .teacher-zone span.pill{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.35)}
.inst-zone{position:absolute;left:16px;right:0;top:0;height:92px;background:rgba(255,255,255,.97);display:flex;align-items:center;gap:12px;padding:0 18px 0 20px;z-index:2}
.inst-zone::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.inst-zone .crest{width:52px;height:52px;flex:none}
.inst-zone b{display:block;color:#172033;font-size:16px}
.inst-zone small{color:#475569;font-size:11px;font-weight:600}
.lock{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#172033;background:#fde68a;padding:3px 8px;border-radius:999px;box-shadow:0 0 12px rgba(253,230,138,.8)}
.lock svg.ic{width:11px;height:11px}
.cover .teacher-zone{position:absolute;left:34px;right:20px;top:108px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:12px;font-weight:700;z-index:2}
.cover .teacher-zone span.pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.cv-title{position:absolute;left:30px;right:22px;top:176px;color:#fff;font-size:42px;line-height:1.04;font-weight:800;letter-spacing:-.035em;padding:8px 10px;z-index:2;word-break:break-word;text-shadow:0 0 24px rgba(124,58,237,.6);border-radius:12px;outline:2px dashed rgba(255,255,255,.35);outline-offset:-2px}
.cover.bg-paper .cv-title{text-shadow:none;outline-color:rgba(124,58,237,.4)}
.cv-title:focus{outline:2px solid #22d3ee}
.cv-student{position:absolute;left:34px;right:22px;bottom:26px;color:#fff;z-index:2;padding:8px 10px}
.cv-student b{font-size:16px;display:block}
.cv-student small{font-size:11.5px;color:#e2e8f0;font-weight:600}
.sticker-layer{position:absolute;left:16px;right:0;top:92px;bottom:0;z-index:1}
.sticker{position:absolute;font-size:40px;cursor:grab;user-select:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .15s;animation:pop .4s ease-out}
.sticker:hover{transform:scale(1.12) rotate(-6deg)}
.cover-panel{width:360px;flex:none;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.cover-panel h3{font-size:15px}
.layers{display:flex;flex-direction:column;gap:6px}
.layer{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);font-size:12px}
.layer b{display:block;font-size:13px}
.layer .lk{margin-left:auto}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.field input{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface-solid)}
.swatches{display:flex;gap:8px}
.swatches button{width:44px;height:44px;border-radius:12px;border:2px solid transparent;padding:0;transition:transform .15s}
.swatches button:hover{transform:translateY(-2px)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface-solid),0 0 0 4px #22d3ee,0 0 16px rgba(124,58,237,.6)}
.stickers{display:flex;flex-wrap:wrap;gap:6px}
.stickers button{width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);font-size:21px;transition:transform .15s}
.stickers button:hover{transform:scale(1.12);box-shadow:var(--glow-strong)}
.locked-note{font-size:12px;color:var(--text);display:flex;gap:8px;padding:10px;border-radius:12px;background:var(--warn-bg);border:1px solid rgba(245,158,11,.35)}
.locked-note svg{color:var(--warn)}

/* ---------- 2. Cuaderno ---------- */
.reader-side{width:228px;flex:none;border-right:1px solid var(--border);background:var(--surface);backdrop-filter:blur(14px);display:flex;flex-direction:column;overflow:hidden}
.reader-side .head{padding:14px 14px 8px}
.reader-side .head h3{font-size:14px}
.reader-side .head small{color:var(--muted);font-size:12px}
.filters{display:flex;gap:4px;padding:0 14px 10px;flex-wrap:wrap}
.filters button{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;font-size:11px;font-weight:700;padding:3px 9px;color:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--violet-bg);color:var(--violet-text);border-color:rgba(124,58,237,.4)}
.toc{overflow:auto;padding:0 10px 40px;flex:1}
.toc .sec{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding:10px 6px 5px}
.thumb{display:flex;gap:10px;align-items:center;width:100%;border:1px solid transparent;background:transparent;padding:5px 6px;border-radius:12px;text-align:left;transition:.15s}
.thumb:hover{background:var(--surface-2)}
.thumb.current{background:var(--violet-bg);border-color:rgba(124,58,237,.45);box-shadow:0 0 16px -6px rgba(124,58,237,.7)}
.thumb .mini{width:36px;height:48px;border-radius:5px;background:var(--page);border:1px solid var(--border-strong);flex:none;position:relative;overflow:hidden}
.thumb .mini i{position:absolute;left:5px;right:5px;height:2px;background:var(--page-line);border-radius:2px}
.thumb .mini em{position:absolute;left:5px;right:5px;top:6px;height:5px;border-radius:2px;background:var(--grad)}
.thumb .mini .bm{position:absolute;right:4px;top:0;width:7px;height:12px;background:var(--pink);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%);display:none}
.thumb.marked .mini .bm{display:block}
.thumb .t{font-size:12.5px;font-weight:700;line-height:1.2}
.thumb .t small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.thumb.hidden{display:none}
.reader-main{flex:1;display:flex;flex-direction:column;min-width:0}
.toolbar{height:54px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--surface);backdrop-filter:blur(14px)}
.tools{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:3px}
.tool{border:0;background:transparent;width:36px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted);position:relative;transition:.15s}
.tool:hover{color:var(--text);background:var(--surface-solid);transform:translateY(-1px)}
.tool[aria-pressed="true"]{background:var(--surface-solid);color:var(--violet-text);box-shadow:var(--glow-strong)}
.tool .sw{position:absolute;bottom:3px;left:11px;right:11px;height:3px;border-radius:2px}
.tool .tip{position:absolute;top:40px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;background:var(--surface-solid);color:var(--text);border:1px solid var(--border);padding:2px 7px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:30}
.tool:hover .tip{opacity:1}
.pager{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.pager .btn{padding:6px 8px}
.book-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0}
.book-wrap{width:880px;height:590px;position:relative}
.book-wrap.single{width:440px}
.book-glow{position:absolute;inset:-30px -40px;background:radial-gradient(closest-side,rgba(124,58,237,.30),transparent);filter:blur(10px);pointer-events:none}
.write-lock{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:20;display:none}
.write-lock.show{display:flex}
.search-pop{position:absolute;top:10px;right:20px;width:320px;z-index:30;padding:12px;display:none}
.search-pop.show{display:block}
.search-pop input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface-solid);margin:8px 0}
.search-pop .res{font-size:12.5px;padding:8px;border-radius:10px;background:var(--surface-2);margin-top:6px}
.search-pop .res mark{background:var(--mark);color:var(--mark-text);border-radius:3px;padding:0 2px}
.rec{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:none;z-index:25;align-items:center;gap:10px;padding:8px 14px}
.rec.show{display:flex}
.rec .pulse{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 10px #ef4444;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}

/* page content */
.page{background:var(--page);color:var(--text);overflow:hidden}
.pg{position:relative;width:100%;height:100%;padding:24px 26px 32px;display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.pg.left{background:linear-gradient(270deg,rgba(0,0,0,.08),transparent 28px)}
.pg.right{background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 28px)}
[data-theme="dark"] .pg.left{background:linear-gradient(270deg,rgba(0,0,0,.35),transparent 28px)}
[data-theme="dark"] .pg.right{background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 28px)}
.pg .topline{position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.pg h2{font-size:20px;line-height:1.15}
.pg h3{font-size:14px}
.pg p{margin:0}
.pg .foot{position:absolute;bottom:11px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:10.5px;color:var(--subtle);font-weight:600}
.pg .bookmark{position:absolute;top:-2px;right:24px;width:18px;height:34px;background:var(--grad-strong);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);display:none;filter:drop-shadow(0 0 6px rgba(236,72,153,.8))}
.pg.marked .bookmark{display:block;animation:pop .35s}
.pg mark,.pg .hl{background:var(--mark);color:var(--mark-text);border-radius:3px;padding:0 2px}
.sticky{position:absolute;width:150px;padding:10px;font-size:11.5px;background:#fef3c7;color:#422006;border-radius:4px 4px 14px 4px;box-shadow:0 10px 18px -6px rgba(0,0,0,.35);transform:rotate(2deg);z-index:4;animation:pop .35s}
.sticky b{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;color:#713f12}
.toc-page ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.toc-page li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);font-weight:700}
.toc-page li .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.toc-page li span.n{margin-left:auto;color:var(--subtle);font-size:11px}
.goal{border-radius:12px;padding:11px;background:var(--violet-bg);border:1px solid rgba(124,58,237,.3)}
.goal b{color:var(--violet-text)}
.xp{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--accent-bg);border:1px solid rgba(34,211,238,.35)}
.xp .bar{flex:1}
/* Cornell */
.cornell{flex:1;display:grid;grid-template-columns:116px 1fr;grid-template-rows:1fr auto;border:1.5px solid var(--border-strong);border-radius:12px;overflow:hidden;min-height:0}
.cornell .q{border-right:1.5px solid var(--border-strong);padding:8px;background:var(--accent-bg)}
.cornell .n{padding:8px}
.cornell .s{grid-column:1/3;border-top:1.5px solid var(--border-strong);padding:8px;background:var(--violet-bg)}
.cornell label{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px}
.cornell .s label{color:var(--violet-text)}
.cornell textarea{width:100%;border:0;background:transparent;resize:none;font-size:12px;line-height:22px;padding:0;background-image:repeating-linear-gradient(transparent 0 21px,var(--page-line) 21px 22px);outline:none}
.cornell .q textarea,.cornell .n textarea{height:calc(100% - 20px)}
.cornell .s textarea{height:88px}
.cornell .s:focus-within{box-shadow:inset 0 0 0 2px #22d3ee,inset 0 0 18px rgba(124,58,237,.25)}
.nopaste{font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:none;display:inline-flex;align-items:center;gap:4px;color:var(--danger);background:var(--danger-bg);padding:2px 7px;border-radius:999px}
.nopaste svg.ic{width:11px;height:11px}
.s-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:3px}
.paste-alert{font-size:11px;color:var(--danger);font-weight:800;display:none}
.paste-alert.show{display:block;animation:shake .3s}
/* video */
.video{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:radial-gradient(160px 120px at 75% 70%,rgba(236,72,153,.6),transparent),radial-gradient(160px 120px at 25% 30%,rgba(34,211,238,.5),transparent),linear-gradient(135deg,#0b1d3a,#3b1c6e);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 1px rgba(34,211,238,.45),0 10px 26px -10px rgba(124,58,237,.8)}
.video .play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;color:#6d28d9;box-shadow:0 0 0 8px rgba(255,255,255,.18),0 10px 30px rgba(0,0,0,.4);animation:floaty 3s ease-in-out infinite;border:0}
.video .vt{position:absolute;left:12px;top:10px;font-size:11px;font-weight:700}
.video .ytb{position:absolute;right:10px;top:9px;font-size:10px;font-weight:800;background:rgba(15,22,41,.75);padding:2px 7px;border-radius:999px}
.vbar{position:relative;height:6px;border-radius:3px;background:var(--page-line);margin:12px 2px 4px}
.vbar .prog{position:absolute;left:0;top:0;bottom:0;width:31%;border-radius:3px;background:var(--grad);box-shadow:0 0 10px rgba(124,58,237,.6)}
.vbar .mk{position:absolute;top:-7px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--page);border:2.5px solid var(--violet-text);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--violet-text);padding:0}
.vbar .mk.done{background:#6d28d9;border-color:#6d28d9;color:#fff;box-shadow:0 0 10px rgba(124,58,237,.8)}
.vtimes{display:flex;justify-content:space-between;font-size:10.5px;color:var(--subtle);font-weight:600}
.qcard{border:1.5px solid var(--border-strong);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1.5px solid var(--border);background:var(--surface-2);border-radius:10px;padding:7px 10px;font-size:12px;font-weight:600;transition:.15s}
.opt:hover{border-color:#22d3ee;box-shadow:0 0 12px -4px rgba(34,211,238,.8)}
.opt .k{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--page);border:1px solid var(--border-strong);font-size:10.5px;font-weight:800;flex:none}
.opt.right{border-color:#10b981;background:var(--ok-bg);color:var(--ok);box-shadow:0 0 14px -4px rgba(16,185,129,.8)}
.opt.wrong{border-color:#ef4444;background:var(--danger-bg);color:var(--danger)}
/* quiz game */
.game{flex:1;border-radius:16px;padding:13px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(var(--page),var(--page)) padding-box,var(--grad) border-box;border:2px solid transparent;min-height:0;box-shadow:0 0 22px -8px rgba(124,58,237,.7)}
.game-top{display:flex;align-items:center;gap:8px}
.score{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px}
.score .coin{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b);display:grid;place-items:center;color:#422006;font-size:12px;box-shadow:0 0 10px rgba(245,158,11,.7)}
.dots{display:flex;gap:5px}
.dots i{width:24px;height:6px;border-radius:3px;background:var(--page-line)}
.dots i.on{background:var(--grad)}
.dots i.ok{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.8)}
.dots i.ko{background:#ef4444}
.gq{font-size:14px;font-weight:800;line-height:1.35}
.explain{font-size:11.5px;padding:8px 10px;border-radius:10px;background:var(--surface-2);display:none}
.explain.show{display:block;animation:pop .3s}
.src{font-size:10.5px;color:var(--subtle);font-weight:600}
/* match */
.match{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.match button{border:1.5px solid var(--border);background:var(--surface-2);border-radius:11px;padding:8px;font-size:11.5px;font-weight:700;text-align:left;min-height:46px;transition:.15s}
.match button:hover{border-color:#22d3ee}
.match button.sel{border-color:var(--violet-text);background:var(--violet-bg);box-shadow:0 0 14px -4px rgba(124,58,237,.8)}
.match button.paired{border-color:#10b981;background:var(--ok-bg);color:var(--ok)}
.match button.bad{animation:shake .3s;border-color:#ef4444}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* feedback */
.work{border:1.5px solid var(--border);border-radius:12px;padding:12px;position:relative;font-size:12.5px;line-height:1.7}
.work .pen{position:absolute;pointer-events:none;overflow:visible}
.pin{position:absolute;width:22px;height:22px;border-radius:50% 50% 50% 0;background:#be185d;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;transform:rotate(-45deg);box-shadow:0 0 10px rgba(236,72,153,.7)}
.pin span{transform:rotate(45deg)}
.fb{border-radius:12px;padding:9px 11px;font-size:12px;display:flex;flex-direction:column;gap:3px}
.fb.teacher{background:var(--pink-bg);border:1px solid rgba(236,72,153,.3)}
.fb.ai{background:var(--accent-bg);border:1px solid rgba(34,211,238,.3)}
.fb > b{font-size:11px;display:flex;align-items:center;gap:6px}
.grade-card{display:flex;align-items:center;gap:14px;border-radius:14px;padding:11px 14px;color:#fff;background:var(--grad-strong);box-shadow:0 10px 24px -10px rgba(124,58,237,.9)}
.grade-card .big{font-size:34px;font-weight:800;line-height:1}
.grade-card small{display:block;font-size:11px}
.rubric{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:11.5px}
.rubric span:nth-child(even){font-weight:800}
.reflect{flex:1;border:1.5px dashed var(--border-strong);border-radius:12px;padding:10px}
.reflect textarea{width:100%;height:100%;border:0;background:transparent;resize:none;font-size:12px;line-height:22px;background-image:repeating-linear-gradient(transparent 0 21px,var(--page-line) 21px 22px);outline:none}
.voice{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--violet-bg);font-size:11.5px;font-weight:700}
.wave{display:flex;gap:2px;align-items:center;flex:1}
.wave i{width:3px;border-radius:2px;background:var(--violet-text)}

/* ---------- 3. Panel ---------- */
#s-panel{flex-direction:column}
.panel-head{display:flex;align-items:center;gap:12px;padding:10px 20px;background:var(--surface);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.panel-head h2{font-size:18px}
.panel-head select,.panel-head input{padding:7px 10px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface-solid);font-size:12.5px;font-weight:600}
.subtabs{display:flex;gap:4px;margin-left:6px}
.subtabs button{border:1px solid transparent;background:transparent;padding:7px 12px;border-radius:10px;font-weight:700;font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.subtabs button[aria-selected="true"]{background:var(--violet-bg);color:var(--violet-text);border-color:rgba(124,58,237,.4);box-shadow:0 0 16px -6px rgba(124,58,237,.8)}
.panel-body{flex:1;overflow:auto;padding:14px 20px 44px}
.sub{display:none}
.sub.active{display:block;animation:fadein .3s}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
.alerts{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.alert{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;font-size:12px;font-weight:700}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid rgba(245,158,11,.35)}
.alert.danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
.alert.info{background:var(--accent-bg);color:var(--accent);border:1px solid rgba(34,211,238,.35)}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.nb{padding:10px;display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.nb:hover{transform:translateY(-3px);box-shadow:var(--glow-strong)}
.nb.live{border-color:rgba(16,185,129,.45)}
.nb .who{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px}
.nb .who .avatar{width:24px;height:24px;font-size:10px}
.nb .st{width:9px;height:9px;border-radius:50%;margin-left:auto;flex:none}
.st.live{background:#10b981;box-shadow:0 0 8px #10b981;animation:pulse 1.6s infinite}
.st.idle{background:#f59e0b}
.st.done{background:#8b5cf6;box-shadow:0 0 8px #8b5cf6}
.nb .mini-page{height:100px;border-radius:8px;background:var(--page);border:1px solid var(--border);padding:8px;position:relative;overflow:hidden}
.nb .mini-page::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.nb .mini-page i{display:block;height:3px;border-radius:2px;background:var(--page-line);margin:5px 0}
.nb .mini-page i.c{background:rgba(34,211,238,.5)}
.nb .mini-page i.v{background:rgba(124,58,237,.45)}
.nb .mini-page .typing{position:absolute;bottom:6px;left:8px;font-size:9.5px;font-weight:800;color:var(--ok)}
.nb .meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-weight:600}
.bar{height:6px;border-radius:3px;background:var(--page-line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--grad);box-shadow:0 0 8px rgba(124,58,237,.6)}
.nb .flags{display:flex;gap:4px;flex-wrap:wrap;min-height:20px}
.projection .private{filter:blur(5px)}
.grade-layout{display:grid;grid-template-columns:1fr 330px;gap:14px}
.weights{display:flex;gap:8px;padding:10px 12px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
.weight{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 8px 5px 10px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border)}
.weight input{width:46px;padding:4px 6px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface-solid);text-align:right;font-weight:800}
.wsum{margin-left:auto;font-size:12px;font-weight:800}
.gb-card{padding:4px 6px 8px}
table.gb{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.gb th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--subtle);text-align:left;padding:8px;border-bottom:1px solid var(--border);font-weight:800}
table.gb td{padding:5px 8px;border-bottom:1px solid var(--border)}
table.gb tr{cursor:pointer}
table.gb tbody tr:hover td{background:var(--surface-2)}
table.gb tr.sel td{background:var(--violet-bg)}
.sug{font-weight:800;color:var(--accent)}
.final{width:56px;padding:5px 6px;border-radius:8px;border:1.5px solid var(--border-strong);background:var(--surface-solid);font-weight:800;text-align:right}
.final.adj{border-color:#ec4899;box-shadow:0 0 10px -2px rgba(236,72,153,.6)}
.pts{display:inline-flex;align-items:center;gap:3px}
.pts button{width:22px;height:22px;border-radius:7px;border:1px solid var(--border-strong);background:var(--surface-solid);font-weight:800;padding:0;line-height:1}
.pts button:hover{box-shadow:var(--glow-strong)}
.pts b{min-width:26px;text-align:center}
.pos{color:var(--ok)}.neg{color:var(--danger)}
.side{padding:14px;display:flex;flex-direction:column;gap:10px;align-self:start}
.formula{font-size:12px;background:var(--surface-2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:5px}
.formula div{display:flex;justify-content:space-between}
.formula .tot{border-top:1px solid var(--border-strong);padding-top:6px;font-weight:800}
.log{font-size:11.5px;display:flex;flex-direction:column;gap:6px}
.log div{padding:7px 9px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)}
.reason{display:none;gap:6px;align-items:center;margin-top:4px}
.reason.show{display:flex}
.reason input,.reason select{padding:5px 7px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface-solid);font-size:11.5px}
.switch{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.switch input{appearance:none;width:36px;height:21px;border-radius:999px;background:var(--border-strong);position:relative;cursor:pointer;transition:.2s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked{background:var(--grad-strong);box-shadow:0 0 10px rgba(124,58,237,.6)}
.switch input:checked::after{left:18px}
/* correction */
.corr{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.corr .col{padding:14px;display:flex;flex-direction:column;gap:10px}
.corr h3{font-size:15px;display:flex;align-items:center;gap:8px}
.corr .num{width:26px;height:26px;border-radius:9px;background:var(--grad-strong);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;box-shadow:0 0 12px rgba(124,58,237,.6)}
.corr-page{display:grid;grid-template-columns:1fr 250px;gap:12px}
.spage{background:var(--page);border:1px solid var(--border);border-radius:12px;padding:14px;position:relative;font-size:12.5px;line-height:1.75}
.spage::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:12px 12px 0 0;background:var(--grad)}
.spage .lbl{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--violet-text)}
.sugg{border:1px solid var(--border);border-radius:12px;padding:9px 10px;font-size:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2);transition:.2s}
.sugg.accepted{border-color:#10b981;background:var(--ok-bg)}
.sugg.dismissed{opacity:.55}
.sugg .acts{display:flex;gap:5px}
.sugg textarea{width:100%;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-solid);font-size:12px;padding:6px;resize:vertical}
.steps{display:flex;gap:6px}
.steps .stp{flex:1;font-size:11px;font-weight:700;color:var(--muted);padding:7px 8px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);display:flex;gap:6px;align-items:center}
.steps .stp b{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--border-strong);color:var(--text);font-size:10px;flex:none}
.steps .stp.on{color:var(--violet-text);background:var(--violet-bg);border-color:rgba(124,58,237,.45);box-shadow:0 0 14px -6px rgba(124,58,237,.9)}
.steps .stp.on b,.steps .stp.done b{background:#6d28d9;color:#fff}
.steps .stp.done{color:var(--ok)}
.photo-flow{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:start}
.photo{border-radius:10px;overflow:hidden;position:relative;box-shadow:0 14px 28px -12px rgba(0,0,0,.5);transform:rotate(-1.5deg);background:#fdfcf7}
.photo .scan{position:absolute;left:0;right:0;height:40px;background:linear-gradient(transparent,rgba(34,211,238,.55),transparent);animation:scan 1.6s linear infinite;display:none}
.photo.scanning .scan{display:block}
@keyframes scan{from{top:-40px}to{top:100%}}
.idbox{position:absolute;border:2px solid #22d3ee;border-radius:4px;display:none;box-shadow:0 0 10px #22d3ee}
.photo.found .idbox{display:block}
.flow-panel{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center}
.kv span{color:var(--muted);font-size:12px;font-weight:600}
.kv select,.kv input{padding:5px 8px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface-solid);font-weight:700;font-size:12px}
.hidden{display:none !important}

/* ---------- 4. Asistente ---------- */
#s-asistente{gap:14px;padding:14px}
.chat{width:350px;flex:none;display:flex;flex-direction:column;overflow:hidden}
.chat-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.ai-orb{width:36px;height:36px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 0 18px rgba(124,58,237,.7);animation:floaty 4s ease-in-out infinite}
.chat-head b{display:block;font-size:13.5px}
.chat-head small{font-size:11px;color:var(--muted)}
.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:92%;padding:9px 12px;border-radius:15px;font-size:12.5px;line-height:1.5;animation:fadein .3s}
.msg.me{align-self:flex-end;background:var(--grad-strong);color:#fff;border-bottom-right-radius:4px;box-shadow:0 8px 18px -10px rgba(124,58,237,.9)}
.msg.ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.ai ul{margin:5px 0 0;padding-left:17px}
.msg .actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--violet-text);animation:pulse 1s infinite}
.typing-dots i:nth-child(2){animation-delay:.2s}.typing-dots i:nth-child(3){animation-delay:.4s}
.chat-input{padding:10px;border-top:1px solid var(--border)}
.sugs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.sugs button{font-size:11px;font-weight:700;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:4px 9px;color:var(--muted)}
.sugs button:hover{color:var(--text);border-color:#22d3ee}
.inbox{display:flex;gap:6px}
.inbox input{flex:1;padding:9px 11px;border-radius:11px;border:1px solid var(--border-strong);background:var(--surface-solid);font-size:12.5px}
.studio{flex:1;display:grid;grid-template-columns:1fr 390px;gap:14px;min-width:0;overflow:hidden}
.studio-left{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding-bottom:30px}
.gallery{padding:12px 14px}
.gallery .hd,.bank .hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.gallery h3,.bank h3{font-size:14px}
.tpls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tpl{border:1.5px solid var(--border);background:var(--surface-2);border-radius:13px;padding:8px 9px;display:flex;align-items:center;gap:9px;text-align:left;transition:transform .15s,box-shadow .2s}
.tpl:hover{transform:translateY(-2px);box-shadow:var(--glow-strong)}
.tpl[aria-pressed="true"]{border-color:transparent;background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,var(--grad) border-box;box-shadow:0 0 18px -4px rgba(124,58,237,.7)}
.tpl .ti{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center}
.tpl .ti svg{width:28px;height:28px}
.tpl:hover .ti svg{animation:pop .4s}
.tpl b{font-size:12.5px;display:block}
.tpl small{font-size:10.5px;color:var(--muted);line-height:1.2;display:block}
.bank{padding:12px 14px}
.bank .flt{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.bank select{padding:5px 8px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface-solid);font-size:12px;font-weight:600}
.bq{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:12px;border:1px solid var(--border);margin-top:6px;font-size:12px;background:var(--surface-2)}
.bq input{margin-top:3px;accent-color:#6d28d9;width:15px;height:15px}
.bq .idb{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--accent);font-weight:700}
.preview{display:flex;flex-direction:column;overflow:hidden}
.draft-ribbon{display:flex;align-items:center;gap:8px;padding:9px 14px;background:repeating-linear-gradient(-45deg,var(--warn-bg) 0 12px,transparent 12px 24px),var(--surface-solid);color:var(--warn);font-weight:800;font-size:12px;border-bottom:1px solid var(--border);border-radius:16px 16px 0 0}
.draft-ribbon.ok{background:var(--ok-bg);color:var(--ok)}
.pv-body{padding:12px 14px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.pv-device{border-radius:16px;padding:12px;background:var(--page);border:1px solid var(--border)}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.pv-foot{padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.modal-bg{position:fixed;inset:0;background:rgba(15,22,41,.6);backdrop-filter:blur(3px);display:none;place-items:center;z-index:95}
.modal-bg.show{display:grid}
.modal{width:440px;padding:20px;display:flex;flex-direction:column;gap:12px;animation:pop .3s}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media (max-width:1100px){.mosaic{grid-template-columns:repeat(4,1fr)}.studio{grid-template-columns:1fr}.grade-layout,.corr{grid-template-columns:1fr}.cover-intro{display:none}}
/* --- ajustes tras revisión visual --- */
.video svg.circle-art{position:absolute;right:18px;bottom:16px;opacity:.6}
.cornell .s{position:relative}
.paste-alert{position:absolute;left:8px;right:8px;top:30px;background:var(--danger-bg);border:1px solid rgba(239,68,68,.45);padding:4px 8px;border-radius:8px;backdrop-filter:blur(6px);z-index:2}
#ptsForm{flex-wrap:wrap}
#ptsForm select{flex:1;min-width:0}
#ptsForm input{flex:1 1 120px}
.chat{width:320px}
.studio{grid-template-columns:1fr 370px}
.tpl{flex-direction:column;align-items:flex-start;gap:6px;padding:9px 10px}
.tpl b{white-space:nowrap}
.spage .pen{position:absolute;pointer-events:none;overflow:visible}
.proto-tag{position:static;pointer-events:auto;white-space:nowrap}