:root{--bg:#f4f6f8;--card:#fff;--text:#1d2530;--muted:#66717f;--line:#dde3ea;--primary:#0f6fd6;--primary-dark:#0b57a8;--ok:#1e8e4f;--warn:#c47f00;--error:#c62828;--info:#2b6cb0;--radius:8px;--font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.45}
a{color:var(--primary)}
h1{font-size:1.5rem;margin:0 0 .75rem}
h2{font-size:1.2rem;margin:1.25rem 0 .5rem}
h3{font-size:1.02rem;margin:1rem 0 .4rem}
p{margin:.4rem 0 .8rem}
code,pre{font-family:var(--mono);font-size:.9em}
pre{background:#f0f3f6;border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .8rem;overflow:auto;white-space:pre-wrap;word-break:break-all}
.small{font-size:.86rem}.muted{color:var(--muted)}.mono{font-family:var(--mono)}.nowrap{white-space:nowrap}.right{text-align:right}.center{text-align:center}
.inline{display:inline}
.topbar{display:flex;align-items:center;gap:1rem;background:#15202b;color:#fff;padding:.5rem 1rem;position:sticky;top:0;z-index:20}
.topbar .brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.02em}
.nav{display:flex;gap:.2rem;flex:1;flex-wrap:wrap}
.nav a{color:#cfd8e3;text-decoration:none;padding:.35rem .6rem;border-radius:6px}
.nav a.active,.nav a:hover{background:#243447;color:#fff}
.topbar-right{display:flex;align-items:center;gap:.6rem;color:#cfd8e3}
.topbar-right .btn-link{color:#cfd8e3}
.nav-toggle{display:none;background:none;border:1px solid #3a4a5c;color:#fff;border-radius:6px;font-size:1.1rem;padding:.2rem .5rem}
.container{max-width:1200px;margin:0 auto;padding:1.25rem 1rem 3rem}
.container.narrow{max-width:520px;padding-top:3rem}
.footer{text-align:center;padding:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding:.9rem 1rem}
.stat .value{font-size:1.6rem;font-weight:700}
.stat .label{color:var(--muted);font-size:.85rem}
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--text);padding:.45rem .85rem;border-radius:6px;font:inherit;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:#f0f3f6}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-danger{color:var(--error);border-color:#e8b4b4}
.btn-sm{padding:.25rem .55rem;font-size:.85rem}
.btn-link{background:none;border:none;color:var(--primary);padding:0;cursor:pointer;font:inherit;text-decoration:underline}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}
label{display:block;margin:.55rem 0;font-weight:600;font-size:.92rem}
label small,.help{display:block;font-weight:400;color:var(--muted);font-size:.83rem;margin-top:.15rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],select,textarea{width:100%;padding:.45rem .55rem;border:1px solid #c9d2dc;border-radius:6px;font:inherit;background:#fff;margin-top:.25rem}
input[type=checkbox],input[type=radio]{margin-right:.35rem}
label.check{font-weight:400;display:flex;align-items:flex-start;gap:.35rem}
.field-error{color:var(--error);font-size:.85rem;font-weight:400}
.input-error{border-color:var(--error)!important}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 1rem}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}
.alert{padding:.65rem .9rem;border-radius:6px;margin-bottom:.9rem;border:1px solid transparent}
.alert-success{background:#e7f6ec;border-color:#b9e2c8;color:#175f36}
.alert-error{background:#fdecec;border-color:#f3bcbc;color:#8d1d1d}
.alert-warning,.alert-warn{background:#fff6e2;border-color:#f3dba6;color:#7a4e00}
.alert-info{background:#e9f1fb;border-color:#bcd4f0;color:#1e4b7c}
.badge{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-size:.78rem;font-weight:600;text-transform:capitalize;white-space:nowrap}
.badge-ok{background:#e7f6ec;color:#175f36}.badge-error{background:#fdecec;color:#8d1d1d}.badge-warn{background:#fff6e2;color:#7a4e00}.badge-info{background:#e9f1fb;color:#1e4b7c}.badge-progress{background:#e6f0ff;color:#0b57a8}.badge-muted{background:#eef1f4;color:#5b6675}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:#fafbfc}
tr:hover td{background:#fafbfd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.progress{height:10px;background:#e6ebf1;border-radius:999px;overflow:hidden;margin:.3rem 0 .15rem}
.progress-bar{height:100%;background:var(--primary);transition:width .4s}
.progress-bar.indeterminate{background:repeating-linear-gradient(45deg,#8fb8ee,#8fb8ee 10px,#c6dbf5 10px,#c6dbf5 20px);animation:slide 1s linear infinite}
@keyframes slide{from{background-position:0 0}to{background-position:28px 0}}
.progress.ok .progress-bar{background:var(--ok)}.progress.error .progress-bar{background:var(--error)}.progress.warn .progress-bar{background:var(--warn)}
.pagination{display:flex;gap:.6rem;align-items:center;justify-content:center;margin:1rem 0}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{display:grid;grid-template-columns:1.6rem 1fr auto;gap:.5rem;padding:.45rem 0;border-bottom:1px solid var(--line);align-items:start}
.check-list li .hint{grid-column:2/4;color:var(--muted);font-size:.85rem}
.check-pass{color:var(--ok)}.check-warn{color:var(--warn)}.check-fail{color:var(--error)}
.steps{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0 0 1rem;font-size:.85rem}
.steps li{padding:.3rem .6rem;border-radius:999px;background:#e9edf2;color:var(--muted)}
.steps li span{display:inline-block;width:1.3rem;height:1.3rem;line-height:1.3rem;text-align:center;border-radius:50%;background:#fff;margin-right:.3rem;font-weight:700}
.steps li.current{background:var(--primary);color:#fff}.steps li.done{background:#e7f6ec;color:#175f36}
.brand-title{font-size:1.4rem;margin-bottom:1rem}
.login-card{margin-top:2rem}
.upload-item{border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:.6rem;background:#fff}
.upload-item .name{font-weight:600;word-break:break-all}
.upload-item .meta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;color:var(--muted);font-size:.84rem}
.upload-item .controls{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.dropzone{border:2px dashed #b9c5d2;border-radius:var(--radius);padding:1.5rem;text-align:center;color:var(--muted);background:#fbfcfd}
.dropzone.drag{border-color:var(--primary);background:#eef4fc}
.mapping-table td{vertical-align:middle}
.samples{color:var(--muted);font-size:.82rem;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.confidence{font-size:.78rem;color:var(--muted)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;font-size:.92rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-word}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.4rem .9rem}
.filters label{margin:.3rem 0}
.filters .mode{display:flex;gap:.4rem}.filters .mode select{width:auto;flex:0 0 auto}
.log{font-family:var(--mono);font-size:.82rem;background:#f7f9fb;border:1px solid var(--line);border-radius:6px;padding:.5rem;max-height:320px;overflow:auto}
.log .warning{color:var(--warn)}.log .error{color:var(--error)}
.toggle{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
details summary{cursor:pointer;font-weight:600;margin:.5rem 0}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1rem;flex-wrap:wrap}
.tabs a{padding:.4rem .7rem;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent}
.tabs a.active{color:var(--text);border-color:var(--primary)}
@media (max-width:760px){.nav-toggle{display:block}.nav{display:none;flex-basis:100%;flex-direction:column}body.nav-open .nav{display:flex}.topbar-right{margin-left:auto}.container{padding:1rem .7rem 3rem}th,td{padding:.4rem}html{font-size:14px}}
.spinner{display:inline-block;width:.9em;height:.9em;border:2px solid #c47f00;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-.1em;margin-right:.3rem}
@keyframes spin{to{transform:rotate(360deg)}}