/* ExamPro v3 — heavier, beautiful, mobile-first. Royal blue + warm gold. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:wght@600;700;800&display=swap');

:root{
  --bg:#f4f6fb; --surface:#ffffff; --text:#0c1220; --muted:#5b6478;
  --primary:#15307a; --primary-2:#1f4ad6; --primary-3:#0c1f56;
  --gold:#e8b341; --gold-2:#c98e1d;
  --border:#e3e7f1; --ok:#0f8a4f; --err:#b42318; --warn:#b45309;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 8px 24px -16px rgba(15,23,42,.12);
  --shadow:0 14px 50px -22px rgba(21,48,122,.45);
  --shadow-lg:0 30px 90px -30px rgba(21,48,122,.55);
  --grad-hero:linear-gradient(135deg,#0c1f56 0%,#15307a 45%,#1f4ad6 100%);
  --grad-gold:linear-gradient(135deg,#e8b341 0%,#c98e1d 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(900px 380px at 90% -10%,rgba(232,179,65,.14),transparent 60%),
    radial-gradient(700px 320px at -10% 0%,rgba(31,74,214,.12),transparent 60%),
    var(--bg);
  color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--primary-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;letter-spacing:-.02em;margin:0 0 12px}
h1{font-size:32px;font-weight:800}
h2{font-size:22px;font-weight:700}
h3{font-size:16px;font-weight:600}
small{color:var(--muted)}

/* TOPBAR */
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 26px;background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);flex-wrap:wrap;position:sticky;top:0;z-index:30;
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.hamburger{display:none;background:transparent;border:0;font-size:24px;cursor:pointer;padding:4px 8px;color:var(--primary)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:'Fraunces',serif;
  font-weight:800;font-size:21px;color:var(--primary)}
.brand-mark{
  width:38px;height:38px;border-radius:11px;background:var(--grad-hero);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;
  box-shadow:0 8px 22px -10px rgba(21,48,122,.6);font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;
}
.primary-nav{display:flex;gap:3px;align-items:center;margin-left:auto;flex-wrap:wrap;font-size:14px}
.primary-nav a{
  padding:8px 11px;border-radius:10px;color:#26324a;font-weight:500;transition:.18s;
  display:inline-flex;align-items:center;gap:6px;
}
.primary-nav a .ic{font-size:15px}
.primary-nav a:hover{background:#eef2ff;text-decoration:none;color:var(--primary)}
.primary-nav a.active{background:var(--grad-hero);color:#fff;box-shadow:0 6px 16px -8px rgba(21,48,122,.6)}
.who{color:#26324a;font-size:13px;border-left:1px solid var(--border);padding-left:14px;margin-left:6px;
  display:flex;align-items:center;gap:8px}
.who-text{line-height:1.2}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad-gold);color:#0c1220;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;box-shadow:0 4px 10px -4px rgba(201,142,29,.6)}
.badge{background:var(--err);color:#fff;border-radius:99px;padding:1px 6px;font-size:11px;font-weight:700;margin-left:2px}

/* CONTAINER */
.container{max-width:1200px;margin:28px auto;padding:0 22px}

/* CARDS */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm);transition:.2s;
}
.card.hero{
  background:var(--grad-hero);color:#fff;border:0;box-shadow:var(--shadow);position:relative;overflow:hidden;padding:32px;
}
.card.hero::after{content:"";position:absolute;inset:auto -60px -80px auto;width:340px;height:340px;
  background:radial-gradient(circle,rgba(232,179,65,.55),transparent 60%);pointer-events:none}
.card.hero::before{content:"";position:absolute;inset:-60px auto auto -60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.card.hero h1,.card.hero h2{color:#fff}
.card.hero .tag{background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px)}

/* TABLES */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
th{background:linear-gradient(180deg,#f7f9ff,#eef2ff);font-weight:700;color:#3a4566;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbff}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border:0;
  padding:11px 20px;border-radius:11px;cursor:pointer;font-size:14px;font-weight:700;
  text-decoration:none;transition:.18s;box-shadow:0 8px 16px -10px rgba(21,48,122,.7);
  font-family:inherit;
}
.btn:hover{transform:translateY(-1px);background:var(--primary-3);text-decoration:none;color:#fff;box-shadow:0 14px 24px -12px rgba(21,48,122,.7)}
.btn.secondary{background:#fff;color:var(--primary);border:1.5px solid var(--primary)}
.btn.secondary:hover{background:#eef2ff}
.btn.gold{background:var(--grad-gold);color:#0c1220;box-shadow:0 8px 16px -10px rgba(201,142,29,.7)}
.btn.gold:hover{filter:brightness(1.05);color:#0c1220}
.btn.danger{background:#b42318;box-shadow:0 6px 12px -6px rgba(180,35,24,.5)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:none}
.btn.ghost:hover{background:#eef2ff}
.btn.sm{padding:7px 13px;font-size:13px}

/* FORMS */
input,select,textarea{
  padding:11px 13px;border:1.5px solid #d6dbe8;border-radius:10px;font-size:14px;font-family:inherit;width:100%;
  background:#fff;transition:border .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(31,74,214,.18)}
label{display:block;font-size:13px;color:#3a4566;margin:14px 0 6px;font-weight:600}
.row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ALERTS */
.alert{padding:13px 16px;border-radius:11px;margin:12px 0;font-size:14px;border:1.5px solid transparent}
.alert.error{background:#fff1f0;color:#a31515;border-color:#fecaca}
.alert.ok{background:#eafff3;color:#0e6e3f;border-color:#bbf7d0}

/* MISC */
.foot{
  text-align:center;padding:36px 18px;color:#5b6478;font-size:13px;line-height:1.7;
  border-top:1px solid var(--border);margin-top:36px;background:#fff;
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}
.tag{display:inline-block;padding:4px 11px;border-radius:99px;background:#eef2ff;color:var(--primary);font-size:12px;font-weight:700;letter-spacing:.02em}
.tag.gold{background:#fff5dc;color:#8a5a07}
.tag.ok{background:#eafff3;color:#0e6e3f}
.tag.err{background:#fff1f0;color:#a31515}
.tag.warn{background:#fff7e6;color:#8a5a07}

/* KPIs */
.kpi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px}
.kpi .card{padding:20px;background:linear-gradient(180deg,#fff,#fbfcff);position:relative;overflow:hidden;margin:0}
.kpi .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad-hero)}
.kpi .card:nth-child(2)::before{background:var(--grad-gold)}
.kpi .card:nth-child(3)::before{background:linear-gradient(180deg,#0e6e3f,#0f8a4f)}
.kpi .card:nth-child(4)::before{background:linear-gradient(180deg,#8a5a07,#c98e1d)}
.kpi h3{margin:0;color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.kpi .v{font-size:34px;font-weight:800;color:var(--primary);margin-top:6px;font-family:'Fraunces',serif}

/* QUESTION EDITOR */
.qcard{border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;background:#fff;
  display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:start}
.qcard .qnum{width:42px;height:42px;border-radius:11px;background:var(--grad-hero);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.qcard .opts{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.qcard .opt{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--border);border-radius:10px;background:#fafbff;cursor:pointer;transition:.15s}
.qcard .opt:hover{border-color:var(--primary-2);background:#eef2ff}
.qcard .opt.correct{background:#eafff3;border-color:#86efac}

/* NOTIFICATION PANEL */
.notif-panel{position:fixed;top:64px;right:18px;width:340px;max-height:70vh;overflow:auto;
  background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--border);
  z-index:40;transform:translateY(-10px) scale(.96);opacity:0;pointer-events:none;transition:.2s}
.notif-panel.open{transform:none;opacity:1;pointer-events:auto}
.np-head{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.notif-item{display:block;padding:12px 16px;border-bottom:1px solid #f1f3f9;color:var(--text);text-decoration:none}
.notif-item:hover{background:#fafbff;text-decoration:none}
.notif-item.unread{background:#eef2ff}
.notif-item small{color:var(--muted);font-size:11px;display:block;margin-top:4px}

/* BOTTOM BAR (mobile) */
.bottombar{display:none}

/* RESPONSIVE — hamburger drawer kicks in early so the top-left menu is always reachable */
@media (max-width:1180px){
  .topbar{padding:10px 14px;gap:8px;position:sticky;top:0;background:#fff;z-index:50}
  .hamburger{display:inline-flex}
  .brand-text{display:inline}
  .primary-nav{
    display:none;
    position:fixed;top:60px;left:0;right:0;
    max-height:calc(100vh - 60px);
    background:#fff;flex-direction:column;align-items:stretch;
    padding:14px 14px 110px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    z-index:60;flex-wrap:nowrap;gap:4px;
    box-shadow:0 16px 40px -16px rgba(15,23,42,.25);
    border-top:1px solid var(--border);
  }
  .primary-nav a,.primary-nav .who,.primary-nav .btn{width:100%;justify-content:flex-start;text-align:left;display:flex !important}
  .primary-nav a{padding:13px 14px;font-size:15px;border-radius:10px}
  .primary-nav .who{border-left:0;border-top:1px solid var(--border);padding:14px 0;margin:8px 0 0}
  body.drawer-open .primary-nav{display:flex !important}
  body.drawer-open::after{content:"";position:fixed;inset:60px 0 0 0;background:rgba(8,14,32,.45);z-index:55}
  .container{margin:14px auto;padding:0 14px;padding-bottom:90px}
}
@media (max-width:900px){
  .brand-text{display:none}
  h1{font-size:26px}
  .card{padding:18px}
  .card.hero{padding:22px}
  .qcard{grid-template-columns:1fr}
  .notif-panel{right:8px;left:8px;width:auto}
  .bottombar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;background:#fff;
    border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -10px rgba(15,23,42,.15);
  }
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:6px 4px;color:var(--muted);text-decoration:none;font-size:11px;gap:2px}
  .bottombar a span{font-size:20px}
  .bottombar a small{font-size:10.5px;font-weight:600}
  .bottombar a:hover,.bottombar a.active{color:var(--primary)}
}
/* Offline banner */
.offline-banner{display:none;background:#b45309;color:#fff;padding:8px 14px;text-align:center;font-size:13px;font-weight:600;position:sticky;top:0;z-index:40}
body.is-offline .offline-banner{display:block}
body.is-offline .offline-only{display:block}
.offline-only{display:none}

@media print{
  .topbar,.foot,.btn,nav,.bottombar,.notif-panel{display:none !important}
  body{background:#fff}
  .card,.rc{box-shadow:none;border:1px solid #ccc}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card,.kpi .card,.qcard{animation:fadeUp .35s ease both}

/* Extra responsive polish */
@media (max-width:640px){
  .container{padding:14px 12px 96px}
  .card{padding:16px;border-radius:14px}
  h1{font-size:22px} h2{font-size:18px}
  .row{grid-template-columns:1fr !important}
  table{font-size:13px}
  table th,table td{padding:8px 6px}
  .qcard{grid-template-columns:auto 1fr !important;gap:8px}
  .qcard > div:last-child{grid-column:1/-1;flex-direction:row !important}
  .hero h1{font-size:22px}
  .btn{padding:10px 14px;font-size:13.5px}
  .btn.sm{padding:7px 10px;font-size:12px}
}
@media (max-width:480px){
  .brand-text{display:none}
  .who-text{display:none}
}
.ql-editor{min-height:160px;font-size:15px}
.ql-toolbar{border-top-left-radius:8px;border-top-right-radius:8px}
.ql-container{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background:#fff}