/* NetExam Pro Mobile — shared framework */
:root{
  --bg:#0a0f1a; --bg2:#0f1626; --card:#131c2e; --card2:#1a2438;
  --acc:#38bdf8; --acc-d:#0ea5e9; --txt:#e8eef7; --mut:#8b98ad;
  --ok:#22c55e; --bad:#ef4444; --warn:#f59e0b;
  --r:14px; --tap:48px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  font-size:16px; line-height:1.5; overscroll-behavior-y:contain;}
body{min-height:100dvh; display:flex; flex-direction:column;}
a{color:var(--acc);}
/* Header */
.mhead{position:sticky; top:0; z-index:50; background:rgba(10,15,26,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid #1e293b; padding:12px 16px;
  display:flex; align-items:center; gap:12px;}
.mhead .back{width:40px; height:40px; border-radius:12px; border:1px solid #1e293b;
  background:var(--card); color:var(--txt); font-size:20px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;}
.mhead .back:active{transform:scale(.94); background:var(--card2);}
.mhead h1{font-size:17px; margin:0; font-weight:700; flex:1;}
.mhead .sub{font-size:12px; color:var(--mut); font-weight:400;}
/* Content */
.mwrap{flex:1; padding:16px; max-width:600px; width:100%; margin:0 auto;}
.mcard{background:var(--card); border:1px solid #1e293b; border-radius:var(--r);
  padding:18px; margin-bottom:14px;}
.mcard h2{margin:0 0 8px; font-size:18px;}
.muted{color:var(--mut);}
/* Buttons — 48px+ targets, press feedback */
.mbtn{display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:12px 20px; border-radius:var(--r);
  border:1px solid #1e293b; background:var(--card2); color:var(--txt);
  font-size:16px; font-weight:600; cursor:pointer; width:100%;
  transition:transform .12s ease, background .12s ease;}
.mbtn:active{transform:scale(.97); background:#232f47;}
.mbtn.primary{background:var(--acc); border-color:var(--acc); color:#06121f;}
.mbtn.primary:active{background:var(--acc-d);}
.mbtn.ok{background:var(--ok); border-color:var(--ok); color:#06121f;}
.mbtn.bad{background:var(--bad); border-color:var(--bad); color:#fff;}
.mbtn.ghost{background:transparent;}
.mbtnrow{display:flex; gap:10px; margin-top:12px;}
.mbtnrow .mbtn{flex:1;}
/* Option buttons (quiz) */
.mopt{display:block; width:100%; text-align:left; min-height:56px;
  padding:14px 16px; margin:8px 0; border-radius:var(--r);
  border:1px solid #1e293b; background:var(--card); color:var(--txt);
  font-size:16px; cursor:pointer; transition:transform .1s, border-color .15s, background .15s;}
.mopt:active{transform:scale(.98); background:var(--card2);}
.mopt.sel{border-color:var(--acc); background:#0e2233;}
.mopt.correct{border-color:var(--ok); background:#0a2a1a;}
.mopt.wrong{border-color:var(--bad); background:#2a0f0f;}
.mopt .k{display:inline-flex; width:28px; height:28px; border-radius:8px;
  background:#1e293b; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; margin-right:10px;}
/* Progress */
.mprog{height:8px; background:#1e293b; border-radius:99px; overflow:hidden; margin:12px 0;}
.mprog > div{height:100%; background:var(--acc); border-radius:99px;
  transition:width .3s ease;}
/* Bottom tab bar */
.mtabs{position:sticky; bottom:0; z-index:50; background:rgba(10,15,26,.95);
  backdrop-filter:blur(12px); border-top:1px solid #1e293b;
  display:flex; padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
.mtabs a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; color:var(--mut); text-decoration:none; font-size:11px;
  border-radius:10px; min-height:56px; justify-content:center;}
.mtabs a:active{background:var(--card);}
.mtabs a.on{color:var(--acc);}
.mtabs .ic{font-size:22px;}
/* Swipe hint */
.swipe-hint{text-align:center; color:var(--mut); font-size:13px; padding:8px;}
/* Toast */
.mtoast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--card2); border:1px solid #1e293b; color:var(--txt);
  padding:12px 20px; border-radius:99px; font-size:14px; opacity:0;
  transition:opacity .2s, transform .2s; z-index:100; pointer-events:none;
  max-width:90vw; text-align:center;}
.mtoast.show{opacity:1; transform:translateX(-50%) translateY(0);}
/* Inputs */
.minp{width:100%; min-height:var(--tap); padding:12px 16px; border-radius:var(--r);
  border:1px solid #1e293b; background:var(--bg2); color:var(--txt); font-size:16px;}
select.minp{appearance:none;}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important;}
}