:root {
  --bg:#0d0f14; --bg-card:#161922; --bg-card-2:#1d212c;
  --accent:#3ba55d; --accent-2:#4ade80; --danger:#ef4444;
  --text:#e6e8ee; --text-dim:#8b91a0; --border:#262b38; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{background:radial-gradient(circle at top,#131722 0%,var(--bg) 60%);color:var(--text);
  font-family:-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh;padding-bottom:30px;}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px;
  position:sticky;top:0;background:rgba(13,15,20,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);z-index:10;}
.logo{font-weight:800;letter-spacing:1px;font-size:20px;}
.logo span{color:var(--accent);}
.ip-badge{background:var(--bg-card);border:1px solid var(--border);color:var(--accent-2);
  padding:6px 12px;border-radius:20px;font-family:monospace;font-size:13px;cursor:pointer;transition:.2s;}
.ip-badge:active{transform:scale(.95);background:var(--accent);color:#000;}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{white-space:nowrap;padding:9px 16px;border-radius:20px;background:var(--bg-card);
  border:1px solid var(--border);color:var(--text-dim);font-size:14px;cursor:pointer;transition:.2s;}
.tab.active{background:var(--accent);color:#06210f;border-color:var(--accent);font-weight:600;}
main{padding:8px 16px;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;}
.card h3{margin-bottom:10px;font-size:16px;}
.link-row{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;
  text-decoration:none;color:var(--text);transition:.2s;}
.link-row:active{background:var(--bg-card-2);}
.link-row .ic{font-size:20px;}
.link-row .arrow{margin-left:auto;color:var(--text-dim);}
.btn{background:var(--accent);color:#06210f;border:none;padding:11px 16px;border-radius:10px;
  font-weight:600;cursor:pointer;font-size:14px;width:100%;transition:.2s;}
.btn:active{opacity:.8;}
.btn.danger{background:var(--danger);color:#fff;}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:11px;border-radius:10px;font-size:14px;margin-bottom:10px;outline:none;}
input:focus,select:focus{border-color:var(--accent);}
label{font-size:12px;color:var(--text-dim);display:block;margin-bottom:4px;}
.list-item{background:var(--bg-card-2);border-radius:10px;padding:12px;margin-bottom:8px;border:1px solid var(--border);}
.list-item .meta{font-size:12px;color:var(--text-dim);margin-top:4px;}
.list-item .actions{display:flex;gap:8px;margin-top:10px;}
.list-item .actions .btn{width:auto;padding:7px 12px;font-size:12px;}
.badge{display:inline-block;padding:2px 8px;border-radius:8px;font-size:11px;background:var(--bg);
  border:1px solid var(--border);color:var(--accent-2);}
.soon{text-align:center;padding:50px 20px;color:var(--text-dim);}
.soon .big{font-size:40px;margin-bottom:12px;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.switch{width:46px;height:26px;background:var(--border);border-radius:20px;position:relative;cursor:pointer;transition:.2s;}
.switch.on{background:var(--accent);}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s;}
.switch.on::after{left:23px;}
.empty{color:var(--text-dim);text-align:center;padding:20px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{background:var(--bg-card-2);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center;}
.stat-num{font-size:26px;font-weight:800;color:var(--accent-2);}
.stat-label{font-size:11px;color:var(--text-dim);margin-top:4px;}
.filter-row{display:flex;gap:8px;margin-bottom:12px;}
.filter-row select{margin-bottom:0;}
.list-item.inactive{opacity:.55;}
.badge.auto{color:#fbbf24;border-color:#fbbf24;}
.badge.revoked{color:var(--text-dim);}
.pager{display:flex;gap:10px;justify-content:space-between;margin-top:14px;}
.pager .btn{width:auto;flex:1;}
.pager .btn:disabled{opacity:.3;}