:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
  background: #f8fafc;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-page { min-height: 100%; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #e2e8f0, #f8fafc 55%); }
.login-card { width: min(420px, 100%); background: white; border: 1px solid #e2e8f0; border-radius: 18px; padding: 28px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12); }
.login-card h1 { margin: 0 0 8px; font-size: 1.5rem; }
.login-card p { color: #475569; margin: 0 0 24px; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 0.86rem; font-weight: 700; color: #334155; }
.field input, .field select, .field textarea, .inline-form input, .inline-form select { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; background: white; }
.field textarea { min-height: 86px; resize: vertical; }
.check-line { display: flex !important; align-items: center; gap: 8px; font-size: .88rem; }
.check-line input { width: auto; }

.primary, .secondary, .danger { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.primary { background: #0f172a; color: white; }
.secondary { background: #e2e8f0; color: #0f172a; }
.danger { background: #fee2e2; color: #991b1b; }
.full { width: 100%; }
.error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px; margin: 12px 0; }
.notice { padding: 10px; border-radius: 10px; background: #eff6ff; color: #1e3a8a; margin-bottom: 12px; font-size: .9rem; }

.app-shell { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.topbar { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 14px; background: #0f172a; color: white; z-index: 1001; }
.topbar h1 { margin: 0; font-size: 1.05rem; }
.topbar small { color: #cbd5e1; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar button { border: 1px solid #475569; background: #1e293b; color: white; padding: 8px 10px; border-radius: 9px; }
.workspace { min-height: 0; display: grid; grid-template-columns: 330px 1fr; }
.sidebar { min-height: 0; overflow: auto; padding: 14px; background: white; border-right: 1px solid #e2e8f0; z-index: 900; }
.map-wrap, #map { width: 100%; height: 100%; min-height: 0; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.stat { padding: 10px; border-radius: 12px; background: #f1f5f9; }
.stat strong { display: block; font-size: 1.25rem; }
.stat span { color: #64748b; font-size: .78rem; }
.sidebar h2 { font-size: .98rem; margin: 18px 0 8px; }
.toolbar { display: grid; gap: 8px; }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; }
.map-help { margin-top: 20px; padding: 12px; border-radius: 12px; background: #f8fafc; color: #475569; font-size: .82rem; }
.map-help p { margin: 5px 0 0; }

.marker-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid white; box-shadow: 0 1px 5px rgba(15, 23, 42, .55); }
.tour-marker { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 3px solid white; font-weight: 800; font-size: .72rem; box-shadow: 0 2px 7px rgba(15, 23, 42, .55); }
.tour-marker.pending { background: #f59e0b; color: #111827; }
.tour-marker.done { background: #16a34a; color: white; }
.popup-title { font-weight: 800; margin-bottom: 5px; }
.popup-meta { color: #64748b; font-size: .8rem; margin-bottom: 9px; }
.popup-actions { display: grid; gap: 7px; min-width: 220px; }
.popup-actions select, .popup-actions textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px; }
.popup-actions label { display: flex; gap: 8px; align-items: center; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: grid; place-items: center; padding: 16px; z-index: 2000; }
.modal { width: min(540px, 100%); max-height: 92vh; overflow: auto; background: white; border-radius: 16px; padding: 20px; box-shadow: 0 24px 70px rgba(15, 23, 42, .3); }
.modal.wide { width: min(900px, 100%); }
.modal.xwide { width: min(1180px, 100%); }
.modal h2 { margin-top: 0; }
.modal-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.span-2 { grid-column: span 2; }
.selection-count { padding: 12px; border-radius: 10px; background: #ecfdf5; color: #166534; font-weight: 800; }
.add-mode { background: #b45309 !important; border-color: #f59e0b !important; }

.status { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: .72rem; font-weight: 800; }
.status.draft { background: #e2e8f0; color: #334155; }
.status.active { background: #fef3c7; color: #92400e; }
.status.completed { background: #dcfce7; color: #166534; }
.status.archived { background: #f1f5f9; color: #64748b; }
.tour-header h2 { margin: 10px 0 4px; font-size: 1.15rem; }
.tour-header p { margin: 0 0 12px; color: #64748b; font-size: .84rem; }
.progress { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.progress div { height: 100%; background: #16a34a; }
.tour-count { margin: 8px 0 14px; color: #475569; }
.tour-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.stop-list { display: grid; gap: 6px; }
.stop-row { width: 100%; display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; text-align: left; gap: 8px; border: 1px solid #e2e8f0; background: white; border-radius: 10px; padding: 8px; }
.stop-row > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f59e0b; font-weight: 800; }
.stop-row.done { opacity: .68; background: #f0fdf4; }
.stop-row.done > span { background: #16a34a; color: white; }
.stop-row strong, .stop-row small { display: block; }
.stop-row small { color: #64748b; margin-top: 2px; }
.stop-row b { color: #15803d; font-size: 1.15rem; }

.tour-cards { display: grid; gap: 10px; }
.tour-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.tour-card h3 { margin: 6px 0 2px; }
.tour-card p { margin: 0; color: #64748b; font-size: .84rem; }
.tour-card-progress { display: grid; text-align: right; }
.tour-card-progress span { color: #64748b; font-size: .8rem; }
.card-actions { display: flex; gap: 6px; }

.inline-form { display: grid; grid-template-columns: 1fr 1.4fr 160px auto; gap: 8px; margin-bottom: 16px; }
.user-list { display: grid; gap: 8px; }
.user-row { display: grid; grid-template-columns: 1fr 150px 90px auto auto; align-items: center; gap: 8px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px; }
.user-row select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px; }
.user-row label { display: flex; gap: 5px; align-items: center; }

.leaflet-control-layers { font-size: .86rem; }
.leaflet-control-layers-expanded { max-width: 270px; }

@media (max-width: 900px) {
  .topbar { align-items: flex-start; }
  .topbar-actions button { font-size: .76rem; padding: 7px 8px; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 32vh) 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid #e2e8f0; padding: 10px; }
  .stats { grid-template-columns: repeat(4, minmax(78px, 1fr)); overflow-x: auto; }
  .stat { min-width: 82px; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar .field { margin: 0; }
  .toolbar .check-line { grid-column: span 2; }
  .stop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-card { grid-template-columns: 1fr auto; }
  .tour-card .card-actions { grid-column: span 2; justify-content: flex-end; }
  .inline-form, .user-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .topbar h1 { font-size: .9rem; }
  .topbar small { font-size: .7rem; }
  .workspace { grid-template-rows: minmax(180px, 38vh) 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .stop-list { grid-template-columns: 1fr; }
  .tour-tools { grid-template-columns: 1fr; }
  .tour-card { grid-template-columns: 1fr; }
  .tour-card .card-actions { grid-column: span 1; }
  .inline-form, .user-row { grid-template-columns: 1fr; }
  .modal { padding: 14px; }
}

.source-warning { color: #92400e; font-weight: 700; }


.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-card { display: flex !important; align-items: flex-start; gap: 9px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px; background: #f8fafc; }
.check-card input { width: auto; margin-top: 3px; }
.check-card strong, .check-card small { display: block; }
.check-card small { color: #64748b; margin-top: 2px; }
.distributor-list { display: grid; gap: 10px; }
.distributor-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.distributor-card strong, .distributor-card small { display: block; }
.distributor-card small { color: #64748b; margin-top: 2px; }
.distributor-card p { margin: 5px 0 0; color: #475569; font-size: .84rem; }
.street-table { display: grid; gap: 7px; }
.street-row { display: grid; grid-template-columns: minmax(220px, 1.5fr) 150px minmax(160px, 1fr) 120px minmax(150px, 1fr) auto; gap: 8px; align-items: center; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px; }
.street-row strong, .street-row small { display: block; }
.street-row small { color: #64748b; margin-top: 2px; }
.street-row select, .street-row input, .compact-search, .street-toolbar select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px; min-width: 0; }
.compact-search { width: min(320px, 100%); }
.street-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 180px 160px auto auto; gap: 8px; margin: 12px 0; align-items: center; }
.street-toolbar select { background: white; }
#street-result-count { color: #64748b; font-size: .86rem; font-weight: 700; }

@media (max-width: 900px) {
  .checkbox-grid { grid-template-columns: 1fr; }
  .street-row { grid-template-columns: 1fr 1fr; }
  .street-toolbar { grid-template-columns: 1fr 1fr; }
  .street-row > div:first-child { grid-column: span 2; }
  .distributor-card { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .street-row { grid-template-columns: 1fr; }
  .street-toolbar { grid-template-columns: 1fr; }
  .street-row > div:first-child { grid-column: span 1; }
  .modal-title { align-items: flex-start; flex-direction: column; }
}

.network-status { display:inline-flex; align-items:center; padding:7px 9px; border-radius:999px; font-size:.76rem; font-weight:700; white-space:nowrap; }
.network-status.online { background:#dcfce7; color:#166534; }
.network-status.offline { background:#fee2e2; color:#991b1b; }
.workload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0; }
.workload { display:flex; justify-content:space-between; gap:8px; padding:8px; border-radius:9px; background:#f1f5f9; font-size:.78rem; }
.stop-row.status-inaccessible, .stop-row.status-no_mailbox, .stop-row.status-problem, .stop-row.status-skipped { border-left:4px solid #f59e0b; }
.quality-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0; }
.quality-stats > div { background:#f1f5f9; border-radius:12px; padding:12px; text-align:center; }
.quality-stats strong { display:block; font-size:1.45rem; }
.quality-stats span { color:#64748b; font-size:.78rem; }
.quality-list { display:grid; gap:8px; max-height:52vh; overflow:auto; }
.quality-row { display:flex; justify-content:space-between; gap:12px; border:1px solid #e2e8f0; border-left-width:5px; border-radius:10px; padding:10px; }
.quality-row.critical { border-left-color:#dc2626; }
.quality-row.warning { border-left-color:#f59e0b; }
.quality-row.info { border-left-color:#2563eb; }
.quality-row p { margin:4px 0 0; color:#475569; }
.table-scroll { overflow:auto; max-height:260px; }
.table-scroll table { width:100%; border-collapse:collapse; font-size:.82rem; }
.table-scroll th, .table-scroll td { border-bottom:1px solid #e2e8f0; padding:7px; text-align:left; }
.photo-button { display:block; padding:9px 12px; border-radius:9px; background:#e2e8f0; text-align:center; font-weight:700; cursor:pointer; }
.photo-button input { display:none; }
.photo-list { display:grid; gap:6px; }
.weekday-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
.check-card.compact { padding:7px; justify-content:center; }
@media (max-width:800px) {
  .network-status { order:99; width:100%; justify-content:center; }
  .quality-stats { grid-template-columns:repeat(2,1fr); }
  .quality-row { display:grid; }
  .weekday-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}


.link-button { border:0; background:transparent; color:#2563eb; padding:10px; font-weight:700; text-decoration:underline; }
.separator { border:0; border-top:1px solid #e2e8f0; margin:20px 0; }
.field small { color:#64748b; font-size:.76rem; }

.notification-list, .reset-list, .neighborhood-list { display:grid; gap:8px; max-height:62vh; overflow:auto; }
.notification-row, .reset-row, .neighborhood-row {
  display:grid; align-items:center; gap:10px; border:1px solid #e2e8f0; border-radius:10px; padding:10px;
}
.notification-row { grid-template-columns:1fr auto; }
.notification-row.unread { border-left:5px solid #2563eb; background:#eff6ff; }
.notification-row.read { opacity:.76; }
.notification-row p { margin:4px 0; color:#475569; }
.notification-row small, .reset-row small { display:block; color:#64748b; margin-top:3px; }
.reset-row { grid-template-columns:1fr 100px auto; }
.neighborhood-row { grid-template-columns:minmax(170px,1fr) 70px 80px 90px 150px auto auto; }
.neighborhood-row input, .address-toolbar input, .address-toolbar select, .bulk-form input, .bulk-form select {
  min-width:0; border:1px solid #cbd5e1; border-radius:8px; padding:8px; background:white;
}

.bar-list { display:grid; gap:8px; }
.bar-row { display:grid; grid-template-columns:minmax(150px,1fr) 2fr 70px; gap:10px; align-items:center; }
.bar-row > span { display:flex; align-items:center; gap:7px; }
.bar-row i { width:12px; height:12px; border-radius:50%; display:inline-block; }
.bar-row > div { height:10px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.bar-row b { display:block; height:100%; background:#2563eb; border-radius:999px; }
.stats-inline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.stats-inline span { display:flex; justify-content:space-between; padding:10px; border-radius:10px; background:#f1f5f9; }

.address-toolbar { display:grid; grid-template-columns:1.2fr repeat(5,minmax(120px,1fr)); gap:8px; margin:12px 0; }
.selection-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:9px; background:#f1f5f9; border-radius:10px; margin-bottom:8px; }
.address-table-header, .address-table-row { display:grid; grid-template-columns:28px minmax(130px,1fr) minmax(220px,2fr) 120px 100px; gap:8px; align-items:center; }
.address-table-header { padding:7px 9px; font-weight:800; color:#475569; font-size:.8rem; }
.address-management-table { display:grid; gap:5px; max-height:50vh; overflow:auto; }
.address-table-row { padding:8px; border:1px solid #e2e8f0; border-radius:8px; background:white; }
.address-table-row input { width:auto; }
.bulk-form { display:grid; grid-template-columns:1fr 1fr 1.6fr auto; gap:8px; margin-top:12px; }

.street-row [data-street-name] { width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px; font-weight:700; }

@media (max-width: 1050px) {
  .address-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .neighborhood-row { grid-template-columns:1fr 70px 80px 90px; }
  .neighborhood-row > span, .neighborhood-row > button { grid-column:auto; }
}
@media (max-width: 700px) {
  .reset-row, .neighborhood-row, .notification-row { grid-template-columns:1fr; }
  .address-toolbar, .bulk-form { grid-template-columns:1fr; }
  .address-table-header { display:none; }
  .address-table-row { grid-template-columns:28px 1fr; }
  .address-table-row span, .address-table-row strong { grid-column:2; }
  .stats-inline { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bar-row { grid-template-columns:1fr; }
}


.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:1rem}.dashboard-card{background:#f8fafc;border:1px solid #dbe3ed;border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.35rem}.dashboard-card h3{margin:0}.dashboard-card strong{font-size:1.5rem}.dashboard-card small,.muted{color:#64748b}.terrain-modal{max-width:520px}.terrain-screen{text-align:center;padding:.5rem}.terrain-progress{font-weight:700;color:#64748b}.terrain-screen h2{font-size:1.6rem;margin:.6rem 0}.terrain-number{font-size:4rem;font-weight:800;line-height:1}.terrain-actions{display:grid;gap:.75rem;margin:1.5rem 0}.terrain-actions button{min-height:64px;font-size:1.1rem;font-weight:800}.terrain-done{background:#15803d!important;color:white!important}.terrain-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:1rem}@media(max-width:640px){.terrain-modal{width:100%;max-width:none;height:100%;border-radius:0}.terrain-screen{padding-top:1rem}.terrain-number{font-size:5rem}.topbar-actions{gap:.35rem}}

.map-placement-banner{position:fixed;z-index:3000;top:76px;left:50%;transform:translateX(-50%);display:flex;gap:.8rem;align-items:center;background:#fff;border:2px solid #1d4ed8;border-radius:12px;padding:.7rem 1rem;box-shadow:0 8px 30px #0003}.map-placement-banner span{color:#475569}.placement-mode{cursor:crosshair!important}.coordinate-summary{display:flex;flex-direction:column;gap:.25rem;padding:.75rem;background:#eff6ff;border:1px solid #93c5fd;border-radius:8px}.cidex-box-list{max-height:280px;overflow:auto;text-align:left;border:1px solid #dbe3ed;border-radius:10px;margin:1rem 0}.cidex-box-row{display:grid;grid-template-columns:100px 1fr auto;gap:.5rem;padding:.65rem;border-bottom:1px solid #e2e8f0}.cidex-box-row:last-child{border-bottom:0}.cidex-box-row.done{opacity:.6;background:#f0fdf4}@media(max-width:640px){.map-placement-banner{top:auto;bottom:1rem;width:calc(100% - 2rem);flex-wrap:wrap}.cidex-box-row{grid-template-columns:85px 1fr}.cidex-box-row span:last-child{grid-column:2}}

.modal-title-actions { display:flex; gap:8px; flex-wrap:wrap; }
.bulk-street-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 220px auto auto; gap:8px; margin:12px 0; }
.bulk-street-toolbar input, .bulk-street-toolbar select, .bulk-street-target select { border:1px solid #cbd5e1; border-radius:8px; padding:9px; background:white; }
.bulk-street-list { max-height:52vh; overflow:auto; display:grid; gap:6px; padding-right:4px; }
.bulk-street-row { display:grid; grid-template-columns:28px minmax(200px,1fr) minmax(130px,220px); gap:8px; align-items:center; border:1px solid #e2e8f0; border-radius:9px; padding:8px 10px; cursor:pointer; }
.bulk-street-row:hover { background:#f8fafc; }
.bulk-street-row strong, .bulk-street-row small { display:block; }
.bulk-street-row small, .bulk-street-row em { color:#64748b; font-size:.82rem; font-style:normal; }
.bulk-street-target { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:14px; align-items:end; margin-top:14px; padding-top:12px; border-top:1px solid #e2e8f0; }
.bulk-street-target label:first-child { display:grid; gap:6px; font-weight:700; }
@media (max-width:760px) { .bulk-street-toolbar, .bulk-street-target { grid-template-columns:1fr; } .bulk-street-row { grid-template-columns:28px 1fr; } .bulk-street-row em { grid-column:2; } }

.neighborhood-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin-top:8px}.palette-color{display:flex;align-items:center;gap:7px;border:1px solid #cbd5e1;border-radius:9px;padding:7px;background:white;text-align:left}.palette-color span{width:28px;height:28px;border-radius:7px;background:var(--palette-color);border:2px solid rgba(15,23,42,.16);flex:none}.palette-color small{font-size:.72rem;overflow:hidden;text-overflow:ellipsis}.palette-color.selected{outline:3px solid #0f172a;outline-offset:1px}.palette-color.used{opacity:.55}.palette-color:disabled{cursor:not-allowed}.row-color-control{display:flex;justify-content:center}.color-preview{width:42px;height:34px;border-radius:8px;border:2px solid #cbd5e1;background:var(--preview-color)}.bulk-unassigned-only{display:flex;align-items:center;gap:8px;margin:8px 0 4px;padding:10px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:9px}.bulk-unassigned-only strong{margin-left:auto}
.palette-editor-list { display: grid; gap: .6rem; margin: 1rem 0; }
.palette-editor-row, .custom-color-line { display: grid; grid-template-columns: 54px minmax(120px, 1fr) auto; gap: .6rem; align-items: center; }
.palette-editor-row input[type="color"], .custom-color-line input[type="color"] { width: 54px; height: 42px; padding: 2px; }
.custom-color-line { grid-template-columns: 64px minmax(120px, 220px); }

.bulk-street-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,auto) auto; align-items:center; gap:.75rem; }
.bulk-street-select { display:flex; align-items:center; gap:.65rem; min-width:0; }
.bulk-street-row .compact { padding:.4rem .65rem; }
@media (max-width:700px){ .bulk-street-row{grid-template-columns:1fr auto}.bulk-street-row em{grid-column:1/-1}.bulk-street-row .compact{grid-column:2;grid-row:1} }

[hidden] { display:none !important; }

.territory-selector{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.territory-selector select{max-width:210px;padding:.45rem .65rem;border:1px solid #cbd5e1;border-radius:.65rem;background:white}


.network-status::before{content:"";width:8px;height:8px;border-radius:50%;margin-right:7px;background:currentColor}
.network-status.syncing{color:#fde68a;background:#422006;border-color:#a16207}
.network-status.syncing::before{animation:sync-pulse 1s infinite}
.network-status.synced{color:#bbf7d0;background:#052e16;border-color:#15803d}
.network-status.failed{color:#fecaca;background:#450a0a;border-color:#b91c1c}
.network-status.offline{color:#e2e8f0;background:#334155;border-color:#64748b}
@keyframes sync-pulse{0%,100%{opacity:.35}50%{opacity:1}}