/* SynDex Auth Platform — Wisbyte-style clean SaaS UI */
:root {
  /* Default: Wispbyte Dark Theme */
  --ap-bg:      #07090e;
  --ap-bg2:     #0b0f19;
  --ap-bg3:     #111726;
  --ap-border:  rgba(255,255,255,0.06);
  --ap-border2: rgba(255,255,255,0.12);
  --ap-text:    #f1f5f9;
  --ap-muted:   #94a3b8;
  --ap-muted2:  #64748b;
  --ap-red:     #3b82f6; /* Blue brand highlight */
  --ap-red2:    #60a5fa;
  --ap-red-bg:  rgba(59,130,246,0.08);
  --ap-red-bdr: rgba(59,130,246,0.22);
  --ap-green:   #22c55e;
  --ap-green-bg:rgba(34,197,94,0.09);
  --ap-gold:    #fbbf24;
  --ap-gold-bg: rgba(251, 191, 36, 0.09);
  --ap-blue:    #3b82f6;
  --ap-blue-bg: rgba(59, 130, 246, 0.09);
  --ap-shadow:  0 4px 20px rgba(0,0,0,0.5);
  --ap-shadow2: 0 10px 30px rgba(0,0,0,0.7);
  --ap-radius:  10px;
  --ap-sidebar: 240px;
  --ap-topbar:  58px;
  --ap-font:    'Inter', sans-serif;
  --ap-mono:    'JetBrains Mono', monospace;
}

html.theme-light {
  --ap-bg:      #f7f8fc;
  --ap-bg2:     #ffffff;
  --ap-bg3:     #f0f2f8;
  --ap-border:  #e2e6f0;
  --ap-border2: #cdd3e3;
  --ap-text:    #0f1523;
  --ap-muted:   #6b7594;
  --ap-muted2:  #9ba3be;
  --ap-red:     #c8102e;
  --ap-red2:    #e8322c;
  --ap-red-bg:  rgba(200,16,46,0.07);
  --ap-red-bdr: rgba(200,16,46,0.22);
  --ap-green:   #16a34a;
  --ap-green-bg:rgba(22,163,74,0.09);
  --ap-gold:    #d97706;
  --ap-gold-bg: rgba(217,119,6,0.09);
  --ap-blue:    #2563eb;
  --ap-blue-bg: rgba(37,99,235,0.09);
  --ap-shadow:  0 1px 4px rgba(15,21,35,0.08), 0 4px 16px rgba(15,21,35,0.05);
  --ap-shadow2: 0 4px 20px rgba(15,21,35,0.12);
}

html.theme-slate {
  --ap-bg:      #0f172a;
  --ap-bg2:     #1e293b;
  --ap-bg3:     #334155;
  --ap-border:  rgba(255,255,255,0.07);
  --ap-border2: rgba(255,255,255,0.15);
  --ap-text:    #f8fafc;
  --ap-muted:   #cbd5e1;
  --ap-muted2:  #94a3b8;
  --ap-red:     #f43f5e;
  --ap-red2:    #fb7185;
  --ap-red-bg:  rgba(244,63,94,0.09);
  --ap-red-bdr: rgba(244,63,94,0.25);
  --ap-green:   #10b981;
  --ap-green-bg:rgba(16,185,129,0.09);
  --ap-gold:    #f59e0b;
  --ap-gold-bg: rgba(245,158,11,0.09);
  --ap-blue:    #0ea5e9;
  --ap-blue-bg: rgba(14, 165, 233, 0.09);
  --ap-shadow:  0 4px 20px rgba(0,0,0,0.4);
  --ap-shadow2: 0 10px 30px rgba(0,0,0,0.6);
}

html.theme-cyberpunk {
  --ap-bg:      #0a0512;
  --ap-bg2:     #120921;
  --ap-bg3:     #1c0e34;
  --ap-border:  rgba(168,85,247,0.15);
  --ap-border2: rgba(168,85,247,0.3);
  --ap-text:    #f5f3ff;
  --ap-muted:   #c084fc;
  --ap-muted2:  #a855f7;
  --ap-red:     #d946ef;
  --ap-red2:    #f472b6;
  --ap-red-bg:  rgba(217,70,239,0.1);
  --ap-red-bdr: rgba(217,70,239,0.3);
  --ap-green:   #06b6d4;
  --ap-green-bg:rgba(6,182,212,0.1);
  --ap-gold:    #fb7185;
  --ap-gold-bg: rgba(251,113,133,0.1);
  --ap-blue:    #8b5cf6;
  --ap-blue-bg: rgba(139,92,246,0.1);
  --ap-shadow:  0 4px 20px rgba(168,85,247,0.1);
  --ap-shadow2: 0 10px 30px rgba(168,85,247,0.2);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:var(--ap-font);background:var(--ap-bg);color:var(--ap-text);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:var(--ap-font);cursor:pointer;border:none;outline:none}
input,select,textarea{font-family:var(--ap-font);outline:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--ap-bg3)}
::-webkit-scrollbar-thumb{background:var(--ap-border2);border-radius:9px}

/* ── LOGIN PAGE ──────────────────────────────── */
.auth-login-page{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:var(--ap-bg);position:relative;overflow:hidden;
}
.apl-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.apl-bg-glow{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:700px;height:500px;
  background:radial-gradient(ellipse,rgba(59,130,246,0.1) 0%,transparent 70%);
}
.apl-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--ap-border) 1px,transparent 1px),
    linear-gradient(90deg,var(--ap-border) 1px,transparent 1px);
  background-size:48px 48px;opacity:.6;
}
.apl-wrap{position:relative;z-index:1;width:100%;max-width:460px;padding:24px}
.apl-card{
  background:var(--ap-bg2);border:1px solid var(--ap-border);
  border-radius:16px;padding:36px 34px;
  box-shadow:var(--ap-shadow2);
}
.apl-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.apl-logo-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--ap-red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 16px var(--ap-red-bdr);flex-shrink:0;
}
.apl-logo-name{font-size:17px;font-weight:700;color:var(--ap-text)}
.apl-logo-sub{font-size:11px;color:var(--ap-muted);margin-top:1px}

/* ── TABS ─────────────────────────────────────── */
.apl-tabs{
  display:flex;gap:0;margin-bottom:20px;
  background:var(--ap-bg3);border:1px solid var(--ap-border);
  border-radius:10px;padding:4px;
}
.apl-tab{
  flex:1;padding:8px 14px;border-radius:7px;font-size:13px;font-weight:600;
  text-align:center;cursor:pointer;color:var(--ap-muted);
  transition:all .18s;user-select:none;
}
.apl-tab.active{
  background:var(--ap-bg2);color:var(--ap-text);
  box-shadow:0 1px 6px rgba(0,0,0,.25);
}
.apl-tab:hover:not(.active){color:var(--ap-text)}

/* ── SOCIAL LOGIN BUTTONS ─────────────────────── */
.social-login-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.btn-social{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:11px 16px;border-radius:9px;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s;border:1px solid var(--ap-border);
  letter-spacing:.2px;
}
.btn-discord{
  background:rgba(88,101,242,0.1);border-color:rgba(88,101,242,0.3);
  color:#7289da;
}
.btn-discord:hover{background:rgba(88,101,242,0.18);border-color:rgba(88,101,242,0.5);transform:translateY(-1px);box-shadow:0 4px 16px rgba(88,101,242,.2)}
.btn-google{
  background:rgba(219,68,55,0.08);border-color:rgba(219,68,55,0.25);
  color:#e05244;
}
.btn-google:hover{background:rgba(219,68,55,0.15);border-color:rgba(219,68,55,0.45);transform:translateY(-1px);box-shadow:0 4px 16px rgba(219,68,55,.2)}

/* ── DIVIDER ─────────────────────────────────── */
.apl-divider{
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;color:var(--ap-muted2);font-size:11px;
  white-space:nowrap;
}
.apl-divider::before,.apl-divider::after{
  content:'';flex:1;height:1px;background:var(--ap-border);
}

.apl-heading{font-size:20px;font-weight:700;color:var(--ap-text);margin-bottom:4px}
.apl-sub{font-size:12px;color:var(--ap-muted);margin-bottom:20px}
.apl-error{
  background:var(--ap-red-bg);border:1px solid var(--ap-red-bdr);
  color:var(--ap-red);font-size:13px;border-radius:8px;
  padding:10px 14px;margin-bottom:18px;
}
.apl-error.hidden{display:none}
.apl-field{margin-bottom:16px}
.apl-field label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ap-muted);margin-bottom:6px;
}
.apl-field input{
  width:100%;background:var(--ap-bg3);border:1px solid var(--ap-border);
  border-radius:8px;padding:11px 14px;color:var(--ap-text);
  font-size:14px;transition:border-color .18s,box-shadow .18s;
}
.apl-field input:focus{border-color:var(--ap-red);box-shadow:0 0 0 3px var(--ap-red-bg)}
.apl-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ap-red);color:#fff;font-weight:600;font-size:14px;
  padding:12px;border-radius:8px;margin-top:6px;
  transition:background .18s,transform .1s,box-shadow .18s;
  box-shadow:0 2px 12px rgba(200,16,46,.28);
}
.apl-btn:hover{background:var(--ap-red2);transform:translateY(-1px);box-shadow:0 4px 20px rgba(200,16,46,.38)}
.apl-btn:disabled{opacity:.55;pointer-events:none}
.apl-footer{
  display:flex;justify-content:space-between;margin-top:20px;
  font-size:12px;color:var(--ap-muted2);
}
.apl-footer a{color:var(--ap-red);font-weight:500}

/* ── PANEL LAYOUT ─────────────────────────────── */
html,body{height:100%;overflow:hidden;}
.ap-panel,.ap-shell{
  display:flex;height:100vh;overflow:hidden;background:var(--ap-bg);
  /* FIX: prevent sidebar text bleeding */
}

/* ── SIDEBAR ──────────────────────────────────── */
.ap-sidebar,.ap-sb{
  width:var(--ap-sidebar);min-width:var(--ap-sidebar);height:100vh;
  background:var(--ap-bg2);border-right:1px solid var(--ap-border);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  flex-shrink:0;position:relative;z-index:10;
  transition:width 0.22s cubic-bezier(.4,0,.2,1), min-width 0.22s cubic-bezier(.4,0,.2,1);
}
.ap-sidebar.collapsed,.ap-sb.collapsed{width:60px;min-width:60px}
.ap-sidebar-logo,.ap-sb-logo{
  display:flex;align-items:center;gap:10px;
  padding:0 16px;height:var(--ap-topbar);
  border-bottom:1px solid var(--ap-border);flex-shrink:0;
}
.ap-logo-icon,.ap-sb-logo-icon{
  width:32px;height:32px;border-radius:8px;background:var(--ap-red);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 8px rgba(59,130,246,.25);
}
.ap-logo-name,.ap-sb-logo-name{font-size:14px;font-weight:800;color:var(--ap-text);line-height:1.2}
.ap-logo-ver,.ap-sb-logo-ver{font-size:10px;color:var(--ap-muted);letter-spacing:.5px;margin-top:1px}

/* Collapse button */
.ap-sb-collapse{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;color:var(--ap-muted);font-size:11px;
  cursor:pointer;transition:color .15s;border-bottom:1px solid var(--ap-border);
  user-select:none;
}
.ap-sb-collapse:hover{color:var(--ap-text)}
.ap-sb-collapse svg{width:13px;height:13px;flex-shrink:0}

/* Nav sections */
.ap-nav-group,.ap-nav-section{padding:6px 0}
.ap-nav-label{
  font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ap-muted2);padding:4px 16px 6px;display:block;
}
.ap-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;color:var(--ap-muted);font-size:13px;font-weight:500;
  cursor:pointer;transition:all .15s;border-left:3px solid transparent;
  user-select:none;text-decoration:none;
}
.ap-nav-item svg{width:15px;height:15px;flex-shrink:0;opacity:.7;transition:opacity .15s}
.ap-nav-item:hover{color:var(--ap-text);background:var(--ap-bg3)}
.ap-nav-item:hover svg{opacity:1}
.ap-nav-item.active{
  color:var(--ap-red);background:var(--ap-red-bg);
  border-left-color:var(--ap-red);font-weight:600;
}
.ap-nav-item.active svg{opacity:1;color:var(--ap-red)}
.ap-nav-sep{height:1px;background:var(--ap-border);margin:4px 16px}

/* Sidebar bottom */
.ap-sidebar-bottom,.ap-sb-bottom{margin-top:auto;border-top:1px solid var(--ap-border);padding:10px 16px}
.ap-user-chip,.ap-user-row{
  display:flex;align-items:center;gap:9px;padding:8px 10px;
  background:var(--ap-bg3);border:1px solid var(--ap-border);
  border-radius:var(--ap-radius);margin-bottom:8px;
}
.ap-avatar{
  width:28px;height:28px;border-radius:7px;background:var(--ap-red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  font-weight:700;flex-shrink:0;
}
.ap-user-info{flex:1;min-width:0}
.ap-user-name{font-size:11px;font-weight:600;color:var(--ap-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-user-role{font-size:9px;color:var(--ap-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.ap-sidebar-btns,.ap-sb-links{display:flex;gap:5px}
.ap-sidebar-link,.ap-sb-link{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 8px;border-radius:7px;font-size:11px;font-weight:500;
  color:var(--ap-muted);background:var(--ap-bg3);border:1px solid var(--ap-border);
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.ap-sidebar-link:hover,.ap-sb-link:hover{color:var(--ap-text);border-color:var(--ap-border2)}
.ap-logout-btn,.ap-sb-link.logout{color:var(--ap-red)!important;border-color:var(--ap-red-bdr)!important;background:var(--ap-red-bg)!important}
.ap-logout-btn:hover,.ap-sb-link.logout:hover{background:rgba(200,16,46,.14)!important}

/* Collapsed sidebar — hide labels/text */
.ap-sb.collapsed .ap-sb-logo-name,
.ap-sb.collapsed .ap-sb-logo-ver,
.ap-sb.collapsed .ap-sb-app-selector,
.ap-sb.collapsed .ap-sb-collapse span,
.ap-sb.collapsed .ap-nav-label,
.ap-sb.collapsed .ap-nav-item span,
.ap-sb.collapsed .ap-user-row,
.ap-sb.collapsed #ap-theme-label{display:none!important}
.ap-sb.collapsed .ap-nav-item{justify-content:center;padding:10px;border-left:none}
.ap-sb.collapsed .ap-sb-logo{justify-content:center;padding:14px 0;height:auto}
.ap-sb.collapsed .ap-sb-collapse{justify-content:center}
.ap-sb.collapsed .ap-sb-bottom{padding:8px}

/* Credits pill (topbar) */
.ap-credits-pill,.ap-credits-chip{
  display:flex;align-items:center;gap:5px;
  background:var(--ap-bg3);border:1px solid var(--ap-border);
  border-radius:100px;padding:4px 12px;font-size:12px;color:var(--ap-muted);
  white-space:nowrap;
}
.ap-online-dot,.ap-status-dot{
  width:7px;height:7px;border-radius:50%;background:#16a34a;
  box-shadow:0 0 6px rgba(22,163,74,.5);flex-shrink:0;
}

/* ── MAIN ─────────────────────────────────────── */
.ap-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}


/* ── TOPBAR ───────────────────────────────────── */
.ap-topbar{
  height:var(--ap-topbar);background:var(--ap-bg2);border-bottom:1px solid var(--ap-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;flex-shrink:0;
}
.ap-topbar-left{display:flex;align-items:center;gap:14px}
.ap-menu-btn{
  background:none;border:1px solid var(--ap-border);border-radius:7px;
  color:var(--ap-muted);padding:6px;display:none;cursor:pointer;transition:all .15s;
}
.ap-menu-btn:hover{color:var(--ap-text);border-color:var(--ap-border2)}
.ap-page-title{font-size:16px;font-weight:700;color:var(--ap-text)}
.ap-breadcrumb{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--ap-muted);margin-top:1px;
}
.ap-bc-sep{color:var(--ap-muted2)}
.ap-topbar-right{display:flex;align-items:center;gap:12px}
.ap-credits-chip{
  display:flex;align-items:center;gap:5px;
  background:var(--ap-bg3);border:1px solid var(--ap-border);
  border-radius:100px;padding:4px 12px;font-size:12px;color:var(--ap-muted);
}
.ap-credits-chip svg{color:var(--ap-gold)}
.ap-status-dot{
  width:8px;height:8px;border-radius:50%;background:#16a34a;
  box-shadow:0 0 6px rgba(22,163,74,.5);
}

/* ── CONTENT ──────────────────────────────────── */
.ap-content{flex:1;overflow-y:auto;padding:24px;background:var(--ap-bg);display:flex;flex-direction:column;min-height:0}
.ap-content > *{flex-shrink:0}
.ap-content > .sdx-body-grid{flex:1;min-height:0}
.ap-content::-webkit-scrollbar{width:5px}
.ap-content::-webkit-scrollbar-thumb{background:var(--ap-border2);border-radius:9px}

/* ── LOADING ──────────────────────────────────── */
.ap-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px}
.ap-spinner{
  width:32px;height:32px;border:3px solid var(--ap-border);
  border-top-color:var(--ap-red);border-radius:50%;
  animation:ap-spin .7s linear infinite;
}
@keyframes ap-spin{to{transform:rotate(360deg)}}

/* ── CARDS ────────────────────────────────────── */
.ap-card{
  background:var(--ap-bg2);border:1px solid var(--ap-border);
  border-radius:var(--ap-radius);overflow:hidden;margin-bottom:20px;
  box-shadow:var(--ap-shadow);
}
.ap-card-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--ap-border);
}
.ap-card-title{font-size:14px;font-weight:700;color:var(--ap-text)}
.ap-card-sub{font-size:12px;color:var(--ap-muted);margin-top:2px}
.ap-card-body{padding:18px}

/* ── STAT CARDS ───────────────────────────────── */
.ap-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.ap-stat{
  background:var(--ap-bg2);border:1px solid var(--ap-border);
  border-radius:var(--ap-radius);padding:16px 18px;
  box-shadow:var(--ap-shadow);transition:border-color .2s,box-shadow .2s;
}
.ap-stat:hover{border-color:var(--ap-border2);box-shadow:var(--ap-shadow2)}
.ap-stat-label{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ap-muted);margin-bottom:10px}
.ap-stat-val{font-size:26px;font-weight:700;color:var(--ap-text);font-family:var(--ap-mono);line-height:1}
.ap-stat-sub{font-size:11px;color:var(--ap-muted);margin-top:5px}
.ap-stat-bar{height:3px;background:var(--ap-border);border-radius:9px;margin-top:10px;overflow:hidden}
.ap-stat-fill{height:100%;border-radius:9px;background:var(--ap-red);transition:width .5s ease}

/* ── BUTTONS ──────────────────────────────────── */
.ap-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;border:1px solid transparent;
}
.ap-btn-primary{background:var(--ap-red);color:#fff;box-shadow:0 1px 4px rgba(200,16,46,.25)}
.ap-btn-primary:hover{background:var(--ap-red2);transform:translateY(-1px);box-shadow:0 3px 12px rgba(200,16,46,.3)}
.ap-btn-ghost{background:transparent;color:var(--ap-muted);border-color:var(--ap-border)}
.ap-btn-ghost:hover{color:var(--ap-text);border-color:var(--ap-border2);background:var(--ap-bg3)}
.ap-btn-danger{background:rgba(200,16,46,.07);color:var(--ap-red);border-color:var(--ap-red-bdr)}
.ap-btn-danger:hover{background:rgba(200,16,46,.14)}
.ap-btn-sm{padding:5px 10px;font-size:12px}
.ap-btn:disabled{opacity:.45;pointer-events:none}

/* ── TABLE ────────────────────────────────────── */
.ap-table{width:100%;border-collapse:collapse}
.ap-table th{
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ap-muted);padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--ap-border);background:var(--ap-bg3);
}
.ap-table td{padding:11px 14px;font-size:13px;color:var(--ap-muted);border-bottom:1px solid var(--ap-border)}
.ap-table tr:last-child td{border-bottom:none}
.ap-table tr:hover td{background:var(--ap-bg3)}
.ap-table td strong{color:var(--ap-text)}

/* ── BADGES ───────────────────────────────────── */
.ap-badge{
  display:inline-flex;align-items:center;padding:2px 9px;
  border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.3px;
}
.ap-badge-red{background:rgba(200,16,46,.1);color:var(--ap-red);border:1px solid rgba(200,16,46,.2)}
.ap-badge-green{background:var(--ap-green-bg);color:var(--ap-green);border:1px solid rgba(22,163,74,.2)}
.ap-badge-gold{background:var(--ap-gold-bg);color:var(--ap-gold);border:1px solid rgba(217,119,6,.2)}
.ap-badge-blue{background:var(--ap-blue-bg);color:var(--ap-blue);border:1px solid rgba(37,99,235,.2)}
.ap-badge-gray{background:var(--ap-bg3);color:var(--ap-muted);border:1px solid var(--ap-border)}

/* ── MODAL ────────────────────────────────────── */
.ap-modal-overlay{
  position:fixed;inset:0;background:rgba(15,21,35,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;backdrop-filter:blur(3px);animation:ap-fade .18s ease;
}
.ap-modal-overlay.hidden{display:none}
@keyframes ap-fade{from{opacity:0}to{opacity:1}}
.ap-modal{
  background:var(--ap-bg2);border:1px solid var(--ap-border);
  border-radius:14px;width:480px;max-width:calc(100vw - 32px);
  max-height:88vh;overflow-y:auto;
  box-shadow:0 8px 40px rgba(15,21,35,.18);
  animation:ap-scale .2s ease;
}
@keyframes ap-scale{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.ap-modal-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--ap-border);
}
.ap-modal-hd h3{font-size:15px;font-weight:700;color:var(--ap-text)}
.ap-modal-close{
  background:var(--ap-bg3);border:1px solid var(--ap-border);
  color:var(--ap-muted);width:28px;height:28px;border-radius:6px;
  font-size:16px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;
}
.ap-modal-close:hover{color:var(--ap-text)}
.ap-modal-body{padding:20px 22px}

/* ── FORM ─────────────────────────────────────── */
.ap-field{margin-bottom:16px}
.ap-field label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ap-muted);margin-bottom:6px;
}
.ap-field input,.ap-field select,.ap-field textarea{
  width:100%;background:var(--ap-bg3);border:1px solid var(--ap-border);
  border-radius:8px;padding:10px 13px;color:var(--ap-text);font-size:13px;
  transition:border-color .15s,box-shadow .15s;
}
.ap-field input:focus,.ap-field select:focus,.ap-field textarea:focus{
  border-color:var(--ap-red);box-shadow:0 0 0 3px var(--ap-red-bg);outline:none;
}
.ap-field input::placeholder,.ap-field textarea::placeholder{color:var(--ap-muted2)}
.ap-field select{cursor:pointer}
.ap-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap-hint{font-size:11px;color:var(--ap-muted);margin-top:4px}

/* ── TOASTS ───────────────────────────────────── */
.ap-toasts{position:fixed;bottom:24px;right:24px;z-index:9000;display:flex;flex-direction:column;gap:8px}
.ap-toast{
  padding:11px 16px;border-radius:10px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:8px;max-width:320px;
  box-shadow:0 4px 16px rgba(15,21,35,.15);
  animation:ap-toast-in .25s ease;
}
@keyframes ap-toast-in{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
.ap-toast-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.ap-toast-error{background:#fff1f2;border:1px solid #fecdd3;color:var(--ap-red)}
.ap-toast-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}

/* ── EMPTY STATE ──────────────────────────────── */
.ap-empty{text-align:center;padding:48px;color:var(--ap-muted);font-size:13px}

/* ── INFO ROW ─────────────────────────────────── */
.ap-info-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--ap-border);font-size:13px;
}
.ap-info-row:last-child{border-bottom:none}
.ap-info-key{color:var(--ap-muted);font-size:12px}
.ap-info-val{color:var(--ap-text);font-weight:500}
.ap-mono{font-family:var(--ap-mono);font-size:12px}

/* ── RESPONSIVE ───────────────────────────────── */
@media(max-width:768px){
  .ap-sidebar{position:fixed;left:-100%;transition:left .25s ease;z-index:50}
  .ap-sidebar.open{left:0;box-shadow:4px 0 20px rgba(15,21,35,.15)}
  .ap-menu-btn{display:flex}
  .ap-stats{grid-template-columns:1fr 1fr}
  .ap-form-row{grid-template-columns:1fr}
}

/* ── SOCIAL LOGIN BUTTONS ─────────────────────── */
.social-login-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.btn-social {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--ap-border);
  background: var(--ap-bg2);
  color: var(--ap-text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-social:hover {
  background: var(--ap-bg3);
  border-color: var(--ap-border2);
}
.btn-social svg {
  flex-shrink: 0;
}
.btn-discord {
  background: rgba(88, 101, 242, 0.08);
  border-color: rgba(88, 101, 242, 0.2);
  color: #5865F2;
}
.btn-discord:hover {
  background: #5865F2;
  color: #ffffff;
  border-color: #5865F2;
}

/* ── LOGIN / REGISTER TABS ────────────────────── */
.apl-tabs {
  display: flex;
  border-bottom: 2px solid var(--ap-border);
  margin-bottom: 24px;
}
.apl-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  color: var(--ap-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.apl-tab:hover {
  color: var(--ap-text);
}
.apl-tab.active {
  color: var(--ap-red);
  border-bottom-color: var(--ap-red);
}

/* ── WISPBYTE THEME CYCLER BUTTON ─────────────── */
.ap-sb-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--ap-bg3);
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ap-text);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  margin-top: 10px;
  width: 100%;
}
.ap-sb-theme-btn:hover {
  border-color: var(--ap-border2);
  background: var(--ap-border);
}

/* ── MOCK SOCIAL POPUP ────────────────────────── */
.auth-popup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.auth-popup-logo {
  font-size: 48px;
  margin-bottom: 16px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── PRICING UPGRADE MODAL ────────────────────── */
.pricing-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (min-width: 600px) {
  .pricing-plans {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.pricing-card {
  background: var(--ap-bg3);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.pricing-card:hover {
  border-color: var(--ap-red);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--ap-red-bg);
}
.pricing-card.popular {
  border-color: var(--ap-red);
  background: linear-gradient(180deg, var(--ap-bg3) 0%, rgba(59, 130, 246, 0.04) 100%);
}
.pricing-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ap-red);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 100px;
  text-transform: uppercase;
}
.pricing-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ap-text);
  margin-bottom: 8px;
}
.pricing-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ap-text);
  margin-bottom: 16px;
}
.pricing-price span {
  font-size: 11px;
  font-weight: 500;
  color: var(--ap-muted);
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
  font-size: 11px;
  color: var(--ap-muted);
  flex-grow: 1;
}
.pricing-features li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pricing-features li svg {
  color: var(--ap-green);
  flex-shrink: 0;
}
.pricing-btn {
  width: 100%;
  justify-content: center;
  padding: 8px 12px;
  font-size: 12px;
}

/* ── PREMIUM WIDGETS (WISPBYTE STYLE) ─────────── */
.wp-hero-card {
  background: linear-gradient(135deg, var(--ap-bg2) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.wp-hero-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ap-text);
  margin-bottom: 6px;
}
.wp-hero-sub {
  font-size: 12px;
  color: var(--ap-muted);
}
.wp-hero-actions {
  display: flex;
  gap: 10px;
}

.social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .social-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.social-card {
  background: var(--ap-bg2);
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.social-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.social-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ap-muted2);
}
.social-card-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--ap-text);
}

/* ── SETTINGS VIEW ────────────────────────────── */
.settings-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .settings-container {
    grid-template-columns: 2fr 1fr;
  }
}
.theme-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.theme-card {
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--ap-bg3);
}
.theme-card:hover {
  border-color: var(--ap-border2);
  transform: translateY(-1px);
}
.theme-card.active {
  border-color: var(--ap-red);
  background: var(--ap-red-bg);
}
.theme-preview {
  height: 32px;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  padding: 4px;
}
.theme-preview-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.theme-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ap-text);
}

/* ── KEYAUTH-STYLE LAYOUT CUSTOM STYLES ── */

/* Sidebar app selector dropdown */
.ap-sb-app-selector {
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--ap-border);
}
.ap-sb-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ap-sb-select {
  width: 100%;
  background: var(--ap-bg3);
  border: 1px solid var(--ap-border);
  color: var(--ap-text);
  padding: 8px 32px 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}
.ap-sb-select:focus {
  border-color: var(--ap-blue);
  box-shadow: 0 0 0 2px var(--ap-blue-bg);
}
.ap-sb-select-chevron {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--ap-muted);
  font-size: 9px;
  display: flex;
  align-items: center;
}

/* Topbar Search Pill */
.ap-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 200px;
}
.ap-search-input {
  width: 100%;
  background: var(--ap-bg3);
  border: 1px solid var(--ap-border);
  color: var(--ap-text);
  padding: 6px 12px 6px 30px;
  border-radius: 20px;
  font-size: 12px;
  outline: none;
  transition: all 0.15s ease;
}
.ap-search-input:focus {
  border-color: var(--ap-blue);
  background: var(--ap-bg2);
  max-width: 240px;
}
.ap-search-icon {
  position: absolute;
  left: 10px;
  color: var(--ap-muted);
  pointer-events: none;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
}

/* Profile avatar initials bubble and dropdown */
.ap-profile-dropdown-wrapper {
  position: relative;
}
.ap-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ap-blue), #6366f1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--ap-border2);
  transition: all 0.15s ease;
  user-select: none;
}
.ap-profile-avatar:hover {
  transform: scale(1.05);
  border-color: var(--ap-blue);
}
.ap-profile-menu {
  position: absolute;
  top: 40px;
  right: 0;
  width: 180px;
  background: var(--ap-bg2);
  border: 1px solid var(--ap-border2);
  border-radius: 10px;
  box-shadow: var(--ap-shadow2);
  z-index: 1000;
  display: none;
  flex-direction: column;
  padding: 6px 0;
}
.ap-profile-menu.open {
  display: flex;
  animation: ap-fade .15s ease;
}
.ap-profile-menu-item {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--ap-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ap-profile-menu-item:hover {
  background: var(--ap-bg3);
  color: var(--ap-text);
}
.ap-profile-menu-sep {
  height: 1px;
  background: var(--ap-border);
  margin: 6px 0;
}

/* KeyAuth-Style Dashboard Stats */
.ka-stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 992px) {
  .ka-stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .ka-stats-container {
    grid-template-columns: 1fr;
  }
}
.ka-stat-card {
  background: var(--ap-bg2);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--ap-shadow);
  transition: border-color 0.2s, transform 0.2s;
}
.ka-stat-card:hover {
  border-color: var(--ap-border2);
  transform: translateY(-2px);
}
.ka-stat-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--ap-text);
  font-family: var(--ap-mono);
  margin-bottom: 4px;
}
.ka-stat-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ap-muted);
}

/* Two Column Dashboard Grid */
.ka-dashboard-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
}
@media (max-width: 992px) {
  .ka-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Column: Application Credentials Card */
.ka-credentials-card {
  background: var(--ap-bg2);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--ap-shadow);
  display: flex;
  flex-direction: column;
  height: fit-content;
}
.ka-card-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--ap-text);
  margin-bottom: 4px;
}
.ka-card-sub {
  font-size: 12px;
  color: var(--ap-muted);
  margin-bottom: 20px;
}
.ka-field-group {
  margin-bottom: 16px;
}
.ka-field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ap-muted2);
  margin-bottom: 6px;
}
.ka-field-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.ka-field-input {
  width: 100%;
  background: var(--ap-bg3);
  border: 1px solid var(--ap-border);
  color: var(--ap-text);
  padding: 8px 74px 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--ap-mono);
  text-overflow: ellipsis;
  outline: none;
}
.ka-field-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--ap-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--ap-bg2);
  border: 1px solid var(--ap-border);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  user-select: none;
}
.ka-field-btn:hover {
  color: var(--ap-text);
  border-color: var(--ap-border2);
}
.ka-field-btn.eye {
  right: 48px;
}

/* Right Column: Applications list */
.ka-apps-card {
  background: var(--ap-bg2);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--ap-shadow);
}
.ka-apps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.ka-app-btn-create {
  background: linear-gradient(135deg, var(--ap-blue), #6366f1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
}
.ka-app-btn-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3);
}

/* Application cards list */
.ka-apps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ka-app-card {
  background: var(--ap-bg3);
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.ka-app-card:hover {
  border-color: var(--ap-border2);
  box-shadow: var(--ap-shadow);
}
.ka-app-card.selected {
  border-color: var(--ap-green);
  background: rgba(34, 197, 94, 0.02);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.05);
}
.ka-app-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ka-app-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ap-text);
}
.ka-app-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--ap-bg2);
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.ka-app-grid-item {
  display: flex;
  flex-direction: column;
}
.ka-app-grid-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ap-muted2);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.ka-app-grid-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--ap-text);
  font-family: var(--ap-mono);
}
.ka-app-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ka-app-action-btn {
  flex: 1;
  min-width: 60px;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  outline: none;
  user-select: none;
}
/* Color variations matching KeyAuth exactly */
.ka-btn-select {
  background: var(--ap-bg2);
  color: var(--ap-text);
  border-color: var(--ap-border);
}
.ka-btn-select:hover {
  background: var(--ap-bg3);
  border-color: var(--ap-border2);
}
.ka-btn-selected {
  background: var(--ap-green);
  color: #fff;
}
.ka-btn-selected:hover {
  background: #16a34a;
}
.ka-btn-rename {
  background: #7c3aed;
  color: #fff;
}
.ka-btn-rename:hover {
  background: #6d28d9;
}
.ka-btn-edit {
  background: var(--ap-blue);
  color: #fff;
}
.ka-btn-edit:hover {
  background: #1d4ed8;
}
.ka-btn-pause {
  background: #ea580c;
  color: #fff;
}
.ka-btn-pause:hover {
  background: #ca570a;
}
.ka-btn-delete {
  background: #dc2626;
  color: #fff;
}
.ka-btn-delete:hover {
  background: #b91c1c;
}

/* Notice banner alerts */
.ka-alert-notice {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22);
  color: #6ba3ff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ka-alert-warn {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: #ff6b6b;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ── ORIGINAL DASHBOARD (sdx-*) ─────────────────────── */

/* Welcome strip */
.sdx-welcome-strip{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--ap-bg2);border:1px solid var(--ap-border);
  border-radius:12px;padding:16px 22px;margin-bottom:18px;gap:16px;
}
.sdx-welcome-title{font-size:17px;font-weight:700;color:var(--ap-text);line-height:1.3}
.sdx-welcome-title span{color:var(--ap-red)}
.sdx-welcome-sub{font-size:11px;color:var(--ap-muted);margin-top:3px}
.sdx-welcome-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.sdx-mini-stat{text-align:center;min-width:40px}
.sdx-mini-stat-val{font-size:18px;font-weight:800;color:var(--ap-text);line-height:1}
.sdx-mini-stat-lbl{font-size:9px;color:var(--ap-muted);text-transform:uppercase;letter-spacing:.6px;margin-top:3px}
.sdx-mini-stat-sep{width:1px;height:30px;background:var(--ap-border)}
.sdx-upgrade-pill{
  display:flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:#fff;font-size:11px;font-weight:700;
  padding:6px 14px;border-radius:100px;cursor:pointer;
  transition:opacity .15s;border:none;white-space:nowrap;
}
.sdx-upgrade-pill:hover{opacity:.85}
.sdx-plan-badge{
  background:rgba(34,197,94,.12);color:#22c55e;
  border:1px solid rgba(34,197,94,.2);
  font-size:10px;font-weight:700;padding:3px 10px;
  border-radius:100px;text-transform:uppercase;letter-spacing:.5px;
}

/* 2-col body */
.sdx-body-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:stretch}
.sdx-left-col{display:flex;flex-direction:column;gap:14px}
.sdx-right-col{display:flex;flex-direction:column;min-height:0}

/* Panels */
.sdx-panel{
  background:var(--ap-bg2);border:1px solid var(--ap-border);
  border-radius:12px;overflow:hidden;
}
.sdx-panel-hd{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--ap-border);
}
.sdx-panel-icon{
  width:34px;height:34px;border-radius:9px;
  background:var(--ap-red-bg);color:var(--ap-red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sdx-panel-title{font-size:14px;font-weight:700;color:var(--ap-text)}
.sdx-panel-sub{font-size:11px;color:var(--ap-muted);margin-top:2px}

/* Credential table rows */
.sdx-cred-table{padding:4px 0}
.sdx-cred-row{
  display:flex;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--ap-border);
  gap:10px;
}
.sdx-cred-row:last-child{border-bottom:none}
.sdx-cred-lbl{
  font-size:10px;font-weight:700;color:var(--ap-muted2);
  text-transform:uppercase;letter-spacing:.6px;min-width:80px;flex-shrink:0;
}
.sdx-cred-val-wrap{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.sdx-cred-val{font-size:13px;color:var(--ap-text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdx-mono{font-family:'Courier New',monospace;font-size:11px}
.sdx-copy-btn,.sdx-eye-btn{
  flex-shrink:0;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;
  background:var(--ap-bg3);border:1px solid var(--ap-border);
  color:var(--ap-muted);cursor:pointer;transition:all .13s;
}
.sdx-copy-btn:hover,.sdx-eye-btn:hover{color:var(--ap-text);border-color:var(--ap-border2)}
.sdx-cred-actions{padding:14px 18px;border-top:1px solid var(--ap-border)}
.sdx-action-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .13s;border:1px solid;
}
.sdx-action-warn{
  background:rgba(251,146,60,.08);border-color:rgba(251,146,60,.22);
  color:#fb923c;
}
.sdx-action-warn:hover{background:rgba(251,146,60,.14)}
.sdx-info-note{
  display:flex;align-items:flex-start;gap:8px;
  margin:0 18px 16px;padding:10px 13px;
  background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);
  border-radius:8px;font-size:11px;color:var(--ap-muted);line-height:1.5;
}
.sdx-no-app{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;color:var(--ap-muted);text-align:center;gap:10px;
}
.sdx-no-app p{font-size:14px;color:var(--ap-text);margin:0}
.sdx-no-app span{font-size:12px;color:var(--ap-muted)}

/* Stat tiles — 2x2 grid */
.sdx-stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sdx-stat-tile{
  background:var(--ap-bg2);border:1px solid var(--ap-border);
  border-radius:10px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;
}
.sdx-stat-ico{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sdx-stat-info{flex:1;min-width:0}
.sdx-stat-n{font-size:22px;font-weight:800;color:var(--ap-text);line-height:1}
.sdx-stat-l{font-size:10px;color:var(--ap-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}

/* Apps panel */
.sdx-apps-panel{flex:1;display:flex;flex-direction:column;min-height:0}
.sdx-apps-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--ap-border);flex-shrink:0;
}
.sdx-create-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--ap-red);color:#fff;font-size:12px;font-weight:700;
  padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .13s;border:none;
}
.sdx-create-btn:hover{opacity:.85;transform:translateY(-1px)}

/* App GRID (card boxes) */
.sdx-app-grid{
  flex:1;overflow-y:auto;padding:16px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  align-content:start;min-height:0;
}

/* Empty state */
.sdx-empty-apps{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 24px;gap:14px;color:var(--ap-muted);
}
.sdx-empty-apps p{font-size:14px;color:var(--ap-text);text-align:center;margin:0}
.sdx-empty-apps span{font-size:11px;color:var(--ap-muted);text-align:center}

/* Individual app CARD (box) */
.sdx-app-card{
  background:var(--ap-bg3);border:1.5px solid var(--ap-border);
  border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:12px;
  cursor:pointer;transition:all .16s;
}
.sdx-app-card:hover{border-color:var(--ap-border2);background:var(--ap-bg2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.sdx-app-card-active{
  border-color:rgba(59,130,246,.4)!important;
  background:rgba(59,130,246,.05)!important;
  box-shadow:0 0 0 2px rgba(59,130,246,.12);
}
.sdx-app-card-top{display:flex;align-items:flex-start;gap:12px}
.sdx-app-card-avatar{
  width:40px;height:40px;border-radius:10px;
  background:var(--ap-bg2);border:1.5px solid var(--ap-border);
  color:var(--ap-muted);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Courier New',monospace;transition:all .16s;
}
.sdx-app-card-hd{flex:1;min-width:0}
.sdx-app-card-name{font-size:14px;font-weight:700;color:var(--ap-text);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdx-app-badge{
  display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;
  border-radius:100px;text-transform:uppercase;letter-spacing:.5px;
}
.sdx-badge-on{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.2)}
.sdx-badge-off{background:rgba(100,116,139,.12);color:#64748b;border:1px solid rgba(100,116,139,.2)}

/* Card meta info (3 columns) */
.sdx-app-card-meta{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;padding:10px 0;border-top:1px solid var(--ap-border);border-bottom:1px solid var(--ap-border);
}
.sdx-app-card-meta-lbl{font-size:9px;font-weight:700;color:var(--ap-muted2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.sdx-app-card-meta-val{font-size:12px;font-weight:600;color:var(--ap-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Card action buttons */
.sdx-app-card-btns{display:flex;gap:5px;flex-wrap:wrap}
.sdx-card-btn{
  flex:1;padding:6px 8px;border-radius:6px;font-size:10px;font-weight:600;
  cursor:pointer;transition:all .12s;border:1px solid;text-align:center;
  white-space:nowrap;min-width:0;
}
.sdx-card-btn-use{background:var(--ap-bg2);border-color:var(--ap-border);color:var(--ap-muted)}
.sdx-card-btn-use:hover{color:var(--ap-text);border-color:var(--ap-border2)}
.sdx-card-btn-active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.25);color:#3b82f6}
.sdx-card-btn-edit{background:var(--ap-bg2);border-color:var(--ap-border);color:var(--ap-muted)}
.sdx-card-btn-edit:hover{color:var(--ap-text);border-color:var(--ap-border2)}
.sdx-card-btn-pause{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2);color:#fbbf24}
.sdx-card-btn-pause:hover{background:rgba(251,191,36,.14)}
.sdx-card-btn-del{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2);color:#f87171}
.sdx-card-btn-del:hover{background:rgba(220,38,38,.14)}

/* Responsive */
@media(max-width:1100px){
  .sdx-body-grid{grid-template-columns:1fr}
  .sdx-stats-row{grid-template-columns:repeat(4,1fr)}
  .sdx-welcome-right{display:none}
}
@media(max-width:700px){
  .sdx-app-grid{grid-template-columns:1fr}
  .sdx-stats-row{grid-template-columns:repeat(2,1fr)}
}


/* Cleaned up duplicate old rules */

/* Responsive */
@media(max-width:900px){
  .sdx-body-grid{grid-template-columns:1fr}
  .sdx-stats-row{grid-template-columns:repeat(2,1fr)}
  .sdx-welcome-right{display:none}
}

/* ── FIX: Stats never clip in left column ────── */
.sdx-left-col{overflow:visible}
.sdx-stats-row{overflow:visible}

/* ══════════════════════════════════════════════
   ANIMATIONS  — rich, floating, premium feel
══════════════════════════════════════════════ */

/* Keyframes */
@keyframes sdxFadeSlideUp{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes sdxFadeIn{
  from{opacity:0}
  to  {opacity:1}
}
@keyframes sdxCardIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to  {opacity:1;transform:translateY(0)   scale(1)}
}
@keyframes sdxStatIn{
  from{opacity:0;transform:translateX(-12px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes sdxGlowPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(59,130,246,.12), 0 4px 20px rgba(59,130,246,.08)}
  50%    {box-shadow:0 0 0 4px rgba(59,130,246,.22), 0 4px 28px rgba(59,130,246,.18)}
}
@keyframes sdxSlideInLeft{
  from{opacity:0;transform:translateX(-20px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes sdxNumPop{
  0%  {transform:scale(1)}
  50% {transform:scale(1.18)}
  100%{transform:scale(1)}
}
@keyframes sdxShimmer{
  0%  {background-position:-400px 0}
  100%{background-position: 400px 0}
}
@keyframes sdxSpin{
  to{transform:rotate(360deg)}
}
@keyframes sdxBounceIn{
  0%  {opacity:0;transform:scale(.6)}
  60% {opacity:1;transform:scale(1.08)}
  80% {transform:scale(.95)}
  100%{transform:scale(1)}
}
@keyframes sdxOnlinePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  50%    {box-shadow:0 0 0 5px rgba(34,197,94,0)}
}

/* Welcome strip */
.sdx-welcome-strip{
  animation:sdxFadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}

/* Credential panel */
.sdx-panel{
  animation:sdxFadeSlideUp .5s cubic-bezier(.22,1,.36,1) .05s both;
}
.sdx-panel.sdx-apps-panel{
  animation:sdxFadeSlideUp .5s cubic-bezier(.22,1,.36,1) .08s both;
}

/* Cred rows — stagger on hover parent */
.sdx-cred-row{transition:background .15s ease}
.sdx-cred-row:hover{background:var(--ap-bg3)}

/* Stat tiles — stagger */
.sdx-stat-tile:nth-child(1){animation:sdxStatIn .4s cubic-bezier(.22,1,.36,1) .10s both}
.sdx-stat-tile:nth-child(2){animation:sdxStatIn .4s cubic-bezier(.22,1,.36,1) .17s both}
.sdx-stat-tile:nth-child(3){animation:sdxStatIn .4s cubic-bezier(.22,1,.36,1) .24s both}
.sdx-stat-tile:nth-child(4){animation:sdxStatIn .4s cubic-bezier(.22,1,.36,1) .31s both}
.sdx-stat-tile{transition:border-color .2s, box-shadow .2s, transform .2s}
.sdx-stat-tile:hover{
  border-color:var(--ap-border2);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.sdx-stat-n{
  animation:sdxNumPop .4s cubic-bezier(.22,1,.36,1) .5s both;
}

/* App cards — stagger grid entrance */
.sdx-app-card:nth-child(1){animation:sdxCardIn .45s cubic-bezier(.22,1,.36,1) .12s both}
.sdx-app-card:nth-child(2){animation:sdxCardIn .45s cubic-bezier(.22,1,.36,1) .20s both}
.sdx-app-card:nth-child(3){animation:sdxCardIn .45s cubic-bezier(.22,1,.36,1) .28s both}
.sdx-app-card:nth-child(4){animation:sdxCardIn .45s cubic-bezier(.22,1,.36,1) .36s both}
.sdx-app-card:nth-child(5){animation:sdxCardIn .45s cubic-bezier(.22,1,.36,1) .44s both}
.sdx-app-card:nth-child(6){animation:sdxCardIn .45s cubic-bezier(.22,1,.36,1) .52s both}

/* Active card — animated glow ring */
.sdx-app-card-active{
  animation:sdxCardIn .45s cubic-bezier(.22,1,.36,1) both,
            sdxGlowPulse 2.5s ease-in-out 1s infinite!important;
}
.sdx-app-card:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 8px 28px rgba(0,0,0,.3);
}

/* Card avatar bounce on hover */
.sdx-app-card:hover .sdx-app-card-avatar{
  transform:scale(1.12) rotate(-4deg);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sdx-app-card-avatar{transition:transform .18s ease}

/* Card button micro-animations */
.sdx-card-btn{transition:all .15s cubic-bezier(.4,0,.2,1)}
.sdx-card-btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.sdx-card-btn:active{transform:scale(.96)}

/* Create button */
.sdx-create-btn{transition:all .18s cubic-bezier(.4,0,.2,1)}
.sdx-create-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(200,16,46,.3)}
.sdx-create-btn:active{transform:scale(.97)}

/* Copy / Eye buttons */
.sdx-copy-btn,.sdx-eye-btn{transition:all .14s ease}
.sdx-copy-btn:active,.sdx-eye-btn:active{transform:scale(.93)}

/* Nav items slide in */
.ap-nav-item{
  animation:sdxSlideInLeft .35s cubic-bezier(.22,1,.36,1) both;
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
.ap-nav-section:nth-child(1) .ap-nav-item{animation-delay:.05s}
.ap-nav-section:nth-child(2) .ap-nav-item:nth-child(2){animation-delay:.08s}
.ap-nav-section:nth-child(2) .ap-nav-item:nth-child(3){animation-delay:.12s}
.ap-nav-section:nth-child(2) .ap-nav-item:nth-child(4){animation-delay:.16s}
.ap-nav-section:nth-child(2) .ap-nav-item:nth-child(5){animation-delay:.20s}
.ap-nav-section:nth-child(3) .ap-nav-item:nth-child(2){animation-delay:.22s}
.ap-nav-section:nth-child(3) .ap-nav-item:nth-child(3){animation-delay:.26s}
.ap-nav-section:nth-child(4) .ap-nav-item:nth-child(2){animation-delay:.28s}
.ap-nav-item:hover{
  padding-left:22px;
  transition:all .15s cubic-bezier(.4,0,.2,1);
}

/* Online/status dot pulse */
.ap-status-dot,.ap-online-dot{
  animation:sdxOnlinePulse 2s ease-in-out infinite;
}

/* Topbar avatar bounce on load */
#ap-topbar-avatar{
  animation:sdxBounceIn .5s cubic-bezier(.34,1.56,.64,1) .6s both;
}

/* Upgrade pill shimmer */
.sdx-upgrade-pill{
  background-size:200% auto;
  animation:sdxFadeIn .4s ease .3s both;
  transition:opacity .15s, transform .15s;
}
.sdx-upgrade-pill:hover{
  transform:scale(1.04);
  opacity:.92;
}

/* Modal pop-in */
.ap-modal-box,.ap-upgrade-modal-box{
  animation:sdxBounceIn .38s cubic-bezier(.34,1.56,.64,1) both;
}

/* Toast slide-in */
.ap-toast{
  animation:sdxSlideInLeft .3s cubic-bezier(.22,1,.36,1) both;
}

/* Smooth page transitions */
#ap-content > *{
  animation:sdxFadeSlideUp .4s cubic-bezier(.22,1,.36,1) both;
}