/* ══════════════════════════════════════════════════
   TOKENS & THEMES
══════════════════════════════════════════════════ */
:root {
  --p:    #3B5BDB;
  --p1:   #4C6EF5;
  --p2:   #2F4AC7;
  --p-bg: #EEF2FF;
  --acc:  #F59F00;
  --ok:   #0CA678;
  --ok-bg:#ECFDF5;
  --err:  #E03131;
  --err-bg:#FFF5F5;
  --warn: #F59F00;
  --warn-bg:#FFFBEB;
  --text: #1A1A2E;
  --muted:#6B7280;
  --border:#E5E7EB;
  --bg:   #F8FAFC;
  --surface:#FFFFFF;
  --sidebar-bg:#1E1E2E;
  --sidebar-fg:rgba(255,255,255,.75);
  --sidebar-active:rgba(255,255,255,.12);
  --nav-h:60px;
  --sidebar-w:260px;
  --r:12px;
  --r-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:0 8px 30px rgba(0,0,0,.12);
  --t:.18s ease;
}
[data-theme="teal"]{--p:#0D9488;--p1:#14B8A6;--p2:#0F766E;--p-bg:#F0FDFA;--sidebar-bg:#134E4A}
[data-theme="purple"]{--p:#7C3AED;--p1:#8B5CF6;--p2:#6D28D9;--p-bg:#F5F3FF;--sidebar-bg:#3B0764}
[data-theme="rose"]{--p:#BE185D;--p1:#DB2777;--p2:#9D174D;--p-bg:#FDF2F8;--sidebar-bg:#500724}
[data-theme="orange"]{--p:#C2410C;--p1:#EA580C;--p2:#9A3412;--p-bg:#FFF7ED;--sidebar-bg:#431407}
[data-theme="slate"]{--p:#475569;--p1:#64748B;--p2:#334155;--p-bg:#F8FAFC;--sidebar-bg:#0F172A}
[data-theme="green"]{--p:#166534;--p1:#16A34A;--p2:#14532D;--p-bg:#F0FDF4;--sidebar-bg:#052e16}

/* ══════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ── Fallback font override ให้ขนาดใกล้เคียง Noto Sans Thai ── */
@font-face {
  font-family: 'Noto Sans Thai Fallback';
  src: local('Leelawadee UI'), local('Tahoma'), local('Arial Unicode MS'), local('Arial');
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 28%;
  line-gap-override: 0%;
}

html{
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  font-family:'Noto Sans Thai','Noto Sans Thai Fallback','Leelawadee UI','Tahoma',sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.75;   /* ภาษาไทยต้องการ line-height มากกว่าภาษาอื่น */
  font-synthesis:none; /* ห้าม browser สร้าง bold/italic ปลอม */
}
a{cursor:pointer;color:var(--p);text-decoration:none}
h1,h2,h3,h4{font-weight:700;line-height:1.4}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;line-height:1.75}
hr{border:none;border-top:1px solid var(--border)}
.hidden{display:none!important}

/* ══════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════ */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--p2) 0%,var(--p) 50%,var(--acc) 100%);
  padding:1.5rem;position:relative;overflow:hidden;
}
.login-bg{position:absolute;inset:0;pointer-events:none}
.login-blob{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;
}
.b1{width:500px;height:500px;background:#fff;top:-200px;right:-150px}
.b2{width:400px;height:400px;background:var(--acc);bottom:-150px;left:-100px}
.b3{width:300px;height:300px;background:#a5f3fc;top:50%;left:50%;transform:translate(-50%,-50%)}

.login-card{
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border-radius:20px;width:100%;max-width:420px;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
  overflow:hidden;position:relative;z-index:1;
  animation:slideUp .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}

.login-card-top{
  background:linear-gradient(135deg,var(--p2),var(--p));
  color:#fff;padding:2rem 2rem 1.5rem;text-align:center;
}
.login-icon-wrap{
  width:60px;height:60px;border-radius:16px;
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;color:#fff;
}
.login-card-top h1{font-size:1.35rem;font-weight:800;margin-bottom:.3rem}
.login-card-top p{font-size:.88rem;opacity:.8}

.login-card-body{padding:1.75rem 2rem 2rem}

.input-float{position:relative;margin-bottom:1.1rem}
.input-float input,.input-float select{
  width:100%;padding:.85rem 1rem .5rem;
  border:2px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);font-size:.95rem;color:var(--text);
  transition:border-color var(--t);
}
.input-float input:focus,.input-float select:focus{outline:none;border-color:var(--p)}
.input-float label{
  position:absolute;left:1rem;top:.7rem;
  font-size:.9rem;color:var(--muted);
  transition:all var(--t);pointer-events:none;
}
.input-float input:focus+label,
.input-float input:not(:placeholder-shown)+label,
.input-float select:focus+label{
  top:.18rem;font-size:.7rem;color:var(--p);font-weight:600;
}
.input-float input[placeholder=" "]:not(:placeholder-shown)+label{top:.18rem;font-size:.7rem;color:var(--muted);font-weight:600}
.input-float input:focus+label{color:var(--p)}

.btn-login{
  width:100%;padding:.85rem;border-radius:var(--r-sm);border:none;
  background:linear-gradient(135deg,var(--p),var(--p1));
  color:#fff;font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-bottom:.75rem;
  transition:transform var(--t),box-shadow var(--t);
  box-shadow:0 4px 15px rgba(59,91,219,.35);
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,91,219,.45)}
.btn-login:active{transform:translateY(0)}

.btn-guest{
  width:100%;padding:.75rem;border-radius:var(--r-sm);
  border:2px solid var(--border);background:transparent;
  color:var(--muted);font-size:.9rem;font-weight:600;
  transition:all var(--t);
}
.btn-guest:hover{border-color:var(--p);color:var(--p);background:var(--p-bg)}

.login-hint{
  margin-top:1rem;padding:.75rem;background:var(--bg);border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:.2rem;
  font-size:.75rem;color:var(--muted);
}

/* ══════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════ */
.alert{padding:.7rem 1rem;border-radius:var(--r-sm);font-size:.88rem;margin-bottom:.75rem}
.alert-danger{background:var(--err-bg);color:var(--err);border:1px solid #fca5a5}
.alert-success{background:var(--ok-bg);color:#065F46;border:1px solid #6EE7B7}

/* ══════════════════════════════════════════════════
   APP SHELL LAYOUT
══════════════════════════════════════════════════ */
.app-shell{display:grid;grid-template:"nav nav" var(--nav-h) "side main" 1fr / var(--sidebar-w) 1fr;min-height:100vh}

/* ══════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════ */
.navbar{
  grid-area:nav;position:sticky;top:0;z-index:100;
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem;
  box-shadow:0 1px 0 var(--border);
}
.navbar-start,.navbar-end{display:flex;align-items:center;gap:.75rem}
.navbar-brand{font-size:.95rem;font-weight:700;color:var(--text)}

.nav-hamburger{
  background:none;border:none;padding:6px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:4px;cursor:pointer;
}
.nav-hamburger span{
  display:block;width:18px;height:2px;
  background:var(--text);border-radius:2px;transition:var(--t);
}
.nav-hamburger:hover{background:var(--bg)}

.nav-icon-btn{
  background:none;border:none;padding:8px;border-radius:var(--r-sm);
  color:var(--muted);transition:var(--t);display:flex;
}
.nav-icon-btn:hover{background:var(--bg);color:var(--text)}

/* Theme Picker */
.theme-wrap{position:relative}
.theme-panel{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
  padding:1rem;min-width:240px;z-index:200;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.theme-panel-title{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.theme-dot{
  aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:var(--t);
  display:flex;align-items:center;justify-content:center;
}
.theme-dot:hover{transform:scale(1.15)}
.theme-dot.active{border-color:var(--text)}
.theme-dot-label{font-size:.7rem;color:var(--muted);text-align:center;margin-top:.2rem}

/* User */
.user-wrap{position:relative}
.user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--p),var(--p1));
  color:#fff;font-weight:800;font-size:.9rem;
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--t);
}
.user-avatar:hover{box-shadow:0 0 0 3px var(--p-bg)}
.user-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
  min-width:200px;z-index:200;overflow:hidden;
  animation:fadeIn .15s ease;
}
.user-info{padding:.85rem 1rem;border-bottom:1px solid var(--border);background:var(--bg)}
.user-info-name{font-weight:700;font-size:.95rem}
.user-info-role{font-size:.78rem;color:var(--muted);margin-top:.1rem}
.user-menu-items{padding:.4rem}
.user-menu-item{
  display:flex;align-items:center;gap:.6rem;
  width:100%;padding:.55rem .75rem;
  background:none;border:none;border-radius:var(--r-sm);
  color:var(--text);font-size:.88rem;cursor:pointer;
  transition:background var(--t);text-align:left;
}
.user-menu-item:hover{background:var(--bg)}
.user-menu-item.danger{color:var(--err)}
.user-menu-item.danger:hover{background:var(--err-bg)}

/* ══════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════ */
.sidebar{
  grid-area:side;background:var(--sidebar-bg);
  overflow-y:auto;position:sticky;top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  transition:transform var(--t);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
}
.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:80;backdrop-filter:blur(2px);
}

.sidenav{padding:.75rem 0}

.snav-section{
  padding:.75rem 1rem .2rem;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.snav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 1rem;margin:0 .5rem;border-radius:var(--r-sm);
  color:var(--sidebar-fg);cursor:pointer;
  transition:all var(--t);
  font-size:.88rem;
}
.snav-item:hover{background:var(--sidebar-active);color:#fff}
.snav-item.active{background:linear-gradient(135deg,var(--p),var(--p1));color:#fff;box-shadow:0 4px 12px rgba(59,91,219,.4)}
.snav-icon{width:18px;height:18px;flex-shrink:0;stroke-width:1.8}
.snav-badge{
  margin-left:auto;background:rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);font-size:.7rem;font-weight:700;
  padding:1px 7px;border-radius:20px;
}

/* ══════════════════════════════════════════════════
   MAIN
══════════════════════════════════════════════════ */
.main{grid-area:main;overflow-y:auto;padding:1.5rem}

.page{display:none}
.page.active{display:block;animation:fadeIn .2s ease}

/* ══════════════════════════════════════════════════
   PAGE HERO
══════════════════════════════════════════════════ */
.page-hero{
  background:linear-gradient(135deg,var(--p2) 0%,var(--p) 60%,var(--p1) 100%);
  border-radius:var(--r);padding:1.75rem 2rem;color:#fff;
  margin-bottom:1.5rem;
  box-shadow:0 4px 20px rgba(59,91,219,.25);
}
.page-hero h2{font-size:1.5rem;margin-bottom:.25rem}
.page-hero p{opacity:.8;font-size:.9rem}

/* ══════════════════════════════════════════════════
   STATS GRID
══════════════════════════════════════════════════ */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.75rem;margin-bottom:1.5rem;
}
.stat-card{
  background:var(--surface);border-radius:var(--r);
  padding:1.1rem;box-shadow:var(--shadow);
  border-top:3px solid var(--p);
  text-align:center;
}
.stat-val{font-size:2rem;font-weight:800;color:var(--p);line-height:1}
.stat-label{font-size:.78rem;color:var(--muted);margin-top:.3rem}

/* ══════════════════════════════════════════════════
   SUBJECT CARDS
══════════════════════════════════════════════════ */
.section-title{font-size:1rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.85rem}

.subject-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;margin-bottom:1.5rem;
}
.subject-card{
  background:var(--surface);border-radius:var(--r);
  padding:1.25rem;box-shadow:var(--shadow);
  cursor:pointer;transition:all var(--t);
  border-top:4px solid var(--card-color,var(--p));
  position:relative;overflow:hidden;
}
.subject-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--card-color,var(--p));
}
.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.subject-card-icon{font-size:2rem;margin-bottom:.6rem}
.subject-card h4{font-size:.95rem;margin-bottom:.2rem;color:var(--text)}
.subject-card p{font-size:.8rem;color:var(--muted)}
.subject-prog{margin-top:.85rem}
.sp-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:.25rem}
.sp-fill{height:100%;background:var(--card-color,var(--p));border-radius:3px;transition:width .5s ease}
.sp-text{font-size:.72rem;color:var(--muted)}

/* ══════════════════════════════════════════════════
   EXAM CTA BANNER
══════════════════════════════════════════════════ */
.exam-cta-banner{
  background:linear-gradient(135deg,#1a1a2e 0%,var(--p2) 100%);
  border-radius:var(--r);padding:1.5rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.exam-cta-text h3{color:#fff;font-size:1.1rem;margin-bottom:.25rem}
.exam-cta-text p{color:rgba(255,255,255,.7);font-size:.85rem}
.exam-cta-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cta-btn-primary{
  padding:.65rem 1.25rem;border-radius:var(--r-sm);border:none;
  background:#fff;color:var(--p2);font-weight:700;font-size:.9rem;
  cursor:pointer;transition:var(--t);
}
.cta-btn-primary:hover{background:var(--p-bg);transform:translateY(-1px)}
.cta-btn-outline{
  padding:.65rem 1.25rem;border-radius:var(--r-sm);
  border:2px solid rgba(255,255,255,.4);background:transparent;
  color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:var(--t);
}
.cta-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ══════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════ */
.card{
  background:var(--surface);border-radius:var(--r);
  padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1rem;
}
.card-toolbar{display:flex;justify-content:flex-end;margin-bottom:1rem}
.divider{border:none;border-top:1px solid var(--border);margin:1.25rem 0}

/* ══════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem 1.1rem;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:600;cursor:pointer;
  border:2px solid transparent;transition:all var(--t);white-space:nowrap;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--p);color:#fff;border-color:var(--p)}
.btn-primary:hover:not(:disabled){background:var(--p2);border-color:var(--p2);transform:translateY(-1px)}
.btn-success{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-success:hover:not(:disabled){background:#0B9268;transform:translateY(-1px)}
.btn-danger{background:var(--err);color:#fff;border-color:var(--err)}
.btn-danger:hover:not(:disabled){background:#B91C1C}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--bg);color:var(--text)}
.btn-flag{background:var(--warn-bg);color:var(--warn);border-color:var(--warn);font-size:.85rem}
.btn-flag:hover{background:#FEF08A}
.btn-lg{padding:.75rem 1.75rem;font-size:1rem}
.btn-sm{padding:.35rem .8rem;font-size:.8rem}
.btn-full{width:100%}

/* ══════════════════════════════════════════════════
   FORM CONTROLS
══════════════════════════════════════════════════ */
.form-section{margin-bottom:1.25rem}
.form-section-label{font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:.6rem}

.styled-range{
  width:100%;accent-color:var(--p);height:6px;
  border:none;padding:0;cursor:pointer;border-radius:3px;
}
.range-marks{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:.3rem}

.check-cards{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.check-card{
  display:flex;align-items:center;gap:.6rem;
  padding:.65rem .85rem;border-radius:var(--r-sm);
  border:2px solid var(--border);cursor:pointer;
  transition:all var(--t);font-size:.85rem;font-weight:500;
}
.check-card:hover{border-color:var(--p)}
.check-card input{accent-color:var(--p);width:16px;height:16px}
.check-card:has(input:checked){border-color:var(--p);background:var(--p-bg);color:var(--p)}
.check-card-icon{font-size:1.1rem}

.radio-cards{display:flex;gap:.5rem;flex-wrap:wrap}
.radio-card{
  flex:1;min-width:120px;padding:.65rem .85rem;
  border-radius:var(--r-sm);border:2px solid var(--border);
  cursor:pointer;transition:all var(--t);
  font-size:.85rem;font-weight:500;
  display:flex;align-items:center;gap:.5rem;
}
.radio-card:hover{border-color:var(--p)}
.radio-card input{accent-color:var(--p)}
.radio-card:has(input:checked){border-color:var(--p);background:var(--p-bg);color:var(--p)}

/* ══════════════════════════════════════════════════
   INFO CARDS (exam setup)
══════════════════════════════════════════════════ */
.info-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.25rem}
.info-card{background:var(--surface);border-radius:var(--r);padding:1.25rem;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center}
.info-card-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:.6rem}
.info-card-label{font-size:.78rem;color:var(--muted);margin-bottom:.3rem}
.info-card-val{font-size:.95rem;font-weight:700}

.exam-breakdown{display:flex;flex-direction:column;gap:.5rem}
.eb-item{
  display:grid;grid-template-columns:80px 1fr 80px auto;
  align-items:center;gap:.75rem;
  padding:.7rem 1rem;border-radius:var(--r-sm);border:1px solid var(--border);
  border-left:4px solid var(--eb-color,var(--p));
  background:var(--bg);font-size:.88rem;
}
.eb-part{font-size:.75rem;color:var(--muted);font-weight:600}
.eb-count{font-weight:700;color:var(--eb-color,var(--p));text-align:right}
.eb-pass{font-size:.78rem;color:var(--muted);background:var(--surface);padding:.3rem .6rem;border-radius:var(--r-sm);border:1px solid var(--border);white-space:nowrap}

/* ══════════════════════════════════════════════════
   STUDY PAGE
══════════════════════════════════════════════════ */
.study-toolbar{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  margin-bottom:1rem;
}
.study-search-wrap{
  flex:1;min-width:200px;position:relative;
}
.study-search-wrap svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.study-search{
  width:100%;padding:.6rem .9rem .6rem 2.2rem;
  border:2px solid var(--border);border-radius:var(--r-sm);
  font-size:.88rem;background:var(--surface);color:var(--text);
  transition:border-color var(--t);
}
.study-search:focus{outline:none;border-color:var(--p)}

.filter-tabs{display:flex;gap:.3rem;flex-wrap:wrap}
.ftab{
  padding:.35rem .85rem;border-radius:20px;
  border:2px solid var(--border);background:var(--surface);
  cursor:pointer;font-size:.78rem;font-weight:600;color:var(--muted);
  transition:all var(--t);
}
.ftab:hover{border-color:var(--p);color:var(--p)}
.ftab.active{background:var(--p);color:#fff;border-color:var(--p)}

.q-list{display:flex;flex-direction:column;gap:.6rem}

.q-card{
  background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow);
  border-left:4px solid var(--border);
  overflow:hidden;
}
.q-card.studied-correct{border-left-color:var(--ok)}
.q-card.studied-wrong{border-left-color:var(--err)}
.q-card.open .q-chevron{transform:rotate(180deg)}

.q-head{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.85rem 1rem;cursor:pointer;user-select:none;
}
.q-head:hover{background:var(--bg)}
.q-num{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;
  background:var(--p-bg);color:var(--p);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;margin-top:2px;
}
.q-text{flex:1;font-size:.88rem;line-height:1.55}
.q-chevron{flex-shrink:0;color:var(--muted);transition:transform var(--t);margin-top:3px}
.q-chevron svg{width:16px;height:16px}

.q-body{
  display:none;padding:.75rem 1rem 1rem;
  border-top:1px solid var(--border);
}
.q-card.open .q-body{display:block}

.q-choices{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-bottom:.75rem}
.q-choice{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.5rem .75rem;border-radius:var(--r-sm);
  font-size:.86rem;color:var(--muted);
}
.q-choice.correct-ans{
  background:var(--ok-bg);color:#065F46;font-weight:600;
}
.q-choice-idx{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;margin-top:1px;
}
.q-choice.correct-ans .q-choice-idx{
  background:var(--ok);border-color:var(--ok);color:#fff;
}
.q-mark-btns{display:flex;gap:.4rem}

.pagination{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:1rem;flex-wrap:wrap}
.ppage{
  min-width:34px;height:34px;border-radius:var(--r-sm);
  border:2px solid var(--border);background:var(--surface);
  color:var(--text);font-size:.82rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.ppage:hover{border-color:var(--p);color:var(--p)}
.ppage.active{background:var(--p);color:#fff;border-color:var(--p)}
.ppage:disabled{opacity:.4;cursor:not-allowed}

/* ══════════════════════════════════════════════════
   EXAM SESSION
══════════════════════════════════════════════════ */
.exam-topbar{
  position:sticky;top:0;z-index:50;
  background:var(--surface);border-radius:var(--r);
  padding:.85rem 1.1rem;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:1rem;
  margin-bottom:1.25rem;flex-wrap:wrap;
}
.etb-progress{flex:1;min-width:160px}
.etb-progress-text{font-size:.8rem;color:var(--muted);margin-bottom:.3rem}
.etb-progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.etb-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p1));border-radius:3px;transition:width .3s ease}
.etb-timer{
  font-size:1.1rem;font-weight:800;color:var(--p);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  background:var(--p-bg);padding:.35rem .85rem;border-radius:var(--r-sm);
  min-width:100px;text-align:center;
}
.etb-timer.warn{color:var(--warn);background:var(--warn-bg)}
.etb-timer.danger{color:var(--err);background:var(--err-bg);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

.exam-q-card{
  background:var(--surface);border-radius:var(--r);
  padding:1.75rem;box-shadow:var(--shadow);
  max-width:780px;
}
.exam-q-meta{
  font-size:.78rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.9rem;
  display:flex;align-items:center;gap:.5rem;
}
.exam-q-meta .qm-badge{
  background:var(--p-bg);color:var(--p);
  padding:2px 10px;border-radius:20px;font-size:.72rem;
}
.exam-q-meta .qm-flag{color:var(--warn)}

.exam-q-text{
  font-size:1.02rem;line-height:1.75;
  margin-bottom:1.25rem;
  padding-left:1rem;border-left:3px solid var(--p);
}

.exam-choices{display:flex;flex-direction:column;gap:.55rem}
.choice-btn{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.85rem 1rem;
  border:2px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;
  text-align:left;width:100%;font-size:.9rem;line-height:1.55;
  transition:all var(--t);
}
.choice-btn:hover{border-color:var(--p);background:var(--p-bg);transform:translateX(2px)}
.choice-btn.selected{border-color:var(--p);background:var(--p-bg)}
.choice-idx{
  flex-shrink:0;width:30px;height:30px;border-radius:8px;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;margin-top:1px;
  transition:all var(--t);
}
.choice-btn:hover .choice-idx,.choice-btn.selected .choice-idx{
  background:var(--p);border-color:var(--p);color:#fff;
}

.exam-nav{display:flex;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap}

/* Quick dots */
.exam-dots{
  display:flex;flex-wrap:wrap;gap:.3rem;
  max-width:780px;margin-top:.85rem;
  padding:.85rem;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--shadow);
}
.qdot{
  width:28px;height:28px;border-radius:6px;
  border:2px solid var(--border);background:var(--bg);
  font-size:.68rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);color:var(--muted);
}
.qdot:hover{border-color:var(--p)}
.qdot.answered{background:var(--p);border-color:var(--p);color:#fff}
.qdot.flagged{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.qdot.flagged.answered{background:var(--warn);border-color:var(--warn);color:#fff}
.qdot.current{box-shadow:0 0 0 3px var(--p-bg),0 0 0 5px var(--p)}

/* ══════════════════════════════════════════════════
   REVIEW GRID
══════════════════════════════════════════════════ */
.review-legend{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.85rem}
.rl-item{
  display:flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:var(--muted);
  padding:.25rem .7rem;border-radius:20px;border:2px solid var(--border);
}
.rl-answered{background:var(--p);color:#fff;border-color:var(--p)}
.rl-unanswered{background:var(--bg);color:var(--muted)}
.rl-flagged{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}

.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:.35rem;margin-bottom:1rem}
.rcell{
  height:38px;border-radius:var(--r-sm);
  border:2px solid var(--border);background:var(--bg);
  font-size:.75rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all var(--t);
}
.rcell:hover{border-color:var(--p);color:var(--p)}
.rcell.answered{background:var(--p);border-color:var(--p);color:#fff}
.rcell.flagged{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.rcell.flagged.answered{background:var(--warn);border-color:var(--warn);color:#fff}

.review-summary{
  padding:.85rem;background:var(--bg);border-radius:var(--r-sm);
  margin-bottom:1rem;font-size:.88rem;display:flex;gap:1.5rem;flex-wrap:wrap;
}
.review-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}

/* ══════════════════════════════════════════════════
   RESULT
══════════════════════════════════════════════════ */
.result-hero{
  border-radius:var(--r);padding:2rem;text-align:center;
  margin-bottom:1.25rem;color:#fff;
}
.result-hero-pass{background:linear-gradient(135deg,#065F46,var(--ok))}
.result-hero-fail{background:linear-gradient(135deg,#7F1D1D,var(--err))}
.result-hero-done{background:linear-gradient(135deg,var(--p2),var(--p1))}
.result-hero-score{font-size:3rem;font-weight:900;line-height:1;margin:.5rem 0}
.result-hero-label{opacity:.8;font-size:.95rem}
.result-hero-detail{font-size:.82rem;opacity:.65;margin-top:.4rem}

.result-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.85rem;margin-bottom:1.25rem}
.rpart{
  background:var(--surface);border-radius:var(--r);
  padding:1.1rem;box-shadow:var(--shadow);text-align:center;
}
.rpart-score{font-size:2rem;font-weight:900}
.rpart-label{font-size:.8rem;color:var(--muted);margin:.2rem 0}
.rpart-badge{
  display:inline-block;padding:2px 12px;border-radius:20px;
  font-size:.75rem;font-weight:700;margin-top:.3rem;
}
.rb-pass{background:var(--ok-bg);color:#065F46}
.rb-fail{background:var(--err-bg);color:var(--err)}

.result-q-list{display:flex;flex-direction:column;gap:.5rem}
.rq{
  padding:.85rem 1rem;border-radius:var(--r-sm);
  border-left:4px solid var(--border);background:var(--surface);
}
.rq.wrong{border-left-color:var(--err);background:#fff}
.rq.correct{border-left-color:var(--ok)}
.rq-num{font-size:.72rem;color:var(--muted);font-weight:600}
.rq-text{font-size:.88rem;margin:.25rem 0;line-height:1.55}
.rq-ans{font-size:.82rem}
.rq-yours{color:var(--err)}
.rq-correct{color:var(--ok);font-weight:700}

/* ══════════════════════════════════════════════════
   HISTORY TABLE
══════════════════════════════════════════════════ */
.htable{width:100%;border-collapse:collapse;font-size:.88rem}
.htable th,.htable td{padding:.65rem .85rem;border-bottom:1px solid var(--border)}
.htable th{background:var(--bg);font-weight:700;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.htable tr:hover td{background:var(--bg)}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:700}
.badge-pass{background:var(--ok-bg);color:#065F46}
.badge-fail{background:var(--err-bg);color:var(--err)}

/* ══════════════════════════════════════════════════
   ADMIN TABLE
══════════════════════════════════════════════════ */
.utable{width:100%;border-collapse:collapse;font-size:.88rem}
.utable th,.utable td{padding:.65rem .85rem;border-bottom:1px solid var(--border)}
.utable th{background:var(--bg);font-weight:700;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.utable tr:hover td{background:var(--bg)}
.role-chip{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:700}
.rc-admin{background:#EDE9FE;color:#5B21B6}
.rc-student{background:var(--p-bg);color:var(--p)}
.rc-guest{background:var(--bg);color:var(--muted)}

/* ══════════════════════════════════════════════════
   PROFILE
══════════════════════════════════════════════════ */
.profile-header{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.25rem}
.profile-avatar-lg{
  width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,var(--p),var(--p1));
  color:#fff;font-size:1.8rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.profile-stat-row{display:flex;gap:.5rem;flex-direction:column;font-size:.88rem}
.profile-stat-row strong{font-size:1rem}

/* ══════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════ */
.modal-backdrop{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.modal-box{
  background:var(--surface);border-radius:var(--r);
  padding:2rem;width:100%;max-width:440px;
  box-shadow:var(--shadow-lg);
  animation:slideUp .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-icon{font-size:2.5rem;text-align:center;margin-bottom:.5rem}
.modal-box h3{text-align:center;margin-bottom:.4rem}
#modalBody{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:1rem}
.modal-footer{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media(max-width:900px){
  .app-shell{grid-template:"nav" var(--nav-h) "main" 1fr / 1fr}
  .sidebar{
    position:fixed;top:var(--nav-h);left:0;bottom:0;
    z-index:90;transform:translateX(-100%);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:block}
  .navbar-brand{display:none}
  .eb-item{grid-template-columns:auto 1fr auto}
  .eb-pass{display:none}
}
@media(max-width:580px){
  .subject-grid{grid-template-columns:1fr 1fr}
  .check-cards{grid-template-columns:1fr}
  .exam-q-card{padding:1.1rem}
  .exam-dots{display:none}
  .page-hero{padding:1.25rem}
}
@media(max-width:400px){
  .subject-grid{grid-template-columns:1fr}
  .login-card-body{padding:1.25rem}
}


/* ════════════ VIDEO PAGE ════════════ */
.snav-badge-new{background:var(--p)!important;color:#fff!important;animation:pulse-badge 2s infinite}
@keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.6}}

.vid-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:1.25rem;
  align-items:start;
}
.vid-main{position:sticky;top:1.25rem}

.vid-empty-player{
  background:var(--surface2);border:2px dashed var(--border);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:3rem 2rem;color:var(--muted);text-align:center;min-height:260px;
}

.vid-player-wrap{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:12px;background:#000;box-shadow:0 4px 24px rgba(0,0,0,.18);
}
.vid-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:12px}
.vid-player-meta{padding:.85rem .25rem 0}
.vid-player-title{font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
.vid-player-desc{font-size:.875rem;color:var(--muted)}

.vid-sidebar{display:flex;flex-direction:column;gap:.5rem;max-height:calc(100vh - 160px);overflow-y:auto}
.vid-list-header{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:.25rem 0 .5rem}
.vid-list{display:flex;flex-direction:column;gap:.5rem}

.vid-card{
  display:flex;gap:.75rem;align-items:flex-start;
  background:var(--surface);border:1.5px solid var(--border);border-radius:10px;
  padding:.65rem;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;
}
.vid-card:hover{border-color:var(--p);box-shadow:0 0 0 3px var(--p-bg)}
.vid-card-active{border-color:var(--p);background:var(--p-bg)!important;box-shadow:0 0 0 3px var(--p-bg)}

.vid-thumb{position:relative;flex-shrink:0;width:110px;height:62px;border-radius:7px;overflow:hidden;background:#000}
.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vid-thumb-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);color:#fff;opacity:0;transition:opacity .2s;
}
.vid-card:hover .vid-thumb-play,.vid-card-active .vid-thumb-play{opacity:1}

.vid-info{flex:1;min-width:0}
.vid-ep{font-size:.7rem;font-weight:700;color:var(--p);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem}
.vid-title{font-size:.85rem;font-weight:600;line-height:1.3;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-desc{font-size:.75rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid-tag{display:inline-block;margin-top:.35rem;padding:.1rem .5rem;background:var(--p-bg);color:var(--p);border-radius:20px;font-size:.7rem;font-weight:600}

@media(max-width:900px){
  .vid-layout{grid-template-columns:1fr}
  .vid-main{position:static}
  .vid-sidebar{max-height:none}
}
@media(max-width:580px){
  .vid-thumb{width:90px;height:51px}
}


/* ── Media tabs ── */
.media-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;border-bottom:2px solid var(--border);padding-bottom:0}
.media-tab{
  display:flex;align-items:center;gap:.45rem;
  padding:.6rem 1.1rem;border:none;background:none;cursor:pointer;
  font-size:.875rem;font-weight:600;color:var(--muted);border-radius:8px 8px 0 0;
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;
  font-family:inherit;
}
.media-tab:hover{color:var(--p);background:var(--p-bg)}
.media-tab.active{color:var(--p);border-bottom-color:var(--p);background:transparent}
.media-tab-count{
  background:var(--surface2);color:var(--muted);border-radius:20px;
  padding:.05rem .45rem;font-size:.72rem;font-weight:700;
}
.media-tab.active .media-tab-count{background:var(--p-bg);color:var(--p)}

/* ── Slide thumbnail ── */
.slide-thumb{
  flex-shrink:0;width:110px;height:62px;border-radius:7px;
  background:color-mix(in srgb, var(--sc) 12%, var(--surface2));
  color:var(--sc);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.slide-thumb span{font-size:.6rem;font-weight:800;letter-spacing:.08em;opacity:.8}

/* ── PDF viewer ── */
.pdf-viewer-wrap{border-radius:12px;overflow:hidden;border:1.5px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.pdf-viewer-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1rem;background:var(--surface2);border-bottom:1px solid var(--border);
}
.pdf-viewer-title{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-dl-btn{
  display:flex;align-items:center;gap:.35rem;flex-shrink:0;margin-left:1rem;
  padding:.3rem .75rem;background:var(--p);color:#fff;border-radius:6px;
  font-size:.78rem;font-weight:600;text-decoration:none;transition:opacity .2s;
}
.pdf-dl-btn:hover{opacity:.85}
.pdf-iframe{display:block;width:100%;height:640px;border:0;background:#525659}

@media(max-width:580px){
  .pdf-iframe{height:420px}
  .slide-thumb{width:90px;height:51px}
}

/* ════════════ QUESTION EDITOR ════════════ */
.qe-hero-actions{display:flex;gap:.5rem;flex-shrink:0}

/* toolbar */
.qe-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.input-group{display:flex;align-items:center;gap:.5rem;flex:1;min-width:180px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.45rem .75rem}
.input-group svg{flex-shrink:0;color:var(--muted)}
.qe-search{border:none;outline:none;background:transparent;font-family:inherit;font-size:.875rem;width:100%;color:var(--text)}
.qe-cat-filter{padding:.45rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);font-family:inherit;font-size:.875rem;color:var(--text);cursor:pointer}
.qe-result-count{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* list */
.qe-list{display:flex;flex-direction:column;gap:.6rem}
.qe-empty{text-align:center;padding:3rem;color:var(--muted);font-size:.9rem}

/* card */
.qe-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.qe-card:hover{border-color:var(--p);box-shadow:0 0 0 3px var(--p-bg)}
.qe-card-open{border-color:var(--p);box-shadow:0 0 0 3px var(--p-bg)}
.qe-new-card{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)!important}

.qe-card-head{padding:.9rem 1rem;cursor:pointer}
.qe-card-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.qe-cat-tag{font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:20px;
  background:var(--p-bg);color:var(--p)}
.qe-edited-badge{font-size:.7rem;color:var(--ok);font-weight:600}
.qe-card-q{font-size:.9rem;font-weight:500;line-height:1.65;margin-bottom:.5rem;color:var(--text)}
.qe-card-choices{display:flex;flex-wrap:wrap;gap:.35rem}
.qe-card-choices span{font-size:.75rem;color:var(--muted);background:var(--surface2);
  padding:.15rem .5rem;border-radius:4px;max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qe-card-choices .qe-ans-correct{background:var(--ok-bg);color:var(--ok);font-weight:600}

/* edit form */
.qe-form{padding:1rem;border-top:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;gap:.85rem}
.qe-new-header{padding:.75rem 1rem;font-weight:700;font-size:.9rem;background:var(--ok-bg);color:var(--ok);border-bottom:1px solid var(--border)}
.qe-field{display:flex;flex-direction:column;gap:.4rem}
.qe-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.qe-textarea{
  padding:.6rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:inherit;font-size:.9rem;line-height:1.75;color:var(--text);
  background:var(--surface);resize:vertical;transition:border-color .2s;
}
.qe-textarea:focus{outline:none;border-color:var(--p)}
.qe-select{
  padding:.5rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:inherit;font-size:.875rem;background:var(--surface);color:var(--text);cursor:pointer;
}
.qe-select:focus{outline:none;border-color:var(--p)}
.qe-choice-row{display:flex;align-items:flex-start;gap:.6rem}
.qe-choice-lbl{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--p-bg);color:var(--p);font-weight:700;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;margin-top:.4rem;
}
.qe-choice-ta{flex:1}
.qe-form-actions{display:flex;gap:.5rem;flex-wrap:wrap;padding-top:.25rem}
.qe-btn-reset{color:var(--muted)!important;border-color:var(--border)!important}
.qe-btn-reset:hover{color:var(--err)!important;border-color:var(--err)!important}

/* toast */
.toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);
  background:#1A1A2E;color:#fff;padding:.65rem 1.25rem;border-radius:999px;
  font-size:.875rem;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.3);
  opacity:0;transition:opacity .25s, transform .25s;pointer-events:none;z-index:9999;
  white-space:nowrap;
}
.toast-show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:700px){
  .qe-toolbar{flex-direction:column;align-items:stretch}
  .qe-hero-actions{flex-direction:column}
  .qe-card-choices{display:none}
}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}