:root { --bg:#0b1220; --card:#111a2b; --ink:#e8f0ff; --sub:#9fb3d9; --acc:#4aa3ff; --mut:#1a2538; }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0; font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:var(--bg)}
  header{padding:12px 16px; border-bottom:1px solid #20304d; display:flex; align-items:center; gap:12px}
  h1{font-size:16px; margin:0; font-weight:700}
  .layout{display:grid; grid-template-columns:380px 1fr; height:calc(100% - 58px)}
  .layout.compact{grid-template-columns:0px 1fr}
  aside{border-right:1px solid #20304d; padding:10px; overflow:auto}
  main{position:relative}
  #map{position:absolute; inset:0}
  .card{background:var(--card); border:1px solid #1e2b45; border-radius:12px; padding:12px; margin-bottom:12px}
  .card h2{font-size:14px; margin:0 0 8px; color:#cfe1ff}
  label{display:block; margin:6px 0 4px; color:#c2d4fa}
  input[type="text"], select, textarea, input[type="number"]{width:100%; padding:8px; border-radius:8px; border:1px solid #304262; background:#0f1626; color:#e8f0ff}
  textarea{min-height:60px}
  .row{display:flex; gap:8px}
  .row > *{flex:1}
  .btn{background:#173257; color:#d8e7ff; border:1px solid #24446f; padding:8px 10px; border-radius:10px; cursor:pointer}
  .btn:hover{background:#1b3a65}
  .btn.ghost{background:transparent}
  .btn.warn{background:#5a1b1b; border-color:#7a2b2b}
  .muted{color:#9fb3d9}
  .list{max-height:260px; overflow:auto; border:1px dashed #2a3a5c; border-radius:10px; padding:8px}
  table{width:100%; border-collapse:collapse}
  th,td{border-bottom:1px solid #223457; padding:6px; text-align:left}
  th{color:#b9cff8; position:sticky; top:0; background:#0f1626}
  .pill{padding:2px 6px; border-radius:6px; font-size:12px; background:#0d223f; color:#cde0ff; border:1px solid #25446e}
  .action{cursor:pointer; text-decoration:underline; color:#b8d7ff}
  .modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); z-index:20}
  .modal.on{display:grid}
  .modal .panel{width:min(960px, 94vw); max-height:88vh; overflow:auto; background:var(--card); border:1px solid #1e2b45; border-radius:14px; padding:14px}
  .hr{height:1px; background:#20304d; margin:10px 0}
  .flash{position:fixed; right:16px; bottom:16px; background:#0f3a1f; color:#c8ffd7; border:1px solid #257a3e; padding:10px 12px; border-radius:10px; display:none}
  .flash.on{display:block}
  .hint{position:fixed; left:50%; transform:translateX(-50%); top:12px; background:#112846; color:#cfe5ff; border:1px solid #295b9b; padding:6px 10px; border-radius:8px; display:none; z-index:30}
  .hint.on{display:block}
  .dot{display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid #20304d; vertical-align:middle}
  .searchbox{position:absolute; z-index:10; left:12px; top:72px; width:320px}
  .searchbox input{width:100%; padding:8px; border-radius:10px; border:1px solid #304262; background:#0f1626; color:#e8f0ff}
  .port-actions{margin-top:8px; display:flex; justify-content:flex-end}
  .del-btn{background:#3a1620; border:1px solid #6d2034; color:#ffd9e1; border-radius:8px; padding:4px 8px; cursor:pointer}
  .del-btn:hover{background:#521a28}
  .indent-dk td:first-child{padding-left:18px}
  .indent-sk td:first-child{padding-left:36px}