body { font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0f1115; color: #e6e6e6; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 22px; margin: 12px 0 16px; }
.topbar { display:flex; align-items:center; justify-content:space-between; background:#141823; border-bottom:1px solid #2a2e39; padding:10px 16px; }
.topbar .brand a { color:#e6e6e6; text-decoration:none; font-weight:700; }
.topbar .menu a { margin-right:14px; color:#aab2c5; text-decoration:none; }
.topbar .menu a:hover { color:#e6e6e6; }
.topbar .menu a.disabled { opacity:.4; pointer-events:none; }
.topbar .auth a { color:#7aa2f7; margin-left:10px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid #2a2e39; padding: 10px; text-align: left; }
.table tr:hover { background: #161a22; }
.ports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.port-card { border: 2px solid #2a2e39; border-radius: 8px; padding: 10px; background: #141823; }
.port-card.up { border-color: #1ea672; box-shadow: inset 0 0 0 2px rgba(30,166,114,.2); }
.port-card.down { border-color: #b33a3a; box-shadow: inset 0 0 0 2px rgba(179,58,58,.2); }
.port-name { font-weight: 600; margin-bottom: 6px; }
.port-status { font-size: 12px; opacity: .8; }
.port-speed { font-size: 12px; margin-top: 6px; color: #9ad1a3; }
.port-vlan { font-size: 12px; margin-top: 6px; color: #e6c07b; }
.port-desc { font-size: 12px; margin-top: 6px; color: #9aa0aa; }
.badge { display: inline-block; font-size: 11px; padding: 2px 6px; border-radius: 6px; margin-left: 6px; }
.badge.trunk { background: #3a2f55; color: #c2a6ff; border: 1px solid #5a4b85; }
.badge.poe { background: #2b4f39; color: #9ee6b0; border: 1px solid #3c7a54; }
.badge.clients { background: #25425e; color: #a6d3ff; border: 1px solid #356688; }
.form-row { margin:10px 0; display:flex; flex-direction:column; max-width:420px; }
.form-row label { font-size:12px; opacity:.8; margin-bottom:4px; }
input, select { background:#0f141f; color:#e6e6e6; border:1px solid #2a2e39; border-radius:6px; padding:8px 10px; }
button { background:#2f71ea; color:white; border:none; border-radius:6px; padding:8px 14px; cursor:pointer; }
button:hover { background:#1f5fd3; }
.btn-toggle { font-weight:700; }
.btn-toggle.enable { background:#ff8c1a; color:#57d27a; border:1px solid #cc6f00; }
.btn-toggle.enable:hover { background:#e07a00; }
.btn-toggle.disable { background:#00c853; color:#ff4d4d; border:1px solid #00a43f; }
.btn-toggle.disable:hover { background:#00b74a; }
.inline { display:inline; }
.linklike { background:none; border:none; color:#e6c07b; padding:0; cursor:pointer; text-decoration:underline; }
.linklike:hover { color:#ffd27b; }
.error { color:#ff7a7a; margin:8px 0; }
.footer { margin-top: 20px; }
a { color: #7aa2f7; text-decoration: none; }
a:hover { text-decoration: underline; }
.notice { padding:10px 12px; border-radius:8px; margin:10px 0 16px; border:1px solid transparent; }
.notice.success { background:#0f1f17; border-color:#1e7f4a; color:#8de1a8; }
.notice.fail { background:#2a1414; border-color:#8a2f2f; color:#ff9b9b; }