:root {
  --bg:       #0e0e10;
  --bg2:      #16161a;
  --bg3:      #1e1e24;
  --border:   #2a2a32;
  --border2:  #3a3a46;
  --text:     #e2e2e8;
  --muted:    #888898;
  --green:    #1D9E75;
  --green-l:  #5DCAA5;
  --blue:     #378ADD;
  --red:      #E24B4A;
  --amber:    #EF9F27;
  --radius:   6px;
  --font:     'JetBrains Mono', 'Fira Mono', 'Cascadia Code', monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.6}
a{color:var(--green-l);text-decoration:none}
a:hover{text-decoration:underline}
nav{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:52px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--text)}
.nav-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-links a{color:var(--muted);font-size:12px;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--text);text-decoration:none}
.nav-links a.active{color:var(--green-l)}
.nav-user{color:var(--muted);font-size:11px;padding:2px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius)}
.nav-logout{color:var(--red) !important}
main{max-width:960px;margin:0 auto;padding:2rem 1.5rem}
h1{font-size:18px;font-weight:700;margin-bottom:1.5rem;color:var(--text)}
h2{font-size:14px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.alert{padding:10px 16px;border-radius:var(--radius);margin-bottom:1rem;font-size:12px;border:1px solid}
.alert-ok {background:#0F6E5620;border-color:#1D9E7560;color:var(--green-l)}
.alert-err{background:#A32D2D20;border-color:#E24B4A60;color:#F09595}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.card-head{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:background .15s}
.card-head:hover{background:var(--bg3)}
.card-body{padding:16px;border-top:1px solid var(--border);display:none}
.card-body.open{display:block}
.badge{display:inline-block;padding:1px 7px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.04em}
.badge-on  {background:#0F6E5630;color:var(--green-l);border:1px solid #1D9E7540}
.badge-off {background:#2a2a3260;color:var(--muted);border:1px solid var(--border)}
.badge-ssl {background:#185FA520;color:#85B7EB;border:1px solid #378ADD40}
.badge-ws  {background:#53329020;color:#AFA9EC;border:1px solid #7F77DD40}
.proxy-domain{flex:1;font-size:13px;font-weight:600}
.proxy-meta{font-size:11px;color:var(--muted);margin-left:auto}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-on {background:var(--green)}
.status-off{background:var(--muted)}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:1rem}
.detail-item label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.detail-item span{font-size:12px;color:var(--text);word-break:break-all}
.path-list{margin-bottom:1rem}
.path-row-item{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:4px;font-size:11px}
.method-tag{padding:1px 6px;border-radius:3px;background:#185FA520;color:#85B7EB;border:1px solid #378ADD40;font-size:10px;font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;padding:6px 14px;border:1px solid var(--border2);border-radius:var(--radius);background:transparent;color:var(--text);font-family:var(--font);font-size:12px;cursor:pointer;transition:all .15s;text-decoration:none}
.btn:hover{background:var(--bg3);border-color:var(--border2);text-decoration:none;color:var(--text)}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{background:#0F6E56;border-color:#0F6E56;color:#fff}
.btn-danger{border-color:#E24B4A60;color:var(--red)}
.btn-danger:hover{background:#A32D2D30}
.btn-sm{padding:3px 10px;font-size:11px}
.form-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:1rem}
.form-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:11px;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--font);font-size:12px;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--radius);background:var(--bg3);color:var(--text);outline:none;width:100%;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}
.field textarea{resize:vertical;min-height:64px}
.field select option{background:var(--bg3)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle-info label{font-size:12px;color:var(--text);cursor:pointer}
.toggle-info small{display:block;font-size:10px;color:var(--muted)}
.switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;cursor:pointer;transition:.2s}
.slider:before{content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:var(--muted);top:3px;left:3px;transition:.2s}
.switch input:checked+.slider{background:var(--green);border-color:var(--green)}
.switch input:checked+.slider:before{background:#fff;transform:translateX(16px)}
.path-builder-row{display:grid;grid-template-columns:90px 1fr 1fr 32px;gap:6px;margin-bottom:6px;align-items:center}
.path-builder-row input,.path-builder-row select{margin:0}
.btn-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;transition:all .15s}
.btn-remove:hover{color:var(--red);border-color:#E24B4A60}
.config-preview{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px;font-size:11px;line-height:1.8;white-space:pre;overflow-x:auto;color:var(--muted)}
.kw{color:#85B7EB}.val{color:var(--green-l)}.comment{color:#444460}
table{width:100%;border-collapse:collapse}
th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg3)}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:360px}
.login-title{font-size:16px;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:8px}
.login-title .nav-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.top-bar h1{margin:0}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .form-full{grid-column:1}
  nav{padding:0 1rem}
  main{padding:1rem}
  .path-builder-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
}