:root{--blue:#142e4c;--blue-2:#244b70;--green:#167753;--green-bg:#e7f4ed;--gray:#eff2f5;--gray-txt:#69788b;--bg:#f6f5f1;--card:#fff;--line:#e4e8e8}
body{color:#21354a;line-height:1.55;background:radial-gradient(ellipse at 85% 0,#e7eee9 0,transparent 42%),var(--bg);padding-bottom:48px}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #cb9148;outline-offset:3px}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}
header{position:relative;max-width:1100px;margin:28px auto 0;padding:32px 36px;border-radius:24px;background:linear-gradient(125deg,#142e4c,#294b69);box-shadow:0 16px 36px #17334f16}
header .title{font-size:24px;letter-spacing:.02em}header .title .cup{display:grid;place-items:center;width:44px;height:44px;background:#ffffff14;border:1px solid #ffffff24;border-radius:14px;font-size:24px}.brand-note{font-size:13px;color:#d3dfeb;margin:9px 0 0;letter-spacing:.02em}
.stats-row{margin-top:24px}.stats-row .num{font-size:40px;font-weight:750;letter-spacing:-.04em}.stats-row .num small{font-size:16px;letter-spacing:0}.progress{height:6px;margin-top:12px;background:#ffffff1c}.progress .bar{background:#9cddb8}.progress-caption{font-size:12px;margin-top:8px;color:#d1dce6;text-align:right}
.collection-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;max-width:1100px;margin:24px auto 0;align-items:start}.upload-card{margin:0;padding:24px;border:1px solid var(--line);border-radius:20px;box-shadow:0 5px 20px #142e4c05;position:sticky;top:20px}.panel-heading{font-size:18px;margin:0 0 4px;font-weight:750}.panel-caption{font-size:13px;color:#718093;margin:0 0 22px}.field-label{display:block;margin-top:16px;color:#526277}.row-flex{gap:8px}#numInput{font-size:24px;padding:10px;border-width:1px;background:#f9fafb}.pick-btn{font-size:13px;flex:1.4;padding:8px}.pick-btn:hover{background:var(--blue-2)}#nameInput{border-width:1px;background:#f9fafb}#uploadBtn{margin-top:18px;background:var(--green);padding:12px}#uploadBtn:hover{background:#125e43}.msg{margin-top:8px;font-size:12px}.recog{font-size:12px}
.collection-panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.collection-toolbar h2{font-size:18px}.quiet-btn{border:1px solid #dce3e6;border-radius:9px;padding:7px 12px;background:#fff;color:#496076;font-size:12px;min-height:36px}.quiet-btn:hover{background:#f1f5f6}.search-wrap{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid #dce3e6;border-radius:11px;background:#f9fafb;margin:18px 0 12px}.search-wrap span{font-size:16px;color:#7b8996}.search-wrap input{border:0;outline:none;background:none;width:100%;min-width:0;font-size:14px;color:#21354a}.search-wrap:focus-within{border-color:#496a88;box-shadow:0 0 0 3px #244b700c}
.filters{display:flex;gap:6px;flex-wrap:wrap}.filter-btn{font-size:12px;border:1px solid transparent;border-radius:8px;padding:7px 11px;background:#f1f4f5;color:#607083;min-height:34px}.filter-btn.active{background:var(--blue);color:#fff}.collection-summary{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#778493;margin:16px 0 6px}.collection-summary strong{color:#38526c;font-weight:600}.legend-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:4px}.seg-head{margin:20px 0 9px;font-size:12px;display:flex;justify-content:space-between;color:#627285;font-weight:600}.seg-count{font-size:11px;color:#89949e;font-weight:400}.grid-wrap{padding:0}.grid{gap:6px;grid-template-columns:repeat(10,minmax(0,1fr))}.cell{width:100%;min-width:0;padding:0;border:1px solid transparent;aspect-ratio:1.15;font-size:12px;border-radius:8px;font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,transform .15s}.cell.empty{background:#f0f3f5;color:#6e7b89}.cell.empty:hover{background:#e4eaee;border-color:#ccd7df}.cell.done{background:#e3f1e8;color:#176e4d;box-shadow:none;border-color:#d4e9dc}.cell.done:hover{background:#cfe8da}.cell.done::after{color:#2c936a;top:0;right:4px;font-size:8px}.cell.current{outline:2px solid #c99145;outline-offset:1px;background:#fff2db;color:#8a5f24}.grid-empty{padding:48px 16px;text-align:center;font-size:14px;color:#778493}.load-status{font-size:12px;color:#778493;margin-top:8px}.load-status.error{color:#b33939}
.lightbox{backdrop-filter:blur(7px);background:#0c1729dc}.lightbox img{border-radius:14px;box-shadow:0 12px 50px #0003}.lb-close{border-radius:50%;width:44px;height:44px;background:#ffffff15;display:grid;place-items:center;font-size:28px}.lb-actions button{font-size:13px}.lb-num{font-size:23px}.lb-name{color:#afe0c1}.lb-delete{background:#b54545}#toast{max-width:min(90vw,440px);border-radius:12px;line-height:1.5}
@media(min-width:1500px){header,.collection-layout{max-width:1180px}.collection-layout{grid-template-columns:330px minmax(0,1fr)}}
@media(max-width:1160px){header{margin:20px 24px 0}.collection-layout{margin:20px 24px 0;gap:20px;grid-template-columns:290px minmax(0,1fr)}.collection-panel{padding:20px}.cell{font-size:11px}.grid{gap:5px}}
@media(max-width:800px){header{margin:0;border-radius:0 0 24px 24px;padding:24px}.collection-layout{display:block;max-width:620px;margin:18px auto;padding:0 16px}.upload-card{position:static;margin-bottom:18px;padding:20px}.collection-panel{padding:20px}.panel-caption{margin-bottom:14px}.grid{gap:5px}.cell{font-size:12px;aspect-ratio:1.12}.stats-row{margin-top:18px}.stats-row .num{font-size:34px}header .title{font-size:22px}.progress-caption{margin-top:7px}}
@media(max-width:360px){.collection-panel{padding:14px}.cell{font-size:10px}.collection-toolbar{flex-wrap:wrap}.grid{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}