:root{
  --navy-900:#0a1929; --navy-800:#0f2238; --navy-700:#142a45;
  --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7;
  --ink:#0b1220; --muted:#64748b; --line:#e2e8f0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== Top announcement ===== */
.announce{background:linear-gradient(90deg,#0284c7,#0ea5e9);color:#fff;font-size:14px;text-align:center;padding:8px 16px}
.announce a{color:#fff;text-decoration:underline;font-weight:600;margin-left:6px}

/* ===== Header ===== */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.logo .badge{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#0284c7);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.logo .ias{color:#0ea5e9}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-weight:500;color:#1e293b;font-size:15px}
.nav-links a:hover,.nav-links a.active{color:#0284c7}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent;transition:all .15s}
.btn-ghost{background:#fff;color:#0f172a;border-color:#cbd5e1}
.btn-ghost:hover{border-color:#0ea5e9;color:#0284c7}
.btn-primary{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;box-shadow:0 6px 20px -6px rgba(14,165,233,.6)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-lg{padding:14px 24px;font-size:16px;border-radius:12px}
.btn-light{background:#fff;color:#0284c7}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}
.menu-btn{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:#0f172a}

/* ===== Hero ===== */
.hero{background:radial-gradient(1200px 600px at 80% -10%,rgba(14,165,233,.35),transparent 60%),linear-gradient(160deg,#0a1929 0%,#0f2238 60%,#142a45 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:-100px;top:200px;width:300px;height:300px;border-radius:50%;background:rgba(14,165,233,.08)}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding:80px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(14,165,233,.15);color:#7dd3fc;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:24px;border:1px solid rgba(14,165,233,.3)}
.h1{font-size:54px;line-height:1.1;font-weight:800;margin:0 0 20px;letter-spacing:-1px}
.h1 .accent{background:linear-gradient(135deg,#7dd3fc,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#cbd5e1;font-size:17px;line-height:1.6;max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:520px}
.stat .num{font-size:28px;font-weight:800;color:#fff}
.stat .lbl{color:#94a3b8;font-size:13px;margin-top:2px}

/* Hero card */
.hero-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;backdrop-filter:blur(10px)}
.hero-card h3{margin:0 0 18px;color:#7dd3fc;font-size:14px;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.hc-row{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:10px;cursor:pointer;transition:all .15s}
.hc-row:hover{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.4);transform:translateX(4px)}
.hc-row .ico{width:42px;height:42px;border-radius:10px;background:rgba(14,165,233,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.hc-row .body{flex:1}
.hc-row .ttl{color:#fff;font-weight:700;font-size:15px}
.hc-row .sub{color:#94a3b8;font-size:12px;margin-top:2px}
.hc-row .arr{color:#64748b}

/* ===== Exam pills ===== */
.exam-pills{background:#fff;border-bottom:1px solid var(--line);padding:18px 0}
.pill-row{display:flex;gap:10px;align-items:center;overflow-x:auto;padding-bottom:4px}
.pill-row::-webkit-scrollbar{height:4px}
.pill-row::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.pill-label{color:#64748b;font-size:13px;font-weight:600;text-transform:uppercase;flex-shrink:0;margin-right:6px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #e2e8f0;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .15s;background:#fff;color:#334155}
.pill:hover{border-color:#0ea5e9;color:#0284c7}
.pill.active{background:#e0f2fe;border-color:#0ea5e9;color:#0284c7}

/* ===== Section ===== */
.section{padding:72px 0}
.section.alt{background:#f8fafc}
.section-head{text-align:center;max-width:680px;margin:0 auto 48px}
.section-eyebrow{display:inline-block;background:#e0f2fe;color:#0284c7;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px}
.section h2{font-size:38px;line-height:1.2;margin:0 0 12px;font-weight:800;letter-spacing:-.5px}
.section .desc{color:#64748b;font-size:16px;line-height:1.6}

/* ===== Exam category cards ===== */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;transition:all .2s;cursor:pointer;position:relative;overflow:hidden}
.cat:hover{border-color:#0ea5e9;transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(14,165,233,.4)}
.cat::after{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.08),transparent 70%)}
.cat .ico{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.cat-upsc .ico{background:#fef3c7;color:#b45309}
.cat-ssc .ico{background:#dcfce7;color:#15803d}
.cat-bank .ico{background:#dbeafe;color:#1d4ed8}
.cat-state .ico{background:#fce7f3;color:#be185d}
.cat-rly .ico{background:#fee2e2;color:#b91c1c}
.cat-tch .ico{background:#ede9fe;color:#6d28d9}
.cat-def .ico{background:#cffafe;color:#0e7490}
.cat-net .ico{background:#fef9c3;color:#854d0e}
.cat h3{margin:0 0 6px;font-size:18px;font-weight:700}
.cat p{margin:0 0 16px;color:#64748b;font-size:13px;line-height:1.5}
.cat .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.cat .count{color:#0284c7;font-weight:700}
.cat .arrow{color:#94a3b8;transition:transform .15s}
.cat:hover .arrow{transform:translateX(4px);color:#0284c7}

/* ===== Test series cards (widgets) ===== */
.ts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ts{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:all .2s;display:flex;flex-direction:column}
.ts:hover{border-color:#0ea5e9;box-shadow:0 20px 40px -20px rgba(14,165,233,.3);transform:translateY(-2px)}
.ts-banner{height:120px;background:linear-gradient(135deg,#0ea5e9,#0284c7);position:relative;display:flex;align-items:flex-end;padding:16px;color:#fff}
.ts-banner.upsc{background:linear-gradient(135deg,#f59e0b,#d97706)}
.ts-banner.ssc{background:linear-gradient(135deg,#10b981,#059669)}
.ts-banner.bank{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.ts-banner.hppsc{background:linear-gradient(135deg,#ec4899,#be185d)}
.ts-banner.hprca{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.ts-banner.rly{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.ts-banner .tag{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.25);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ts-banner .ttl{font-size:18px;font-weight:800;line-height:1.2}
.ts-body{padding:18px;flex:1;display:flex;flex-direction:column}
.ts-meta{display:flex;gap:16px;margin-bottom:14px;font-size:13px;color:#64748b}
.ts-meta span{display:inline-flex;align-items:center;gap:6px}
.ts-meta b{color:#0f172a}
.ts-features{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:6px}
.ts-features li{font-size:13px;color:#475569;display:flex;gap:8px;align-items:flex-start}
.ts-features li::before{content:"✓";color:#0ea5e9;font-weight:700}
.ts-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid #f1f5f9}
.ts-price{font-size:22px;font-weight:800;color:#0f172a}
.ts-price .free{color:#10b981}
.ts-price .strike{font-size:13px;color:#94a3b8;text-decoration:line-through;font-weight:500;margin-left:6px}

/* ===== Features ===== */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.feat{text-align:center;padding:24px}
.feat .ico{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#e0f2fe,#bae6fd);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px;color:#0284c7}
.feat h4{margin:0 0 8px;font-size:17px;font-weight:700}
.feat p{margin:0;color:#64748b;font-size:14px;line-height:1.6}

/* ===== Blog cards ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .2s}
.blog-card:hover{border-color:#0ea5e9;box-shadow:0 20px 40px -20px rgba(14,165,233,.3);transform:translateY(-2px)}
.blog-img{height:180px;background:linear-gradient(135deg,#0ea5e9,#0284c7);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px}
.blog-img.b2{background:linear-gradient(135deg,#f59e0b,#d97706)}
.blog-img.b3{background:linear-gradient(135deg,#10b981,#059669)}
.blog-img.b4{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.blog-img.b5{background:linear-gradient(135deg,#ec4899,#be185d)}
.blog-img.b6{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.blog-body{padding:20px}
.blog-cat{display:inline-block;background:#e0f2fe;color:#0284c7;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.blog-card h3{margin:0 0 8px;font-size:17px;line-height:1.3;font-weight:700}
.blog-card p{margin:0 0 12px;color:#64748b;font-size:13px;line-height:1.5}
.blog-meta{display:flex;justify-content:space-between;color:#94a3b8;font-size:12px}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(135deg,#0a1929,#0f2238);color:#fff;border-radius:20px;padding:48px;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 50% 0%,rgba(14,165,233,.25),transparent 60%)}
.cta-band > *{position:relative}
.cta-band h2{font-size:34px;margin:0 0 12px;font-weight:800}
.cta-band p{color:#cbd5e1;margin:0 auto 28px;max-width:540px}

/* ===== Footer ===== */
.footer{background:#0a1929;color:#cbd5e1;padding:60px 0 24px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand .logo{color:#fff;margin-bottom:14px}
.foot-brand p{font-size:14px;line-height:1.6;color:#94a3b8;margin:0 0 16px}
.foot h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin:0 0 18px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot ul a{color:#94a3b8;font-size:14px}
.foot ul a:hover{color:#7dd3fc}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#cbd5e1}
.socials a:hover{background:#0ea5e9;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;display:flex;justify-content:space-between;color:#64748b;font-size:13px;flex-wrap:wrap;gap:10px}

/* ===== Forms ===== */
.auth-wrap{min-height:calc(100vh - 72px);display:grid;grid-template-columns:1fr 1fr;background:#f8fafc}
.auth-side{background:linear-gradient(160deg,#0a1929,#0f2238);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.2),transparent 70%)}
.auth-side > *{position:relative}
.auth-side h2{font-size:36px;margin:0 0 16px;font-weight:800}
.auth-side ul{list-style:none;padding:0;margin:24px 0 0}
.auth-side li{padding:10px 0;color:#cbd5e1;display:flex;gap:10px}
.auth-side li::before{content:"✓";color:#7dd3fc;font-weight:700}
.auth-form{padding:60px;display:flex;flex-direction:column;justify-content:center;max-width:520px}
.auth-form h1{font-size:30px;margin:0 0 8px;font-weight:800}
.auth-form .sub{color:#64748b;margin:0 0 32px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:15px;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.field .row{display:flex;gap:12px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.role-tabs{display:flex;background:#f1f5f9;padding:4px;border-radius:10px;margin-bottom:24px}
.role-tab{flex:1;padding:10px;text-align:center;border-radius:7px;cursor:pointer;font-weight:600;font-size:14px;color:#64748b}
.role-tab.active{background:#fff;color:#0284c7;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.help-link{font-size:13px;color:#0284c7;font-weight:600}
.divider{display:flex;align-items:center;gap:14px;color:#94a3b8;font-size:13px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#e2e8f0}

/* ===== Test player ===== */
.tp-bar{background:#0a1929;color:#fff;padding:12px 0;position:sticky;top:0;z-index:40}
.tp-bar-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.tp-title{font-size:15px;font-weight:700}
.tp-title small{display:block;color:#94a3b8;font-weight:400;font-size:12px}
.timer{background:#dc2626;padding:8px 16px;border-radius:8px;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.tp-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:24px 0}
.qcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;min-height:480px}
.qhead{display:flex;justify-content:space-between;color:#64748b;font-size:13px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #f1f5f9}
.qmark{display:inline-flex;gap:10px;font-size:12px}
.qmark span{padding:3px 8px;border-radius:5px}
.qmark .pos{background:#dcfce7;color:#15803d}
.qmark .neg{background:#fee2e2;color:#b91c1c}
.qtext{font-size:17px;line-height:1.6;margin:0 0 22px;color:#0f172a}
.opts{display:grid;gap:10px;margin-bottom:24px}
.opt{display:flex;gap:12px;padding:14px 16px;border:1px solid #cbd5e1;border-radius:10px;cursor:pointer;align-items:center;transition:all .12s}
.opt:hover{border-color:#0ea5e9;background:#f0f9ff}
.opt.selected{border-color:#0ea5e9;background:#e0f2fe}
.opt .marker{width:26px;height:26px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#475569;flex-shrink:0}
.opt.selected .marker{background:#0ea5e9;color:#fff}
.qfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid #f1f5f9;padding-top:18px}
.qfoot .left{display:flex;gap:8px;flex-wrap:wrap}
.qfoot .right{display:flex;gap:8px;flex-wrap:wrap}
.btn-warn{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.btn-warn:hover{background:#fde68a}
.btn-clear{background:#fff;color:#64748b;border:1px solid #cbd5e1}
.btn-success{background:#10b981;color:#fff}
.btn-success:hover{background:#059669}
.btn-danger{background:#dc2626;color:#fff}

/* sidebar palette */
.qpane{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;height:fit-content;position:sticky;top:80px}
.qpane h4{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#475569}
.legend{display:grid;gap:6px;margin-bottom:16px;font-size:12px;color:#475569}
.legend div{display:flex;align-items:center;gap:8px}
.dot{width:14px;height:14px;border-radius:4px;background:#e2e8f0}
.dot.attempted{background:#10b981}
.dot.review{background:#f59e0b}
.dot.notvisited{background:#fff;border:1px solid #cbd5e1}
.dot.current{background:#0ea5e9}
.qgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.qbtn{height:36px;border-radius:6px;background:#f1f5f9;border:1px solid #e2e8f0;font-weight:700;font-size:13px;cursor:pointer;color:#475569}
.qbtn:hover{background:#e2e8f0}
.qbtn.attempted{background:#10b981;color:#fff;border-color:#10b981}
.qbtn.review{background:#f59e0b;color:#fff;border-color:#f59e0b}
.qbtn.current{outline:2px solid #0ea5e9;outline-offset:2px}

/* ===== Admin ===== */
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.adm-side{background:#0a1929;color:#cbd5e1;padding:24px 0}
.adm-side .brand{padding:0 24px 24px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px}
.adm-side .brand .logo{color:#fff}
.adm-side h6{padding:14px 24px 8px;color:#64748b;font-size:11px;letter-spacing:.5px;text-transform:uppercase;margin:0}
.adm-nav a{display:flex;gap:12px;align-items:center;padding:11px 24px;color:#cbd5e1;font-size:14px;border-left:3px solid transparent}
.adm-nav a:hover{background:rgba(255,255,255,.04);color:#fff}
.adm-nav a.active{background:rgba(14,165,233,.1);border-left-color:#0ea5e9;color:#7dd3fc;font-weight:600}
.adm-main{background:#f8fafc}
.adm-top{background:#fff;padding:16px 32px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.adm-top h1{margin:0;font-size:22px}
.adm-top .who{display:flex;gap:12px;align-items:center}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.adm-body{padding:32px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;gap:14px;align-items:center}
.kpi .ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:#e0f2fe;color:#0284c7}
.kpi.b2 .ic{background:#dcfce7;color:#15803d}
.kpi.b3 .ic{background:#fef3c7;color:#b45309}
.kpi.b4 .ic{background:#fce7f3;color:#be185d}
.kpi .num{font-size:24px;font-weight:800}
.kpi .lbl{color:#64748b;font-size:13px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:24px}
.card-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.card-h h3{margin:0;font-size:16px}
.card-b{padding:22px}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;padding:12px 16px;background:#f8fafc;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line)}
table.t td{padding:14px 16px;border-bottom:1px solid #f1f5f9;color:#334155}
table.t tr:hover{background:#f8fafc}
.badge{display:inline-block;padding:3px 10px;border-radius:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.badge-green{background:#dcfce7;color:#15803d}
.badge-amber{background:#fef3c7;color:#b45309}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-red{background:#fee2e2;color:#b91c1c}
.upload-zone{border:2px dashed #cbd5e1;border-radius:12px;padding:36px;text-align:center;background:#fafbfc;cursor:pointer;transition:all .15s}
.upload-zone:hover{border-color:#0ea5e9;background:#f0f9ff}
.upload-zone .ico{font-size:42px;margin-bottom:10px}
.upload-zone h4{margin:0 0 6px}
.upload-zone p{margin:0;color:#64748b;font-size:13px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.step{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;gap:12px;align-items:center}
.step .n{width:36px;height:36px;border-radius:50%;background:#e0f2fe;color:#0284c7;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.step.done .n{background:#10b981;color:#fff}
.step.active{border-color:#0ea5e9;background:#f0f9ff}
.step .lbl{font-size:13px;color:#64748b}
.step .ttl{font-size:14px;font-weight:700;color:#0f172a}

/* ===== Result page ===== */
.result-hero{background:linear-gradient(160deg,#0a1929,#0f2238);color:#fff;padding:50px 0;text-align:center}
.score-circle{width:180px;height:180px;border-radius:50%;margin:24px auto;background:conic-gradient(#10b981 0% 75%,rgba(255,255,255,.1) 75% 100%);display:flex;align-items:center;justify-content:center;position:relative}
.score-circle::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#0a1929}
.score-circle .v{position:relative;font-size:42px;font-weight:800}
.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px auto;max-width:880px}
.sc{background:rgba(255,255,255,.06);padding:18px;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,.1)}
.sc .v{font-size:24px;font-weight:800}
.sc .l{color:#94a3b8;font-size:12px;margin-top:4px}

/* ===== Article ===== */
.article{max-width:780px;margin:0 auto;padding:50px 20px}
.article h1{font-size:38px;line-height:1.2;margin:0 0 14px;font-weight:800;letter-spacing:-.5px}
.article .meta{color:#64748b;font-size:14px;margin-bottom:30px;display:flex;gap:14px}
.article .cover{width:100%;height:380px;border-radius:16px;background:linear-gradient(135deg,#0ea5e9,#0284c7);margin-bottom:30px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:80px}
.article p{font-size:17px;line-height:1.8;color:#334155;margin:0 0 18px}
.article h2{font-size:26px;margin:34px 0 14px}
.article ul{padding-left:20px}
.article li{margin-bottom:8px;line-height:1.7;color:#334155}
.article blockquote{border-left:4px solid #0ea5e9;padding:8px 20px;color:#475569;font-style:italic;background:#f0f9ff;margin:24px 0;border-radius:0 8px 8px 0}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding:60px 0}
  .h1{font-size:42px}
  .cat-grid,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .ts-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .auth-wrap{grid-template-columns:1fr}
  .auth-side{padding:40px;display:none}
  .tp-grid{grid-template-columns:1fr}
  .qpane{position:relative;top:auto}
  .admin-shell{grid-template-columns:1fr}
  .adm-side{display:none}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .score-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:14px 20px;border-bottom:1px solid var(--line);gap:14px}
  .nav-links.open{display:flex}
  .nav-cta .btn-ghost{display:none}
  .menu-btn{display:block}
  .h1{font-size:34px}
  .section{padding:50px 0}
  .section h2{font-size:28px}
  .cat-grid,.feat-grid,.ts-grid,.blog-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:18px}
  .field-row{grid-template-columns:1fr}
  .auth-form{padding:36px 24px}
  .cta-band{padding:32px 22px}
  .cta-band h2{font-size:24px}
  .article h1{font-size:28px}
  .article .cover{height:220px;font-size:50px}
  .foot-grid{grid-template-columns:1fr}
  .adm-body{padding:20px}
  .kpi-grid{grid-template-columns:1fr}
}


/* ===== Home: 4-up category grid ===== */
.cat-grid.four{grid-template-columns:repeat(4,1fr)}

/* ===== Player: language toggle ===== */
.lang-toggle{display:inline-flex;background:#0f172a;border:1px solid #1e293b;border-radius:999px;padding:3px;margin-right:8px}
.lang-btn{background:transparent;color:#cbd5e1;border:none;padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.lang-btn.active{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;box-shadow:0 4px 12px -4px rgba(14,165,233,.6)}

/* ===== Player: mobile palette drawer ===== */
.palette-toggle{display:none;background:#0f172a;color:#fff;border:1px solid #1e293b;width:42px;height:42px;border-radius:10px;font-size:18px;cursor:pointer;align-items:center;justify-content:center}
.qpane-close{display:none;position:absolute;top:10px;right:10px;background:#f1f5f9;border:none;width:32px;height:32px;border-radius:8px;font-size:14px;cursor:pointer;color:#0f172a}
.qpane-backdrop{display:none;position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:60}
.qpane-backdrop.open{display:block}

@media (max-width:1024px){
  .cat-grid.four{grid-template-columns:repeat(2,1fr)}
  .palette-toggle{display:inline-flex}
  .qpane-close{display:flex;align-items:center;justify-content:center}
  .qpane{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:70;border-radius:0;transform:translateX(105%);transition:transform .25s ease;overflow-y:auto;box-shadow:-12px 0 30px -10px rgba(2,6,23,.4)}
  .qpane.open{transform:translateX(0)}
}
@media (max-width:640px){
  .cat-grid.four{grid-template-columns:1fr}
  .tp-bar-in{flex-wrap:wrap;gap:10px}
  .tp-title{flex:1 1 100%;order:-1}
}


/* ===== Demo credentials box on login ===== */
.demo-creds{margin-top:18px;background:#f0f9ff;border:1px dashed #38bdf8;border-radius:12px;padding:14px 16px;font-size:13px;color:#0f172a}
.demo-creds h5{margin:0 0 8px;font-size:12px;color:#0284c7;letter-spacing:.4px;text-transform:uppercase}
.demo-creds div{margin:4px 0}
.demo-creds a{color:#0284c7;font-weight:600;text-decoration:underline}