/* API TESTER v2.1 — Modern UI | black+red / white+red */

:root {
  --f-ui:   'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --f-hud:  'Orbitron', sans-serif;
  --r: 4px; --rl: 8px; --rxl: 12px;
  --t: 150ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg:    #080808; --bg-1: #0e0e0e; --bg-2: #141414;
  --bg-3:  #1c1c1c; --bg-4: #242424; --bg-5: #2e2e2e;
  --bd:    #262626; --bd-2: #363636; --bd-3: #484848;
  --tx:    #f0f0f0; --tx-2: #a0a0a0; --tx-3: #606060; --tx-4: #383838;
  --ac:    #dd0000; --ac-h: #ff1a1a; --ac-d: #aa0000;
  --ac-g:  rgba(221,0,0,.13); --ac-g2: rgba(221,0,0,.06);
  --grn:   #16a34a; --grn-g: rgba(22,163,74,.12);
  --yel:   #d97706; --yel-g: rgba(217,119,6,.12);
  --blu:   #3b82f6; --blu-g: rgba(59,130,246,.12);
  --prp:   #8b5cf6; --prp-g: rgba(139,92,246,.12);
  --shadow: 0 1px 3px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.5);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.85);
  --panel-glow: 0 0 0 1px rgba(221,0,0,.07),0 4px 24px rgba(0,0,0,.55);
  --scan: rgba(0,0,0,.04);
}

[data-theme="light"] {
  --bg:    #f2f3f5; --bg-1: #f8f9fb; --bg-2: #ffffff;
  --bg-3:  #eef0f3; --bg-4: #e5e7eb; --bg-5: #d9dce1;
  --bd:    #e0e2e6; --bd-2: #c8cad0; --bd-3: #b0b3ba;
  --tx:    #0d0d0d; --tx-2: #4a4c52; --tx-3: #9a9ca5; --tx-4: #c6c8d0;
  --ac:    #cc0000; --ac-h: #ee0000; --ac-d: #aa0000;
  --ac-g:  rgba(204,0,0,.09); --ac-g2: rgba(204,0,0,.04);
  --grn:   #15803d; --grn-g: rgba(21,128,61,.09);
  --yel:   #b45309; --yel-g: rgba(180,83,9,.09);
  --blu:   #2563eb; --blu-g: rgba(37,99,235,.09);
  --prp:   #7c3aed; --prp-g: rgba(124,58,237,.09);
  --shadow: 0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.14);
  --panel-glow: 0 0 0 1px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.07);
  --scan: transparent;
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--tx);font-family:var(--f-ui);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;transition:background var(--t),color var(--t);line-height:1.6}
a{color:var(--ac);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--ac-h)}
::selection{background:var(--ac);color:#fff}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--bd-2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ac)}

/* MATRIX */
#mx{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03}
[data-theme="light"] #mx{opacity:.012}

/* SCANLINES */
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,var(--scan) 0,var(--scan) 1px,transparent 1px,transparent 3px)}
[data-theme="light"] .scanlines{display:none}

/* HEADER */
.hdr{position:sticky;top:0;z-index:80;background:rgba(8,8,8,.94);border-bottom:1px solid var(--bd);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
[data-theme="light"] .hdr{background:rgba(255,255,255,.94)}
.hdr::after{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent,var(--ac) 25%,var(--ac) 75%,transparent);opacity:.55}
.hdr-inner{max-width:1280px;margin:0 auto;padding:0 16px;height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hdr-left{display:flex;align-items:center;gap:24px;min-width:0}
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.logo{display:flex;align-items:center;gap:8px;text-decoration:none;user-select:none;flex-shrink:0}
.logo-mark{font-family:var(--f-mono);font-size:.78rem;font-weight:700;color:#fff;background:var(--ac);width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(221,0,0,.3)}
.logo-text{font-family:var(--f-hud);font-size:.78rem;font-weight:900;letter-spacing:2px;color:var(--tx);white-space:nowrap}
.logo-ver{font-size:.57rem;color:var(--tx-3);font-family:var(--f-mono);padding:1px 5px;border:1px solid var(--bd);border-radius:20px;white-space:nowrap}
.logo-img{height:26px;width:auto;max-width:100px;object-fit:contain;border-radius:4px}

.nav-main{display:flex;gap:1px;overflow-x:auto}
.nav-link{color:var(--tx-3);font-size:.78rem;padding:5px 10px;border-radius:var(--r);transition:all var(--t);border:1px solid transparent;white-space:nowrap}
.nav-link:hover{color:var(--tx);background:var(--bg-3);border-color:var(--bd)}
.nav-link--admin{color:var(--ac)!important}
.nav-link--admin:hover{background:var(--ac-g);border-color:var(--ac)!important}

.user-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--bg-2);border:1px solid var(--bd);border-radius:20px;font-size:.75rem;flex-shrink:0}
.user-chip__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--grn);box-shadow:0 0 5px var(--grn);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.user-chip__id{color:var(--tx-2);font-family:var(--f-mono);font-size:.7rem}
.user-chip__plan{font-size:.6rem;color:var(--ac);padding:1px 6px;background:var(--ac-g2);border:1px solid var(--ac-g);border-radius:20px;font-weight:500}

.btn-icon{width:32px;height:32px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--bd);color:var(--tx-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t);flex-shrink:0}
.btn-icon:hover{color:var(--tx);border-color:var(--bd-2);background:var(--bg-3)}
[data-theme="dark"]  .ico-sun {display:none}
[data-theme="light"] .ico-moon{display:none}

/* MAIN / FOOTER */
.main-content{flex:1;position:relative;z-index:2}
.ftr{background:var(--bg-1);border-top:1px solid var(--bd);padding:14px 16px;z-index:2}
.ftr-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ftr-brand{font-size:.73rem;color:var(--tx-3);font-family:var(--f-hud);font-weight:700;letter-spacing:1px}
.ftr-ver{color:var(--tx-4);font-family:var(--f-mono);font-size:.63rem;font-weight:400}
.ftr-nav{display:flex;gap:14px;flex-wrap:wrap}
.ftr-nav a{font-size:.73rem;color:var(--tx-3)}
.ftr-nav a:hover{color:var(--tx)}
.ftr-copy{font-size:.68rem;color:var(--tx-4)}

/* CONTAINERS */
.wrap   {max-width:1280px;margin:0 auto;padding:24px 16px}
.wrap-sm{max-width:460px; margin:0 auto;padding:24px 16px}
.wrap-md{max-width:780px; margin:0 auto;padding:24px 16px}

/* NOTICE STRIP — inline, inside panel-bar region */
/* Notice strip — background follows theme, notice_color = font color */
[data-theme="dark"]  .notice-strip{background:#1c0a0a;border:1px solid rgba(221,0,0,.25);border-radius:var(--r)}
[data-theme="light"] .notice-strip{background:#fff5f5;border:1px solid rgba(204,0,0,.2);border-radius:var(--r)}
.notice-strip__inner{max-width:1280px;margin:0 auto;padding:10px 14px;display:flex;align-items:flex-start;gap:8px;font-size:.78rem;color:var(--nc,#dd0000);line-height:1.55}
.notice-strip__txt{flex:1}
.notice-strip__txt a{color:var(--nc,#dd0000);text-decoration:underline;opacity:.85}
.notice-strip__txt a:hover{opacity:1}
.notice-strip__x{background:none;border:none;color:var(--nc,#dd0000);opacity:.5;cursor:pointer;padding:2px 4px;font-size:.8rem;flex-shrink:0;transition:opacity var(--t);line-height:1;margin-top:1px}
.notice-strip__x:hover{opacity:1}

/* PANEL (terminal window) */
.panel{background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;box-shadow:var(--panel-glow)}
.panel::before{content:'';display:block;height:2px;background:linear-gradient(90deg,var(--ac),rgba(221,0,0,.2) 70%,transparent)}
.panel-bar{background:var(--bg-3);padding:8px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bd)}
.panel-bar__dots{display:flex;gap:5px;flex-shrink:0}
.pdot{width:10px;height:10px;border-radius:50%}
.pdot-r{background:#ff5f57}.pdot-y{background:#febc2e}.pdot-g{background:#28c840}
.panel-title{font-size:.67rem;color:var(--tx-3);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--f-mono);flex:1;text-align:center}
.panel-body{padding:18px 16px}

/* CARD */
.card{background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--rl);padding:18px;box-shadow:var(--shadow)}

/* FORMS */
.fgrp{margin-bottom:14px}
.flabel{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:500;color:var(--tx-3);letter-spacing:.2px;margin-bottom:5px}
.flabel .dot{width:3px;height:9px;background:var(--ac);border-radius:1px;flex-shrink:0}
.finput,.fselect{
  width:100%;background:var(--bg-3);border:1px solid var(--bd);border-radius:var(--r);
  padding:9px 12px;color:var(--tx);font-family:var(--f-mono);font-size:.83rem;
  outline:none;transition:border-color var(--t),box-shadow var(--t);
  caret-color:var(--ac);-webkit-appearance:none;
}
.finput:focus,.fselect:focus{border-color:var(--ac);background:var(--bg-3);box-shadow:0 0 0 3px var(--ac-g)}
.finput::placeholder{color:var(--tx-4)}
.finput[readonly]{opacity:.55;cursor:default}
.fselect{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23dd0000' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.fselect option{background:var(--bg-2);color:var(--tx)}
.fhint{font-size:.68rem;color:var(--tx-4);margin-top:4px;padding-left:9px;border-left:2px solid var(--bd)}
.finput-row{display:flex;gap:8px}
.finput-row .finput{flex:1}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;font-family:var(--f-ui);font-size:.82rem;font-weight:500;cursor:pointer;border-radius:var(--r);transition:all var(--t);text-decoration:none;border:1px solid transparent;white-space:nowrap;position:relative;overflow:hidden}
.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--ac);color:#fff;border-color:var(--ac);box-shadow:0 1px 6px rgba(221,0,0,.28)}
.btn-primary:hover:not(:disabled){background:var(--ac-h);border-color:var(--ac-h);box-shadow:0 2px 12px rgba(221,0,0,.4);transform:translateY(-1px);color:#fff}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--tx-2);border-color:var(--bd)}
.btn-ghost:hover:not(:disabled){color:var(--tx);border-color:var(--bd-2);background:var(--bg-3)}
.btn-outline{background:transparent;color:var(--ac);border-color:var(--ac)}
.btn-outline:hover:not(:disabled){background:var(--ac-g)}
.btn-danger{background:var(--ac);color:#fff;border-color:var(--ac)}
.btn-danger:hover:not(:disabled){background:var(--ac-h);color:#fff}
.btn-warn{background:transparent;color:var(--yel);border-color:var(--yel)}
.btn-warn:hover:not(:disabled){background:var(--yel-g)}
.btn-success{background:var(--grn);color:#fff;border-color:var(--grn)}
.btn-success:hover:not(:disabled){opacity:.85}
.btn-stop{background:#3b0d0d;color:#fca5a5;border-color:#7f1d1d;font-weight:600}
.btn-stop:hover:not(:disabled){background:#7f1d1d;color:#fff}
.btn-sm{padding:6px 13px;font-size:.78rem}
.btn-xs{padding:4px 9px;font-size:.71rem}
.btn-full{width:100%}

/* ALERTS */
.alert{padding:10px 13px;border-radius:var(--r);font-size:.79rem;margin-bottom:12px;display:flex;align-items:flex-start;gap:8px;border:1px solid;line-height:1.55}
.alert--ok  {background:var(--grn-g);border-color:rgba(22,163,74,.25);color:var(--grn)}
.alert--err {background:var(--ac-g); border-color:rgba(221,0,0,.25); color:var(--ac-h)}
.alert--warn{background:var(--yel-g);border-color:rgba(217,119,6,.25);color:var(--yel)}
.alert--info{background:var(--blu-g);border-color:rgba(59,130,246,.25);color:var(--blu)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.66rem;font-weight:500;border:1px solid}
.badge--admin {color:var(--yel);border-color:rgba(217,119,6,.35);background:var(--yel-g)}
.badge--plan  {color:var(--blu);border-color:rgba(59,130,246,.35);background:var(--blu-g)}
.badge--active{color:var(--grn);border-color:rgba(22,163,74,.35);background:var(--grn-g)}
.badge--sus   {color:var(--ac); border-color:rgba(221,0,0,.35);  background:var(--ac-g)}
.badge--exp   {color:var(--yel);border-color:rgba(217,119,6,.35);background:var(--yel-g)}

/* TABLES */
.tbl-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--rl)}
table{width:100%;border-collapse:collapse;font-size:.79rem}
thead{background:var(--bg-3)}
th{padding:9px 12px;text-align:left;font-size:.65rem;font-weight:600;color:var(--tx-3);letter-spacing:.5px;border-bottom:1px solid var(--bd);white-space:nowrap;text-transform:uppercase;cursor:pointer;transition:color var(--t);user-select:none}
th:hover{color:var(--tx-2)}
th.sort-asc::after{content:' ↑';color:var(--ac)}
th.sort-desc::after{content:' ↓';color:var(--ac)}
th.no-sort{cursor:default}
th.no-sort:hover{color:var(--tx-3)}
td{padding:9px 12px;border-bottom:1px solid var(--bd);color:var(--tx-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--bg-3)}
code{color:var(--ac);font-family:var(--f-mono);font-size:.84em}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--bd);margin-bottom:18px;overflow-x:auto}
.tab-btn{padding:8px 14px;border:none;background:none;color:var(--tx-3);font-family:var(--f-ui);font-size:.79rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--t);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r) var(--r) 0 0}
.tab-btn:hover{color:var(--tx-2);background:var(--bg-3)}
.tab-btn.active{color:var(--ac);border-bottom-color:var(--ac);background:var(--bg-3)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px)}
.modal-overlay[hidden]{display:none}
.modal{background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--rl);padding:22px;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:mIn .18s ease;position:relative}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ac);border-radius:var(--rl) var(--rl) 0 0}
@keyframes mIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.modal-ttl{font-size:.88rem;font-weight:600;color:var(--tx)}
.modal-cls{background:none;border:1px solid var(--bd);color:var(--tx-3);width:26px;height:26px;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.modal-cls:hover{border-color:var(--ac);color:var(--ac)}
.modal-cls svg{pointer-events:none;width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none}

/* LOGIN */
.login-wrap{min-height:calc(100vh - 100px);display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login-box{width:100%;max-width:400px;background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--rxl);padding:32px 28px;box-shadow:var(--shadow-xl);position:relative}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac);border-radius:var(--rxl) var(--rxl) 0 0}
.login-logo{text-align:center;margin-bottom:26px}
.login-logo__mark{width:48px;height:48px;border-radius:11px;background:var(--ac);display:flex;align-items:center;justify-content:center;margin:0 auto 11px;box-shadow:0 4px 16px rgba(221,0,0,.35)}
.login-logo__mark span{font-family:var(--f-mono);font-size:1.1rem;font-weight:700;color:#fff}
.login-logo__name{font-family:var(--f-hud);font-size:1rem;font-weight:900;letter-spacing:3px;color:var(--tx)}
.login-logo__sub{font-size:.7rem;color:var(--tx-3);margin-top:4px;letter-spacing:.5px}

/* HOME HERO */
.home-hero{padding:22px 16px 14px;text-align:center;border-bottom:1px solid var(--bd);background:var(--bg-1)}
.home-hero__title{font-family:var(--f-hud);font-weight:900;font-size:clamp(1.3rem,3vw,2rem);color:var(--tx);letter-spacing:4px;line-height:1.2;margin-bottom:5px}
.home-hero__title em{color:var(--ac);font-style:normal}
.home-hero__sub{font-size:.75rem;color:var(--tx-3);letter-spacing:.5px}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--rl);padding:14px 16px;transition:border-color var(--t),transform var(--t);position:relative;overflow:hidden}
.stat:hover{border-color:var(--bd-2);transform:translateY(-2px)}
.stat::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--ac);opacity:.5;transition:width .3s}
.stat:hover::after{width:100%}
.stat__val{font-family:var(--f-hud);font-size:1.7rem;font-weight:700;color:var(--tx);line-height:1;letter-spacing:-1px}
.stat__lbl{font-size:.63rem;color:var(--tx-3);margin-top:6px;font-weight:500;letter-spacing:.3px;text-transform:uppercase}

/* INFO ROWS */
.info-section{margin-bottom:14px}
.info-section:last-child{margin-bottom:0}
.info-section__title{font-size:.6rem;text-transform:uppercase;letter-spacing:2px;color:var(--tx-3);font-weight:600;padding-bottom:7px;border-bottom:1px solid var(--bd);margin-bottom:2px}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--bd);gap:10px}
.info-row:last-child{border-bottom:none}
.info-row__k{font-size:.76rem;color:var(--tx-3);flex-shrink:0}
.info-row__v{font-size:.76rem;color:var(--tx);font-weight:500;text-align:right;font-family:var(--f-mono);word-break:break-all}
.info-row__v--red{color:var(--ac)}
.info-row__v--grn{color:var(--grn)}
.info-row__v--yel{color:var(--yel)}

/* TYPE CHIPS */
.type-chip{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;padding:3px 10px;border-radius:20px;background:var(--bg-3);border:1px solid var(--bd);color:var(--tx-2);font-family:var(--f-mono)}
.type-chip__lbl{color:var(--tx-3);font-size:.65rem}

/* REQUEST ACTION BUTTONS */
.req-actions{display:flex;gap:8px;margin-top:14px}
.req-actions .btn-primary{flex:1}

/* CONTINUOUS TOGGLE ROW */
.cont-toggle-row{padding:10px 12px;background:var(--bg-3);border:1px solid var(--bd);border-radius:var(--r);margin-bottom:0}
.cont-toggle-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cont-toggle-left{display:flex;align-items:center;gap:10px}
.cont-checkbox{width:15px;height:15px;accent-color:var(--prp);flex-shrink:0;cursor:pointer}
.cont-label{cursor:pointer}
.cont-label__title{font-size:.8rem;font-weight:500;color:var(--tx);display:block}
.cont-label__sub{font-size:.68rem;color:var(--tx-3);display:block;margin-top:1px}
.cont-badge{font-size:.58rem;padding:2px 6px;border-radius:4px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.35);color:var(--prp);font-weight:700;letter-spacing:1px;flex-shrink:0}

/* CONTINUOUS STATUS PANEL */
.cont-panel{background:var(--bg-3);border:1px solid var(--bd);border-left:3px solid var(--prp);border-radius:var(--r);padding:12px;margin-top:12px}
.cont-panel__hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:6px}
.cont-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--tx-4)}
.cont-dot--active{background:var(--prp);box-shadow:0 0 6px var(--prp);animation:pulse 1.2s ease-in-out infinite}
.cont-status{font-size:.75rem;color:var(--tx-2);margin-bottom:8px;padding:6px 10px;background:var(--bg-4);border-radius:var(--r);border:1px solid var(--bd)}
.cont-log{max-height:110px;overflow-y:auto;font-size:.7rem;font-family:var(--f-mono)}
.cont-log-entry{padding:3px 0;border-bottom:1px solid var(--bd);color:var(--tx-3)}
.cont-log-entry:last-child{border-bottom:none}
.cont-log-entry--ok {color:var(--grn)}
.cont-log-entry--err{color:var(--ac)}

/* COOLDOWN */
.cd-wrap{background:var(--bg-3);border:1px solid var(--bd);border-left:3px solid var(--yel);border-radius:var(--r);padding:10px 12px;margin-bottom:12px}
.cd-txt{font-size:.74rem;color:var(--yel);margin-bottom:7px;font-weight:500}
.cd-track{height:3px;background:var(--bg-5);border-radius:2px;overflow:hidden}
.cd-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--yel));border-radius:2px;transition:width 1s linear}

/* RESPONSE */
.resp-box{background:var(--bg-3);border:1px solid var(--bd);border-radius:var(--r);padding:12px;margin-top:12px}
.resp-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:.66rem;color:var(--tx-3);text-transform:uppercase;letter-spacing:1px}
.resp-pre{font-size:.75rem;color:var(--tx-2);overflow:auto;white-space:pre-wrap;word-break:break-all;max-height:150px;line-height:1.65;font-family:var(--f-mono)}

/* LOG ROWS */
.log-row{background:var(--bg-3);border:1px solid var(--bd);border-radius:var(--r);padding:10px 12px;margin-bottom:7px;border-left:3px solid var(--bd);transition:border-color var(--t)}
.log-row:hover{border-left-color:var(--ac)}
.log-row__meta{display:flex;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.log-row__time{font-size:.67rem;color:var(--tx-3)}
.log-row__ip  {font-size:.67rem;color:var(--tx-4);font-family:var(--f-mono)}
.log-row__msg {font-size:.77rem;color:var(--ac);word-break:break-all;font-family:var(--f-mono)}
.log-row__dev {font-size:.63rem;color:var(--tx-4);margin-top:4px;word-break:break-all}

/* SEARCH */
.search-bar{display:flex;gap:8px;margin-bottom:12px}
.search-in{flex:1;background:var(--bg-3);border:1px solid var(--bd);border-radius:var(--r);padding:8px 11px;color:var(--tx);font-family:var(--f-ui);font-size:.81rem;outline:none;transition:border-color var(--t),box-shadow var(--t)}
.search-in:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-g)}
.search-in::placeholder{color:var(--tx-4)}

/* SPINNER */
.spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,.22);border-top-color:currentColor;border-radius:50%;animation:spin .65s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* PAGE HEADER */
.pg-hdr{margin-bottom:20px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pg-title{font-size:1.05rem;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:10px}
.pg-title::before{content:'';width:4px;height:18px;background:var(--ac);border-radius:2px;flex-shrink:0}
.pg-sub{font-size:.73rem;color:var(--tx-3);margin-top:4px}

/* CONFIG ROWS */
.cfg-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--bd);font-size:.74rem;gap:14px}
.cfg-row:last-child{border-bottom:none}
.cfg-key{color:var(--tx-3);font-family:var(--f-mono);font-size:.69rem;flex-shrink:0}
.cfg-val{color:var(--blu);text-align:right;word-break:break-all;font-family:var(--f-mono);font-size:.69rem}

/* PLANS */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.plan-card{background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--rl);padding:22px 16px;text-align:center;position:relative;overflow:hidden;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.plan-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--bd-2)}
.plan-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--rl) var(--rl) 0 0}
.plan-icon{font-size:1.7rem;margin-bottom:10px;display:block}
.plan-name{font-weight:700;font-size:.86rem;margin-bottom:5px}
.plan-delay{font-size:.72rem;color:var(--tx-3);margin-bottom:10px}
.plan-desc{font-size:.73rem;color:var(--tx-3);margin-bottom:10px;line-height:1.5}
.plan-feats{margin-top:10px;padding-top:10px;border-top:1px solid var(--bd)}
.plan-feat{font-size:.72rem;color:var(--tx-3);padding:2px 0;text-align:left}

/* TOAST */
.toast{position:fixed;bottom:16px;right:16px;z-index:9999;background:var(--bg-2);border:1px solid var(--bd);padding:8px 14px;border-radius:var(--r);font-size:.79rem;font-weight:500;box-shadow:var(--shadow);opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;pointer-events:none}
.toast--ok  {border-color:rgba(22,163,74,.5);color:var(--grn)}
.toast--err {border-color:rgba(221,0,0,.5);color:var(--ac)}
.toast--warn{border-color:rgba(217,119,6,.5);color:var(--yel)}
.toast--in  {opacity:1;transform:translateY(0);pointer-events:auto}

/* PASS GENERATOR */
.pass-gen{display:flex;gap:7px;margin-top:7px;align-items:center}
.pass-gen__len{width:68px}

/* UTILS */
.flex         {display:flex}
.items-ctr    {align-items:center}
.justify-bet  {justify-content:space-between}
.flex-wrap    {flex-wrap:wrap}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:18px}
.mt-2{margin-top:7px}.mt-3{margin-top:14px}.mt-4{margin-top:20px}
.mb-2{margin-bottom:7px}.mb-3{margin-bottom:14px}.mb-4{margin-bottom:20px}
.w-full{width:100%}.hidden{display:none!important}
.txt-xs{font-size:.69rem}.txt-sm{font-size:.79rem}
.txt-muted{color:var(--tx-3)}.txt-red{color:var(--ac)}.txt-grn{color:var(--grn)}.txt-yel{color:var(--yel)}
.txt-ctr{text-align:center}.txt-mono{font-family:var(--f-mono)}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}


/* ── HAMBURGER / MOBILE MENU ──────────────────────────── */
.hdr-burger { display: none }          /* hidden on desktop */
.hdr-signout-desktop { display: inline-flex }  /* visible on desktop */

.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: var(--bg-2);
  border-bottom: 1px solid var(--bd);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: mobMenuIn .18s ease;
}
[data-theme="light"] .mobile-menu { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
@keyframes mobMenuIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

.mobile-menu__inner { padding: 8px 0 12px; }

.mob-user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 10px;
}
.mob-user__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--grn); box-shadow: 0 0 6px var(--grn);
}
.mob-user__id   { font-size: .85rem; font-weight: 600; color: var(--tx); font-family: var(--f-mono); }
.mob-user__plan { font-size: .72rem; color: var(--ac); margin-top: 1px; }

.mob-divider { height: 1px; background: var(--bd); margin: 6px 0; }

.mob-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 18px; font-size: .88rem; color: var(--tx-2);
  text-decoration: none; transition: background var(--t), color var(--t);
  border-left: 3px solid transparent;
}
.mob-link svg { flex-shrink: 0; stroke: currentColor; }
.mob-link:hover         { background: var(--bg-3); color: var(--tx); border-left-color: var(--ac); }
.mob-link--admin        { color: var(--ac); font-weight: 500; }
.mob-link--admin:hover  { background: var(--ac-g); }
.mob-link--danger       { color: var(--ac); }
.mob-link--danger:hover { background: var(--ac-g); border-left-color: var(--ac); }

/* Make header position:relative so dropdown is anchored to it */
.hdr { position: sticky; top: 0; z-index: 80; }
.hdr .hdr-inner { position: relative; }

/* ── MOBILE FIRST ─────────────────────────────── */
/* Stack everything on mobile, side-by-side on desktop */
@media(max-width:860px){
  .home-layout{grid-template-columns:1fr!important}
}
@media(max-width:768px){
  .hdr-inner{padding:0 12px;height:50px}
  .nav-main{display:none}
  .hdr-signout-desktop{display:none}
  .hdr-chip-desktop{display:none}            /* hide user chip on mobile */
  .hdr-burger{display:flex}                  /* show hamburger */
  .logo-ver{display:none}
  .wrap,.wrap-sm,.wrap-md{padding:16px 12px}
  .panel-body{padding:14px 12px}
  .login-box{padding:24px 16px}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .ftr-inner{flex-direction:column;text-align:center;gap:8px}
  th,td{padding:8px 10px}
  .plans-grid{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .modal{padding:18px 14px}
  .req-actions{flex-direction:column}
  .req-actions .btn-stop{width:100%}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .plans-grid{grid-template-columns:1fr}
  .user-chip__plan{display:none}
  .login-box{padding:22px 14px}
  .home-hero__title{letter-spacing:2px}
  .stat__val{font-size:1.3rem}
}
@media(max-width:360px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .hdr-inner{gap:8px}
  .user-chip__id{font-size:.65rem}
}

/* ── TURNSTILE ────────────────────────────────────────── */
.cf-turnstile{
  display:flex; justify-content:center; align-items:center;
  margin:16px 0;
}
.cf-turnstile iframe{border-radius:var(--r)!important}