*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html,
    body {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      font-size: 14px;
      line-height: 1.5;
      min-height: 100vh;
      color: var(--tx);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: 'liga' 1, 'calt' 1
    }

    /* ── Wordmark Adsmin (recreado, se adapta al color del contexto) ── */
    .adwm {
      font-family: 'Onest', system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
      display: inline-flex;
      align-items: baseline;
      color: currentColor;
      user-select: none;
    }
    .adwm i {
      width: .16em;
      height: .16em;
      border-radius: 50%;
      background: #8b5cf6;
      margin-left: .09em;
      align-self: flex-end;
      margin-bottom: .1em;
    }
    /* Latido de brillo del punto en el logo principal (header) */
    .adwm-pulse i {
      transform-origin: center;
      animation: adot-beat 1.8s ease-in-out infinite;
    }
    @keyframes adot-beat {
      0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
      50%      { transform: scale(1.14); box-shadow: 0 0 10px 3px rgba(139, 92, 246, .8); }
    }
    @media (prefers-reduced-motion: reduce) {
      .adwm-pulse i { animation: none; }
    }
    /* Mini-avatar de Marky (mascota como copiloto) */
    .mav {
      display: inline-block;
      border-radius: 50%;
      background: linear-gradient(150deg, #bfe38a, #93d05a) url('/logo-square.png') no-repeat 50% 13% / 168%;
      flex-shrink: 0;
    }


    /* ═══ LANDING — Claymorphism ═══ */
    #pg-landing {
      --lbg: #e9e6f6;
      --lbg2: #f1eefb;
      --lclay: #f7f5fe;
      --lhi: rgba(255, 255, 255, .95);
      --llo: rgba(123, 94, 193, .22);
      --ltx: #2f2a48;
      --ltx2: #6d698a;
      --ltx3: #a29ebc;
      --lac: #7c3aed;
      background: var(--lbg);
      color: var(--ltx);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow-x: hidden
    }

    #pg-app {
      display: none;
      min-height: 100vh
    }

    .lb {
      position: fixed;
      border-radius: 50%;
      filter: blur(64px);
      z-index: 0;
      opacity: .5;
      pointer-events: none
    }

    .lb-a { width: 520px; height: 520px; background: #c9b6ff; top: -170px; left: -120px }
    .lb-b { width: 460px; height: 460px; background: #ffc0e6; bottom: -180px; right: -110px }
    .lb-c { width: 360px; height: 360px; background: #b8f0d8; top: 42%; right: 12% }

    .lw {
      position: relative;
      z-index: 2;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 28px;
      width: 100%
    }

    .clay {
      background: var(--lclay);
      border-radius: 26px;
      box-shadow: 13px 15px 32px var(--llo), -10px -10px 24px var(--lhi), inset 0 2px 3px rgba(255, 255, 255, .7)
    }

    /* header */
    .l-hdr { padding: 22px 0; position: relative; z-index: 2 }
    .l-hdr-inner { display: flex; align-items: center; justify-content: space-between }
    .l-logo { height: 66px; object-fit: contain }
    .l-ghost {
      text-decoration: none;
      background: var(--lclay);
      color: var(--lac);
      padding: 11px 22px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 6px 7px 15px var(--llo), -6px -6px 13px var(--lhi);
      transition: transform .12s
    }
    .l-ghost:hover { transform: translateY(-1px) }

    /* hero */
    .l-hero { position: relative; padding: 22px 0 72px; min-height: 74vh }
    .l-center { max-width: 480px; margin: 0 auto; text-align: center; position: relative; z-index: 6 }
    .l-ey {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--lclay);
      border-radius: 100px;
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 700;
      color: var(--lac);
      margin-bottom: 22px;
      box-shadow: 5px 6px 14px var(--llo), -5px -5px 12px var(--lhi)
    }
    .l-ver { background: var(--lbg); color: var(--lac); font-weight: 800; font-size: 11px; padding: 3px 9px; border-radius: 8px; letter-spacing: .01em; box-shadow: inset 2px 2px 5px var(--llo), inset -2px -2px 5px var(--lhi) }
    .l-h1 { font-size: 46px; line-height: 1.05; letter-spacing: -.03em; font-weight: 800; margin-bottom: 16px; color: var(--ltx) }
    .l-h1 span { color: var(--lac) }
    .l-sub { font-size: 15px; line-height: 1.6; color: var(--ltx2); font-weight: 500; max-width: 420px; margin: 0 auto 26px }

    /* login card */
    .lc {
      padding: 26px 26px 24px;
      position: relative;
      margin: 104px auto 0;
      max-width: 420px
    }
    .l-mascot {
      position: absolute;
      top: -84px;
      left: 50%;
      transform: translateX(-50%);
      width: 158px;
      height: 128px;
      background: url('/marky-face.png') no-repeat 50% 50% / contain;
      filter: drop-shadow(5px 8px 9px rgba(80, 120, 55, .30));
    }
    .l-bubble {
      position: absolute;
      top: -96px;
      right: calc(50% - 150px);
      background: var(--lclay);
      border-radius: 16px 16px 16px 4px;
      padding: 9px 14px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ltx);
      box-shadow: 6px 7px 15px var(--llo), -5px -5px 12px var(--lhi);
      transform: rotate(-4deg)
    }
    .lc-t { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 44px 0 3px; color: var(--ltx) }
    .lc-s { font-size: 12.5px; color: var(--ltx2); font-weight: 500; margin-bottom: 20px }

    #pg-landing .lsub-google {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--lclay);
      color: var(--ltx);
      border: none;
      border-radius: 15px;
      padding: 12px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 5px 6px 13px var(--llo), -5px -5px 12px var(--lhi);
      margin-bottom: 6px;
      transition: transform .12s
    }
    #pg-landing .lsub-google:hover { transform: translateY(-1px); box-shadow: 6px 7px 15px var(--llo), -5px -5px 12px var(--lhi) }

    #pg-landing .lsep {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 16px 0;
      color: var(--ltx3);
      font-size: 11px;
      font-weight: 700
    }
    #pg-landing .lsep::before,
    #pg-landing .lsep::after { content: ''; flex: 1; height: 2px; background: rgba(123, 94, 193, .13); border-radius: 2px }

    .lf { margin-bottom: 13px; text-align: left }
    .lf label { display: block; font-size: 11px; font-weight: 700; color: var(--ltx2); margin-bottom: 7px; letter-spacing: 0; text-transform: none }
    .lf input {
      width: 100%;
      background: var(--lbg);
      border: none;
      border-radius: 14px;
      padding: 12px 15px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      color: var(--ltx);
      outline: none;
      box-shadow: inset 5px 5px 10px var(--llo), inset -5px -5px 10px var(--lhi);
      transition: box-shadow .15s
    }
    .lf input::placeholder { color: var(--ltx3) }
    .lf input:focus { box-shadow: inset 5px 5px 10px var(--llo), inset -5px -5px 10px var(--lhi), 0 0 0 2px rgba(124, 58, 237, .32) }
    .lf input.le { box-shadow: inset 5px 5px 10px var(--llo), inset -5px -5px 10px var(--lhi), 0 0 0 2px rgba(220, 38, 38, .4) }

    .lerr {
      background: #ffe0e6;
      border: none;
      border-radius: 12px;
      padding: 10px 13px;
      font-size: 12px;
      color: #c2314f;
      margin-bottom: 13px;
      font-weight: 600;
      display: none;
      box-shadow: inset 3px 3px 7px rgba(194, 49, 79, .1), inset -3px -3px 7px rgba(255, 255, 255, .7)
    }

    .lsub {
      width: 100%;
      background: linear-gradient(145deg, #8b5cf6, #7c3aed);
      color: #fff;
      border: none;
      padding: 13px;
      border-radius: 15px;
      font-size: 14.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      margin-top: 4px;
      box-shadow: 8px 10px 22px rgba(124, 58, 237, .42), -6px -6px 14px rgba(255, 255, 255, .7), inset 0 2px 3px rgba(255, 255, 255, .4);
      transition: transform .12s
    }
    .lsub:hover { transform: translateY(-1px) }
    #pg-landing .lsub-alt {
      width: 100%;
      background: none;
      border: none;
      font-family: inherit;
      font-weight: 700;
      color: var(--ltx2);
      padding: 12px 0 0;
      cursor: pointer;
      font-size: 12.5px;
      margin-top: 0
    }
    #pg-landing .lsub-alt:hover { color: var(--ltx) }

    /* floating stickers */
    .l-float { position: absolute; z-index: 3; animation: floaty 6s ease-in-out infinite; will-change: transform }
    .l-float > div { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease; will-change: transform }
    .l-float:hover { animation-play-state: paused; z-index: 20 }
    .l-float:hover > div { transform: rotate(0deg) scale(1.08) }
    .l-float:hover > .fcard,
    .l-float:hover > .chipf { box-shadow: 14px 18px 34px var(--llo), -7px -7px 16px var(--lhi) }
    .l-float:hover > .statb { box-shadow: 14px 18px 34px rgba(124, 58, 237, .5), -6px -6px 14px rgba(255, 255, 255, .6), inset 0 2px 3px rgba(255, 255, 255, .35) }
    @keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-11px) } }
    @media (prefers-reduced-motion: reduce) { .l-float { animation: none } }
    .fcard {
      background: var(--lclay);
      border-radius: 18px;
      padding: 12px 14px;
      box-shadow: 9px 11px 24px var(--llo), -7px -7px 16px var(--lhi)
    }
    .l-f1 { top: 118px; left: 1%; width: 190px; animation-duration: 5.6s; animation-delay: -.3s }
    .l-f2 { top: 360px; left: 3%; animation-duration: 4.6s; animation-delay: -1.2s }
    .l-f3 { top: 150px; right: 1%; animation-duration: 6.4s; animation-delay: -.7s }
    .l-f4 { top: 378px; right: 2%; width: 180px; animation-duration: 5.1s; animation-delay: -1.7s }
    .l-f5 { top: 262px; left: 12%; animation-duration: 4.2s; animation-delay: -.9s }
    .l-f6 { top: 300px; right: 14%; animation-duration: 5.9s; animation-delay: -.4s }
    .l-f7 { top: 470px; left: 6%; width: 182px; animation-duration: 6.1s; animation-delay: -1.4s }
    .l-f8 { top: 226px; right: 9%; animation-duration: 4.9s; animation-delay: -.6s }
    /* rotación de reposo en el hijo (el .l-float hace el flotado vertical) */
    .l-f1 > div { transform: rotate(-7deg) }
    .l-f2 > div { transform: rotate(5deg) }
    .l-f3 > div { transform: rotate(6deg) }
    .l-f4 > div { transform: rotate(-5deg) }
    .l-f5 > div { transform: rotate(8deg) }
    .l-f6 > div { transform: rotate(-8deg) }
    .l-f7 > div { transform: rotate(-4deg) }
    .l-f8 > div { transform: rotate(6deg) }
    .fk { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ltx2) }
    .ftag { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 10px; background: #d6f6e6; color: #1f8a56 }
    .fmono { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ltx3); font-weight: 500; margin-top: 6px }
    .fbar { height: 8px; border-radius: 10px; background: var(--lbg); margin-top: 8px; padding: 1px; box-shadow: inset 3px 3px 6px var(--llo), inset -3px -3px 6px var(--lhi) }
    .fbar > div { height: 100%; border-radius: 10px; background: linear-gradient(90deg, #4bd88a, #2fb673) }
    .chipf {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--lclay);
      border-radius: 100px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 800;
      color: var(--ltx);
      box-shadow: 6px 7px 15px var(--llo), -5px -5px 12px var(--lhi)
    }
    .pdot { width: 9px; height: 9px; border-radius: 50% }
    .statb {
      background: linear-gradient(145deg, #8b5cf6, #7c3aed);
      color: #fff;
      border-radius: 20px;
      padding: 12px 16px;
      box-shadow: 9px 11px 24px rgba(124, 58, 237, .4), -6px -6px 14px rgba(255, 255, 255, .6), inset 0 2px 3px rgba(255, 255, 255, .35)
    }
    .statb .n { font-size: 19px; font-weight: 800; letter-spacing: -.02em }
    .statb .l { font-size: 10px; font-weight: 700; opacity: .85 }

    /* modules section */
    .l-ms { padding: 20px 0 60px; position: relative; z-index: 2 }
    .l-sl { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lac); margin-bottom: 8px }
    .l-st { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ltx); margin-bottom: 30px }
    .l-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 34px }
    .l-si { padding: 20px; text-align: center }
    .l-sn { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ltx); line-height: 1 }
    .l-sl2 { font-size: 11px; font-weight: 700; color: var(--ltx3); text-transform: uppercase; letter-spacing: .05em; margin-top: 5px }
    .l-mg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
    .l-mc { padding: 22px; transition: transform .15s }
    .l-mc:hover { transform: translateY(-3px) }
    .l-mi {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      background: #ece3ff;
      color: var(--lac);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      box-shadow: 5px 6px 12px rgba(123, 94, 193, .22), -4px -4px 10px rgba(255, 255, 255, .9), inset 0 2px 3px rgba(255, 255, 255, .5)
    }
    .l-mn { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ltx); margin-bottom: 6px }
    .l-md { font-size: 12px; color: var(--ltx2); font-weight: 500; line-height: 1.55 }
    .l-mc-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 10px; font-weight: 800; color: var(--lac); background: #ece3ff; padding: 4px 10px 4px 6px; border-radius: 20px }

    /* footer */
    .l-ft { padding: 26px 0 34px; position: relative; z-index: 2; margin-top: auto }
    .l-fi { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 2px solid rgba(123, 94, 193, .12); padding-top: 20px }
    .l-ft-t { font-size: 12px; color: var(--ltx3); font-weight: 600 }
    .l-fl { display: flex; gap: 18px; flex-wrap: wrap }
    .l-fl a { color: var(--ltx3); font-size: 12px; font-weight: 600; text-decoration: none }
    .l-fl a:hover { color: var(--lac) }

    /* header nav */
    .l-nav2 { display: flex; align-items: center; gap: 22px; flex: 0 0 auto }
    .l-nav2 a.l-link { color: var(--ltx2); font-size: 13px; font-weight: 700; text-decoration: none }
    .l-nav2 a.l-link:hover { color: var(--lac) }

    /* precios */
    .l-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; max-width: 940px; margin: 0 auto }
    .l-plan { padding: 26px 24px; display: flex; flex-direction: column; position: relative }
    .l-plan.feat { padding-top: 30px }
    .l-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(145deg, #8b5cf6, #7c3aed); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: 20px; box-shadow: 6px 7px 15px var(--llo) }
    .l-plan-soon { position: absolute; top: 20px; right: 20px; background: var(--lbg); color: var(--ltx2); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; box-shadow: inset 2px 2px 5px var(--llo), inset -2px -2px 5px var(--lhi) }
    .l-plan-tier { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lac); margin-bottom: 10px }
    .l-plan-price { font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: var(--ltx); line-height: 1 }
    .l-plan-price span { font-size: 14px; font-weight: 600; color: var(--ltx3); letter-spacing: 0 }
    .l-plan-d { font-size: 13px; color: var(--ltx2); font-weight: 500; margin: 10px 0 18px; line-height: 1.5 }
    .l-plan-feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
    .l-plan-feats li { font-size: 13px; color: var(--ltx); font-weight: 500; padding-left: 26px; position: relative; line-height: 1.4 }
    .l-plan-feats li::before { content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--pub, #ece3ff); background: #ece3ff; box-shadow: inset 0 0 0 1px rgba(124,58,237,.15) }
    .l-plan-feats li::after { content: ""; position: absolute; left: 5px; top: 6px; width: 7px; height: 4px; border-left: 2px solid var(--lac); border-bottom: 2px solid var(--lac); transform: rotate(-45deg) }
    .l-plan-cta { display: block; text-align: center; text-decoration: none; padding: 12px; border-radius: 15px; font-size: 14px; font-weight: 800; background: linear-gradient(145deg, #8b5cf6, #7c3aed); color: #fff; box-shadow: 8px 10px 22px rgba(124,58,237,.42), -6px -6px 14px rgba(255,255,255,.7), inset 0 2px 3px rgba(255,255,255,.4); transition: transform .12s }
    .l-plan-cta:hover { transform: translateY(-1px) }
    .l-plan-cta.ghost { background: var(--lclay); color: var(--lac); box-shadow: 5px 6px 13px var(--llo), -5px -5px 12px var(--lhi) }
    .l-plan-note { text-align: center; font-size: 12px; color: var(--ltx3); font-weight: 500; margin-top: 22px }

    /* FAQ */
    .l-faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px }
    .l-faq-i { border-radius: 18px; overflow: hidden }
    .l-faq-i summary { list-style: none; cursor: pointer; padding: 17px 20px; font-size: 14.5px; font-weight: 700; color: var(--ltx); display: flex; align-items: center; justify-content: space-between; gap: 12px }
    .l-faq-i summary::-webkit-details-marker { display: none }
    .l-faq-i summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--lac); transition: transform .2s; flex-shrink: 0 }
    .l-faq-i[open] summary::after { transform: rotate(45deg) }
    .l-faq-a { padding: 0 20px 18px; font-size: 13.5px; color: var(--ltx2); font-weight: 500; line-height: 1.6 }

    @media(max-width:900px) {
      .l-float { display: none }
      .l-h1 { font-size: 34px }
      .l-center { max-width: 100% }
      .l-mg { grid-template-columns: 1fr 1fr }
      .l-stats { grid-template-columns: 1fr 1fr }
      .lw { padding: 0 18px }
    }
    @media(max-width:900px) {
      .l-plans { grid-template-columns: 1fr; max-width: 420px }
      .l-nav2 { gap: 14px }
      .l-nav2 a.l-link { display: none }
    }
    @media(max-width:560px) {
      .l-mg { grid-template-columns: 1fr }
      .l-fi { flex-direction: column; text-align: center }
    }

    /* ─── APP ─── */
    :root {
      /* ── Claymorphism claro (default) ── */
      --bg: #e9e6f6;
      --sf: #f7f5fe;
      --sf2: #efeafc;
      --bd: rgba(123, 94, 193, .12);
      --bd2: rgba(123, 94, 193, .18);
      --tx: #2f2a48;
      --tx2: #6d698a;
      --tx3: #a29ebc;
      --ab: #7c3aed;
      --af: #fff;
      --gn: #1f8a56;
      --gnb: #d9f5e6;
      --gnt: #14663e;
      --rd: #d83a54;
      --rdb: #ffe0e6;
      --am: #b5791a;
      --amb: #fdeecb;
      --amt: #8a5a12;
      --bl: #3b7bd6;
      --blb: #dbe9ff;
      --blt: #29528f;
      --pub: #ece3ff;
      --put: #5b21b6;
      --r: 18px;
      --rs: 12px;
      --rl: 22px;
      --sidebar-bg: #efeafc;
      --rp-bg: #efeafc;
      --card-bg: #f7f5fe;
      --input-bg: #e9e6f6;
      --sf-col: var(--tx3);
      /* recetas de sombra clay */
      --clayLo: rgba(123, 94, 193, .22);
      --clayHi: rgba(255, 255, 255, .92);
      --clay-r: 7px 8px 18px var(--clayLo), -6px -6px 14px var(--clayHi);
      --clay-rs: 4px 5px 12px var(--clayLo), -4px -4px 10px var(--clayHi);
      --clay-p: inset 4px 4px 9px var(--clayLo), inset -4px -4px 9px var(--clayHi);
      --clay-ac: 7px 9px 20px rgba(124, 58, 237, .4), -5px -5px 12px rgba(255, 255, 255, .6), inset 0 2px 3px rgba(255, 255, 255, .35);
    }

    /* ── LIGHT MODE ── */
    [data-theme="light"]:root,
    .light-mode {
      /* ── Claymorphism oscuro ── */
      --bg: #201d2e;
      --sf: #2b2740;
      --sf2: #262238;
      --bd: rgba(255, 255, 255, .06);
      --bd2: rgba(255, 255, 255, .1);
      --tx: #ece9f7;
      --tx2: #a9a3c4;
      --tx3: #726d8f;
      --ab: #a486ff;
      --af: #fff;
      --gn: #4bd88a;
      --gnb: rgba(75, 216, 138, .16);
      --gnt: #9cf0c1;
      --rd: #ff8095;
      --rdb: rgba(255, 128, 149, .16);
      --am: #f4c15e;
      --amb: rgba(244, 193, 94, .14);
      --amt: #ffdfa0;
      --bl: #7fb0ff;
      --blb: rgba(127, 176, 255, .14);
      --blt: #bcd6ff;
      --pub: rgba(164, 134, 255, .16);
      --put: #cbb6ff;
      --sidebar-bg: #262238;
      --rp-bg: #262238;
      --card-bg: #2b2740;
      --input-bg: #201d2e;
      --sf-col: var(--tx3);
      /* recetas de sombra clay (oscuro) */
      --clayLo: rgba(0, 0, 0, .5);
      --clayHi: rgba(255, 255, 255, .045);
      --clay-r: 7px 8px 18px var(--clayLo), -5px -5px 13px var(--clayHi);
      --clay-rs: 4px 5px 12px var(--clayLo), -4px -4px 10px var(--clayHi);
      --clay-p: inset 4px 4px 9px var(--clayLo), inset -4px -4px 9px var(--clayHi);
      --clay-ac: 7px 9px 20px rgba(0, 0, 0, .5), -5px -5px 12px rgba(255, 255, 255, .05), inset 0 2px 3px rgba(255, 255, 255, .18);
    }

    .theme-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      background: var(--sf);
      border: none;
      cursor: pointer;
      font-size: 15px;
      transition: transform .15s;
      margin-top: 10px;
      color: var(--tx2);
      box-shadow: var(--clay-rs)
    }

    .theme-btn:hover {
      transform: translateY(-1px)
    }

    .layout {
      display: grid;
      grid-template-columns: 200px 1fr 260px;
      min-height: 100vh;
      background: var(--bg)
    }
    .layout.rp-closed {
      grid-template-columns: 200px 1fr 36px;
    }

    .sidebar {
      background: var(--sidebar-bg);
      border-right: none;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto
    }

    .logo-area {
      padding: 18px 16px;
      background: var(--sidebar-bg);
      display: flex;
      align-items: center;
      justify-content: center
    }

    nav {
      padding: 8px 0;
      flex: 1
    }

    .ni {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 14px;
      cursor: pointer;
      color: var(--tx2);
      font-size: 13px;
      font-weight: 400;
      transition: all .12s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      border-left: 2px solid transparent;
      font-family: inherit
    }

    .ni:hover {
      background: var(--sf2);
      color: var(--tx)
    }

    .ni.active {
      background: var(--pub);
      color: var(--put);
      border-left-color: var(--ab);
      box-shadow: var(--clay-p)
    }

    .ni svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0
    }

    .sf {
      padding: 12px 16px;
      border-top: 1px solid var(--bd);
      font-size: 11px;
      color: var(--sf-col)
    }

    .main {
      padding: 24px;
      overflow-x: hidden;
      min-width: 0;
      background: var(--bg)
    }

    .rp {
      background: var(--rp-bg);
      border-left: none;
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      transition: padding .2s
    }
    .layout.rp-closed .rp {
      padding: 14px 6px;
      gap: 0;
      align-items: center;
    }
    .rp-tog {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--sf);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      color: var(--tx2);
      font-size: 14px;
      width: 26px;
      height: 34px;
      box-shadow: var(--clay-rs);
      padding: 0;
      flex-shrink: 0;
      font-family: inherit;
      line-height: 1;
      transition: background .12s, color .12s;
    }
    .rp-tog:hover { background: var(--bd); color: var(--tx) }
    .mob-bar {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 52px;
      background: var(--sidebar-bg);
      border-bottom: 1px solid var(--bd);
      align-items: center;
      padding: 0 14px;
      gap: 12px;
      z-index: 200;
    }
    .mob-burger {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--tx2);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      border-radius: 4px;
      font-family: inherit;
    }
    .mob-burger:hover { background: var(--sf2) }
    .mob-burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px }
    .mob-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 90;
    }
    .mob-overlay.show { display: block }
    @media (max-width: 960px) {
      .layout { grid-template-columns: 200px 1fr }
      .layout.rp-closed { grid-template-columns: 200px 1fr }
      #rp-el { display: none }
    }
    @media (max-width: 680px) {
      .mob-bar { display: flex }
      .layout { grid-template-columns: 1fr; padding-top: 52px }
      .layout.rp-closed { grid-template-columns: 1fr }
      #rp-el { display: none }
      .sidebar {
        position: fixed;
        top: 52px; bottom: 0; left: 0;
        width: 200px;
        z-index: 100;
        height: auto;
        transform: translateX(-100%);
        transition: transform .25s ease;
      }
      .sidebar.mob-open { transform: translateX(0) }
      .main { padding: 16px; overflow-x: hidden }
      .fr { grid-template-columns: 1fr }
      .wkdi { overflow-x: auto }
    }

    h1 {
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 3px;
      letter-spacing: -.02em;
      color: var(--tx)
    }

    .sub {
      font-size: 13px;
      color: var(--tx2);
      margin-bottom: 20px
    }

    .card {
      background: var(--card-bg);
      border: none;
      border-radius: var(--r);
      padding: 18px;
      box-shadow: var(--clay-r)
    }

    .card+.card {
      margin-top: 10px
    }

    .ct {
      font-size: 11px;
      font-weight: 600;
      color: var(--tx3);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 10px
    }

    label {
      font-size: 12px;
      font-weight: 500;
      color: var(--tx2);
      display: block;
      margin-bottom: 4px
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 10px 13px;
      border: none;
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 13px;
      color: var(--tx);
      background: var(--input-bg);
      outline: none;
      box-shadow: var(--clay-p);
      transition: box-shadow .12s
    }

    select option {
      background: var(--bg);
      color: var(--tx)
    }

    .light-mode select option {
      background: #f5f5f2;
      color: #181816
    }

    input:focus,
    select:focus,
    textarea:focus {
      box-shadow: var(--clay-p), 0 0 0 2px rgba(124, 58, 237, .32)
    }

    textarea {
      resize: vertical;
      min-height: 72px
    }

    .fr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px
    }

    .fg {
      margin-bottom: 10px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all .12s;
      white-space: nowrap
    }

    .btn-p {
      background: linear-gradient(145deg, #8b5cf6, #7c3aed);
      color: #fff;
      box-shadow: var(--clay-ac);
      transition: transform .12s
    }

    .btn-p:hover {
      transform: translateY(-1px)
    }

    .btn-s {
      background: var(--sf);
      color: var(--tx);
      border: none;
      box-shadow: var(--clay-rs);
      transition: transform .12s
    }

    .btn-s:hover {
      transform: translateY(-1px)
    }

    .btn-g {
      background: var(--sf);
      color: var(--tx2);
      border: none;
      box-shadow: var(--clay-rs);
      transition: transform .12s
    }

    .btn-g:hover {
      transform: translateY(-1px);
      color: var(--tx)
    }

    .btn-w {
      background: var(--amb);
      color: var(--amt);
      border: 1px solid #fcd34d
    }

    .btn-w:hover {
      background: rgba(251, 191, 36, .2)
    }
    .light-mode .btn-w:hover {
      background: #fef3c7
    }

    .btn-sm {
      padding: 5px 10px;
      font-size: 12px
    }

    .btn-ic {
      padding: 6px;
      width: 28px;
      height: 28px;
      justify-content: center
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500
    }

    .badge-green {
      background: var(--gnb);
      color: var(--gnt)
    }

    .badge-red {
      background: var(--rdb);
      color: var(--rd)
    }

    .badge-amber {
      background: var(--amb);
      color: var(--amt)
    }

    .badge-blue {
      background: var(--blb);
      color: var(--blt)
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px
    }

    th {
      text-align: left;
      padding: 9px 10px;
      font-size: 11px;
      font-weight: 600;
      color: var(--tx2);
      letter-spacing: .05em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--bd);
      background: var(--sidebar-bg)
    }

    td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--bd);
      vertical-align: middle
    }

    tr:last-child td {
      border-bottom: none
    }

    tr.row-over {
      background: var(--rdb)
    }

    tr.row-under {
      background: var(--amb)
    }

    .modal-ov {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .65);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 20px
    }

    .modal {
      background: var(--sf);
      border: none;
      border-radius: var(--rl);
      padding: 24px;
      width: 100%;
      max-width: 540px;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: var(--clay-r)
    }

    .modal-t {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 18px
    }

    .copy-card {
      background: var(--input-bg);
      border: none;
      border-radius: var(--r);
      padding: 15px;
      position: relative;
      margin-bottom: 11px;
      box-shadow: var(--clay-p)
    }

    .copy-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 7px
    }

    .copy-btn {
      position: absolute;
      top: 10px;
      right: 10px
    }

    .cl-wrap {
      font-size: 13px;
      color: var(--tx);
      padding-top: 2px
    }

    .cl-head {
      font-size: 11px;
      font-weight: 600;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin: 11px 0 2px
    }

    .cl-head:first-child { margin-top: 0 }

    .cl-line {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 3px 0;
      border-bottom: 1px solid var(--bd);
      line-height: 1.5
    }

    .cl-line:last-child { border-bottom: 0 }
    .cl-txt { flex: 1; min-width: 0; word-break: break-word }
    .cl-line.over .cl-txt { color: var(--rd) }

    .cl-badge {
      flex-shrink: 0;
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--tx3);
      white-space: nowrap;
      user-select: none
    }

    .cl-badge.over { color: var(--rd); font-weight: 700 }
    .cl-sp { height: 6px }

    .nam-out {
      font-family: 'DM Mono', monospace;
      font-size: 13px;
      font-weight: 500;
      background: var(--input-bg);
      border: none;
      box-shadow: var(--clay-p);
      border-radius: var(--rs);
      padding: 12px 14px;
      word-break: break-all;
      min-height: 42px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 3px
    }

    .ntok {
      background: var(--sf);
      border: none;
      box-shadow: var(--clay-rs);
      border-radius: 8px;
      padding: 3px 8px;
      font-size: 12px
    }

    .nsep {
      color: var(--tx3);
      font-size: 12px
    }

    .utm-mono {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      background: var(--input-bg);
      border: none;
      box-shadow: var(--clay-p);
      border-radius: var(--rs);
      padding: 10px;
      word-break: break-all;
      color: var(--tx);
      line-height: 1.6
    }

    .ps {
      background: var(--sf);
      border-radius: var(--rs);
      padding: 13px;
      box-shadow: var(--clay-rs)
    }

    .psl {
      font-size: 11px;
      color: var(--tx2);
      margin-bottom: 3px
    }

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--bd);
      margin-bottom: 16px
    }

    .tab {
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      color: var(--tx2);
      border-bottom: 2px solid transparent;
      transition: all .12s
    }

    .tab.active {
      color: var(--tx);
      border-bottom-color: #7c3aed
    }

    /* Calculadora — pills de métrica y secciones colapsables */
    .mpill {
      padding: 7px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      color: var(--tx2);
      background: var(--sf);
      font-family: inherit;
      box-shadow: var(--clay-rs);
      transition: transform .12s, color .12s
    }

    .mpill:hover {
      transform: translateY(-1px);
      color: var(--tx)
    }

    .mpill.sel {
      background: linear-gradient(145deg, #8b5cf6, #7c3aed);
      color: #fff;
      box-shadow: var(--clay-ac)
    }

    .coll {
      background: var(--card-bg);
      border: none;
      border-radius: var(--r);
      margin-top: 12px;
      overflow: hidden;
      box-shadow: var(--clay-r)
    }

    .coll-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      cursor: pointer;
      user-select: none
    }

    .coll-b {
      display: none;
      padding: 0 16px 16px
    }

    .coll.open .coll-b {
      display: block
    }

    .coll .chev {
      color: var(--tx3);
      font-size: 11px;
      transition: transform .2s
    }

    .coll.open .chev {
      transform: rotate(90deg)
    }

    .sep-btns {
      display: flex;
      gap: 4px
    }

    .sep-btn {
      padding: 5px 11px;
      font-size: 12px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      background: var(--sf);
      color: var(--tx2);
      font-family: 'DM Mono', monospace;
      box-shadow: var(--clay-rs);
      transition: transform .1s
    }

    .sep-btn.active {
      background: linear-gradient(145deg, #8b5cf6, #7c3aed);
      color: #fff;
      box-shadow: var(--clay-ac)
    }

    .ci {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 10px 0;
      border-bottom: 1px solid var(--bd)
    }

    .ci:last-child {
      border-bottom: none
    }

    .ci.done .cit {
      text-decoration: line-through;
      color: var(--tx3)
    }

    .cbox {
      width: 18px;
      height: 18px;
      border: 2px solid var(--bd2);
      border-radius: 4px;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .12s;
      margin-top: 1px
    }

    .cbox.chk {
      background: #7c3aed;
      border-color: #7c3aed
    }

    .cit {
      font-size: 13px;
      line-height: 1.5;
      flex: 1
    }

    .pb {
      height: 5px;
      background: var(--bd);
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 20px
    }

    .pf {
      height: 100%;
      background: #7c3aed;
      border-radius: 20px;
      transition: width .3s
    }

    .rps {
      margin-bottom: 14px
    }

    .rpt {
      font-size: 11px;
      font-weight: 600;
      color: var(--tx3);
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: 8px
    }

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

    .pulse.green {
      background: var(--gn)
    }

    .pulse.amber {
      background: var(--am)
    }

    .pulse.red {
      background: var(--rd)
    }

    .mc {
      height: 60px;
      display: flex;
      align-items: flex-end;
      gap: 3px;
      margin-top: 6px
    }

    .wrow {
      display: grid;
      grid-template-columns: 190px 1fr 62px 90px 90px 62px;
      gap: 8px;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid var(--bd)
    }

    .wrow:last-child {
      border-bottom: none
    }

    .wb-w {
      height: 6px;
      background: var(--sf2);
      border-radius: 20px;
      overflow: hidden
    }

    .wb {
      height: 100%;
      border-radius: 20px;
      transition: width .3s
    }

    .rem-p {
      display: inline-flex;
      padding: 2px 7px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      background: var(--gnb);
      color: var(--gnt)
    }

    .rem-n {
      display: inline-flex;
      padding: 2px 7px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      background: var(--rdb);
      color: var(--rd)
    }

    .rem-z {
      display: inline-flex;
      padding: 2px 7px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      background: var(--sf2);
      color: var(--tx3)
    }

    .mc2 {
      border: 2px solid var(--bd2);
      border-radius: var(--rs);
      padding: 12px;
      cursor: pointer;
      transition: all .15s
    }

    .mc2.sel {
      border-color: #7c3aed;
      background: rgba(124, 58, 237, .15);
      color: var(--ab)
    }

    .mc2.sel .ms2 {
      color: var(--tx2)
    }

    .ms2 {
      font-size: 11px;
      color: var(--tx2);
      margin-top: 3px
    }

    .mp-s {
      background: var(--pub);
      color: var(--put);
      font-size: 10px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 20px
    }

    .mp-m {
      background: var(--blb);
      color: var(--blt);
      font-size: 10px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 20px
    }

    .ban {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: var(--amb);
      border: 1px solid rgba(251, 191, 36, .3);
      border-radius: var(--rs);
      padding: 10px 14px;
      margin-bottom: 10px;
      flex-wrap: wrap
    }

    .ban-t {
      font-size: 13px;
      font-weight: 500;
      color: var(--amt)
    }

    .ban-s {
      font-size: 11px;
      color: var(--amt);
      opacity: .8;
      margin-top: 2px
    }

    .ib {
      background: var(--blb);
      border-radius: var(--rs);
      padding: 10px 14px;
      font-size: 12px;
      color: var(--blt);
      margin-bottom: 12px
    }

    .dv {
      height: 1px;
      background: var(--bd);
      margin: 14px 0
    }

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

    .ldots::after {
      content: '...';
      animation: ld 1s steps(4, end) infinite
    }

    @keyframes ld {

      0%,
      20% {
        content: '.'
      }

      40%,
      60% {
        content: '..'
      }

      80%,
      100% {
        content: '...'
      }
    }

    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 9px 16px;
      border-radius: var(--rs);
      font-size: 13px;
      font-weight: 500;
      z-index: 999;
      animation: su .18s ease
    }

    .tok {
      background: #7c3aed;
      color: #fff
    }

    .twarn {
      background: #b45309;
      color: #fff
    }

    @keyframes su {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes spin {
      to { transform: rotate(360deg) }
    }

    .leg {
      display: flex;
      gap: 14px;
      font-size: 11px;
      color: var(--tx3);
      padding: 6px 2px;
      flex-wrap: wrap;
      margin-top: 8px
    }

    .ld {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      display: inline-block;
      border: 1px solid;
      opacity: .8
    }

    .chv {
      transition: transform .2s
    }

    .chv.open {
      transform: rotate(90deg)
    }

    .wkd td {
      padding: 0;
      border-bottom: 1px solid var(--bd)
    }

    .wkdi {
      padding: 14px 16px;
      background: var(--sf2)
    }