:root{
  --bg:#f4f6fa;--card:#fff;--ink:#0f172a;--muted:#667085;--line:#e5e7eb;
  --soft:#f8fafc;--accent:#0f172a;--radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{border:0;cursor:pointer}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:11px max(14px,env(safe-area-inset-left));background:rgba(244,246,250,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(15,23,42,.08)}
.brand{display:flex;align-items:center;gap:10px}.brandmark{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:#0f172a;color:#fff;font-weight:900;font-size:12px}.brand h1{font-size:15px;margin:0}.brand p{font-size:10px;color:var(--muted);margin:2px 0 0}
.backend{font-size:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 9px;white-space:nowrap}
.shell{width:min(1120px,calc(100% - 24px));margin:18px auto 50px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 7px 28px rgba(15,23,42,.045)}
.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px}.hero h2{font-size:clamp(20px,4vw,32px);margin:5px 0 7px;letter-spacing:-.03em;max-width:680px}.muted{color:var(--muted);font-size:12px;line-height:1.55;margin:0}
.eyebrow{font-size:9px;font-weight:900;letter-spacing:.14em;color:#64748b}.hero-ref{display:flex;gap:8px;flex:0 0 auto}.refbox{width:105px;border:1px solid var(--line);background:var(--soft);border-radius:14px;padding:9px;text-align:center}.refbox small{display:block;font-size:8px;color:var(--muted)}.refbox img{width:80px;height:36px;object-fit:contain;image-rendering:pixelated;margin:5px auto;transform:scale(1.25)}.refbox b{font-size:11px;letter-spacing:2px}
.tabs{display:flex;gap:7px;overflow:auto;padding:13px 2px 11px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;background:#e9edf3;color:#64748b;padding:9px 12px;border-radius:999px;font-size:11px;font-weight:800}.tab.active{background:#0f172a;color:#fff}
.tabpanel{display:none}.tabpanel.active{display:block}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title h3,h3{font-size:16px;margin:3px 0 13px}.pill{font-size:9px;font-weight:800;background:#f1f5f9;border:1px solid var(--line);border-radius:999px;padding:6px 9px}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:block}.field>span{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;margin-bottom:5px}.field input:not([type=range]),.field select{width:100%;height:39px;border:1px solid #d8dee8;border-radius:10px;background:#fff;padding:0 10px;color:var(--ink);outline:none}.field input:focus,.field select:focus{border-color:#94a3b8;box-shadow:0 0 0 3px #f1f5f9}.field small{display:block;color:#94a3b8;font-size:8.5px;line-height:1.45;margin-top:5px}
.range-field{grid-column:span 1}.range-field input{width:100%;accent-color:#0f172a}
.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preview-item{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:7px;text-align:center}.preview-item canvas{width:80px;max-width:100%;height:36px;image-rendering:pixelated;background:#e8dfc7}.preview-item b{display:block;font-size:9px;margin-top:4px;letter-spacing:1.5px}.hint{font-size:9px;color:#94a3b8;line-height:1.5;margin:12px 0 0}
button{background:#0f172a;color:#fff;border-radius:10px;padding:10px 12px;font-size:10px;font-weight:800}.secondary{background:#eef2f7;color:#0f172a;border:1px solid #dfe5ee}.danger{background:#fff0f0;color:#b42318;border:1px solid #ffd5d2}.mini{padding:7px 9px}.big{width:100%;padding:13px;margin-top:12px}.primary{background:#0f172a}
.uploadbox{display:grid;grid-template-columns:1.25fr .8fr;gap:8px;align-items:end}.uploadbox button{grid-column:1/-1}.divider{display:flex;align-items:center;gap:10px;color:#94a3b8;font-size:9px;margin:14px 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.stat{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:11px}.stat small{display:block;font-size:8px;color:var(--muted)}.stat b{font-size:20px}
.digit-dist{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:13px}.digit-chip{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:6px;text-align:center}.digit-chip b{display:block;font-size:11px}.digit-chip small{font-size:7.5px;color:#94a3b8}
.real-thumbs{display:flex;gap:6px;overflow:auto;margin-top:10px;padding-bottom:3px}.real-thumb{flex:0 0 auto;width:58px;border:1px solid var(--line);background:#f8fafc;border-radius:9px;padding:5px;text-align:center}.real-thumb img{width:48px;height:24px;object-fit:contain;image-rendering:pixelated}.real-thumb b{display:block;font-size:8px;letter-spacing:1px}
.model-diagram{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:9px}.model-diagram span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px}.model-diagram i{font-style:normal;color:#94a3b8}.heads{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.heads b{text-align:center;background:#0f172a;color:#fff;border-radius:7px;padding:6px;font-size:8px}
#stopBtn{width:100%;margin-top:7px}.progress{height:8px;border-radius:999px;background:#e9edf3;overflow:hidden}.progress i{display:block;width:0;height:100%;background:#0f172a;transition:.2s}.train-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}.train-metrics>div{border:1px solid var(--line);border-radius:10px;background:#f8fafc;padding:8px}.train-metrics small{display:block;font-size:7.5px;color:#94a3b8}.train-metrics b{font-size:11px}.console{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;line-height:1.5;background:#0f172a;color:#dbeafe;border-radius:11px;padding:10px;min-height:54px;white-space:pre-wrap}.chart-wrap{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.chart-wrap canvas{display:block;width:100%;height:auto}
.test-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:11px 0}.test-imgbox{height:105px;display:grid;place-items:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:13px;overflow:hidden}.test-imgbox img{max-width:90%;height:70px;object-fit:contain;image-rendering:pixelated;display:none}.test-imgbox span{font-size:9px;color:#94a3b8}.prediction{background:#0f172a;color:#fff;border-radius:13px;padding:12px}.prediction small{font-size:8px;color:#94a3b8}.prediction>b{display:block;font-size:28px;letter-spacing:5px;margin:4px 0 10px}.conf-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.conf-grid span{font-size:8px;background:rgba(255,255,255,.08);border-radius:6px;padding:5px}.correction{border-top:1px solid var(--line);margin-top:13px;padding-top:12px}.correction button{width:100%}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0}.import-model{margin-top:10px}.tip{margin-top:11px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px}.tip b{display:block;font-size:9px}.tip span{display:block;font-size:8.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#0f172a;color:#fff;border-radius:999px;padding:9px 13px;font-size:10px;font-weight:700;z-index:99;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){
  .shell{width:min(100% - 16px,1120px);margin-top:10px}.grid2{grid-template-columns:1fr}.hero{align-items:flex-start;padding:16px}.hero-ref{display:none}.card{padding:14px;border-radius:16px}.controls{grid-template-columns:1fr 1fr}.preview-grid{grid-template-columns:repeat(3,1fr)}.topbar{padding:9px 10px}.backend{max-width:120px;overflow:hidden;text-overflow:ellipsis}.train-metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .controls{grid-template-columns:1fr}.range-field{grid-column:auto}.preview-grid{grid-template-columns:repeat(3,1fr)}.uploadbox{grid-template-columns:1fr}.test-stage{grid-template-columns:1fr}.export-grid{grid-template-columns:1fr}.heads{grid-template-columns:1fr 1fr}
}