:root{--bg:#0c1118;--panel:#121923;--panel2:#17212e;--line:#263244;--text:#edf3fa;--muted:#8fa0b4;--accent:#4e8cff;--danger:#ff5d73;--ok:#35c58a;--shadow:0 12px 35px rgba(0,0,0,.23)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#0b1017,#101720 55%,#0b1017);color:var(--text);font:14px/1.45 Inter,Segoe UI,Arial,sans-serif;min-height:100vh}button,input,a.button-like{font:inherit}.topbar{height:72px;display:flex;align-items:center;gap:28px;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(12,17,24,.92);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;min-width:240px}.brand strong{display:block}.brand small{display:block;color:var(--muted);font-size:11px}.brand-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#377ef6,#74a4ff);color:#fff;font-weight:800;box-shadow:var(--shadow)}.brand-mark.small{width:38px;height:38px;border-radius:11px}.topbar nav{display:flex;gap:4px}.nav-btn,.ghost,.icon-btn,.button-like{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:10px;padding:9px 12px;cursor:pointer;text-decoration:none}.nav-btn.active,.nav-btn:hover,.ghost:hover,.button-like:hover{background:var(--panel2);color:var(--text);border-color:var(--line)}.userbox{margin-left:auto;display:flex;align-items:center;gap:12px}.userbox form{margin:0}main{padding:26px;max-width:1600px;margin:auto}.view{display:none}.view.active{display:block}.grid-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:22px}.main-column{display:grid;gap:22px}.card{background:rgba(18,25,35,.94);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.section-head h2{font-size:18px;margin:0 0 3px}.section-head p{margin:0;color:var(--muted)}.control-card{padding:24px}.quick-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;margin-top:22px}input{width:100%;border:1px solid var(--line);background:#0d141d;color:var(--text);border-radius:10px;padding:12px 13px;outline:none}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(78,140,255,.12)}button.primary,.primary{border:0;background:var(--accent);color:#fff;border-radius:10px;padding:11px 16px;font-weight:600;cursor:pointer}.danger-outline{border:1px solid rgba(255,93,115,.55);background:transparent;color:#ff8b9b;border-radius:10px;padding:11px 16px;cursor:pointer}.type-toggles{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.type-toggles label{background:var(--panel2);border:1px solid var(--line);padding:7px 11px;border-radius:9px;color:#b9c6d6}.type-toggles input{width:auto;margin-right:6px}.status-line{min-height:20px;color:var(--muted);margin-top:10px}.full-btn{width:82px;height:72px;border-radius:16px;border:1px solid var(--line);background:#0e151e;color:#dce7f5;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}.full-btn span{font-size:24px;font-weight:800}.full-btn small{color:var(--muted)}.full-btn.active{background:rgba(255,93,115,.13);border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,93,115,.07)}.full-btn.active span,.full-btn.active small{color:#ff8797}.stats-card{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding:0;overflow:hidden}.stat{padding:20px;border-right:1px solid var(--line);background:rgba(20,29,40,.72)}.stat:last-child{border:0}.stat strong{display:block;font-size:26px}.stat span{color:var(--muted)}.table-wrap{overflow:auto;margin-top:14px}table{width:100%;border-collapse:collapse}th{text-align:left;color:var(--muted);font-size:12px;font-weight:600;border-bottom:1px solid var(--line);padding:10px}td{padding:12px 10px;border-bottom:1px solid rgba(38,50,68,.65)}tr:last-child td{border-bottom:0}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.badge{display:inline-block;border:1px solid var(--line);background:var(--panel2);padding:3px 7px;border-radius:7px;font-size:11px;text-transform:uppercase}.type-ip{color:#79b7ff}.type-cidr{color:#b7a4ff}.type-domain{color:#6fddad}.type-wildcard{color:#ffbf6e}.history-card{max-height:calc(100vh - 124px);display:flex;flex-direction:column}.history-list{overflow:auto;margin-top:14px;padding-right:4px}.history-item{padding:12px 2px;border-bottom:1px solid rgba(38,50,68,.7)}.history-item time{display:block;color:var(--muted);font-size:11px;margin-top:5px}.small-text{font-size:12px;color:#cad5e2}.icon-btn{border-color:var(--line);padding:6px 9px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.filter-row{margin-top:18px;max-width:520px}.actions{white-space:nowrap}.danger-text{color:#ff8091}.status-pill{font-size:11px;padding:4px 7px;border-radius:20px}.status-pill.on{color:#65e1ad;background:rgba(53,197,138,.11)}.status-pill.off{color:#b7c2cf;background:#202a37}.empty{text-align:center;color:var(--muted);padding:28px}.toast{position:fixed;right:24px;bottom:24px;transform:translateY(20px);opacity:0;pointer-events:none;background:#1d2937;border:1px solid #34455c;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);transition:.2s}.toast.show{transform:none;opacity:1}.toast.bad{border-color:#8b3c4a;color:#ffacb7}dialog{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);min-width:440px;padding:0;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(0,0,0,.58)}.modal-form{padding:22px}.modal-form h3{margin-top:0}.modal-form label{display:block;margin:14px 0;color:var(--muted)}.modal-form label input{margin-top:6px}.switch-row input{width:auto;margin-right:8px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.error{color:#ff8d9c;margin-top:10px}.hidden{display:none}.login-body{display:grid;place-items:center}.login-card{width:min(420px,calc(100vw - 32px));padding:34px;background:rgba(18,25,35,.96);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.login-card .brand-mark{margin-bottom:20px}.login-card h1{margin:0}.muted{color:var(--muted)}.login-form{display:grid;gap:16px;margin-top:24px}.login-form label{color:var(--muted)}.login-form input{margin-top:6px}@media(max-width:1050px){.grid-dashboard{grid-template-columns:1fr}.history-card{max-height:none}.stats-card{grid-template-columns:repeat(2,1fr)}.topbar{gap:10px}.brand{min-width:auto}.brand small{display:none}}@media(max-width:700px){main{padding:14px}.topbar{padding:0 12px}.brand strong{display:none}.topbar nav{overflow:auto}.userbox #username{display:none}.quick-row{grid-template-columns:1fr}.stats-card{grid-template-columns:1fr}.section-head{align-items:flex-start}.toolbar-head{flex-direction:column}.toolbar{width:100%}dialog{min-width:auto;width:calc(100vw - 24px)}}
.network-grid{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr);gap:22px}.network-form{display:grid;gap:16px;margin-top:20px}.network-form label{display:grid;gap:7px;color:var(--muted)}.network-form select{width:100%;border:1px solid var(--line);background:#0d141d;color:var(--text);border-radius:10px;padding:12px 13px;outline:none}.network-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(78,140,255,.12)}.network-form small{color:var(--muted)}.network-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}.notice{margin-top:16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0e151e;color:var(--muted)}.notice.safe{border-color:rgba(53,197,138,.35);color:#83d9b5}.notice.live{border-color:rgba(255,93,115,.5);color:#ff98a6}.validation-box{margin-top:18px}.validation-box .okbox,.validation-box .badbox,.validation-box .warnbox{padding:11px 12px;border-radius:10px;margin-top:8px}.validation-box .okbox{background:rgba(53,197,138,.1);border:1px solid rgba(53,197,138,.35);color:#83d9b5}.validation-box .badbox{background:rgba(255,93,115,.09);border:1px solid rgba(255,93,115,.4);color:#ff98a6}.validation-box .warnbox{background:rgba(255,191,110,.08);border:1px solid rgba(255,191,110,.35);color:#ffd08f}.iface-state{font-size:11px;padding:4px 7px;border-radius:20px;background:#202a37}.iface-state.up{color:#65e1ad;background:rgba(53,197,138,.11)}@media(max-width:1050px){.network-grid{grid-template-columns:1fr}}
.brand-logo{width:100px;height:50px;object-fit:contain;display:block;flex:0 0 auto}.brand-text{min-width:130px}.login-logo{width:160px;height:80px;object-fit:contain;display:block;margin:0 auto 14px}.user-button{display:flex;align-items:center;gap:7px}.user-gear{font-size:12px;opacity:.7}.actions{display:flex;gap:5px;justify-content:flex-end;align-items:center}.actions .icon-btn{min-width:32px;height:32px;display:inline-grid;place-items:center;padding:5px 8px}.rules-table td:last-child,.rules-table th:last-child{text-align:right}#recent-rules td:last-child{text-align:right}.history-item .small-text{font-family:inherit}#account-dialog .modal-form{min-width:430px}.modal-form p.muted{margin-top:-4px;margin-bottom:14px}
@media(max-width:1050px){.brand-logo{width:78px;height:39px}.brand-text{display:none}}
@media(max-width:700px){.brand-logo{width:52px;height:32px}.user-gear{display:none}#account-dialog .modal-form{min-width:auto}}

/* v4.1 mobile layout hardening */
html,body{max-width:100%;overflow-x:hidden}
.card,.main-column,.grid-dashboard>*,.section-head>*,.topbar>*{min-width:0}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
.section-head p,.history-item,.notice{overflow-wrap:anywhere}

@media(max-width:700px){
  .topbar{
    height:auto;
    min-height:0;
    padding:8px 10px 10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand user"
      "nav nav";
    gap:8px 10px;
    align-items:center;
  }
  .brand{grid-area:brand;min-width:0;gap:8px}
  .brand-logo{width:88px;height:40px;max-width:100%}
  .brand-text{display:none}
  .userbox{grid-area:user;margin-left:0;gap:2px;justify-self:end}
  .userbox #username{display:none}
  .user-gear{display:inline;font-size:16px;opacity:.9}
  .user-button{padding:8px 9px;min-width:36px;justify-content:center}
  .userbox .ghost{padding:8px 9px}
  .topbar nav{
    grid-area:nav;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    overflow:visible;
  }
  .topbar nav .nav-btn{
    width:100%;
    min-width:0;
    padding:9px 6px;
    text-align:center;
    white-space:normal;
    line-height:1.2;
    font-size:13px;
  }
  main{width:100%;max-width:100%;padding:10px}
  .grid-dashboard,.main-column{width:100%;gap:14px}
  .card{width:100%;max-width:100%;padding:16px;border-radius:14px}
  .control-card{padding:16px}
  .control-card .section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px;
  }
  .control-card .section-head h2{font-size:17px}
  .control-card .section-head p{font-size:13px;line-height:1.4}
  .full-btn{width:64px;height:58px;border-radius:13px}
  .full-btn span{font-size:20px}
  .full-btn small{font-size:11px}
  .quick-row{grid-template-columns:minmax(0,1fr);gap:9px;margin-top:16px}
  .quick-row input,.quick-row button{width:100%;min-width:0}
  .quick-row button{min-height:48px}
  .type-toggles{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
  }
  .type-toggles label{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:9px 10px;
    white-space:nowrap;
  }
  .stats-card{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-card .stat{min-width:0;padding:16px}
  .stats-card .stat:nth-child(5){grid-column:1/-1}
  .stats-card .stat strong{font-size:23px}
  .section-head.toolbar-head{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .toolbar{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
  .toolbar>*{width:100%;text-align:center}
  .filter-row{max-width:none}
  .table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
  #view-dashboard .table-wrap table{min-width:680px}
  #view-rules .table-wrap table{min-width:820px}
  #view-network .table-wrap table{min-width:620px}
  .history-card{max-height:none}
  .network-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .network-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .network-actions>*{width:100%}
  dialog{max-width:calc(100vw - 20px);width:calc(100vw - 20px)}
  .modal-form{padding:18px}
  #account-dialog .modal-form{min-width:0}
  .modal-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .modal-actions>*{width:100%}
  .toast{left:10px;right:10px;bottom:12px;text-align:center}
}

@media(max-width:390px){
  .brand-logo{width:76px;height:36px}
  .topbar nav .nav-btn{font-size:12px;padding:8px 4px}
  .userbox .ghost{padding:7px 8px;font-size:12px}
  .card,.control-card{padding:14px}
  .type-toggles label{font-size:13px;padding:8px}
}


/* v4.2 branding */
.brand-home,.login-logo-link{display:block;text-decoration:none;color:inherit;line-height:0;flex:0 0 auto}
.brand-home:focus-visible,.login-logo-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.brand-logo{width:160px;height:40px;object-fit:contain}
.login-logo{width:200px;height:50px;object-fit:contain}
@media(max-width:1050px){.brand-logo{width:136px;height:34px}}
@media(max-width:700px){.brand-logo{width:112px;height:28px}.brand-home{min-width:0}.login-logo{width:min(200px,70vw);height:auto}}
@media(max-width:390px){.brand-logo{width:96px;height:24px}}

/* v5 servers + profiles */
.toolbar-select{border:1px solid var(--line);background:#0d141d;color:var(--text);border-radius:10px;padding:9px 12px;min-width:220px;max-width:360px}.servers-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,.6fr);gap:22px}.soft-line{border:0;border-top:1px solid var(--line);margin:22px 0}.pair-code-box{margin-top:14px;padding:14px;border:1px solid rgba(78,140,255,.45);background:rgba(78,140,255,.08);border-radius:12px}.pair-code{font-size:24px;font-weight:800;letter-spacing:.08em}.status-pill.revoked{color:#ff98a6;background:rgba(255,93,115,.12)}textarea{width:100%;border:1px solid var(--line);background:#0d141d;color:var(--text);border-radius:10px;padding:12px 13px;outline:none;resize:vertical;font:inherit}textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(78,140,255,.12)}.profiles-table td:first-child{font-weight:600}
@media(max-width:1050px){.servers-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  #view-profiles .table-wrap table{min-width:760px}
  #view-servers .table-wrap table{min-width:700px}
  .toolbar-select{width:100%;min-width:0;max-width:none}
  .topbar nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}