:root {
  --bg: #09090b;
  --panel: #18181b;
  --border: #27272a;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-grad: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --display: 'Inter', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:clamp(14px, 1vw + 10px, 16px);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--display);min-height:100vh;
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.08) 0%, transparent 50%);
  background-attachment: fixed;
}
.layout{display:flex;min-height:100vh;}
.sidebar{width:250px;min-height:100vh;background:rgba(24, 24, 27, 0.8);backdrop-filter:blur(12px);border-right:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;z-index:10; position: sticky; top: 0; overflow-y: auto;}
.main{flex:1;padding:40px;max-width:1200px;margin:0 auto;}
.sb-logo{padding:30px 24px 20px;border-bottom:1px solid var(--border);}
.sb-logo h2{font-family:var(--display);font-size:1.1rem;font-weight:900;background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.05em;}
.sb-logo span{font-size:.75rem;color:var(--muted);display:block;margin-top:6px;font-weight:600;}
.sb-nav{padding:24px 0;flex:1;display:flex;flex-direction:column;gap:6px;}
.sb-item{display:flex;align-items:center;gap:14px;padding:14px 24px;color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;transition:all .3s ease;border-left:3px solid transparent;}
.sb-item:hover{color:var(--text);background:rgba(255,255,255,0.04);border-left-color:var(--accent-hover);}
.sb-item.active{color:var(--text);background:linear-gradient(90deg, rgba(99, 102, 241, 0.12), transparent);border-left-color:var(--accent);}
.sb-item .icon{font-size:1.2rem;width:24px;text-align:center;transition:transform .3s ease;}
.sb-item:hover .icon{transform:scale(1.15) rotate(5deg);}
.sb-footer{padding:24px;border-top:1px solid var(--border);}
.sb-footer a{font-size:.8rem;color:var(--red);text-decoration:none;display:flex;align-items:center;gap:10px;font-weight:600;transition:color .2s;}
.sb-footer a:hover{color:#f87171;}

.topbar{margin-bottom:32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.topbar h1{font-family:var(--display);font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--text); text-transform:uppercase;}
.topbar .actions { display:flex; gap:10px; }
.topbar > div { flex: 1; }

.breadcrumb{font-size:.72rem;color:var(--muted); margin-bottom:8px; display:block; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;}
.breadcrumb a{color:var(--accent);text-decoration:none; transition:color 0.2s;}
.breadcrumb a:hover{color:var(--accent-hover);}

.card, .form-card{background:var(--panel);border:1px solid var(--border);padding:32px;margin-bottom:28px;position:relative;border-radius:12px;transition:all .3s ease;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);}
.card:hover, .form-card:hover{transform:translateY(-4px);box-shadow:0 15px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);border-color:rgba(99,102,241,0.4);}
.card::before, .form-card::before{content:'';display:block;height:4px;background:var(--accent-grad);margin:-32px -32px 32px;border-radius:12px 12px 0 0;}
.card-title, .section-label{font-family:var(--display);font-size:.9rem;font-weight:800;color:var(--text);letter-spacing:.05em;margin-bottom:24px;display:flex;align-items:center;gap:10px;text-transform:uppercase;}
.card h2 {font-family:var(--display);font-size:1.1rem;color:var(--text);letter-spacing:.05em;margin-bottom:20px;font-weight:800;}
.card p {font-size:.85rem;line-height:1.6;color:var(--muted);margin-bottom:20px;}
.section-label{border-bottom:1px solid var(--border); padding-bottom:12px; margin-top:32px; color:var(--accent);}
.section-label:first-of-type{margin-top:0;}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
label{font-size:.75rem;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
input[type=text],input[type=password],input[type=number],input[type=file],select,textarea{background:rgba(0,0,0,0.3);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.9rem;padding:14px 16px;border-radius:8px;outline:none;transition:all .2s ease;width:100%;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,0.25);background:rgba(0,0,0,0.5);}
textarea{resize:vertical;min-height:90px;line-height:1.5;}
select option{background:var(--panel);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-family:var(--display);font-weight:700;font-size:.85rem;cursor:pointer;border:1px solid transparent;border-radius:8px;transition:all .3s ease;position:relative;overflow:hidden;text-decoration:none;letter-spacing:0.02em;}
.btn-primary{color:#fff;background:var(--accent-grad);background-size:200% auto;box-shadow:0 4px 12px rgba(99,102,241,0.3);}
.btn-primary:hover{background-position:right center;transform:translateY(-2px);box-shadow:0 8px 16px rgba(99,102,241,0.4);}
.btn-success{background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.3);}
.btn-success:hover{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 4px 12px rgba(16,185,129,0.3);}
.btn-danger{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 4px 12px rgba(239,68,68,0.3);}
.btn-warning{background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.3);}
.btn-warning:hover{background:var(--yellow);color:#fff;border-color:var(--yellow);box-shadow:0 4px 12px rgba(245,158,11,0.3);}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(99,102,241,0.1);}
.btn-sm{padding:10px 18px;font-size:.75rem;}
.btn-publish{background:linear-gradient(135deg, #f59e0b, #ef4444);color:#fff;box-shadow:0 4px 12px rgba(245,158,11,0.3);background-size:200% auto;}
.btn-publish:hover{background-position:right center;transform:translateY(-2px);box-shadow:0 8px 16px rgba(245,158,11,0.4);}
.btn-icon { background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:1.2rem; transition:.2s; padding:4px; border-radius:4px; }
.btn-icon:hover { color:var(--accent); background:rgba(255,255,255,0.05); }

.form-actions { display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

.flash{padding:16px 20px;font-size:.85rem;font-weight:600;margin-bottom:28px;border-radius:8px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.flash.ok{background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);color:#34d399;}
.flash.err{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#f87171;}

.api-status-box { display:flex; align-items:center; gap:12px; padding:16px 20px; background:rgba(0,0,0,0.4); border:1px solid var(--border); border-radius:8px; font-family:var(--mono); font-size:.9rem; font-weight:500; transition:all .3s ease; }
.status-indicator { width:12px; height:12px; border-radius:50%; flex-shrink:0;}
.api-on { border-color:rgba(16,185,129,.4); color:#34d399; box-shadow:0 4px 12px rgba(16,185,129,0.1);}
.api-on .status-indicator { background:var(--green); animation:pulse-green 2s infinite; }
.api-off { border-color:rgba(239,68,68,.4); color:#f87171; box-shadow:0 4px 12px rgba(239,68,68,0.1);}
.api-off .status-indicator { background:var(--red); animation:pulse-red 2s infinite; }
@keyframes pulse-green { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)} 70%{box-shadow:0 0 0 10px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }
@keyframes pulse-red { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)} 70%{box-shadow:0 0 0 10px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
.btn.loading { pointer-events:none; opacity:.8; color:transparent!important; }
.btn.loading::after { content:''; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

body.auth-page { display:flex; align-items:center; justify-content:center; }
.login-wrap { width:100%; max-width:450px; margin:20px; border:1px solid var(--border); background:rgba(24, 24, 27, 0.7); backdrop-filter:blur(16px); padding:48px 40px 40px; position:relative; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); border-radius:16px; }
.login-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:16px 16px 0 0; background:var(--accent-grad); }
.logo { text-align:center; margin-bottom:40px; }
.logo-icon { font-size:2.8rem; display:inline-block; margin-bottom:12px; filter:drop-shadow(0 0 10px rgba(99,102,241,0.5)); transition:transform 0.3s;}
.logo:hover .logo-icon { transform:scale(1.1) rotate(5deg); }
.logo h1 { font-family:var(--display); font-size:1.4rem; font-weight:900; letter-spacing:0.1em; background:var(--accent-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.logo span { font-size:0.75rem; color:var(--muted); letter-spacing:0.15em; display:block; margin-top:8px; font-weight:600; text-transform:uppercase;}
.btn-login { width:100%; padding:16px; background:var(--accent-grad); background-size:200% auto; border:none; color:#fff; font-family:var(--display); font-size:.9rem; font-weight:800; letter-spacing:0.1em; cursor:pointer; text-transform:uppercase; border-radius:8px; transition:all .3s ease; margin-top:12px; box-shadow:0 4px 15px rgba(99,102,241,0.4); }
.btn-login:hover { background-position:right center; transform:translateY(-2px); box-shadow:0 8px 20px rgba(99,102,241,0.5); }
.error { background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3); color:#f87171; padding:14px 16px; font-size:0.85rem; font-weight:600; border-radius:8px; margin-bottom:24px; text-align:center; }

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.toggle-row{display:flex;gap:28px;margin-top:6px; flex-wrap:wrap;}
.toggle-item{display:flex;align-items:center;gap:10px;font-size:.85rem;cursor:pointer; color:var(--text); font-weight:600;}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px; cursor:pointer;}
.hint{font-size:.7rem;color:var(--muted);margin-top:6px; font-style:italic;}

.stats-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:24px; margin-bottom:32px; }
.stat-card { background:rgba(24, 24, 27, 0.6); border:1px solid var(--border); padding:24px; position:relative; border-radius:12px; transition:all .3s ease; box-shadow:0 4px 6px -1px rgba(0,0,0,0.1); backdrop-filter:blur(8px); }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 10px 25px -5px rgba(0,0,0,0.2); border-color:rgba(255,255,255,0.1); }
.stat-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:12px 12px 0 0; }
.stat-card.c-accent::after { background:var(--accent); box-shadow:0 0 10px var(--accent); }
.stat-card.c-green::after  { background:var(--green); box-shadow:0 0 10px var(--green); }
.stat-card.c-yellow::after { background:var(--yellow); box-shadow:0 0 10px var(--yellow); }
.stat-card.c-orange::after { background:linear-gradient(90deg, #f59e0b, #ef4444); }
.stat-label { font-size:.7rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-bottom:8px; }
.stat-val   { font-family:var(--display); font-size:2rem; font-weight:900; color:var(--text); line-height:1; }
.stat-card.c-accent .stat-val { color:var(--accent-hover); }
.stat-card.c-green  .stat-val { color:#34d399; }
.stat-card.c-yellow .stat-val { color:#fbbf24; }
.stat-card.c-orange .stat-val { background:linear-gradient(90deg, #f59e0b, #ef4444); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; margin-top:32px; flex-wrap:wrap; gap:16px;}
.section-title { font-family:var(--display); font-size:.9rem; font-weight:800; color:var(--text); letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.badge { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; font-size:.7rem; letter-spacing:.05em; border-radius:6px; font-weight:700; text-transform:uppercase; }
.badge-vip    { background:rgba(245,158,11,0.15); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }
.badge-free   { background:rgba(99,102,241,0.15); color:var(--accent-hover); border:1px solid rgba(99,102,241,0.3); }
.badge-off    { background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.3); }

.tbl-wrap { background:var(--panel); border:1px solid var(--border); overflow-x:auto; border-radius:12px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.1); margin-bottom:32px; }
table { width:100%; border-collapse:collapse; text-align:left; }
thead tr { background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); }
th { padding:16px 20px; font-size:.75rem; color:var(--muted); letter-spacing:.05em; font-weight:700; white-space:nowrap; text-transform:uppercase; }
td { padding:16px 20px; font-size:.85rem; border-bottom:1px solid var(--border); vertical-align:middle; transition:background 0.2s; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,0.03); }
.td-name { color:var(--text); font-weight:600; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.td-host { color:var(--muted); font-family:var(--mono); font-size:.8rem; }
.td-flag { display:flex; align-items:center; gap:10px; }
.flag-tag { display:inline-block; padding:3px 8px; font-size:.7rem; font-weight:600; background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text); border-radius:4px; text-transform:uppercase; }

.col-host, .col-proxy, .col-info, .col-tunnel, .col-state { display: none; }
.show-host .col-host { display: table-cell; }
.show-proxy .col-proxy { display: table-cell; }
.show-info .col-info { display: table-cell; }
.show-tunnel .col-tunnel { display: table-cell; }
.show-state .col-state { display: table-cell; }

.table-controls { position:relative; }
.dropdown-menu { position:absolute; right:0; top:calc(100% + 8px); background:var(--panel); border:1px solid var(--border); box-shadow:0 15px 30px rgba(0,0,0,0.4); border-radius:12px; padding:12px; display:none; z-index:50; min-width:220px; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
.dropdown-menu.show { display:block; }
.dropdown-item { display:flex; align-items:center; gap:12px; padding:10px 12px; font-size:.85rem; color:var(--text); cursor:pointer; border-radius:6px; transition:.2s; font-weight:500; }
.dropdown-item:hover { background:rgba(255,255,255,0.05); }

.drag-handle { cursor:grab; color:var(--muted); font-size:1.2rem; padding:4px 8px; user-select:none; transition:color 0.2s; border-radius:4px; }
.drag-handle:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.drag-handle:active { cursor:grabbing; }
.sortable-ghost { opacity:0.5; background:rgba(99,102,241,0.1) !important; }

.ttype { display:inline-block; padding:4px 8px; font-size:.7rem; font-weight:700; border-radius:4px; letter-spacing:0.05em; text-transform:uppercase; }
.ttype-0 { background:rgba(99,102,241,0.15); color:var(--accent-hover); }
.ttype-1 { background:rgba(245,158,11,0.15); color:#fbbf24; }
.ttype-2 { background:rgba(16,185,129,0.15); color:#34d399; }
.ttype-3 { background:rgba(236,72,153,0.15); color:#f472b6; }
.ttype-4 { background:rgba(168,85,247,0.15); color:#c084fc; }

.ver-bar { display:flex; align-items:center; gap:32px; background:rgba(24, 24, 27, 0.6); backdrop-filter:blur(8px); border:1px solid var(--border); padding:20px 24px; margin-bottom:32px; border-radius:12px; flex-wrap:wrap;}
.ver-bar .vk { font-size:.75rem; color:var(--muted); letter-spacing:.05em; font-weight:700; display:block; margin-bottom:4px; text-transform:uppercase; }
.ver-bar .vv { font-family:var(--display); font-weight:800; color:var(--text); font-size:1.1rem; }
.ver-bar .sep { width:1px; height:30px; background:var(--border); }

@media(max-width:1024px) {
  .tbl-wrap table { display:block; overflow-x:auto; white-space:nowrap; }
}
@media(max-width:768px) {
  .sidebar{width:70px;}
  .sb-logo h2,.sb-logo span,.sb-item span:not(.icon),.sb-footer span{display:none;}
  .main{padding:24px;}
  .sb-item{padding:16px;justify-content:center;}
  .grid2, .grid3 { grid-template-columns:1fr; gap:16px; }
  .ver-bar { flex-direction:column; align-items:flex-start; gap:16px; }
  .ver-bar .sep { display:none; }
  .topbar { flex-direction:column; align-items:flex-start; gap:16px; }
  .topbar .actions { width:100%; flex-wrap:wrap; }
  .topbar .actions .btn { flex:1; }
  .form-actions { width:100%; flex-direction:column; }
  .form-actions .btn { width:100%; }
}
@media(max-width:480px){
  body.auth-page .login-wrap { padding:36px 24px 28px; margin:10px; width:calc(100% - 20px); }
}