*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial;background:#f5f7fa;color:#172033}aside{position:fixed;left:0;top:0;bottom:0;width:220px;background:#111827;padding:24px 16px;color:white}.brand{font-size:24px;font-weight:800;line-height:.9;margin:6px 10px 34px}.brand span{color:#60a5fa;font-size:15px;letter-spacing:2px}aside a,.future{display:block;padding:11px 12px;margin:4px 0;border-radius:8px;color:#d1d5db;text-decoration:none}.future{opacity:.45}aside a:hover{background:#1f2937;color:white}main{margin-left:220px;padding:38px;max-width:1400px}.loginmain{margin:0;min-height:100vh;display:grid;place-items:center}h1{margin:0 0 6px;font-size:30px}p{color:#657086}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}.card,section,.panel,.loginbox{background:white;border:1px solid #e4e8ef;border-radius:14px;box-shadow:0 3px 12px #00000008}.card{padding:22px}.card small{display:block;color:#788399;margin-bottom:12px}.card strong{font-size:22px}section{padding:22px}section h2{margin-top:0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #edf0f4}th{color:#687386;font-size:13px}a{color:#2563eb}.button,button{display:inline-block;background:#2563eb;color:white;border:0;border-radius:8px;padding:11px 16px;text-decoration:none;font-weight:600;cursor:pointer}.status{font-size:13px;border-radius:99px;padding:4px 9px;background:#e5e7eb}.status.online{background:#dcfce7;color:#166534}.status.offline{background:#fee2e2;color:#991b1b}.empty{text-align:center;padding:55px;color:#778198}.panel{max-width:700px;padding:24px}.panel label,.loginbox label{display:block;font-size:13px;font-weight:600;margin:15px 0 6px}input{width:100%;border:1px solid #d5dbe5;border-radius:8px;padding:11px;font:inherit}.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.panel button{margin-top:20px}.alert{background:#fff1f2;color:#9f1239;padding:13px;border-radius:8px;margin:16px 0;overflow:auto}.alert pre{white-space:pre-wrap}.loginbox{width:390px;padding:34px}.loginbox button{width:100%;margin-top:22px}.loginbox h1{text-align:center}.loginbox p{text-align:center}@media(max-width:900px){aside{width:170px}main{margin-left:170px;padding:20px}.cards{grid-template-columns:1fr 1fr}}
.actions{display:flex;gap:10px;align-items:center}.actions form{margin:0}
.secondary,.secondarylink{background:#e8eef8!important;color:#1f4b8f!important}
.danger{background:#b91c1c}
.cancel{margin-left:12px}
.keybox{max-width:900px;background:#fff;border:1px solid #e4e8ef;border-radius:14px;padding:20px;margin:20px 0}
.keyhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
textarea{width:100%;min-height:90px;border:1px solid #d5dbe5;border-radius:8px;padding:11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;margin-top:12px;resize:vertical}
.hint{font-size:13px}
code{background:#f1f5f9;padding:2px 5px;border-radius:4px}

.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}
.sectionhead h2{margin-bottom:4px}.sectionhead p{margin:0}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.card strong{overflow-wrap:anywhere}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.top{align-items:flex-start}.actions{flex-wrap:wrap}}

.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}
.sectionhead h2{margin-bottom:4px}.sectionhead p{margin:0}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.card strong{overflow-wrap:anywhere}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.top{align-items:flex-start}.actions{flex-wrap:wrap}}

.badge{display:inline-block;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700}
.badge.good{background:#e8f7ee;color:#176b3a}.badge.bad{background:#fdecec;color:#a61b1b}
.portgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.portblock{background:#f7f9fc;border:1px solid #e0e6ef;border-radius:10px;padding:12px;text-align:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
@media(max-width:1000px){.portgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.portgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.portpill{display:inline-block;padding:2px 6px;margin:1px;border-radius:7px;background:#eef3f8;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.successbox{padding:14px 16px;border-radius:10px;background:#e9f8ef;color:#176b3a;font-weight:700;border:1px solid #ccebd8}
.smallbtn{padding:5px 8px;margin:2px;font-size:12px}
.proposal{display:flex;gap:18px;align-items:center;padding:16px;border:1px solid #d9e3ec;border-radius:12px}
.proposalport{font-size:24px;font-weight:800;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.smallbtn{padding:5px 8px;margin:2px;font-size:12px}
.proposal{display:flex;gap:18px;align-items:center;padding:16px;border:1px solid #d9e3ec;border-radius:12px}
.proposalport{font-size:24px;font-weight:800;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.selectedblock{outline:2px solid currentColor;font-weight:700}
.warnpill,.badpill,.okpill{display:inline-block;padding:3px 7px;border-radius:7px;font-size:11px;font-weight:800}
.warnpill{background:#fff3cd;color:#765b00}
.badpill{background:#fde8e8;color:#8a1c1c}
.okpill{background:#e9f8ef;color:#176b3a}
select{min-width:320px;max-width:100%;padding:10px 12px;border:1px solid #ccd4dd;border-radius:8px;background:white}