:root{
  --ink:#16202b; --mute:#5d6b7a; --line:#dde3ea; --paper:#f4f6f8;
  --card:#fff; --accent:#0f5c46; --accent-soft:#e6f2ee;
  --warn:#8a5300; --warn-bg:#fdf4e3; --green:#92d050;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;
}
main{max-width:1000px; margin:0 auto; padding:28px 20px 64px}

/* ---------- chrome ---------- */
.topbar{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  background:var(--ink); color:#fff; padding:14px 24px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.brand-mark{
  background:var(--green); color:#12321f; font-weight:800; font-size:12px;
  letter-spacing:.06em; padding:4px 7px; border-radius:4px;
}
.brand-text{font-weight:650; font-size:17px; letter-spacing:.01em}
.brand-sub{color:#9fb0c0; font-size:13px}
footer{
  max-width:1000px; margin:0 auto; padding:0 20px 32px;
  color:var(--mute); font-size:12.5px;
}
footer a{color:var(--accent); font-weight:600}

.hero h1{font-size:26px; margin:6px 0 8px; letter-spacing:-.01em}
.hero p{color:var(--mute); max-width:64ch; margin:0 0 20px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:20px 22px; margin-bottom:18px;
}
.card h2{font-size:15px; margin:0 0 12px; letter-spacing:.01em}
.fine{color:var(--mute); font-size:13px; margin:6px 0}
code{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; font-size:12.5px; font-family:Consolas,monospace;
}

/* ---------- upload ---------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:2px dashed var(--line); border-radius:10px; padding:34px 20px;
  cursor:pointer; text-align:center; transition:.15s;
}
.dropzone:hover,.dropzone.over{border-color:var(--accent); background:var(--accent-soft)}
.dropzone.has-file{border-style:solid; border-color:var(--accent); background:var(--accent-soft)}
.dropzone input{position:absolute; width:1px; height:1px; opacity:0}
.dz-icon{font-size:30px}
.dz-main{font-weight:650}
.dz-sub{color:var(--mute); font-size:13px}
.drop .btn{margin-top:16px}

.btn{
  background:var(--accent); color:#fff; border:0; border-radius:7px;
  padding:11px 20px; font-size:14.5px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.btn:hover{background:#0c4a38}

.alert{
  background:#fdecea; border:1px solid #f3c2bd; color:#8a1c11;
  border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:14px;
}

.cols{columns:3; margin:8px 0 4px; padding-left:18px; font-size:13.5px}
.cols li{margin-bottom:3px; break-inside:avoid}

/* ---------- preview ---------- */
.crumb{display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:14px; font-size:13px; color:var(--mute)}
.crumb a{color:var(--accent); text-decoration:none; font-weight:600}

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin-bottom:18px;
}
.stats div{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px;
}
.stats b{display:block; font-size:24px; letter-spacing:-.02em}
.stats span{color:var(--mute); font-size:12.5px}
.stats .hi{background:var(--accent); border-color:var(--accent); color:#fff}
.stats .hi span{color:#b9dbd0}

.warn{background:var(--warn-bg); border-color:#ecd8ac}
.warn h2{color:var(--warn)}
.warn ul{margin:0; padding-left:18px; font-size:13.5px}
.warn li{margin-bottom:5px}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}
label{display:block; font-size:12.5px; color:var(--mute); font-weight:600}
.grid .wide,.card>.wide{grid-column:1/-1}
input[type=text],input[type=date],input[type=password],select{
  display:block; width:100%; margin-top:5px; padding:9px 11px;
  border:1px solid var(--line); border-radius:7px; background:#fff;
  font:14px inherit; color:var(--ink); font-family:inherit;
}
input[type=text]:focus,input[type=date]:focus,
input[type=password]:focus,select:focus{
  outline:2px solid var(--accent-soft); border-color:var(--accent);
}

/* ---------- format cards ---------- */
.fmt{border:1px solid var(--line); border-radius:9px; margin-top:14px; overflow:hidden}
.fmt>header{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--paper); border-bottom:1px solid var(--line); padding:10px 14px;
}
.tag{
  background:var(--ink); color:#fff; font-size:11px; font-weight:700;
  padding:3px 7px; border-radius:4px; letter-spacing:.04em;
}
.fmt>header b{font-size:14.5px}
.spec{color:var(--mute); font-size:12.5px}
.grow{flex:1}
.count{font-size:12.5px; color:var(--mute); white-space:nowrap}
.count b{color:var(--ink)}
.unit{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink)}
.unit select{width:auto; margin:0; padding:5px 8px; font-size:13px}
.fmt-sub{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 14px 3px;
}
.lblbox{display:flex; align-items:center; gap:8px; font-size:12.5px; white-space:nowrap}
.lblbox input{
  width:auto; min-width:190px; margin:0; padding:5px 9px; font-size:13px;
  font-weight:650; letter-spacing:.02em;
}
.lblbox input.blank{border-color:#e0b978; background:#fffaf0}
.lblbox input::placeholder{font-weight:400; color:#b0863c; letter-spacing:0}
.desc{font-size:12.5px; color:var(--mute); margin:0}

.fmt table{width:100%; border-collapse:collapse; margin-top:8px; font-size:13.5px}
.fmt th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--mute); font-weight:700; padding:6px 14px; border-bottom:1px solid var(--line);
}
.fmt td{padding:7px 14px; border-bottom:1px solid #eef2f6}
.fmt tr:last-child td{border-bottom:0}
.fmt .style{font-weight:650}
.fmt .n{text-align:right; font-variant-numeric:tabular-nums}
/* ---------- tick boxes ---------- */
.fmt th.u,.fmt td.u{width:62px; text-align:center; padding-left:8px; padding-right:8px}
.fmt th.u span{margin-left:7px; vertical-align:middle}
.fmt .u input{position:absolute; opacity:0; width:0; height:0}
.fmt .u label{
  display:inline-block; width:17px; height:17px; border:1.5px solid #b9c3cf;
  border-radius:4px; background:#fff; cursor:pointer; vertical-align:middle;
  position:relative; transition:.12s;
}
.fmt .u label:hover{border-color:var(--accent)}
.fmt .u input:checked + label{background:var(--accent); border-color:var(--accent)}
.fmt .u input:checked + label::after{        /* the tick */
  content:""; position:absolute; left:5px; top:1px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.fmt .u input:indeterminate + label{background:var(--accent); border-color:var(--accent)}
.fmt .u input:indeterminate + label::after{
  content:""; position:absolute; left:3px; top:6.5px; width:9px; height:0;
  border:solid #fff; border-width:0 0 2px 0; transform:none;
}
.fmt .u input:checked + label.green{background:var(--green); border-color:#6ea23a}
.fmt .u input:checked + label.green::after{border-color:#204010}
.fmt .u input:focus-visible + label{outline:2px solid var(--accent); outline-offset:1px}
.fmt .u input:disabled + label{background:#f1f4f7; border-color:#e0e6ec; cursor:not-allowed}

/* ---------- excluded rows and formats ---------- */
.fmt tr.off .style,.fmt tr.off td:nth-child(4),.fmt tr.off td.n{
  color:#a6b1bd; text-decoration:line-through; text-decoration-thickness:1px;
}
.fmt.off{opacity:.55}
.fmt.off>header{background:#f8fafb}

/* ---------- select-all bar ---------- */
.sec-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:2px}
.sec-head h2{margin:0}
.allbar{margin-left:auto; display:flex; align-items:center; gap:12px}
.pill{
  background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:700;
  padding:3px 10px; border-radius:99px;
}
.link{
  background:none; border:0; padding:0; font:inherit; font-size:13px; font-weight:600;
  color:var(--accent); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}
.link:hover{color:#0c4a38}

.actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.actions .fine{margin:0}
.btn:disabled{background:#b7c1cb; cursor:not-allowed}

/* ---------- sign in ---------- */
.signin{max-width:380px; margin:60px auto; text-align:left}
.signin h1{font-size:20px; margin:0 0 4px; letter-spacing:-.01em}
.signin .fine{margin:0 0 16px}
.signin label{margin-bottom:14px}
.signin .btn{width:100%}