/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14.5px;
  border-radius:var(--r-sm);padding:11px 18px;
  transition:transform .08s var(--ease),filter var(--dur),box-shadow var(--dur);
  box-shadow:0 2px 10px var(--accent-glow);
}
.btn:hover{filter:brightness(1.07);box-shadow:0 4px 18px var(--accent-glow);}
.btn:active{transform:translateY(1px) scale(.99);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn.full{width:100%;}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none;font-weight:500;}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);}
.btn.danger:hover{border-color:var(--coral);color:var(--coral);background:var(--coral-glow);}
.btn.sm{padding:7px 13px;font-size:13px;}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap;}

.iconbtn{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--dim);border:1px solid transparent;transition:var(--dur) var(--ease);flex:0 0 auto;
}
.iconbtn:hover{background:var(--surface-3);color:var(--accent);border-color:var(--line);}
.iconbtn svg{width:17px;height:17px;stroke-width:2;}

/* ---------- surfaces ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;
}
.card-head{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line-soft);
}
.card-head h2{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;}
.card-body{padding:var(--s4) var(--s5) var(--s5);}

.chip{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:var(--r-full);padding:4px 11px;
  color:var(--dim);white-space:nowrap;background:var(--surface-2);
}
.chip.accent{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);}
.chip.coral{border-color:var(--coral);color:var(--coral);background:var(--coral-glow);}
.chip.teal{border-color:var(--teal);color:var(--teal);background:var(--teal-glow);}

.dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2.4s var(--ease) infinite;flex:0 0 auto;}

.label{
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s2);
}
.sec-title{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line);
}

/* ---------- inputs ---------- */
.input{
  width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);
}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--surface);}
.input::placeholder{color:var(--faint);}
.field{margin-bottom:var(--s4);}

.switch{
  width:44px;height:25px;border-radius:var(--r-full);background:var(--line);position:relative;
  transition:background var(--dur) var(--ease);flex:0 0 auto;cursor:pointer;
}
.switch::after{
  content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:var(--faint);
  top:3px;left:3px;transition:transform var(--dur) var(--ease),background var(--dur);
}
.switch.on{background:var(--teal-glow);}
.switch.on::after{background:var(--teal);transform:translateX(19px);}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

textarea.input{min-height:140px;font-family:var(--f-mono);font-size:11.5px;line-height:1.6;resize:vertical;}

.row{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);}
.row > label{font-size:14px;flex:1;}
.hint{font-size:12.5px;color:var(--dim);line-height:1.5;}
.msg-ok{color:var(--teal);font-family:var(--f-mono);font-size:12.5px;min-height:18px;margin-top:var(--s2);}
.msg-err{color:var(--coral);font-family:var(--f-mono);font-size:12.5px;min-height:18px;margin-top:var(--s2);}

/* ---------- progress ---------- */
.bar{height:6px;background:var(--line);border-radius:var(--r-full);overflow:hidden;}
.bar > span{display:block;height:100%;border-radius:var(--r-full);background:var(--teal);width:0;
  transition:width .6s var(--ease-out);}
.bar.accent > span{background:var(--accent);}
.bar.violet > span{background:var(--violet);}

.ring{transform:rotate(-90deg);}
.ring circle{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease-out);}
.ring .track{stroke:var(--line);}

/* ---------- toast ---------- */
#toasts{position:fixed;bottom:var(--s5);left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;pointer-events:none;}
.toast{
  background:var(--surface-3);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-full);padding:9px 18px;font-size:13.5px;box-shadow:var(--sh-lg);
  animation:pop .3s var(--ease-out);white-space:nowrap;
}
.toast.ok{border-color:var(--teal);color:var(--teal);}
.toast.err{border-color:var(--coral);color:var(--coral);}

/* ---------- skeleton ---------- */
.skel{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:500px 100%;animation:shimmer 1.4s infinite linear;border-radius:var(--r-sm);
}

/* ---------- select ---------- */
select.select{
  width:100%;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238593A6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
  padding-right:36px;cursor:pointer;
}
[data-theme="light"] select.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6675' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.select option{background:var(--surface);color:var(--text);}
.row.stack{flex-direction:column;align-items:stretch;gap:6px;}
.row.stack > label{flex:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);}

.share-url{
  font-family:var(--f-mono);font-size:12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
  word-break:break-all;color:var(--accent);user-select:all;margin-top:var(--s3);
}

/* ---------- exam times ---------- */
.extime{
  display:flex;align-items:stretch;gap:0;margin-top:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-2);flex-wrap:wrap;
}
.extime > div{padding:8px 13px;display:flex;flex-direction:column;gap:2px;}
.extime-sep{padding:0 !important;width:1px;background:var(--line);flex:0 0 1px;}
.extime-k{
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;
}
.extime b{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;}
.extime-gate{background:var(--coral-glow);}
.extime-gate .extime-k{color:var(--coral);}
.extime-gate b{color:var(--coral);}
.extime-start b{color:var(--text);}
.extime-dur b{font-size:15px;color:var(--dim);font-weight:600;}

.cd-caption{
  font-family:var(--f-mono);font-size:11.5px;color:var(--dim);
  margin-top:var(--s3);position:relative;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;
}
.cd-caption b{color:var(--coral);font-family:var(--f-body);font-weight:600;font-size:12.5px;}
.cd-caption i{font-style:normal;color:var(--faint);}