/* ═══════════════════════════════════════════════════════════════
   TIMA Shield — Dedicated Dark Theme
   Gaming trust infrastructure design system
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset & Variables ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  /* Core BG */
  --bg:#060810; --bg2:#0c1019; --bg3:#111622; --bg4:#161d2e;
  --border:#1a2236; --border2:#243050;
  /* Text */
  --text:#e8edf5; --text2:#9aa3b8; --text3:#606980;
  /* Neon Palette */
  --green:#2dd4a8; --gdim:rgba(45,212,168,.12);
  --amber:#f59e0b; --adim:rgba(245,158,11,.12);
  --purple:#a78bfa; --pdim:rgba(167,139,250,.12);
  --red:#ef4444; --rdim:rgba(239,68,68,.12);
  --blue:#2563eb; --bdim:rgba(37,99,235,.12);
  /* Neon Glow Shadows */
  --glow-green: 0 0 12px rgba(45,212,168,.35), 0 0 40px rgba(45,212,168,.12);
  --glow-amber: 0 0 12px rgba(245,158,11,.35), 0 0 40px rgba(245,158,11,.12);
  --glow-purple: 0 0 12px rgba(167,139,250,.35), 0 0 40px rgba(167,139,250,.12);
  --glow-red: 0 0 12px rgba(239,68,68,.35), 0 0 40px rgba(239,68,68,.12);
  --glow-blue: 0 0 12px rgba(37,99,235,.35), 0 0 40px rgba(37,99,235,.12);
  /* Extended palette */
  --trust-blue:#2563EB; --emerald:#059669; --crimson:#B91C1C;
  --indigo:#4F46E5; --deep-blue:#1E40AF;
  --neutral-gray:#6B7280; --muted-border:#E5E7EB;
}

html{height:100%}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100%;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
input,select,textarea,button{font-family:inherit}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--amber);box-shadow:var(--glow-amber)}

/* ═══════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════ */

@keyframes scanline {
  0%{top:-5%} 100%{top:105%}
}
@keyframes glow-pulse {
  0%,100%{box-shadow:var(--glow-green);opacity:1}
  50%{box-shadow:0 0 24px rgba(45,212,168,.5),0 0 60px rgba(45,212,168,.18);opacity:.85}
}
@keyframes glow-pulse-amber {
  0%,100%{box-shadow:var(--glow-amber)} 50%{box-shadow:0 0 24px rgba(245,158,11,.5),0 0 60px rgba(245,158,11,.18)}
}
@keyframes glitch {
  0%{transform:translate(0)} 20%{transform:translate(-2px,2px)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px,-2px)} 80%{transform:translate(1px,1px)} 100%{transform:translate(0)}
}
@keyframes neon-flicker {
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
  20%,24%,55%{opacity:.6}
}
@keyframes fadeSlideIn {
  from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)}
}
@keyframes fadeSlideOut {
  from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-8px)}
}
@keyframes cardReveal {
  from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes borderGlow {
  0%,100%{border-color:var(--amber);box-shadow:var(--glow-amber)}
  50%{border-color:rgba(245,158,11,.6);box-shadow:0 0 30px rgba(245,158,11,.25)}
}
@keyframes shake {
  0%,100%{transform:rotate(0)} 15%{transform:rotate(15deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} 75%{transform:rotate(3deg)}
}
@keyframes slideDown {
  from{max-height:0;opacity:0} to{max-height:2000px;opacity:1}
}
@keyframes slideUp {
  from{max-height:2000px;opacity:1} to{max-height:0;opacity:0}
}
@keyframes counterUp {
  from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)}
}
@keyframes tabIndicator {
  from{transform:scaleX(0)} to{transform:scaleX(1)}
}
@keyframes pulseRing {
  0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.8);opacity:0}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ═══════════════════════════════════════
   SHIELD LOGIN — SPLIT LAYOUT
   ═══════════════════════════════════════ */

.shield-login-wrap{
  display:flex;min-height:100vh;width:100%;
  background:var(--bg);
}
.shield-login-brand{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:#040608;
}
.shield-login-brand::before{
  content:'';position:absolute;inset:-50%;width:200%;height:200%;
  background:
    linear-gradient(rgba(245,158,11,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,158,11,.04) 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(600px) rotateX(35deg) rotateZ(-5deg);
  animation:gridDrift 25s ease-in-out infinite alternate;
}
.shield-login-brand::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%,rgba(245,158,11,.07) 0%,transparent 70%),
    radial-gradient(ellipse 30% 25% at 25% 70%,rgba(167,139,250,.04) 0%,transparent 60%);
}
@keyframes gridDrift{
  0%{transform:perspective(600px) rotateX(35deg) rotateZ(-5deg) translateY(0)}
  100%{transform:perspective(600px) rotateX(35deg) rotateZ(-5deg) translateY(-30px)}
}
.shield-login-logo{
  position:relative;z-index:5;text-align:center;
}
.shield-login-logo svg{margin-bottom:16px;filter:drop-shadow(0 0 20px rgba(245,158,11,.4))}
.shield-login-title{
  font-size:36px;font-weight:900;letter-spacing:-1px;color:var(--text);margin-bottom:8px;
}
.shield-login-title span{
  background:linear-gradient(135deg,#f59e0b,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.shield-login-tagline{font-size:14px;color:var(--text3);margin-bottom:20px}
.shield-login-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;position:relative;z-index:5}
.shield-login-form{
  width:460px;min-width:400px;flex-shrink:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px;overflow-y:auto;max-height:100vh;
  background:var(--bg2);
  border-left:1px solid var(--border);
  position:relative;z-index:10;
  box-shadow:-20px 0 60px rgba(0,0,0,.3);
}
.shield-login-form>*{animation:fadeSlideIn .4s ease-out}

/* Auth badges */
.auth-badge{font-size:11px;padding:5px 12px;border-radius:20px;font-weight:600;border:1px solid rgba(255,255,255,.08)}
.ab-green{color:#2dd4a8;background:rgba(45,212,168,.08);border-color:rgba(45,212,168,.2)}
.ab-purple{color:#a78bfa;background:rgba(167,139,250,.08);border-color:rgba(167,139,250,.2)}
.ab-amber{color:#f59e0b;background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2)}

/* Auth form elements */
.auth-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:32px}
.auth-logo svg{flex-shrink:0}
.alt{font-weight:800;font-size:24px;letter-spacing:-.5px}
h2{font-size:24px;font-weight:700;margin-bottom:6px;text-align:center}
.sub{font-size:14px;color:var(--text2);margin-bottom:28px;text-align:center}
.sub a{color:var(--amber);font-weight:600;cursor:pointer;transition:text-shadow .2s}
.sub a:hover{text-shadow:0 0 12px rgba(245,158,11,.4)}

/* Form Elements */
.fg{margin-bottom:16px}
.fl{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px}
.fi{
  width:100%;padding:12px 16px;border-radius:10px;
  background:var(--bg);border:1px solid var(--border);
  color:var(--text);font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.fi:focus{border-color:var(--amber);box-shadow:var(--glow-amber)}
.fi::placeholder{color:var(--text3)}
textarea.fi{min-height:80px;resize:vertical}
select.fi{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23606980' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}

.fe{font-size:12px;color:var(--red);margin-top:8px;display:none;text-align:center;text-shadow:0 0 8px rgba(239,68,68,.3)}.fe.show{display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Auth Button — Shield amber glow */
.abtn{
  width:100%;padding:14px;border-radius:10px;border:none;
  background:var(--green);color:#060810;font-size:15px;font-weight:700;
  cursor:pointer;transition:all .2s;margin-top:8px;
  position:relative;overflow:hidden;
}
.abtn::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .5s;
}
.abtn:hover{box-shadow:var(--glow-green);transform:translateY(-1px)}
.abtn:hover::after{left:100%}
.abtn:disabled{opacity:.5;cursor:not-allowed}
.abtn-shield{background:var(--amber);color:#060810}
.abtn-shield:hover{background:#fbbf24;box-shadow:var(--glow-amber)}

/* Verification Code Inputs */
.code-inputs{display:flex;gap:8px;justify-content:center;margin:24px 0}
.ci{
  width:48px;height:56px;border-radius:10px;background:var(--bg);
  border:1px solid var(--border);color:var(--amber);
  font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;
  text-align:center;outline:none;transition:all .2s;
}
.ci:focus{border-color:var(--amber);box-shadow:var(--glow-amber)}

/* ═══════════════════════════════════════
   DASHBOARD LAYOUT
   ═══════════════════════════════════════ */

.dashboard{display:flex;min-height:100vh}

/* Sidebar */
.sb{
  width:240px;background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:100;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sb-logo{cursor:pointer;display:flex;align-items:center;gap:10px;padding:20px 20px 24px;border-bottom:1px solid var(--border)}
.sb-li{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--green),#1a9e7a);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#fff;
  box-shadow:var(--glow-green);
}
.sb-li-shield{
  background:linear-gradient(135deg,var(--amber),#d97706);
  box-shadow:var(--glow-amber);
}
.sb-lt{font-weight:700;font-size:16px}

/* Sidebar Nav */
.sb-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.sb-section{padding:4px 0;border-bottom:1px solid var(--border)}
.sb-section:last-child{border-bottom:none}
.sb-sep-l{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;padding:0 12px 8px;font-weight:600}

/* Sidebar Links */
.sl{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--text2);cursor:pointer;
  transition:all .2s;border:none;background:none;width:100%;text-align:left;
  position:relative;
}
.sl:hover{background:rgba(245,158,11,.04);color:var(--text);transform:translateX(2px)}
.sl.active{
  background:var(--adim);color:var(--amber);font-weight:600;
  box-shadow:inset 3px 0 0 var(--amber);
}
.sl.active::after{
  content:'';position:absolute;left:0;top:25%;bottom:25%;width:3px;
  background:var(--amber);border-radius:0 2px 2px 0;
  box-shadow:var(--glow-amber);animation:neon-flicker 3s infinite;
}
.sl .ic{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:filter .2s,text-shadow .2s}
.sl .ic svg{width:18px;height:18px;flex-shrink:0}
.sl:hover .ic{text-shadow:0 0 8px currentColor;filter:drop-shadow(0 0 6px currentColor)}
.sl .notif{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;
  min-width:18px;text-align:center;
  animation:glow-pulse 2s ease-in-out infinite;box-shadow:var(--glow-red);
}
.sl-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sidebar User */
.sb-user{padding:16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-av{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--amber),#d97706);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:#fff;flex-shrink:0;
  position:relative;
}
.sb-av::after{
  content:'';position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;
  border-radius:50%;background:#22c55e;border:2px solid var(--bg2);
  box-shadow:0 0 6px rgba(34,197,94,.6);
}
.sb-ui{flex:1;min-width:0}
.sb-un{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-ur{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.sb-lo{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;font-size:16px;transition:color .2s}.sb-lo:hover{color:var(--red);text-shadow:0 0 8px rgba(239,68,68,.4)}

/* Main Content */
.main{flex:1;margin-left:240px}

/* Topbar */
.topbar{
  padding:16px 32px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;
  background:rgba(6,8,16,.85);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:50;
  overflow:hidden;
}
.topbar::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.15),transparent);
  animation:scanline 6s linear infinite;pointer-events:none;
}
.topbar h1{font-size:20px;font-weight:700}
.topbar h1:hover{animation:glitch .3s ease-in-out}
.topbar-link-tima{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;
  border:1px solid var(--green);background:rgba(45,212,168,.08);color:var(--green);
  font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;
  white-space:nowrap;text-decoration:none;
}
.topbar-link-tima:hover{background:rgba(45,212,168,.18);box-shadow:0 0 8px rgba(45,212,168,.3)}
.topbar-link-tima svg{flex-shrink:0}
.t-id{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--amber);
  background:var(--adim);padding:4px 10px;border-radius:6px;letter-spacing:1px;
  box-shadow:var(--glow-amber);animation:neon-flicker 4s infinite;
}

/* Page Content */
.content{padding:32px;animation:fadeSlideIn .3s ease-out}

/* ═══════════════════════════════════════
   TABS (Neon Underline)
   ═══════════════════════════════════════ */

.neon-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--border);position:relative}
.neon-tab{
  padding:12px 20px;font-size:14px;font-weight:600;color:var(--text3);
  cursor:pointer;border:none;background:none;
  border-bottom:2px solid transparent;transition:all .2s;
  position:relative;
}
.neon-tab:hover{color:var(--text)}
.neon-tab.active{color:var(--amber);border-bottom-color:var(--amber)}
.neon-tab.active::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:var(--amber);box-shadow:0 0 8px var(--amber),0 0 16px rgba(245,158,11,.3);
  animation:tabIndicator .25s ease-out;
}
.neon-tab .tab-badge{
  background:var(--red);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:8px;margin-left:6px;
  box-shadow:var(--glow-red);
}
#tab-content-area{min-height:200px;position:relative}
.tab-badge{background:var(--red);color:#fff;font-size:9px;font-weight:700;
  padding:1px 6px;border-radius:8px;margin-left:6px;
  animation:glow-pulse 2s ease-in-out infinite}
.tab-content{animation:fadeSlideIn .25s ease-out}

/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */

.card{
  background:var(--bg3);border:1px solid var(--border);border-radius:16px;
  padding:28px;margin-bottom:24px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.card:hover{
  border-color:rgba(245,158,11,.3);
  box-shadow:var(--glow-amber);
  transform:perspective(1000px) rotateX(1deg) rotateY(-1deg) translateY(-4px);
}
.card h3{font-size:16px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.card--stagger{animation:cardReveal .4s ease-out backwards}
.card--stagger:nth-child(1){animation-delay:0ms}
.card--stagger:nth-child(2){animation-delay:60ms}
.card--stagger:nth-child(3){animation-delay:120ms}

.empty{text-align:center;padding:32px 24px;color:var(--text3)}
.empty .eic{font-size:32px;margin-bottom:8px;opacity:.5}
.empty p{font-size:14px}

/* ═══════════════════════════════════════
   STATS GRID
   ═══════════════════════════════════════ */

.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:32px}
.sc{
  background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:20px;
  transition:all .3s;position:relative;overflow:hidden;
}
.sc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--amber),transparent);opacity:0;transition:opacity .3s;
}
.sc:hover{border-color:rgba(245,158,11,.3);box-shadow:var(--glow-amber);transform:translateY(-2px)}
.sc:hover::before{opacity:1}
.sc-l{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.sc-v{
  font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;
  animation:counterUp .5s ease-out;
}
.sc-s{font-size:12px;color:var(--text3);margin-top:4px}

/* ═══════════════════════════════════════
   BADGES
   ═══════════════════════════════════════ */

.badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;transition:box-shadow .3s}
.badge:hover{box-shadow:0 0 8px currentColor}
.b-admin{background:var(--rdim);color:var(--red)}.b-player{background:var(--gdim);color:var(--green)}.b-studio{background:var(--adim);color:var(--amber)}.b-enterprise{background:var(--bdim);color:var(--blue)}
.b-ladmin{background:rgba(245,158,11,.15);color:#f59e0b}.b-lmod{background:rgba(139,92,246,.15);color:#8b5cf6}.b-mod{background:rgba(99,102,241,.15);color:#6366f1}.b-lsup{background:rgba(6,182,212,.15);color:#06b6d4}.b-sup{background:rgba(59,130,246,.15);color:#3b82f6}
.b-ok{background:var(--gdim);color:var(--green)}.b-warn{background:var(--adim);color:var(--amber)}.b-err{background:var(--rdim);color:var(--red)}.b-info{background:var(--bdim);color:var(--blue)}
.b-tag{background:var(--bdim);color:var(--blue);margin:2px}.b-atag{background:var(--adim);color:var(--amber);margin:2px}

/* ═══════════════════════════════════════
   TABLES
   ═══════════════════════════════════════ */

.utable{width:100%;border-collapse:separate;border-spacing:0 4px}
.utable th{text-align:left;padding:8px 12px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;border-bottom:1px solid var(--border)}
.utable td{padding:10px 12px;font-size:13px;background:var(--bg2);border-bottom:1px solid var(--border);transition:background .2s}
.utable tr:hover td{background:rgba(245,158,11,.03)}
.utable td:first-child{border-radius:8px 0 0 8px}.utable td:last-child{border-radius:0 8px 8px 0}

.search-bar{display:flex;gap:8px;margin-bottom:16px}.search-bar input{flex:1;padding:10px 14px;border-radius:8px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:13px;outline:none;transition:border-color .2s}.search-bar input:focus{border-color:var(--amber);box-shadow:var(--glow-amber)}
.search-bar button{padding:10px 18px;border-radius:8px;border:none;background:var(--amber);color:#060810;font-weight:700;cursor:pointer;transition:all .2s}.search-bar button:hover{background:#fbbf24;box-shadow:var(--glow-amber)}
.pager{display:flex;justify-content:center;gap:4px;margin-top:16px}
.pager button{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);font-size:12px;cursor:pointer;transition:all .2s}.pager button:hover,.pager button.active{border-color:var(--amber);color:var(--amber);box-shadow:var(--glow-amber)}

/* ═══════════════════════════════════════
   MODALS
   ═══════════════════════════════════════ */

.mo{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:9000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease-out}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.5);animation:fadeSlideIn .3s ease-out;padding:0}
.modal h3{font-size:16px;font-weight:700;padding:20px 24px 16px;border-bottom:1px solid var(--border)}
.mc{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:4px;border-radius:6px;transition:all .2s;display:flex;align-items:center;justify-content:center;width:28px;height:28px}.mc:hover{color:var(--red);background:rgba(239,68,68,.1)}
.modal-body{padding:20px 24px}
.modal-body .fg{margin-bottom:16px}
.modal-body .fl{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px}
.modal-body .fi{width:100%;padding:10px 14px;border-radius:8px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit;box-sizing:border-box}.modal-body .fi:focus{border-color:var(--amber);box-shadow:var(--glow-amber)}
.ma{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--border)}
.mb{padding:8px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);transition:all .2s}
.mb-g{background:var(--bg3);color:var(--text2)}.mb-g:hover{border-color:var(--text3);color:var(--text)}
.mb-p{background:var(--amber);color:#060810;border-color:var(--amber)}.mb-p:hover{background:#fbbf24;box-shadow:var(--glow-amber)}
.mb-d{background:var(--red);color:#fff;border-color:var(--red)}.mb-d:hover{background:#ff5555;box-shadow:var(--glow-red)}

/* ═══════════════════════════════════════
   TOGGLE SWITCH
   ═══════════════════════════════════════ */

.tog{width:40px;height:22px;border-radius:11px;border:2px solid var(--border);background:var(--bg3);cursor:pointer;position:relative;transition:all .3s;padding:0;flex-shrink:0}
.tog::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text3);transition:all .3s}
.tog.on{background:var(--amber);border-color:var(--amber)}
.tog.on::after{transform:translateX(18px);background:#fff}

/* ═══════════════════════════════════════
   TOAST
   ═══════════════════════════════════════ */

.toast{
  position:fixed;bottom:24px;right:24px;padding:14px 20px;border-radius:10px;
  font-size:13px;font-weight:600;z-index:9999;
  animation:fadeSlideIn .3s ease-out;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.toast-success{background:var(--green);color:#060810;box-shadow:var(--glow-green)}
.toast-error{background:var(--red);color:#fff;box-shadow:var(--glow-red)}
.toast-warning{background:var(--amber);color:#060810;box-shadow:var(--glow-amber)}

/* ═══════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════ */

.accordion{margin-bottom:8px}
.accordion-header{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-radius:10px;border:1px solid var(--border);background:var(--bg3);
  cursor:pointer;transition:all .25s;width:100%;
  font-size:14px;font-weight:600;color:var(--text);
}
.accordion-header:hover{border-color:var(--border2);background:var(--bg4)}
.accordion-header.open{
  border-color:rgba(245,158,11,.3);background:var(--adim);
  box-shadow:inset 3px 0 0 var(--amber),var(--glow-amber);
  border-radius:10px 10px 0 0;
}
.accordion-header .acc-icon{width:20px;text-align:center;font-size:16px}
.accordion-header .acc-badge{
  margin-left:auto;font-size:10px;font-weight:700;padding:2px 8px;
  border-radius:6px;background:var(--adim);color:var(--amber);
}
.accordion-header .acc-chevron{
  font-size:10px;color:var(--text3);transition:transform .3s;margin-left:8px;
}
.accordion-header.open .acc-chevron{transform:rotate(180deg)}
.accordion-body{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;
  border:1px solid transparent;border-top:none;
  border-radius:0 0 10px 10px;
}
.accordion-body.open{
  max-height:3000px;opacity:1;
  border-color:var(--border);background:var(--bg2);padding:20px;
}
.acc-divider{
  margin:16px 0;padding:8px 0;border-top:1px solid var(--border);
  font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;
  display:flex;align-items:center;gap:8px;
}
.acc-divider::before,.acc-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.2),transparent);
}

/* ═══════════════════════════════════════
   ADMIN CONSOLE
   ═══════════════════════════════════════ */

.console-wrap{background:#0a0e14;border:1px solid var(--border);border-radius:12px;overflow:hidden;font-family:'JetBrains Mono',monospace}
.console-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(245,158,11,.03);border-bottom:1px solid var(--border)}
.console-header h4{font-size:12px;font-weight:700;color:var(--amber);display:flex;align-items:center;gap:6px}
.console-filters{display:flex;gap:4px}
.console-filter{padding:3px 8px;border-radius:4px;font-size:10px;font-weight:600;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text3);transition:all .2s}
.console-filter.active,.console-filter:hover{border-color:var(--amber);color:var(--amber);background:var(--adim)}
.console-body{height:400px;overflow-y:auto;padding:8px 0;font-size:11px;line-height:1.8}
.console-line{padding:1px 16px;display:flex;gap:12px;transition:background .1s}.console-line:hover{background:rgba(255,255,255,.02)}
.console-time{color:var(--text3);min-width:140px;flex-shrink:0}
.console-level{font-weight:700;min-width:50px;flex-shrink:0}
.console-level-info{color:var(--green)}.console-level-warn{color:var(--amber)}.console-level-error{color:var(--red)}.console-level-debug{color:var(--blue)}
.console-msg{color:var(--text2);word-break:break-all;flex:1}

/* ═══════════════════════════════════════
   WARN / DANGER BOXES
   ═══════════════════════════════════════ */

.warn-box{background:var(--adim);border:1px solid rgba(245,158,11,.25);border-radius:10px;padding:12px 16px;margin-top:12px;font-size:12px;color:var(--amber);line-height:1.6;box-shadow:var(--glow-amber)}
.dz{background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.15);border-radius:12px;padding:20px}
.dz h3{color:var(--red);font-size:16px;font-weight:700;margin-bottom:4px;border:none;padding:0}

/* ═══════════════════════════════════════
   TRUST BARS
   ═══════════════════════════════════════ */

.trust-bar{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.trust-label{flex:1;font-size:13px;color:var(--text2)}.trust-pts{font-size:13px;font-weight:700;min-width:50px;text-align:right}
.trust-fill{width:100px;height:6px;border-radius:3px;background:var(--bg3);overflow:hidden;flex-shrink:0}
.trust-fill-inner{height:100%;border-radius:3px;transition:width .5s ease-out;box-shadow:0 0 4px currentColor}

/* ═══════════════════════════════════════
   SKELETON LOADER
   ═══════════════════════════════════════ */

@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:800px 100%;animation:shimmer 1.5s infinite;border-radius:8px}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

.mob-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  z-index:199;opacity:0;transition:opacity .3s;pointer-events:none}
.mob-backdrop.show{opacity:1;pointer-events:auto}
.mob-menu{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:4px}
.mob-menu svg{display:block}

@media(max-width:768px){
  .sb{transform:translateX(-100%);width:280px;z-index:200}
  .sb.mob-open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.5)}
  .mob-menu{display:flex;align-items:center}
  .main{margin-left:0}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:16px}
  .content{padding:16px}
  .sg{grid-template-columns:repeat(2,1fr);gap:10px}
  .sc-v{font-size:22px}
  /* Auth mobile */
  .shield-login-wrap{flex-direction:column}
  .shield-login-brand{display:none}
  .shield-login-form{width:100%;min-width:0;max-width:100%;border-left:none;box-shadow:none;padding:32px 24px}
}

@media(max-width:480px){
  .content{padding:12px}
  .sg{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
}

/* Tablet — collapsed sidebar */
@media(min-width:769px) and (max-width:1024px){
  .sb{width:64px;overflow:hidden}
  .sb:hover{width:240px}
  .sb .sb-lt,.sb .sb-sep-l,.sb .sb-un,.sb .sb-ur,.sb .sl span:not(.ic):not(.notif){
    opacity:0;transition:opacity .2s;white-space:nowrap;
  }
  .sb:hover .sb-lt,.sb:hover .sb-sep-l,.sb:hover .sb-un,.sb:hover .sb-ur,.sb:hover .sl span:not(.ic):not(.notif){opacity:1}
  .main{margin-left:64px}
  .sb:hover+.main{margin-left:240px}
}

/* ═══════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════ */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ═══════════════════════════════════════
   FOCUS ACCESSIBILITY
   ═══════════════════════════════════════ */

:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:2px}