:root { --accent:#0f6cbd; --bg:#f5f6f8; --text:#242424; --muted:#616161; --card:#fff; --border:#e5e7eb; --ok:#0e7a0d; --bad:#c50f1f; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font: 14px/1.45 "Segoe UI Variable","Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--text); }
.app { display:flex; min-height:100vh; }
.nav { width:200px; flex-shrink:0; background:#fff; border-right:1px solid var(--border); padding:18px 14px; }
.nav .brand { font-size:18px; font-weight:750; letter-spacing:0.06em; color:#0f6cbd; margin-bottom:16px; }
.nav a { display:block; padding:7px 10px; border-radius:6px; color:var(--text); text-decoration:none; margin-bottom:2px; }
.nav a:hover { background:#f3f4f6; }
.nav a.on { background:#e8f3fc; color:#0c3b5e; font-weight:650; }
.nav .out { margin-top:18px; color:var(--muted); font-size:13px; }
.main { flex:1; padding:24px 28px 64px; min-width:0; }
h1 { font-size:22px; margin-bottom:4px; }
.lede { color:var(--muted); margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:14px; }
h2 { font-size:14px; margin-bottom:10px; }
label { display:block; color:var(--muted); font-size:12px; margin:8px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], textarea, select {
  width:100%; border:1px solid #d1d5db; border-radius:4px; padding:7px 10px; min-height:32px;
  font:13px/1.35 "Segoe UI Variable","Segoe UI",system-ui,sans-serif; background:#fff;
  box-shadow:none; outline:none; appearance:none; -webkit-appearance:none;
}
#swTable input, #portsTable input,
#swTable input[type=text], #portsTable input[type=text], #portsTable input[type=url] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 7px 10px !important;
  min-height: 32px !important;
  height: 32px;
  font: 13px/1.35 "Segoe UI Variable","Segoe UI",system-ui,sans-serif !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none;
  appearance: none !important;
  -webkit-appearance: none !important;
}
textarea { min-height:110px; }
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:4px; padding:7px 12px; font-weight:600; cursor:pointer; font:inherit; }
button.ghost, .btn.ghost { background:#fff; color:var(--text); border:1px solid #d1d5db; }
button.danger { background:var(--bad); color:#fff; }
.ok { color:var(--ok); margin-bottom:10px; }
.err { color:var(--bad); margin-bottom:10px; }
table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
th { text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; padding:7px 6px; border-bottom:1px solid var(--border); }
td { padding:6px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
td input[type=text], td input[type=email], td input[type=url], td input[type=color] { width:100%; }
#swTable input, #portsTable input[type=text], #portsTable input[type=url],
#portsTable input:not([type=checkbox]):not([type=color]),
#swTable input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 7px 10px;
  min-height: 32px;
  font: 13px/1.35 "Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  background: #fff;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
#swTable th:nth-child(1), #swTable td:nth-child(1) { width: 22%; }
#swTable th:nth-child(2), #swTable td:nth-child(2) { width: 28%; }
#swTable th:nth-child(3), #swTable td:nth-child(3) { width: 88px; }
#swTable th:nth-child(4), #swTable td:nth-child(4) { width: auto; }
#swTable th:nth-child(5), #swTable td:nth-child(5),
#portsTable th:nth-child(5), #portsTable td:nth-child(5) { width: 44px; }
#portsTable th:nth-child(2), #portsTable td:nth-child(2) { width: 56px; }
#portsTable th:nth-child(4), #portsTable td:nth-child(4) { width: 72px; }
#portsTable input[type=color] { width: 42px; height: 32px; padding: 2px; border: 1px solid #d1d5db; border-radius: 4px; }
.pill { display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:700; }
.pill.on { background:#dff6dd; color:#0e7a0d; }
.pill.off { background:#fde7e9; color:#c50f1f; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width:800px){ .app{flex-direction:column;} .nav{width:auto;border-right:0;border-bottom:1px solid var(--border);} .grid2,.grid3{grid-template-columns:1fr;} }
.hint { color:var(--muted); font-size:12px; margin:6px 0 10px; }
.login { max-width:420px; margin:64px auto; }