/* Zirva – clean pass (Brilliant / Typeform / Linear restraint). Loaded last. */

/* ---------- quiz ---------- */
.qz-top{display:flex;align-items:center;gap:14px;margin-top:4px}
.thin{flex:1;height:8px;border-radius:4px;background:var(--color-border);overflow:hidden}
.thin i{display:block;height:100%;border-radius:4px;background:var(--color-text)}
.qz-time{font:600 15px/1 var(--font-family-ui);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}
.qz-q{font:600 28px/37px var(--font-family-ui);letter-spacing:-.015em;margin-top:44px}
.qz .answers{margin-top:auto;padding:24px 0 8px}
.qz-check{padding:16px 24px 32px}
.fb2{background:var(--color-success-tint)}
.fb2.no{background:var(--color-danger-tint)}
.fb2-in{max-width:640px;margin:0 auto;padding:20px 24px 32px;display:flex;flex-direction:column;gap:16px}
.fb2-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fb2 h5{display:flex;align-items:center;gap:10px;margin:0;font:600 20px/26px var(--font-family-ui);color:var(--color-success)}
.fb2.no h5{color:var(--color-danger)}
.fb2 h5 i{font-size:26px}
.fb2 .fbsub{font:var(--type-body-md);color:var(--color-text);margin-top:2px}
.fb2 .fbsub b{font-weight:600}
.why{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:0;background:rgba(17,20,25,.06);font:var(--type-label-md);color:var(--color-text)}
[data-theme=dark] .why{background:rgba(255,255,255,.08)}
.qz-blank{font:600 28px/48px var(--font-family-ui);letter-spacing:-.015em;margin-top:44px}
.qz .bank{margin-top:auto;padding:24px 0 8px}
@media (min-width:900px){
  .qz .full-in{padding-top:40px}
  .qz-q,.qz-blank{font-size:32px;line-height:42px;margin-top:56px}
  .qz .answers,.qz .bank{margin-top:48px}
  .fb2-in{flex-direction:row;align-items:center;justify-content:space-between}
  .fb2-in .btn{width:220px}
}

/* ---------- results ---------- */
.rs{flex:1;display:flex;flex-direction:column;width:100%;max-width:560px;margin:0 auto;padding:12px 24px 0}
.rs-x{align-self:flex-start;margin-left:-12px}
.rs h1{font:600 40px/46px var(--font-family-display);letter-spacing:-.02em;margin-top:28px}
.rs .lead{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:10px}
.rs .strip10{margin-top:24px}
.rs-h{display:flex;justify-content:space-between;align-items:baseline;margin:44px 0 4px}
.rs-h h2{font:600 20px/26px var(--font-family-ui)}
.mis{padding:20px 0;border-bottom:1px solid var(--color-border)}
.mis p.q{font:500 17px/25px var(--font-family-ui)}
.mis .ans-l{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px;font:var(--type-body-md)}
.mis .ans-l span{color:var(--color-text-secondary)}
.mis .ans-l s{color:var(--color-danger);text-decoration-thickness:1.5px}
.mis .ans-l b{color:var(--color-success);font-weight:600}
.rs .more{margin-top:20px;align-self:flex-start}
.rs-foot{width:100%;max-width:560px;margin:auto auto 0;padding:24px 24px 32px;display:flex;gap:12px}
@media (min-width:900px){.rs{padding-top:40px}.rs-foot{margin-top:40px}}

/* ---------- quiz builder (Typeform layout) ---------- */
.bd-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bd-head h1{font:600 24px/30px var(--font-family-ui);letter-spacing:-.01em}
.bd-head p{font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:4px}
.bd-head .acts{display:flex;gap:10px;align-items:center}
.bd{display:grid;gap:24px;margin-top:28px}
.bd-list{display:none}
.bd-list .it{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;padding:12px 12px;border-radius:12px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.bd-list .it b{font:600 12px/1 var(--font-family-ui);color:var(--color-text-tertiary);text-align:center}
.bd-list .it span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-list .it.on{background:var(--color-surface);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-border)}
.bd-list .add{display:flex;align-items:center;gap:8px;padding:12px;font:var(--type-label-md);color:var(--color-text-secondary)}
.canvas{background:var(--color-surface);border-radius:20px;box-shadow:inset 0 0 0 1px var(--color-border);padding:32px 28px 28px;display:flex;flex-direction:column;gap:12px;min-height:420px}
.canvas .no{font:600 13px/1 var(--font-family-ui);color:var(--color-text-tertiary)}
.canvas .qt{font:600 24px/32px var(--font-family-ui);letter-spacing:-.01em;outline:2px solid transparent;border-radius:6px}
.canvas .qt::after{content:"";display:inline-block;width:2px;height:26px;background:var(--color-focus);vertical-align:-5px;margin-left:2px}
.canvas .opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.copt{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--color-border-strong);font:var(--type-body-lg)}
.copt .r{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--color-border-strong);flex:none}
.copt.ok{box-shadow:inset 0 0 0 2px var(--color-success)}
.copt.ok .r{background:var(--color-success);box-shadow:none;display:grid;place-items:center;color:#fff}
.copt.ok .r i{font-size:12px}
.copt .mark{margin-left:auto;font:var(--type-label-sm);color:var(--color-success)}
.addline{display:inline-flex;align-items:center;gap:8px;font:var(--type-label-md);color:var(--color-text-secondary);padding:10px 2px}
.canvas .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:20px;padding-top:20px;border-top:1px solid var(--color-border)}
.bd-set{display:none}
.bd-set h6{margin:0 0 8px;font:var(--type-label-sm);color:var(--color-text-tertiary)}
.bd-set .grp{display:flex;flex-direction:column;gap:2px;margin-bottom:28px}
.bd-set .prop{display:flex;justify-content:space-between;align-items:center;min-height:44px;font:var(--type-body-sm)}
.bd-set .prop span{color:var(--color-text-secondary)}
.bd-set .prop b{font:var(--type-label-md);display:inline-flex;gap:6px;align-items:center}
.bd-set .act{display:flex;align-items:center;gap:10px;min-height:44px;font:var(--type-label-md)}
.bd-set .act i{font-size:18px;color:var(--color-text-secondary)}
.bd-bar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:12px 16px 28px;background:var(--color-surface);border-top:1px solid var(--color-border);z-index:20}
.bd-bar button{flex:1;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0;background:none;font:var(--type-label-sm);color:var(--color-text-secondary);cursor:pointer}
.bd-bar i{font-size:22px;color:var(--color-text)}
@media (max-width:899px){.canvas{padding:24px 20px;min-height:0}.canvas .qt{font-size:22px;line-height:30px}.bd-head .hide-s{display:none}}
@media (min-width:900px){.bd{grid-template-columns:220px minmax(0,1fr)}.bd-list{display:block}.bd-bar{display:none}}
@media (min-width:1300px){.bd{grid-template-columns:220px minmax(0,1fr) 240px}.bd-set{display:block;padding-top:8px}}

/* ---------- grading ---------- */
.gr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.gr-head h1{font:600 26px/32px var(--font-family-ui);letter-spacing:-.01em}
.gr-head p{font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:6px}
.gr-nav{display:flex;align-items:center;gap:6px;font:var(--type-label-md);color:var(--color-text-secondary)}
.gr{display:grid;gap:28px;margin-top:28px}
.gr .page{max-height:none;aspect-ratio:auto;min-height:420px}
.dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--color-border-strong)}
.dots i.on{background:var(--color-text)}
.gr-side{display:flex;flex-direction:column;gap:20px}
.score2{display:flex;align-items:baseline;gap:8px}
.score2 .v{min-width:84px;height:64px;border-radius:14px;box-shadow:inset 0 0 0 2px var(--color-text);background:var(--color-surface);display:grid;place-items:center;font:600 30px/1 var(--font-family-ui);font-variant-numeric:tabular-nums}
.score2 span{font:var(--type-body-lg);color:var(--color-text-secondary)}
.gr-side label{font:var(--type-label-md);display:block;margin-bottom:8px}
.gr-side .area{min-height:140px}
.gr-side .redo{align-self:center;font:var(--type-label-md);color:var(--color-text-secondary);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--color-border-strong)}
@media (min-width:900px){.gr{grid-template-columns:minmax(0,1fr) 340px;gap:48px}}
@media (min-width:900px) and (max-width:1199px){.gr{grid-template-columns:minmax(0,1fr) 300px;gap:32px}}

/* ---------- teacher home (calm) ---------- */
.th-list .sub:first-child{border-top:1px solid var(--color-border)}
.th-cta{margin-top:20px}
@media (min-width:900px){.th-cta{width:auto}}
.sched .d{font:600 16px/22px var(--font-family-ui);color:var(--color-text);font-variant-numeric:tabular-nums;padding-top:0}

@media (max-width:899px){
  .copt .mark{display:none}
  .gr-head{flex-direction:column;gap:10px}
  .gr-head h1{font-size:26px}
}