:root {
  color-scheme: dark;
  --ink: #f1f5f4;
  --muted: #9aa9a7;
  --canvas: #071211;
  --surface: #0e1d1b;
  --surface-2: #122724;
  --line: #24423d;
  --mint: #86e3c1;
  --mint-deep: #2d8f70;
  --amber: #ffc66b;
  --danger: #ff8f83;
  --shadow: 0 18px 42px rgb(0 0 0 / 22%);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 15% 0%, #16352e 0, transparent 32rem), var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; min-height: 40px; touch-action: manipulation; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); direction: ltr; }
.sidebar { direction: ltr; background: rgb(4 14 13 / 74%); border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 30px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #3b846f; border-radius: 11px; color: var(--mint); background: #102b25; font-size: 19px; }
.brand strong { display: block; font-family: Georgia, serif; letter-spacing: .02em; font-size: 16px; }
.brand small { display: block; color: var(--muted); direction: ltr; text-align: left; margin-top: 3px; font-size: 10px; letter-spacing: .11em; }
nav { display: grid; gap: 4px; }
nav button { color: var(--muted); background: transparent; border: 0; border-radius: 10px; padding: 11px 12px; text-align: left; transition: .16s ease; }
nav button:hover, nav button.active { background: #18342e; color: var(--ink); }
nav button.active { box-shadow: inset 2px 0 0 var(--mint); }
.sidebar-note { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 5px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.sidebar-note p { margin: 10px 0 0; }
.main-content { direction: ltr; min-width: 0; padding: 36px clamp(20px, 4vw, 64px) 48px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 30px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(25px, 3vw, 36px); margin-bottom: 0; letter-spacing: -.03em; }
h2 { font-size: 19px; margin-bottom: 4px; }
h3 { font-size: 15px; }
.eyebrow { color: var(--mint); direction: ltr; text-align: left; letter-spacing: .14em; font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.muted { color: var(--muted); font-size: 12px; }
button.primary, button.secondary, button.danger { border-radius: 8px; padding: 9px 13px; border: 1px solid transparent; font-weight: 700; font-size: 13px; }
button.primary { color: #04110f; background: var(--mint); }
button.primary:hover { background: #b5f1d8; }
button.secondary { color: var(--ink); background: #18332e; border-color: #31534c; }
button.secondary:hover { border-color: var(--mint); }
button.danger { color: #ffd9d4; background: #482624; border-color: #79413b; }
.notice { border: 1px solid #765d32; color: #ffdf9a; background: rgb(105 77 24 / 22%); padding: 13px 16px; border-radius: 10px; margin-bottom: 20px; line-height: 1.7; }
.grid { display: grid; gap: 16px; }
.grid.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel, .stat { background: linear-gradient(145deg, rgb(18 42 37 / 90%), rgb(10 29 26 / 90%)); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.panel { padding: 20px; }
.stat { padding: 17px; min-height: 116px; }
.stat span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 17px; }
.stat strong { display: block; font-size: 30px; letter-spacing: -.04em; direction: ltr; text-align: left; }
.stat strong.small-number { font-size: 21px; }
.panel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 13px; margin-bottom: 13px; }
.panel-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.health-list { display: grid; gap: 12px; }
.health-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgb(42 73 67 / 65%); font-size: 13px; }
.health-row:last-child { border: 0; }
.health-row span:last-child { text-align: left; direction: ltr; }
.badge { display: inline-block; direction: ltr; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge.good { color: #baf8db; background: #164b3b; }
.badge.warn { color: #ffe0a5; background: #624a21; }
.badge.bad { color: #ffd1cb; background: #612e2c; }
.badge.neutral { color: #c6d5d2; background: #233a36; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 13px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid rgb(41 72 66 / 70%); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.ltr, code { direction: ltr; text-align: left; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
.actions { display: flex; gap: 6px; justify-content: flex-start; direction: ltr; }
.actions button { padding: 6px 8px; font-size: 11px; }
.progress { height: 6px; min-width: 100px; background: #1e3833; border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint-deep), var(--mint)); border-radius: inherit; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
label { color: var(--muted); display: grid; gap: 7px; font-size: 12px; }
input:not([type="checkbox"]), select { width: 100%; color: var(--ink); background: #0a1b18; border: 1px solid #31524c; border-radius: 8px; padding: 9px 10px; }
input:focus, select:focus { outline: 2px solid #4bb492; outline-offset: 1px; }
.empty-state, .loading { padding: 46px 20px; color: var(--muted); text-align: center; border: 1px dashed #315047; border-radius: 12px; }
.empty-state strong { display: block; color: var(--ink); margin-bottom: 7px; }
.empty-state p { margin: 0; }
.copy-row { display: flex; direction: ltr; gap: 8px; align-items: center; }
.copy-row code { flex: 1; overflow: auto; color: #c5eee0; background: #081916; padding: 10px; border-radius: 7px; text-align: left; white-space: nowrap; }
.copy-row button { flex: none; }
.list-clean { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-clean li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.list-clean li:last-child { border-bottom: 0; padding-bottom: 0; }
.login-layer { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgb(3 11 10 / 88%); backdrop-filter: blur(10px); }
.login-layer[hidden] { display: none; }
.login-card { width: min(420px, 100%); padding: 30px; background: #102521; border: 1px solid #3d7063; border-radius: 16px; box-shadow: var(--shadow); }
.login-card h1 { margin-bottom: 12px; }
.login-card p { color: var(--muted); line-height: 1.8; font-size: 13px; }
.login-card button { margin-top: 20px; width: 100%; }
.form-error { min-height: 20px; color: var(--danger) !important; margin: 9px 0 0 !important; }
.view-controls { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.view-controls select { color: var(--ink); background: #15332d; border: 1px solid #31524c; padding: 8px; border-radius: 8px; }
.settings-form { display: grid; gap: 15px; }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkbox-label { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--mint); }
.country-picker { grid-column: 1 / -1; margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.country-picker legend { color: var(--muted); padding: 0 6px; font-size: 12px; }
.country-checkboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: 260px; overflow: auto; padding: 3px; }
.install-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.install-card { width: min(440px, 100%); padding: 34px; text-align: center; background: linear-gradient(145deg, rgb(18 42 37 / 94%), rgb(10 29 26 / 94%)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.install-card .brand-mark { margin: 0 auto 22px; }
.install-card h1 { margin-bottom: 14px; }
.install-card p:not(.eyebrow) { color: var(--muted); line-height: 1.7; font-size: 14px; }
.install-button { display: block; margin-top: 26px; border-radius: 10px; padding: 14px 16px; color: #04110f; background: var(--mint); font-weight: 800; text-decoration: none; }
.install-button:hover { background: #b5f1d8; }

@media (max-width: 900px) { .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.two { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .shell { display: block; } .sidebar { padding: 13px; gap: 13px; border-right: 0; border-bottom: 1px solid var(--line); } nav { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } nav button { white-space: nowrap; flex: 0 0 auto; } .sidebar-note { display: none; } .main-content { padding: 24px 17px; } .topbar { align-items: stretch; flex-direction: column; } .topbar-actions { justify-content: space-between; } .form-grid, .form-grid.two-columns { grid-template-columns: 1fr; } .country-checkboxes { grid-template-columns: 1fr; } .panel { padding: 16px; } .copy-row { align-items: stretch; flex-direction: column; } .copy-row button { width: 100%; } }