:root{
  --ink:#0b1220; --ink-2:#1f2a3d; --muted:#5b6678; --line:#e3e7ee; --bg:#f5f7fa; --card:#fff;
  --blue:#0264fa; --blue-2:#0050d4; --blue-soft:#e8f0fd; --orange:#ff7a1a; --green:#12805c; --green-soft:#e3f5ee;
  --red:#c42b2b; --red-soft:#fdeaea; --amber:#a86400; --amber-soft:#fff3df; --radius:10px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink); font-size:14px;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg)} a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
.boot{padding:40px;text-align:center;color:var(--muted)}

/* layout */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--ink);color:#cfd6e2;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:#fff;font-weight:800;letter-spacing:.02em;line-height:1.1}
.brand small{display:block;font-weight:500;color:#8b97ab;letter-spacing:0;font-size:12px}
.logo{width:34px;height:34px;flex:none}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#cfd6e2;text-decoration:none;font-weight:500}
.nav a:hover{background:#17213a;color:#fff} .nav a.on{background:#fff;color:var(--ink)}
.nav .sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6f7b91;margin:16px 10px 6px}
.nav .count{margin-left:auto;background:var(--orange);color:#fff;border-radius:99px;padding:1px 8px;font-size:12px;font-weight:700}
.side .me{margin-top:20px;border-top:1px solid #1d2842;padding:14px 10px 0;font-size:13px}
.side .me button{background:none;border:0;color:#8b97ab;padding:0;margin-top:6px;cursor:pointer;text-decoration:underline}
main{padding:24px 28px 80px;min-width:0}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.top h1{font-size:22px;margin:0 auto 0 0;letter-spacing:-.01em}
.mobile-bar{display:none}

/* ui */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:#c7cfdb} .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn.primary:hover{background:var(--blue-2)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff} .btn.danger{color:var(--red)} .btn.sm{padding:5px 9px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card h3{margin:0 0 12px;font-size:15px}
.grid{display:grid;gap:14px} .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
.stat .n{font-size:30px;font-weight:800;letter-spacing:-.02em} .stat .l{color:var(--muted);font-size:13px}
.muted{color:var(--muted)} .small{font-size:12px} .right{text-align:right} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:5px;min-width:0} .field label{font-size:12px;font-weight:600;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=tel],select,textarea{
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;min-width:0;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-soft);border-color:var(--blue)}
textarea{min-height:80px;resize:vertical}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}
.tabs button{border:0;background:none;padding:10px 12px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
table{border-collapse:collapse;width:100%} th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfc;position:sticky;top:0;white-space:nowrap}
tr.click{cursor:pointer} tr.click:hover td{background:#f8fafd} tbody tr:last-child td{border-bottom:0}
td.edit{cursor:text} td.edit:hover{background:var(--blue-soft)} td input{padding:4px 6px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#eef1f5;color:var(--ink-2);white-space:nowrap}
.pill.New{background:var(--orange);color:#fff} .pill.Contacted{background:var(--blue-soft);color:var(--blue-2)}
.pill.Appointment.Scheduled,.pill[data-s="Appointment Scheduled"]{background:#efe8ff;color:#5a2fc2}
.pill[data-s="Customer Arrived"],.pill[data-s="Repair In Progress"]{background:var(--amber-soft);color:var(--amber)}
.pill[data-s="Completed"],.pill[data-s="Sold Device"]{background:var(--green-soft);color:var(--green)}
.pill[data-s="No Response"],.pill[data-s="Cancelled"]{background:#eef0f3;color:#7a8394}
.type{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.type.repair{color:var(--blue)} .type.buyback{color:var(--green)} .type.order{color:#6b3fd6} .type.contact{color:var(--muted)} .type.wireless{color:var(--amber)}
.banner{background:var(--amber-soft);border:1px solid #f5d9a8;color:#6d4300;padding:12px 14px;border-radius:var(--radius);margin-bottom:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px 0}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(11,18,32,.35);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:#fff;z-index:41;overflow:auto;box-shadow:-10px 0 40px rgba(0,0,0,.12);display:flex;flex-direction:column}
.drawer header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;position:sticky;top:0;background:#fff;z-index:1}
.drawer header h2{margin:0;font-size:18px} .drawer .body{padding:18px 20px;display:grid;gap:16px}
.x{margin-left:auto;border:0;background:#f1f3f6;width:34px;height:34px;border-radius:8px;font-size:18px;cursor:pointer;flex:none}
dl.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;margin:0} dl.kv dt{color:var(--muted)} dl.kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.statuses{display:flex;flex-wrap:wrap;gap:6px} .statuses button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 11px;cursor:pointer;font-size:13px;font-weight:600}
.statuses button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .quick a{justify-content:center}
.notes .n{border-left:3px solid var(--line);padding:4px 0 4px 12px;margin-bottom:10px} .notes .n.note{border-color:var(--blue)} .notes .n .m{font-size:12px;color:var(--muted)}
.photos{display:flex;gap:8px;flex-wrap:wrap} .photos img{width:110px;height:110px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.big-price{font-size:28px;font-weight:800}

/* import */
.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kind{border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff;cursor:pointer;text-align:left}
.kind.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .kind b{display:block;margin-bottom:4px}
.drop{border:2px dashed #c6cfdc;border-radius:var(--radius);padding:30px;text-align:center;background:#fbfcfe;cursor:pointer}
.drop.over{border-color:var(--blue);background:var(--blue-soft)}
.warn{color:var(--amber)} .ok{color:var(--green)} .err{color:var(--red)}
.log{background:#0b1220;color:#d6deea;border-radius:8px;padding:12px;font-family:ui-monospace,monospace;font-size:12px;white-space:pre-wrap;max-height:260px;overflow:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:60;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.toast.bad{background:var(--red)}
.loc-hours .row{margin-bottom:6px} .chk{display:flex;gap:6px;align-items:center;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--ink)}
.login form{background:#fff;border-radius:14px;padding:30px;width:min(380px,100%);display:grid;gap:14px}
.login h1{margin:0;font-size:20px} .login .brand{color:var(--ink);padding:0}

@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)} .kinds{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .shell{grid-template-columns:1fr} .side{position:fixed;inset:0 25% 0 0;z-index:50;transform:translateX(-100%);transition:transform .2s;height:auto}
  .shell.open .side{transform:none} main{padding:16px 14px 90px}
  .mobile-bar{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:30}
  .mobile-bar button{background:#1d2842;border:0;color:#fff;border-radius:8px;padding:7px 10px}
  .g3,.g2{grid-template-columns:1fr} dl.kv{grid-template-columns:110px 1fr}
  .hide-m{display:none}
}

/* the hidden attribute must win over display:flex/grid on .field, .grid, .card */
[hidden]{display:none!important}