:root{--bg:#eef1f4;--ink:#17222d;--mute:#5d6b79;--line:#d3dae1;--card:#fff;--acc:#0d6e6e;--acc-ink:#fff;--bad:#b3261e;--ok:#17703b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:1200px;margin:0 auto;padding:24px 16px 64px}h1{font-size:1.6rem;margin:.2em 0 .4em;letter-spacing:-.01em}h2{font-size:1.2rem;margin:.1em 0 .6em}h3{font-size:1rem}a{color:var(--acc)}code{font:13px ui-monospace,Menlo,Consolas,monospace;background:#e6ebef;padding:2px 6px;border-radius:4px;word-break:break-all}
.top{display:flex;justify-content:space-between;align-items:center;background:var(--ink);padding:12px 20px;gap:12px}.top .brand{color:#fff;font-weight:700;text-decoration:none;font-size:1.05rem}.top nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.top nav a,.top .link{color:#cfe3e3}.top form{margin:0}
.bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}.muted{color:var(--mute)}.small{font-size:.85rem}
.btn{display:inline-block;background:var(--acc);color:var(--acc-ink);border:0;border-radius:6px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}.btn:hover{filter:brightness(1.1)}.btn.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc)}.link{background:none;border:0;padding:0;font:inherit;color:var(--acc);cursor:pointer;text-decoration:underline}.danger{color:var(--bad)}:focus-visible{outline:3px solid #f2b705;outline-offset:2px}
input,select,textarea{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}label{display:block;font-weight:600;margin-bottom:14px}label input,label select,label textarea{margin-top:5px;font-weight:400}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;margin-top:12px}.narrow{max-width:420px;margin:12vh auto 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px}.row{display:flex;gap:8px;align-items:center}.row input{margin-top:5px}.row .btn{margin-top:5px}.wrap{flex-wrap:wrap}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 20px;align-items:flex-end}.inline-form input{flex:1 1 180px;width:auto}.inline-form label{flex:1 1 220px}.alert{background:#fde8e6;color:var(--bad);padding:8px 12px;border-radius:6px}.okmsg{background:#e3f4ea;color:var(--ok);padding:8px 12px;border-radius:6px}
.list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:8px}.list li{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}.list li:last-child{border:0}.list form{margin:0}.list a.grow,.grow{flex:1;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;min-width:180px}.list a.grow:hover strong{color:var(--acc)}.empty{padding:32px;text-align:center;color:var(--mute);border:1px dashed var(--line);border-radius:8px}.search{margin-bottom:12px;max-width:380px}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:8px}table{width:100%;border-collapse:collapse}th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}th{font-size:.85rem;color:var(--mute);background:#f6f8fa}tr:last-child td{border:0}.tag{background:#dcecec;color:#0a4f4f;padding:2px 8px;border-radius:99px;font-size:.8rem;white-space:nowrap}.pw{white-space:nowrap}.pw .link{margin-left:8px}.acts{white-space:nowrap}.acts form{display:inline;margin-left:10px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:6px;z-index:20}
.mini-edit{position:relative}.mini-edit summary,details summary{cursor:pointer}.editbox{position:absolute;z-index:5;right:0;top:25px;width:min(340px,85vw);padding:16px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 30px #17222d22;border-radius:8px}.card-inner{margin-top:16px}.perm-table{border:1px solid var(--line);border-radius:8px;overflow-x:auto;margin:12px 0 18px}.perm-row{display:grid;grid-template-columns:minmax(180px,1fr) repeat(4,minmax(78px,100px));align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.perm-row:last-child{border:0}.perm-head{font-weight:700;background:#f6f8fa;font-size:.86rem}.checkcell{margin:0;text-align:center}.checkcell input{width:18px;height:18px;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.user-card{padding:18px 24px}.chips{display:flex;gap:8px;flex-wrap:wrap}
.network-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}.device-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 3px 12px #17222d0a}.device-head{display:flex;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}.device-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#dcecec;color:#0a4f4f;font-size:23px}.ports{display:flex;flex-direction:column;gap:6px;margin:12px 0}.port-select{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--line);background:#f8fafb;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--ink);font:inherit}.port-select:hover,.port-select.selected{border-color:var(--acc);background:#e3f4f1}.port-select.connected .port-dot{background:var(--ok)}.port-dot{width:10px;height:10px;border-radius:3px;background:#9aa7b2;flex:none}.port-select.selected .port-dot{background:var(--acc)}.add-port{display:grid;grid-template-columns:90px 1fr;gap:6px}.add-port button{grid-column:1/-1}.add-port input{min-width:0}.connection-list{display:grid;gap:10px}.connection{display:grid;grid-template-columns:minmax(120px,1fr) minmax(80px,.7fr) minmax(120px,1fr) auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:12px}.connection-end{display:flex;flex-direction:column}.connection-end span{font-size:.85rem;color:var(--mute)}.connection-line{display:flex;align-items:center;gap:4px;color:var(--acc)}.connection-line span{height:2px;background:var(--acc);flex:1}.connection-line b{font-size:20px}@media(max-width:700px){.top{align-items:flex-start;flex-direction:column}.top nav{gap:12px}.connection{grid-template-columns:1fr}.connection-line{max-width:160px}.perm-row{grid-template-columns:minmax(130px,1fr) repeat(4,60px);font-size:.86rem}}