:root{
  --bg: #fcfcfd;                 /* light white body */
  --surface: #ffffff;            /* panels/modal */
  --text: #101828;               /* dark text */
  --muted:#667085;               /* muted text */
  --border:#e4e7ec;              /* borders */
  --brand-cyan-start: rgba(0, 174, 255, 0.03); /* ~3% cyan */
  --brand-cyan-end: rgba(0, 174, 255, 0.0);
  --shadow-lg: 0 8px 28px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  --shadow-md: 0 4px 16px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.05);
  --radius: 12px;
  --danger: #B42318;
  --success:#067647;
  --info: #155EEF;
  /* Product card sizing */
  --card-min: 160px;
  --card-max: 220px;
  --card-pref: 22vw;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Itim", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg); /* light white */
  display:flex;flex-direction:column;min-height:100svh;
}

/* Header (greyish white + 3% cyan tint) */
.site-header{
  background: linear-gradient(135deg, var(--brand-cyan-start), var(--brand-cyan-end)), #f7f8fb;
  box-shadow: var(--shadow-lg); /* header shadow */
  border-bottom: 1px solid var(--border);
}
.nav{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{max-width:140px;height:auto;display:block}

.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions .row{display:flex;align-items:center;gap:10px;margin-top:0}
.mobile-menu-btn{display:none}
.mobile-credits{display:inline-flex}
.mobile-controls{display:none;margin-left:auto;align-items:center;gap:8px}
.icon-btn, .text-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--border);background:#ffffff80;color:var(--text);
  padding:10px 14px;border-radius:999px;font-weight:700;transition:.18s ease;
  backdrop-filter:saturate(140%) blur(2px);
  height:40px;
}
.icon-btn:hover,.text-btn:hover{background:#ffffffcc; transform:translateY(-1px)}
.icon{width:18px;height:18px;display:inline-block}

/* Current page state */
.icon-btn.is-current{
  background:#e6f7ff; border-color:#bfe9ff; box-shadow:0 0 0 3px rgba(0,174,255,.18);
}
.icon-btn.is-current:hover{transform:none}
.icon-btn.is-current[disabled]{opacity:1;cursor:default}

/* Credits pill — white with green outline (also when current) */
.credits-pill.is-current{
  background:#fff; border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18), 0 6px 18px rgba(22,163,74,.18);
  color:#065f46;
}
.credits-pill.is-current:hover{transform:none}
.credits-pill.is-current[disabled]{opacity:1;cursor:default}

/* Not-verified account visual */
#accountBtn.needs-verify{
  border-color:#FEE4E2;
  background:#FEF3F2;
  color:var(--danger);
  box-shadow:0 0 0 3px rgba(244,67,54,.10);
}
#accountBtn.needs-verify:hover{transform:none}

/* Account menu */
.account{position:relative}
.account-menu{
  position:absolute;right:0;top:54px;min-width:260px;z-index:20;
  background: linear-gradient(135deg, var(--brand-cyan-start), var(--brand-cyan-end)), var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);display:none
}
.account[aria-expanded="true"] .account-menu{display:block}
.menu-head{padding:12px;border-bottom:1px solid var(--border)}
.menu-email{color:var(--muted);font-size:.95rem}
.menu-grid{display:grid;gap:8px;padding:10px}
.menu-btn{
  width:100%;text-align:left;background:#fff;border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;cursor:pointer
}
.menu-btn[disabled]{opacity:.55;cursor:not-allowed}

/* Email verification banner */
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#F5FAFF;border-bottom:1px solid #D0E3FF}
.banner .banner-left{display:flex;align-items:flex-start;gap:10px}
.banner .banner-title{font-weight:800}
.banner .banner-text{color:var(--muted)}
.banner .btn-sm{padding:8px 10px;border-radius:10px;font-size:.95rem}
.hidden{display:none !important}

/* Footer */
footer{
  background: linear-gradient(135deg, var(--brand-cyan-start), var(--brand-cyan-end)), #f7f8fb;
  border-top:1px solid var(--border);
}
.footer-inner{max-width:1200px;margin:0 auto;padding:16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-small{color:var(--muted)}
.foot-actions{display:flex;align-items:center;gap:8px}
footer .btn-small{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;text-decoration:none}
@media (orientation: portrait){
  .footer-inner{flex-direction:column;text-align:center}
}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none;place-items:center;z-index:50}
.modal[aria-hidden="false"]{display:grid}
.modal-card{width:min(500px,92vw);background:linear-gradient(135deg, var(--brand-cyan-start), var(--brand-cyan-end)), var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:var(--shadow-lg)}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);font-weight:700;cursor:pointer}
.tab.active{background:#e6f7ff;border-color:#bfe9ff}
.field label{display:block;margin:6px 0;font-weight:700}
.input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);outline:none}
.input:focus{box-shadow:0 0 0 3px rgba(0,174,255,.18)}
.input.invalid{border-color:#F04438;box-shadow:0 0 0 3px rgba(240,68,56,.15)}
.row{display:flex;gap:8px;margin-top:10px}
.btn-primary{border:0;border-radius:10px;padding:12px 14px;font-weight:800;background:#21c3ff;color:#003044;cursor:pointer}
.btn-ghost{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:10px;padding:12px 14px;cursor:pointer}
.form-status{margin-top:8px;color:var(--muted)}
.error{color:var(--danger);font-weight:800}
.success{color:var(--success);font-weight:800}

/* Modal button row fills full width equally */
.modal-card .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.modal-card .row .btn-primary,.modal-card .row .btn-ghost{width:100%}

/* Show password checkbox */
.form-check{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--muted)}
.form-check input[type="checkbox"]{width:16px;height:16px}

/* Toasts */
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{display:flex;gap:10px;align-items:flex-start;max-width:min(440px,92vw);padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-md);animation:toastIn .22s ease}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast .title{font-weight:800}
.toast .text{color:var(--muted)}
.toast.info{border-color:#D6E4FF}
.toast.success{border-color:#ABEFC6}
.toast.error{border-color:#F9DBAF}
.toast .close{margin-left:auto;background:transparent;border:0;cursor:pointer;color:var(--muted)}

main{flex:1}

@media (max-width:720px){
  .nav{padding:0 8px}
  .footer-inner{padding:14px 10px}
  .nav-actions{gap:6px}
}
@media (max-width:520px){
  .exam-toolbar{gap:6px;padding:8px 10px}
  .exam-toolbar .icon-btn span{display:none}
  .exam-toolbar .icon{width:16px;height:16px}
  .exam-timer{padding:6px 10px}
}

/* Page helpers */
.page{width:min(760px,92vw);margin:32px auto;padding:0 12px}
.card{background:linear-gradient(135deg, var(--brand-cyan-start), var(--brand-cyan-end)), var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow-lg)}
.card h1{margin:0 0 6px 0;font-size:1.5rem}
.card .sub{color:var(--muted);margin-bottom:14px}
.actions{display:flex;gap:10px;margin-top:16px}

/* Pages grid on home */
.pages-section{max-width:1200px;margin:24px auto;padding:0 clamp(20px, 5vw, 40px)}
.section-title{margin:8px 0 14px 0}
.pages-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start;align-items:stretch}
.page-card{display:flex;flex-direction:column;width:var(--card-max);background:linear-gradient(135deg, var(--brand-cyan-start), var(--brand-cyan-end)), var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;text-decoration:none;color:inherit;position:relative;transition:transform .16s ease, box-shadow .16s ease}
.page-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,24,40,.12),0 4px 10px rgba(16,24,40,.08)}
.page-card .img-wrap{position:relative;flex:0 0 auto;background:#f2f4f7;aspect-ratio:3/2}
.page-card img{width:100%;height:100%;object-fit:cover;display:block}
.img-fallback{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#e6f7ff,#f8fbff);color:#0B5394;font-size:2.2rem;font-weight:800}
.page-card .body{padding:10px 12px 14px;display:grid;gap:10px}
.page-card .title{font-weight:800}
.page-card .btn-like{justify-self:center;width:90%;text-align:center;border:1px solid var(--border);background:#fff;color:var(--text);padding:10px 12px;border-radius:12px;font-weight:800;box-shadow:var(--shadow-md)}
.page-card .btn-like:hover{background:#ffffffcc}

@media (max-width: 640px){
  .pages-grid{gap:12px}
  .page-card{width:clamp(140px, 45vw, var(--card-max))}
}

/* Ensure exactly two cards per row on portrait (width < height) */
@media (orientation: portrait){
  .pages-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
  }
  /* Let grid define the width so each column is equal */
  .page-card{width:100%}
}

/* Demo page layout */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:16px}
pre.code-block{background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:.95rem;line-height:1.35}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px;align-items:center}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.btn-small{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}

/* Chatbot (demo page) */
.chatbot .cb-row{display:flex;gap:12px;align-items:center;margin:8px 0 12px}
.chatbot .cb-row > label{flex:1}
.chatbot .cb-input, .chatbot .cb-select{background:#fff;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;width:100%}
.chatbot .cb-chat{background:linear-gradient(135deg, rgba(0,174,255,0.02), rgba(0,174,255,0));border:1px solid var(--border);border-radius:14px;padding:14px;height:52vh;overflow:auto}
.chatbot .cb-msg{display:flex;margin:8px 0}
.chatbot .cb-msg.me{justify-content:flex-end}
.chatbot .cb-bubble{max-width:75%;padding:10px 12px;border-radius:14px;white-space:pre-wrap;background:#fff;border:1px solid var(--border)}
.chatbot .cb-msg.me .cb-bubble{background:#21c3ff;color:#003044;border-top-right-radius:6px;border:0}
.chatbot .cb-msg.bot .cb-bubble{background:#f7fafc;border-top-left-radius:6px}
.chatbot .cb-composer{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px}
.chatbot textarea.cb-textarea{width:100%;resize:vertical;min-height:48px;max-height:200px;padding:10px 12px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:10px}
.chatbot .small{color:var(--muted);font-size:12px}

/* Input adornments for nicer form */
.input-wrap{position:relative}
.input-wrap .input{padding-left:42px;padding-right:44px}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#4B5565;opacity:.75}
.input-action{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid var(--border);background:#fff;color:var(--text);border-radius:10px;padding:6px 8px;cursor:pointer}
.input-action:hover{background:#ffffffcc}
.help{color:var(--muted);font-size:.95rem;margin-top:6px}

/* Auth buttons alignment & emphasis */
#openSignup{background:#21c3ff;color:#003044;border-color:transparent}
#openSignup:hover{filter:brightness(1.05)}

/* Loading spinners on buttons */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.icon-btn.loading,.text-btn.loading,.btn-primary.loading,.btn-ghost.loading{position:relative}
.icon-btn.loading::after,.text-btn.loading::after,.btn-primary.loading::after,.btn-ghost.loading::after{
  content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(16,24,40,.25); border-top-color:#21c3ff;
  animation:spin .8s linear infinite; position:absolute; right:10px; top:50%; transform:translateY(-50%);
}

/* Disabled state visual */
.btn-primary:disabled,.btn-ghost:disabled,.text-btn:disabled,.icon-btn:disabled,.btn-cta:disabled{opacity:.7;cursor:not-allowed}

/* Welcome hero (home, logged-out) */
.welcome-hero{max-width:1200px;margin:18px auto 0 auto;padding:0 clamp(20px, 5vw, 40px)}
.welcome-card{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:center;background:linear-gradient(135deg, rgba(0,174,255,.08), rgba(0,174,255,.03)), var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:20px;overflow:hidden}
.welcome-card h1{margin:0 0 8px 0;font-size:clamp(1.4rem, 3.8vw, 2.1rem)}
.wc-sub{color:var(--muted);margin:0 0 12px 0;line-height:1.35}
.wc-ctas{display:flex;gap:10px;flex-wrap:wrap}
.wc-text{position:relative;z-index:1}
.wc-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.wc-badge{position:absolute;bottom:12px;right:12px;background:#16a34a;color:#fff;font-weight:900;border-radius:999px;padding:8px 12px;box-shadow:0 8px 22px rgba(22,163,74,.25);z-index:0}
.wc-shapes{position:absolute;inset:0;background:radial-gradient(300px 120px at 70% 20%, rgba(33,195,255,.25), transparent 60%), radial-gradient(220px 120px at 40% 70%, rgba(21,94,239,.12), transparent 60%)}
@media (max-width: 860px){ .welcome-card{grid-template-columns:1fr} }

/* Credits pill + buy icon */
.credits-pill{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:2px solid #16a34a; /* emerald-600 */
  background:#ffffff; /* white */
  color:#065f46; /* dark green */
  font-weight:900;letter-spacing:.2px;
  padding:10px 14px;border-radius:999px;transition:.18s ease; height:40px;
  box-shadow:0 6px 18px rgba(22,163,74,.18);
}
.credits-pill:hover{filter:brightness(1.02);transform:translateY(-1px)}
.credits-pill .coin{width:18px;height:18px;display:inline-block}
.credits-pill .dots{display:none !important}
.credits-pill.loading .value{display:none}
.credits-pill.loading::after{
  content:"";display:inline-block;margin-left:6px;vertical-align:middle;
  width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(16,24,40,.25); border-top-color:#16a34a;
  animation:spin .8s linear infinite;
}
.buy-ico{display:inline-flex;align-items:center;gap:8px}

/* Buy Credits page */
.buy-wrap{max-width:1100px;margin:24px auto;padding:0 16px;display:grid;gap:18px}
.buy-hero{background:linear-gradient(135deg, rgba(0,174,255,.08), rgba(0,174,255,.03)), var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow-lg)}
.buy-hero h1{margin:0 0 6px 0;font-size:1.8rem}
.buy-hero .sub{color:var(--muted)}
.price-note{color:var(--muted);font-size:.95rem}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.plan-card{
  position:relative;overflow:hidden;text-align:center;
  background:radial-gradient(1200px 200px at 50% -120px, rgba(33,195,255,.20), transparent 60%), #fff;
  border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:18px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(16,24,40,.14),0 6px 12px rgba(16,24,40,.08)}
.plan-card.highlight{border-color:#21c3ff;box-shadow:0 0 0 3px rgba(33,195,255,.20), var(--shadow-lg)}
.plan-card h3{margin:8px 0;font-size:1.5rem}
.plan-card .center{text-align:center}
.plan-card .muted{color:var(--muted)}
.plan-card .price{margin:10px 0;font-size:1.1rem}
.plan-card .price .amount{font-weight:900;font-size:1.6rem;color:#003044;display:inline-block;margin-left:6px}
.plan-card .pill{display:inline-block;background:#e6f7ff;color:#003044;border:1px solid #bfe9ff;border-radius:999px;padding:6px 12px;font-weight:800}
.plan-card .buy-actions{display:block;margin-top:8px}
.plan-card .buy-actions .btn-cta{width:100%;margin:0}
.bkash-badge{max-width:65px;height:auto;width:auto;vertical-align:middle;display:inline-block;transform:translateY(-1px)}
/* safety cap for any direct bKash logo <img> */
img[src$="Bkash-Logo.png"]{max-width:65px;height:auto}

.custom-card{display:grid;gap:10px}
.range-row{display:grid;grid-template-columns:1fr 100px;gap:10px;align-items:center}
.range{width:100%}
.range::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#21c3ff;border:0;box-shadow:0 0 0 3px rgba(33,195,255,.3)}
.range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#21c3ff,#8edbff)}
.range-val{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;padding:10px;font-weight:800;background:#fff}

.buy-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-cta{border:0;border-radius:10px;padding:12px 14px;font-weight:900;background:#21c3ff;color:#003044;cursor:pointer;box-shadow:0 8px 22px rgba(33,195,255,.28)}
.btn-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}

.sticky-cta{position:sticky;bottom:12px;z-index:10;display:none}
.sticky-cta.show{display:block}

@media (max-width: 640px){
  .plan-grid{grid-template-columns:1fr;}
}

/* Payment page steps */
.bkash-steps{margin:6px 0 0 0;padding-left:18px}
.bkash-steps li{margin:8px 0}

/* Mobile menu (drawer) */
.mm{position:fixed;inset:0;display:none;z-index:70}
.mm.open{display:block}
.mm-backdrop{position:absolute;inset:0;background:rgba(16,24,40,.45)}
.mm-panel{position:absolute;right:0;top:0;height:100%;width:min(86vw,360px);background:linear-gradient(135deg, var(--brand-cyan-start), var(--brand-cyan-end)), var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .2s ease}
.mm.open .mm-panel{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--border)}
.mm-body{padding:12px;display:grid;gap:10px}
.mm-item{width:100%;text-align:left;background:#fff;border:1px solid var(--border);color:var(--text);padding:12px;border-radius:10px;display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:800}
.mm-credits{display:flex;align-items:center;gap:10px;border:2px solid #16a34a;background:#fff;color:#065f46;padding:12px;border-radius:10px;font-weight:900;box-shadow:0 6px 18px rgba(22,163,74,.12)}
.mm-credits.loading .value{display:none}
.mm-credits.loading::after{
  content:"";display:inline-block;margin-left:6px;vertical-align:middle;
  width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(16,24,40,.25); border-top-color:#16a34a;
  animation:spin .8s linear infinite;
}
.mm-credits .coin{width:18px;height:18px}
.mm-actions{display:grid;gap:8px}
.mm .is-current{box-shadow:0 0 0 3px rgba(0,174,255,.18)}

/* Mobile vs Desktop by orientation */
@media (orientation: portrait){
  .nav{padding:0 12px;height:56px}
  .brand img{max-width:120px}
  .nav-actions{display:none}
  .mobile-controls{display:flex}
  .mobile-menu-btn{display:inline-flex}
  .mobile-menu-btn span{display:none}
  .mm-credits{display:none}
}
@media (orientation: landscape){
  .nav-actions{display:flex}
  .mobile-controls{display:none}
  .mobile-menu-btn{display:none}
}

/* Enforce desktop nav order: Home - Buy Credits - Previous Exams - Account - Credit Count */
@media (orientation: landscape){
  #homeBtn{order:1}
  #buyCreditsBtn{order:2}
  #prevBtn{order:3}
  #account{order:4}
  #creditsPill{order:5}
  #loggedOutActions{order:6}
}

/* Exam page */
.exam-toolbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);padding:10px 16px;display:flex;justify-content:center;gap:8px;align-items:center}
.exam-timer{font-weight:900;color:#003044;background:#e6f7ff;border:1px solid #bfe9ff;border-radius:10px;padding:8px 12px}
.exam-wrap{max-width:1100px;margin:18px auto;padding:0 clamp(20px,5vw,40px);display:grid;gap:16px}
.exam-loading{height:120px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(90deg,#f3f4f6,#e9f7ff,#f3f4f6);background-size:200% 100%;animation:barber 1.2s linear infinite}
.exam-start h1{margin:0 0 6px 0}
.exam-body{display:grid;gap:12px;grid-template-columns:1fr}
.q-card{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-md);padding:12px}
.q-title{font-weight:800;margin-bottom:8px}
.q-options{display:grid;gap:8px;grid-template-columns:1fr}
.q-options .opt.answer{border-color:#16a34a;background:rgba(22,163,74,.06)}
.q-card.wrong .q-options .opt.selected{border-color:#F04438;background:rgba(240,68,56,.06)}
@media (min-width: 768px){ .q-options{grid-template-columns:repeat(2, 1fr)} }
.q-options .opt{border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;background:#fff;transition:.15s ease}
.q-options .opt.locked{cursor:default}
.q-options .opt.selected{border-color:#bfe9ff;background:#e6f7ff}
.q-card.correct{border-color:#16a34a;background:rgba(22,163,74,.05)}
.q-card.wrong{border-color:#F04438;background:rgba(240,68,56,.05)}
.exam-actions{display:flex;gap:10px;align-items:center}
.result-modal{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none;place-items:center;z-index:60}
.result-modal.show{display:grid}
.result-card{width:min(520px,92vw);background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow-lg);position:relative}
.result-card .close{position:absolute;right:10px;top:10px;border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 8px;cursor:pointer}
.result-card .btn-icon{display:none}
/* Majestic marks styling */
.result-head{font-weight:900;color:#003044;margin-top:4px;margin-bottom:6px;text-align:center}
.result-score{
  font-size: clamp(40px, 9vw, 80px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(14,165,233,.15);
  margin: 2px 0 4px 0; text-align:center
}
.result-meta{color:var(--muted);font-weight:700;text-align:center}
@media (orientation: portrait){
  #resultModal #showAnsBtn .btn-text, #resultModal #retakeBtn2 .btn-text{display:none}
  #resultModal #showAnsBtn .btn-icon, #resultModal #retakeBtn2 .btn-icon{display:inline-block}
}

/* Exam: loader and AI-like reveal */
.exam-loading{display:grid;place-items:center}
.exam-lottie{display:grid;place-items:center}
.exam-lottie > div{width:min(420px,92vw);height:180px}
@keyframes aiFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.q-card.ai-reveal{opacity:0;animation:aiFadeUp .38s ease forwards}
/* New magical reveal animations */
@keyframes magicFadeDown{from{opacity:0;transform:translateY(-10px) scale(.98);filter:blur(2px) saturate(.9)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0) saturate(1)}}
@keyframes quickFadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.q-card.ai-magic{opacity:0;animation:magicFadeDown .6s ease-out forwards}
.q-card.ai-quick{opacity:0;animation:quickFadeDown .22s ease-out forwards}

/* Mobile font sizing for exam */
@media (max-width: 640px){
  .q-title{font-size:1.12rem}
  .q-options .opt{font-size:1.05rem;padding:12px}
  .exam-timer{font-size:1.05rem}
}/* Live correction styles */
.q-options .opt.is-correct{ border-color:#16a34a; background:rgba(22,163,74,.08); color:inherit }
.q-options .opt.is-wrong{ border-color:#F04438; background:rgba(240,68,56,.08); color:inherit }
.q-options .opt.is-correct-outline{ border-color:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.25) }
@media (max-width: 640px){
  .q-options .opt.is-correct, .q-options .opt.is-wrong{ font-weight:800 }
}
/* Explore card ratings */
.page-card .rating{display:flex;align-items:center;gap:6px;color:#003044;font-weight:800}
.page-card .rating .star{width:16px;height:16px;color:#f59e0b}
.page-card .rating .muted{color:#667085;font-weight:600}
/* Explore rating sticker */
.page-card .rating-sticker{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;padding:4px 8px;background:#ffffffcc;border:1px solid var(--border);border-radius:10px;backdrop-filter:saturate(140%) blur(2px);font-weight:900;color:#003044;box-shadow:var(--shadow-md)}
.page-card .rating-sticker .star{width:14px;height:14px;color:#f59e0b}
.page-card .rating-sticker .count{color:#667085;font-weight:700}
/* Timer start lens-glare effect */
body.glare-start::after{
  content:"";position:fixed;inset:-10%;pointer-events:none;z-index:55;
  background: radial-gradient(80% 50% at -10% 10%, rgba(34,197,94,.18), rgba(14,165,233,.14), rgba(255,255,255,0) 60%);
  filter: blur(1px);
  animation:glareSweep 1.2s ease-out forwards;
  opacity:0;mix-blend-mode:screen
}
@keyframes glareSweep{0%{transform:translateX(-40%) translateY(-10%) rotate(6deg);opacity:0}25%{opacity:.35}100%{transform:translateX(40%) translateY(10%) rotate(0);opacity:0}}
.exam-timer.timer-glow{
  background: linear-gradient(90deg, #e6f7ff, #dfffea, #e6f7ff);
  background-size:200% 100%;
  animation:timerShine 1.4s ease-out forwards;
  box-shadow:0 0 0 3px rgba(14,165,233,.18), 0 10px 28px rgba(34,197,94,.15)
}
@keyframes timerShine{from{background-position:0% 50%}to{background-position:100% 50%}}

/* OAuth buttons */
.oauth-wrap{display:block;margin-bottom:10px}
.oauth-sep{display:flex;align-items:center;gap:10px;color:var(--muted);margin:8px 0;font-weight:800}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-google{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);color:#111827;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:800;width:100%;box-shadow:var(--shadow-md)}
.btn-google:hover{transform:translateY(-1px);background:#fff}
.btn-google .g-ico{width:20px;height:20px}
@media (orientation: portrait){ .btn-google{width:100%} }

/* Forgot password link inside login form */
.form-check.with-forgot{display:flex;align-items:center;gap:8px}
.form-check.with-forgot .forgot-link{margin-left:auto;color:#0ea5e9;text-decoration:none;font-weight:800}
.form-check.with-forgot .forgot-link:hover{text-decoration:underline}