:root{
  --navy-900:#0f2540;
  --alert-600:#c0392b;
  --amber-500:#e8a33d;
  --green-600:#2e7d5b;
  --paper-100:#f6f3ec;
  --paper-50:#fbfaf6;
  --ink-900:#181510;
  --ink-600:#5b5748;
  --line:#e3ddcd;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:var(--font-body); background:var(--paper-100); color:var(--ink-900);
  padding-bottom:70px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); margin:0;}

.topbar{
  background:var(--navy-900); color:#fff; padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10;
}
.topbar .brand{display:flex; align-items:center; gap:10px;}
.topbar .brand .siren{width:32px;height:32px;border-radius:50%;background:var(--alert-600);display:flex;align-items:center;justify-content:center;font-size:15px;}
.topbar h1{font-size:15px;}
.topbar small{display:block; opacity:.65; font-size:10px;}
.status-pill{font-size:11px; padding:4px 9px; border-radius:20px; font-weight:700;}
.status-online{background:rgba(46,125,91,.2); color:#8fe0bc;}
.status-offline{background:rgba(192,57,43,.25); color:#ffb4a8;}

.container{padding:16px; max-width:520px; margin:0 auto;}
.card{background:var(--paper-50); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px;}
.card h3{font-size:14px; margin-bottom:10px;}

label{font-size:12px; font-weight:600; color:var(--ink-600); display:block; margin:12px 0 5px;}
label:first-child{margin-top:0;}
input, select, textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px;
  font-family:var(--font-body); background:#fff; color:var(--ink-900);
}
textarea{resize:vertical; min-height:70px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%;
  padding:13px; border-radius:9px; border:none; font-size:14px; font-weight:700; margin-top:14px;
}
.btn-primary{background:var(--navy-900); color:#fff;}
.btn-alert{background:var(--alert-600); color:#fff;}
.btn-outline{background:#fff; border:1px solid var(--line); color:var(--ink-900);}
.btn:disabled{opacity:.5;}

.loc-box{
  border:1px dashed var(--line); border-radius:8px; padding:12px; font-size:13px; margin-top:8px;
  background:var(--paper-100);
}
.loc-box.has-loc{border-color:var(--green-600); background:rgba(46,125,91,.06); color:var(--green-600); font-weight:600;}

.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; background:var(--paper-50); border-top:1px solid var(--line);
  display:flex; z-index:10;
}
.bottom-nav a{
  flex:1; text-align:center; padding:11px 4px 9px; text-decoration:none; color:var(--ink-600); font-size:11px;
  font-weight:600; border-top:3px solid transparent;
}
.bottom-nav a .ico{display:block; font-size:19px; margin-bottom:2px;}
.bottom-nav a.active{color:var(--navy-900); border-top-color:var(--alert-600);}

.sync-item{
  display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:8px; font-size:13px;
}
.sync-item .info b{display:block; font-size:13px;}
.sync-item .info span{font-size:11px; color:var(--ink-600);}
.chip{font-size:10px; padding:3px 8px; border-radius:20px; font-weight:700; text-transform:uppercase;}
.chip-pending{background:rgba(232,163,61,.2); color:var(--amber-500);}
.chip-synced{background:rgba(46,125,91,.15); color:var(--green-600);}
.chip-failed{background:rgba(192,57,43,.15); color:var(--alert-600);}

.empty{text-align:center; padding:40px 10px; color:var(--ink-600); font-size:13px;}
.toast{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:var(--navy-900); color:#fff;
  padding:10px 18px; border-radius:20px; font-size:13px; font-weight:600; z-index:99; opacity:0; transition:opacity .3s;
}