/* ═══ SETTINGS PANEL — Full-screen professional redesign ═══ */
#settingsPanel{
  position:fixed;inset:0;background:var(--bg);z-index:var(--z-modal);
  display:none;flex-direction:row;overflow:hidden;
  animation:spFadeIn .3s cubic-bezier(.16,1,.3,1);
}
#settingsPanel.open{display:flex}
@keyframes spFadeIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

/* ── Sidebar Nav ── */
.sp-nav{
  width:260px;min-width:260px;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;
  padding:0 var(--sp-3) var(--sp-6);
  -webkit-overflow-scrolling:touch;
}
.sp-nav::-webkit-scrollbar{width:4px}
.sp-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}

/* Nav logo / brand header */
.sp-nav-logo{
  display:flex;align-items:center;gap:var(--sp-2h);
  padding:var(--sp-5) var(--sp-3);
  margin-bottom:var(--sp-1);
  font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--muted);
  letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}

.sp-nav-cat{
  font-size:var(--text-2xs);font-weight:var(--weight-bold);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);padding:var(--sp-4) var(--sp-3) var(--sp-px);margin-top:var(--sp-1);
  user-select:none;
}
.sp-nav-cat:first-of-type{margin-top:0;padding-top:var(--sp-3)}

.sp-nav-item{
  padding:var(--sp-2h) var(--sp-3);border-radius:var(--r-md);
  font-size:var(--text-base);color:var(--muted);cursor:pointer;
  font-weight:var(--weight-medium);
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
  margin-bottom:1px;white-space:nowrap;
  border:1px solid transparent;
  position:relative;
  display:flex;align-items:center;gap:var(--sp-2h);
}
.sp-nav-item svg{opacity:.5;flex-shrink:0;transition:opacity var(--dur-normal)}
.sp-nav-item:hover{
  background:var(--surface-hover);color:var(--text-secondary);
}
.sp-nav-item:hover svg{opacity:.7}
.sp-nav-item.active{
  background:var(--surface-active);
  color:var(--text);
  border-color:var(--border-hover);
  font-weight:var(--weight-semi);
}
.sp-nav-item.active svg{opacity:1}
.sp-nav-sep{height:1px;background:var(--border2);margin:var(--sp-px) var(--sp-3)}
.sp-nav-item.danger{color:rgba(255,80,80,.7)}
.sp-nav-item.danger svg{color:rgba(255,80,80,.7)}
.sp-nav-item.danger:hover{background:rgba(255,80,80,.06);color:rgba(255,80,80,.9)}

/* ── Main content area ── */
.sp-main{
  flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--bg);
}
.sp-content-wrap{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 clamp(32px,5vw,100px);
  scroll-behavior:smooth;
}
.sp-content-wrap::-webkit-scrollbar{width:6px}
.sp-content-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:6px}
.sp-content-wrap::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.1)}

/* ── Header bar ── */
.sp-head{
  padding:var(--sp-3h) var(--sp-6);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;flex-shrink:0;
  min-height:56px;gap:var(--sp-3);
  background:var(--bg);
}
.sp-title{
  font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text);
  letter-spacing:.3px;
}

/* ── Close / Back buttons ── */
.sp-close{
  background:none;border:none;color:var(--muted);cursor:pointer;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);flex-shrink:0;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
  border:1px solid var(--border);
}
.sp-close:hover{background:var(--surface-active);color:var(--text);border-color:var(--border-hover)}
.sp-close:active{background:var(--surface-3);transform:scale(.95)}

/* ── Body content ── */
.sp-body{
  padding:var(--sp-7) 0 var(--sp-16);
  max-width:900px;
  width:100%;
  margin:0 auto;
}
.sp-section-anchor{scroll-margin-top:16px}
.sp-mob-back{display:none}

/* ── Profile Card ── */
.sp-profile-card{
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--surface-0);
  border:1px solid var(--border);
  margin-bottom:var(--sp-8);
  transition:border-color var(--dur-slow);
}
.sp-profile-card:hover{border-color:var(--border-hover)}

.sp-profile-banner{
  height:120px;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%);
  position:relative;
  overflow:hidden;
}
.sp-profile-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.4) 100%);
}

.sp-profile-info{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-6) var(--sp-6);
  margin-top:-36px;
  position:relative;z-index:1;
}

/* ── Avatar ── */
.sp-avatar{
  width:80px;height:80px;border-radius:50%;
  background:var(--surface-0);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--weight-bold);font-size:var(--text-3xl);color:var(--text);
  border:3px solid var(--bg);
  overflow:hidden;cursor:pointer;position:relative;
  transition:border-color var(--dur-normal),background var(--dur-normal),transform var(--dur-normal);
  box-shadow:var(--shadow-lg);
  flex-shrink:0;
}
.sp-avatar:hover{transform:scale(1.05);border-color:var(--border-hover)}
.sp-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sp-avatar-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.6);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity var(--dur-normal);gap:var(--sp-1);
}
.sp-avatar:hover .sp-avatar-overlay{opacity:1}
.sp-av-name{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text);line-height:var(--leading-tight)}
.sp-av-email{font-size:var(--text-sm);color:var(--text-faint);margin-top:var(--sp-0)}

/* ── Two-column grid ── */
.sp-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-5);
  margin-bottom:var(--sp-6);
}

/* ── Section cards ── */
.sp-section{
  padding:var(--sp-6);
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  transition:border-color var(--dur-normal),background var(--dur-normal),transform var(--dur-normal);
  height:fit-content;
}
.sp-section:hover{
  border-color:var(--border-hover);
  background:var(--surface-1);
}

/* Full-width sections */
.sp-section-wide{
  margin-bottom:var(--sp-6);
}

/* Section header with icon */
.sp-section-head{
  display:flex;align-items:center;gap:var(--sp-2h);
  margin-bottom:var(--sp-4);
}
.sp-section-head svg{
  color:var(--muted);flex-shrink:0;
}
.sp-section-title{
  font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);margin:0;
}

/* Section description */
.sp-section-desc{
  font-size:var(--text-base);color:var(--text-faint);
  margin:calc(-1 * var(--sp-2)) 0 var(--sp-4);line-height:var(--leading-normal);
}

/* ── Save buttons ── */
.sp-save-btn{
  width:100%;padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-3);
  background:var(--surface-active);
  border:1px solid var(--border-hover);
  border-radius:var(--r-lg);color:var(--text-secondary);
  font-size:var(--text-base);font-weight:var(--weight-semi);
  cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);
  font-family:var(--font);
  letter-spacing:.3px;
}
.sp-save-btn:hover{
  background:var(--surface-3);
  border-color:var(--border-hover);
  color:var(--text);
}
.sp-save-btn:active{transform:scale(.98);background:var(--surface-3)}

.sp-save-btn-alt{
  background:transparent;
  border-color:var(--border);
  color:var(--muted);
}
.sp-save-btn-alt:hover{
  background:var(--surface-hover);
  border-color:var(--border-hover);
  color:var(--text-secondary);
}

/* ── Settings rows (toggles) ── */
.sp-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);
  background:var(--surface-0);
  border:1px solid var(--border2);
  margin-bottom:var(--sp-2);min-height:48px;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.sp-row:hover{background:var(--surface-hover);border-color:var(--border-hover)}
.sp-label{font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--text-secondary)}

/* Toggle switch */
.toggle{
  width:44px;height:24px;border-radius:12px;
  background:var(--surface-3);
  border:1px solid var(--border-hover);
  cursor:pointer;position:relative;
  transition:border-color var(--dur-normal),background var(--dur-normal),transform var(--dur-normal);flex-shrink:0;
}
.toggle.on{background:var(--primary);border-color:var(--primary)}
.toggle::after{
  content:'';position:absolute;width:18px;height:18px;
  background:#fff;border-radius:50%;top:2px;left:2px;
  transition:left var(--dur-slow) var(--ease-spring);
  box-shadow:var(--shadow-sm);
}
.toggle.on::after{left:22px}

/* ── Notification permission button ── */
.sp-notif-btn{
  width:100%;padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-2);
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:var(--r-lg);color:var(--muted);
  font-size:var(--text-sm);font-weight:var(--weight-semi);cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);font-family:var(--font);
  display:flex;align-items:center;justify-content:center;gap:var(--sp-px);
}
.sp-notif-btn:hover{background:var(--surface-active);color:var(--text-secondary)}
.sp-notif-btn.granted{border-color:var(--border-active);color:var(--primary)}

/* ── Form inputs inside settings ── */
#settingsPanel .form-input{
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3h);
  font-size:var(--text-md);color:var(--text);
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);width:100%;
  font-family:var(--font);
}
#settingsPanel .form-input::placeholder{color:var(--text-faint)}
#settingsPanel .form-input:focus{
  border-color:var(--border-hover);
  box-shadow:0 0 0 3px var(--surface-hover);
  outline:none;background:var(--surface-1);
}
#settingsPanel .form-group{margin-bottom:var(--sp-2h)}

/* ── Font picker grid ── */
.sp-font-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-top:var(--sp-3)}
.sp-font-opt{
  padding:var(--sp-3) var(--sp-2);border-radius:var(--r-lg);
  background:var(--surface-0);
  border:1px solid var(--border2);
  cursor:pointer;text-align:center;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);
  font-size:var(--text-md);min-height:48px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.sp-font-opt:hover{background:var(--surface-1);color:var(--text-secondary);border-color:var(--border-hover)}
.sp-font-opt.active{
  background:var(--surface-active);
  border-color:var(--border-hover);
  color:var(--text);font-weight:var(--weight-semi);
  box-shadow:var(--shadow-sm);
}
.sp-font-preview{
  margin-top:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-lg);
  background:var(--surface-0);border:1px solid var(--border);
  font-size:var(--text-2xl);font-weight:var(--weight-semi);text-align:center;
  color:var(--text-secondary);min-height:56px;
  display:flex;align-items:center;justify-content:center;
}

/* ── Color picker grid ── */
.sp-color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--sp-2);margin-top:var(--sp-3)}
.sp-color-swatch{
  width:100%;aspect-ratio:1;border-radius:var(--r-lg);cursor:pointer;
  border:2px solid transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);position:relative;
}
.sp-color-swatch:hover{transform:scale(1.15);z-index:2}
.sp-color-swatch.active{border-color:var(--text);box-shadow:var(--shadow-md)}
.sp-color-swatch.nc-default{background:var(--text-secondary);border:2px dashed var(--border-hover)}
.sp-color-swatch.nc-default::after{
  content:'\2715';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-base);color:var(--bg);font-weight:var(--weight-bold);
}
.sp-color-preview{
  margin-top:var(--sp-3);padding:var(--sp-3h) var(--sp-4);border-radius:var(--r-lg);
  background:var(--surface-0);border:1px solid var(--border);
  font-size:var(--text-2xl);font-weight:var(--weight-bold);text-align:center;
  min-height:52px;display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
}

/* ── Banner picker ── */
.sp-banner-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2h);margin-top:var(--sp-3)}
.sp-banner-opt{
  height:56px;border-radius:var(--r-lg);cursor:pointer;
  border:2px solid transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);position:relative;
}
.sp-banner-opt:hover{transform:scale(1.04);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.sp-banner-opt.active{border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.12)}

/* ── Decor picker ── */
.sp-decor-preview{display:flex;justify-content:center;margin-bottom:var(--sp-4)}
.decor-preview-av{
  width:72px;height:72px;border-radius:50%;
  background:var(--surface-0);border:1px solid var(--border-hover);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-3xl);font-weight:var(--weight-bold);position:relative;overflow:visible;
  color:var(--text);
}
.sp-decor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.sp-decor-item{
  padding:var(--sp-3) var(--sp-2);border-radius:var(--r-lg);
  background:var(--surface-0);border:1px solid var(--border2);
  cursor:pointer;text-align:center;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);
}
.sp-decor-item:hover{background:var(--surface-1);border-color:var(--border-hover)}
.sp-decor-item.active{background:var(--surface-active);border-color:var(--border-hover)}
.sp-decor-thumb{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface-0);margin:0 auto var(--sp-px);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:visible;
}
.sp-decor-name{font-size:var(--text-2xs);color:var(--muted);font-weight:var(--weight-semi);letter-spacing:.5px}

/* ── Password section ── */
.sp-pwd-msg{font-size:var(--text-sm);margin-top:var(--sp-2);display:none;padding:var(--sp-2h) var(--sp-3);border-radius:var(--r-md)}
.sp-pwd-msg.err{color:var(--error);background:rgba(255,80,80,.06)}
.sp-pwd-msg.ok{color:var(--success);background:rgba(61,168,122,.06)}

/* ── Email linked status ── */
.sp-email-linked{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);
  background:var(--surface-0);border:1px solid var(--border);
  margin-bottom:var(--sp-3);
}

/* ── Logout button (kept for compatibility) ── */
.btn-logout{
  width:100%;padding:var(--sp-3h) var(--sp-4);
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:var(--r-lg);color:var(--muted);
  font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);min-height:48px;
  font-family:var(--font);
}
.btn-logout:hover{
  background:var(--surface-active);border-color:var(--border-hover);
  color:var(--text-secondary);
}
.btn-logout:active{background:var(--surface-3);transform:scale(.98)}

/* ═══ Mobile responsive ═══ */
@media(max-width:767px){
  .sp-nav{display:none}
  #settingsPanel{flex-direction:column}
  #settingsPanel.open.sp-nav-mode .sp-nav{
    display:flex;width:100%;min-width:100%;
    padding:calc(var(--st) + 12px) 12px 24px;border-right:none;
  }
  #settingsPanel.open.sp-nav-mode .sp-main{display:none}
  #settingsPanel.open:not(.sp-nav-mode) .sp-main{display:flex}
  .sp-head{padding:12px 16px}
  .sp-body{padding:16px 0 40px;max-width:100%}
  .sp-mob-back{display:flex !important}
  .sp-mob-close{display:flex !important}
  .sp-content-wrap{padding:0 16px}
  .sp-grid{grid-template-columns:1fr;gap:16px}
  .sp-section{padding:18px;margin-bottom:0}
  .sp-section-wide{margin-bottom:16px}
  .sp-profile-banner{height:90px}
  .sp-profile-info{padding:0 16px 20px;margin-top:-28px;gap:12px}
  .sp-avatar{width:64px;height:64px;font-size:22px}
  .sp-av-name{font-size:16px}
  .sp-font-grid{grid-template-columns:repeat(2,1fr)}
  .sp-color-grid{grid-template-columns:repeat(6,1fr)}
  .sp-banner-grid{grid-template-columns:repeat(3,1fr)}
  .sp-decor-grid{grid-template-columns:repeat(3,1fr)}
}

/* ═══ Tablet responsive ═══ */
@media(min-width:768px) and (max-width:1024px){
  .sp-nav{width:220px;min-width:220px}
  .sp-grid{gap:16px}
  .sp-body{max-width:100%}
  .sp-font-grid{grid-template-columns:repeat(3,1fr)}
  .sp-banner-grid{grid-template-columns:repeat(4,1fr)}
}

/* ═══ Beta tag ═══ */
.sp-beta-tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 6px;margin-left:6px;
  font-size:9px;font-weight:800;letter-spacing:1px;
  color:var(--primary);background:rgba(56,161,105,.12);
  border:1px solid rgba(56,161,105,.2);
  border-radius:var(--r-sm);line-height:1.2;
  vertical-align:middle;text-transform:uppercase;
}

/* ═══ Desktop App Section ═══ */
.sp-desktop-card{
  margin-top:var(--sp-4);
  border-radius:var(--r-lg);
  background:var(--surface-1);
  border:1px solid rgba(255,255,255,0.04);
  overflow:hidden;
}
.sp-desktop-preview{
  padding:20px;
  background:linear-gradient(135deg,rgba(61,168,122,0.06) 0%,rgba(61,168,122,0.02) 100%);
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;
  justify-content:center;
}
.sp-desk-mockup{
  width:240px;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.06);
}
.sp-desk-tb{
  height:22px;
  background:#050505;
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:5px;
}
.sp-desk-dot{
  width:7px;height:7px;border-radius:50%;
}
.sp-desk-tb-title{
  margin-left:8px;
  font-size:8px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(135deg,#3da87a,#5cc89a,#fff,#5cc89a,#3da87a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sp-desk-body{
  height:100px;
  background:#0f0f0f;
  display:flex;
}
.sp-desk-sidebar{
  width:40px;
  background:#0a0a0a;
  border-right:1px solid rgba(255,255,255,0.04);
}
.sp-desk-main{
  flex:1;padding:12px;
  display:flex;flex-direction:column;gap:8px;
}
.sp-desk-line{
  height:6px;border-radius:3px;
  background:rgba(255,255,255,0.06);
}
.sp-desk-line.w60{width:60%}
.sp-desk-line.w80{width:80%}
.sp-desk-line.w40{width:40%}

.sp-desktop-info{
  padding:16px 20px;
  display:flex;flex-direction:column;gap:8px;
}
.sp-desk-feat{
  display:flex;align-items:center;gap:8px;
  font-size:var(--text-sm);color:var(--text-secondary);
}
.sp-desktop-actions{
  padding:16px 20px;
  border-top:1px solid rgba(255,255,255,0.04);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.sp-desk-dl-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 24px;
  border-radius:var(--r-md);
  background:var(--primary);
  color:#fff;
  font-size:var(--text-sm);font-weight:var(--weight-semi);
  text-decoration:none;
  transition:background var(--dur-fast),transform var(--dur-fast);
  cursor:pointer;
}
.sp-desk-dl-btn:hover{
  background:var(--primary-hover);
  transform:translateY(-1px);
}
.sp-desk-dl-btn:active{transform:translateY(0)}
.sp-desk-hint{
  font-size:var(--text-2xs);
  color:var(--muted);
}

/* Light theme */
[data-theme="light"] .sp-desktop-card{
  border-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .sp-desktop-preview{
  background:linear-gradient(135deg,rgba(61,168,122,0.08) 0%,rgba(61,168,122,0.03) 100%);
  border-bottom-color:rgba(0,0,0,0.06);
}
[data-theme="light"] .sp-desk-mockup{
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  border-color:rgba(0,0,0,0.1);
}
[data-theme="light"] .sp-desk-tb{background:#e8e8e8}
[data-theme="light"] .sp-desk-body{background:#f5f5f5}
[data-theme="light"] .sp-desk-sidebar{background:#eee;border-right-color:rgba(0,0,0,0.06)}
[data-theme="light"] .sp-desk-line{background:rgba(0,0,0,0.08)}
[data-theme="light"] .sp-desktop-actions{border-top-color:rgba(0,0,0,0.06)}

/* ─── Admin: User Management ─── */
/* ─── Admin Passcode Gate ─── */
.sp-admin-gate-form{
  display:flex;gap:8px;margin-top:12px;
}
.sp-admin-passcode-input{
  flex:1;padding:12px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);color:var(--text);font-size:16px;
  font-family:var(--font-mono);letter-spacing:4px;text-align:center;
  outline:none;
  transition:border-color var(--dur-normal),background var(--dur-normal),box-shadow var(--dur-normal);
}
.sp-admin-passcode-input:focus{
  border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
.sp-admin-passcode-input::placeholder{color:rgba(255,255,255,.2);letter-spacing:1px;font-size:13px}
.sp-admin-verify-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);color:rgba(255,255,255,.7);
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font);white-space:nowrap;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.sp-admin-verify-btn:hover{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;
}
.sp-admin-verify-btn:active{transform:scale(.97)}
.sp-admin-verify-btn:disabled{opacity:.5;cursor:not-allowed}
.sp-admin-pass-msg{
  font-size:12px;margin-top:10px;padding:10px 12px;border-radius:var(--r-md);
  display:none;
}
.sp-admin-pass-msg.err{color:var(--error);background:rgba(255,80,80,.08)}
.sp-admin-pass-msg.ok{color:var(--success);background:rgba(61,168,122,.08)}
.sp-admin-attempts{
  font-size:11px;color:rgba(255,255,255,.25);margin-top:10px;
  text-align:center;letter-spacing:.5px;
}

/* Light mode passcode gate */
[data-theme="light"] .sp-admin-passcode-input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#111}
[data-theme="light"] .sp-admin-passcode-input:focus{border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.06);box-shadow:0 0 0 3px rgba(0,0,0,.04)}
[data-theme="light"] .sp-admin-passcode-input::placeholder{color:rgba(0,0,0,.25)}
[data-theme="light"] .sp-admin-verify-btn{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.6)}
[data-theme="light"] .sp-admin-verify-btn:hover{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.2);color:#111}
[data-theme="light"] .sp-admin-attempts{color:rgba(0,0,0,.3)}

.sp-admin-search-wrap{position:relative;margin-bottom:16px}
.sp-admin-search{
  width:100%;padding:11px 14px 11px 38px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);color:var(--text);font-size:14px;
  font-family:var(--font);outline:none;
  transition:border-color var(--dur-normal),background var(--dur-normal);
}
.sp-admin-search:focus{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.sp-admin-search::placeholder{color:rgba(255,255,255,.25)}

.sp-admin-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:320px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom:20px;
}
.sp-admin-empty{
  text-align:center;padding:20px 12px;
  font-size:13px;color:rgba(255,255,255,.2);
}

/* User row */
.sp-admin-user{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-lg);
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.sp-admin-user:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.sp-admin-av{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface-1);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--text);
  overflow:hidden;flex-shrink:0;
}
.sp-admin-av img{width:100%;height:100%;object-fit:cover}
.sp-admin-info{flex:1;min-width:0}
.sp-admin-name{font-size:14px;font-weight:var(--weight-bold);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-admin-id{font-size:10px;color:rgba(255,255,255,.25);margin-top:1px;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Kick button */
.sp-admin-kick{
  padding:7px 16px;
  background:rgba(224,80,80,.1);border:1px solid rgba(224,80,80,.2);
  border-radius:var(--r-md);
  color:var(--error);font-size:11px;font-weight:var(--weight-extra);
  letter-spacing:.5px;cursor:pointer;font-family:var(--font);
  flex-shrink:0;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.sp-admin-kick:hover{background:rgba(224,80,80,.2);border-color:rgba(224,80,80,.4);transform:translateY(-1px)}
.sp-admin-kick:active{transform:scale(.96)}

/* Unban button */
.sp-admin-unban{
  padding:7px 16px;
  background:rgba(61,168,122,.1);border:1px solid rgba(61,168,122,.2);
  border-radius:var(--r-md);
  color:var(--success);font-size:11px;font-weight:var(--weight-extra);
  letter-spacing:.5px;cursor:pointer;font-family:var(--font);
  flex-shrink:0;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.sp-admin-unban:hover{background:rgba(61,168,122,.2);border-color:rgba(61,168,122,.4);transform:translateY(-1px)}
.sp-admin-unban:active{transform:scale(.96)}

/* Banned tag */
.sp-admin-tag{
  padding:3px 8px;border-radius:var(--r-full);
  font-size:9px;font-weight:var(--weight-extra);letter-spacing:.5px;
  background:rgba(224,80,80,.1);border:1px solid rgba(224,80,80,.15);
  color:var(--error);margin-left:6px;flex-shrink:0;
}

/* Banned users header */
.sp-admin-banned-head{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:var(--weight-extra);
  letter-spacing:1px;text-transform:uppercase;
  color:rgba(224,80,80,.6);
  margin-bottom:10px;padding-top:4px;
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:16px;
}

/* Light theme */
[data-theme="light"] .sp-admin-search{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:var(--text)}
[data-theme="light"] .sp-admin-search:focus{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.06)}
[data-theme="light"] .sp-admin-search::placeholder{color:rgba(0,0,0,.3)}
[data-theme="light"] .sp-admin-user{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}
[data-theme="light"] .sp-admin-user:hover{background:rgba(0,0,0,.05)}
[data-theme="light"] .sp-admin-empty{color:rgba(0,0,0,.25)}
[data-theme="light"] .sp-admin-id{color:rgba(0,0,0,.3)}
[data-theme="light"] .sp-admin-banned-head{color:rgba(224,80,80,.7);border-top-color:rgba(0,0,0,.06)}