:root{--ink: #18243a;--muted: #71809a;--line: #e6eaf2;--paper: #fff;--wash: #f5f7fb;--primary: #5b5ce2;--primary-dark: #4042bb;--primary-soft: #eef0ff;--accent: #ff9c66;--green: #1a9c78;--green-soft: #eaf9f3;--red: #d95868;--red-soft: #fff0f2;--radius: 20px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% -10%,#e9ebff 0,transparent 35%),var(--wash);line-height:1.6;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}.page{width:min(100% - 32px,720px);min-height:100dvh;margin:0 auto;padding:28px 0 calc(36px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}.login-page{justify-content:center;align-items:center;background:radial-gradient(circle at 50% 20%,rgba(121,123,238,.12),transparent 42%)}.login-card{width:min(100%,470px);padding:clamp(30px,7vw,52px);border-radius:28px;box-shadow:0 20px 55px #313a6f21}.login-card h1{margin-top:14px;font-size:clamp(32px,8vw,44px);letter-spacing:1px}.login-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));box-shadow:0 9px 18px #4d4fca40;font-size:30px;font-weight:900}.login-card h1,.login-subtitle{text-align:center}.login-subtitle{margin:8px 0 28px;color:var(--muted);font-size:15px}.login-foot{color:#9aa5b8;font-size:13px}.hero{position:relative;overflow:hidden;padding:34px 28px;color:#fff;text-align:center;border-radius:26px;background:linear-gradient(135deg,#4244be,#696bea 65%,#8a8cf4);box-shadow:0 18px 40px #4345be3d}.hero:after{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-80px;border-radius:50%;background:#ffffff1f}.hero-icon{font-size:48px;line-height:1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.15))}.hero h1{position:relative;z-index:1;margin-top:12px;font-size:clamp(25px,6vw,34px);letter-spacing:.5px}.hero-sub{position:relative;z-index:1;margin-top:8px;color:#ffffffd1;font-size:14px}.hero .btn{position:relative;z-index:2;margin:14px 4px 0;min-height:40px;padding:0 16px;font-size:14px}.card{background:var(--paper);border:1px solid rgba(230,234,242,.9);border-radius:var(--radius);padding:clamp(20px,4vw,30px);box-shadow:0 8px 26px #2533560f}.bank-list,.result-body{display:flex;flex-direction:column;gap:16px}.bank-card{transition:transform .2s ease,box-shadow .2s ease}.bank-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px #2533561c}.collection-card{cursor:pointer}.wrong-card{border:1px solid #ffd1b8;background:linear-gradient(135deg,#fff7f0,#fff4ed)}.wrong-card .bank-title:before{content:"📕 "}.wrong-card .bank-meta{color:#b75d2d}.collection-enter{width:100%;margin-top:21px;display:flex;justify-content:space-between;align-items:center}.collection-enter span{font-size:20px}.detail-hero{padding-top:30px}.detail-back{position:absolute;left:18px;top:18px;color:#ffffffe6;border-color:#ffffff59;background:#ffffff1f}.subbank-card{position:relative;padding-left:78px}.subbank-index{position:absolute;left:24px;top:25px;color:var(--primary);font-size:22px;font-weight:900}.bank-count{margin-top:10px;color:var(--primary-dark);font-size:13px;font-weight:700}.bank-source{display:inline-block;margin-top:15px;color:var(--muted);font-size:12px;text-decoration:none}.bank-source:hover{color:var(--primary)}.preview-btn{min-height:50px;color:#b75d2d;border-color:#ffd1b8;background:#fff4ed}.preview-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:18px;background:#141b3394;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.preview-modal{display:flex;flex-direction:column;width:min(100%,1040px);height:min(92dvh,820px);overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 24px 70px #0a112d4d}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}.preview-header h2{font-size:18px}.preview-header p{margin-top:2px;color:var(--muted);font-size:12px}.preview-frame{flex:1;width:100%;border:0;background:var(--wash)}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}.preview-footer .btn{min-height:36px;padding:0 13px;font-size:13px}.preview-page{width:min(100% - 20px,1180px);height:100dvh;overflow:hidden}.preview-page-header{padding:24px 28px}.preview-page-header h1{margin-top:0}.preview-content{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}.preview-info{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 2px;color:var(--muted);font-size:12px}.preview-page-frame{height:0;min-height:0;flex:1;border:1px solid var(--line);border-radius:var(--radius)}.bank-title{font-size:clamp(19px,4.6vw,24px);letter-spacing:-.2px}.bank-meta{margin-top:5px;color:var(--muted);font-size:14px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.chip,.tag{display:inline-flex;align-items:center;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);border:1px solid #dce0ff;padding:5px 12px;font-size:12px}.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.mode-buttons-three{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-buttons-three .btn{min-width:0;padding:0 8px;font-size:14px}.btn{min-height:50px;border:0;border-radius:14px;padding:0 18px;font-size:16px;font-weight:700;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.btn:hover{filter:brightness(1.03);box-shadow:0 7px 16px #323c781f}.btn:active{transform:translateY(1px) scale(.98)}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));box-shadow:0 7px 14px #4d4fca3b}.btn-secondary{color:var(--primary-dark);background:var(--primary-soft);border:1px solid #d8dcff}.btn-warn{color:#b75d2d;background:#fff4ed;border:1px solid #ffd1b8}.btn-ghost{color:var(--muted);background:#fff;border:1px solid var(--line)}.foot{margin-top:auto;color:#9aa5b8;text-align:center;font-size:13px}.copyright-note{display:inline-block;margin-top:4px;color:#aab2c0;font-size:11px}.quiz-header{display:flex;flex-direction:column;gap:12px}.quiz-top{display:flex;align-items:center;gap:12px}.icon-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:13px;color:var(--muted);background:#fff;font-size:20px}.quiz-count{font-size:17px;font-weight:800}.tag{margin-left:auto}.progress{height:9px;overflow:hidden;border-radius:99px;background:#e8eaf4}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#ffbf76);transition:width .25s ease}.question-card{display:flex;flex-direction:column;gap:20px}.question-text{font-size:clamp(20px,4.8vw,25px);font-weight:800;line-height:1.5;letter-spacing:-.2px}.source{color:var(--muted);font-size:13px}.source a{color:var(--primary);text-decoration:none}.source a:hover{text-decoration:underline}.options{display:flex;flex-direction:column;gap:11px}.option{display:flex;align-items:center;gap:13px;width:100%;min-height:62px;padding:12px 15px;color:var(--ink);text-align:left;border:1.5px solid var(--line);border-radius:15px;background:#fff;font-size:16px;transition:border-color .15s,background .15s,transform .15s}.option:not(:disabled):hover{border-color:#a6a8f0;background:#fafaff;transform:translate(2px)}.option:disabled{cursor:default}.option-letter{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:var(--wash);font-size:14px;font-weight:800}.option-text{flex:1}.option-mark{font-size:20px;font-weight:800}.option.is-correct{color:var(--green);border-color:#8bd9bf;background:var(--green-soft)}.option.is-correct .option-letter{color:#fff;border-color:var(--green);background:var(--green)}.option.is-wrong{color:var(--red);border-color:#f1a3ad;background:var(--red-soft)}.option.is-wrong .option-letter{color:#fff;border-color:var(--red);background:var(--red)}.option.is-dim{opacity:.45}.quiz-footer{display:flex;min-height:50px}.btn-next{width:100%}.result-hero .score{margin-top:8px;font-size:clamp(48px,12vw,68px);font-weight:900;line-height:1.1}.score-total{font-size:.45em;opacity:.8}.score-line{margin-top:7px;font-size:14px;color:#ffffffdb}.section-title{margin-bottom:14px;font-size:19px}.wrong-list{display:flex;flex-direction:column;gap:12px;list-style:none}.wrong-item{padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}.wrong-q{font-size:15px;font-weight:800}.wrong-line{margin-top:6px;font-size:14px}.is-wrong-text{color:var(--red)}.is-correct-text{color:var(--green)}.perfect-card{text-align:center;font-size:17px;font-weight:700}.result-actions{display:flex;flex-direction:column;gap:10px}form{display:flex;flex-direction:column;gap:12px}form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;font-weight:600}.bank-assignment{display:flex;flex-direction:column;gap:9px;padding:14px;border:1px solid var(--line);border-radius:14px}.bank-assignment legend{padding:0 5px;color:var(--ink);font-size:14px;font-weight:800}.check-row{display:flex;flex-direction:row;align-items:center;gap:9px;color:var(--ink);font-size:14px;font-weight:500}.check-row input{width:18px;min-height:18px;padding:0;border:0;border-radius:4px;background:transparent;accent-color:var(--primary)}.muted{color:var(--muted);font-size:13px}input{width:100%;min-height:48px;padding:0 14px;color:var(--ink);border:1px solid var(--line);border-radius:12px;outline:none;background:#fbfcff}input:focus{border-color:#9496ed;box-shadow:0 0 0 3px #5b5ce21f}ul{list-style:none}.card li{padding:12px 0;border-bottom:1px solid var(--line)}.card li:last-child{border-bottom:0}.card li .btn{float:right;min-height:34px;padding:0 12px;font-size:13px}.edit-user{display:flex;flex-direction:column;gap:10px}.edit-user .btn{float:none;margin-right:8px}@media(min-width:768px){.page{width:min(100% - 56px,760px);padding-top:40px}.hero{padding:42px 34px}.option{min-height:68px;font-size:17px}.result-actions{flex-direction:row}.result-actions .btn{flex:1}}@media(max-width:600px){.mode-buttons-three .btn{padding:0 4px;font-size:12px;letter-spacing:-.3px}.preview-info .btn{min-height:36px;padding:0 12px;font-size:12px}}