/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
    :root {
      /* Backgrounds — layered depth */
      --bg: #060910;
      --bg2: #0a0e18;
      --bg3: #0f1420;
      /* Text — clear hierarchy */
      --ink: #f0f4f8;
      --ink2: #bdc8d4;
      --dim: #7d8a98;
      --faint: #6b7a8c;
      /* Borders & Glass — enhanced glassmorphism */
      --line: rgba(255, 255, 255, .07);
      --line2: rgba(255, 255, 255, .13);
      --glass: rgba(255, 255, 255, .04);
      --glass2: rgba(255, 255, 255, .065);
      --glass3: rgba(255, 255, 255, .09);
      --glass4: rgba(255, 255, 255, .12);
      /* Accent palette */
      --teal: #2dd4bf;
      --glow: rgba(45, 212, 191, .30);
      --glow2: rgba(45, 212, 191, .12);
      --cyan: #38bdf8;
      --coral: #fb7185;
      --amber: #fbbf24;
      --emerald: #34d399;
      --violet: #a78bfa;
      --blue: #60a5fa;
      --rose: #f87171;
      /* Subject colors */
      --msk: #f87171;
      --cardio: #38bdf8;
      --neuro: #a78bfa;
      --agentes: #fbbf24;
      --fisio: #34d399;
      --tesis: #60a5fa;
      --integra: #2dd4bf;
      --anat: #ec4899;
      --fisiosist: #22d3ee;
      --biomec: #f59e0b;
      --evalneuro: #818cf8;
      --evalmsk: #fb7185;
      --evalcardio: #5eead4;
      --admin: #e879f9;
      /* Radius scale */
      --r1: 10px;
      --r2: 16px;
      --r3: 24px;
      --r4: 34px;
      /* Shadows — soft depth layers */
      --sh: 0 20px 60px -16px rgba(0, 0, 0, .65), 0 4px 16px -4px rgba(0, 0, 0, .3);
      --sh-sm: 0 8px 28px -8px rgba(0, 0, 0, .5);
      --sh-glow: 0 12px 36px -10px var(--glow);
      /* Easing & transition */
      --e: cubic-bezier(.22, 1, .36, 1);
      --t: .28s var(--e);
      /* Typography */
      --fd: "Bricolage Grotesque", serif;
      --ff: "Sora", system-ui, sans-serif;
      --fm: "JetBrains Mono", monospace
    }

    :root.light-theme {
      --bg: #ffffff;
      --bg2: #f8fafc;
      --bg3: #f1f5f9;
      --ink: #0f172a;
      --ink2: #334155;
      --dim: #64748b;
      --faint: #7e8fa4;
      --line: rgba(0, 0, 0, .08);
      --line2: rgba(0, 0, 0, .14);
      --glass: rgba(0, 0, 0, .03);
      --glass2: rgba(0, 0, 0, .05);
      --glass3: rgba(0, 0, 0, .07);
      --glass4: rgba(0, 0, 0, .09);
      --sh: 0 10px 40px -10px rgba(0,0,0,.08), 0 4px 10px -4px rgba(0,0,0,.04);
      --sh-sm: 0 4px 12px -4px rgba(0,0,0,.05);
      --glow: rgba(45, 212, 191, .4);
      --glow2: rgba(45, 212, 191, .15);
    }

    /* ── TEMA COSMOS ── */
    :root[data-theme="cosmos"] {
      --bg: #0F0F1A;
      --bg2: #161628;
      --bg3: #1A1A35;
      --ink: #F0EEFF;
      --ink2: #A89EC0;
      --dim: #8780AE;
      --faint: #6860A0;
      --line: rgba(124, 58, 237, .15);
      --line2: rgba(124, 58, 237, .25);
      --glass: rgba(124, 58, 237, .06);
      --glass2: rgba(124, 58, 237, .10);
      --glass3: rgba(124, 58, 237, .14);
      --glass4: rgba(124, 58, 237, .18);
      --teal: #A78BFA;
      --cyan: #7C3AED;
      --glow: rgba(124, 58, 237, .35);
      --glow2: rgba(124, 58, 237, .12);
      --sh: 0 20px 60px -16px rgba(124, 58, 237, .25), 0 4px 16px -4px rgba(0, 0, 0, .3);
      --sh-glow: 0 12px 36px -10px rgba(124, 58, 237, .3);
    }

    /* ── TEMA CLÍNICO ── */
    :root[data-theme="clinico"] {
      --bg: #0D1B2A;
      --bg2: #112234;
      --bg3: #1A3A4A;
      --ink: #E8F4F8;
      --ink2: #8BAFC0;
      --dim: #6898A8;
      --faint: #4D7A8A;
      --line: rgba(0, 212, 170, .15);
      --line2: rgba(0, 212, 170, .25);
      --glass: rgba(0, 212, 170, .06);
      --glass2: rgba(0, 212, 170, .10);
      --glass3: rgba(0, 212, 170, .14);
      --glass4: rgba(0, 212, 170, .18);
      --teal: #00D4AA;
      --cyan: #00A896;
      --glow: rgba(0, 212, 170, .35);
      --glow2: rgba(0, 212, 170, .12);
      --sh: 0 20px 60px -16px rgba(0, 212, 170, .2), 0 4px 16px -4px rgba(0, 0, 0, .3);
      --sh-glow: 0 12px 36px -10px rgba(0, 212, 170, .3);
    }

    /* ── TEMA SOLAR ── */
    :root[data-theme="solar"] {
      --bg: #FFF8F0;
      --bg2: #FFFFFF;
      --bg3: #FFF2E6;
      --ink: #1A1208;
      --ink2: #6B4F38;
      --dim: #7A5A38;
      --faint: #8A6A48;
      --line: rgba(232, 96, 44, .12);
      --line2: rgba(232, 96, 44, .20);
      --glass: rgba(232, 96, 44, .04);
      --glass2: rgba(232, 96, 44, .07);
      --glass3: rgba(232, 96, 44, .10);
      --glass4: rgba(232, 96, 44, .13);
      --teal: #E8602C;
      --cyan: #FF8C55;
      --glow: rgba(232, 96, 44, .3);
      --glow2: rgba(232, 96, 44, .10);
      --sh: 0 10px 40px -10px rgba(232, 96, 44, .1), 0 4px 10px -4px rgba(0, 0, 0, .05);
      --sh-glow: 0 12px 36px -10px rgba(232, 96, 44, .15);
    }

    /* ── TEMA MATRIX ── */
    :root[data-theme="matrix"] {
      --bg: #0A0A0A;
      --bg2: #111111;
      --bg3: #1A1A1A;
      --ink: #E6EDF3;
      --ink2: #8B949E;
      --dim: #6E767F;
      --faint: #4E5660;
      --line: rgba(57, 211, 83, .12);
      --line2: rgba(57, 211, 83, .22);
      --glass: rgba(57, 211, 83, .05);
      --glass2: rgba(57, 211, 83, .09);
      --glass3: rgba(57, 211, 83, .13);
      --glass4: rgba(57, 211, 83, .17);
      --teal: #39D353;
      --cyan: #2EA043;
      --glow: rgba(57, 211, 83, .35);
      --glow2: rgba(57, 211, 83, .12);
      --sh: 0 20px 60px -16px rgba(57, 211, 83, .15), 0 4px 16px -4px rgba(0, 0, 0, .4);
      --sh-glow: 0 12px 36px -10px rgba(57, 211, 83, .25);
    }
    :root[data-theme="matrix"] .vt,
    :root[data-theme="matrix"] .htitle { font-family: "JetBrains Mono", monospace; }
    :root[data-theme="matrix"] .vt::after { content: "▋"; animation: blink 1s steps(1) infinite; margin-left: 2px; }
    @keyframes blink { 50% { opacity: 0; } }

    /* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent
    }

    html {
      scroll-behavior: smooth;
      text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%
    }

    body {
      font-family: var(--ff);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.65;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility
    }

    body.lock {
      overflow: hidden
    }

    img,
    svg {
      display: block;
      max-width: 100%
    }

    /* Film grain & vignette overlays */
    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9998;
      opacity: .025;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    .vig {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9997;
      background: radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55) 100%)
    }

    /* Selection & Scrollbar */
    ::selection {
      background: var(--teal);
      color: #06231f
    }

    ::-webkit-scrollbar {
      width: 9px;
      height: 9px
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: var(--glass3);
      border-radius: 20px;
      border: 2.5px solid var(--bg)
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--glow)
    }

    /* ═══════════════════════════════════════════════════════════
   HERO CINEMA
   ═══════════════════════════════════════════════════════════ */
    #cinema {
      position: relative;
      height: 320vh;
      z-index: 1
    }

    .stage {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      background: radial-gradient(120% 120% at 50% 30%, #0c1320, var(--bg) 60%, #04060a)
    }

    .scene {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1400px
    }

    .layer {
      position: absolute;
      inset: -20%;
      will-change: transform
    }

    .dot {
      position: absolute;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 14px var(--glow);
      transition: opacity .6s
    }

    .core {
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      width: min(74vmin, 720px);
      height: min(74vmin, 720px);
      will-change: transform, opacity
    }

    .core svg {
      width: 100%;
      height: 100%;
      overflow: visible
    }

    .cglow {
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      width: 58vmin;
      height: 58vmin;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(45, 212, 191, .20), transparent 65%);
      filter: blur(28px);
      will-change: opacity
    }

    /* Hero text */
    .hcopy {
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      text-align: center;
      z-index: 6;
      width: min(92vw, 1000px);
      will-change: transform, opacity;
      padding: 0 16px
    }

    .kick {
      font-family: var(--fm);
      letter-spacing: .4em;
      text-transform: uppercase;
      font-size: clamp(9px, 1.2vw, 11px);
      color: var(--teal);
      margin-bottom: 20px;
      opacity: .85
    }

    .htitle {
      font-family: var(--fd);
      font-weight: 800;
      line-height: .90;
      letter-spacing: -.03em;
      font-size: clamp(42px, 10vw, 148px);
      background: linear-gradient(180deg, #fff 0%, #c8dce3 50%, #6a8593 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 10px 50px rgba(45, 212, 191, .15))
    }

    .htitle .pro {
      background: linear-gradient(120deg, var(--teal), var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .hsub {
      margin-top: clamp(16px, 3vw, 24px);
      font-size: clamp(14px, 1.5vw, 20px);
      color: var(--ink2);
      font-weight: 300;
      max-width: 600px;
      margin-inline: auto;
      line-height: 1.7
    }

    .hmeta {
      margin-top: clamp(20px, 3vw, 30px);
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center
    }

    .hpill {
      font-family: var(--fm);
      font-size: clamp(9px, 1vw, 10.5px);
      letter-spacing: .06em;
      padding: 7px 14px;
      border-radius: 40px;
      border: 1px solid var(--line2);
      background: var(--glass);
      color: var(--ink2);
      backdrop-filter: blur(12px);
      transition: var(--t)
    }

    /* Hero feature cards */
    .beat2 {
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      width: min(94vw, 1140px);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      opacity: 0;
      will-change: transform, opacity;
      z-index: 7
    }

    .b2c {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: clamp(18px, 3vw, 24px);
      backdrop-filter: blur(24px) saturate(130%);
      text-align: left;
      transition: var(--t)
    }

    .b2c:hover {
      background: var(--glass2);
      border-color: var(--line2);
      transform: translateY(-3px)
    }

    .b2c .ic {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      background: var(--glow2);
      border: 1px solid rgba(45, 212, 191, .25)
    }

    .b2c h4 {
      font-family: var(--fd);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 6px
    }

    .b2c p {
      font-size: 13px;
      color: var(--dim);
      font-weight: 300;
      line-height: 1.6
    }

    /* Scroll cue & Enter */
    .cue {
      position: absolute;
      bottom: 32px;
      left: 50%;
      translate: -50% 0;
      z-index: 8;
      text-align: center;
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .3em;
      color: var(--dim);
      text-transform: uppercase
    }

    .cue .m {
      width: 23px;
      height: 37px;
      border: 1.5px solid var(--line2);
      border-radius: 14px;
      margin: 0 auto 11px;
      position: relative
    }

    .cue .m::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 7px;
      translate: -50% 0;
      width: 3px;
      height: 7px;
      border-radius: 3px;
      background: var(--teal);
      animation: wh 1.6s var(--e) infinite
    }

    @keyframes wh {
      0% {
        opacity: 0;
        transform: translate(-50%, 0)
      }

      30% {
        opacity: 1
      }

      60% {
        opacity: 1;
        transform: translate(-50%, 11px)
      }

      100% {
        opacity: 0;
        transform: translate(-50%, 16px)
      }
    }

    .enter {
      position: absolute;
      left: 50%;
      bottom: 36px;
      translate: -50% 0;
      z-index: 9;
      opacity: 0;
      pointer-events: none;
      padding: 16px 38px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      font-family: var(--ff);
      font-weight: 600;
      font-size: 15px;
      color: #04201c;
      background: linear-gradient(120deg, var(--teal), var(--cyan));
      box-shadow: var(--sh-glow);
      transition: transform .35s var(--e), box-shadow .35s
    }

    .enter.show {
      opacity: 1;
      pointer-events: auto;
      animation: ep .6s var(--e)
    }

    .enter:hover {
      transform: translate(-50%, -4px) scale(1.04);
      box-shadow: 0 20px 50px -10px var(--glow)
    }

    @keyframes ep {
      from {
        opacity: 0;
        transform: translate(-50%, 20px)
      }

      to {
        opacity: 1;
        transform: translate(-50%, 0)
      }
    }

    .cprog {
      position: fixed;
      top: 0;
      left: 0;
      height: 2.5px;
      width: 0;
      z-index: 9999;
      background: linear-gradient(90deg, var(--teal), var(--cyan));
      box-shadow: 0 0 12px var(--glow)
    }

    .skip {
      position: fixed;
      top: env(safe-area-inset-top, 20px);
      right: 22px;
      z-index: 9990;
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .12em;
      color: var(--dim);
      background: var(--glass);
      border: 1px solid var(--line);
      padding: 8px 16px;
      border-radius: 30px;
      cursor: pointer;
      backdrop-filter: blur(14px);
      text-transform: uppercase;
      transition: var(--t)
    }

    .skip:hover {
      color: var(--ink);
      border-color: var(--line2);
      background: var(--glass2)
    }

    /* ═══════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════ */
    #app {
      position: relative;
      z-index: 5;
      background: var(--bg);
      min-height: 100vh;
      display: none;
      opacity: 0
    }

    #app.live {
      display: block;
      animation: ai .9s var(--e) forwards
    }

    @keyframes ai {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ─── Sticky Navbar (Glassmorphism) ─── */
    .top {
      position: sticky;
      top: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 12px clamp(14px, 4vw, 38px);
      background: rgba(6, 9, 16, .65);
      backdrop-filter: blur(28px) saturate(150%);
      border-bottom: 1px solid var(--line);
      transition: background .3s
    }

    .brand {
      position: absolute;
      left: clamp(14px, 4vw, 38px);
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      flex-shrink: 0;
      transition: opacity .2s
    }

    .brand:hover {
      opacity: .85
    }

    /* Theme selector */
    .theme-selector { display: flex; gap: 4px; align-items: center }
    .theme-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all .2s; opacity: .4; padding: 0; display: grid; place-items: center }
    .theme-btn:hover { opacity: .8; transform: scale(1.15) }
    .theme-btn.active { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px var(--glow) }

    .bm {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--teal), var(--cyan));
      display: grid;
      place-items: center;
      box-shadow: 0 6px 20px -6px var(--glow);
      transition: transform .3s var(--e)
    }

    .brand:hover .bm {
      transform: scale(1.08)
    }

    .bm svg {
      width: 20px;
      height: 20px
    }

    .bn {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 17px;
      letter-spacing: -.01em
    }

    .bn b {
      color: var(--teal)
    }

    .nsp {
      display: none;
    }

    .nav {
      display: flex;
      gap: 3px;
      background: var(--glass);
      padding: 5px;
      border-radius: 40px;
      border: 1px solid var(--line);
      backdrop-filter: blur(10px)
    }

    .nav button {
      background: none;
      border: none;
      color: var(--dim);
      font-family: var(--ff);
      font-size: 13px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 30px;
      cursor: pointer;
      transition: all .25s var(--e);
      white-space: nowrap;
      position: relative
    }

    .nav button:hover {
      color: var(--ink);
      background: var(--glass)
    }

    .nav button.on {
      background: var(--glass3);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px var(--line2), 0 2px 8px rgba(0, 0, 0, .2)
    }

    .nstat {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--fm);
      font-size: 13px;
      padding: 8px 13px;
      border-radius: 30px;
      background: var(--glass);
      border: 1px solid var(--line);
      backdrop-filter: blur(8px);
      transition: var(--t)
    }

    .nstat:hover {
      background: var(--glass2)
    }

    .nstat svg {
      width: 15px;
      height: 15px
    }

    .nstat.s {
      color: var(--amber)
    }

    .nstat.x {
      color: var(--teal)
    }

    .mtog {
      display: none;
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: 12px;
      width: 44px;
      height: 44px;
      cursor: pointer;
      color: var(--ink);
      transition: var(--t);
      place-items: center
    }

    .mtog:hover {
      background: var(--glass2);
      border-color: var(--line2)
    }

    .mtog:active {
      transform: scale(.94)
    }

    /* ─── Main Content ─── */
    main {
      max-width: 1320px;
      margin: 0 auto;
      padding: clamp(20px, 4vw, 42px) clamp(14px, 4vw, 38px) clamp(80px, 12vh, 120px)
    }

    .view {
      display: none;
      animation: vi .5s var(--e)
    }

    .view.show {
      display: block
    }

    @keyframes vi {
      from {
        opacity: 0;
        transform: translateY(18px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .vhead {
      margin-bottom: 32px
    }

    .eb {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 12px;
      opacity: .9
    }

    .vt {
      font-family: var(--fd);
      font-weight: 800;
      letter-spacing: -.03em;
      font-size: clamp(26px, 4.5vw, 50px);
      line-height: 1.05
    }

    .vd {
      color: var(--dim);
      font-weight: 300;
      margin-top: 12px;
      max-width: 680px;
      font-size: 15px;
      line-height: 1.7
    }

    .back {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      color: var(--dim);
      background: none;
      border: none;
      cursor: pointer;
      margin-bottom: 18px;
      font-family: var(--ff);
      transition: color .2s, gap .2s
    }

    .back:hover {
      color: var(--teal);
      gap: 10px
    }

    .back svg {
      width: 16px;
      height: 16px;
      transition: transform .2s
    }

    .back:hover svg {
      transform: translateX(-3px)
    }

    /* ═══════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════ */
    .greet {
      background: radial-gradient(120% 140% at 88% 0%, rgba(45, 212, 191, .12), transparent 50%),
        linear-gradient(180deg, var(--bg2), var(--bg3));
      border: 1px solid var(--line);
      border-radius: var(--r4);
      padding: clamp(24px, 4vw, 44px);
      position: relative;
      overflow: hidden;
      margin-bottom: 24px;
      backdrop-filter: blur(6px)
    }

    .greet::after {
      content: "";
      position: absolute;
      right: -60px;
      top: -60px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--glow), transparent 70%);
      filter: blur(24px);
      opacity: .4;
      animation: pulse 4s ease-in-out infinite alternate
    }

    @keyframes pulse {
      0% {
        opacity: .3;
        transform: scale(1)
      }

      100% {
        opacity: .5;
        transform: scale(1.1)
      }
    }

    .gt {
      font-family: var(--fm);
      font-size: 12px;
      letter-spacing: .12em;
      color: var(--dim);
      text-transform: uppercase
    }

    .gtit {
      font-family: var(--fd);
      font-weight: 800;
      font-size: clamp(26px, 4.5vw, 46px);
      margin: 10px 0 8px;
      letter-spacing: -.02em;
      line-height: 1.05
    }

    .gtit span {
      color: var(--teal)
    }

    .gsub {
      color: var(--ink2);
      font-weight: 300;
      font-size: 15px;
      max-width: 560px;
      line-height: 1.7
    }

    /* Stats Grid */
    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 24px
    }

    /* Dashboard Search */
    .dash-search-wrap { margin-bottom: 20px }
    .searchBox {
      display: flex;
      width: 100%;
      max-width: 400px;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: 50px;
      position: relative;
      transition: all .25s var(--e);
      backdrop-filter: blur(10px);
      cursor: pointer;
    }
    .searchBox:hover {
      border-color: var(--line2);
      background: var(--glass3);
    }
    .searchButton {
      color: white;
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--gradient-2, linear-gradient(90deg, #2AF598 0%, #009EFD 100%));
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
      cursor: pointer;
    }
    .searchButton:hover {
      color: #fff;
      background: #1A1A1A;
      box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px;
      transform: translateY(-50%) scale(1.08);
    }
    .searchButton:active {
      box-shadow: none;
      transform: translateY(-50%) scale(0.98);
    }
    .searchButton svg {
      width: 22px;
      height: 22px;
    }
    .searchInput {
      border: none;
      background: none;
      outline: none;
      color: var(--ink);
      font-size: 14.5px;
      width: 100%;
      padding: 14px 56px 14px 20px;
      font-family: var(--ff);
      cursor: pointer;
    }
    .searchInput::placeholder {
      color: var(--dim);
    }

    .stat {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: 20px;
      transition: all .32s var(--e);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden
    }

    .stat::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      background: radial-gradient(120% 120% at 30% 0%, var(--glow2), transparent 60%);
      transition: opacity .3s
    }

    .stat:hover {
      border-color: var(--line2);
      transform: translateY(-4px);
      box-shadow: var(--sh-sm)
    }

    .stat:hover::before {
      opacity: 1
    }

    .stat .l {
      font-size: 12px;
      color: var(--dim);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative
    }

    .stat .l svg {
      width: 15px;
      height: 15px
    }

    .stat .v {
      font-family: var(--fd);
      font-weight: 800;
      font-size: clamp(28px, 4vw, 36px);
      margin-top: 8px;
      line-height: 1;
      position: relative
    }

    .stat .v small {
      font-size: 14px;
      color: var(--dim);
      font-weight: 400;
      font-family: var(--ff)
    }

    /* Dashboard columns */
    .dcols {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 20px
    }

    .panel {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r4);
      padding: 24px;
      backdrop-filter: blur(6px)
    }

    .ph {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px
    }

    .ph h3 {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: -.01em
    }

    .ph .more {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .08em;
      color: var(--teal);
      cursor: pointer;
      text-transform: uppercase;
      background: none;
      border: none;
      transition: color .2s;
      padding: 4px 0
    }

    .ph .more:hover {
      color: var(--cyan)
    }

    /* Subject Cards */
    .sgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 15px
    }

    .scard {
      position: relative;
      border-radius: var(--r3);
      padding: 22px;
      cursor: pointer;
      overflow: hidden;
      background: var(--glass);
      border: 1px solid var(--line);
      transition: all .35s var(--e);
      min-height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      backdrop-filter: blur(10px)
    }

    .scard:hover {
      transform: translateY(-6px) scale(1.01);
      border-color: var(--sc);
      box-shadow: 0 24px 56px -24px var(--sc), 0 4px 12px rgba(0, 0, 0, .3)
    }

    .scard:focus-visible {
      outline: 2px solid var(--sc);
      outline-offset: 2px;
      transform: translateY(-6px) scale(1.01)
    }

    .scard::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .08;
      background: radial-gradient(120% 100% at 100% 0%, var(--sc), transparent 60%);
      transition: opacity .35s
    }

    .scard:hover::before {
      opacity: .2
    }

    .sct {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative
    }

    .sci {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--sc) 14%, transparent);
      border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent);
      transition: transform .3s var(--e)
    }

    .scard:hover .sci {
      transform: scale(1.08) rotate(-3deg)
    }

    .sci svg {
      width: 25px;
      height: 25px;
      color: var(--sc)
    }

    .scp {
      font-family: var(--fm);
      font-size: 12px;
      color: var(--sc);
      font-weight: 500
    }

    .scn {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 17px;
      line-height: 1.18;
      letter-spacing: -.01em;
      position: relative
    }

    .sctag {
      font-size: 12px;
      color: var(--dim);
      margin-top: 4px;
      position: relative;
      line-height: 1.5
    }

    .scb {
      height: 4px;
      border-radius: 4px;
      background: var(--glass2);
      margin-top: 14px;
      overflow: hidden;
      position: relative
    }

    .scb i {
      display: block;
      height: 100%;
      border-radius: 4px;
      background: var(--sc);
      transition: .9s var(--e)
    }

    /* Schedule items */
    .sched {
      display: flex;
      gap: 13px;
      align-items: center;
      padding: 13px 0;
      border-bottom: 1px solid var(--line);
      transition: background .2s
    }

    .sched:last-child {
      border: none
    }

    .sched:hover {
      background: var(--glass)
    }

    .stime {
      font-family: var(--fm);
      font-size: 13px;
      color: var(--dim);
      min-width: 84px;
      font-weight: 500
    }

    .sdot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 10px currentColor
    }

    .sbody strong {
      font-size: 14px;
      font-weight: 600;
      display: block
    }

    .sbody span {
      font-size: 12.5px;
      color: var(--dim)
    }

    .sbadge {
      margin-left: auto;
      font-size: 10px;
      font-family: var(--fm);
      letter-spacing: .06em;
      padding: 4px 9px;
      border-radius: 20px;
      text-transform: uppercase;
      font-weight: 500
    }

    /* Quick tools */
    .tools-cats {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 20px;
    }
     .tools-cat {
       display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
       padding: 14px 8px; border-radius: var(--r2); cursor: pointer;
       background: var(--glass); border: 1px solid var(--line);
       color: var(--dim); transition: background .2s, border-color .2s;
     }
    .tools-cat svg { width: 24px; height: 24px; color: var(--teal) }
    .tools-cat b { font-size: 12px; font-weight: 600; color: var(--ink) }
    .tools-cat span { font-size: 10px; opacity: .7 }
    .tools-cat:hover { border-color: var(--teal); background: var(--glass2) }
    .tools-cat.on { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent) }
    .tools-cat.on b { color: var(--teal) }

    .qtools {
      max-width: 920px;
      margin: 0 auto
    }

    .tsec {
      margin-bottom: 36px
    }

    .tsec-h {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line)
    }

    .tsec-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--glass2);
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      flex-shrink: 0
    }

    .tsec-icon svg {
      width: 20px;
      height: 20px;
      color: var(--dim)
    }

    .tsec-label {
      font-family: var(--fd);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--ink);
      line-height: 1.3
    }

    .tsec-desc {
      font-size: 13px;
      color: var(--dim);
      line-height: 1.4;
      margin-top: 2px
    }

    .tsec-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 10px
    }

    .qtool {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 16px;
      border-radius: var(--r1);
      cursor: pointer;
      background: var(--glass);
      border: 1px solid var(--line);
      transition: background .2s, border-color .2s, transform .2s;
      text-decoration: none;
      color: var(--ink);
      min-width: 0
    }

    .qtool:hover {
      background: var(--glass2);
      border-color: var(--line2)
    }

    .qtool:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px
    }

    .qtool:active {
      background: var(--glass3)
    }

    .qtool svg {
      width: 20px;
      height: 20px;
      color: var(--dim);
      margin-bottom: 1px
    }

    .qtool b {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      display: block
    }

    .qtool span {
      font-size: 11px;
      color: var(--dim);
      line-height: 1.4
    }

    /* ═══════════════════════════════════════════════════════════
    BUTTONS & CHIPS
   ═══════════════════════════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 40px;
      border: 1px solid var(--line2);
      background: var(--glass2);
      color: var(--ink);
      font-family: var(--ff);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all .28s var(--e);
      backdrop-filter: blur(8px)
    }

    .btn:hover {
      background: var(--glass3);
      transform: translateY(-2px);
      box-shadow: var(--sh-sm)
    }

    .btn:active {
      transform: translateY(0) scale(.98)
    }

    .btn svg {
      width: 17px;
      height: 17px
    }

    .btnp {
      background: linear-gradient(120deg, var(--teal), var(--cyan));
      color: #04201c;
      border: none;
      box-shadow: var(--sh-glow);
      backdrop-filter: none
    }

    .btnp:hover {
      box-shadow: 0 18px 44px -10px var(--glow);
      transform: translateY(-3px) scale(1.02)
    }

    .btnsm {
      padding: 9px 18px;
      font-size: 13px
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .04em;
      padding: 5px 12px;
      border-radius: 30px;
      border: 1px solid var(--line);
      background: var(--glass);
      color: var(--ink2);
      backdrop-filter: blur(6px)
    }

    /* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
    .tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-bottom: 24px;
      background: var(--glass);
      padding: 6px;
      border-radius: 50px;
      border: 1px solid var(--line);
      width: fit-content;
      max-width: 100%;
      backdrop-filter: blur(10px)
    }

    .tabs button {
      background: none;
      border: none;
      color: var(--dim);
      font-family: var(--ff);
      font-size: 13px;
      font-weight: 500;
      padding: 9px 16px;
      border-radius: 40px;
      cursor: pointer;
      transition: all .25s var(--e);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .tabs button svg {
      width: 15px;
      height: 15px
    }

    .tabs button:hover {
      color: var(--ink);
      background: var(--glass)
    }

    .tabs button.on {
      background: var(--glass3);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px var(--line2), 0 2px 8px rgba(0, 0, 0, .15)
    }

    /* ═══════════════════════════════════════════════════════════
   THEORY ACCORDIONS
   ═══════════════════════════════════════════════════════════ */
    .tb {
      margin-bottom: 14px
    }

    .tb summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 22px;
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      font-family: var(--fd);
      font-weight: 600;
      font-size: 16px;
      transition: all .28s var(--e);
      backdrop-filter: blur(10px)
    }

    .tb summary:hover {
      background: var(--glass2);
      border-color: var(--line2);
      transform: translateX(4px)
    }

    .tb summary::-webkit-details-marker {
      display: none
    }

    .tb summary .ar {
      margin-left: auto;
      transition: .35s var(--e);
      color: var(--dim)
    }

    .tb[open] summary .ar {
      transform: rotate(90deg);
      color: var(--teal)
    }

    .tb[open] summary {
      border-color: var(--glow2);
      background: rgba(45, 212, 191, .04)
    }

    .tnum {
      font-family: var(--fm);
      font-size: 12px;
      color: var(--teal);
      background: rgba(45, 212, 191, .10);
      padding: 4px 10px;
      border-radius: 8px
    }

    .tc {
      padding: 22px 24px;
      color: var(--ink2);
      font-weight: 300;
      font-size: 14.5px;
      line-height: 1.8;
      border-left: 2px solid var(--glass2);
      margin-left: 18px
    }

    .tc h5 {
      font-family: var(--ff);
      color: var(--ink);
      font-weight: 600;
      font-size: 15px;
      margin: 18px 0 10px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .tc h5::before {
      content: "";
      width: 4px;
      height: 16px;
      border-radius: 3px;
      background: var(--teal)
    }

    .tc ul {
      margin: 8px 0 14px 22px
    }

    .tc li {
      margin-bottom: 8px;
      line-height: 1.7
    }

    .tc strong {
      color: var(--ink);
      font-weight: 600
    }

    .clin {
      background: rgba(56, 189, 248, .06);
      border-left: 3px solid var(--cyan);
      padding: 14px 18px;
      border-radius: 0 var(--r1) var(--r1) 0;
      margin: 16px 0;
      font-size: 14px;
      line-height: 1.7;
      backdrop-filter: blur(6px)
    }

    .clin b {
      color: var(--cyan)
    }

    .tts {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .05em;
      color: var(--dim);
      background: var(--glass);
      border: 1px solid var(--line);
      padding: 7px 14px;
      border-radius: 20px;
      cursor: pointer;
      margin-top: 12px;
      transition: all .25s var(--e)
    }

    .tts:hover,
    .tts.on {
      color: var(--teal);
      border-color: rgba(45, 212, 191, .3);
      background: rgba(45, 212, 191, .06);
      box-shadow: 0 4px 16px rgba(45, 212, 191, .1)
    }

    /* ═══════════════════════════════════════════════════════════
   FLASHCARDS
   ═══════════════════════════════════════════════════════════ */
    .fcs {
      max-width: 680px;
      margin: 0 auto
    }

    .fcm {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 8px
    }

    .fcc {
      font-family: var(--fm);
      font-size: 13px;
      color: var(--dim)
    }

    .fcc b {
      color: var(--teal)
    }

    .fc {
      position: relative;
      height: clamp(280px, 45vw, 360px);
      perspective: 1800px;
      cursor: pointer;
      margin-bottom: 22px
    }

    .fci {
      position: absolute;
      inset: 0;
      transition: transform .7s var(--e);
      transform-style: preserve-3d
    }

    .fc.flip .fci {
      transform: rotateY(180deg)
    }

    .fcf {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      border-radius: var(--r4);
      padding: clamp(24px, 5vw, 36px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid var(--line2)
    }

    .fcfr {
      background: linear-gradient(160deg, var(--bg2), var(--bg3));
      backdrop-filter: blur(10px)
    }

    .fcfr::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--r4);
      background: radial-gradient(110% 90% at 50% 0%, var(--glow), transparent 55%);
      opacity: .14
    }

    .fcbk {
      background: var(--bg3);
      transform: rotateY(180deg);
      backdrop-filter: blur(10px)
    }

    .fcbk::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--r4);
      background: radial-gradient(110% 90% at 50% 100%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 55%);
      opacity: .16
    }

    .fctag {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 16px;
      position: relative;
      z-index: 1
    }

    .fcq {
      font-family: var(--fd);
      font-weight: 700;
      font-size: clamp(19px, 3vw, 29px);
      line-height: 1.25;
      position: relative;
      z-index: 1;
      letter-spacing: -.01em
    }

    .fca {
      font-size: clamp(14px, 2vw, 16px);
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.7;
      position: relative;
      z-index: 1;
      max-width: 92%
    }

    .fca strong {
      color: var(--ink);
      font-weight: 600
    }

    .fch {
      position: absolute;
      bottom: 20px;
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .12em;
      color: var(--faint);
      text-transform: uppercase;
      z-index: 1
    }

    .fcctrl {
      display: flex;
      gap: 12px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap
    }

    .fcnav {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid var(--line2);
      background: var(--glass);
      cursor: pointer;
      display: grid;
      place-items: center;
      color: var(--ink);
      transition: all .28s var(--e);
      backdrop-filter: blur(8px)
    }

    .fcnav:hover {
      background: var(--glass3);
      transform: scale(1.08);
      box-shadow: var(--sh-sm)
    }

    .fcnav:active {
      transform: scale(.96)
    }

    .fcnav svg {
      width: 22px;
      height: 22px
    }

    /* ═══════════════════════════════════════════════════════════
   QUIZ
   ═══════════════════════════════════════════════════════════ */
    .qz {
      max-width: 760px;
      margin: 0 auto
    }

    .qzp {
      height: 6px;
      border-radius: 6px;
      background: var(--glass);
      overflow: hidden;
      margin-bottom: 22px
    }

    .qzp i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--teal), var(--cyan));
      transition: .5s var(--e);
      border-radius: 6px
    }

    .qzn {
      font-family: var(--fm);
      font-size: 12px;
      color: var(--teal);
      letter-spacing: .08em;
      margin-bottom: 12px
    }

    .qzq {
      font-family: var(--fd);
      font-weight: 700;
      font-size: clamp(19px, 2.8vw, 26px);
      line-height: 1.35;
      margin-bottom: 24px;
      letter-spacing: -.01em
    }

    .qzo {
      display: flex;
      flex-direction: column;
      gap: 11px;
      margin-bottom: 22px
    }

    .opt {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 17px 20px;
      border-radius: var(--r2);
      cursor: pointer;
      background: var(--glass);
      border: 1px solid var(--line);
      transition: all .25s var(--e);
      font-size: 15px;
      backdrop-filter: blur(8px)
    }

    .opt:hover {
      background: var(--glass2);
      border-color: var(--line2);
      transform: translateX(6px)
    }

    .opt .k {
      width: 31px;
      height: 31px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-family: var(--fm);
      font-size: 14px;
      font-weight: 700;
      background: var(--glass2);
      border: 1px solid var(--line2);
      color: var(--dim);
      transition: all .25s
    }

    .opt:hover .k {
      border-color: var(--teal);
      color: var(--ink)
    }

    .opt.ok {
      background: rgba(52, 211, 153, .10);
      border-color: var(--emerald)
    }

    .opt.ok .k {
      background: var(--emerald);
      color: #052e22
    }

    .opt.no {
      background: rgba(248, 113, 113, .10);
      border-color: var(--rose)
    }

    .opt.no .k {
      background: var(--rose);
      color: #3b0a0a
    }

    .opt.dis {
      pointer-events: none
    }

    .opt.dis:not(.ok):not(.no) {
      opacity: .5
    }

    .qex {
      padding: 18px 22px;
      border-radius: var(--r2);
      background: rgba(56, 189, 248, .06);
      border-left: 3px solid var(--cyan);
      font-size: 14px;
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.75;
      margin-bottom: 20px;
      animation: vi .4s var(--e);
      backdrop-filter: blur(6px)
    }

    .qex b {
      color: var(--cyan)
    }

    .qres {
      text-align: center;
      padding: 40px 20px
    }

    .qsc {
      font-family: var(--fd);
      font-weight: 800;
      font-size: clamp(56px, 12vw, 110px);
      line-height: 1;
      background: linear-gradient(120deg, var(--teal), var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .qscl {
      font-size: 18px;
      color: var(--ink2);
      margin: 10px 0 6px
    }

    .qg {
      font-family: var(--fm);
      font-size: 14px;
      letter-spacing: .08em;
      margin-bottom: 28px
    }

    /* ═══════════════════════════════════════════════════════════
   TECHNIQUES & MODAL
   ═══════════════════════════════════════════════════════════ */
    .tgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px
    }

    .tcard {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      overflow: hidden;
      cursor: pointer;
      transition: all .32s var(--e);
      display: flex;
      flex-direction: column
    }

    .tcard:hover {
      transform: translateY(-6px);
      border-color: var(--line2);
      box-shadow: var(--sh)
    }

    .tcard:focus-visible {
      outline: 2px solid var(--line2);
      outline-offset: 2px;
      transform: translateY(-6px)
    }

    .tvis {
      height: 165px;
      position: relative;
      background: var(--bg3);
      overflow: hidden;
      display: grid;
      place-items: center;
      border-bottom: 1px solid var(--line)
    }

    .tvis svg {
      width: 100%;
      height: 100%
    }

    .vlab {
      position: absolute;
      top: 11px;
      left: 11px;
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      background: color-mix(in srgb, var(--bg) 65%, transparent);
      padding: 5px 11px;
      border-radius: 20px;
      backdrop-filter: blur(10px)
    }

    .vplay {
      position: absolute;
      bottom: 11px;
      right: 11px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(45, 212, 191, .15);
      border: 1px solid rgba(45, 212, 191, .3);
      display: grid;
      place-items: center;
      backdrop-filter: blur(10px);
      transition: all .3s var(--e)
    }

    .tcard:hover .vplay {
      background: rgba(45, 212, 191, .25);
      transform: scale(1.1)
    }

    .vplay svg {
      width: 17px;
      height: 17px;
      color: var(--teal)
    }

    .tinf {
      padding: 20px
    }

    .tinf .cat {
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: 7px
    }

    .tinf h4 {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 16.5px;
      line-height: 1.25;
      margin-bottom: 6px
    }

    .tinf p {
      font-size: 13px;
      color: var(--dim);
      font-weight: 300;
      line-height: 1.6
    }

    /* Modal overlay */
    .ov {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(4, 6, 10, .75);
      backdrop-filter: blur(18px);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: clamp(20px, 4vw, 40px) 16px;
      overflow-y: auto
    }

    .ov.show {
      display: flex;
      animation: vi .3s var(--e)
    }

    .modal {
      background: linear-gradient(180deg, var(--bg2), var(--bg3));
      border: 1px solid var(--line2);
      border-radius: var(--r4);
      max-width: 860px;
      width: 100%;
      position: relative;
      box-shadow: var(--sh);
      margin: auto;
      backdrop-filter: blur(8px)
    }

    .mx {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--glass2);
      border: 1px solid var(--line2);
      cursor: pointer;
      color: var(--ink);
      display: grid;
      place-items: center;
      transition: all .25s var(--e);
      backdrop-filter: blur(8px)
    }

    .mx:hover {
      background: var(--rose);
      color: #fff;
      rotate: 90deg;
      box-shadow: 0 8px 24px rgba(248, 113, 113, .3)
    }

    .mh {
      height: clamp(160px, 25vw, 230px);
      border-radius: var(--r4) var(--r4) 0 0;
      overflow: hidden;
      background: linear-gradient(160deg, #0e1a23, #0a1219);
      border-bottom: 1px solid var(--line)
    }

    .mh svg {
      width: 100%;
      height: 100%
    }

    .mb {
      padding: clamp(20px, 4vw, 30px)
    }

    .mcat {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--coral)
    }

    .mt {
      font-family: var(--fd);
      font-weight: 800;
      font-size: clamp(22px, 3vw, 27px);
      margin: 8px 0 8px;
      letter-spacing: -.02em
    }

    .mo {
      color: var(--ink2);
      font-weight: 300;
      font-size: 15px;
      margin-bottom: 24px;
      line-height: 1.7
    }

    .tbs {
      margin-bottom: 18px;
      border-radius: var(--r2);
      overflow: hidden;
      border: 1px solid var(--line);
      transition: border-color .3s
    }

    .tbs:hover {
      border-color: var(--line2)
    }

    .tbh {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: var(--glass);
      font-weight: 600;
      font-size: 15px
    }

    .tbh svg {
      width: 18px;
      height: 18px;
      color: var(--teal)
    }

    .tbh .n {
      font-family: var(--fm);
      font-size: 11px;
      color: var(--teal);
      background: rgba(45, 212, 191, .10);
      padding: 3px 9px;
      border-radius: 7px
    }

    .tbc {
      padding: 18px;
      font-size: 14px;
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.8
    }

    .tbc ol {
      margin-left: 20px
    }

    .tbc ol li {
      margin-bottom: 9px;
      padding-left: 3px
    }

    .tbc ol li strong {
      color: var(--ink);
      font-weight: 600
    }

    .tbc ul {
      margin-left: 0;
      list-style: none
    }

    .tbc ul li {
      margin-bottom: 9px;
      position: relative;
      padding-left: 18px
    }

    .tbc ul li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal)
    }

    .pgrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 10px
    }

    .par {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      padding: 14px;
      backdrop-filter: blur(6px);
      transition: var(--t)
    }

    .par:hover {
      border-color: var(--line2)
    }

    .par .k {
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--dim)
    }

    .par .v {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-top: 4px
    }

    .err li::before {
      background: var(--rose) !important
    }

    .contra {
      background: rgba(248, 113, 113, .05);
      border-color: rgba(248, 113, 113, .25) !important
    }

    .contra .tbh svg {
      color: var(--rose)
    }

    .okl li::before {
      background: var(--emerald) !important
    }

    .okl .tbh svg {
      color: var(--emerald)
    }

    .vsearch {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 8px
    }

    .vsearch a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      background: var(--glass);
      border: 1px solid var(--line);
      padding: 10px 18px;
      border-radius: 30px;
      transition: all .25s var(--e);
      backdrop-filter: blur(6px)
    }

    .vsearch a:hover {
      border-color: var(--glow);
      color: var(--teal);
      transform: translateY(-2px);
      box-shadow: var(--sh-sm)
    }

    .vsearch a svg {
      width: 15px;
      height: 15px
    }

    .vsearch a.yt:hover {
      border-color: rgba(255, 68, 68, .4);
      color: #ff6666
    }

    /* ═══════════════════════════════════════════════════════════
   CLINICAL CASES
   ═══════════════════════════════════════════════════════════ */
    .cgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 17px
    }

    .ccard {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: 25px;
      cursor: pointer;
      transition: all .32s var(--e);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px)
    }

    .ccard:hover {
      transform: translateY(-6px);
      border-color: var(--line2);
      box-shadow: var(--sh), 0 0 40px -20px var(--cl, var(--cyan))
    }

    .ccard:focus-visible {
      outline: 2px solid var(--cl, var(--cyan));
      outline-offset: 2px;
      transform: translateY(-6px)
    }

    .ccard::before {
      content: "";
      position: absolute;
      right: -40px;
      top: -40px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--cl, var(--cyan)), transparent 70%);
      opacity: .08;
      transition: opacity .35s
    }

    .ccard:hover::before {
      opacity: .16
    }

    .cdiff {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 5px 11px;
      border-radius: 20px;
      margin-bottom: 13px;
      position: relative;
      backdrop-filter: blur(6px)
    }

    .da {
      background: rgba(248, 113, 113, .10);
      color: var(--rose);
      border: 1px solid rgba(248, 113, 113, .25)
    }

    .dm {
      background: rgba(251, 191, 36, .10);
      color: var(--amber);
      border: 1px solid rgba(251, 191, 36, .25)
    }

    .db {
      background: rgba(52, 211, 153, .10);
      color: var(--emerald);
      border: 1px solid rgba(52, 211, 153, .25)
    }

    .ccard h4 {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 19px;
      margin-bottom: 8px;
      position: relative;
      line-height: 1.25
    }

    .ccard .pt {
      font-size: 13.5px;
      color: var(--ink2);
      font-weight: 300;
      margin-bottom: 15px;
      position: relative;
      line-height: 1.6
    }

    .cmeta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      position: relative
    }

    .crun {
      max-width: 820px;
      margin: 0 auto
    }

    .cstep {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: clamp(20px, 4vw, 27px);
      margin-bottom: 17px;
      animation: vi .4s var(--e);
      backdrop-filter: blur(8px)
    }

    .cstep h4 {
      font-family: var(--fd);
      font-weight: 700;
      font-size: clamp(18px, 2.5vw, 20px);
      margin-bottom: 13px
    }

    .cph {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 11px
    }

    .cpr {
      color: var(--ink2);
      font-weight: 300;
      font-size: 15px;
      line-height: 1.75;
      margin-bottom: 18px
    }

    .cpr strong {
      color: var(--ink);
      font-weight: 600
    }

    .cdata {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin: 16px 0
    }

    .cdat {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 14px;
      backdrop-filter: blur(6px)
    }

    .cdat .k {
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--dim)
    }

    .cdat .v {
      font-size: 14px;
      font-weight: 600;
      margin-top: 4px
    }

    .crev {
      padding: 20px 24px;
      border-radius: var(--r2);
      background: rgba(45, 212, 191, .05);
      border-left: 3px solid var(--teal);
      font-size: 14.5px;
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.8;
      margin-top: 18px;
      animation: vi .4s var(--e);
      backdrop-filter: blur(6px)
    }

    .crev h5 {
      font-family: var(--ff);
      color: var(--teal);
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 8px
    }

    .crev strong {
      color: var(--ink)
    }

    /* ═══════════════════════════════════════════════════════════
   SCALES
   ═══════════════════════════════════════════════════════════ */
    .scgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px
    }

    .sccard {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: 24px;
      cursor: pointer;
      transition: all .32s var(--e);
      backdrop-filter: blur(10px)
    }

    .sccard:hover {
      transform: translateY(-5px);
      border-color: var(--line2);
      box-shadow: var(--sh-sm)
    }

    .sccard:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
      transform: translateY(-5px)
    }

    .sicon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      background: rgba(56, 189, 248, .10);
      border: 1px solid rgba(56, 189, 248, .25);
      display: grid;
      place-items: center;
      margin-bottom: 15px;
      transition: transform .3s var(--e)
    }

    .sccard:hover .sicon {
      transform: scale(1.08)
    }

    .sicon svg {
      width: 24px;
      height: 24px;
      color: var(--cyan)
    }

    .sccard h4 {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 16.5px;
      margin-bottom: 6px
    }

    .sccard p {
      font-size: 13px;
      color: var(--dim);
      font-weight: 300;
      line-height: 1.6
    }

    .scrun {
      max-width: 760px;
      margin: 0 auto
    }

    .sci-item {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      padding: 20px;
      margin-bottom: 12px;
      backdrop-filter: blur(8px);
      transition: border-color .2s
    }

    .sci-item:hover {
      border-color: var(--line2)
    }

    .sci-item .q {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 14px;
      line-height: 1.5
    }

    .sco {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .scopt {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 16px;
      border-radius: var(--r1);
      cursor: pointer;
      background: var(--glass);
      border: 1px solid var(--line);
      transition: all .22s var(--e);
      font-size: 14px
    }

    .scopt:hover {
      background: var(--glass2);
      transform: translateX(4px)
    }

    .scopt.sel {
      background: rgba(45, 212, 191, .10);
      border-color: var(--teal);
      box-shadow: 0 4px 16px rgba(45, 212, 191, .1)
    }

    .scopt .pts {
      margin-left: auto;
      font-family: var(--fm);
      font-size: 13px;
      color: var(--dim);
      font-weight: 600
    }

    .scopt.sel .pts {
      color: var(--teal)
    }

    .scres {
      position: sticky;
      bottom: 16px;
      background: var(--bg2);
      border: 1px solid var(--line2);
      border-radius: var(--r3);
      padding: 22px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      box-shadow: var(--sh);
      backdrop-filter: blur(20px)
    }

    .scres .tot {
      font-family: var(--fd);
      font-weight: 800;
      font-size: clamp(36px, 6vw, 46px);
      line-height: 1;
      color: var(--teal)
    }

    .scres .ip {
      flex: 1
    }

    .scres .ip .il {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--dim)
    }

    .scres .ip .iv {
      font-size: 16px;
      font-weight: 600;
      margin-top: 4px
    }

    /* ═══════════════════════════════════════════════════════════
   AI TUTOR
   ═══════════════════════════════════════════════════════════ */
    .ail {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 20px
    }

    .aic {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: 24px;
      align-self: start;
      position: sticky;
      top: 88px;
      backdrop-filter: blur(14px)
    }

    .aic h4 {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 17px;
      margin-bottom: 18px
    }

    .fld {
      margin-bottom: 16px
    }

    .fld label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink2);
      margin-bottom: 8px
    }

    .fld select,
    .fld input,
    .fld textarea {
      width: 100%;
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 12px 14px;
      color: var(--ink);
      font-family: var(--ff);
      font-size: 14px;
      resize: vertical;
      transition: border-color .2s, box-shadow .2s
    }

    .fld textarea {
      min-height: 80px;
      line-height: 1.65
    }

    .fld select:focus,
    .fld input:focus,
    .fld textarea:focus {
      outline: none;
      border-color: rgba(45, 212, 191, .4);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, .08)
    }

    .fld select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%237d8a98'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px
    }

    .fld select option, .calc select option {
      background-color: var(--bg2);
      color: var(--ink);
    }

    .ttog {
      display: flex;
      gap: 8px;
      margin-bottom: 16px
    }

    .ttog button {
      flex: 1;
      padding: 11px;
      border-radius: 11px;
      border: 1px solid var(--line);
      background: var(--glass);
      cursor: pointer;
      font-family: var(--ff);
      font-size: 13px;
      font-weight: 600;
      color: var(--dim);
      transition: all .25s var(--e)
    }

    .ttog button:hover {
      border-color: var(--line2);
      background: var(--glass2)
    }

    .ttog button.on {
      background: rgba(45, 212, 191, .10);
      border-color: rgba(45, 212, 191, .3);
      color: var(--teal)
    }

    .ttog button span {
      display: block;
      font-size: 10px;
      font-weight: 400;
      color: var(--faint);
      margin-top: 3px
    }

    .ttog button.on span {
      color: var(--dim)
    }

    .aio {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: 24px;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(14px)
    }

    .achat {
      flex: 1;
      overflow-y: auto;
      max-height: 520px;
      margin-bottom: 16px
    }

    .amsg {
      padding: 16px 20px;
      border-radius: var(--r2);
      margin-bottom: 14px;
      font-size: 14.5px;
      line-height: 1.75;
      animation: vi .3s var(--e)
    }

    .au {
      background: var(--glass2);
      border: 1px solid var(--line);
      margin-left: 20px
    }

    .ab {
      background: rgba(45, 212, 191, .05);
      border-left: 3px solid var(--teal);
      white-space: pre-wrap
    }

    .ab.think {
      color: var(--dim);
      font-style: italic
    }

    .aempty {
      text-align: center;
      padding: 40px 20px;
      color: var(--dim);
      margin: auto
    }

    .aempty svg {
      width: 54px;
      height: 54px;
      color: var(--faint);
      margin-bottom: 16px;
      opacity: .6
    }

    .ainput {
      display: flex;
      gap: 10px
    }

    .ainput textarea {
      flex: 1;
      min-height: 54px;
      max-height: 140px
    }

    .acopy {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .05em;
      color: var(--dim);
      cursor: pointer;
      background: var(--glass);
      border: 1px solid var(--line);
      padding: 8px 14px;
      border-radius: 20px;
      margin-top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: all .25s var(--e)
    }

    .acopy:hover {
      color: var(--teal);
      border-color: rgba(45, 212, 191, .3);
      background: rgba(45, 212, 191, .06)
    }

    .acopy svg {
      width: 14px;
      height: 14px
    }

    .anote {
      font-size: 12px;
      color: var(--faint);
      margin-top: 14px;
      line-height: 1.7
    }

    /* ═══════════════════════════════════════════════════════════
   POMODORO v2
   ═══════════════════════════════════════════════════════════ */
    .pom {
      max-width: 560px;
      margin: 0 auto;
      text-align: center
    }

    .pom-modes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 24px
    }

    .pom-mode-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: var(--r1);
      border: 1px solid var(--line);
      background: var(--glass);
      cursor: pointer;
      font-family: var(--ff);
      font-size: 13px;
      font-weight: 600;
      color: var(--dim);
      transition: all .25s var(--e);
      position: relative;
      overflow: hidden
    }

    .pom-mode-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--mode-color);
      opacity: 0;
      transition: opacity .25s
    }

    .pom-mode-btn:hover {
      background: var(--glass2);
      border-color: var(--line2)
    }

    .pom-mode-btn.on {
      background: var(--glass3);
      color: var(--ink);
      border-color: var(--mode-color);
      box-shadow: 0 4px 16px rgba(0,0,0,.2)
    }

    .pom-mode-btn.on::before {
      opacity: 1
    }

    .mode-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .mode-time {
      margin-left: auto;
      font-family: var(--fm);
      font-size: 11px;
      color: var(--faint)
    }

    .pring {
      position: relative;
      width: clamp(240px, 50vw, 290px);
      height: clamp(240px, 50vw, 290px);
      margin: 0 auto 20px
    }

    .pring svg {
      transform: rotate(-90deg);
      width: 100%;
      height: 100%
    }

    .pring .trk {
      fill: none;
      stroke: var(--glass2);
      stroke-width: 10
    }

    .pring .prg {
      fill: none;
      stroke-width: 10;
      stroke-linecap: round;
      transition: stroke-dashoffset 1s linear
    }

    .ptime {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center
    }

    .ptime .t {
      font-family: var(--fd);
      font-weight: 800;
      font-size: clamp(48px, 10vw, 62px);
      letter-spacing: -.02em;
      line-height: 1;
      font-variant-numeric: tabular-nums
    }

    .ptime .md {
      font-family: var(--fm);
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-top: 8px
    }

    .pom-phases {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 20px
    }

    .pom-phase-dot {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--faint);
      border-radius: 50%;
      transition: all .25s
    }

    .pom-phase-dot.current {
      color: var(--teal);
      font-size: 16px
    }

    .pom-phase-dot.done {
      color: var(--emerald)
    }

    .pom-phase-line {
      width: 24px;
      height: 2px;
      background: var(--glass3)
    }

    .pctrl {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 24px
    }

    .pom-ambient {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      padding: 16px;
      margin-bottom: 20px
    }

    .pom-ambient-label {
      font-family: var(--fm);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 12px
    }

    .pom-ambient-btns {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 12px
    }

    .pom-sound-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--glass);
      cursor: pointer;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s var(--e)
    }

    .pom-sound-btn:hover {
      background: var(--glass2);
      border-color: var(--line2);
      transform: scale(1.1)
    }

    .pom-sound-btn.on {
      background: var(--teal);
      border-color: var(--teal);
      box-shadow: 0 0 16px var(--glow)
    }

    .pom-vol {
      width: 120px;
      height: 4px;
      accent-color: var(--teal);
      cursor: pointer
    }

    .pom-quick-stats {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-bottom: 24px
    }

    .pqs {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 20px;
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r1)
    }

    .pqs-n {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 20px;
      color: var(--ink)
    }

    .pqs-l {
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim)
    }

    .pom-stats-section {
      text-align: left
    }

    .pom-stats-title {
      font-family: var(--fd);
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 16px;
      text-align: center
    }

    .pom-charts-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    .pom-chart-wrap {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      padding: 12px
    }

    .pom-chart-label {
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 8px;
      text-align: center
    }

    /* ═══════════════════════════════════════════════════════════
   ECG MODULE
   ═══════════════════════════════════════════════════════════ */
    .ecg-modes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 24px
    }

    .ecg-mode-card {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      padding: 24px;
      text-align: center;
      cursor: pointer;
      transition: all .25s var(--e)
    }

    .ecg-mode-card:hover {
      background: var(--glass2);
      border-color: var(--teal);
      transform: translateY(-2px)
    }

    .ecg-mode-icon {
      font-size: 32px;
      margin-bottom: 12px
    }

    .ecg-mode-card h4 {
      font-family: var(--fd);
      font-size: 16px;
      color: var(--ink);
      margin-bottom: 8px
    }

    .ecg-mode-card p {
      font-size: 13px;
      color: var(--dim)
    }

    .ecg-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-top: 16px
    }

    .ecg-card {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      padding: 16px;
      cursor: pointer;
      transition: all .25s var(--e)
    }

    .ecg-card:hover {
      background: var(--glass2);
      border-color: var(--teal)
    }

    .ecg-card h4 {
      font-family: var(--fd);
      font-size: 14px;
      color: var(--ink);
      margin-bottom: 4px
    }

    .ecg-freq {
      font-family: var(--fm);
      font-size: 11px;
      color: var(--teal);
      margin-bottom: 8px
    }

    .ecg-card p {
      font-size: 12px;
      color: var(--dim)
    }

    .ecg-detail {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 16px
    }

    .ecg-signal {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      padding: 16px;
      min-height: 120px
    }

    .ecg-wave svg {
      width: 100%;
      height: 80px
    }

    .ecg-info h3 {
      font-family: var(--fd);
      font-size: 14px;
      color: var(--ink);
      margin: 16px 0 8px
    }

    .ecg-info h3:first-child {
      margin-top: 0
    }

    .ecg-info p {
      font-size: 13px;
      color: var(--ink2);
      line-height: 1.6
    }

    .ecg-waves {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .ecg-wave-item {
      display: flex;
      gap: 8px;
      font-size: 13px
    }

    .ecg-wave-item .label {
      font-weight: 600;
      color: var(--ink)
    }

    .ecg-wave-item .val {
      color: var(--dim)
    }

    .ecg-interpret {
      background: var(--glass);
      border-left: 3px solid var(--teal);
      padding: 12px;
      border-radius: 0 var(--r1) var(--r1) 0
    }

    .ecg-steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px
    }

    .ecg-step {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      padding: 16px;
      opacity: 0.4;
      transform: translateX(-10px);
      transition: all .3s var(--e)
    }

    .ecg-step.visible {
      opacity: 1;
      transform: translateX(0)
    }

    .ecg-step-num {
      width: 32px;
      height: 32px;
      background: var(--teal);
      color: var(--bg);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0
    }

    .ecg-step-content h4 {
      font-family: var(--fd);
      font-size: 14px;
      color: var(--ink);
      margin-bottom: 4px
    }

    .ecg-step-content p {
      font-size: 13px;
      color: var(--dim);
      line-height: 1.5
    }

    .ecg-challenge {
      margin-top: 16px
    }

    .ecg-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 16px
    }

    .ecg-opt {
      padding: 12px 16px;
      border-radius: var(--r1);
      border: 1px solid var(--line);
      background: var(--glass);
      cursor: pointer;
      font-family: var(--ff);
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      transition: all .25s var(--e)
    }

    .ecg-opt:hover {
      background: var(--glass2);
      border-color: var(--line2)
    }

    .ecg-opt.correct {
      background: var(--emerald);
      border-color: var(--emerald);
      color: white
    }

    .ecg-opt.wrong {
      background: var(--rose);
      border-color: var(--rose);
      color: white
    }

    /* ═══════════════════════════════════════════════════════════
   GAMIFICATION / PROGRESS
   ═══════════════════════════════════════════════════════════ */
    .lvb {
      background: linear-gradient(135deg, rgba(14, 26, 35, .9), rgba(10, 18, 25, .9));
      border: 1px solid var(--line2);
      border-radius: var(--r4);
      padding: clamp(22px, 4vw, 30px);
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px)
    }

    .lvb::after {
      content: "";
      position: absolute;
      right: -50px;
      top: -50px;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(251, 191, 36, .18), transparent 70%);
      animation: pulse 5s ease-in-out infinite alternate
    }

    .lvbadge {
      width: clamp(72px, 12vw, 88px);
      height: clamp(72px, 12vw, 88px);
      border-radius: 24px;
      background: linear-gradient(135deg, var(--amber), #f59e0b);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow: 0 14px 36px -10px rgba(251, 191, 36, .45);
      transition: transform .3s var(--e)
    }

    .lvb:hover .lvbadge {
      transform: scale(1.05) rotate(-3deg)
    }

    .lvbadge .lv {
      font-family: var(--fd);
      font-weight: 800;
      font-size: clamp(28px, 5vw, 36px);
      color: #3b2706
    }

    .lvi {
      flex: 1;
      position: relative
    }

    .lvi .lt {
      font-family: var(--fd);
      font-weight: 700;
      font-size: clamp(19px, 3vw, 23px)
    }

    .lvi .ls {
      color: var(--dim);
      font-size: 14px;
      margin: 4px 0 14px
    }

    .xpbar {
      height: 10px;
      border-radius: 10px;
      background: var(--glass2);
      overflow: hidden
    }

    .xpbar i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--amber), #f59e0b);
      border-radius: 10px;
      transition: width 1s var(--e)
    }

    .xpt {
      font-family: var(--fm);
      font-size: 12px;
      color: var(--dim);
      margin-top: 8px
    }

    .agrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px
    }

    .ach {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      padding: 22px;
      text-align: center;
      transition: all .32s var(--e);
      backdrop-filter: blur(8px)
    }

    .ach:hover {
      transform: translateY(-3px)
    }

    .ach.un {
      border-color: var(--line2);
      box-shadow: var(--sh-sm)
    }

    .ach.lo {
      opacity: .38;
      filter: grayscale(.65)
    }

    .ach.lo:hover {
      opacity: .5
    }

    .aci {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin: 0 auto 13px;
      background: rgba(251, 191, 36, .10);
      border: 1px solid rgba(251, 191, 36, .25);
      transition: transform .3s var(--e)
    }

    .ach:hover .aci {
      transform: scale(1.08)
    }

    .ach.un .aci {
      background: linear-gradient(135deg, var(--amber), #f59e0b);
      box-shadow: 0 10px 26px -8px rgba(251, 191, 36, .45)
    }

    .aci svg {
      width: 29px;
      height: 29px;
      color: var(--amber)
    }

    .ach.un .aci svg {
      color: #3b2706
    }

    .ach h4 {
      font-family: var(--fd);
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 5px
    }

    .ach p {
      font-size: 12px;
      color: var(--dim);
      font-weight: 300;
      line-height: 1.5
    }

    /* ═══════════════════════════════════════════════════════════
   RESOURCES
   ═══════════════════════════════════════════════════════════ */
    .rgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 14px
    }

    .rcard {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px;
      border-radius: var(--r2);
      background: var(--glass);
      border: 1px solid var(--line);
      text-decoration: none;
      color: var(--ink);
      transition: all .28s var(--e);
      backdrop-filter: blur(8px)
    }

    .rcard:hover {
      background: var(--glass2);
      transform: translateY(-3px);
      border-color: var(--line2);
      box-shadow: var(--sh-sm)
    }

    .rcard .ri {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: transform .3s var(--e)
    }

    .rcard:hover .ri {
      transform: scale(1.08)
    }

    .rcard .ri svg {
      width: 23px;
      height: 23px
    }

    .rcard b {
      font-size: 14.5px;
      font-weight: 600;
      display: block
    }

    .rcard span {
      font-size: 12.5px;
      color: var(--dim);
      line-height: 1.5
    }

    /* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
    .toast {
      position: fixed;
      bottom: env(safe-area-inset-bottom, 26px);
      left: 50%;
      translate: -50% 0;
      z-index: 5000;
      background: rgba(15, 20, 32, .92);
      border: 1px solid var(--line2);
      border-radius: 50px;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      gap: 11px;
      box-shadow: var(--sh);
      opacity: 0;
      pointer-events: none;
      transition: .4s var(--e);
      font-size: 14px;
      font-weight: 500;
      backdrop-filter: blur(20px);
      max-width: calc(100vw - 32px)
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, -8px)
    }

    .toast svg {
      width: 20px;
      height: 20px;
      color: var(--teal);
      flex-shrink: 0
    }

    /* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */
    @media(max-width:1024px) {

      .dcols,
      .ail {
        grid-template-columns: 1fr
      }

      .aic {
        position: static
      }

      .stats {
        grid-template-columns: repeat(2, 1fr)
      }

      .beat2 {
        grid-template-columns: 1fr;
        max-width: 480px
      }
    }

    /* ─── NOTEBOOK (13-14") ─── */
    @media(max-width:1280px) {
      .ail { grid-template-columns: 300px 1fr }
      .sgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
      .dcols { gap: 16px }
      .greet { padding: clamp(20px,3vw,36px) }
      .stat .v { font-size: clamp(24px,3.5vw,32px) }
    }

    /* ─── TABLET ─── */
    @media(max-width:768px) {

      /* Full-screen mobile nav drawer with close button */
      .nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        background: rgba(6, 9, 16, .94);
        backdrop-filter: blur(32px) saturate(160%);
        border-radius: 0;
        padding: 0;
        z-index: 300;
        gap: 0;
        border: none;
        justify-content: flex-start;
        overflow-y: auto
      }

      .nav.open {
        display: flex;
        animation: slideDown .35s var(--e)
      }

      @keyframes slideDown {
        from { opacity: 0; transform: translateY(-20px) }
        to { opacity: 1; transform: none }
      }

      /* Close button inside mobile nav */
      .nav::before {
        content: '✕ Cerrar';
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 18px;
        font-family: var(--fm);
        font-size: 13px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--dim);
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        margin: env(safe-area-inset-top, 12px) 16px 8px;
        border-radius: var(--r2);
        background: var(--glass);
        transition: var(--t)
      }

      .nav::before:hover {
        color: var(--rose);
        background: rgba(248,113,113,.08)
      }

      .nav button {
        width: calc(100% - 32px);
        margin: 0 auto;
        text-align: left;
        padding: 16px 20px;
        font-size: 16px;
        border-radius: var(--r2);
        border: 1px solid transparent;
        min-height: 52px
      }

      .nav button:hover,
      .nav button.on {
        background: var(--glass2);
        border-color: var(--line)
      }

      .mtog {
        display: grid;
        place-items: center
      }

      .nstat .lbl { display: none }
      .nstat { padding: 7px 10px; font-size: 12px }
      .stats { grid-template-columns: 1fr 1fr }
      .mb { padding: 20px }

      .lvb, .scres {
        flex-direction: column;
        text-align: center;
        gap: 16px
      }

      .sgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
      .cgrid { grid-template-columns: 1fr }
      .tgrid { grid-template-columns: 1fr }
      .scgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) }
      .agrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
      .rgrid { grid-template-columns: 1fr }
      .ov { padding: 12px 10px }
      .modal { border-radius: var(--r3); max-height: 90vh; overflow-y: auto }
      .mh { height: 140px }
      .au { margin-left: 0 }
      .tc { padding: 14px 16px; margin-left: 8px; border-left-width: 1px }
      /* AI Tutor mobile */
      .ail { grid-template-columns: 1fr; gap: 16px }
      .aic { position: static; padding: 20px }
      .aio { min-height: 320px }
      .achat { max-height: 380px }
      .ainput { flex-direction: column }
      .ainput textarea { min-height: 48px }
      .ainput .btn { width: 100%; justify-content: center }

      /* Flashcards mobile */
      .fcm { flex-direction: column; align-items: stretch; gap: 10px }
      .fcctrl { gap: 10px }
      .fcnav { width: 46px; height: 46px }

      /* View headers mobile */
      .vt { font-size: clamp(22px, 5vw, 34px) }
      .vd { font-size: 14px }

      .tools-cats { grid-template-columns: repeat(2, 1fr) }

      /* Hero mobile */
      .hpill { font-size: 9px; padding: 6px 10px }
      .hmeta { gap: 6px }
    }

    /* ─── MOBILE SMALL ─── */
    @media(max-width:480px) {
      .stats { grid-template-columns: 1fr }
      .fc { height: 260px }
      .fcf { padding: 18px 14px }
      .fcq { font-size: 17px }
      .fca { font-size: 13px; line-height: 1.6 }
      .sgrid { grid-template-columns: 1fr }
      .scgrid { grid-template-columns: 1fr }
      .agrid { grid-template-columns: 1fr }
      .tools-cats { grid-template-columns: 1fr }

      .top { padding: 10px 12px; gap: 6px; justify-content: flex-start; }
      .brand { position: relative; left: auto; }
      .nsp { display: block; flex: 1; }
      .bn { font-size: 14px }
      .bm { width: 30px; height: 30px; border-radius: 9px }
      .bm svg { width: 17px; height: 17px }

      .tabs { width: 100%; border-radius: var(--r2); padding: 4px }
      .tabs button { flex: 1; justify-content: center; padding: 8px 6px; font-size: 11px; gap: 4px }
      .tabs button svg { width: 13px; height: 13px }

      .pom-modes { grid-template-columns: 1fr 1fr; gap: 6px }
      .pom-mode-btn { padding: 10px 12px; font-size: 12px }
      .pring { width: 220px; height: 220px }
      .ptime .t { font-size: 44px }
      .pom-charts-row { grid-template-columns: 1fr }
      .pom-ambient-btns { gap: 6px }
      .pom-sound-btn { width: 40px; height: 40px; font-size: 18px }
      .pom-quick-stats { gap: 8px }
      .pqs { padding: 10px 14px }
      .pqs-n { font-size: 16px }

      .htitle { font-size: clamp(34px, 13vw, 56px) }
      .hsub { font-size: 13px }
      .kick { font-size: 8px; letter-spacing: .3em }

      .cstep { padding: 16px }
      .cstep h4 { font-size: 17px }
      .cdata { grid-template-columns: 1fr 1fr }

      .greet { padding: 18px; border-radius: var(--r3) }
      .gtit { font-size: clamp(22px, 5vw, 34px) }
      .gsub { font-size: 14px }

      /* Theory mobile */
      .tb summary { padding: 14px 16px; font-size: 14px; gap: 8px }
      .tnum { font-size: 10px; padding: 3px 7px }
      .tc { padding: 12px 14px; margin-left: 6px; font-size: 13px }
      .tc h5 { font-size: 14px; margin: 14px 0 8px }

      /* Quiz mobile */
      .opt { padding: 14px 16px; font-size: 14px; gap: 10px }
      .opt .k { width: 28px; height: 28px; font-size: 12px }
      .qzq { font-size: 17px }

      /* Scale mobile */
      .scopt { padding: 11px 14px; font-size: 13px }
      .sci-item { padding: 16px }
      .sci-item .q { font-size: 14px }
      .scres { padding: 16px; gap: 14px; border-radius: var(--r2) }
      .scres .tot { font-size: 34px }

      /* Modal mobile */
      .modal { border-radius: var(--r2) }
      .mb { padding: 16px }
      .mt { font-size: 20px }
      .mo { font-size: 14px }
      .mx { width: 36px; height: 36px; top: 10px; right: 10px }
    }

    /* ─── MINI MOBILE (320-360px) ─── */
    @media(max-width:360px) {
      main { padding: 12px 8px 70px }
      .panel { padding: 14px; border-radius: var(--r2) }
      .stat { padding: 12px }
      .stat .v { font-size: 22px }
      .scard { padding: 16px; min-height: 140px }
      .scn { font-size: 15px }
      .btn { padding: 10px 18px; font-size: 13px }
      .btnp { padding: 10px 18px }
    }

    /* ─── Accessibility: reduced motion ─── */
    @media(prefers-reduced-motion:reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }
    }

    /* ─── CHAT IA mejorado ─── */
    .ainput { display: flex; gap: 8px; align-items: flex-end }
    .aiattach { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line2); background: var(--glass); color: var(--ink2); cursor: pointer; display: grid; place-items: center; transition: var(--t) }
    .aiattach:hover { background: var(--glass2); color: var(--teal); border-color: rgba(45, 212, 191, .3) }
    .aiattach svg { width: 20px; height: 20px }
    .ainput textarea { flex: 1; min-height: 46px; max-height: 160px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); padding: 12px 14px; color: var(--ink); font-family: var(--ff); font-size: 14px; line-height: 1.5; resize: none; transition: border-color .2s, box-shadow .2s }
    .ainput textarea:focus { outline: none; border-color: rgba(45, 212, 191, .4); box-shadow: 0 0 0 3px rgba(45, 212, 191, .08) }
    .aisend { flex-shrink: 0; width: 46px; height: 46px; padding: 0; border-radius: 14px; justify-content: center }
    .aisend svg { width: 20px; height: 20px; margin: 0 }
    #aiAttachBar { display: flex; flex-wrap: wrap; gap: 8px }
    #aiAttachBar:not(:empty) { margin-bottom: 10px }
    .aichip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 7px 12px; border-radius: 30px; background: var(--glass2); border: 1px solid var(--line2); color: var(--ink2) }
    .aichip b { font-weight: 600; color: var(--ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .aichip .rm { cursor: pointer; color: var(--dim); font-weight: 700; padding: 0 2px }
    .aichip .rm:hover { color: var(--rose) }
    .amsg.aithink { color: var(--dim); font-style: italic }
    .amsg.ab a { color: var(--teal); word-break: break-word }

    /* ─── Acciones IA por ramo ─── */
    .subact { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 22px }
    .subact button { font-size: 12.5px; padding: 9px 14px; border-radius: 30px; border: 1px solid var(--line); background: var(--glass); color: var(--ink2); cursor: pointer; font-family: var(--ff); transition: var(--t); display: inline-flex; align-items: center; gap: 6px }
    .subact button:hover { border-color: rgba(45, 212, 191, .3); color: var(--teal); background: rgba(45, 212, 191, .06); transform: translateY(-2px) }
    .subact button svg { width: 14px; height: 14px }

    /* ─── Calculadoras ─── */
    .calcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px }
    .calc { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r3); padding: 22px; backdrop-filter: blur(10px); transition: border-color .25s }
    .abtn { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 600 13px/1.4 var(--fm,system-ui); cursor: pointer; transition: all .2s }
    .abtn:hover { border-color: var(--teal); color: var(--teal) }
    .abtn-on { background: color-mix(in srgb, var(--teal) 15%, transparent); border-color: var(--teal); color: var(--teal) }
    .site-footer { border-top: 1px solid var(--border); padding: 20px 24px 16px; margin-top: 40px; background: var(--bg3) }
    .footer-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; max-width: 1100px; margin: 0 auto }
    .footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text) }
    .footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px }
    .footer-links a { color: var(--dim); text-decoration: none; transition: color .2s }
    .footer-links a:hover { color: var(--teal) }
    .footer-sep { color: var(--border); font-size: 10px }
    .footer-trust { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim) }
    .footer-copy { text-align: center; font-size: 11px; color: var(--faint); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border) }
    @media (max-width: 600px) { .footer-row { flex-direction: column; gap: 12px } .footer-links { justify-content: center } }
    .calc:hover { border-color: var(--line2) }
    .calc h4 { font-family: var(--fd); font-weight: 700; font-size: 16px; margin-bottom: 5px }
    .calc .cdesc { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; line-height: 1.5 }
    .calc .row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px }
    .calc .row > div { flex: 1; min-width: 90px; margin-bottom: 8px }
    .calc label { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 5px }
    .calc input, .calc select { width: 100%; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-family: var(--ff); font-size: 14px }
    .calc input:focus, .calc select:focus { outline: none; border-color: rgba(45, 212, 191, .4) }
    .calc .out { margin-top: 12px; padding: 14px 16px; border-radius: var(--r2); background: rgba(45, 212, 191, .06); border-left: 3px solid var(--teal); font-size: 14px; line-height: 1.6; min-height: 22px }
    .calc .out b { color: var(--teal); font-size: 18px }

    @media(max-width:768px) {
      .ainput { flex-direction: row; align-items: flex-end }
      .ainput .btn { width: auto }
      .calcgrid { grid-template-columns: 1fr }
    }

    /* ════════════════════════════════════════════════
       ENTERPRISE LAYER — animaciones, glass, microinteracciones
       ════════════════════════════════════════════════ */
    :root { --admin: #e879f9; --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 14px 40px -18px rgba(0,0,0,.65); --shadow-hi: 0 1px 2px rgba(0,0,0,.4), 0 26px 60px -22px rgba(0,0,0,.75); --ease-out: cubic-bezier(.16,1,.3,1) }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
    @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
    @keyframes popIn { 0% { opacity: 0; transform: scale(.95) } 100% { opacity: 1; transform: scale(1) } }
    @keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }

    .view.active { animation: fadeIn .35s ease both }
    .vhead { animation: fadeInUp .6s var(--ease-out) both }
    .rgrid > *, .calcgrid > *, .qtools > *, .agrid > *, .cgrid > *, .tgrid > * { animation: fadeInUp .5s var(--ease-out) both }
    .rgrid > *:nth-child(2), .calcgrid > *:nth-child(2), .qtools > *:nth-child(2), .cgrid > *:nth-child(2) { animation-delay: .05s }
    .rgrid > *:nth-child(3), .calcgrid > *:nth-child(3), .qtools > *:nth-child(3), .cgrid > *:nth-child(3) { animation-delay: .1s }
    .rgrid > *:nth-child(4), .calcgrid > *:nth-child(4), .qtools > *:nth-child(4), .cgrid > *:nth-child(4) { animation-delay: .15s }
    .rgrid > *:nth-child(n+5), .calcgrid > *:nth-child(n+5), .cgrid > *:nth-child(n+5) { animation-delay: .2s }
    .qtools > * { animation: fadeIn .5s var(--ease-out) both; animation-delay: 0s !important }
    .tb { animation: fadeInUp .4s var(--ease-out) both }

    /* Microinteracciones: elevación + glow en hover */
    .scard, .calc, .rcard, .cgrid > a, .cgrid > div, .tcard, .stat { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s ease }
    .scard:hover, .calc:hover, .rcard:hover, .tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-hi) }
    .calc, .scard { box-shadow: var(--shadow-card) }
    .btn { transition: transform .25s var(--ease-out), box-shadow .25s ease, background .25s ease, border-color .25s ease }
    .btn:hover { transform: translateY(-2px) }
    .btnp:hover { box-shadow: 0 10px 30px -8px rgba(45,212,191,.5) }
    .nav button { transition: color .25s ease, background .25s ease, transform .2s var(--ease-out) }
    .nav button:hover { transform: translateY(-1px) }
    #aiAttachBar:not(:empty) ~ .ainput { margin-top: 4px }

    /* SVG generado por la IA en el chat */
    .aisvg { margin: 14px 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; overflow: auto; box-shadow: var(--shadow-card) }
    .aisvg svg { max-width: 100%; height: auto; display: block; margin: 0 auto }

    /* Consola del Tutor: badge de modo */
    .modebadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 30px; background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.28); color: var(--teal); margin-left: 8px }

    /* Medidor / gauge de resultado de escalas */
    .gauge { margin-top: 18px; animation: fadeInUp .5s var(--ease-out) both }
    .gauge .gtrack { height: 16px; border-radius: 12px; background: var(--glass2); overflow: hidden; position: relative; border: 1px solid var(--line) }
    .gauge .gfill { height: 100%; border-radius: 12px; transition: width .8s var(--ease-out); background-image: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)) }
    .gauge .glabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-top: 7px; font-family: var(--fm, monospace) }
    .dbar { margin: 9px 0 }
    .dbar .dl { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink2); margin-bottom: 4px }
    .dbar .dt { height: 8px; border-radius: 6px; background: var(--glass2); overflow: hidden }
    .dbar .df { height: 100%; border-radius: 6px; transition: width .7s var(--ease-out) }
    .radarwrap { display: flex; justify-content: center; margin: 10px 0 }

    /* Simulador de casos interactivo */
    .sim { max-width: 780px }
    .simprog { height: 6px; border-radius: 6px; background: var(--glass2); overflow: hidden; margin-bottom: 20px }
    .simprog > div { height: 100%; background: linear-gradient(90deg, var(--teal), #38bdf8); transition: width .5s var(--ease-out) }
    .simcard { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r3); padding: 26px; backdrop-filter: blur(14px); box-shadow: var(--shadow-card); animation: popIn .45s var(--ease-out) both }
    .simpt { display: flex; gap: 13px; margin-bottom: 6px }
    .simav { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.32) }
    .simav svg { width: 22px; height: 22px; stroke: #38bdf8 }
    .simbubble { background: rgba(56,189,248,.06); border: 1px solid rgba(56,189,248,.18); border-radius: 16px; border-top-left-radius: 4px; padding: 15px 18px; font-size: 14.5px; line-height: 1.65 }
    .simq { font-weight: 600; font-size: 15px; margin: 22px 0 12px }
    .simopts { display: flex; flex-direction: column; gap: 10px }
    .simopt { text-align: left; padding: 15px 17px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); cursor: pointer; font-family: var(--ff); font-size: 14px; line-height: 1.5; transition: var(--t) }
    .simopt:hover:not(:disabled) { border-color: rgba(45,212,191,.45); background: rgba(45,212,191,.06); transform: translateX(5px) }
    .simopt.picked-ok { border-color: rgba(45,212,191,.6); background: rgba(45,212,191,.1) }
    .simopt.picked-bad { border-color: rgba(248,113,113,.55); background: rgba(248,113,113,.1) }
    .simopt:disabled { cursor: default; opacity: .55 }
    .simfeed { margin-top: 16px; padding: 15px 18px; border-radius: 13px; font-size: 13.8px; line-height: 1.65; animation: fadeInUp .4s var(--ease-out) both }
    .simfeed.ok { background: rgba(45,212,191,.08); border-left: 3px solid var(--teal) }
    .simfeed.bad { background: rgba(248,113,113,.08); border-left: 3px solid var(--rose) }
    .simscore { font-family: var(--fd); font-size: 44px; font-weight: 800; color: var(--teal) }

    /* Visor anatómico / biomecánico */
    .visor { position: relative; background: radial-gradient(circle at 50% 28%, rgba(45,212,191,.07), transparent 62%), var(--bg2); border: 1px solid var(--line); border-radius: var(--r3); padding: 20px; overflow: auto; box-shadow: var(--shadow-card) }
    .visor svg { max-width: 100%; height: auto; display: block; margin: 0 auto }
    .hot { cursor: pointer; transition: filter .2s ease, transform .2s ease; transform-box: fill-box; transform-origin: center }
    .hot:hover { filter: brightness(1.4) drop-shadow(0 0 6px rgba(45,212,191,.6)) }
    .vinfo { margin-top: 16px; padding: 15px 18px; border-radius: 13px; background: rgba(45,212,191,.06); border-left: 3px solid var(--teal); font-size: 14px; line-height: 1.65; min-height: 26px }
    .vtag { font-family: var(--fm, monospace); font-size: 11px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px }

    /* Breadcrumbs */
    .crumbs { display: none; align-items: center; gap: 3px; flex-wrap: wrap; margin: 0 0 18px; font-size: 12.5px; animation: fadeIn .4s ease both }
    .crumbs.show { display: flex }
    .crumbs .clink { background: none; border: none; color: var(--dim); cursor: pointer; font-family: var(--ff); font-size: 12.5px; padding: 4px 8px; border-radius: 8px; transition: var(--t) }
    .crumbs .clink:hover { color: var(--teal); background: rgba(45, 212, 191, .08) }
    .crumbs .csep { color: var(--faint); margin: 0 1px }
    .crumbs .ccur { color: var(--ink); font-weight: 600; padding: 4px 8px }

    /* ════════════════════════════════════════════════════════════
       v10 — RESPONSIVIDAD TOTAL · FLUIDEZ · INTERFAZ IA  (capa final)
       Objetivo: en el celular se ve EXACTAMENTE lo mismo que en el PC,
       cada interacción responde con suavidad y nada se recorta.
       ════════════════════════════════════════════════════════════ */

    /* ── 1 · Anti-recorte global: el móvil nunca esconde contenido ── */
    *, *::before, *::after { box-sizing: border-box }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-y: auto; }
    body { max-width: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    img, svg, canvas, video, picture { max-width: 100%; height: auto }
    p, h1, h2, h3, h4, h5, li, span, b, strong, a, .tc, .amsg, .pt, .scn, .sctag, .qzq, .opt { overflow-wrap: anywhere }
    pre, code, kbd, samp { white-space: pre-wrap; word-break: break-word }
    /* causa #1 de desbordes: los hijos de grid/flex deben poder encogerse */
    .dcols > *, .ail > *, .stats > *, .sgrid > *, .cgrid > *, .scgrid > *,
    .calcgrid > *, .qtools > *, .rgrid > *, .tgrid > *, .agrid > *, .subact > *, .cdata > * { min-width: 0 }
    /* tablas: scroll propio en vez de romper el ancho */
    .tc table, table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }

    /* ── 2 · Transición de vistas fluida (antes entraba seca) ── */
    .view.show { animation: viIn .5s var(--e) both }
    @keyframes viIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

    /* ── 3 · Feedback táctil: cada toque responde (fluidez real) ── */
    .scard, .qtool, .rcard, .calc, .sccard, .ccard, .tcard, .opt, .scopt, .btn, .btnp,
    .subact button, .pom-mode-btn, .tabs button, .fcnav, .more, .clink, .qtool, .stat {
      -webkit-tap-highlight-color: transparent;
      transition: transform .22s var(--e), box-shadow .3s var(--e), background .25s ease, border-color .25s ease, color .22s ease;
    }
    .scard:active, .rcard:active, .calc:active, .sccard:active, .ccard:active, .tcard:active { transform: scale(.985) }
    .btn:active, .btnp:active, .subact button:active, .pom-mode-btn:active, .tabs button:active, .opt:active, .scopt:active, .fcnav:active { transform: scale(.95) }
    /* en pantalla táctil el hover "pegajoso" se cambia por press limpio */
    @media (hover: none) {
      .scard:hover, .rcard:hover, .calc:hover, .tcard:hover { transform: none; box-shadow: var(--shadow-card) }
    }

    /* ── 4 · Modal: siempre cabe y scrollea en el celular ── */
    .ov.show { overflow-y: auto; -webkit-overflow-scrolling: touch }
    .modal { max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch }

    /* ── 5 · Chat IA: burbujas con entrada suave + "escribiendo…" animado ── */
    .amsg { animation: msgIn .4s var(--e) both }
    @keyframes msgIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
    .achat { scroll-behavior: smooth }
    .amsg.aithink { display: inline-flex; align-items: center; gap: 9px }
    .amsg.aithink::after {
      content: ''; width: 34px; height: 9px; flex: none;
      background: radial-gradient(circle 4px at 5px 50%, var(--teal) 92%, transparent 0) 0 0 / 12px 100% repeat-x;
      animation: tdots .9s steps(3) infinite; opacity: .85;
    }
    @keyframes tdots { to { background-position: 36px 0 } }

    /* ── 6 · Barra de navegación inferior persistente (solo celular) ──
       Garantiza que SIEMPRE alcances todas las secciones desde el móvil. */
    .mbar { display: none }
    @media (max-width: 768px) {
      .mbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
        background: rgba(8, 11, 20, .93); backdrop-filter: blur(26px) saturate(160%);
        -webkit-backdrop-filter: blur(26px) saturate(160%);
        border-top: 1px solid var(--line2);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 34px -14px rgba(0,0,0,.75);
        animation: barUp .45s var(--e) both;
      }
      @keyframes barUp { from { transform: translateY(100%) } to { transform: none } }
      .mbtn {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        background: none; border: 0; color: var(--dim); font-family: var(--ff);
        font-size: 10px; letter-spacing: .01em; padding: 7px 2px; border-radius: 13px;
        cursor: pointer; transition: color .22s, background .22s, transform .18s var(--e); min-height: 50px;
      }
      .mbtn svg { width: 21px; height: 21px }
      .mbtn span { line-height: 1 }
      .mbtn.on { color: var(--teal); background: rgba(45,212,191,.1) }
      .mbtn:active { transform: scale(.9) }
      main { padding-bottom: 98px !important }   /* aire para la barra */
    }

    /* ── 7 · Botón "Cerrar" REAL en el drawer (el ✕ anterior no era clicable) ── */
    .navx {
      display: none; align-items: center; justify-content: center; gap: 8px;
      width: calc(100% - 32px); margin: env(safe-area-inset-top, 14px) 16px 6px;
      padding: 14px; font-family: var(--fm); font-size: 13px; letter-spacing: .1em;
      text-transform: uppercase; color: var(--ink2); background: var(--glass);
      border: 1px solid var(--line); border-radius: var(--r2); cursor: pointer; transition: var(--t);
    }
    .navx:hover { color: var(--rose); background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.3) }
    .navx:active { transform: scale(.97) }
    @media (max-width: 768px) {
      .nav.open .navx { display: flex }
      .nav::before { display: none !important }   /* oculta el falso botón ✕ */
    }

    /* ── 8 · Accesibilidad: foco visible por teclado ── */
    :where(button, a, input, textarea, select, [tabindex]):focus-visible {
      outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 7px;
    }

    /* ── 9 · Pulido fino transversal ── */
    .scard, .qtool, .rcard, .calc, .sccard, .ccard { backface-visibility: hidden }
    .vhead .eb { animation: fadeIn .6s ease both }
    .modal { animation: popIn .42s var(--ease-out, var(--e)) both }
    ::selection { background: rgba(45,212,191,.28); color: #fff }

    /* ── v10.1 · tablas clínicas dentro de la teoría ── */
    .tc table { border-collapse: collapse; margin: 14px 0; font-size: 13.5px; min-width: 340px; width: 100% }
    .tc table th, .tc table td { border: 1px solid var(--line2); padding: 9px 12px; text-align: left; vertical-align: top }
    .tc table th { background: rgba(45,212,191,.09); color: var(--teal); font-weight: 600; font-family: var(--ff); letter-spacing: .01em }
    .tc table td { color: var(--ink2) }
    .tc table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02) }

    /* ═══════════════════════════════════════════════════════════
       BODY MAP — ZygoteBody / PhysioMap Style
       ═══════════════════════════════════════════════════════════ */
    .bm-layout {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 0;
      max-width: 1100px;
      margin: 0 auto;
      min-height: 520px;
    }
    .bm-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .bm-bodies {
      display: flex;
      gap: 16px;
      justify-content: center;
    }
    .bm-body-panel {
      position: relative;
    }
    .bm-body-label {
      text-align: center;
      font-family: var(--fd);
      font-size: 12px;
      font-weight: 700;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 8px;
    }
    .bm-svg {
      width: 220px;
      height: auto;
      filter: drop-shadow(0 0 20px rgba(45,212,191,.08));
    }
    .bm-zone-glow {
      transition: opacity .3s ease, filter .3s ease;
      cursor: pointer;
    }
    .bm-zone-glow:hover {
      filter: brightness(1.4) drop-shadow(0 0 12px rgba(45,212,191,.5));
    }
    .bm-marker {
      transition: opacity .3s ease, transform .2s ease;
      cursor: pointer;
    }
    .bm-marker:hover {
      transform: scale(1.15);
    }
    .bm-marker:hover .bm-ring {
      fill: rgba(45,212,191,.18);
      stroke: var(--teal);
      stroke-width: 2;
    }
    .bm-marker:hover .bm-dot {
      r: 7;
      opacity: 1;
    }
    .bm-pulse {
      animation: bmPulse 2s ease-in-out infinite;
    }
    @keyframes bmPulse {
      0%, 100% { opacity: 0; r: 14; }
      50% { opacity: .4; r: 22; }
    }
    .bm-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      padding: 10px 20px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      color: var(--dim);
      font-size: 13px;
      animation: fadeInUp .6s var(--ease-out) both;
    }
    /* Sidebar */
    .bm-sidebar {
      background: var(--glass2);
      border-left: 1px solid var(--line);
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow-y: auto;
      max-height: 560px;
    }
    .bm-sb-section {
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }
    .bm-sb-section:last-child {
      border-bottom: none;
    }
    .bm-sb-title {
      font-family: var(--fd);
      font-size: 16px;
      font-weight: 700;
      color: var(--teal);
      margin-bottom: 6px;
    }
    .bm-sb-desc {
      font-size: 13px;
      color: var(--dim);
      line-height: 1.5;
    }
    .bm-sb-subtitle {
      font-family: var(--fd);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .bm-qa-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .bm-qa-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      transition: all .2s;
    }
    .bm-qa-btn:hover {
      background: rgba(45,212,191,.1);
      border-color: rgba(45,212,191,.3);
      color: var(--teal);
    }
    .bm-qa-btn:active {
      transform: scale(.97);
    }
    .bm-region-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .bm-region-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: var(--r1);
      cursor: pointer;
      transition: all .2s;
      font-size: 13px;
    }
    .bm-region-item:hover {
      background: var(--glass3);
    }
    .bm-region-item.hidden {
      opacity: 0.4;
    }
    .bm-region-item.hidden .bm-region-name {
      text-decoration: line-through;
    }
    /* Muscle toggle and overlays */
    .bm-muscle-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .bm-muscle-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      color: var(--dim);
      font-family: var(--ff);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
    }
    .bm-muscle-btn:hover {
      border-color: #ef4444;
      color: #ef4444;
      background: rgba(239,68,68,.08);
    }
    .bm-muscle-btn.active {
      background: rgba(239,68,68,.15);
      border-color: #ef4444;
      color: #ef4444;
    }
    .bm-muscle-count {
      font-size: 11px;
      color: var(--faint);
    }
    .bm-muscle {
      transition: opacity .2s, stroke-width .2s;
    }
    .bm-muscle:hover {
      opacity: 0.8;
      stroke-width: 2;
      filter: brightness(1.3);
    }
    .bm-region-item.active {
      background: rgba(45,212,191,.1);
    }
    .bm-region-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .bm-region-name {
      color: var(--ink);
      font-weight: 500;
      flex: 1;
    }
    .bm-region-side {
      color: var(--faint);
      font-size: 11px;
    }
    .bm-region-item.active .bm-region-name {
      color: var(--teal);
    }
    /* Modal */
    .bm-modal-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }
    .bm-section {
      margin-bottom: 20px;
    }
    .bm-sectitle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--fd);
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--ink);
    }
    .bm-sectitle svg {
      width: 16px;
      height: 16px;
    }
    /* Responsive */
    @media (max-width: 900px) {
      .bm-layout { grid-template-columns: 1fr; }
      .bm-sidebar { border-left: none; border-top: 1px solid var(--line); max-height: none; }
      .bm-bodies { gap: 8px; }
      .bm-svg { width: 160px; }
    }
    @media (max-width: 600px) {
      .bm-bodies { flex-direction: column; align-items: center; }
      .bm-svg { width: 200px; }
      .bm-qa-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════════
       BODY MAP — 3D VIEWER (Three.js)
       ═══════════════════════════════════════════════════════════ */
    .bm-toggle-bar {
      display: flex;
      gap: 4px;
      padding: 4px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      margin-bottom: 16px;
    }
    .bm-toggle-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: transparent;
      border: none;
      border-radius: var(--r1);
      color: var(--dim);
      font-family: var(--ff);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
    }
    .bm-toggle-btn:hover {
      color: var(--ink);
      background: var(--glass3);
    }
    .bm-toggle-btn.active {
      color: var(--teal);
      background: rgba(45,212,191,.12);
    }
    .bm-view-2d {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .bm-view-3d {
      display: none;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .bm-3d-container {
      width: 100%;
      height: 560px;
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r3);
      overflow: hidden;
      position: relative;
    }
    .bm-3d-container canvas {
      display: block;
    }
    .bm-3d-controls {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .bm-3d-sep {
      width: 1px;
      height: 24px;
      background: var(--line);
      margin: 0 4px;
    }
    .bm-3d-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      margin-bottom: 10px;
      width: 100%;
    }
    .bm-model-select {
      padding: 8px 12px;
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      color: var(--ink);
      font-family: var(--ff);
      font-size: 13px;
      cursor: pointer;
      min-width: 200px;
    }
    .bm-model-select:focus {
      outline: none;
      border-color: var(--teal);
    }
    .bm-3d-btn {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      color: var(--dim);
      cursor: pointer;
      transition: all .2s;
    }
    .bm-3d-btn:hover {
      border-color: var(--teal);
      color: var(--teal);
      background: rgba(45,212,191,.08);
    }
    .bm-3d-btn.active {
      background: rgba(45,212,191,.15);
      border-color: var(--teal);
      color: var(--teal);
    }
    .bm-3d-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 40px;
      color: var(--dim);
    }
    .bm-3d-placeholder h4 {
      font-family: var(--fd);
      font-size: 18px;
      color: var(--ink);
      margin: 16px 0 8px;
    }
    .bm-3d-placeholder p {
      font-size: 13px;
      margin: 4px 0;
    }
    .bm-3d-placeholder code {
      background: var(--glass3);
      padding: 2px 8px;
      border-radius: 4px;
      font-family: var(--fm);
      font-size: 12px;
      color: var(--teal);
    }
    .bm-3d-placeholder a {
      color: var(--teal);
      text-decoration: none;
    }
    .bm-3d-placeholder a:hover {
      text-decoration: underline;
    }
    /* 3D Body layout (viewer + parts panel) */
    .bm-3d-body {
      display: flex;
      gap: 10px;
      width: 100%;
    }
    .bm-3d-body .bm-3d-container {
      flex: 1;
      min-width: 0;
    }
    .bm-3d-parts {
      display: none;
      flex-direction: column;
      width: 220px;
      min-width: 220px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      max-height: 560px;
      overflow: hidden;
    }
    .bm-parts-title {
      padding: 10px 12px;
      font-family: var(--fd);
      font-size: 13px;
      font-weight: 700;
      color: var(--teal);
      border-bottom: 1px solid var(--line);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .bm-parts-list {
      flex: 1;
      overflow-y: auto;
      padding: 6px 0;
    }
    .bm-part-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      cursor: pointer;
      transition: background .15s;
      font-size: 12px;
      color: var(--ink);
    }
    .bm-part-item:hover {
      background: var(--glass3);
    }
    .bm-part-item input[type="checkbox"] {
      accent-color: var(--teal);
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
    .bm-part-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .bm-parts-empty {
      padding: 16px 12px;
      color: var(--dim);
      font-size: 12px;
      text-align: center;
    }
    .bm-parts-actions {
      display: flex;
      gap: 4px;
      padding: 6px 12px;
      border-bottom: 1px solid var(--line);
    }
    .bm-parts-action {
      flex: 1;
      padding: 4px 8px;
      background: var(--glass3);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      color: var(--dim);
      font-family: var(--ff);
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
    }
    .bm-parts-action:hover {
      background: rgba(45,212,191,.12);
      color: var(--teal);
      border-color: var(--teal);
    }
    /* Search Panel */
    .bm-3d-search {
      display: none;
      flex-direction: column;
      width: 280px;
      min-width: 280px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      max-height: 560px;
      overflow: hidden;
    }
    .bm-parts-close {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--dim);
      cursor: pointer;
      font-size: 14px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .bm-parts-close:hover {
      background: var(--glass3);
      color: var(--ink);
    }
    .bm-search-input-wrap {
      padding: 8px 12px;
      border-bottom: 1px solid var(--line);
    }
    .bm-search-input-wrap input {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      color: var(--ink);
      font-family: var(--ff);
      font-size: 12px;
      outline: none;
      transition: border-color .2s;
    }
    .bm-search-input-wrap input:focus {
      border-color: var(--teal);
    }
    .bm-search-input-wrap input::placeholder {
      color: var(--dim);
    }
    .bm-search-results {
      flex: 1;
      overflow-y: auto;
      padding: 6px 0;
    }
    .bm-search-category {
      margin-bottom: 4px;
    }
    .bm-search-cat-title {
      padding: 6px 12px;
      font-size: 10px;
      font-weight: 700;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .bm-search-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      cursor: pointer;
      transition: background .15s;
    }
    .bm-search-item:hover {
      background: var(--glass3);
    }
    .bm-search-item.online {
      border-left: 2px solid var(--cyan);
    }
    .bm-search-icon {
      font-size: 16px;
      width: 20px;
      text-align: center;
    }
    .bm-search-info {
      flex: 1;
      min-width: 0;
    }
    .bm-search-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bm-search-source {
      font-size: 10px;
      color: var(--dim);
    }
    .bm-search-load {
      padding: 4px 8px;
      background: rgba(45,212,191,.12);
      border: 1px solid rgba(45,212,191,.3);
      border-radius: var(--r1);
      color: var(--teal);
      font-family: var(--ff);
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
    }
    .bm-search-load:hover {
      background: rgba(45,212,191,.25);
    }
    .bm-search-empty {
      padding: 24px 12px;
      color: var(--dim);
      font-size: 12px;
      text-align: center;
    }
    .bm-anatomytoor-link {
      padding: 8px 12px;
      border-top: 1px solid var(--line);
      text-align: center;
    }
    .bm-anatomytoor-link a {
      color: var(--cyan);
      font-size: 11px;
      text-decoration: none;
      transition: opacity .2s;
    }
    .bm-anatomytoor-link a:hover {
      opacity: 0.8;
      text-decoration: underline;
    }
    .bm-search-help {
      padding: 12px;
      margin: 8px 12px;
      background: var(--glass3);
      border-radius: var(--r1);
      border: 1px solid var(--line);
    }
    .bm-search-help-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--teal);
      margin-bottom: 8px;
    }
    .bm-search-help p {
      font-size: 11px;
      color: var(--dim);
      margin-bottom: 8px;
    }
    .bm-search-help ol {
      margin: 0;
      padding-left: 16px;
      font-size: 11px;
      color: var(--ink2);
    }
    .bm-search-help li {
      margin-bottom: 4px;
    }
    .bm-search-help a {
      color: var(--cyan);
      text-decoration: none;
    }
    .bm-search-help a:hover {
      text-decoration: underline;
    }
    .bm-search-help code {
      background: var(--glass4);
      padding: 1px 4px;
      border-radius: 3px;
      font-size: 10px;
      color: var(--teal);
    }
    /* Fullscreen overlay */
    .bm-3d-fullscreen {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--bg);
      display: none;
      flex-direction: column;
    }
    .bm-3d-full-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 16px;
      background: var(--glass2);
      border-bottom: 1px solid var(--line);
    }
    .bm-3d-full-canvas {
      flex: 1;
      height: auto !important;
      border: none !important;
      border-radius: 0 !important;
    }
    /* Responsive 3D */
    @media (max-width: 900px) {
      .bm-3d-container { height: 360px; }
      .bm-3d-parts { width: 180px; min-width: 180px; }
      .bm-3d-search { width: 220px; min-width: 220px; }
    }
    @media (max-width: 600px) {
      .bm-3d-container { height: 300px; }
      .bm-toggle-btn { padding: 6px 12px; font-size: 12px; }
      .bm-3d-parts { display: none !important; }
      .bm-3d-search { display: none !important; }
    }

    /* ═══════════════════════════════════════════════════════════
       WEEKLY PLANNER
       ═══════════════════════════════════════════════════════════ */
    .plan-actions {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .plan-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      margin-bottom: 28px;
    }
    .plan-day {
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r2);
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      min-height: 180px;
      transition: border-color .25s, box-shadow .25s;
    }
    .plan-day:hover {
      border-color: var(--line2);
    }
    .plan-day.today {
      border-color: var(--teal);
      box-shadow: 0 0 0 1px var(--teal), 0 4px 20px -6px rgba(45,212,191,.2);
    }
    .plan-dayhead {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }
    .plan-dayname {
      font-family: var(--fd);
      font-size: 18px;
      font-weight: 800;
      color: var(--teal);
    }
    .plan-dayfull {
      font-size: 11px;
      color: var(--dim);
      display: none;
    }
    .plan-slots {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 8px;
    }
    .plan-empty {
      color: var(--faint);
      font-size: 12px;
      text-align: center;
      padding: 12px 0;
      font-style: italic;
    }
    .plan-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: color-mix(in srgb, var(--pc) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent);
      border-radius: var(--r1);
      font-size: 11px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
      transition: background .2s, transform .15s;
      animation: fadeInUp .3s var(--ease-out) both;
    }
    .plan-chip:hover {
      background: color-mix(in srgb, var(--pc) 22%, transparent);
      transform: scale(.97);
    }
    .plan-chipdot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .plan-chipx {
      margin-left: auto;
      font-size: 10px;
      opacity: .5;
    }
    .plan-chip:hover .plan-chipx {
      opacity: 1;
      color: var(--rose);
    }
    .plan-addbtn {
      width: 100%;
      padding: 6px;
      background: transparent;
      border: 1px dashed var(--line2);
      border-radius: var(--r1);
      color: var(--dim);
      font-size: 12px;
      font-family: var(--ff);
      cursor: pointer;
      transition: all .2s;
    }
    .plan-addbtn:hover {
      border-color: var(--teal);
      color: var(--teal);
      background: rgba(45,212,191,.05);
    }
    .plan-summary {
      margin-top: 8px;
    }

    /* Planner selection modal */
    .plan-select-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .plan-select-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: var(--glass2);
      border: 1px solid var(--line);
      border-radius: var(--r1);
      cursor: pointer;
      transition: all .2s;
    }
    .plan-select-item:hover {
      border-color: var(--line2);
      background: var(--glass3);
    }
    .plan-select-item.active {
      border-color: var(--pc);
      background: color-mix(in srgb, var(--pc) 10%, transparent);
    }
    .plan-select-check {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 2px solid var(--line2);
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 700;
      color: var(--teal);
      flex-shrink: 0;
      transition: all .2s;
    }
    .plan-select-item.active .plan-select-check {
      background: var(--teal);
      border-color: var(--teal);
      color: #04201c;
    }
    .plan-select-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .plan-select-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }

    /* Planner responsive */
    @media (max-width: 1024px) {
      .plan-grid { grid-template-columns: repeat(4, 1fr); }
      .plan-dayfull { display: inline; }
    }
    @media (max-width: 768px) {
      .bm-wrap { grid-template-columns: 1fr; max-width: 320px; }
      .plan-grid { grid-template-columns: repeat(2, 1fr); }
      .plan-select-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .plan-grid { grid-template-columns: 1fr; }
      .plan-day { min-height: auto; }
    }

    /* ===== ATLAS ANATÓMICO ===== */
    .atlas-regions {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 18px;
    }
    .atlas-region {
      display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
      padding: 16px 10px; border-radius: var(--r2); cursor: pointer;
      background: var(--glass); border: 1px solid var(--line);
      color: var(--dim); transition: var(--t);
    }
    .atlas-region svg { width: 26px; height: 26px; stroke: var(--ac); }
    .atlas-region b { font-size: 13px; color: var(--ink); }
    .atlas-region span { font-size: 11px; opacity: .7; }
    .atlas-region:hover { transform: translateY(-3px); border-color: var(--ac); }
    .atlas-region.on {
      border-color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent);
      box-shadow: 0 8px 30px -12px var(--ac);
    }
    .atlas-region.on b { color: var(--ac); }
    .atlas-intro {
      border-left: 3px solid var(--ac); background: color-mix(in srgb, var(--ac) 8%, transparent);
      padding: 12px 16px; border-radius: 0 var(--r1) var(--r1) 0; margin-bottom: 18px;
      font-size: 14px; line-height: 1.6; color: var(--ink2);
    }
    .atlas-search { position: relative; margin-bottom: 22px; }
    .atlas-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--dim); pointer-events: none; }
    .atlas-search input {
      width: 100%; padding: 13px 14px 13px 42px; border-radius: var(--r2);
      background: var(--glass); border: 1px solid var(--line2);
      color: var(--ink); font-size: 14px; font-family: var(--ff);
    }
    .atlas-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--glow2); }
    .atlas-sys { margin-bottom: 26px; }
    .atlas-sys-h {
      display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700;
      color: var(--ink); margin-bottom: 12px; padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }
    .atlas-sys-h span {
      font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
      background: color-mix(in srgb, var(--ac) 18%, transparent); color: var(--ac);
    }
    .atlas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
    .atlas-card {
      text-align: left; cursor: pointer; padding: 13px 15px; border-radius: var(--r1);
      background: var(--glass); border: 1px solid var(--line);
      border-left: 3px solid var(--ac); color: var(--ink);
      display: flex; flex-direction: column; gap: 4px; transition: var(--t);
    }
    .atlas-card:hover { transform: translateX(3px); background: color-mix(in srgb, var(--ac) 10%, transparent); }
    .atlas-card b { font-size: 14px; }
    .atlas-card span { font-size: 12px; opacity: .72; line-height: 1.45; }
    @media (max-width: 720px) {
      .atlas-regions { grid-template-columns: repeat(2, 1fr); }
      .atlas-grid { grid-template-columns: 1fr; }
    }

/* ============================================================
   KineAuth — Splash · Login · Register (scoped ka- prefix)
   ============================================================ */
:root{
  --ka-bg:#060910; --ka-bg2:#0a0e18; --ka-surface:#0f1420; --ka-surface2:#161c2b;
  --ka-line:rgba(255,255,255,.08); --ka-line2:rgba(255,255,255,.16);
  --ka-ink:#f0f4f8; --ka-ink2:#bdc8d4; --ka-dim:#7d8a98; --ka-faint:#505d6b;
  --ka-teal:#2dd4bf; --ka-cyan:#38bdf8; --ka-glow:rgba(45,212,191,.30);
  --ka-ok:#34d399; --ka-warn:#fbbf24; --ka-err:#f87171;
  --ka-r1:10px; --ka-r2:16px; --ka-r3:24px;
  --ka-ff:"Sora",system-ui,-apple-system,sans-serif;
  --ka-fm:"JetBrains Mono",ui-monospace,monospace;
  --ka-e:cubic-bezier(.22,1,.36,1);
}
body.ka-lock{overflow:hidden!important}
#ka-splash{position:fixed;inset:0;z-index:99000;display:none;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,var(--ka-bg),color-mix(in srgb,var(--ka-bg) 80%,var(--ka-cyan)),color-mix(in srgb,var(--ka-bg) 70%,var(--ka-cyan)))}
#ka-splash.ka-out{opacity:0;pointer-events:none;transition:opacity .7s var(--ka-e)}
#ka-particles{position:absolute;inset:0;z-index:1}
.ka-splash-mid{position:relative;z-index:3;text-align:center;padding:0 18px}
.ka-logo-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}
.ka-logo-mark{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ka-teal),var(--ka-cyan));
  box-shadow:0 10px 34px -8px var(--ka-glow);animation:ka-pop .8s var(--ka-e) both}
@keyframes ka-pop{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
.ka-title{font-family:var(--ka-ff);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(40px,9vw,76px);line-height:.95;
  background:linear-gradient(120deg,#fff,#cfe9e6 55%,#7ab8c8);
  -webkit-background-clip:text;background-clip:text;color:transparent;min-height:1.1em;display:inline-block}
.ka-title .cur{color:var(--ka-teal);-webkit-text-fill-color:var(--ka-teal);
  animation:ka-blink 1s steps(1) infinite;font-weight:400}
@keyframes ka-blink{50%{opacity:0}}
.ka-sub{margin-top:14px;color:var(--ka-ink2);font-weight:300;font-size:clamp(14px,2vw,18px);
  transform:translateY(8px);opacity:0;animation:ka-fade .9s var(--ka-e) 1.1s forwards}
@keyframes ka-fade{to{opacity:1;transform:translateY(0)}}
.ka-ecg{position:absolute;left:0;right:0;bottom:34px;z-index:2;opacity:.6}
.ka-ecg path{stroke:var(--ka-teal);stroke-width:2;fill:none;stroke-dasharray:1400;stroke-dashoffset:1400;
  filter:drop-shadow(0 0 6px var(--ka-glow))}
#ka-splash.active .ka-ecg path{animation:ka-trace 2.4s linear infinite}
@keyframes ka-trace{to{stroke-dashoffset:0}}
#ka-auth{position:fixed;inset:0;z-index:98000;display:none;align-items:center;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  background:radial-gradient(120% 120% at 80% 0%,rgba(45,212,191,.10),transparent 55%),
    linear-gradient(180deg,var(--ka-bg),var(--ka-bg2))}
#ka-auth.ka-show{display:flex;animation:ka-fade2 .5s var(--ka-e)}
@keyframes ka-fade2{from{opacity:0}to{opacity:1}}
#ka-auth .ka-card{width:100%;max-width:430px;background:var(--ka-surface);border:1px solid var(--ka-line);
  border-radius:var(--ka-r3);padding:clamp(24px,5vw,38px);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  backdrop-filter:blur(8px);margin:auto;color:var(--ka-ink)}
#ka-auth .ka-brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
#ka-auth .ka-brand .m{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ka-teal),var(--ka-cyan));box-shadow:0 6px 20px -6px var(--ka-glow)}
#ka-auth .ka-brand b{font-size:19px;font-weight:800}#ka-auth .ka-brand b span{color:var(--ka-teal)}
#ka-auth .ka-h{font-size:23px;font-weight:700;margin:14px 0 4px;color:var(--ka-ink)}
#ka-auth .ka-p{color:var(--ka-dim);font-size:14px;margin-bottom:22px}
#ka-auth .ka-field{margin-bottom:15px;position:relative}
#ka-auth .ka-row{display:flex;gap:12px}#ka-auth .ka-row>.ka-field{flex:1}
#ka-auth .ka-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ka-ink2);margin-bottom:7px}
#ka-auth .ka-input,#ka-auth .ka-select{width:100%;background:var(--ka-surface2);border:1.5px solid var(--ka-line);
  border-radius:var(--ka-r1);padding:12px 14px;color:var(--ka-ink);font-family:var(--ka-ff);font-size:14.5px;
  transition:border-color .2s,box-shadow .2s}
#ka-auth .ka-select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%237d8a98'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
#ka-auth .ka-select option{background:var(--ka-surface);color:var(--ka-ink)}
#ka-auth .ka-input:focus,#ka-auth .ka-select:focus{outline:none;border-color:var(--ka-teal);box-shadow:0 0 0 3px rgba(45,212,191,.12)}
#ka-auth .ka-field.ok .ka-input{border-color:var(--ka-ok)}
#ka-auth .ka-field.err .ka-input{border-color:var(--ka-err)}
#ka-auth .ka-msg{font-size:11.5px;margin-top:5px;min-height:14px;color:var(--ka-err);opacity:0;transition:opacity .2s}
#ka-auth .ka-field.err .ka-msg,#ka-auth .ka-field.ok .ka-msg{opacity:1}
#ka-auth .ka-field.ok .ka-msg{color:var(--ka-ok)}
#ka-auth .ka-eye{position:absolute;right:10px;top:33px;cursor:pointer;color:var(--ka-dim);background:none;border:none;padding:4px;display:grid;place-items:center}
#ka-auth .ka-eye:hover{color:var(--ka-ink)}
#ka-auth .ka-meter{height:5px;border-radius:5px;background:var(--ka-surface2);overflow:hidden;margin-top:8px}
#ka-auth .ka-meter i{display:block;height:100%;width:0;border-radius:5px;transition:.4s var(--ka-e),background .3s}
#ka-auth .ka-btn,.ka-btn{width:100%;padding:14px;border:none;border-radius:var(--ka-r1);cursor:pointer;
  font-family:var(--ka-ff);font-weight:700;font-size:15px;color:#04201c;
  background:linear-gradient(120deg,var(--ka-teal),var(--ka-cyan));
  box-shadow:0 12px 32px -10px var(--ka-glow);transition:transform .2s var(--ka-e),box-shadow .2s;
  position:relative;overflow:hidden;margin-top:6px}
#ka-auth .ka-btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -10px var(--ka-glow)}
#ka-auth .ka-btn:active{transform:translateY(0) scale(.99)}
.ka-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ka-rip .6s linear;pointer-events:none}
@keyframes ka-rip{to{transform:scale(4);opacity:0}}
#ka-auth .ka-switch{text-align:center;margin-top:18px;font-size:13.5px;color:var(--ka-dim)}
#ka-auth .ka-switch button{background:none;border:none;color:var(--ka-teal);font-weight:600;cursor:pointer;font-family:var(--ka-ff);font-size:13.5px}
#ka-auth .ka-switch button:hover{text-decoration:underline}
#ka-auth .ka-foot{margin-top:18px;text-align:center;font-size:11px;color:var(--ka-faint)}
#ka-auth .ka-toperr{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--ka-err);
  border-radius:var(--ka-r1);padding:10px 14px;font-size:13px;margin-bottom:16px;display:none}
#ka-auth .ka-toperr.ka-show{display:block;animation:ka-fade2 .3s}
#ka-logout-btn{background:transparent;border:none;cursor:pointer;color:var(--dim);padding:0 8px;display:grid;place-items:center}
#ka-logout-btn:hover{color:var(--coral,#fb7185)}
@media(prefers-reduced-motion:reduce){#ka-splash *,#ka-auth *{animation-duration:.01ms!important}}
@media(max-width:480px){#ka-auth .ka-row{flex-direction:column;gap:0}}

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════ */
#landing{min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--ff);overflow-x:hidden}
#landing.hide{display:none}

/* Navbar */
.lp-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(6,9,16,.85);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--line)}
.lp-nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
.lp-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;font-family:var(--fd);flex-shrink:0}
.lp-brand span{color:var(--teal)}
.lp-nav-links{display:flex;gap:28px;flex:1;justify-content:center}
.lp-nav-links a{color:var(--dim);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}
.lp-nav-links a:hover{color:var(--ink)}
.lp-nav-actions{display:flex;gap:10px;flex-shrink:0}
.lp-mobile-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px}

/* Buttons */
.lp-btn-primary{background:linear-gradient(135deg,var(--teal),#38bdf8);color:#04201c;font-weight:700;border:none;border-radius:var(--r2);cursor:pointer;font-family:var(--ff);transition:all .25s var(--e);padding:12px 28px;font-size:15px}
.lp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px var(--glow)}
.lp-btn-ghost{background:transparent;color:var(--ink);font-weight:600;border:1.5px solid var(--line2);border-radius:var(--r2);cursor:pointer;font-family:var(--ff);transition:all .25s var(--e);padding:12px 28px;font-size:15px}
.lp-btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:var(--glow2)}
.lp-btn-lg{padding:16px 36px;font-size:17px;border-radius:var(--r3)}

/* Hero */
.lp-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 24px 60px;overflow:hidden;contain:layout style}
.lp-hero-bg{position:absolute;inset:0;overflow:hidden}
.lp-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;animation:lp-float 20s ease-in-out infinite}
.lp-orb-1{width:500px;height:500px;background:var(--teal);top:-10%;left:-5%;animation-delay:0s}
.lp-orb-2{width:400px;height:400px;background:var(--cyan);bottom:-10%;right:-5%;animation-delay:-7s}
.lp-orb-3{width:300px;height:300px;background:var(--violet);top:40%;left:50%;animation-delay:-14s}
@keyframes lp-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}
.lp-hero-content{position:relative;z-index:2;text-align:center;max-width:800px}
.lp-badge{display:inline-block;font-family:var(--fm);letter-spacing:.35em;text-transform:uppercase;font-size:clamp(9px,1.2vw,11px);color:var(--teal);background:var(--glow2);border:1px solid rgba(45,212,191,.2);border-radius:40px;padding:8px 20px;margin-bottom:28px}
.lp-title{font-family:var(--fd);font-weight:800;line-height:1.05;letter-spacing:-.03em;font-size:clamp(36px,7vw,72px);margin-bottom:24px}
.lp-accent{background:linear-gradient(135deg,var(--teal),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lp-sub{font-size:clamp(16px,2vw,20px);color:var(--dim);line-height:1.65;max-width:640px;margin:0 auto 40px}
.lp-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.lp-hero-stats{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.lp-stat{text-align:center}
.lp-stat-num{display:block;font-family:var(--fd);font-size:28px;font-weight:800;color:var(--teal)}
.lp-stat-label{font-size:13px;color:var(--dim);margin-top:2px}
.lp-stat-divider{width:1px;height:32px;background:var(--line2)}

/* Sections */
.lp-section{padding:100px 24px;contain:layout style}
.lp-section-alt{background:var(--bg2)}
.lp-section-inner{max-width:1100px;margin:0 auto}
.lp-section-badge{display:inline-block;font-family:var(--fm);letter-spacing:.3em;text-transform:uppercase;font-size:10px;color:var(--teal);background:var(--glow2);border:1px solid rgba(45,212,191,.15);border-radius:40px;padding:6px 16px;margin-bottom:16px}
.lp-section-title{font-family:var(--fd);font-weight:800;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;margin-bottom:12px}
.lp-section-sub{color:var(--dim);font-size:clamp(15px,1.8vw,18px);line-height:1.6;max-width:600px;margin-bottom:48px}

/* Features Grid */
.lp-features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.lp-feature-card{background:var(--glass2);border:1px solid var(--line);border-radius:var(--r2);padding:28px;transition:all .3s var(--e);will-change:transform}
.lp-feature-card:hover{border-color:rgba(45,212,191,.25);transform:translateY(-4px);box-shadow:0 20px 50px -16px rgba(0,0,0,.5)}
.lp-feature-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px}
.lp-feature-card h3{font-size:17px;font-weight:700;margin-bottom:8px}
.lp-feature-card p{font-size:14px;color:var(--dim);line-height:1.6}

/* Subjects Grid */
.lp-subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.lp-subject-card{background:var(--glass2);border:1px solid var(--line);border-radius:var(--r2);padding:24px;display:flex;align-items:flex-start;gap:16px;transition:all .3s var(--e);cursor:default;will-change:transform}
.lp-subject-card:hover{border-color:var(--sc,var(--teal));transform:translateY(-3px);box-shadow:0 16px 40px -12px rgba(0,0,0,.4)}
.lp-subject-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);color:var(--sc,var(--teal));flex-shrink:0}
.lp-subject-card h4{font-size:15px;font-weight:700;margin-bottom:4px}
.lp-subject-card p{font-size:13px;color:var(--dim)}

/* About Grid */
.lp-about-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.lp-about-card{background:var(--glass2);border:1px solid var(--line);border-radius:var(--r2);padding:32px}
.lp-about-num{font-family:var(--fd);font-size:48px;font-weight:800;color:var(--teal);opacity:.25;line-height:1;margin-bottom:12px}
.lp-about-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.lp-about-card p{font-size:14px;color:var(--dim);line-height:1.65}

/* FAQ */
.lp-faq-list{max-width:700px;display:flex;flex-direction:column;gap:10px}
.lp-faq-item{background:var(--glass2);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.lp-faq-item summary{padding:18px 24px;cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;align-items:center;justify-content:space-between;transition:background .2s}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary::after{content:'+';font-size:20px;color:var(--teal);transition:transform .2s}
.lp-faq-item[open] summary::after{transform:rotate(45deg)}
.lp-faq-item[open]{border-color:rgba(45,212,191,.2)}
.lp-faq-item p{padding:0 24px 18px;font-size:14px;color:var(--dim);line-height:1.65}

/* CTA */
.lp-cta-section{background:linear-gradient(180deg,var(--bg2),var(--bg));padding:120px 24px}

/* Footer */
.lp-footer{border-top:1px solid var(--line);padding:48px 24px 24px}
.lp-footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:32px}
.lp-footer-brand{max-width:280px}
.lp-footer-brand b{font-size:16px;margin-left:8px;font-family:var(--fd)}
.lp-footer-brand b span{color:var(--teal)}
.lp-footer-brand p{font-size:13px;color:var(--dim);margin-top:10px;line-height:1.5}
.lp-footer-links{display:flex;gap:60px}
.lp-footer-links h4{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em}
.lp-footer-links a{display:block;font-size:13px;color:var(--dim);text-decoration:none;margin-bottom:8px;transition:color .2s}
.lp-footer-links a:hover{color:var(--teal)}
.lp-footer-copy{text-align:center;font-size:12px;color:var(--faint);padding-top:24px;border-top:1px solid var(--line);max-width:1100px;margin:0 auto}

/* Responsive */
@media(max-width:768px){
  .lp-nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(6,9,16,.97);backdrop-filter:blur(20px);flex-direction:column;padding:20px 24px;gap:16px;border-bottom:1px solid var(--line)}
  .lp-nav-links.open{display:flex}
  .lp-nav-actions{display:none}
  .lp-mobile-toggle{display:block;margin-left:auto}
  .lp-hero{padding:100px 20px 40px;min-height:auto}
  .lp-hero-btns{flex-direction:column;align-items:center}
  .lp-hero-stats{gap:20px}
  .lp-section{padding:60px 20px}
  .lp-features-grid{grid-template-columns:1fr}
  .lp-subjects-grid{grid-template-columns:1fr 1fr}
  .lp-about-grid{grid-template-columns:1fr}
  .lp-footer-links{gap:32px}
  .lp-footer-inner{flex-direction:column}
}
@media(max-width:480px){
  .lp-subjects-grid{grid-template-columns:1fr}
  .lp-nav-inner{padding:0 16px}
  .lp-hero{padding-top:80px}
}

/* ── PDF Export / Print ── */
/* ============================================================
   UIVERSE.IO INSPIRED ANIMATIONS & UI ENHANCEMENTS
   ============================================================ */

/* Glow Button Effect */
.btn-glow {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, var(--teal), transparent 30%);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-glow:hover::before {
  opacity: 1;
  animation: rotateGlow 4s linear infinite;
}
.btn-glow::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--bg2);
  border-radius: inherit;
  z-index: 0;
}
.btn-glow > * {
  position: relative;
  z-index: 1;
}
@keyframes rotateGlow {
  100% { transform: rotate(360deg); }
}

/* Floating Orb Animation */
@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}
@keyframes floatOrb2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(5deg); }
  66% { transform: translateY(10px) rotate(-3deg); }
}

/* Card Tilt Hover Effect */
.tilt-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}
.tilt-card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px var(--glow2);
}

/* Shimmer Loading Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--glass) 25%, var(--glass3) 50%, var(--glass) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r2);
}

/* Pulse Glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px var(--glow2); }
  50% { box-shadow: 0 0 20px var(--glow), 0 0 40px var(--glow2); }
}
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Smooth Scale on Click */
.press-effect {
  transition: transform 0.15s ease;
}
.press-effect:active {
  transform: scale(0.95);
}

/* Slide In Animations */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-slide-up { animation: slideInUp 0.5s ease-out forwards; }
.anim-slide-left { animation: slideInLeft 0.5s ease-out forwards; }
.anim-slide-right { animation: slideInRight 0.5s ease-out forwards; }
.anim-fade { animation: fadeIn 0.4s ease-out forwards; }

/* Stagger children animation */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.4s; }

/* Ripple Effect on Click */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--teal) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.8s;
}
.ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.2;
  transition: 0s;
}

/* Neon Border Glow */
.neon-border {
  border: 1px solid var(--teal);
  box-shadow: 0 0 5px var(--glow2), inset 0 0 5px var(--glow2);
  transition: box-shadow 0.3s ease;
}
.neon-border:hover {
  box-shadow: 0 0 15px var(--glow), 0 0 30px var(--glow2), inset 0 0 10px var(--glow2);
}

/* Morphing Blob Background */
@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 60% 40% 30% 70%; }
}
.morph-blob {
  animation: morphBlob 8s ease-in-out infinite;
}

/* Typing Cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--teal);
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg2);
}
::-webkit-scrollbar-thumb {
  background: var(--glass4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}

/* Focus Ring */
*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Landing Page Enhancements */
.lp-subject-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.lp-subject-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  border-color: var(--sc, var(--teal));
}
.lp-feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.lp-btn-primary {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.lp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--glow);
}
.lp-btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Dashboard Card Hover */
.scard {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.scard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  border-color: var(--sc, var(--teal));
}

/* Nav Link Underline Effect */
.lp-nav-links a {
  position: relative;
}
.lp-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 0.3s ease, left 0.3s ease;
}
.lp-nav-links a:hover::after {
  width: 100%;
  left: 0;
}

/* FAQ Accordion */
.lp-faq-item summary {
  transition: color 0.2s ease;
}
.lp-faq-item summary:hover {
  color: var(--teal);
}
.lp-faq-item[open] summary {
  color: var(--teal);
}

/* Toast Animation Enhancement */
.toast {
  animation: slideInUp 0.3s ease-out, fadeIn 0.3s ease-out;
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--glass3);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Wave Loading */
@keyframes wave {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}
.wave-loader {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 20px;
}
.wave-loader span {
  width: 3px;
  height: 100%;
  background: var(--teal);
  animation: wave 1.2s ease-in-out infinite;
}
.wave-loader span:nth-child(2) { animation-delay: 0.1s; }
.wave-loader span:nth-child(3) { animation-delay: 0.2s; }
.wave-loader span:nth-child(4) { animation-delay: 0.3s; }
.wave-loader span:nth-child(5) { animation-delay: 0.4s; }

/* Counter Animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.count-up {
  animation: countUp 0.6s ease-out forwards;
}

/* Glow Pulse on Stats */
.stat {
  transition: all 0.3s ease;
}
.stat:hover {
  background: var(--glass3);
  transform: scale(1.05);
}

/* ===== PLANNER VIEW TABS ===== */
.plan-view-tabs {
  display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
}
.plan-view-tabs button {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  border: 1px solid var(--line2, rgba(255,255,255,.08)); border-radius: 8px;
  background: var(--glass, rgba(255,255,255,.03)); color: var(--dim, #9fb2bd);
  cursor: pointer; font-size: 13px; font-weight: 500; transition: all .2s;
}
.plan-view-tabs button:hover { border-color: var(--accent); color: var(--accent); }
.plan-view-tabs button.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.plan-view-tabs button svg { width: 14px; height: 14px; }

/* Planner drag & drop */
.plan-chip.draggable { cursor: grab; }
.plan-chip.draggable:active { cursor: grabbing; opacity: 0.7; }
.plan-day.drag-over { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Planner monthly view */
.plan-month-header { text-align: center; margin-bottom: 16px; }
.plan-month-header h3 { margin: 0; color: var(--ink); font-size: 18px; }
.plan-month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 20px;
}
.plan-cal {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; border-radius: 8px; cursor: pointer;
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--line2, rgba(255,255,255,.08));
  transition: all .15s;
}
.plan-cal:hover { border-color: var(--accent); transform: scale(1.05); }
.plan-cal.today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.plan-cal.empty { opacity: 0.3; cursor: default; }
.plan-cal.empty:hover { transform: none; border-color: var(--line2); }
.plan-cal-day { font-size: 14px; font-weight: 600; color: var(--ink); }
.plan-cal-chips { display: flex; gap: 3px; }
.plan-cal-dot { width: 6px; height: 6px; border-radius: 50%; }
.plan-cal-more { font-size: 9px; color: var(--dim); }

/* Planner goals */
.plan-goals-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.plan-goal-card {
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--line2, rgba(255,255,255,.08));
  border-radius: 12px; padding: 16px; transition: transform .15s;
}
.plan-goal-card:hover { transform: translateY(-2px); }
.plan-goal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.plan-goaldot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.plan-goalname { font-size: 13px; font-weight: 600; color: var(--ink); }
.plan-goal-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.plan-goal-field label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.plan-goal-field input {
  width: 100%; padding: 8px 10px; background: var(--bg2, rgba(0,0,0,.2));
  border: 1px solid var(--line2, rgba(255,255,255,.08)); border-radius: 6px;
  color: var(--ink); font-size: 14px; text-align: center;
}
.plan-goal-field input:focus { outline: none; border-color: var(--accent); }
.plan-goal-bar {
  height: 6px; background: var(--line2, rgba(255,255,255,.08)); border-radius: 3px; overflow: hidden;
}
.plan-goal-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
.plan-goal-pct { text-align: right; font-size: 12px; color: var(--dim); margin-top: 4px; }

/* ===== GLOSARIO ===== */
.gloss-search { margin-bottom: 16px; }
.gloss-cats {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.gloss-cats button {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line2, rgba(255,255,255,.08));
  background: var(--glass, rgba(255,255,255,.03)); color: var(--dim, #9fb2bd);
  cursor: pointer; font-size: 12px; transition: all .15s;
}
.gloss-cats button:hover { border-color: var(--accent); color: var(--accent); }
.gloss-cats button.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.gloss-list { display: flex; flex-direction: column; gap: 8px; }
.gloss-item {
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--line2, rgba(255,255,255,.08));
  border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all .15s;
}
.gloss-item:hover { border-color: var(--accent); transform: translateX(4px); }
.gloss-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gloss-term { font-weight: 600; color: var(--ink); font-size: 14px; }
.gloss-cat { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; flex-shrink: 0; }
.gloss-desc {
  font-size: 13px; color: var(--text2, #8899a6); margin-top: 8px; line-height: 1.5;
  display: none;
}
.gloss-item.open .gloss-desc { display: block; }

/* ===== ESCALAS CLÍNICAS DETALLADAS ===== */
.sc-cats {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.sc-cats button {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line2, rgba(255,255,255,.08));
  background: var(--glass, rgba(255,255,255,.03)); color: var(--dim, #9fb2bd);
  cursor: pointer; font-size: 12px; transition: all .15s;
}
.sc-cats button:hover { border-color: var(--accent); color: var(--accent); }
.sc-cats button.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.sc-detail { max-width: 600px; }
.sc-items { display: flex; flex-direction: column; gap: 8px; }
.sc-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--line2, rgba(255,255,255,.08));
  border-radius: 10px; cursor: pointer; transition: all .15s;
}
.sc-item:hover { border-color: var(--accent); transform: translateX(4px); }
.sc-item.selected {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.sc-val {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 8px;
  font-weight: 700; color: var(--accent); font-size: 14px; flex-shrink: 0;
}
.sc-label { font-size: 14px; color: var(--ink); font-weight: 500; }

@media print {
  .top, .mbar, .theme-selector, .modal, .toast, #ka-splash, #ka-auth, #searchModal,
  #landing, .nav, button, .qtool, .more, .ccrumbs, .grain, .vig, .cprog, #skip, #cinema { display: none !important }
  body { background: #fff !important; color: #000 !important }
  #app { display: block !important; opacity: 1 !important }
  main { max-width: 100% !important; padding: 0 !important }
  .view { display: block !important; page-break-inside: avoid; margin-bottom: 24px }
  .greet, .stats, .dcols, .panel { page-break-inside: avoid }
  h2, h3, h4 { page-break-after: avoid }
  a { text-decoration: none !important; color: #000 !important }
}

/* Reloader dots animation */
.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.dot {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #b3d4fc;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #6793fb;
    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }
}