/* ---- توکن‌های طراحی ------------------------------------------------ */
:root{
  --ink:#101B2B; --slate:#233449; --paper:#EEF1F5; --card:#FFFFFF;
  --teal:#0F7A80; --amber:#C97E23; --alert:#B03A44; --muted:#6C7C90;
  --line:#D7DEE7;
  --r:10px; --shadow:0 1px 2px rgba(16,27,43,.06), 0 8px 24px rgba(16,27,43,.06);
  --step-0:.875rem; --step-1:1rem; --step-2:1.25rem; --step-3:1.75rem; --step-4:2.5rem;
}
@font-face{font-family:Vazirmatn;src:url(/static/vendor/fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/static/vendor/fonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/static/vendor/fonts/Vazirmatn-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Vazirmatn,system-ui,sans-serif;background:var(--paper);color:var(--ink);
  font-size:var(--step-1);line-height:1.75;direction:rtl}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0 0 .5rem}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)}
a{color:var(--teal)}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:960px;margin:0 auto;padding:1.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:1.25rem}
.stack>*+*{margin-top:1rem}
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.muted{color:var(--muted);font-size:var(--step-0)}

label{display:block;font-size:var(--step-0);color:var(--slate);margin-bottom:.35rem}
input,select,textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:#fff;color:inherit}
input:focus-visible,button:focus-visible,a:focus-visible,.opt:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px}
button{font:inherit;font-weight:500;padding:.7rem 1.2rem;border-radius:8px;border:1px solid transparent;
  background:var(--ink);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--slate);border-color:var(--line)}
button.teal{background:var(--teal)}
button.danger{background:var(--alert)}
button[disabled]{opacity:.5;cursor:not-allowed}

.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:999px;
  font-size:.8rem;border:1px solid var(--line);background:#fff;color:var(--slate)}
.chip.ok{border-color:#BFE0D9;background:#EAF6F3;color:#0B5F58}
.chip.warn{border-color:#EAD3AE;background:#FBF3E7;color:#8A5410}
.chip.bad{border-color:#E7C2C6;background:#FAEDEE;color:#8A222B}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}

/* ---- امضای طراحی: نوار یکپارچگی جلسه ------------------------------- */
/* هر قطعه یک دقیقه از آزمون است؛ با گذر زمان پر و با تخلف رنگی می‌شود. */
.ribbon{display:flex;gap:2px;height:12px;margin:.75rem 0 0}
.ribbon i{flex:1;background:var(--line);border-radius:2px;transition:background .4s}
.ribbon i.past{background:#B9C6D4}
.ribbon i.warn{background:var(--amber)}
.ribbon i.bad{background:var(--alert)}
@media (prefers-reduced-motion:reduce){.ribbon i{transition:none}}

.examhead{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);
  padding:.75rem 1.5rem}
.timer{font-size:var(--step-3);font-weight:800;letter-spacing:.02em}
.timer.low{color:var(--alert)}

.cam{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;width:150px;border-radius:var(--r);
  overflow:hidden;border:2px solid var(--line);background:#000;z-index:30;box-shadow:var(--shadow)}
.cam video{width:100%;display:block;transform:scaleX(-1)}
.cam.alert{border-color:var(--alert)}
.cam .state{position:absolute;inset-block-start:0;inset-inline-start:0;padding:.15rem .45rem;
  font-size:.7rem;background:rgba(16,27,43,.75);color:#fff}

.opt{display:block;width:100%;text-align:start;padding:.85rem 1rem;margin-top:.6rem;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.opt:hover{border-color:#AEBDCC}
.opt[aria-pressed="true"]{border-color:var(--teal);background:#EAF6F3;box-shadow:inset 0 0 0 1px var(--teal)}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pager{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.2rem,1fr));gap:.35rem}
.pager button{padding:.4rem 0;background:#fff;color:var(--slate);border:1px solid var(--line);font-size:.85rem}
.pager button.done{background:#EAF6F3;border-color:#BFE0D9;color:#0B5F58}
.pager button.here{background:var(--ink);color:#fff;border-color:var(--ink)}

table{width:100%;border-collapse:collapse;font-size:var(--step-0)}
th,td{text-align:start;padding:.6rem .5rem;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500}

.banner{padding:.75rem 1rem;border-radius:8px;border:1px solid var(--line);background:#fff}
.banner.bad{border-color:#E7C2C6;background:#FAEDEE;color:#8A222B}
.banner.warn{border-color:#EAD3AE;background:#FBF3E7;color:#8A5410}

/* کنسول ناظر: تیره تا در سالن نظارت خستگی چشم کمتر شود */
body.console{background:var(--ink);color:#E7EDF4}
body.console .card{background:var(--slate);border-color:#31465E;box-shadow:none}
body.console th{color:#94A7BC}
body.console td{border-color:#31465E}
body.console input,body.console select{background:#16253A;border-color:#31465E;color:#E7EDF4}

@media (max-width:640px){
  .wrap{padding:1rem}
  :root{--step-4:1.9rem;--step-3:1.4rem}
  .cam{width:104px}
}

/* ---- گفت‌وگو با ناظر ------------------------------------------------ */
.chatbox{position:fixed;inset-inline-start:1rem;inset-block-end:1rem;width:300px;z-index:31;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.chatbox header{padding:.5rem .75rem;border-bottom:1px solid var(--line);font-weight:500;
  display:flex;justify-content:space-between;align-items:center}
.chatlog{height:190px;overflow:auto;padding:.5rem .75rem}
.msg{margin-bottom:.6rem;font-size:var(--step-0)}
.msg p{margin:.15rem 0;padding:.4rem .6rem;border-radius:8px;background:var(--paper)}
.msg.staff p{background:#EAF6F3;border:1px solid #BFE0D9}
.chatbox footer{display:flex;gap:.4rem;padding:.5rem;border-top:1px solid var(--line)}
.chatbox textarea{height:2.4rem;resize:none;padding:.35rem .5rem}
.chatbox button{padding:.35rem .7rem}
body.console .chatlog .msg p{background:#16253A}
body.console .chatbox{background:var(--slate);border-color:#31465E}
@media (max-width:640px){.chatbox{width:calc(100% - 2rem);inset-inline:1rem}}