:root{
  --pitch:#16181D;
  --pitch-dark:#0A0B0E;
  --accent:#FF6A2B;
  --accent-dark:#E0541A;
  --chalk:#FAFAF8;
  --chalk-card:#FFFFFF;
  --ink:#17181C;
  --muted:#6B6B70;
  --line:#E7E5E2;
  --yellow:#FFC93C;
  --yellow-ink:#5B4300;
  --red:#D62828;
  --green-ok:#1E8F5E;
  --radius:14px;
  --shadow:0 2px 10px rgba(20,20,22,0.08), 0 1px 2px rgba(20,20,22,0.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--chalk);
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
#app{max-width:880px;margin:0 auto;padding:20px 16px 80px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001s !important; transition-duration:0.001s !important;} }

h1,h2,h3{font-family:'Oswald', sans-serif; margin:0; letter-spacing:0.01em;}
.mono{font-family:'JetBrains Mono', monospace;}

/* ---------- header ---------- */
.app-header{
  background:linear-gradient(160deg,var(--pitch),var(--pitch-dark));
  color:var(--chalk);
  border-radius:var(--radius);
  padding:28px 24px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.app-header::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 38px);
  pointer-events:none;
}
.app-header .eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:#F6C6CB; margin-bottom:6px;
}
.app-header h1{font-size:32px; font-weight:700; color:#fff; letter-spacing:0.02em;}
.app-header .sub{color:#F6D3D6; font-size:13.5px; margin-top:4px;}

/* ---------- WEREF League ---------- */
.league-hero h2{color:#fff; font-size:26px; margin-bottom:6px; position:relative; z-index:1;}
.league-hero .sub{margin-bottom:18px; margin-top:0;}
.league-summary-row{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1;}
.league-stat{flex:1; min-width:96px; background:rgba(255,255,255,0.09); border-radius:10px; padding:10px 12px;}
.league-stat .num{font-family:'JetBrains Mono'; font-weight:700; font-size:17px; color:#fff; white-space:nowrap;}
.league-stat .label{font-size:9.5px; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px;}
.league-lb-card{display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer; width:100%; margin-bottom:18px; transition:transform .12s ease, box-shadow .12s ease;}
.league-lb-card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,20,22,0.14);}
.league-fact{font-size:11px; background:var(--chalk); border:1px solid var(--line); border-radius:8px; padding:4px 9px; color:var(--ink); font-weight:600; white-space:nowrap;}
.league-mode-card{transition:transform .12s ease, box-shadow .12s ease;}
.league-mode-card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,20,22,0.14);}
.academia-module-card{transition:transform .12s ease, box-shadow .12s ease;}
.academia-module-card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,20,22,0.14);}
.header-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; position:relative; z-index:1;}
.ring-wrap{display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; transition:transform .12s ease, opacity .12s ease;}
.ring-wrap:hover{transform:translateY(-2px); opacity:0.85;}
.ring-wrap:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:12px;}
.ring{width:64px;height:64px;border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative;}
.ring svg{position:absolute; inset:0;}
.ring .pct{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; color:#fff;}
.ring-label{font-size:10px; color:#F6C6CB; text-transform:uppercase; letter-spacing:0.08em;}
.header-logout-btn{
  position:absolute; top:12px; right:14px; z-index:2;
  background:none; border:none; cursor:pointer; padding:6px;
  color:rgba(255,255,255,0.4); transition:color .12s ease;
}
.header-logout-btn:hover{color:#fff;}
.header-logout-btn svg{width:17px; height:17px; display:block;}

.backbtn{
  background:none;border:none;color:var(--muted);
  font-family:'Work Sans'; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:6px; cursor:pointer; padding:8px 0 14px; margin:0;
}
.backbtn:hover{color:var(--ink);}

/* ---------- law grid ---------- */
.law-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px;}
.law-card{
  background:var(--chalk-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 14px 12px; cursor:pointer; text-align:left; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease; position:relative; overflow:hidden;
}
.law-card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,20,22,0.14);}
.law-card:focus-visible{outline:3px solid var(--yellow); outline-offset:2px;}
.law-card-hard{border-color:var(--red); background:linear-gradient(160deg, var(--red), #3A0A0A);}
.law-card-hard .law-num{color:#fff;}
.law-card-hard .law-name{color:#fff; font-size:16px; font-weight:700;}
.law-card-hard .hard-tag{background:rgba(255,255,255,0.22); color:#fff;}
.law-card-hard .law-pct{color:#fff;}
.law-card-hard .law-bar-bg{background:rgba(255,255,255,0.28);}
.law-card-hard .law-bar-fill{background:#fff !important;}
.law-card-hard .law-sub, .law-card-hard .law-sub-muted{color:rgba(255,255,255,0.85); opacity:1;}
.law-card-hard:hover{box-shadow:0 6px 18px rgba(214,38,40,0.35);}
.law-card-failed{border-color:var(--yellow); background:linear-gradient(160deg, var(--yellow), #E0A800);}
.law-card-failed:hover{box-shadow:0 6px 18px rgba(255,201,60,0.4);}
.hard-tag{font-family:'JetBrains Mono'; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--red); background:#FDECEC; padding:1px 6px; border-radius:6px; vertical-align:middle; margin-left:2px;}
.law-num{font-family:'Oswald'; font-weight:700; font-size:34px; color:var(--pitch); line-height:1;}
.law-icon{position:absolute; top:10px; right:10px; width:46px; height:46px; border-radius:50%; background:rgba(20,20,22,0.06); display:flex; align-items:center; justify-content:center; color:var(--pitch);}
.law-icon svg{width:27px; height:27px; display:block;}
.law-name{font-size:12.5px; font-weight:600; color:var(--ink); margin-top:6px; line-height:1.25; min-height:32px;}
.law-meta{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.law-bar-bg{flex:1; height:5px; border-radius:4px; background:var(--line); overflow:hidden; margin-right:8px;}
.law-bar-fill{height:100%; border-radius:4px; background:var(--accent);}
.law-pct{font-family:'JetBrains Mono'; font-size:11px; color:var(--muted); font-weight:700;}
.law-sub{font-size:10.5px; color:var(--muted); margin-top:5px; display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.law-sub-muted{color:var(--muted); opacity:0.65; font-style:italic;}
.acc-badge{font-family:'JetBrains Mono'; font-weight:700; font-size:10px; padding:1px 7px; border-radius:8px; letter-spacing:0.01em;}

/* ---------- section header ---------- */
.section-title{font-size:15px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin:22px 0 10px; font-weight:600; font-family:'Work Sans';}

/* ---------- law detail menu ---------- */
.big-law-head{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.big-law-head .num{font-family:'Oswald'; font-weight:700; font-size:48px; color:var(--pitch); line-height:1;}
.big-law-head .name{font-size:18px; font-weight:700;}
.big-law-head .stat{font-size:12.5px; color:var(--muted); margin-top:2px;}

.menu-list{display:flex; flex-direction:column; gap:10px;}
.menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--chalk-card); border:1px solid var(--line); border-radius:14px;
  padding:18px; cursor:pointer; box-shadow:var(--shadow); text-align:left;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.menu-item:hover{border-color:var(--pitch); transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,20,22,0.14);}
.menu-item:active{transform:translateY(0); box-shadow:var(--shadow);}
.menu-item .title{font-weight:700; font-size:14.5px;}
.menu-item .desc{font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4;}
.menu-item .arrow{color:var(--pitch); font-size:18px; flex-shrink:0;}
.menu-item-icon{font-size:22px; line-height:1; flex-shrink:0;}
.menu-item-tag{font-family:'JetBrains Mono'; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:3px 8px; border-radius:8px; white-space:nowrap;}
.menu-item-arrow-circle{
  width:30px; height:30px; border-radius:50%; background:var(--chalk); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--pitch); font-size:16px; flex-shrink:0;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.menu-item:hover .menu-item-arrow-circle{background:var(--pitch); color:#fff; border-color:var(--pitch);}

/* ---------- buttons ---------- */
.btn{
  font-family:'Work Sans'; font-weight:700; font-size:14px; border-radius:10px;
  padding:11px 18px; border:none; cursor:pointer; transition:filter .1s;
}
.btn:hover{filter:brightness(0.95);}
.btn-primary{background:var(--pitch); color:#fff;}
.btn-secondary{background:var(--chalk-card); color:var(--pitch); border:1.5px solid var(--pitch);}
.btn-ghost{background:none; color:var(--muted); border:1.5px solid var(--line);}
.btn-yellow{background:var(--yellow); color:var(--yellow-ink);}
.btn:disabled{opacity:0.5; cursor:not-allowed;}

/* ---------- quiz ---------- */
.quiz-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--pitch); color:#fff; border-radius:12px; padding:10px 16px; margin-bottom:16px;
  font-family:'JetBrains Mono'; font-size:12.5px;
}
.quiz-topbar .qcount{font-weight:700;}
.quiz-topbar .score{color:var(--yellow); font-weight:700;}
.progress-track{height:6px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:18px;}
.progress-fill{height:100%; background:var(--accent); transition:width .25s ease;}

.qcard{background:var(--chalk-card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);}
.qcard .qtag{font-family:'JetBrains Mono'; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}
.qcard .qtext{font-size:16.5px; font-weight:600; line-height:1.4; margin:8px 0 18px;}
.qdate-chips{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0;}
.qdate-chip{display:inline-flex; align-items:center; gap:4px; font-family:'JetBrains Mono'; font-size:10px; font-weight:600; text-transform:none; letter-spacing:normal; color:var(--muted); background:var(--chalk); border:1px solid var(--line); border-radius:20px; padding:3px 9px; white-space:nowrap;}

.option{
  display:block; width:100%; text-align:left; background:#fff; border:1.5px solid var(--line);
  border-radius:10px; padding:13px 14px; margin-bottom:9px; font-family:'Work Sans'; font-size:14px;
  cursor:pointer; line-height:1.35; transition:border-color .1s, background .1s;
}
button.option:hover:not(:disabled){border-color:var(--pitch); background:#FBF1F1;}
.option:disabled{cursor:default;}
.option .letter{font-family:'JetBrains Mono'; font-weight:700; margin-right:8px; color:var(--pitch);}
.option.correct{border-color:var(--green-ok); background:#EAF7EF;}
.option.incorrect{border-color:var(--red); background:#FDECEC;}
.option.reveal-correct{border-color:var(--green-ok); background:#EAF7EF;}
.option.selected{border-color:var(--pitch); background:#EFF6F1;}
#timer-display.time-low{color:var(--red) !important;}

/* card feedback signature element */
.card-feedback{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px 16px;
  border-radius:10px; animation:cardIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn{ from{opacity:0; transform:translateY(-10px) rotate(-3deg);} to{opacity:1; transform:translateY(0) rotate(0);} }
.card-feedback.ok{background:#EAF7EF;}
.card-feedback.bad{background:#FDECEC;}
.ref-card{width:26px; height:36px; border-radius:3px; flex-shrink:0;}
.ref-card.yellow{background:var(--yellow);}
.ref-card.red{background:var(--red);}
.card-feedback .msg{font-size:13.5px; font-weight:600;}
.card-feedback .msg small{display:block; font-weight:400; color:var(--muted); margin-top:2px;}

.quiz-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}
.q-dots{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:22px;}
.cal-wrap{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px;}
.cal-month{background:var(--chalk-card); border:1px solid var(--line); border-radius:10px; padding:10px;}
.cal-month-name{font-family:'Oswald'; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:0.03em; color:var(--pitch); margin-bottom:6px;}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px;}
.cal-cell{position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:9px; border-radius:4px; background:var(--line); color:var(--muted);}
.cal-cell.empty{background:none;}
.cal-cell.active{background:var(--accent); color:#fff; font-weight:700;}
.cal-cell.today{box-shadow:0 0 0 1.5px var(--pitch) inset;}
.cal-cell.future{opacity:0.4;}
.cal-cell.has-event::after{content:''; position:absolute; top:1px; right:1px; width:5px; height:5px; border-radius:50%; background:var(--event-dot, var(--pitch)); box-shadow:0 0 0 1px #fff;}
.cal-cell.active.has-event::after{box-shadow:0 0 0 1px var(--accent);}
.q-dot{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono'; font-size:11px; font-weight:700;
  color:var(--muted); flex-shrink:0; cursor:default; padding:0;
}
button.q-dot{cursor:pointer;}
button.q-dot:hover{border-color:var(--pitch);}
.q-dot.current{border-color:var(--pitch); border-width:2px; box-shadow:0 0 0 3px rgba(255,106,43,0.22);}
.q-dot.ok{background:var(--green-ok); border-color:var(--green-ok); color:#fff;}
.q-dot.bad{background:var(--red); border-color:var(--red); color:#fff;}
.q-dot.answered{background:var(--pitch); border-color:var(--pitch); color:#fff;}

/* ---------- results ---------- */
.result-hero{text-align:center; padding:30px 16px; background:var(--chalk-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px;}
.result-hero .big{font-family:'Oswald'; font-size:52px; font-weight:700; color:var(--pitch);}
.result-hero .label{color:var(--muted); font-size:13px; margin-top:4px;}
.breakdown-row{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px; border-radius:6px; background:transparent;}
.breakdown-row:last-child{border-bottom:none;}
.breakdown-row:nth-child(even){background:rgba(22,24,29,0.04);}

/* ---------- leaderboard ---------- */
@keyframes rowIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.lb-row{display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); border-radius:8px; animation:rowIn .25s ease both;}
.lb-row:last-child{border-bottom:none;}
.lb-row:nth-child(even):not(.lb-top1):not(.lb-top2):not(.lb-top3):not(.lb-me){background:rgba(22,24,29,0.04);}
.lb-row.lb-me{background:rgba(255,106,43,0.09); border:1.5px solid var(--yellow); box-shadow:0 3px 10px rgba(255,201,60,0.35); animation:rowIn .35s cubic-bezier(.2,.8,.2,1) both;}
.lb-you-badge{display:inline-block; font-family:'JetBrains Mono'; font-size:9px; font-weight:700; letter-spacing:0.04em; background:var(--yellow); color:var(--yellow-ink); padding:1px 6px; border-radius:5px; vertical-align:middle;}
.lb-summary-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.lb-summary-stat{flex:1; min-width:96px; background:var(--chalk-card); border:1px solid var(--line); border-radius:12px; padding:11px 10px; text-align:center; box-shadow:var(--shadow);}
.lb-summary-stat .num{font-family:'JetBrains Mono'; font-weight:700; font-size:17px; color:var(--pitch); white-space:nowrap;}
.lb-summary-stat .label{font-size:9.5px; color:var(--muted); margin-top:2px; white-space:nowrap;}
.lb-rank{font-family:'JetBrains Mono'; font-weight:700; font-size:13.5px; color:var(--muted); width:26px; text-align:center; flex-shrink:0;}
.lb-medal{font-size:19px; width:26px; text-align:center; flex-shrink:0;}
.lb-row.lb-top1{background:linear-gradient(135deg,#FFF6DE,#FFE9AE);}
.lb-row.lb-top2{background:linear-gradient(135deg,#F4F4F3,#E2E2E0);}
.lb-row.lb-top3{background:linear-gradient(135deg,#FBE9DB,#F1CDAC);}
.lb-flag{font-size:17px; flex-shrink:0;}
.lb-info{flex:1; min-width:0;}
.lb-name{font-weight:700; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-meta{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;}
.lb-score{font-family:'JetBrains Mono'; font-weight:700; font-size:15px; color:var(--pitch); flex-shrink:0;}
.lb-standing{margin-top:16px; padding:16px; border-radius:12px; background:var(--pitch); color:#fff;}
.lb-standing .lb-name{color:#fff;}
.lb-standing .lb-meta{color:rgba(255,255,255,0.65);}
.lb-standing .lb-score{color:#fff;}
.lb-gap{font-size:12px; color:rgba(255,255,255,0.8); margin-top:10px;}
.lb-progress-track{background:rgba(255,255,255,0.18); border-radius:6px; height:7px; margin-top:6px; overflow:hidden;}
.lb-progress-fill{background:var(--accent); height:100%; border-radius:6px;}

/* ---------- forms ---------- */
label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin:14px 0 6px; text-transform:uppercase; letter-spacing:0.04em;}
input[type=text], input[type=email], input[type=password], textarea, select{
  width:100%; border:1.5px solid var(--line); border-radius:8px; padding:10px 12px;
  font-family:'Work Sans'; font-size:14px; background:#fff; color:var(--ink);
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--pitch); border-color:var(--pitch);}
textarea{resize:vertical; min-height:64px;}
.radio-row{display:flex; align-items:center; gap:8px; padding:8px 0;}
.empty-state{text-align:center; padding:40px 20px; color:var(--muted); font-size:14px;}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--pitch); color:#fff; padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); z-index:50; animation:toastIn .2s ease;}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);}}

.flag-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--chalk-card); color:var(--ink); font-family:'Work Sans'; font-weight:600;
  font-size:12.5px; cursor:pointer; text-decoration:none;
  border:1.5px solid var(--line); border-radius:8px; padding:8px 14px; margin-top:4px;
  transition:background .12s ease, border-color .12s ease, transform .05s ease;
  position:relative;
}
.flag-btn:hover{background:#F4F4EE; border-color:rgba(22,24,29,0.22);}
.flag-btn:active{transform:scale(0.97);}
.flag-btn[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; left:0; bottom:calc(100% + 9px);
  width:220px; max-width:60vw; background:var(--pitch); color:#fff;
  font-size:11.5px; font-weight:500; line-height:1.4; text-align:left;
  padding:8px 10px; border-radius:8px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none; z-index:20;
}
.flag-btn[data-tooltip]:hover::after{opacity:1; visibility:visible; transform:translateY(0);}
.icon-btn{background:none; border:none; cursor:pointer; font-size:14.5px; line-height:1; padding:6px 7px; border-radius:6px; flex-shrink:0;}
.icon-btn:hover{background:rgba(22,24,29,0.07);}
.badge{display:inline-block; font-family:'JetBrains Mono'; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--yellow); color:var(--yellow-ink); margin-left:6px;}

.mydocs-dropzone{border-radius:var(--radius); transition:background .12s ease, box-shadow .12s ease; padding:2px; margin:-2px;}
.mydocs-dropzone.drag-over{background:#FFF1E8; box-shadow:0 0 0 2px var(--accent) inset; border-radius:var(--radius);}

.stat-table{width:100%; border-collapse:collapse; margin-top:6px;}
.stat-table th, .stat-table td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); font-size:13px;}
.stat-table th{color:var(--muted); font-weight:700; font-size:11.5px; text-transform:uppercase;}
.stat-table tr:nth-child(even) td{background:rgba(22,24,29,0.04);}

.admin-chart{display:flex; align-items:flex-end; gap:3px; height:130px;}
.admin-chart-bar{flex:1; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; opacity:0.85; transition:opacity .12s ease;}
.admin-chart-bar:hover{opacity:1;}

.tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
.tab{font-family:'Work Sans'; font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:20px; border:1.5px solid var(--line); background:#fff; cursor:pointer; color:var(--muted);}
.tab.active{background:var(--accent); color:#fff; border-color:var(--accent);}

.footer-note{text-align:center; color:var(--muted); font-size:11.5px; margin-top:26px;}
.modal-backdrop{position:fixed; inset:0; background:rgba(10,11,14,0.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-card{background:#fff; border-radius:14px; padding:22px; max-width:460px; width:100%; max-height:85vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,0.25); animation:cardIn .18s ease;}

/* ---------- auth (login/register) ---------- */
.auth-wrap{max-width:400px; margin:60px auto; padding:0 16px;}
.auth-card{background:var(--chalk-card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow);}
.auth-logo{width:56px; height:56px; margin:0 auto 14px;}
.auth-title{text-align:center; font-size:22px; margin-bottom:4px;}
.auth-sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:18px;}
.auth-error{background:#FDECEC; color:var(--red); border-radius:8px; padding:10px 12px; font-size:13px; margin-top:10px;}
.auth-switch{text-align:center; font-size:13px; color:var(--muted); margin-top:16px;}
.auth-switch button{background:none; border:none; color:var(--pitch); font-weight:700; cursor:pointer; text-decoration:underline; padding:0; font-size:13px;}
.auth-submit{width:100%; margin-top:16px;}
.modal-close{position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:4px;}
.modal-close:hover{color:var(--ink);}

/* ---------- landing page ---------- */
.landing-nav{
  max-width:1080px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.landing-brand{display:flex; align-items:center; gap:10px; font-family:'Oswald'; font-weight:700; font-size:18px; color:var(--pitch);}
.landing-brand .mark{width:30px; height:30px; flex-shrink:0;}
.landing-nav-actions{display:flex; align-items:center; gap:10px;}
.nav-social-link{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; color:var(--pitch); flex-shrink:0; transition:background .15s ease, color .15s ease;}
.nav-social-link svg{width:20px; height:20px;}
.nav-social-link:hover{background:rgba(22,24,29,0.06); color:var(--accent);}
.landing-hero{
  max-width:1080px; margin:0 auto; padding:36px 20px 50px; text-align:center;
}
.landing-hero h1{font-size:44px; font-weight:800; line-height:1.08; color:var(--pitch); margin-bottom:10px;}
.landing-hero h1 .accent{color:var(--accent);}
.landing-hero .lead{font-size:16.5px; color:var(--muted); max-width:680px; margin:0 auto 22px; line-height:1.55;}
.landing-hero-actions{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.landing-hero-actions .btn{padding:15px 30px; font-size:16px; border-radius:12px;}
.landing-stats{display:flex; justify-content:center; align-items:stretch; gap:0; margin-top:28px; flex-wrap:wrap;}
.landing-stat{padding:0 32px; border-left:1px solid var(--line);}
.landing-stat:first-child{border-left:none; padding-left:0;}
.landing-stat:last-child{padding-right:0;}
.landing-stat .num{font-family:'Oswald'; font-weight:700; font-size:34px; color:var(--pitch);}
.landing-stat .lbl{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px;}
.landing-section{max-width:1080px; margin:0 auto; padding:20px 20px 60px;}
.landing-section h2{font-size:24px; color:var(--pitch); text-align:center; margin-bottom:34px;}
.landing-cta{
  background:linear-gradient(160deg,var(--pitch),var(--pitch-dark)); color:#fff;
  border-radius:20px; max-width:1080px; margin:0 auto 60px;
  overflow:hidden; position:relative; box-shadow:0 14px 34px rgba(0,0,0,0.22);
}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; padding:40px 44px; position:relative; z-index:1;}
.cta-text{flex:1; min-width:280px; max-width:520px;}
.cta-icon-badge{width:42px; height:42px; border-radius:50%; background:var(--yellow); color:var(--pitch); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.cta-icon-badge svg{width:21px; height:21px;}
.landing-cta h2{color:#fff; font-size:29px; line-height:1.22; text-align:left; margin-bottom:10px;}
.cta-highlight{color:var(--yellow);}
.cta-sub{color:rgba(255,255,255,0.6); font-size:14px; margin:0 0 22px;}
.cta-btn{display:inline-flex; align-items:center; gap:9px; padding:14px 28px; font-size:15px; border-radius:11px;}
.cta-btn svg{width:17px; height:17px; flex-shrink:0;}
.cta-benefits{display:flex; gap:20px; margin-top:26px; flex-wrap:wrap;}
.cta-benefit{display:flex; align-items:center; gap:10px; max-width:150px;}
.cta-benefit-icon{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cta-benefit-icon svg{width:15px; height:15px; color:var(--yellow);}
.cta-benefit-title{font-size:12px; font-weight:700; color:#fff;}
.cta-benefit-desc{font-size:10.5px; color:rgba(255,255,255,0.5); margin-top:1px;}
.cta-visual{flex-shrink:0; width:180px; height:180px; display:flex; align-items:center; justify-content:center; position:relative;}
.cta-visual::before{content:''; position:absolute; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle, rgba(255,201,60,0.14), transparent 70%);}
.cta-visual-svg{width:100%; height:100%; position:relative; z-index:1;}
.cta-deco{opacity:0.3;}

@media (max-width:900px){
  .cta-visual{width:130px; height:130px;}
  .cta-visual::before{width:120px; height:120px;}
}
@media (max-width:680px){
  .cta-inner{flex-direction:column; text-align:center; padding:36px 26px;}
  .cta-icon-badge{margin-left:auto; margin-right:auto;}
  .landing-cta h2{font-size:24px; text-align:center;}
  .cta-visual{display:none;}
  .cta-btn{width:100%; justify-content:center;}
  .cta-benefits{flex-direction:column; align-items:center; gap:14px; margin-top:24px;}
  .cta-benefit{max-width:260px; text-align:left;}
}
.landing-footer{text-align:center; padding:24px 20px 40px; color:var(--muted); font-size:12px;}

.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--chalk-card); border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(20,20,22,0.1); padding:16px 24px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;}
.cookie-banner-text{font-size:13px; color:var(--ink); max-width:600px; line-height:1.5;}
.cookie-banner-text a{color:var(--pitch); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:10px; flex-shrink:0;}
.cookie-banner .btn{padding:9px 18px; font-size:13px;}
@media (max-width:640px){ .cookie-banner{flex-direction:column; text-align:center; padding:16px;} }

.landing-hero-social-proof{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; font-size:12.5px; color:var(--muted); flex-wrap:wrap;}
.landing-hero-social-proof .stars{color:var(--yellow); letter-spacing:2px; font-size:14px;}
.landing-hero-mockup{max-width:860px; margin:32px auto 0;}

.app-mockup{background:var(--chalk-card); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 50px rgba(20,20,22,0.14); overflow:hidden;}
.app-mockup-bar{background:var(--pitch); padding:12px 16px; display:flex; gap:6px;}
.app-mockup-dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.25);}
.app-mockup-body{padding:28px; background:#fff;}
.mockup-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.mockup-tile{flex:1; min-width:88px; background:var(--chalk); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow);}
.mockup-tile .mockup-num{font-family:'JetBrains Mono'; font-weight:700; font-size:20px; color:var(--pitch);}
.mockup-tile .mockup-lbl{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; margin-top:2px;}
.mockup-tile-ring{display:flex; align-items:center; gap:12px;}
.mockup-ring{width:34px; height:34px; border-radius:50%; background:conic-gradient(var(--accent) var(--pct,0%), var(--line) 0); flex-shrink:0; position:relative;}
.mockup-ring::after{content:''; position:absolute; inset:5px; background:var(--chalk); border-radius:50%;}
.mockup-bar-track{height:6px; background:var(--line); border-radius:4px; overflow:hidden;}
.mockup-bar-fill{height:100%; background:var(--accent); border-radius:4px;}
.mockup-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:14px;}
.mockup-cell{aspect-ratio:1; border-radius:6px; background:var(--line);}
.mockup-cell.on{background:var(--accent);}

/* ---------- "¿Qué encontrarás dentro?" — SaaS-style feature grid ---------- */
.saas-features{padding-top:100px; padding-bottom:100px;}
.saas-features h2{font-size:44px; font-weight:700; line-height:1.15; margin-bottom:8px;}
.saas-highlight{color:var(--yellow);}
.saas-features-sub{font-family:'Work Sans'; font-size:18px; font-weight:400; color:var(--muted); text-align:center; max-width:520px; margin:0 auto 44px;}
.saas-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; max-width:1080px; margin:0 auto;}
.saas-card{
  background:#FFFFFF; border:1px solid var(--line); border-bottom:3px solid var(--yellow); border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,0.05);
  padding:36px; height:264px; text-align:left; cursor:pointer; position:relative; overflow:hidden;
  display:flex; flex-direction:column; font-family:inherit;
  transition:transform .25s ease, box-shadow .25s ease;
}
.saas-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.08);}
.saas-card:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
.saas-card-icon-wrap{width:44px; height:44px; border-radius:12px; background:rgba(255,201,60,0.16); display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex-shrink:0;}
.saas-card-icon{width:22px; height:22px; color:var(--pitch); transition:color .25s ease; flex-shrink:0;}
.saas-card-icon svg{width:100%; height:100%; display:block;}
.saas-card:hover .saas-card-icon{color:var(--accent);}
.saas-card h3{font-size:22px; font-weight:700; color:var(--ink); margin:0 0 10px;}
.saas-card p{font-family:'Work Sans'; font-size:15px; line-height:1.6; color:var(--muted); margin:0; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.saas-card-link{font-family:'Work Sans'; font-size:15px; font-weight:600; color:var(--pitch); margin-top:14px; transition:color .25s ease;}
.saas-card:hover .saas-card-link{color:var(--accent);}
@media (max-width: 900px){
  .saas-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 600px){
  .saas-grid{grid-template-columns:1fr;}
  .saas-features{padding-top:60px; padding-bottom:60px;}
  .saas-features h2{font-size:30px;}
  .saas-features-sub{margin-bottom:36px;}
  .saas-card{height:auto; min-height:230px;}
}

.landing-quiz-section{max-width:820px; margin:0 auto 60px; padding:0 20px;}
.landing-quiz-card{background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:48px 36px; text-align:center; box-shadow:var(--shadow);}
.landing-quiz-card h2{margin-bottom:12px; font-size:25px;}
.landing-quiz-card p{color:var(--muted); font-size:14.5px; margin:0 0 22px; max-width:440px; margin-left:auto; margin-right:auto;}
.landing-quiz-card .btn{padding:13px 30px; font-size:15px;}

.quiz-meta{display:flex; align-items:center; justify-content:center; gap:20px; margin:0 0 30px; flex-wrap:wrap;}
.quiz-meta-item{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted);}
.quiz-meta-item svg{width:15px; height:15px; flex-shrink:0; color:var(--accent-dark);}

.quiz-segmented{display:inline-flex; background:var(--chalk); border-radius:12px; padding:4px; gap:2px; margin:0 auto 14px;}
.quiz-seg-btn{font-family:'Work Sans'; font-weight:700; font-size:13.5px; padding:10px 30px; border-radius:9px; border:none; background:none; color:var(--muted); cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; position:relative;}
.quiz-seg-btn.active{background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,0.12);}
.quiz-seg-btn:hover:not(.active){color:var(--ink);}
.quiz-seg-btn[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
  width:200px; max-width:60vw; background:var(--pitch); color:#fff;
  font-family:'Work Sans'; font-size:11.5px; font-weight:500; line-height:1.4; text-align:left; text-transform:none;
  padding:8px 10px; border-radius:8px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease;
  pointer-events:none; z-index:20;
}
.quiz-seg-btn[data-tooltip]:hover::after{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}

.quiz-mode-desc{font-size:13px; color:var(--muted); margin-bottom:28px; max-width:380px; margin-left:auto; margin-right:auto;}

.btn-quiz-cta{display:block; width:100%; max-width:300px; margin:0 auto; height:54px; font-size:16px; border-radius:12px;}

.quiz-play-inner{text-align:left;}
.quiz-topbar-landing{display:flex; align-items:center; justify-content:space-between; background:var(--chalk); border-radius:10px; padding:10px 14px; margin-bottom:16px; font-family:'JetBrains Mono'; font-size:12px; color:var(--ink);}
.quiz-topbar-landing .score{color:var(--accent-dark); font-weight:700;}
.quiz-play-inner .qtext{font-size:16px; font-weight:600; margin-bottom:18px; text-align:center;}

.quiz-review-item{background:var(--chalk); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px;}
.quiz-review-tag{font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.quiz-review-q{font-size:14px; font-weight:600; margin-bottom:12px; line-height:1.4;}
.quiz-review-item .option{margin-bottom:8px; padding:9px 12px;}
.quiz-review-item .option:last-child{margin-bottom:0;}

.dash-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; max-width:1080px; margin:0 auto;}
.dash-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,0.05);
  padding:28px; text-align:left; cursor:pointer; position:relative; overflow:hidden;
  display:flex; flex-direction:column; font-family:inherit;
  transition:transform .25s ease, box-shadow .25s ease;
}
.dash-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.dash-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.08);}
.dash-card:hover::before{transform:scaleX(1);}
.dash-card:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
.dash-card-icon{width:32px; height:32px; color:var(--pitch); margin-bottom:16px; transition:color .25s ease; flex-shrink:0;}
.dash-card-icon svg{width:100%; height:100%; display:block;}
.dash-card:hover .dash-card-icon{color:var(--accent);}
.dash-card h3{font-size:19px; font-weight:700; color:var(--ink); margin:0 0 8px;}
.dash-desc{font-family:'Work Sans'; font-size:13.5px; line-height:1.55; color:var(--muted); margin:0 0 18px;}

.dash-list{margin-bottom:20px;}
.dash-list-row{display:flex; align-items:center; justify-content:space-between; padding:9px 11px; background:var(--chalk); border-radius:9px; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink);}
.dash-list-row:last-child{margin-bottom:0;}
.dash-list-label{display:flex; align-items:center; gap:8px;}
.dash-list-label svg{width:15px; height:15px; color:var(--accent); flex-shrink:0;}
.dash-list-count{font-family:'JetBrains Mono'; color:var(--muted); font-weight:700;}

.dash-rank{display:flex; align-items:baseline; gap:9px; margin-bottom:14px;}
.dash-rank-num{font-family:'Oswald'; font-size:30px; font-weight:700; color:var(--pitch);}
.dash-rank-pts{font-size:13px; color:var(--muted); font-weight:600;}

.dash-progress{height:6px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:8px;}
.dash-progress-fill{height:100%; background:var(--accent); border-radius:4px;}
.dash-progress-label{font-size:12px; color:var(--muted); margin-bottom:20px;}

.dash-chart{display:flex; align-items:flex-end; gap:6px; height:56px; margin-bottom:16px;}
.dash-chart-bar{flex:1; border-radius:3px 3px 0 0;}

.dash-card-link{font-family:'Work Sans'; font-size:14px; font-weight:600; color:var(--pitch); margin-top:auto; transition:color .25s ease;}
.dash-card:hover .dash-card-link{color:var(--accent);}

@media (max-width: 900px){
  .dash-grid{grid-template-columns:1fr; max-width:460px;}
}
@media (max-width: 720px){
  .mockup-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width: 640px){
  .landing-nav{flex-wrap:wrap; gap:12px;}
  .landing-hero h1{font-size:28px;}
  .landing-hero-actions{flex-direction:column; align-items:stretch;}
  .landing-hero-actions .btn{width:100%;}
  .landing-stats{gap:0 6px;}
  .landing-stat{padding:0 14px;}
  .mockup-row{flex-direction:column;}
  .landing-quiz-card{padding:32px 20px;}
  .landing-quiz-card h2{font-size:21px;}
  .quiz-meta{gap:12px 16px;}
  .quiz-seg-btn{padding:10px 22px;}
}