:root{
  --bg:#f4f5f7; --card:#fff; --ink:#1c2530; --muted:#697586; --line:#dfe3e8;
  --accent:#2563eb; --accent-ink:#fff; --danger:#dc2626; --ok:#15803d; --warn:#b45309;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:1.4rem 0 .6rem}
h3{font-size:1rem;margin:1rem 0 .4rem}
.muted{color:var(--muted)}

.topbar{display:flex;align-items:center;gap:1rem;background:var(--card);border-bottom:1px solid var(--line);padding:.6rem 1rem;flex-wrap:wrap}
.topbar .brand{font-weight:700;font-size:1.1rem}
.topbar nav{display:flex;gap:.8rem;align-items:center}
.topbar .search{margin-left:auto}
.topbar .search input{width:230px}
.topbar .who{color:var(--muted);font-size:.85rem}
.net{font-size:.75rem;padding:.1rem .5rem;border-radius:999px;white-space:nowrap}
.net:empty{display:none}
.net.on{background:#dcfce7;color:#15803d}
.net.off{background:#fee2e2;color:#b91c1c}
.net.sync{background:#fef9c3;color:#a16207}

.wrap{max-width:1100px;margin:1.2rem auto;padding:0 1rem}

button,.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;border-radius:6px;padding:.45rem .8rem;font:inherit;cursor:pointer}
button:hover,.btn:hover{filter:brightness(1.07);text-decoration:none}
button.danger,.btn.danger{background:var(--danger)}
button.big{padding:.7rem 1.4rem;font-size:1rem;margin-top:1rem}
button.secondary{background:#e5e7eb;color:var(--ink)}
button.link-btn{display:inline;background:none;border:0;padding:0;margin:0;color:var(--accent);font:inherit;cursor:pointer}
button.link-btn:hover{filter:none;text-decoration:underline}

input,select,textarea{font:inherit;padding:.4rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fff;width:100%}
textarea{resize:vertical}
label{display:block;margin:.35rem 0;font-size:.9rem}
label.chk{display:flex;align-items:center;gap:.4rem}
label.chk input{width:auto}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin:1rem 0}
.card.narrow{max-width:360px;margin:3rem auto}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:820px){.cols{grid-template-columns:1fr}}

.messages{list-style:none;padding:0;margin:0 0 1rem}
.msg{padding:.55rem .8rem;border-radius:6px;margin:.3rem 0;border:1px solid var(--line);background:#fff}
.msg.success{border-color:#bbf7d0;background:#f0fdf4;color:var(--ok)}
.msg.error{border-color:#fecaca;background:#fef2f2;color:var(--danger)}
.msg.warning{border-color:#fde68a;background:#fffbeb;color:var(--warn)}

.tiles{display:flex;gap:.8rem;flex-wrap:wrap}
.tile{flex:1;min-width:120px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem;text-align:center}
.tile b{display:block;font-size:1.8rem}
.tile span{color:var(--muted);font-size:.85rem}

table.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
table.grid th,table.grid td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
table.grid th{background:#fafbfc;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
table.grid tr:last-child td{border-bottom:0}

.pill{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.8rem;background:var(--c,#e5e7eb);color:#fff;filter:saturate(.9)}
.tag{display:inline-block;padding:.05rem .45rem;border:1px solid var(--line);border-radius:999px;font-size:.72rem;color:var(--muted);margin-left:.3rem}
.tag-online{border-color:#93c5fd;background:#eff6ff;color:#1d4ed8}

.filters,.form-inline{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.filters input[type=search]{width:260px}
.filters select{width:auto}

.intake fieldset{border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;margin:1rem 0}
.intake legend{font-weight:600;padding:0 .4rem}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.row>label{flex:1;min-width:160px}
.row>label.sm{flex:0 0 130px;min-width:130px}
.phone-match{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;position:relative}
.phone-match>label,.phone-match input[type=text]{flex:0 0 240px}
.match-box{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px #0002;z-index:5;max-height:260px;overflow:auto}
.match-box .m{padding:.5rem .7rem;border-bottom:1px solid var(--line);cursor:pointer}
.match-box .m:hover{background:#f0f6ff}
.match-box .m:last-child{border-bottom:0}
.device-pick{margin:0 0 .8rem;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:200px;overflow-y:auto}
.device-pick .m{padding:.5rem .7rem;border-bottom:1px solid var(--line);cursor:pointer}
.device-pick .m:hover{background:#f0f6ff}
.device-pick .m:last-child{border-bottom:0}
.unlock-row{align-items:center}
.pattern-hint{display:flex;align-items:center;gap:.5rem;flex:1;min-width:220px}
.pattern-hint svg{flex:0 0 auto}
.pattern-hint svg circle{fill:#fff;stroke:var(--line);stroke-width:2}
.pattern-hint svg text{font-size:9px;text-anchor:middle;fill:var(--ink)}

dl{display:grid;grid-template-columns:150px 1fr;gap:.35rem .8rem;margin:0}
dl dt{color:var(--muted)}
dl dd{margin:0}

.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.detail-head .actions{display:flex;gap:.5rem}
.stack{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.stack select,.stack input,.stack textarea{width:100%}
form.inline{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap}

.timeline{list-style:none;padding-left:0;margin:.4rem 0}
.timeline li{padding:.35rem 0;border-bottom:1px dashed var(--line)}
.notes{list-style:none;padding:0}
.notes li{padding:.5rem .6rem;border-left:3px solid var(--line);margin:.4rem 0;background:#fafbfc}
.notes li.sev-3{border-color:var(--warn)}
.notes li.sev-4{border-color:var(--danger)}
.thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.thumbs img{height:90px;border-radius:6px;border:1px solid var(--line)}

.pager{display:flex;gap:.8rem;align-items:center;justify-content:center;margin:1rem 0}
.pager a{padding:.3rem .7rem;border:1px solid var(--line);border-radius:6px}