@font-face{font-family:Mali;src:url('./fonts/Mali-SemiBold.ttf') format('truetype');font-weight:600 800;font-display:swap}
@font-face{font-family:BeVietnam;src:url('./fonts/BeVietnamPro-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:BeVietnam;src:url('./fonts/BeVietnamPro-SemiBold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{--ink:#24241f;--muted:#737365;--paper:#fffdf2;--yellow:#ffdc57;--yellow-light:#fff2b0;--mint:#d3ebd7;--pink:#f7d5cf;--blue:#dbe9f5;--line:#dedbc9;--shadow:4px 4px 0 var(--ink);font-family:BeVietnam,system-ui,sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background-color:#fbf9ed;background-image:radial-gradient(ellipse at 15% 0%,#ffe79555,transparent 45%),radial-gradient(ellipse at 95% 80%,#d7e8f544,transparent 40%),linear-gradient(#c5c1a426 1px,transparent 1px),linear-gradient(90deg,#c5c1a426 1px,transparent 1px);background-size:auto,auto,22px 22px,22px 22px;min-height:100dvh;font-size:14px;line-height:1.65}
button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #377795;outline-offset:4px}button{border:none;background:none}h1,h2,h3,h4,p{margin:0}h1,h2,h3,.hand{font-family:Mali,system-ui,sans-serif;font-weight:600;line-height:1.35}h1{font-size:clamp(29px,3.4vw,43px);letter-spacing:-1.1px}h2{font-size:24px}h3{font-size:20px}p+p{margin-top:10px}svg{width:20px;height:20px;flex-shrink:0;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}button svg,a svg{pointer-events:none}.muted{color:var(--muted)}.tiny{font-size:12px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:grid;gap:18px}.hidden{display:none!important}.yellow{background:var(--yellow-light)}.mint{background:var(--mint)}.pink{background:var(--pink)}.blue{background:var(--blue)}
.topbar{background:var(--yellow);border-bottom:2px solid var(--ink);min-height:78px;position:relative;z-index:10}.topbar-inner{max-width:1320px;padding:16px 34px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{text-decoration:none;display:flex;align-items:center;gap:12px}.brand-name{font-family:Mali,system-ui;font-size:26px;font-weight:600;white-space:nowrap}.brand-icon{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--paper);border:2px solid var(--ink);border-radius:11px;box-shadow:2px 2px var(--ink);font:600 25px Mali,system-ui;transform:rotate(-7deg)}.brand-tag{background:var(--ink);color:var(--yellow);border-radius:5px;padding:3px 8px;font-size:10px;letter-spacing:1.5px;white-space:nowrap}.header-note{font-family:Mali;font-size:15px}.user-name{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar{display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;background:#fff4c4;font-weight:600}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;border-radius:8px}.icon-button:hover{background:#00000009}.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:11px 18px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:3px 3px var(--ink);font-weight:600;font-size:13px;text-decoration:none;transition:transform .12s,box-shadow .12s}.btn:not(:disabled):active{transform:translate(2px,2px);box-shadow:1px 1px var(--ink)}.btn:not(:disabled):hover{background:#f2efdf}.btn.primary{background:var(--yellow)}.btn.primary:not(:disabled):hover{background:#ffd333}.btn.soft{box-shadow:none;border-color:var(--line);background:transparent}.btn.danger{background:var(--pink)}.btn.small{padding:7px 12px;min-height:36px;font-size:12px}.btn.block{width:100%}.link-button{font-size:13px;padding:5px 0;text-decoration:underline;text-underline-offset:4px}.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ink);border-radius:30px;padding:3px 10px;font-size:11px;font-weight:600;background:var(--paper)}.pill svg{width:13px;height:13px}
.layout{display:grid;grid-template-columns:208px minmax(0,1fr);gap:40px;max-width:1280px;margin:0 auto;padding:36px 34px 60px}.sidebar{padding-top:10px;display:flex;flex-direction:column;gap:25px;align-self:start;position:sticky;top:22px}.sidebar .eyebrow{color:#898776;margin:0 0 12px 14px}.nav-list{display:grid;gap:7px}.nav-link{display:flex;align-items:center;gap:11px;text-decoration:none;padding:12px 14px;border:1.5px solid transparent;border-radius:8px;font-size:13px}.nav-link.active{background:var(--yellow);border-color:var(--ink);box-shadow:3px 3px var(--ink);font-weight:600}.nav-link:not(.active):hover{background:#eee9d7}.nav-count{margin-left:auto;font-size:11px;background:#ffffffaa;min-width:22px;text-align:center;border-radius:5px;padding:1px 5px}.sidebar-tip{margin:10px 4px 0;padding:18px 14px;background:#fff5c8;border:1px dashed #c6b667;border-radius:10px;transform:rotate(-2deg)}.sidebar-tip .hand{font-size:17px;margin:8px 0}.sidebar-tip p{font-size:12px;color:#77705a}.sidebar-footer{font-size:10px;color:#999583;margin:0 14px}.mobile-menu{display:none}.main{min-width:0}.page-head{margin-bottom:24px}.page-head h1{font-size:32px;margin:4px 0 8px}.page-head .eyebrow{color:var(--muted)}.hero{display:grid;grid-template-columns:1fr 215px;gap:20px;align-items:center;padding:15px 0 30px}.hello{font-size:13px;color:#76715a;margin-bottom:13px}.hero h1{line-height:1.5;margin-bottom:14px}.highlight{background:var(--yellow);box-shadow:4px 4px var(--ink);border:2px solid var(--ink);border-radius:6px;display:inline-block;padding:0 9px;transform:rotate(-1deg)}.hero p{font-size:13px;max-width:425px;color:#777261;line-height:1.9}.hero-art{position:relative;padding:26px 14px 15px 0}.flashcard{padding:21px 20px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:5px 5px var(--ink);transform:rotate(6deg);position:relative;z-index:1;text-align:center}.flashcard:before{content:'';position:absolute;inset:8px -9px -9px 8px;background:var(--mint);border:2px solid var(--ink);border-radius:12px;z-index:-1}.flashcard-content{background:var(--paper);margin:-10px;padding:10px}.flashcard .hand{font-size:20px;margin:10px 0}.flashcard .large-icon{width:42px;height:42px}.sticker{position:absolute;right:0;top:6px;border:1.5px solid var(--ink);border-radius:6px;background:var(--pink);padding:3px 10px;font:600 12px Mali;transform:rotate(10deg);z-index:2}.spark{position:absolute;left:-10px;top:25px;font-size:30px}.art-caption{margin:20px 0 0;text-align:center;font:600 12px Mali;color:var(--muted);transform:rotate(-4deg)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}.stat{border:1.5px solid var(--ink);border-radius:10px;background:var(--paper);padding:18px 17px;box-shadow:3px 3px var(--ink);display:flex;gap:13px;align-items:center}.stat-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:10px;flex-shrink:0}.stat strong{display:block;font-family:Mali;font-size:27px;line-height:1.3}.stat p{font-size:11px;color:var(--muted);margin-top:4px}.section-heading{margin:0 0 20px}.section-heading h2{font-size:23px}.section-heading p{font-size:12px;margin-top:5px;color:var(--muted)}.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:22px}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{font-size:12px;padding:9px 12px;border:1px solid transparent;border-radius:6px}.tab.active{background:var(--ink);color:var(--paper)}.tab:not(.active):hover{background:#efead9}.search{position:relative;flex:1;max-width:260px}.search svg{position:absolute;left:12px;top:12px;width:17px;color:var(--muted)}.search input{padding:10px 12px 10px 36px;font-size:12px;background:var(--paper);border:1.5px solid #c9c5b4;box-shadow:none;border-radius:7px;min-height:42px}
.deck-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.deck-card{background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}.deck-top{display:flex;align-items:center;justify-content:space-between;padding:16px 19px;border-bottom:1.5px solid var(--ink)}.deck-symbol{width:38px;height:38px;display:grid;place-items:center;background:#ffffff70;border:1.5px solid var(--ink);border-radius:8px;transform:rotate(-5deg)}.deck-body{padding:21px;display:flex;flex-direction:column;flex:1}.deck-body h3{font-size:21px;margin-bottom:8px;overflow-wrap:anywhere}.deck-description{color:var(--muted);font-size:12px;line-height:1.9;min-height:44px;margin-bottom:22px;overflow-wrap:anywhere}.deck-progress-label{font-size:11px;display:flex;justify-content:space-between;margin-bottom:9px;gap:5px}.deck-progress-label strong{font-weight:600}.progress{display:block;appearance:none;width:100%;height:10px;border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:#eeecdf}.progress::-webkit-progress-bar{background:#eeecdf}.progress::-webkit-progress-value{background:var(--yellow);border-right:1px solid var(--ink)}.progress::-moz-progress-bar{background:var(--yellow)}.deck-progress{margin-top:auto}.deck-bottom{display:flex;gap:10px;align-items:center;margin-top:21px}.deck-bottom .btn{flex:1}.bookmark-count{min-width:39px;display:flex;gap:4px;align-items:center;justify-content:center;font-size:11px}.bookmark-count svg{width:16px}.empty{border:2px dashed #c6bfa7;border-radius:13px;background:#fffdf2c9;padding:48px 25px;text-align:center;grid-column:1/-1}.empty-icon{width:66px;height:66px;margin:0 auto 18px;background:var(--yellow-light);border:2px solid var(--ink);border-radius:18px;box-shadow:3px 3px var(--ink);display:grid;place-items:center;transform:rotate(-6deg)}.empty-icon svg{width:29px;height:29px}.empty h3{margin-bottom:10px}.empty p{max-width:410px;margin:0 auto 22px;color:var(--muted);font-size:13px}.footnote{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:34px;color:#8b8573;font-size:11px}.footnote svg{width:14px;height:14px}.panel{background:var(--paper);border:2px solid var(--ink);border-radius:13px;box-shadow:var(--shadow);padding:28px}.panel h2{margin-bottom:8px}.panel h3{margin-bottom:14px}.notice{background:#fff2c2;border:1px solid #ddcb78;border-radius:9px;padding:14px 16px;font-size:12px;line-height:1.8}.notice.success{background:#e2f2de;border-color:#a4c697}.notice.error{background:#ffebe5;border-color:#dd9c8a;color:#873b2c}.notice svg{width:16px}.notice ul{padding-left:20px;margin:9px 0 0}.form-grid{display:grid;gap:19px}.field{display:grid;gap:8px;font-size:13px;font-weight:600}.field small{font-weight:400;color:var(--muted);font-size:11px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}input,textarea,select{width:100%;border:1.5px solid var(--ink);border-radius:7px;padding:12px 14px;min-height:46px;background:#fffef9;font-size:14px}textarea{resize:vertical;line-height:1.8;min-height:120px}input::placeholder,textarea::placeholder{color:#a3a093}input[type=file]{font-size:12px;border:1px dashed #a9a28c;background:#fff9dd;padding:17px;max-width:100%}input[type=file]::file-selector-button{border:1px solid var(--ink);border-radius:5px;background:var(--yellow);padding:8px 12px;margin-right:12px;cursor:pointer}input[type=search]::-webkit-search-cancel-button{cursor:pointer}.password-wrap{position:relative}.password-wrap input{padding-right:65px}.password-toggle{position:absolute;right:8px;top:7px;padding:5px 9px;font-size:11px;border:1px solid #dad5c5;border-radius:5px;min-height:32px}.form-error:empty{display:none}.form-error{color:#a12e21;background:#ffebe5;border:1px solid #e5b1a4;padding:12px;border-radius:7px;font-size:12px}.auth-layout{max-width:1020px;margin:0 auto;padding:70px 35px;display:grid;grid-template-columns:1fr 440px;align-items:center;gap:80px;min-height:calc(100dvh - 78px)}.auth-copy h1{line-height:1.55;font-size:43px;margin:17px 0 24px}.auth-copy p{color:var(--muted);font-size:14px;line-height:1.9}.auth-note{font-family:Mali;color:#716c57;margin-top:35px;display:flex;gap:10px;align-items:center;transform:rotate(-3deg)}.auth-panel{padding:32px;position:relative}.auth-panel .tape{position:absolute;top:-14px;left:calc(50% - 42px);width:84px;height:27px;background:#f8d97199;border:1px solid #cfb55477;transform:rotate(-5deg)}.auth-panel h2{font-size:29px;margin:4px 0 7px}.auth-panel .intro{font-size:12px;color:var(--muted);margin-bottom:25px}.auth-bottom{text-align:center;font-size:12px;color:var(--muted);margin-top:22px}.auth-bottom button{font-weight:600;color:var(--ink)}.auth-panel .btn.primary{min-height:49px;font-family:Mali;font-size:17px}.auth-footnote{font-size:10px;color:#87816d;text-align:center;margin-top:20px}.import-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:23px}.format-card{align-self:start;background:#fff5cd;border:1.5px solid var(--ink);border-radius:11px;padding:22px;box-shadow:3px 3px var(--ink)}.format-card h3{font-size:18px}.format-card pre{white-space:pre-wrap;font:11px/1.9 BeVietnam,system-ui;margin:18px 0;padding:13px;background:#fffdf599;border:1px dashed #bcad6e;border-radius:7px}.format-card p{font-size:11px;line-height:1.9;color:#756a49}.import-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.preview-question{padding:15px 0;border-bottom:1px dashed var(--line)}.preview-question:last-child{border-bottom:0}.preview-question p{font-size:12px;margin-top:5px}.preview-question strong{font-size:13px}.preview-answers{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px;font-size:11px}.preview-correct{font-weight:600;color:#387344}.color-options{display:flex;gap:10px}.color-option{width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center}.color-option.selected{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}.color-option svg{width:17px}.modal{max-width:520px;width:calc(100% - 36px);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:14px;box-shadow:7px 7px var(--ink);padding:28px;max-height:85dvh;overflow-y:auto}.modal::backdrop{background:#23231c66;backdrop-filter:blur(3px)}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.modal-header h2{font-size:23px}.modal p{font-size:13px;color:var(--muted);margin-bottom:20px}.mode-list{display:grid;gap:13px}.mode-button{display:flex;align-items:center;gap:13px;text-align:left;border:1.5px solid var(--ink);border-radius:9px;padding:15px 17px;box-shadow:3px 3px var(--ink)}.mode-button strong{font-size:14px;display:block}.mode-button small{font-size:11px;display:block;margin-top:4px}.mode-button>.mode-total{margin-left:auto;font:600 24px Mali}.mode-button:not(:disabled):hover{transform:translate(-1px,-1px)}
.study-wrap{max-width:810px;margin:auto;padding:33px 24px 70px}.study-crumb{font-size:12px;display:flex;align-items:center;gap:9px;margin-bottom:23px;color:var(--muted)}.study-crumb button{display:flex;align-items:center;gap:7px;padding:6px 0;flex-shrink:0}.study-crumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.study-meta{margin-bottom:15px;font-size:12px}.study-progress{margin-bottom:24px;height:9px}.question-card{padding:32px}.question-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;gap:12px}.question-top .pill{font-size:11px;padding:5px 10px}.bookmark-button{font-size:11px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:6px;padding:8px 10px;min-height:40px}.bookmark-button.on{background:var(--yellow-light);border-color:var(--ink)}.bookmark-button.on svg{fill:var(--yellow)}.question-body{font-family:BeVietnam,system-ui;font-size:21px;font-weight:600;line-height:1.75;margin-bottom:28px;white-space:pre-wrap;overflow-wrap:anywhere}.answers{display:grid;gap:13px}.answer{width:100%;display:flex;align-items:center;text-align:left;gap:14px;padding:15px 17px;border:1.5px solid #c7c3b3;border-radius:9px;background:#fffefb;transition:background .12s,border-color .12s;line-height:1.65}.answer:disabled{opacity:1;cursor:default}.answer:not(:disabled):hover{border-color:var(--ink);background:#fff9dd}.answer.selected{border:2px solid var(--ink);background:var(--yellow-light);box-shadow:3px 3px var(--ink)}.answer.correct{background:#dcefd9;border:2px solid #457245;box-shadow:none}.answer.wrong{background:#fbe3de;border:2px solid #aa4e3e;box-shadow:none}.answer-key{width:32px;height:32px;border:1px solid #d2cdbb;border-radius:7px;background:var(--paper);display:grid;place-items:center;flex-shrink:0;font-size:13px;font-weight:600}.answer-text{flex:1;font-size:14px;overflow-wrap:anywhere}.answer.selected .answer-key{background:var(--yellow);border-color:var(--ink)}.answer-status{font-size:11px;white-space:nowrap;display:flex;gap:5px;align-items:center}.answer-status svg{width:17px}.streak{display:flex;align-items:center;gap:6px}.streak-dot{width:13px;height:13px;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}.streak-dot.filled{background:var(--yellow)}.streak span:last-child{font-size:11px;color:var(--muted);margin-left:4px}.question-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px}.result-feedback{padding:18px 20px;border:1px solid #a7c69d;border-radius:9px;background:#ecf6e9;margin-top:23px}.result-feedback.wrong{background:#fff0e9;border-color:#d8b19e}.result-feedback h3{font-size:18px;margin-bottom:8px}.result-feedback p{font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}.result-feedback .status-note{font-weight:600;margin-top:10px;font-size:11px}.keyboard-hint{font-size:11px;color:var(--muted);text-align:center;margin-top:24px}.keyboard-hint kbd{font:10px BeVietnam;border:1px solid #cbc5ae;background:var(--paper);padding:2px 5px;border-radius:4px;margin:0 2px}.finish{text-align:center;padding:45px 32px}.finish-icon{display:grid;place-items:center;width:85px;height:85px;border:2px solid var(--ink);border-radius:24px;background:var(--yellow);box-shadow:4px 4px var(--ink);margin:0 auto 25px;transform:rotate(-5deg)}.finish-icon svg{width:42px;height:42px}.finish h1{font-size:30px;margin-bottom:12px}.finish>p{color:var(--muted);font-size:13px}.finish-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.finish-stat{padding:18px 10px;border:1px solid var(--ink);border-radius:9px}.finish-stat strong{display:block;font:600 27px Mali}.finish-stat span{font-size:11px}.finish-actions{display:flex;justify-content:center;gap:13px;margin-top:25px}.user-list{display:grid;gap:12px}.user-row{display:flex;align-items:center;gap:12px;border-bottom:1px dashed var(--line);padding:13px 0}.user-row:last-child{border-bottom:0}.user-row .pill{margin-left:auto}.user-row strong{font-size:13px;overflow-wrap:anywhere}.user-row p{font-size:11px;color:var(--muted)}.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.account-avatar{width:65px;height:65px;font-size:24px;margin-bottom:18px;background:var(--yellow-light)}.boot{min-height:80dvh;display:grid;align-content:center;justify-items:center;gap:20px}.boot p{color:var(--muted);font-family:Mali}.loading{padding:55px;text-align:center;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:10px;font-size:12px;z-index:100;box-shadow:0 4px 20px #0002;opacity:0;pointer-events:none;transition:opacity .15s}#toast.show{opacity:1}.skip-link{position:fixed;top:-60px;left:15px;background:var(--paper);padding:10px 20px;z-index:200}.skip-link:focus{top:10px}.noscript{margin:50px;text-align:center}.error-page{max-width:600px;margin:60px auto;padding:30px}.error-page p{margin:15px 0 22px}
@media(min-width:1400px){.layout{gap:48px;padding-top:45px}.hero{padding-bottom:38px}.hero h1{font-size:46px}.deck-grid{gap:25px}.stats{margin-bottom:40px}}
@media(max-width:1050px){.layout{grid-template-columns:178px minmax(0,1fr);gap:25px;padding:27px 24px 45px}.topbar-inner{padding:15px 24px}.hero{grid-template-columns:1fr 175px}.hero h1{font-size:34px}.stat{padding:14px 12px;gap:9px}.stat-icon{width:34px;height:34px}.stat strong{font-size:23px}.stat p{font-size:10px}.import-layout{grid-template-columns:1fr}.format-card{order:-1}.format-card pre{margin:12px 0}.auth-layout{gap:40px;grid-template-columns:1fr 400px}.auth-copy h1{font-size:35px}.nav-link{padding:11px 10px;font-size:12px}}
@media(max-width:760px){.topbar{min-height:69px}.topbar-inner{padding:14px 20px}.brand-name{font-size:23px}.brand-tag{font-size:8px;padding:3px 6px;letter-spacing:1px}.brand{gap:9px}.brand-icon{width:32px;height:32px;font-size:23px}.header-note,.user-name{display:none}.header-user{gap:6px}.header-user .avatar{width:30px;height:30px;font-size:12px}.layout{display:block;padding:20px 20px 45px}.sidebar{position:static;padding:0;gap:0;margin-bottom:23px}.mobile-menu{display:flex;align-items:center;justify-content:space-between;background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px var(--ink);border-radius:9px;padding:12px 15px;width:100%;font-family:Mali;font-size:15px;font-weight:600}.sidebar-body{display:none;margin-top:15px;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;padding:15px}.sidebar.open .sidebar-body{display:block}.sidebar-section+.sidebar-section{margin-top:20px}.sidebar-tip,.sidebar-footer{display:none}.sidebar .eyebrow{margin-top:10px}.hero{padding:7px 0 27px;grid-template-columns:1fr 160px;gap:8px}.hero h1{font-size:32px}.hero p{font-size:12px}.hello{font-size:12px}.hero-art{padding-right:10px}.flashcard{padding:14px 12px}.flashcard .hand{font-size:17px}.flashcard .large-icon{width:32px;height:32px}.sticker{font-size:10px}.stats{gap:12px;margin-bottom:29px}.stat{display:block;padding:14px 12px;position:relative}.stat-icon{position:absolute;right:9px;top:12px;width:26px;height:26px;border-radius:7px}.stat-icon svg{width:14px;height:14px}.stat strong{font-size:25px}.stat p{margin-top:8px;font-size:10px}.section-heading h2{font-size:22px}.section-heading .btn{font-size:11px;padding:8px 11px;min-height:39px}.toolbar{align-items:stretch;flex-direction:column;gap:12px}.search{max-width:none}.tabs{gap:4px}.tab{font-size:11px;padding:8px 11px}.deck-grid{gap:18px}.deck-body{padding:18px}.deck-body h3{font-size:19px}.deck-top{padding:12px 17px}.auth-layout{display:block;min-height:calc(100dvh - 69px);max-width:470px;padding:55px 24px}.auth-copy{display:none}.auth-panel{padding:30px 25px}.auth-panel h2{font-size:28px}.account-grid{grid-template-columns:1fr}.page-head h1{font-size:28px}.panel{padding:23px}.question-card{padding:24px}.study-wrap{padding:22px 20px 50px}.question-body{font-size:19px}.answer{padding:13px}.answer-text{font-size:13px}.keyboard-hint{display:none}.study-crumb{margin-bottom:15px}.question-top{margin-bottom:22px}.import-layout{gap:20px}.format-card{padding:18px}.field-row{grid-template-columns:1fr}}
@media(max-width:480px){.hero{grid-template-columns:1fr}.hero-art{display:none}.hero h1{font-size:37px}.hero p{max-width:310px}.hero{padding:9px 0 25px}.stats{gap:10px}.stat{padding:14px 10px}.stat-icon{position:static;width:26px;height:26px;margin-bottom:9px}.stat strong{font-size:26px}.stat p{font-size:10px}.deck-grid{grid-template-columns:1fr}.deck-description{min-height:0}.section-heading{align-items:flex-start;gap:10px}.section-heading p{font-size:11px}.section-heading .btn svg{width:15px}.section-heading h2{font-size:21px}.topbar-inner{padding:13px 17px}.header-user>.icon-button{min-width:34px}.brand-tag{display:none}.question-footer{align-items:stretch;flex-direction:column}.question-footer>.streak{justify-content:center}.question-footer .btn{width:100%}.question-body{font-size:17px;margin-bottom:23px}.answer-status{font-size:0;gap:0}.question-card{padding:21px 17px}.question-top .pill{font-size:10px}.bookmark-button{font-size:10px}.question-top{gap:6px}.finish{padding:35px 19px}.finish-actions{flex-direction:column}.finish-stats{gap:8px}.finish-stat span{font-size:10px}.finish h1{font-size:27px}.modal{padding:23px}.import-actions .btn{width:100%}.preview-answers{grid-template-columns:1fr}.user-row{gap:8px}.user-row .pill{font-size:9px}.footnote{font-size:10px}.auth-layout{padding:50px 22px}.auth-panel{padding:28px 23px}.auth-panel .field{font-size:13px}.page-head h1{font-size:28px}}
.sidebar-section+.sidebar-section{margin-top:24px}.flashcard-content>.streak{justify-content:center}.section-heading>.btn{flex-shrink:0;white-space:nowrap}.user-row>div{min-width:0}.user-row>.avatar,.user-row>.pill{flex-shrink:0}
@media(max-width:480px){.section-heading{flex-wrap:wrap}.section-heading>.btn{margin-top:3px}.user-row>.pill{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
.mode-list+p{margin:22px 0 0;line-height:1.7}
.online-button{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;min-height:36px;border:1.5px solid var(--ink);border-radius:24px;background:var(--paper);font-size:11px;white-space:nowrap}.online-button:hover{background:var(--mint)}.online-dot{display:inline-block;width:8px;height:8px;background:#4b8953;border:1px solid #315d36;border-radius:50%;flex-shrink:0}.online-members{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0 22px}.online-member{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#edf5e8;border:1px solid #9fbf96;border-radius:9px;font-size:13px}.online-member small{color:var(--muted)}@media(max-width:480px){.online-button{padding:7px 8px;font-size:10px}.header-user{gap:5px}}
.exam-board{border:2px solid var(--ink);border-radius:14px;box-shadow:5px 5px var(--ink);background:#fff9df;overflow:hidden;margin-bottom:32px}.exam-board-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#ffd76b;padding:12px 22px;border-bottom:1.5px solid var(--ink)}.exam-board-heading .eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.3px}.exam-timezone{font-size:10px;white-space:nowrap}.exam-board-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.exam-feature{padding:22px 24px;background:linear-gradient(130deg,#fff0b5,#fff9e4);border-right:1.5px solid var(--ink)}.exam-label{display:inline-block;font-size:10px;font-weight:600;background:var(--ink);color:#fff5cb;padding:3px 9px;border-radius:4px;margin-bottom:9px;letter-spacing:.5px}.exam-feature h2{font-size:29px;line-height:1.45;overflow-wrap:anywhere;margin-bottom:7px}.exam-date{font-size:12px;font-weight:600;margin:5px 0;color:#645839}.exam-note{font-size:12px;color:#7c7055;line-height:1.7;overflow-wrap:anywhere;white-space:pre-wrap;margin:6px 0 13px}.exam-countdown{margin-top:16px}.countdown-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.countdown-unit{background:var(--paper);border:1.5px solid var(--ink);box-shadow:2px 2px var(--ink);border-radius:8px;padding:9px 5px 7px;text-align:center}.countdown-unit strong{display:block;font-family:Mali,system-ui;font-size:31px;line-height:1.25;font-variant-numeric:tabular-nums}.countdown-unit span{font-size:10px;color:#80755f}.exam-next{padding:21px 23px;display:flex;flex-direction:column;gap:13px;min-width:0}.exam-next h3{font-size:16px}.exam-next>.row>svg{width:16px}.exam-mini{padding-bottom:12px;border-bottom:1px dashed #cfc198}.exam-mini h4{font-size:13px;font-weight:600;overflow-wrap:anywhere}.exam-mini p{font-size:10px;color:#847451;margin-top:3px}.exam-mini .exam-countdown{margin-top:7px}.compact .countdown-digits{display:flex;gap:8px;flex-wrap:wrap}.compact .countdown-unit{display:flex;align-items:baseline;gap:3px;border:0;box-shadow:none;padding:0;background:none}.compact .countdown-unit strong{font:600 15px BeVietnam,system-ui;font-variant-numeric:tabular-nums}.compact .countdown-unit span{font-size:10px}.exam-all{font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;margin-top:auto;padding:0;min-height:30px}.exam-all:hover{text-decoration:underline}.exam-all svg{width:16px}.exam-board-footer{padding:9px 22px;font-size:10px;color:#7b6b46;border-top:1px dashed #cbbc91;display:flex;justify-content:space-between;gap:12px;background:#fff9e7}.exam-board-footer a{font-weight:600;color:var(--ink);white-space:nowrap}.exam-encouragement{font-size:21px;line-height:1.8;color:#71613b}.exam-started{display:flex;align-items:center;gap:7px;background:#dcecd5;border:1px solid #a8bc9e;border-radius:7px;padding:9px 10px;font-size:11px;font-weight:600;margin-top:10px}.exam-started svg{width:17px}.is-started .countdown-digits{opacity:.65}.exam-empty{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;background:#fff7d8;border:1px dashed #c5b777;border-radius:8px;font-size:12px;color:#807351;margin-bottom:22px}.exam-empty>span{display:flex;align-items:center;gap:8px}.exam-empty svg{width:16px}.exam-empty a{white-space:nowrap;font-size:12px}.exam-admin-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:24px}.exam-admin-card h3{margin:14px 0 5px;overflow-wrap:anywhere}.exam-admin-card>.row:last-child{margin-top:22px}.exam-modal-list{display:grid;gap:15px}.exam-list-card{padding:17px;background:#fff7d8;border:1px solid var(--ink);border-radius:9px}.exam-list-card h3{font-size:19px;overflow-wrap:anywhere}.modal .exam-list-card p{margin:6px 0}.auth-layout{padding-top:32px;row-gap:30px;align-content:start}.auth-exams{grid-column:1/-1;min-width:0}.auth-exams .exam-board,.auth-exams .exam-empty{margin-bottom:0}
@media(max-width:1050px){.exam-board-heading{padding:12px 16px}.exam-feature{padding:18px}.exam-feature h2{font-size:25px}.exam-next{padding:18px}.countdown-unit strong{font-size:26px}.countdown-digits{gap:7px}.exam-timezone{font-size:9px}.exam-next h3{font-size:14px}.exam-board-footer{padding:9px 15px}}
@media(max-width:760px){.auth-exams{margin-bottom:35px}.auth-layout{max-width:580px;padding-top:25px}.exam-board{margin-bottom:28px}.exam-board-grid{grid-template-columns:1fr}.exam-feature{border-right:0;border-bottom:1px solid var(--ink);padding:20px}.exam-feature h2{font-size:28px}.exam-next{padding:17px 20px;gap:11px}.exam-next .exam-encouragement{font-size:17px;line-height:1.5}.countdown-unit strong{font-size:32px}.exam-board-heading{padding:11px 16px}.exam-board-heading .eyebrow{font-size:10px;letter-spacing:.8px}.exam-timezone{font-size:9px}.exam-board-footer{font-size:9px;flex-wrap:wrap}.exam-admin-list{grid-template-columns:1fr}.exam-mini{display:flex;justify-content:space-between;align-items:center;gap:12px}.exam-mini .compact .countdown-digits{display:grid;grid-template-columns:1fr 1fr;gap:2px 7px}.exam-mini .compact .countdown-unit strong{font-size:12px}.exam-mini .compact .countdown-unit span{font-size:9px}.exam-mini .exam-countdown{flex-shrink:0;margin-top:0}.exam-empty{align-items:flex-start;flex-direction:column;font-size:11px}}
@media(max-width:380px){.exam-timezone{display:none}.exam-feature{padding:16px}.exam-next{padding:16px}.countdown-unit strong{font-size:26px}.countdown-digits{gap:6px}.exam-feature h2{font-size:24px}.exam-mini{align-items:flex-start;flex-direction:column;gap:6px}.exam-mini .compact .countdown-digits{display:flex}.exam-board-footer>span:last-child{display:none}}
.auth-layout.has-exams{max-width:1160px;grid-template-columns:minmax(0,1fr) 420px;gap:36px;padding-top:42px;align-items:start}.auth-layout.has-exams .auth-copy{display:none}.auth-layout.has-exams .auth-exams{grid-column:auto}.auth-layout.has-exams .exam-board-grid{grid-template-columns:1fr}.auth-layout.has-exams .exam-feature{border-right:0;border-bottom:1px solid var(--ink)}.auth-layout.has-exams .exam-next{gap:10px}.auth-layout.has-exams .exam-encouragement{font-size:18px}.auth-layout.has-exams .exam-board-footer{flex-wrap:wrap}
.ranking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.ranking-panel{padding:25px}.ranking-title{display:flex;gap:13px;align-items:center;padding-bottom:18px;border-bottom:1px dashed var(--line)}.ranking-title h2{font-size:20px}.ranking-title p{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.55}.ranking-list{display:grid}.ranking-row{display:grid;grid-template-columns:35px 37px minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px 7px;border-bottom:1px dashed var(--line)}.ranking-row.is-you{background:#fff7d3;border-radius:8px}.rank-number{text-align:center;font-weight:600}.ranking-row .avatar{width:35px;height:35px}.ranking-name{min-width:0}.ranking-name strong{display:block;font-size:13px;overflow-wrap:anywhere}.ranking-name small{display:inline-block;font-size:9px;background:var(--yellow);padding:1px 6px;border-radius:8px}.ranking-score{text-align:right}.ranking-score strong,.ranking-score span{display:block}.ranking-score strong{font-size:12px}.ranking-score span{font-size:10px;color:var(--muted);margin-top:3px}.ranking-note{margin-top:18px}.ranking-empty{padding:35px 10px}
@media(max-width:900px){.ranking-grid{grid-template-columns:1fr}}
@media(max-width:480px){.ranking-panel{padding:18px 13px}.ranking-row{grid-template-columns:29px 32px minmax(0,1fr) auto;gap:7px}.ranking-row .avatar{width:32px;height:32px}.ranking-score strong{font-size:11px}.ranking-score span{font-size:9px}}
@media(max-width:900px){.auth-layout.has-exams{grid-template-columns:minmax(0,1fr) 360px;gap:25px;padding-left:25px;padding-right:25px}}
@media(max-width:760px){.auth-layout.has-exams{max-width:580px;display:block;padding:25px 22px 45px}.exam-next.single>.row,.exam-next.single>.exam-encouragement,.exam-next.single>.tiny{display:none}.exam-next.single{padding-top:10px;padding-bottom:10px}}
.subject-study{margin-left:auto}.edit-deck-button{flex:0 0 auto!important;box-shadow:none}.subject-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border:1px dashed var(--line);border-radius:9px;background:#fffdf4}@media(max-width:760px){.subject-picker{grid-template-columns:1fr}.subject-study{margin-left:auto;font-size:10px;padding:7px 9px}}
.subject-group{margin-bottom:30px}.subject-heading{display:flex;align-items:center;gap:13px;border:1.5px solid var(--ink);border-radius:11px 11px 0 0;padding:13px 18px;margin-bottom:14px}.subject-heading h3{font-size:18px;margin:0}.subject-heading p{font-size:11px;color:var(--muted);margin-top:2px}.subject-folder{display:grid;place-items:center;width:38px;height:34px;border:1.5px solid var(--ink);border-radius:6px;background:#fffef9;box-shadow:2px 2px var(--ink)}.subject-folder svg{width:18px}.continue-section{margin:0 0 38px;padding:22px;border:1.5px dashed #a99c68;border-radius:14px;background:#fff8d8}.continue-section .section-heading{margin-bottom:16px}.continue-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.continue-strip .deck-description{display:none}.continue-strip .deck-body{padding:17px}.continue-strip .deck-body h3{font-size:18px}.round-size{border:1px dashed var(--line);border-radius:10px;padding:13px;margin:0 0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.round-size legend{font-size:12px;font-weight:600;padding:0 6px}.round-size label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fffef8;font-size:12px}.round-size input[type=radio]{width:auto;min-height:0;accent-color:var(--ink)}.round-size label>span{min-width:0}.round-size strong,.round-size small{display:block}.round-size small{font-size:9px;color:var(--muted);line-height:1.4;margin-top:3px}.round-size input[type=number]{width:70px;min-height:34px;padding:5px 7px;margin-left:auto}@media(max-width:760px){.continue-strip{grid-template-columns:1fr}.round-size{grid-template-columns:1fr}.subject-heading{padding:11px 14px}}

.subject-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.subject-footer .btn[aria-expanded=true] svg{transform:rotate(180deg)}.subject-heading>div{min-width:0}.subject-heading h3{overflow-wrap:anywhere}.subject-group .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:760px){.subject-heading{flex-wrap:wrap}.subject-group .deck-grid{grid-template-columns:1fr}.subject-study{max-width:100%}}
@media(max-width:760px),(max-height:500px) and (max-width:950px){.study-wrap:has(.question-card){padding:18px 16px calc(125px + env(safe-area-inset-bottom))}.study-crumb{margin-bottom:12px}.study-meta{margin-bottom:10px}.study-progress{margin-bottom:16px}.question-card{padding:20px 16px}.question-top{margin-bottom:16px}.question-top>.eyebrow{display:none}.question-top .bookmark-button{margin-left:auto}.question-body{font-size:17px;line-height:1.65;margin-bottom:18px}.answers{gap:10px}.answer{padding:12px 10px;gap:10px}.answer-text{font-size:14px}.result-feedback{margin-top:16px;padding:14px}.result-feedback h3{font-size:16px}.question-footer{position:fixed;z-index:30;left:0;right:0;bottom:0;margin:0;min-height:78px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--ink);box-shadow:0 -3px 12px #24241f12;flex-direction:row;align-items:center;gap:12px}.question-footer>.streak{flex:0 0 96px;flex-wrap:wrap;justify-content:center;gap:5px}.question-footer>.streak span:last-child{flex-basis:100%;margin:0;text-align:center;font-size:10px}.question-footer>.btn{flex:1;min-width:0;width:auto;max-width:260px;min-height:46px;padding:10px 12px;font-size:13px;box-shadow:2px 2px var(--ink)}.study-wrap .footnote{margin-top:20px}.study-wrap #study-error{margin-top:16px}.keyboard-hint{display:none}}
.question-heading{display:flow-root}.question-heading .question-body{min-width:0}.bookmark-star{float:right;margin-left:10px;margin-bottom:6px;width:44px;height:44px;min-height:44px;padding:10px;justify-content:center;border-color:var(--line);background:var(--paper)}.bookmark-star svg{width:22px;height:22px;fill:none}.bookmark-star.on{background:var(--yellow-light);border-color:var(--ink)}.bookmark-star.on svg{fill:var(--yellow);stroke:var(--ink)}.study-online{display:flex;justify-content:flex-start;margin-top:20px}@media(max-width:760px),(max-height:500px) and (max-width:950px){.question-heading{gap:8px}.study-wrap:has(.question-card){padding-top:12px}.study-online{margin-top:16px}}
.answer-pending{font-size:12px;color:var(--muted);margin-top:16px}@media(max-width:760px),(max-height:500px) and (max-width:950px){.study-wrap:has(.question-card):not(.has-result){padding-bottom:calc(28px + env(safe-area-inset-bottom))}}
.explanation-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:7px;background:var(--paper);font-size:11px;padding:5px 8px;min-height:32px;white-space:nowrap}.explanation-toggle[aria-checked=true]{background:var(--yellow-light);border-color:#b9a344}.explanation-toggle svg{width:14px;height:14px}.explanation-body[hidden]{display:none}@media(max-width:380px){.study-meta{gap:6px;font-size:11px}.explanation-toggle{font-size:10px;padding:5px 6px;gap:3px}.study-meta>.pill{font-size:10px;padding:5px 8px}}
.study-controls{display:inline-flex;align-items:center;gap:6px}.study-controls .bookmark-star{float:none;margin:0}.study-controls .explanation-toggle[aria-checked=true] svg{fill:var(--yellow)}@media(max-width:760px),(max-height:500px) and (max-width:950px){.study-controls .explanation-toggle{width:44px;height:44px;min-height:44px;padding:10px;justify-content:center}.study-controls .explanation-toggle svg{width:22px;height:22px}.study-meta{gap:8px}.question-heading .question-body{width:100%}}
.mobile-study-toolbar{display:flex;align-items:center;gap:4px;margin-bottom:8px}.mobile-study-toolbar .study-back,.mobile-study-toolbar .study-round-info{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}.mobile-study-toolbar .study-back{width:44px;flex:0 0 44px}.mobile-study-toolbar .study-back svg{width:20px}.mobile-study-toolbar .study-round-info{flex:1;min-width:0;gap:4px;font-size:13px;padding:6px}.mobile-study-toolbar .study-round-info svg{width:14px}.mobile-study-toolbar .study-controls{gap:4px}.answer-label-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:7px;background:var(--paper);font-size:12px;font-weight:600}.answer-label-toggle[aria-checked=true]{background:var(--yellow-light);border-color:#b9a344}@media(max-width:760px),(max-height:500px) and (max-width:950px){.mobile-study-toolbar+.study-progress{margin-bottom:10px;height:5px}.hide-answer-labels .answer-key{display:none}}
.answer-label-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.2}.answer-label-toggle small{font-size:8px;font-weight:400}.answer-label-toggle[data-visible=true]{background:var(--yellow-light);border-color:#b9a344}
.auto-scroll-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}.auto-scroll-toggle svg{width:22px;height:22px}.auto-scroll-toggle[aria-checked=true]{background:var(--yellow-light);border-color:#b9a344}.mobile-study-toolbar .study-controls{flex-shrink:0}
@media(max-width:760px),(max-height:500px) and (max-width:950px){.study-wrap:has(.finish){padding:18px 16px calc(110px + env(safe-area-inset-bottom))}.finish{padding:25px 18px}.finish-icon{width:56px;height:56px;border-radius:17px;margin-bottom:16px}.finish-icon svg{width:29px;height:29px}.finish h1{font-size:25px;line-height:1.4;margin-bottom:10px}.finish .eyebrow{font-size:10px;overflow-wrap:anywhere}.finish-stats{margin:20px 0 0;gap:8px}.finish-stat{padding:14px 6px}.finish-stat strong{font-size:25px}.finish-stat span{font-size:10px}.finish-actions{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;flex-direction:row;align-items:stretch;gap:10px;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));min-height:78px;background:var(--paper);border-top:2px solid var(--ink);box-shadow:0 -3px 12px #24241f12}.finish-actions .btn{flex:1;min-width:0;min-height:48px;justify-content:center;font-size:12px;padding:9px 10px;box-shadow:2px 2px var(--ink)}.finish-actions .btn.primary{flex:1.2}}

/* Sơ đồ và chỉnh từng câu */
.question-diagram{margin:20px 0;text-align:center}.question-diagram button{display:block;width:100%;padding:0;background:transparent;border:0;cursor:zoom-in}.question-diagram img{display:block;max-width:100%;max-height:480px;height:auto;margin:auto;object-fit:contain}.question-diagram figcaption{font-size:12px;color:var(--muted);margin-top:8px}.image-editor{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;padding:14px;border:1px dashed var(--ink);border-radius:10px}.image-editor .image-preview{display:block;width:100%;max-height:260px;object-fit:contain}.image-editor small,.image-status{width:100%;margin:0}.image-file-label{position:relative;cursor:pointer}.image-file-label input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.image-file-label:focus-within{outline:3px solid var(--ink);outline-offset:3px}.image-paste{width:100%;padding:10px;border:1px dashed var(--ink);border-radius:6px;font-size:13px;cursor:pointer}.image-paste:focus{outline:2px solid var(--ink);background:var(--cream)}.question-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0;font-size:13px}.question-fields{margin:14px 0}.question-fields summary{cursor:pointer;font-weight:600;margin-bottom:10px}.saved-question{padding:20px 0;border-bottom:1px solid var(--ink)}.question-editor-modal{width:min(760px,calc(100vw - 24px));max-width:760px}.image-modal{width:min(1100px,calc(100vw - 24px));max-width:1100px}.diagram-zoom{overflow:auto;max-height:70vh}.diagram-zoom img{display:block;max-width:none}.preview-question{overflow-wrap:anywhere}.preview-question .field input{min-width:0;width:100%}.image-status{font-size:13px;overflow-wrap:anywhere}
@media(max-width:760px){.question-diagram img{max-height:none}.question-editor-modal{padding:16px}.saved-question{padding:14px 0}.question-pager .btn{padding:8px}.image-editor{padding:10px}}

.question-save-status{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}.question-save-status:empty{display:none}

/* Full-deck rankings */
.ranking-tabs{margin-bottom:16px}.ranking-filters{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}.ranking-filters .field{flex:1;min-width:180px}.ranking-progress{margin-bottom:20px;text-align:left}.ranking-progress .row{flex-wrap:wrap}.ranking-progress p{margin:8px 0 14px}.ranking-name{min-width:0;overflow-wrap:anywhere}.ranking-score{flex-shrink:0}
@media(max-width:480px){.ranking-filters{display:grid;grid-template-columns:1fr}.ranking-filters .field{min-width:0}.ranking-row{flex-wrap:wrap}.ranking-score{margin-left:auto;max-width:100%}.ranking-progress .btn{width:100%;justify-content:center}}

@media(max-width:480px){.ranking-row{grid-template-columns:29px 32px minmax(0,1fr)}.ranking-score{grid-column:2 / -1;margin-left:0;text-align:left}}

/* Email password reset uses a centered card, independent of login/exam columns. */
.auth-link-layout{width:100%;max-width:488px;margin:0 auto;padding:48px 24px 72px;min-height:calc(100dvh - 78px)}.auth-link-layout .auth-panel{width:100%;min-width:0}.auth-link-layout h1{font-size:29px;line-height:1.5;margin:16px 0 12px}.auth-link-layout .intro{line-height:1.8;margin-bottom:24px}.auth-link-layout .password-wrap{display:block}.auth-link-layout .password-wrap input{display:block;font-size:16px;min-width:0}.auth-link-layout .password-toggle{top:50%;transform:translateY(-50%)}
@media(max-width:760px){.auth-link-layout{padding:28px 20px 48px;min-height:calc(100dvh - 69px)}}
@media(max-width:480px){.auth-link-layout h1{font-size:26px}}

.password-wrap{display:block}.password-wrap input{display:block}.password-toggle{top:50%;transform:translateY(-50%)}.auth-link-layout .auth-bottom{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}

/* Long names must not expand account columns or member rows. */
.page-head h1,.account-grid h2,.account-grid p{overflow-wrap:anywhere}.account-grid>.panel{min-width:0}.user-row>div{min-width:0;flex:1}.user-row p{overflow-wrap:anywhere}.user-row .avatar,.user-row .pill,.user-row .icon-button{flex-shrink:0}.modal-header h2{min-width:0;overflow-wrap:anywhere}.modal-header .icon-button{flex-shrink:0}

.finish-rankings{display:grid;gap:20px;margin-top:24px;min-width:0}.finish-rankings>.btn{justify-self:center}.finish-rankings .ranking-title{align-items:flex-start}

@media(min-width:960px){.study-wrap.finish-layout{max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}.finish-layout>.finish{min-width:0;padding:34px 24px}.finish-layout>.finish-rankings{margin-top:0}.finish-layout .finish-actions{flex-wrap:wrap}.finish-layout .finish-actions .btn{flex:1;min-width:0}.finish-layout .ranking-row{grid-template-columns:29px 32px minmax(0,1fr);gap:8px}.finish-layout .ranking-score{grid-column:2 / -1;text-align:left}}

.finish-ranking-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}.finish-ranking-tabs .tab{min-width:0;min-height:48px;padding:10px 8px;white-space:normal;line-height:1.5;text-align:center;border:1px solid var(--line);border-radius:9px}.finish-ranking-tabs .tab.active{border-color:var(--ink)}
@media(max-width:480px){.finish-ranking-tabs{gap:6px;margin-bottom:16px}.finish-ranking-tabs .tab{font-size:11px;padding:9px 5px}}

/* Compact result ranking preview; full details open through Xem thêm. */
.finish-rankings .ranking-panel{padding:20px;display:flex;flex-direction:column;min-width:0}.finish-rankings .finish-ranking-tabs{margin-bottom:14px}.finish-rankings .ranking-title{gap:10px;padding-bottom:12px}.finish-rankings .ranking-title h2{font-size:16px}.finish-rankings .ranking-title p{margin-top:3px}.finish-rankings .ranking-title .stat-icon{width:30px;height:30px;flex-shrink:0}.finish-rankings .ranking-row{padding:11px 4px;gap:8px}.finish-rankings .ranking-empty{padding:24px 8px}.finish-rankings .finish-ranking-more{align-self:center;margin-top:16px}.finish-rankings .ranking-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:960px){.study-wrap.finish-layout{align-items:stretch}.finish-layout>.finish-rankings{display:flex;flex-direction:column}.finish-layout>.finish-rankings>.ranking-panel{flex:1}.finish-layout .finish-ranking-more{margin-top:auto;padding-top:10px}.finish-layout .ranking-list{margin-bottom:18px}}
@media(max-width:480px){.finish-rankings .ranking-panel{padding:16px 12px}.finish-rankings .ranking-title h2{font-size:15px}.finish-rankings .ranking-row{padding:10px 3px}}