@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --bg:#0b0d10;--bg2:#111418;--bg3:#161b20;
  --border:#2a303a;--border2:#363d4a;
  --text:#f0ece0;--text2:#a0a8b8;--text3:#6a7280;
  --accent:#c8f230;--accent2:#a8cc20;
  --wa:#25d366;
  --error:#ff5d5d;--success:#4ade80;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Instrument Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:inherit}
::selection{background:rgba(200,242,48,.3)}

/* ── TOPBAR ── */
@keyframes nerdy-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:0.5px solid var(--border);background:var(--bg2)}
.topbar-logo{font-family:'Space Mono',monospace;font-size:19px;color:var(--accent);letter-spacing:-1px;text-decoration:none;display:flex;align-items:center;gap:8px}
.topbar-logo .tag{font-size:10px;background:rgba(200,242,48,.1);border:0.5px solid rgba(200,242,48,.3);padding:2px 7px;border-radius:10px;letter-spacing:.5px}
.topbar-user{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text2)}
.topbar-plan{background:var(--bg3);border:0.5px solid var(--border2);padding:5px 12px;border-radius:7px;font-family:'Space Mono',monospace;font-size:12px;color:var(--accent)}
.topbar-creditos{font-family:'Space Mono',monospace;font-size:12px;color:var(--text3);padding:5px 10px;border:0.5px solid var(--border);border-radius:7px}
.btn-logout{background:none;border:0.5px solid var(--border2);color:var(--text2);font-size:12px;padding:7px 13px;border-radius:7px;cursor:pointer;transition:border-color .2s,color .2s}
.btn-logout:hover{border-color:var(--error);color:var(--error)}

/* ── AUTH STAGE (login con ilustración central) ── */
.auth-stage{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 50% 52%, rgba(200,242,48,.06), var(--bg) 70%)}
.auth-stage::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0}

/* ilustración central que se funde con el fondo */
.auth-hero{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.auth-hero-img{height:min(86vh,720px);max-width:92vw;object-fit:contain;display:block;
  -webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 47%, #000 38%, transparent 82%);
  mask-image:radial-gradient(ellipse 58% 64% at 50% 47%, #000 38%, transparent 82%)}

/* humito del café (aproximado por CSS, sobre la taza) */
.steam{position:absolute;left:calc(50% - 86px);top:calc(50% + 30px);width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(3px);opacity:0;z-index:2}
.steam.s1{animation:steam 3.4s ease-in infinite}
.steam.s2{left:calc(50% - 78px);animation:steam 3.4s ease-in .9s infinite}
.steam.s3{left:calc(50% - 94px);animation:steam 3.4s ease-in 1.8s infinite}
@keyframes steam{0%{opacity:0;transform:translateY(0) scale(.7)}25%{opacity:.55}100%{opacity:0;transform:translateY(-46px) scale(1.7)}}

/* bloques flotantes en las esquinas */
.auth-tl{position:absolute;top:54px;left:56px;max-width:420px;z-index:3}
.auth-bl{position:absolute;bottom:46px;left:56px;z-index:3}
.auth-br{position:absolute;bottom:46px;right:56px;z-index:3}

.auth-brand{font-family:'Space Mono',monospace;font-size:18px;color:var(--accent);letter-spacing:-.5px;margin-bottom:30px}
.auth-brand span{color:var(--text3);font-size:11px;margin-left:4px}
.auth-headline{font-size:2.3rem;line-height:1.12;font-weight:600;letter-spacing:-1.2px;margin-bottom:16px;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.auth-lede{font-size:14.5px;color:var(--text2);line-height:1.6;max-width:380px;margin-bottom:26px}
.auth-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.auth-points li{position:relative;padding-left:28px;font-size:13.5px;color:var(--text2)}
.auth-points li::before{content:'';position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:rgba(200,242,48,.1);border:0.5px solid var(--accent)}
.auth-points li::after{content:'';position:absolute;left:6px;top:6px;width:4px;height:8px;border:solid var(--accent);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* mockup hoja calificada */
.mock-sheet{max-width:270px;background:var(--bg2);border:0.5px solid var(--border2);border-radius:13px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);transform:rotate(-2.5deg);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.mock-sheet:hover{transform:rotate(0) translateY(-4px)}
.mock-head{background:var(--accent);color:#0b0d10;padding:16px 20px;display:flex;align-items:baseline;gap:7px}
.mock-grade{font-family:'Space Mono',monospace;font-size:34px;font-weight:700;line-height:1}
.mock-grade-sub{font-size:13px;opacity:.7;font-weight:600}
.mock-body{padding:16px 20px 14px}
.mock-name{font-weight:600;font-size:13px;margin-bottom:12px;color:var(--text)}
.mock-row{font-size:12px;color:var(--text2);padding:6px 0;border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:9px}
.mock-row:last-of-type{border-bottom:none}
.mk{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;color:#0b0d10}
.mk.ok{background:var(--success)}
.mk.bad{background:var(--error)}
.mock-foot{font-size:10px;color:var(--text3);font-family:'Space Mono',monospace;margin-top:12px}

/* Pantallas medianas: ocultar la tarjeta de ejemplo para evitar choques */
@media(max-width:1180px){
  .auth-bl{display:none}
  .auth-br{bottom:40px;right:40px}
  .auth-tl{max-width:360px;top:44px;left:40px}
  .auth-headline{font-size:2rem}
}
/* En pantallas de poca altura se oculta para no tapar el texto */
@media(max-height:780px){
  .auth-bl{display:none}
}

/* Móvil: apilar todo en flujo vertical, sin posiciones absolutas */
@media(max-width:820px){
  .auth-stage{display:flex;flex-direction:column;align-items:center;padding:36px 22px;min-height:100vh}
  .auth-hero{position:relative;left:auto;top:auto;transform:none;order:2;margin:8px 0}
  .auth-hero-img{height:auto;width:100%;max-width:340px;animation:none}
  .steam{display:none}
  .auth-tl{position:relative;top:auto;left:auto;order:1;max-width:480px;text-align:center}
  .auth-tl .auth-points{display:none}
  .auth-headline{font-size:1.7rem}
  .auth-bl{display:none}
  .auth-br{position:relative;bottom:auto;right:auto;order:3;width:100%;max-width:400px}
}

/* ── LOGIN SCREEN ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.login-glow{position:absolute;top:-15%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(200,242,48,.08) 0%,transparent 65%);pointer-events:none}
.login-card{position:relative;z-index:1;background:var(--bg2);border:0.5px solid var(--border);border-radius:16px;padding:48px 40px;max-width:400px;width:100%;text-align:center}
.login-logo{font-family:'Space Mono',monospace;font-size:28px;color:var(--accent);letter-spacing:-1px;margin-bottom:6px}
.login-tag{font-size:13px;color:var(--text3);margin-bottom:32px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;background:#fff;color:#1f1f1f;font-size:14px;font-weight:600;padding:13px 20px;border-radius:9px;border:none;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s}
.btn-google:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.login-or{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text3);font-size:12px}
.login-or::before,.login-or::after{content:'';flex:1;height:0.5px;background:var(--border2)}
.login-input{width:100%;background:var(--bg3);border:0.5px solid var(--border2);border-radius:9px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:14px;margin-bottom:10px}
.login-input:focus{outline:none;border-color:var(--accent)}
.btn-email{width:100%;background:var(--accent);color:#0b0d10;font-size:14px;font-weight:600;padding:12px 20px;border-radius:9px;border:none;cursor:pointer;transition:background .2s;margin-top:2px}
.btn-email:hover{background:var(--accent2)}
.btn-email:disabled{opacity:.55;cursor:not-allowed}
.login-forgot{margin-top:12px;font-size:12px;text-align:center}
.login-forgot a{color:var(--text3);text-decoration:none}
.login-forgot a:hover{color:var(--accent)}
.login-switch{margin-top:16px;font-size:13px;color:var(--text3)}
.login-switch a{color:var(--accent);text-decoration:none;margin-left:5px}
.login-foot{margin-top:24px;font-size:12px;color:var(--text3)}
.login-foot a{color:var(--accent);text-decoration:none}

/* ── PANEL LAYOUT ── */
.panel-body{display:flex;min-height:calc(100vh - 65px)}
.sidebar{width:220px;border-right:0.5px solid var(--border);background:var(--bg2);padding:24px 14px;flex-shrink:0}
.side-link{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:8px;color:var(--text2);text-decoration:none;font-size:14px;cursor:pointer;transition:background .2s,color .2s;margin-bottom:3px;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.side-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.side-link:hover{background:var(--bg3);color:var(--text)}
.side-link.active{background:rgba(200,242,48,.08);color:var(--accent)}
.main-content{flex:1;padding:36px 40px;min-width:0}
.view{display:none;max-width:960px;margin:0 auto}
.view.active{display:block}
.view-title{font-size:1.6rem;font-weight:600;margin-bottom:6px}
.view-sub{font-size:14px;color:var(--text2);margin-bottom:32px}

/* ── CARDS / FORM ── */
.card{background:var(--bg2);border:0.5px solid var(--border);border-radius:12px;padding:28px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;color:var(--text2);margin-bottom:8px;font-weight:500}
.field-hint{font-size:12px;color:var(--text3);margin-top:6px}
.dropzone{border:1.5px dashed var(--border2);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;font-size:13px;color:var(--text2)}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(200,242,48,.04)}
.dropzone input{display:none}
.file-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.file-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border:0.5px solid var(--border);border-radius:7px;padding:8px 12px;font-size:12px;font-family:'Space Mono',monospace}
.file-item button{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px}
textarea{width:100%;background:var(--bg3);border:0.5px solid var(--border2);border-radius:8px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:14px;resize:vertical;min-height:80px}
textarea:focus{outline:none;border-color:var(--accent)}

.btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#0b0d10;font-size:14px;font-weight:600;padding:13px 24px;border-radius:9px;border:none;cursor:pointer;transition:background .2s}
.btn-primary:hover{background:var(--accent2)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--text);font-size:14px;font-weight:500;padding:13px 24px;border-radius:9px;border:0.5px solid var(--border2);cursor:pointer;transition:border-color .2s,color .2s}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

/* ── MODAL GENÉRICO (fotos, etc.) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-box{background:var(--bg2);border:0.5px solid var(--border2);border-radius:16px;max-width:460px;width:100%;padding:32px 30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-emoji{font-size:38px;margin-bottom:8px}
.modal-box h2{font-size:1.25rem;margin-bottom:14px}
.modal-box p{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:12px}
.modal-box strong{color:var(--text)}
.modal-example{font-family:'Space Mono',monospace;font-size:12.5px;color:var(--accent);background:var(--bg3);border:0.5px solid var(--border);border-radius:9px;padding:12px;margin:14px 0}
.modal-warn{background:rgba(245,176,96,.1);border:0.5px solid rgba(245,176,96,.3);border-radius:9px;padding:11px 14px;color:#f5b060 !important;font-size:13px !important}
.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:22px}
.modal-actions button{flex:1}

/* ── CÓMO USAR ── */
.howto-step{background:var(--bg2);border:0.5px solid var(--border);border-radius:12px;padding:24px 26px;margin-bottom:18px}
.howto-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.howto-head h3{margin:0;font-size:16px}
.howto-n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#0b0d10;font-family:'Space Mono',monospace;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px}
.howto-step p{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:8px}
.howto-step ul{margin:0 0 8px;padding-left:20px}
.howto-step li{font-size:13.5px;color:var(--text2);line-height:1.7}
.howto-step strong{color:var(--text)}
.howto-tip{font-size:12.5px !important;color:var(--text3) !important;border-left:2px solid var(--border2);padding-left:12px;margin-top:10px !important}
.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.howto-card{border-radius:10px;padding:16px 18px}
.howto-card.good{background:rgba(74,222,128,.06);border:0.5px solid rgba(74,222,128,.3)}
.howto-card.bad{background:rgba(255,93,93,.06);border:0.5px solid rgba(255,93,93,.3)}
.howto-card-h{font-weight:600;font-size:14px;margin-bottom:10px}
.howto-card.good .howto-card-h{color:var(--success)}
.howto-card.bad .howto-card-h{color:var(--error)}
.howto-card ul{margin:0;padding-left:18px}
.howto-card li{font-size:13px;color:var(--text2);line-height:1.7}
.howto-cta{text-align:center;font-size:14px;color:var(--text2);padding:18px;background:rgba(200,242,48,.06);border:0.5px solid rgba(200,242,48,.25);border-radius:12px}
.howto-cta a{color:var(--accent);text-decoration:none;font-weight:600;margin-left:6px}
@media(max-width:680px){.howto-grid{grid-template-columns:1fr}}

/* ── BANNER VERIFICACIÓN DE CORREO ── */
#verify-banner{display:flex;align-items:center;gap:10px;background:rgba(245,176,96,.12);border-bottom:0.5px solid rgba(245,176,96,.35);color:#f5b060;font-size:13px;padding:11px 24px}
#verify-banner svg{flex-shrink:0}
#verify-banner button{margin-left:auto;background:#f5b060;color:#0b0d10;border:none;border-radius:7px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
#verify-banner button:disabled{opacity:.6;cursor:default}

/* ── SELECTOR DE MODO DE CLAVE ── */
.clave-modo{display:flex;gap:8px;background:var(--bg3);border:0.5px solid var(--border);border-radius:10px;padding:4px;margin-bottom:20px}
.clave-modo-btn{flex:1;background:none;border:none;color:var(--text2);font-size:13px;font-weight:500;padding:9px 12px;border-radius:7px;cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.clave-modo-btn.active{background:var(--accent);color:#0b0d10;font-weight:600}
#tabla-clave input{background:var(--bg3);border:0.5px solid var(--border2);border-radius:6px;color:var(--text);font-family:inherit;font-size:13px;padding:6px 8px;width:100%}
#tabla-clave input:focus{outline:none;border-color:var(--accent)}
#tabla-clave td{vertical-align:middle}
#tabla-clave .col-puntos input{width:64px}
#tabla-clave .col-tol input{width:72px}
.btn-del-fila{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px}
.btn-del-fila:hover{color:var(--error)}

/* ── AVISO DE CRÉDITOS ── */
.creditos-aviso{background:rgba(200,242,48,.07);border:0.5px solid rgba(200,242,48,.3);border-radius:9px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:var(--text2)}
.creditos-aviso .cred-num{font-family:'Space Mono',monospace;font-weight:700;color:var(--accent);font-size:15px}
.creditos-aviso .cred-sub{color:var(--text3);font-size:12px;margin-left:4px}
.creditos-aviso .cred-warn{margin-top:8px;color:#ff8a8a;font-size:12px}

/* ── ALERT ── */
.alert{padding:14px 38px 14px 16px;border-radius:9px;font-size:13px;margin-bottom:20px;position:relative;line-height:1.55}
.alert-error{background:rgba(255,93,93,.08);border:0.5px solid rgba(255,93,93,.3);color:#ff8a8a}
.alert-success{background:rgba(74,222,128,.08);border:0.5px solid rgba(74,222,128,.3);color:var(--success)}
.alert-info{background:rgba(200,242,48,.06);border:0.5px solid rgba(200,242,48,.25);color:var(--accent)}

/* ── TABLE ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--text3);font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:0.5px solid var(--border)}
td{padding:12px;border-bottom:0.5px solid var(--border);color:var(--text2)}
tr:last-child td{border-bottom:none}
.badge{font-size:11px;padding:3px 9px;border-radius:10px;font-family:'Space Mono',monospace}
.badge-ok{background:rgba(74,222,128,.1);color:var(--success);border:0.5px solid rgba(74,222,128,.25)}
.badge-pending{background:rgba(245,176,96,.1);color:#f5b060;border:0.5px solid rgba(245,176,96,.25)}

/* ── PLAN CARDS ── */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:8px}
.plan-card{background:var(--bg3);border:0.5px solid var(--border2);border-radius:12px;padding:24px 20px;text-align:center;position:relative;transition:border-color .2s,transform .2s}
.plan-card:hover{transform:translateY(-3px)}
.plan-card.current{border-color:var(--accent);background:rgba(200,242,48,.05)}
.plan-card.current::before{content:'Plan actual';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);color:#0b0d10;font-size:10px;padding:3px 10px;border-radius:10px;font-family:'Space Mono',monospace;font-weight:700}
.plan-name{font-family:'Space Mono',monospace;font-size:14px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.plan-price{font-size:2rem;font-weight:700;margin-bottom:4px}
.plan-price small{font-size:13px;color:var(--text3);font-weight:400}
.plan-revs{font-size:13px;color:var(--text3);margin-bottom:18px}
.ai-disclaimer{display:flex;gap:11px;align-items:flex-start;background:rgba(245,176,96,.08);border:0.5px solid rgba(245,176,96,.3);border-radius:10px;padding:14px 18px;margin-bottom:24px;font-size:13px;color:#f5b060;line-height:1.55}
.ai-disclaimer svg{flex-shrink:0;margin-top:2px}
.ai-disclaimer strong{color:#ffd9a0}
.ai-disclaimer #ai-disclaimer-close{margin-left:auto;background:none;border:none;color:#f5b060;cursor:pointer;font-size:14px;padding:2px 6px;flex-shrink:0;align-self:flex-start;opacity:.7}
.ai-disclaimer #ai-disclaimer-close:hover{opacity:1}
.alert-close{position:absolute;top:10px;right:12px;background:none;border:none;color:inherit;cursor:pointer;font-size:13px;opacity:.6}
.alert-close:hover{opacity:1}
.plan-iva{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.plan-usd{font-size:12px;color:var(--text3);margin-bottom:4px;font-family:'Space Mono',monospace}
.fx-disclaimer{font-size:11px;color:var(--text3);margin-top:14px;line-height:1.5;border-left:2px solid var(--border2);padding-left:10px}

/* ── TOOLTIPS DE AYUDA (ícono i) ── */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--text3);color:var(--text3);font-size:10px;font-style:italic;font-family:Georgia,serif;cursor:help;margin-left:7px;position:relative;vertical-align:middle}
.info-i:hover{border-color:var(--accent);color:var(--accent)}
.info-pop{display:none;position:absolute;bottom:140%;left:50%;transform:translateX(-50%);width:250px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:9px;padding:11px 13px;font-size:12px;font-style:normal;font-weight:400;color:var(--text2);line-height:1.55;z-index:60;box-shadow:0 10px 28px rgba(0,0,0,.45);text-align:left;font-family:'Instrument Sans',sans-serif}
.info-pop strong{color:var(--text)}
.info-i:hover .info-pop{display:block}

/* ── TOUR DE BIENVENIDA ── */
.tour-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000}
.tour-tip{position:fixed;z-index:1003;width:300px;background:var(--bg2);border:0.5px solid var(--accent);border-radius:12px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.tour-title{font-weight:600;font-size:15px;margin-bottom:6px}
.tour-text{font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:14px}
.tour-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tour-skip{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;padding:6px}
.tour-skip:hover{color:var(--text2)}
.tour-next{background:var(--accent);color:#0b0d10;border:none;border-radius:7px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer}
.tour-progress{font-size:11px;color:var(--text3);font-family:'Space Mono',monospace;margin-top:10px;text-align:right}
.tour-highlight{position:relative;z-index:1002;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(0,0,0,.6);border-radius:8px}

/* ── ADMIN KPIs ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.kpi-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:12px;padding:20px 22px}
.kpi-card.kpi-accent{border-color:rgba(200,242,48,.35);background:rgba(200,242,48,.04)}
.kpi-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.kpi-num{font-family:'Space Mono',monospace;font-size:1.7rem;font-weight:700;color:var(--text);line-height:1}
.kpi-card.kpi-accent .kpi-num{color:var(--accent)}
.kpi-foot{font-size:12px;color:var(--text3);margin-top:6px}
.plan-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13px}
.plan-bar-name{width:110px;color:var(--text2);font-family:'Space Mono',monospace;font-size:12px;text-transform:capitalize}
.plan-bar-track{flex:1;background:var(--bg3);border-radius:99px;height:10px;overflow:hidden}
.plan-bar-fill{height:100%;background:var(--accent);border-radius:99px;min-width:3px}
.plan-bar-count{width:36px;text-align:right;color:var(--text);font-family:'Space Mono',monospace;font-size:12px}

/* ── STAT MINI ── */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.stat-mini{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:18px 20px}
.stat-mini-num{font-family:'Space Mono',monospace;font-size:1.7rem;color:var(--accent);font-weight:700}
.stat-mini-label{font-size:12px;color:var(--text3);margin-top:4px}

/* ── LOADER ── */
.spinner{width:18px;height:18px;border:2px solid rgba(11,13,16,.3);border-top-color:#0b0d10;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .panel-body{flex-direction:column}
  .sidebar{width:100%;display:flex;overflow-x:auto;border-right:none;border-bottom:0.5px solid var(--border)}
  .side-link{flex-shrink:0}
  .main-content{padding:24px 18px}
  .stat-row{grid-template-columns:1fr}
}