:root{--navy:#153d73;--blue:#315eae;--sky:#eaf2ff;--ink:#203249;--muted:#738097;--line:#e2e9f3;--bg:#f5f7fc;--green:#167853;--red:#c94a4a}*{box-sizing:border-box}html{font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}body{margin:0;background:var(--bg);color:var(--ink);font-size:15px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.55;cursor:default}a{color:var(--blue)}.wrap{max-width:1040px;margin:auto;padding-left:22px;padding-right:22px}.hero{background:linear-gradient(118deg,#163861,#285b9d 70%,#477abf);color:white;padding:32px 0 35px}.headwrap{display:flex;align-items:center;justify-content:space-between;gap:20px}.tag,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#8bc7ff}.hero h1{font-size:30px;margin:7px 0 7px;letter-spacing:-1px}.hero p{margin:0;color:#d4e3fb}.user-badge{text-align:right;min-width:200px}.user-badge #who{font-weight:700;margin-bottom:12px}.head-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}.head-btn{background:#ffffff25;color:white;border:1px solid #ffffff2b;border-radius:8px;padding:7px 10px;font-size:12px}#cloudState{font-size:12px;color:#b7f8d8;margin-right:4px}main.wrap{padding-top:22px}.card{background:white;border:1px solid #edf0f5;border-radius:18px;padding:24px;margin-bottom:18px;box-shadow:0 6px 22px #20324908}.card h3{margin:0 0 12px;font-size:18px}.card p{line-height:1.7}.muted{color:var(--muted)}.hint{font-size:12px;color:var(--muted);line-height:1.6}.notice{background:#fff4e7;border:1px solid #f4dcb7;padding:12px 15px;border-radius:12px;margin-bottom:18px}.auth-layout{display:grid;grid-template-columns:1fr .95fr;gap:22px;margin-top:18px}.auth-card{padding:30px}.auth-card h2{margin:0;font-size:25px}.auth-card .muted{margin-bottom:22px}.icon-round{font-size:26px;margin-bottom:12px}.stack{display:flex;flex-direction:column;gap:14px}label{display:block;font-weight:650;color:#334562;font-size:13px}label small{color:var(--muted);font-weight:400}input,select,textarea{background:#fff;border:1px solid #cdd8e8;border-radius:10px;padding:11px 12px;color:var(--ink);outline:none;width:100%;margin-top:7px}input:focus,select:focus,textarea:focus{border-color:#4a79c6;box-shadow:0 0 0 3px #a8c5f338}input[type="file"]{padding:9px;max-width:300px;font-size:12px}.primary{background:var(--blue);color:white;border-radius:10px;padding:12px 17px;font-weight:750}.primary:hover{background:#244d95}.light{background:#e9f0fc;color:#2c548d;border-radius:10px;padding:11px 14px;font-weight:650}.small{padding:7px 10px;font-size:12px}.full{width:100%;margin-top:4px}.intro-card{background:#ecf3ff;border:1px solid #dce8fb}.intro-card h3{font-size:22px}.intro-graphic{margin:8px 0 20px;font-size:38px}.intro-graphic span{font-size:18px;color:#7e95b9}.feature-list{display:grid;gap:11px;margin:20px 0;font-weight:650;color:#375887}.intro-card small{color:#6981a6}.tabs{display:flex;gap:10px;margin:5px 0 24px;overflow-x:auto}.tabs button{white-space:nowrap;background:#e8edf7;color:#486087;padding:13px 20px;font-weight:750;border-radius:11px}.tabs button.selected{background:var(--blue);color:white}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.section-head h2{font-size:25px;margin:5px 0 4px;letter-spacing:-.7px}.section-head p{margin:0;font-size:13px}.section-head .eyebrow{color:#5d85b7}.pill{background:#e7effc;color:#2c5696;border-radius:100px;padding:7px 13px;font-size:12px;font-weight:800;white-space:nowrap}.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.quiz{max-width:820px;margin:auto}.question-top,.between,.preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.quiz .eyebrow{color:#5477aa}.progress-track{height:7px;background:#e9eff9;border-radius:10px;overflow:hidden;margin:18px 0 25px}.progress-track>div{background:#4f86d5;width:0;height:100%;transition:width .2s}.quiz h3{font-size:24px;line-height:1.5;margin:0 0 21px}.answer-option{display:block;text-align:left;background:#f2f6fe;border:1px solid #dfe9fa;color:#2c4976;width:100%;margin:10px 0;padding:16px 19px;border-radius:11px;font-weight:650}.answer-option:not(:disabled):hover{background:#e7efff}.answer-option.correct-option{background:#dbf7e9;border-color:#8bd6ad}.answer-option.wrong-option{background:#fff0ef;border-color:#f5b8b3}.feedback{margin:17px 0;background:#f5f8fd;padding:16px;border-radius:12px;border:1px solid #dce5f2;line-height:1.6;white-space:pre-wrap}.feedback strong{display:block;margin-bottom:6px}.quiz-actions{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.placeholder{text-align:center;padding:50px 24px}.empty-icon{font-size:44px}.placeholder h3{margin-top:15px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.metric{background:white;border:1px solid #e8edf5;padding:21px;border-radius:15px}.metric strong{font-size:29px;display:block;margin-top:7px;color:#274d91}.metric span{font-size:12px;color:var(--muted);font-weight:650}.bar-row{display:flex;align-items:center;gap:10px;margin:16px 0}.bar-label{width:100px;font-weight:650}.bar-track{flex:1;background:#e9eef7;height:11px;border-radius:9px;overflow:hidden}.bar-track div{background:#618bd5;height:100%}.bar-value{width:95px;text-align:right;color:#597296;font-size:12px}.record-row,.member-row{padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}.record-row:last-child,.member-row:last-child{border-bottom:0}.status-green{color:var(--green);font-weight:750}.status-red{color:var(--red);font-weight:750}.prompt-box{white-space:pre-wrap;line-height:1.7;font-size:13px;background:#f2f6fd;padding:16px;border-radius:12px;border:1px solid #dce8fb;max-height:195px;overflow:auto;color:#456181}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}.link-button{background:#edf3ff;color:#345c9a;text-decoration:none;padding:11px 14px;border-radius:10px;font-weight:700}.preview-top{margin-top:21px;padding-top:16px;border-top:1px solid var(--line)}.preview-top h4{margin:0}.preview-item{border-bottom:1px solid #e6ecf4;padding:14px 0}.preview-item summary{cursor:pointer;line-height:1.6}.preview-item summary input{width:auto;margin:0 7px 0 0;accent-color:var(--blue)}.preview-item p{font-size:13px;margin:7px 0}.bank-item{padding:13px 0;border-bottom:1px solid #e6edf5}.bank-item:last-child{border-bottom:0}.bank-item .between{align-items:flex-start}.bank-item h4{margin:3px 0;font-size:14px}.bank-item small{color:var(--muted)}.danger{background:#fff0f0;color:#aa4444;border-radius:9px;padding:7px 11px}.familycode{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#f0f5ff}.familycode .eyebrow{color:#6386ba}.family-code{font-size:29px;font-weight:850;letter-spacing:3px;color:#2a5291;margin:7px 0}.familycode small{color:#7189ad}.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:end}.grid-form button{justify-self:start}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#203d64;color:white;padding:14px 20px;border-radius:10px;box-shadow:0 10px 28px #223b6166;max-width:min(90vw,680px);z-index:100}.toast.error{background:#8e3343}.toast.success{background:#23634b}footer{text-align:center;font-size:12px;color:#8a95a9;padding:23px 0 35px} [hidden]{display:none!important}@media(max-width:720px){.wrap{padding-left:14px;padding-right:14px}.headwrap{align-items:flex-start;flex-direction:column}.user-badge{text-align:left}.head-actions{justify-content:flex-start}.hero{padding:25px 0}.hero h1{font-size:26px}.auth-layout{grid-template-columns:1fr;gap:2px}.auth-card{padding:22px}.intro-card{padding:20px}.filters{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr 1fr}.grid-form{grid-template-columns:1fr}.tabs{gap:6px}.tabs button{padding:11px 13px;font-size:13px}.section-head h2{font-size:22px}.card{padding:18px}.family-code{font-size:24px}.quiz h3{font-size:20px}}

.category-filters{grid-template-columns:repeat(4,minmax(0,1fr))}.pdf-box{display:flex;align-items:end;gap:15px;flex-wrap:wrap;padding:15px;border:1px dashed #9ab4da;border-radius:12px;background:#f8faff}.pdf-box>label{flex:1;min-width:180px}.pdf-box>button{white-space:nowrap}.category-tag{font-size:11px;color:#3d6396;background:#ecf3ff;border-radius:7px;padding:4px 8px;display:inline-block;margin:0 4px 5px 0}.subtle{font-size:12px;color:#8190a3}.preview-edit{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.preview-edit label{font-size:12px}.preview-edit textarea{grid-column:span 2}.quiz-finished{text-align:center;padding:28px}.stat-block{padding:10px 0;border-bottom:1px solid #eef1f6}.stat-block:last-child{border:0}@media(max-width:720px){.category-filters{grid-template-columns:1fr 1fr}.pdf-box{display:block}.pdf-box>*{margin-bottom:12px}.preview-edit{grid-template-columns:1fr}}