/* SimplySync tokens (brand-kit/tokens/tokens.json v2.0): color, type scale, 4px spacing, radius, shadow. Use only these vars. */
:root{
--white:#FFFFFF;--snow:#F7F9FC;--royal:#2563EB;--royal-dark:#1D4ED8;--royal-deep:#1E40AF;--blue-light:#DBEAFE;--tint:#EFF6FF;--ink:#0F1729;--charcoal:#363F4D;--gray:#667387;--silver:#94A3B8;--border:#E2E8F0;--muted:#F0F5FA;--error:#DC2626;
--display:'Manrope','Inter',-apple-system,'Segoe UI',sans-serif;--body:'Inter',-apple-system,'Segoe UI',sans-serif;
--fs-h2:36px;--fs-h3:24px;--fs-h4:20px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s12:48px;
--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
--shadow-sm:0 1px 2px rgba(15,23,41,.06);--shadow:0 4px 12px rgba(15,23,41,.08)}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--snow);color:var(--ink);font:400 var(--fs-body)/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0}
h1{letter-spacing:-.02em}h2{letter-spacing:-.01em}h3{letter-spacing:0}
.hl{color:var(--royal)}
.eb{font:700 var(--fs-caption)/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--royal)}
button{font:inherit;cursor:pointer}
a{color:var(--royal);text-decoration:none;font-weight:600}
a:hover{color:var(--royal-dark)}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.wrap{max-width:1040px;margin:0 auto;padding:var(--s4)}
header.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0 var(--s4)}
header.top img{height:28px}
.hdr-actions{display:flex;gap:var(--s2);align-items:center}
.ghost{background:none;border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s2) var(--s3);color:var(--charcoal);font-weight:600;font-size:var(--fs-small)}
.ghost:hover{background:var(--muted)}
.tabs{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1);margin-bottom:var(--s4);border-bottom:1px solid var(--border)}
.data-warning{background:var(--tint);border:1px solid var(--blue-light);border-left:3px solid var(--royal);border-radius:var(--r-md);padding:var(--s2) var(--s3);margin:0 0 var(--s4);color:var(--charcoal);font-size:var(--fs-small)}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:var(--s2) var(--s3);color:var(--gray);font-weight:600;white-space:nowrap}
.tab.on{color:var(--ink);border-bottom-color:var(--royal)}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow);margin-bottom:var(--s4)}
.card h3{font-size:var(--fs-h4);line-height:1.3;margin-bottom:var(--s3)}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}.summary-grid div{background:var(--tint);border-radius:var(--r-lg);padding:var(--s3)}.summary-grid b{display:block;font:800 var(--fs-h3)/1.25 var(--display);color:var(--royal)}.summary-grid span{color:var(--gray);font-size:var(--fs-caption)}
.meta{color:var(--gray);font-size:var(--fs-caption)}
.empty{color:var(--gray);padding:var(--s3) 0}
.srow{display:grid;grid-template-columns:minmax(88px,168px) 1fr auto;gap:var(--s3);align-items:center;margin:var(--s2) 0;font-size:var(--fs-small)}
.srow .tr{height:12px;background:var(--tint);border-radius:var(--r-pill);overflow:hidden}
.srow .fl{display:block;height:100%;background:var(--royal);border-radius:var(--r-pill)}
.srow .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--charcoal)}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.chip{background:var(--blue-light);color:var(--royal-deep);border-radius:var(--r-pill);padding:var(--s1) var(--s3);font-size:var(--fs-caption);font-weight:600}
.chip.warn{background:var(--tint);color:var(--royal-deep)}
.chip.off{background:var(--muted);color:var(--charcoal)}
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--s3)}
.col h4{font:600 var(--fs-small)/1.5 var(--body);margin:0 0 var(--s2);color:var(--charcoal)}
.oc{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s3);margin-bottom:var(--s2);font-size:var(--fs-small)}
.oc b{display:block;font-weight:600}
.ev{border-top:1px solid var(--border);padding:var(--s4) 0}
.ev:first-of-type{border-top:0}
.fun{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.fun div{background:var(--tint);border-radius:var(--r-md);padding:var(--s2) var(--s3);font-size:var(--fs-caption);min-width:112px}
.fun b{display:block;font:800 var(--fs-h4)/1.3 var(--display);color:var(--royal)}
.err{color:var(--error);font-size:var(--fs-small);min-height:1.2em}
/* tables (marketing) */
table.t{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
table.t th{background:var(--muted);color:var(--ink);font-weight:600;text-align:left;padding:var(--s2) var(--s3)}
table.t td{border-top:1px solid var(--border);padding:var(--s2) var(--s3)}
table.t tr:nth-child(even) td{background:var(--snow)}
table.t .num{text-align:right;font-variant-numeric:tabular-nums}
/* import */
.imp{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s3)}
.imp input[type=file]{font-size:var(--fs-small)}
.imp select{font:var(--fs-small) var(--body);padding:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);background:var(--white)}
.imp-result{margin-top:var(--s3);font-size:var(--fs-small)}
.btn-sm{border:0;border-radius:var(--r-md);background:var(--royal);color:var(--white);font-weight:600;font-size:var(--fs-small);padding:var(--s2) var(--s4)}
.btn-sm:hover{background:var(--royal-dark)}
.btn-sm:disabled{opacity:.55}
/* login */
.login{max-width:420px;margin:12vh auto 0;padding:var(--s4)}
.login img{height:28px;margin-bottom:var(--s5)}
.login h1{font-size:var(--fs-h2);line-height:1.15;margin:var(--s2) 0}
input[type=email]{width:100%;font:var(--fs-body) var(--body);padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--r-md);margin:var(--s4) 0 0}
input:focus,select:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:var(--royal)}
.btn{display:block;width:100%;border:0;border-radius:var(--r-md);background:var(--royal);color:var(--white);font-weight:600;font-size:var(--fs-body);padding:var(--s3) var(--s6);margin-top:var(--s4)}
.btn:hover{background:var(--royal-dark)}
.btn:disabled{opacity:.55}
@media (max-width:640px){.summary-grid{grid-template-columns:repeat(2,1fr)}}