/* =====================================================================
 * cLazy 102 — MODERN CLEAN DESIGN SYSTEM (2026 EDITION)
 * Designed for High Usability, Pure Typography & Fluid Micro-Interactions
 * ===================================================================== */

:root {
  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Theme: Dark Obsidian (Default) */
  --bg-page: #0a0d14;
  --bg-surface: #0f1422;
  --bg-card: #131b2e;
  --bg-card-hover: #18223a;
  --bg-glass: rgba(15, 20, 34, 0.78);
  --bg-elevated: rgba(255, 255, 255, 0.05);
  --bg-input: #0b101c;
  --bg-modal: #111728;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-focus: #6366f1;

  --text-main: #f8fafc;
  --text-soft: #94a3b8;
  --text-muted: #64748b;
  --text-contrast: #ffffff;

  /* Accents */
  --accent-primary: #6366f1;
  --accent-primary-hover: #4f46e5;
  --accent-primary-glow: rgba(99, 102, 241, 0.28);

  --accent-cyan: #06b6d4;
  --accent-cyan-light: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.22);

  --accent-emerald: #10b981;
  --accent-emerald-light: #34d399;

  --accent-amber: #f59e0b;
  --accent-amber-light: #fbbf24;

  --accent-rose: #f43f5e;
  --accent-rose-light: #fb7185;

  /* Geometry & Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 38px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.18);
}

/* Light Mode Overrides */
[data-theme="light"] {
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-elevated: #f1f5f9;
  --bg-input: #ffffff;
  --bg-modal: #ffffff;

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-card: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.18);
  --border-focus: #4f46e5;

  --text-main: #0f172a;
  --text-soft: #475569;
  --text-muted: #94a3b8;
  --text-contrast: #0f172a;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.12);
}

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

html {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--bg-page);
  color: var(--text-main);
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.25s ease, color 0.25s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
  user-select: none;
}

/* Ambient Subtle Lighting */
.ambientBackground {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
}

.ambientSpot {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.topSpot {
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 380px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(56, 189, 248, 0.05) 50%, transparent 70%);
}

.rightSpot {
  top: 30%;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 65%);
}

[data-theme="light"] .topSpot {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(56, 189, 248, 0.03) 50%, transparent 70%);
}

[data-theme="light"] #starfield {
  opacity: 0.06;
}

/* Floating Quick Search FAB */
.searchFab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  color: var(--text-main);
  font-size: 13.5px;
  font-weight: 600;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.searchFab:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.25);
  color: var(--accent-primary);
}

.searchFab svg {
  width: 17px;
  height: 17px;
}

/* =====================================================================
 * FLOATING TOP NAVIGATION (Clean, Minimalist, Responsive)
 * ===================================================================== */
.appHeader {
  position: sticky;
  top: 12px;
  z-index: 800;
  padding: 0 16px;
  max-width: 1280px;
  margin: 0 auto;
}

.headerContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: all 0.25s ease;
}

/* Brand Logo */
.brandLogo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.brandSymbol {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
}

.brandSymbol svg {
  width: 18px;
  height: 18px;
}

.brandMeta {
  display: flex;
  flex-direction: column;
}

.brandName {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brandName strong {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.versionBadge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.brandDesc {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 500;
}

/* Segmented Navigation Switcher */
.navSegments, .navSegmentDeck {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elevated);
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  gap: 2px;
}

.segmentBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  transition: all 0.18s ease;
  white-space: nowrap;
}

.segmentBtn svg {
  width: 14.5px;
  height: 14.5px;
}

.segmentBtn:hover {
  color: var(--text-main);
}

.segmentBtn.active {
  background: var(--bg-surface);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
}

.badgeHot {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  color: #ffffff;
  letter-spacing: 0.04em;
}

/* Nav Actions */
.navActions, .headerActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.navPillBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  transition: all 0.18s ease;
}

.navPillBtn svg {
  width: 14px;
  height: 14px;
}

.navPillBtn:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-card);
}

.specialPill {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent-primary);
  border-color: rgba(99, 102, 241, 0.25);
}

.specialPill:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: var(--accent-primary);
}

.keyAdminPill {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(56, 189, 248, 0.1));
  border-color: rgba(99, 102, 241, 0.3);
  color: var(--text-main);
}

.keyAdminPill:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

.keyAdminPill.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(52, 211, 153, 0.1));
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--accent-emerald-light);
}

/* Theme Toggle Button */
.navThemeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  transition: all 0.18s ease;
}

.navThemeBtn svg {
  width: 15px;
  height: 15px;
}

.navThemeBtn:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-card);
}

/* Theme Icon Visibility */
[data-theme="light"] .sunIcon { display: none; }
[data-theme="light"] .moonIcon { display: block; color: var(--accent-primary); }
:root:not([data-theme="light"]) .sunIcon { display: block; color: var(--accent-amber-light); }
:root:not([data-theme="light"]) .moonIcon { display: none; }

/* =====================================================================
 * MAIN CONTENT LAYOUT
 * ===================================================================== */
.pageMain {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 18px 80px;
  position: relative;
  z-index: 10;
}

/* Hero Section */
.heroSection {
  text-align: center;
  margin-bottom: 36px;
}

.heroHeader {
  max-width: 760px;
  margin: 0 auto 28px;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 16px;
}

.statusDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);
}

.heroTitle {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text-main);
  margin-bottom: 12px;
}

.heroSubtitle {
  font-size: clamp(14px, 1.8vw, 15.5px);
  color: var(--text-soft);
  line-height: 1.6;
}

/* Command Deck */
.commandDeck {
  max-width: 680px;
  margin: 0 auto 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.deckActionRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.actionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 650;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.actionBtn svg {
  width: 16px;
  height: 16px;
}

.primaryActionBtn {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  flex: 1 1 200px;
}

.primaryActionBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.primaryActionBtn:active {
  transform: translateY(0);
}

.ghostActionBtn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
}

.ghostActionBtn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Quick Key Admin Bar */
.quickKeyBar {
  margin-bottom: 14px;
}

.quickKeyBox {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 4px 6px 4px 14px;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quickKeyBox:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.quickKeyBox svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.quickKeyBox input {
  flex: 1;
  font-size: 13px;
  color: var(--text-main);
}

.quickKeyBox input::placeholder {
  color: var(--text-muted);
}

.quickKeyBox button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-main);
  transition: all 0.18s ease;
}

.quickKeyBox button:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

.deckFooter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.quickHint {
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}

.error {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--accent-rose-light);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  display: none;
}

.error:not(:empty) {
  display: block;
}

/* Feature Cards Grid */
.featureCardsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

.featureCard {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  transition: all 0.2s ease;
}

.featureCard:hover {
  border-color: var(--border-card);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.cardIconWrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cardIconWrap svg {
  width: 18px;
  height: 18px;
}

.blueWrap {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-cyan-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.emeraldWrap {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald-light);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.amberWrap {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-amber-light);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.cardText b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.cardText p {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* =====================================================================
 * ADMIN CONTROL PANEL (When Key Admin Logged In)
 * ===================================================================== */
.adminPanel {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 22px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-md);
  display: none;
}

.adminPanel:not([aria-hidden="true"]) {
  display: block;
}

.compactExtractHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.compactExtractBadgeRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.adminKicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-primary);
  border: 1px solid rgba(99, 102, 241, 0.28);
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.adminTotalPill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text-soft);
}

.compactExtractTitleWrap h2 {
  font-size: 18px;
  font-weight: 750;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.compactExtractTitleWrap p {
  font-size: 12.5px;
  color: var(--text-soft);
}

.adminPanelActions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.adminStatusMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.adminStatus {
  color: var(--accent-emerald-light);
  font-weight: 650;
}

.adminExpiryBadge {
  color: var(--text-muted);
}

.adminActionBtnsRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adminPortalLinkBtn, .adminGhostBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 650;
  border: 1px solid var(--border-card);
  background: var(--bg-elevated);
  color: var(--text-main);
  transition: all 0.18s ease;
}

.adminPortalLinkBtn svg, .adminGhostBtn svg {
  width: 14px;
  height: 14px;
}

.adminPortalLinkBtn:hover, .adminGhostBtn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}

.vipPortalLink {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--accent-amber-light);
}

.vipPortalLink:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--accent-amber);
}

.compactExtractControls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) auto;
  gap: 14px;
  align-items: flex-end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.fieldInline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fieldInline input, .field select {
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 13px;
  width: 100%;
}

.fieldInline input:focus, .field select:focus {
  border-color: var(--border-focus);
}

.miniBtn {
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  font-size: 12px;
  font-weight: 650;
  color: var(--text-main);
  white-space: nowrap;
}

.adminPrimaryBtn {
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  white-space: nowrap;
  transition: all 0.18s ease;
}

.adminPrimaryBtn svg {
  width: 15px;
  height: 15px;
}

.adminPrimaryBtn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* =====================================================================
 * RESULTS SECTION & ACCOUNT CARDS
 * ===================================================================== */
.resultHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 0 4px;
}

.sectionEyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
  margin-bottom: 2px;
}

.resultHeadLeft b {
  font-size: 18px;
  font-weight: 750;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.resultHead small {
  font-size: 12.5px;
  color: var(--text-soft);
}

.results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Single Player Card */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.22s ease;
  animation: cardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.cardTop {
  padding: 20px 22px 16px;
}

.cardTopHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.badgeGroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.badge svg {
  width: 14px;
  height: 14px;
}

.badge.vip {
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent-amber-light);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge.good {
  background: rgba(99, 102, 241, 0.14);
  color: var(--accent-primary);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.badge.normal {
  background: rgba(16, 185, 129, 0.14);
  color: var(--accent-emerald-light);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.rankTagBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  font-size: 11.5px;
  font-weight: 750;
  color: var(--accent-amber-light);
}

.rankTagBadge svg {
  width: 12px;
  height: 12px;
}

.uidMiniBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.16s ease;
}

.uidMiniBadge:hover {
  border-color: var(--border-focus);
  color: var(--text-main);
  background: var(--bg-elevated);
}

.uidMiniBadge .uidLabel {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-muted);
}

.uidMiniBadge code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-main);
}

.uidMiniBadge svg {
  width: 11px;
  height: 11px;
  color: var(--text-muted);
}

.deleteAccBtn {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(244, 63, 94, 0.1);
  color: var(--accent-rose-light);
  border: 1px solid rgba(244, 63, 94, 0.25);
  font-size: 11px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.deleteAccBtn:hover {
  background: var(--accent-rose);
  color: #ffffff;
}

/* Ingame Player Name Row */
.cardPlayerRow {
  margin-bottom: 14px;
}

.nameValCopyable {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease;
}

.nameValCopyable:hover {
  transform: translateX(2px);
}

.playerNameText {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  word-break: break-word;
}

.copyNamePill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: var(--accent-cyan-light);
  font-size: 11px;
  font-weight: 700;
  transition: all 0.16s ease;
}

.copyNamePill svg {
  width: 11px;
  height: 11px;
}

.nameValCopyable:hover .copyNamePill {
  background: var(--accent-cyan-light);
  color: #0b101c;
}

/* Credentials Capsule */
.credCapsule {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.credInfoBox {
  flex: 1;
  min-width: 0;
}

.credFieldRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.credTag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.login {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--accent-cyan-light);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.credBtnRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.primaryCopyBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  transition: all 0.16s ease;
}

.primaryCopyBtn svg {
  width: 13px;
  height: 13px;
}

.primaryCopyBtn:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
}

.ghostEyeBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.ghostEyeBtn svg {
  width: 14px;
  height: 14px;
}

.ghostEyeBtn:hover {
  background: var(--bg-card-hover);
  color: var(--text-main);
  border-color: var(--border-strong);
}

/* 4 Key Stat Tiles */
.cardStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.cardStatTile {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.cstLabel {
  font-size: 10px;
  font-weight: 750;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.cstValue {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

/* Special Skins & Security Attributes */
.cardMetaSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.skinPillsWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
}

.skinPillsWrap div {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  color: var(--accent-amber-light);
}

.skinPillsWrap div b {
  color: var(--text-main);
  margin-right: 4px;
}

.chipsWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chipsWrap .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
}

.chipDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
}

.chip.yes {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
  color: var(--accent-emerald-light);
}

.chip.yes .chipDot {
  background: var(--accent-emerald);
}

.chip.no {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.28);
  color: var(--accent-rose-light);
}

.chip.no .chipDot {
  background: var(--accent-rose);
}

/* Card Action Toolbar */
.cardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cardActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 650;
  border: 1px solid var(--border-card);
  background: var(--bg-elevated);
  color: var(--text-main);
  transition: all 0.16s ease;
  white-space: nowrap;
}

.cardActionBtn svg {
  width: 14px;
  height: 14px;
}

.cardActionBtn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.cardActionBtn.banBtn {
  color: var(--text-soft);
}

.cardActionBtn.banBtn:hover {
  color: var(--text-main);
}

.cardActionBtn.tcpBtn {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.28);
  color: var(--accent-cyan-light);
}

.cardActionBtn.tcpBtn:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: var(--accent-cyan-light);
}

.cardActionBtn.lockedBtn {
  opacity: 0.75;
}

/* Card Body & Details Accordion */
.cardBody {
  padding: 12px 22px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
}

.allDetails summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-primary);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detailGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 11.5px;
}

.detailField {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.detailLabel {
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.detailValue {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
}

.detailValue.yesValue {
  color: var(--accent-emerald-light);
  font-weight: 700;
}

/* Ban Check Result Box & Constrained SVG Icons */
.banCheckBox {
  margin-top: 12px;
  width: 100%;
}

.banCheckBanned,
.banCheckClear,
.banCheckError,
.banCheckLoading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.45;
  box-sizing: border-box;
  width: 100%;
  animation: fadeIn 0.2s ease;
}

.banCheckBanned {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}

.banCheckBanned b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent-danger);
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(239, 68, 68, 0.25);
}

.banCheckBanned span {
  display: block;
  font-size: 11.5px;
  color: var(--text-soft);
  word-break: break-word;
}

.banCheckClear {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: var(--accent-emerald-light);
}

.banCheckClear b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent-emerald-light);
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(16, 185, 129, 0.25);
}

.banCheckClear span {
  display: block;
  font-size: 11.5px;
  color: var(--text-soft);
  word-break: break-word;
}

.banCheckError {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: var(--accent-amber-light);
}

.banCheckError b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
  color: var(--accent-amber-light);
}

.banCheckError span {
  display: block;
  font-size: 11.5px;
  color: var(--text-soft);
  word-break: break-word;
}

.banCheckLoading {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 650;
}

.inlineSvgIcon, svg.inlineSvgIcon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.chips span {
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
}

.chip-danger {
  color: var(--accent-rose-light) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}

.chip-ok {
  color: var(--accent-emerald-light) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.skinHighlights {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

.skinHighlights b {
  color: var(--text-main);
}

.allDetails summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  color: var(--accent-primary);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detailGrid .row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.detailGrid .row .key {
  color: var(--text-muted);
}

.detailGrid .row .val {
  color: var(--text-main);
  font-weight: 600;
}

/* =====================================================================
 * MODALS & OVERLAYS
 * ===================================================================== */
.searchOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 8, 16, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.searchOverlay.open,
.searchOverlay.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.searchSheet {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-modal);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.searchOverlay.open .searchSheet,
.searchOverlay.active .searchSheet {
  transform: translateY(0) scale(1);
}

.modalHeaderBar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modalHeaderTitle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.modalHeaderTitle svg {
  width: 20px;
  height: 20px;
  color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.modalHeaderTitle h3 {
  font-size: 16.5px;
  font-weight: 750;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.modalHeaderTitle p {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
}

.closePill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  transition: all 0.16s ease;
  flex-shrink: 0;
}

.closePill svg {
  width: 14px;
  height: 14px;
}

.closePill:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-card);
}

/* Modal Search / Punish / Admin Forms */
.searchInputWrap {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 4px 6px 4px 14px;
  gap: 8px;
  margin-bottom: 12px;
}

.searchInputWrap svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.searchInputWrap input {
  flex: 1;
  font-size: 13.5px;
  color: var(--text-main);
}

.searchInputWrap button {
  background: var(--accent-primary);
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.searchSuggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.searchSuggestions small {
  font-size: 11.5px;
  color: var(--text-muted);
}

.searchTag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  cursor: pointer;
}

.searchTag:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.modalFootNote {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Punish Modal Specifics */
.punishTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.punishModeTab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-soft);
  transition: all 0.16s ease;
}

.punishModeTab svg {
  width: 15px;
  height: 15px;
}

.punishModeTab.active {
  background: var(--bg-surface);
  border-color: var(--accent-primary);
  color: var(--text-main);
}

.punishTabBadge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.unlockedBadge {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald-light);
}

.lockedBadge {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-amber-light);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.lockedBadge svg {
  width: 11px;
  height: 11px;
}

.punishResult {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.punishCard {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.punishTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.punishName {
  font-size: 14px;
  font-weight: 750;
  color: var(--text-main);
}

.punishGrid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px;
  font-size: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

.punishGrid b {
  color: var(--text-muted);
}

.punishGrid span {
  color: var(--text-main);
}

.punishEmpty, .punishError {
  padding: 12px;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 12.5px;
}

.punishEmpty {
  background: var(--bg-elevated);
  color: var(--text-soft);
}

.punishError {
  background: rgba(244, 63, 94, 0.12);
  color: var(--accent-rose-light);
}

/* Admin Login Modal */
.adminLoginForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adminLoginForm input {
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 13.5px;
}

.adminLoginForm input:focus {
  border-color: var(--border-focus);
}

.adminMessage {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  display: none;
}

.adminMessage.error {
  display: block;
  background: rgba(244, 63, 94, 0.12);
  color: var(--accent-rose-light);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.adminMessage.success {
  display: block;
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald-light);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Delete Confirm Modal */
.deleteConfirmSheet {
  width: min(440px, 100%);
  position: relative;
  text-align: center;
  padding: 26px 20px 20px;
}

.deleteConfirmTitle {
  display: block;
  font-size: 16.5px;
  font-weight: 750;
  color: var(--text-main);
  margin-bottom: 8px;
}

.deleteConfirmDesc {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 18px;
}

.deleteConfirmActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.deleteCancelBtn {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-main);
}

.deleteConfirmBtn {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-rose);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 650;
}

/* Welcome Modal */
.welcomeSheet {
  width: min(640px, 100%);
  padding: 24px;
}

.welcomeBadgeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.statusBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 750;
}

.infoBadge {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-primary);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.infoBadge svg {
  width: 13px;
  height: 13px;
}

.welcomeTopBanner h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 6px;
}

.welcomeTopBanner p {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 18px;
}

.welcomeFeatureGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.welcomeFeatureCard {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.wfHeader {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.wfTag {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  width: fit-content;
}

.freeTag {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald-light);
}

.adminKeyTag {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-amber-light);
}

.ipaTag {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-cyan-light);
}

.wfList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.wfList li {
  position: relative;
  padding-left: 12px;
}

.wfList li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-primary);
}

.welcomeIpaCallout {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.welcomeIpaInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.welcomeIpaInfo b {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text-main);
}

.welcomeIpaInfo p {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}

.welcomeIpaBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-cyan-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.welcomeIpaBtn svg {
  width: 14px;
  height: 14px;
}

.welcomeFooterBar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.welcomePrimaryBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 650;
}

.welcomePrimaryBtn svg {
  width: 14px;
  height: 14px;
}

.welcomeSecondaryBtn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 650;
}

/* =====================================================================
 * BRANCH 2: IPA DIRECT INSTALLATION LAYOUT
 * ===================================================================== */
.ipaStoreLayout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: flex-start;
}

.ipaShowcaseCard, .ipaPortalCard {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.ipaAppStoreHero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.ipaAppStoreIcon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

.ipaAppHeroInfo h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 4px;
}

.ipaAppSubtitle {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.ipaAppMetaPills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ipaBundlePill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  font-size: 11.5px;
  color: var(--text-soft);
}

.ipaBundlePill svg {
  width: 13px;
  height: 13px;
}

.ipaShareMiniBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent-primary);
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 11px;
  font-weight: 650;
}

.ipaShareMiniBtn svg {
  width: 12px;
  height: 12px;
}

/* Specs Strip */
.ipaAppSpecsStrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 22px;
}

.ipaSpecCell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ipaSpecLabelRow {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ipaSpecLabelRow svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

.ipaSpecLabelRow small {
  font-size: 10.5px;
  font-weight: 750;
  color: var(--text-muted);
}

.ipaSpecCell b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.monoSpec {
  font-family: var(--font-mono);
  font-size: 11.5px !important;
}

.emeraldSpec {
  color: var(--accent-emerald-light) !important;
}

.ipaDescSection {
  margin-bottom: 24px;
}

.ipaSectionLabel {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.ipaShowcaseDesc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Gallery Demo */
.ipaGallerySection {
  margin-top: 18px;
}

.ipaGalleryHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ipaGalleryControls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ipaGalleryCountBadge {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.ipaGalleryNavBtn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
}

.ipaGalleryNavBtn svg {
  width: 13px;
  height: 13px;
}

.ipaDemoStage {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  position: relative;
}

.ipaDemoStage img {
  width: 100%;
  height: auto;
  display: block;
}

.ipaCarouselProgress {
  height: 3px;
  background: var(--bg-elevated);
  width: 100%;
}

.ipaCarouselBar {
  height: 100%;
  background: var(--accent-primary);
  width: 0%;
}

/* Unlock Portal Column */
.ipaPortalHeader {
  margin-bottom: 18px;
}

.panelKicker {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent-primary);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}

.ipaPortalHeader h3 {
  font-size: 17px;
  font-weight: 750;
  color: var(--text-main);
  margin-bottom: 4px;
}

.ipaPortalHeader p {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

.ipaLockCard {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.ipaLockRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ipaLockInfo b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.ipaLockInfo small {
  font-size: 11px;
  color: var(--text-muted);
}

.ipaLockPill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-amber-light);
  font-size: 10.5px;
  font-weight: 700;
}

.ipaLockPill svg {
  width: 12px;
  height: 12px;
}

.ipaRedeemForm {
  margin: 16px 0;
}

.ipaRedeemForm label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.ipaKeyInputGroup {
  display: flex;
  gap: 6px;
}

.ipaKeyInputGroup input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  font-size: 12.5px;
  color: var(--text-main);
}

.ipaRedeemSubmitBtn {
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.ipaRedeemMsg {
  margin-top: 8px;
  font-size: 11.5px;
  display: none;
}

.ipaRedeemMsg.show {
  display: block;
}

/* Download Buttons after Unlock */
.ipaUnlockedBox {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.ipaUnlockedTag {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-emerald-light);
  display: block;
  margin-bottom: 2px;
}

.ipaUnlockedHeader b {
  font-size: 14px;
  font-weight: 750;
  color: var(--text-main);
  display: block;
}

.ipaActionButtons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ipaDownloadBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ipaDownloadBtn svg {
  width: 15px;
  height: 15px;
}

.primaryIpaBtn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.secondaryTfBtn {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--text-main);
}

/* Buy Callout */
.ipaBuyCallout {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.ipaPriceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--text-soft);
}

.ipaPriceTag {
  font-size: 12px;
  font-weight: 750;
  color: var(--accent-amber-light);
}

.ipaBuyCallout p {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.ipaBuyBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 650;
  transition: all 0.18s ease;
}

.ipaBuyBtn svg {
  width: 14px;
  height: 14px;
}

.ipaBuyBtn:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

/* =====================================================================
 * TOAST NOTIFICATIONS
 * ===================================================================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 650;
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================================
 * RESPONSIVE BREAKPOINTS (Mobile & Tablet)
 * ===================================================================== */
/* =====================================================================
 * RESPONSIVE BREAKPOINTS (Mobile & Tablet Deep Optimization)
 * ===================================================================== */
@media (max-width: 900px) {
  .ipaStoreLayout {
    grid-template-columns: 1fr;
  }
  
  .ipaAppSpecsStrip {
    grid-template-columns: repeat(2, 1fr);
  }

  .adminGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .appHeader, .commandNavbar {
    padding: 0 8px;
    top: 6px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .headerContainer, .commandNavbar .navInner {
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }

  .brandLogo {
    gap: 8px;
    flex-shrink: 0;
  }

  .brandSymbol {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .brandSymbol svg {
    width: 16px;
    height: 16px;
  }

  .brandName strong {
    font-size: 13.5px;
  }

  .brandDesc, .versionBadge {
    display: none !important;
  }

  /* Segment Switcher is hidden in top bar on mobile - available in drawer */
  .navSegments, .navSegmentDeck {
    display: none !important;
  }

  .navActions, .headerActions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }

  /* Hide raw link pills in header on mobile - available in drawer */
  .telegramPill,
  .navPillBtn.telegramPill,
  .navActions a.navPillBtn {
    display: none !important;
  }

  /* Key Admin button is always visible on mobile */
  .keyAdminPill {
    display: inline-flex !important;
    height: 32px;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 700;
    gap: 4px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    align-items: center;
    width: auto !important;
  }

  .keyAdminPill svg {
    width: 12px;
    height: 12px;
  }

  .keyAdminPill #adminLoginText {
    display: inline !important;
    font-size: 11px;
  }

  .navThemeBtn, .menuToggleBtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  .navThemeBtn svg, .menuToggleBtn svg {
    width: 15px;
    height: 15px;
  }
  
  .pageMain, .adminPageWrap {
    padding: 14px 8px 70px;
  }
  
  .heroTitle {
    font-size: 24px;
  }

  .commandDeck {
    padding: 14px 12px;
    border-radius: var(--radius-lg);
  }
  
  .deckActionRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .deckActionRow #randomBtn {
    grid-column: 1 / -1;
    height: 38px;
    font-size: 13px;
    font-weight: 700;
    padding: 0 16px;
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-pill);
    box-shadow: 0 3px 12px rgba(99, 102, 241, 0.3);
  }

  .deckActionRow .actionBtn:not(#randomBtn) {
    height: 34px;
    font-size: 11.5px;
    padding: 0 10px;
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-pill);
  }

  .actionBtn .btnIcon svg {
    width: 14px;
    height: 14px;
  }

  .quickKeyBox {
    padding: 3px 4px 3px 12px;
  }

  .quickKeyBox input {
    font-size: 12.5px;
  }

  .quickKeyBox button {
    padding: 6px 12px;
    font-size: 11.5px;
  }
  
  .compactExtractControls {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .compactExtractControls .field {
    gap: 4px;
  }

  .compactExtractControls .field span {
    font-size: 11.5px;
  }

  .compactExtractControls .fieldInline input,
  .compactExtractControls .field select {
    height: 36px;
    font-size: 12.5px;
  }

  .compactExtractControls #adminRandomBtn,
  .compactExtractControls .adminPrimaryBtn {
    height: 38px;
    width: 100%;
    font-size: 12.5px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
  }
  
  .compactExtractHead {
    flex-direction: column;
    gap: 12px;
  }
  
  /* Admin Console Mobile */
  .standaloneAdminConsole {
    padding: 14px 10px;
    border-radius: var(--radius-lg);
  }

  .adminPanelHead {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }

  .adminKicker {
    font-size: 9.5px;
    padding: 2px 8px;
  }

  .adminHeadInfo h2 {
    font-size: 16px;
  }

  .adminHeadInfo p {
    font-size: 12px;
  }

  .adminPanelActions {
    align-items: stretch;
    width: 100%;
  }

  .adminStatusMeta {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4px;
  }

  .adminActionBtnsRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .adminPortalLinkBtn, .adminGhostBtn {
    height: 36px;
    font-size: 11.5px;
    padding: 0 8px;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }

  .adminGrid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  .adminModule {
    padding: 14px 12px;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
  }

  .dropzone {
    padding: 16px 10px;
  }

  #adminUploadBtn, #adminRandomBtn {
    height: 38px;
    width: 100%;
    font-size: 12.5px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    justify-content: center;
  }

  .adminControls .fieldInline input,
  .adminControls .field select {
    height: 36px;
    font-size: 12.5px;
  }

  .adminControls .miniBtn {
    height: 36px;
    font-size: 12px;
    padding: 0 12px;
  }

  .akFormGrid2 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .akQuickPresetRow {
    gap: 4px;
  }

  .akPresetChip {
    height: 26px;
    padding: 0 7px;
    font-size: 10.5px;
  }

  .akDurationGroup {
    flex-direction: column;
    gap: 6px;
  }

  .akDurationGroup select {
    width: 100%;
  }

  .ipaAdminRow2 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ipaPublicShareRow {
    flex-direction: column;
    gap: 6px;
  }

  .ipaShareCopyBtn {
    width: 100%;
    height: 36px;
  }

  .ipaUploadInline {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .miniUploadBtn {
    width: 100%;
    justify-content: center;
  }

  .socStatsGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .socToolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .socToolbarLeft {
    flex-direction: column;
    width: 100%;
  }

  .socBtn {
    width: 100%;
    justify-content: center;
  }

  .socSearchInput {
    width: 100%;
  }

  /* Card Mobile Layout */
  .cardTop {
    padding: 14px 12px 10px;
  }

  .cardTopHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }

  .badgeGroup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .badge {
    padding: 3px 9px;
    font-size: 10.5px;
  }

  .rankTagBadge {
    padding: 2px 8px;
    font-size: 10.5px;
  }

  .uidMiniBadge {
    padding: 2px 8px;
    font-size: 10.5px;
  }

  .cardPlayerRow {
    margin-bottom: 10px;
  }

  .nameValCopyable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .playerNameText {
    font-size: 15.5px;
    font-weight: 800;
  }

  .copyNamePill {
    padding: 2px 7px;
    font-size: 10px;
  }

  .credCapsule {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 9px 11px;
    margin-bottom: 10px;
  }

  .credFieldRow {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .credTag {
    font-size: 9.5px;
    padding: 2px 6px;
  }

  .login {
    font-size: 12.5px;
  }

  .credBtnRow {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
    gap: 6px;
  }

  .primaryCopyBtn {
    height: 34px;
    font-size: 11.5px;
    justify-content: center;
    width: 100%;
  }

  .ghostEyeBtn {
    height: 34px;
    font-size: 11.5px;
    padding: 0 10px;
  }

  .cardStatsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }

  .cardStatTile {
    padding: 6px 8px;
  }

  .cstLabel {
    font-size: 9.5px;
  }

  .cstValue {
    font-size: 12.5px;
  }

  .cardMetaSection {
    margin-bottom: 10px;
    gap: 6px;
  }

  .skinPillsWrap {
    gap: 5px;
  }

  .skinPillsWrap div {
    font-size: 10.5px;
    padding: 2px 8px;
  }

  .chipsWrap {
    gap: 5px;
  }

  .chipsWrap .chip {
    font-size: 10.5px;
    padding: 2px 7px;
  }

  .cardActions {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cardActionBtn {
    height: 36px;
    font-size: 12px;
    width: 100%;
  }

  .cardBody {
    padding: 10px 12px;
  }

  .detailGrid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .detailField {
    padding: 6px 8px;
  }

  .detailLabel {
    font-size: 9.5px;
  }

  .detailValue {
    font-size: 11px;
  }

  .featureCardsGrid {
    grid-template-columns: 1fr;
  }

  .terminalTelemetryBar {
    padding: 6px 10px;
    font-size: 10.5px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .terminalTelemetryBar::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .appHeader, .commandNavbar {
    padding: 0 6px;
    top: 6px;
  }

  .headerContainer, .commandNavbar .navInner {
    padding: 5px 8px;
    gap: 6px;
  }

  .brandSymbol {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .brandSymbol svg {
    width: 15px;
    height: 15px;
  }

  .brandName strong {
    font-size: 13.5px;
  }

  .versionBadge {
    display: none;
  }

  .segmentBtn span {
    font-size: 11px;
  }

  .badgeHot {
    display: none;
  }

  .heroTitle {
    font-size: 22px;
  }

  .statusPill {
    font-size: 10.5px;
    padding: 3px 10px;
  }

  .searchSheet, .punishSheet, .welcomeSheet, .adminSheet, .deleteConfirmSheet {
    padding: 16px 12px;
    border-radius: var(--radius-lg);
  }

  .punishTabs {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * COMMAND NAVBAR & STANDALONE ADMIN CONSOLE STYLES (admin.php, ipa.php)
 * ===================================================================== */
.commandNavbar {
  position: sticky;
  top: 10px;
  z-index: 850;
  padding: 0 16px;
  max-width: 1320px;
  margin: 0 auto 16px;
}

.commandNavbar .navInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 18px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.brandMark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  overflow: hidden;
}

.brandMark img {
  width: 20px;
  height: 20px;
}

.brandText {
  display: flex;
  flex-direction: column;
}

.brandTitleRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brandTitleRow strong {
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.vaultVersion {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-primary);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.topActions, .topActionsGroup {
  display: flex;
  align-items: center;
  gap: 6px;
}

.navActionBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  transition: all 0.18s ease;
}

.navActionBtn svg {
  width: 14px;
  height: 14px;
}

.navActionBtn:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-card);
}

.navThemeToggleBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  transition: all 0.18s ease;
}

.navThemeToggleBtn svg {
  width: 15px;
  height: 15px;
}

.navThemeToggleBtn:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-card);
}

.terminalTelemetryBar {
  max-width: 1320px;
  margin: 0 auto 18px;
  padding: 6px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adminPageWrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* Admin Auth Gate (Before Login) */
.adminAuthGate {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
}

.adminGateCard {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

.adminGateIconWrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.adminGateIcon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.adminGateIcon svg {
  width: 24px;
  height: 24px;
}

.modalTag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-primary);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.adminGateCard h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.adminGateCard p {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 20px;
  line-height: 1.5;
}

.adminGateForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adminGateBtn {
  height: 42px;
  border-radius: var(--radius-pill);
}

.adminGateFooter {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* Standalone Admin Console (After Login) */
.standaloneAdminConsole {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.adminPanelHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.adminHeadInfo h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 4px;
}

.adminHeadInfo p {
  font-size: 13px;
  color: var(--text-soft);
}

.adminModeSwitch {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.adminModeSwitch::-webkit-scrollbar {
  display: none;
}

.adminSwitchBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 650;
  color: var(--text-soft);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.adminSwitchBtn svg {
  width: 15px;
  height: 15px;
}

.adminSwitchBtn:hover {
  background: var(--bg-card-hover);
  color: var(--text-main);
}

.adminSwitchBtn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

.adminGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.adminModule {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.moduleTitle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.moduleTitle b {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text-main);
  margin-bottom: 3px;
}

.moduleTitle span {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}

.secureBadge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald-light);
  border: 1px solid rgba(16, 185, 129, 0.25);
  white-space: nowrap;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 2px dashed var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.dropzone:hover {
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.04);
}

.dropzone input[type="file"] {
  display: none;
}

.dropIcon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.dropIcon svg {
  width: 20px;
  height: 20px;
}

.dropzone strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.dropzone span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.adminControls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.moduleNote {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  background: var(--bg-elevated);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

/* Key Vault Admin Cards */
.akCreateContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.akFormGroup {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.akGroupHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.akGroupStep {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.akGroupHeader strong {
  font-size: 13.5px;
  color: var(--text-main);
}

.akInputGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.akTableWrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.akTable, table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.akTable th, table th {
  background: var(--bg-elevated);
  padding: 10px 14px;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-card);
}

.akTable td, table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
}

.akTable tr:hover, table tr:hover {
  background: var(--bg-elevated);
}

/* =====================================================================
 * OFF-CANVAS MOBILE MENU DRAWER (Hộp Danh Mục Menu 3 Gạch)
 * ===================================================================== */
.menuDrawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  display: flex;
}

.menuDrawerOverlay.open,
.menuDrawerOverlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.menuDrawerSheet {
  width: min(360px, 86vw);
  height: 100%;
  background: var(--bg-card);
  border-right: 1px solid var(--border-card);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.menuDrawerOverlay.open .menuDrawerSheet,
.menuDrawerOverlay[aria-hidden="false"] .menuDrawerSheet {
  transform: translateX(0);
}

.menuDrawerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.menuDrawerBody {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawerSectionLabel {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 12px 0 6px;
  display: block;
}

.drawerNavList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawerNavItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-main);
  transition: all 0.16s ease;
  position: relative;
}

.drawerNavItem:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  transform: translateX(3px);
}

.drawerNavItem.active {
  background: var(--accent-primary-subtle);
  border-color: rgba(99, 102, 241, 0.35);
  color: var(--accent-primary);
}

.drawerNavItem svg {
  width: 18px;
  height: 18px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.drawerNavItem .itemText {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.drawerNavItem .itemText b {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawerNavItem .itemText small {
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badgeHot {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
  letter-spacing: 0.5px;
}

.drawerQuickActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.drawerActionTile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.drawerActionTile:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.drawerActionTile svg {
  width: 15px;
  height: 15px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.drawerFooter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawerSocialBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 550;
  text-decoration: none;
  transition: all 0.15s ease;
}

.drawerSocialBtn:hover {
  color: var(--text-main);
  border-color: var(--accent-primary);
}

.drawerSocialBtn svg {
  width: 15px;
  height: 15px;
  color: var(--accent-primary);
}

.directAdminBtn {
  border-color: rgba(99, 102, 241, 0.25);
  background: var(--accent-primary-subtle);
  color: var(--text-main);
}

/* =====================================================================
 * KEY ADMIN VIP MANAGEMENT (Giao diện Quản Lý & Cấp Key Đẹp Mắt)
 * ===================================================================== */
.akFormGrid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.akField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.akFieldLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-soft);
}

.akInput, .akSelect {
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.akInput:focus, .akSelect:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.akInputIconWrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.akInputIconWrap svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.akInputIconWrap input {
  padding-left: 36px;
  height: 38px;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.akInputIconWrap input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.akSubBox {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px;
}

.akSubBoxTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.akQuickPresetRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.akPresetChip {
  height: 26px;
  padding: 0 9px;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.akPresetChip:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-main);
}

.akPresetChip.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
}

.akDurationGroup {
  display: flex;
  gap: 8px;
}

.akDurationGroup input {
  flex: 1;
}

.akDurationGroup select {
  width: 140px;
}

.akFeatureCard {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color 0.18s ease;
}

.akFeatureToggleLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}

.akFeatureInfo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.akFeatureIcon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.akFeatureTitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  display: block;
}

.akFeatureSub {
  font-size: 11.5px;
  color: var(--text-muted);
  display: block;
  line-height: 1.4;
  margin-top: 2px;
}

.akCheckbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.akSubmitBtn {
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  width: 100%;
}

.akSubmitBtn:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

/* Key Edit Modal */
.akEditOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.akEditOverlay.open,
.akEditOverlay[aria-hidden="false"] {
  display: flex;
}

.akEditSheet {
  width: 100%;
  max-width: 580px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  max-height: 90vh;
  overflow-y: auto;
}

.akEditHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.akPulseBadge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 4px;
}

.akEditTitle {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.akEditCode {
  color: var(--accent-primary);
  font-family: monospace;
}

.akQuickChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.akChipBtn {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}

.akChipBtn:hover {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* =====================================================================
 * CẤU HÌNH IPA & KEY IPA ADMIN
 * ===================================================================== */
.ipaPublicShareBox {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 18px;
}

.ipaPublicShareTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.shareKicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.5px;
  color: var(--accent-primary);
  margin-bottom: 2px;
}

.shareKicker svg {
  width: 13px;
  height: 13px;
}

.ipaPublicShareDesc {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 4px 0 10px;
}

.ipaPublicShareRow {
  display: flex;
  gap: 8px;
}

.ipaPublicShareRow input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12.5px;
  font-family: monospace;
}

.ipaShareCopyBtn {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 650;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.ipaShareCopyBtn:hover {
  opacity: 0.9;
}

.ipaAdminFormGrid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ipaAdminRow2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.ipaIconConfigRow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ipaAppStoreIcon.sm {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  object-fit: cover;
}

.ipaIconConfigControls {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ipaUploadInline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ipaUploadInline input[type="text"],
.ipaUploadInline input[type="url"] {
  flex: 1;
  min-width: 200px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12.5px;
}

.miniUploadBtn {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.miniUploadBtn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.miniUploadBtn svg {
  width: 14px;
  height: 14px;
  color: var(--accent-primary);
}

.fieldSubHint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}

/* IPA Upload Progress Bar */
.ipaUploadProgressBox {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 8px;
}

.ipaProgressHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-main);
}

.ipaProgressBarTrack {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 6px;
}

.ipaProgressBarFill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #38bdf8);
  border-radius: 4px;
  transition: width 0.18s ease;
}

.ipaProgressFooter {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.ipaAdminImgList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ipaKeyCreateBox {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.ipaKeyListHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
}

.ipaKeyListHeader small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.ipaKeysList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =====================================================================
 * AN NINH SOC & TERMINAL GIÁM SÁT
 * ===================================================================== */
.adminPaneSoc {
  width: 100%;
}

.socTerminalWindow {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.socTerminalHeader {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.socTrafficLights {
  display: flex;
  align-items: center;
  gap: 6px;
}

.socLight {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.socClose { background: #ef4444; }
.socMin   { background: #f59e0b; }
.socMax   { background: #10b981; }

.socTerminalTitle {
  font-size: 12px;
  font-weight: 650;
  font-family: monospace;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

.socTerminalStatus {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-emerald);
  letter-spacing: 0.5px;
}

.socStatusDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);
}

.socTerminalBody {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.socStatsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.socStatCard {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.socStatLabel {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.socStatValue {
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.socStatValue.text-danger  { color: var(--accent-danger); }
.socStatValue.text-success { color: var(--accent-emerald); }
.socStatValue.text-cyan    { color: var(--accent-primary); }

.socStatHint {
  font-size: 11px;
  color: var(--text-muted);
}

.socToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
}

.socToolbarLeft {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.socBtn {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.socBtn svg {
  width: 14px;
  height: 14px;
}

.socBtnDefault {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
}

.socBtnDefault:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.socBtnDanger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--accent-danger);
}

.socBtnDanger:hover {
  background: var(--accent-danger);
  color: #ffffff;
}

.socSearchInput {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12px;
  width: 240px;
}

.socLogPanel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
}

.socLogIntro {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 10px;
  line-height: 1.5;
}

.socPromptText {
  color: var(--accent-primary);
  font-weight: 750;
  font-family: monospace;
}

.socDevicesList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.socEmpty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.socCliBar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 0 12px;
}

.socCliPrompt {
  font-size: 12px;
  font-family: monospace;
  font-weight: 750;
  color: var(--accent-emerald);
}

.socCliInput {
  flex: 1;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 12.5px;
  font-family: monospace;
  outline: none;
}



/* =====================================================================
 * MODERN IPA FRONTEND & KEY VAULT STYLES (ipa.php & admin.php)
 * ===================================================================== */
.standaloneIpaBody {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  color: var(--text-main);
  overflow-x: hidden;
}

.ipaModernWrap {
  flex: 1;
  padding: 18px 16px 40px;
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.ipaModernContainer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.ipaHeroCard {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}

.ipaHeroHeader {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.ipaHeroIconBox {
  flex-shrink: 0;
}

.ipaHeroIcon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  display: block;
}

.ipaHeroMeta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ipaHeroTitle {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.ipaHeroSubtitle {
  font-size: 13.5px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.5;
}

.ipaPillsRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.ipaPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ipaPill svg {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ipaPillSuccess {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.35);
}

.ipaPillSuccess svg {
  color: #10b981;
}

.ipaShareMiniBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--accent-primary);
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ipaShareMiniBtn svg {
  width: 13px;
  height: 13px;
}

.ipaShareMiniBtn:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.ipaActionGateway {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.ipaModernKeyForm {
  margin-bottom: 12px;
}

.ipaKeyInputGroup {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 4px 6px;
  gap: 8px;
  transition: border-color 0.18s ease;
}

.ipaKeyInputGroup:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.ipaKeyInputPrefix {
  padding-left: 8px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ipaKeyInputPrefix svg {
  width: 18px;
  height: 18px;
}

.ipaKeyInputGroup input {
  flex: 1;
  min-width: 0;
  height: 42px;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 13.5px;
  font-family: var(--term-font, monospace);
  outline: none;
  padding: 0 6px;
}

.ipaModernRedeemBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.1s ease;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  flex-shrink: 0;
}

.ipaModernRedeemBtn:hover {
  opacity: 0.95;
}

.ipaModernRedeemBtn:active {
  transform: scale(0.98);
}

.ipaModernRedeemBtn svg {
  width: 15px;
  height: 15px;
}

.ipaRedeemMsg {
  font-size: 12px;
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.4;
}

.ipaRedeemMsg.error {
  color: #ef4444;
  font-weight: 600;
}

.ipaRedeemMsg.success {
  color: #10b981;
  font-weight: 600;
}

.ipaBuyKeyBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 8px;
}

.ipaBuyKeyInfo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ipaPriceBadge {
  font-size: 13px;
  font-weight: 750;
  color: #fbbf24;
}

.ipaBuyKeyNote {
  font-size: 11.5px;
  color: var(--text-soft);
}

.ipaBuyBtnModern {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: all 0.15s ease;
}

.ipaBuyBtnModern:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.ipaBuyBtnModern svg {
  width: 14px;
  height: 14px;
}

.ipaUnlockedBoxModern {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ipaUnlockedHeaderModern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.ipaUnlockedBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.5px;
}

.ipaUnlockedBadge svg {
  width: 16px;
  height: 16px;
}

.ipaRemainingPill {
  font-size: 11.5px;
  font-weight: 650;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.ipaDownloadButtonsModern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ipaBigBtnInstall, .ipaBigBtnIpa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  text-decoration: none;
}

.ipaBigBtnInstall {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.ipaBigBtnInstall:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.ipaBigBtnIpa {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--text-main);
}

.ipaBigBtnIpa:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.ipaBigBtnInstall svg, .ipaBigBtnIpa svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.ipaBtnLabelCol {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ipaBtnMainText {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.ipaBtnSubText {
  font-size: 11px;
  opacity: 0.85;
}

.ipaSectionTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 750;
  color: var(--text-main);
  margin: 0 0 14px;
  letter-spacing: -0.2px;
}

.ipaSectionTitle svg {
  width: 18px;
  height: 18px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.ipaSpecsGridSection,
.ipaGuideSection,
.ipaDescCard,
.ipaMediaSection {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}

.ipaModernSpecsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ipaModernSpecItem {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.specItemLabel {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.specItemValue {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  word-break: break-all;
}

.monoSpec {
  font-family: var(--term-font, monospace);
}

.emeraldSpec {
  color: #10b981;
}

.ipaGuideStepsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ipaStepCard {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ipaStepNumber {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.ipaStepContent {
  flex: 1;
}

.ipaStepContent h3 {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text-main);
  margin: 0 0 6px;
}

.ipaStepContent p {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

.ipaDescText {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}

.ipaVideoStage {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000000;
  border: 1px solid var(--border-subtle);
  aspect-ratio: 16/9;
}

.ipaVideoStage iframe,
.ipaVideoStage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ipaGalleryCountBadge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

.ipaGalleryNavBtn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ipaGalleryNavBtn svg {
  width: 14px;
  height: 14px;
}

.ipaGalleryNavBtn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-hover);
}

.ipaDemoStage {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 480px;
}

.ipaDemoStage img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  display: block;
}

.ipaCarouselProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.ipaCarouselBar {
  height: 100%;
  background: var(--accent-primary);
  width: 0%;
  transition: width 0.1s linear;
}

.ipaThumbStrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px 4px;
  scrollbar-width: thin;
}

.ipaThumbBtn {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  overflow: hidden;
  background: var(--bg-surface);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s ease;
}

.ipaThumbBtn.active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.ipaThumbBtn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ipaThumbIndex {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 9px;
  font-weight: 750;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 1px 4px;
  border-radius: 3px;
}

/* =====================================================================
 * ADMIN KEY VAULT & IPA ADMIN KEY CARDS (admin.php)
 * ===================================================================== */
.ipaKeysList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.akVaultCard {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.akVaultCard:hover {
  border-color: var(--border-hover);
}

.akVaultCard.isVipCard {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.04) 0%, var(--bg-card) 100%);
}

.akVaultCard.expired {
  opacity: 0.65;
  border-color: rgba(239, 68, 68, 0.25);
}

.akVaultTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.akCodeArea {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}

.akPulseDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.akPulseDot.green {
  background: var(--accent-emerald);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.akPulseDot.amber {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.akPulseDot.red {
  background: var(--accent-danger);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.akCode {
  font-family: var(--term-font, monospace);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.5px;
  cursor: pointer;
}

.akCopyIconBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.15s ease;
}

.akCopyIconBtn:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.akBadgeTags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.akTag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tagDynamic {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.tagStatic {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.tagV2On {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tagV2Off {
  background: rgba(148, 163, 184, 0.1);
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.tagActive {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.tagExpired {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.akMetricsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.akMetricItem {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mLabel {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mVal {
  font-size: 13px;
  font-weight: 750;
  font-family: var(--term-font, monospace);
}

.mVal.mRed {
  color: #ef4444;
}

.mVal.mGreen {
  color: #10b981;
}

.mVal.mCyan {
  color: #38bdf8;
}

.mVal.mPlain {
  color: var(--text-main);
}

.mVal small {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.mSub {
  font-size: 10.5px;
  color: var(--text-soft);
  margin-top: 1px;
}

.akPermsSummaryRow {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.akNoteRow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-soft);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

.akNoteRow svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.akBottomActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.akLeftActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.akActionBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--border-card);
  background: var(--bg-surface);
  color: var(--text-main);
}

.akActionBtn svg {
  flex-shrink: 0;
}

.akBtnEdit:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-hover);
}

.akBtnV2 {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
}

.akBtnV2:hover {
  background: rgba(56, 189, 248, 0.15);
}

.akBtnV2.active {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #38bdf8;
}

.akBtnVip {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}

.akBtnVip:hover {
  background: rgba(251, 191, 36, 0.18);
}

.akBtnVip.active {
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

.akBtnReset {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
}

.akBtnReset:hover {
  background: rgba(245, 158, 11, 0.15);
}

.akBtnDel {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
  margin-left: auto;
}

.akBtnDel:hover {
  background: var(--accent-danger);
  color: #ffffff;
  border-color: var(--accent-danger);
}

.deviceLockBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.deviceLockBadge.locked {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.deviceLockBadge.unlocked {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.ipaKeyItem {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  transition: border-color 0.15s ease;
}

.ipaKeyItem:hover {
  border-color: var(--border-hover);
}

.ipaKeyCodeBtn {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font-family: var(--term-font, monospace);
  font-size: 13px;
  font-weight: 750;
  color: var(--accent-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ipaKeyCodeBtn:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.ipaKeyMeta {
  font-size: 11.5px;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ipaKeyActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ipaKeyResetBtn {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ipaKeyResetBtn:hover {
  background: #f59e0b;
  color: #ffffff;
}

.ipaKeyDelBtn {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--accent-danger);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ipaKeyDelBtn:hover {
  background: var(--accent-danger);
  color: #ffffff;
}

/* =====================================================================
 * RESPONSIVE MOBILE REFINEMENTS (MAX-WIDTH: 768px)
 * Complete Mobile Stabilization for Admin Console, IPA Vault & Modals
 * ===================================================================== */
@media (max-width: 768px) {
  /* Page Main & Admin Page Wrap */
  .pageMain, .adminPageWrap {
    padding: 10px 8px 60px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Admin Auth Gate (Before Login) */
  .adminAuthGate {
    margin: 20px auto !important;
    padding: 0 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .adminGateCard {
    padding: 20px 14px !important;
    border-radius: var(--radius-lg) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Standalone Admin Console Main Box */
  .standaloneAdminConsole, #adminPanel {
    padding: 14px 12px !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Admin Panel Head */
  .adminPanelHead {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .adminHeadInfo {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .adminKicker {
    font-size: 9.5px !important;
    padding: 2.5px 7px !important;
    display: inline-block !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }

  .adminHeadInfo h2, #adminPanelTitle {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 6px 0 4px !important;
    word-break: break-word !important;
  }

  .adminHeadInfo p, #adminPanelDesc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: var(--text-soft) !important;
    word-break: break-word !important;
    margin: 0 !important;
  }

  .adminPanelActions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .adminStatusMeta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .adminStatus, .adminExpiryBadge {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
  }

  .adminActionBtnsRow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .adminPortalLinkBtn, .adminGhostBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    font-size: 11.5px !important;
    padding: 0 6px !important;
    width: 100% !important;
    border-radius: var(--radius-sm) !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .adminPortalLinkBtn svg, .adminGhostBtn svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
  }

  /* Admin Mode Switch (Tabs) */
  .adminModeSwitch {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 2px 0 8px !important;
    margin-bottom: 12px !important;
  }

  .adminModeSwitch::-webkit-scrollbar {
    display: none !important;
  }

  .adminSwitchBtn {
    height: 32px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }

  .adminSwitchBtn svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Admin Grid & Modules */
  .adminGrid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .adminModule {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 12px !important;
    border-radius: var(--radius-md) !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .moduleTitle {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .moduleTitle b {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
  }

  .moduleTitle span {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  .secureBadge {
    align-self: flex-start !important;
  }

  /* Tab 1: Upload & Export Controls */
  .dropzone {
    padding: 16px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    gap: 6px !important;
  }

  .dropIcon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .dropIcon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .dropzone strong {
    font-size: 12px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .dropzone span {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  #adminUploadBtn, #adminRandomBtn {
    width: 100% !important;
    height: 38px !important;
    font-size: 12px !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: var(--radius-sm) !important;
  }

  .adminControls {
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 10px !important;
  }

  .adminControls .field {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .adminControls .fieldInline {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .adminControls .fieldInline input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 36px !important;
    font-size: 12.5px !important;
    box-sizing: border-box !important;
  }

  .adminControls .miniBtn {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
  }

  .adminControls select {
    width: 100% !important;
    height: 36px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  /* Tab 2: Tạo Key Admin */
  .akCreateContainer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .akFormGroup {
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .akGroupHeader {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .akGroupStep {
    width: 20px !important;
    height: 20px !important;
    font-size: 10.5px !important;
    flex-shrink: 0 !important;
  }

  .akGroupHeader strong {
    font-size: 12px !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  .akGroupHeader small {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    display: block !important;
  }

  .akFormGrid2 {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .akField {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .akFieldLabel {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  .akField input, .akField select {
    width: 100% !important;
    height: 36px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .akInputIconWrap {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
  }

  .akInputIconWrap input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 34px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .akSubBox {
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-sm) !important;
  }

  .akSubBoxTop {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .akQuickPresetRow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .akPresetChip {
    height: 26px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
    flex-grow: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .akDurationGroup {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .akDurationGroup input {
    width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .akDurationGroup select {
    width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  .akFeatureCard {
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .akFeatureToggleLabel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .akFeatureInfo {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .akFeatureIcon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .akFeatureIcon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .akFeatureTitle {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .akFeatureSub {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    display: block !important;
  }

  .akSubmitBtn {
    width: 100% !important;
    height: 40px !important;
    font-size: 12.5px !important;
    justify-content: center !important;
  }

  /* Admin Key Vault Cards (#akKeysList) */
  .akVaultCard {
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .akVaultTop {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .akCodeArea {
    width: 100% !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .akBadgeTags {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .akMetricsGrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .akBottomActions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .akLeftActions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .akActionBtn {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .akBtnDel {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Tab 3: Cấu hình IPA & Key IPA */
  .ipaPublicShareBox {
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .ipaPublicShareTop {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .ipaPublicShareTop a.miniBtn {
    width: 100% !important;
    height: 32px !important;
    justify-content: center !important;
  }

  .ipaPublicShareDesc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin: 4px 0 8px !important;
  }

  .ipaPublicShareRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .ipaPublicShareRow input {
    width: 100% !important;
    height: 36px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .ipaShareCopyBtn {
    width: 100% !important;
    height: 36px !important;
    justify-content: center !important;
    font-size: 12px !important;
  }

  .ipaAdminFormGrid {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .ipaAdminRow2 {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ipaIconConfigRow {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .ipaIconConfigControls {
    width: 100% !important;
  }

  .ipaAppStoreIcon.sm {
    width: 60px !important;
    height: 60px !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }

  .ipaUploadInline {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .miniUploadBtn {
    width: 100% !important;
    height: 36px !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
  }

  .ipaUploadInline input[type="text"],
  .ipaUploadInline input[type="url"] {
    width: 100% !important;
    height: 36px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .ipaUploadProgressBox {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
  }

  .ipaProgressFooter {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    font-size: 10.5px !important;
  }

  .ipaKeyCreateBox {
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #ipaCreateKeyBtn {
    width: 100% !important;
    height: 38px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }

  #ipaAdminSaveBtn {
    width: 100% !important;
    height: 40px !important;
    font-size: 12.5px !important;
    justify-content: center !important;
  }

  .ipaKeyListHeader {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .ipaKeyItem {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  .ipaKeyActions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .ipaKeyResetBtn,
  .ipaKeyDelBtn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Tab 4: SOC Terminal */
  .socTerminalWindow {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .socTerminalHeader {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .socTerminalTitle {
    font-size: 11px !important;
  }

  .socStatsGrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .socStatCard {
    padding: 8px 10px !important;
  }

  .socStatLabel {
    font-size: 9.5px !important;
  }

  .socStatValue {
    font-size: 15px !important;
  }

  .socToolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .socToolbarLeft {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .socToolbarRight {
    width: 100% !important;
  }

  .socSearchInput {
    width: 100% !important;
    height: 34px !important;
    box-sizing: border-box !important;
  }

  .socBtn {
    width: 100% !important;
    justify-content: center !important;
    height: 34px !important;
    font-size: 11.5px !important;
  }

  /* Edit Key Modal (.akEditSheet) */
  .akEditSheet {
    padding: 16px 12px !important;
    width: 95% !important;
    max-width: 95% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-lg) !important;
  }

  .akEditHeader {
    gap: 8px !important;
  }

  .akEditTitle {
    font-size: 15px !important;
  }

  .akQuickChips {
    gap: 4px !important;
  }

  .akChipBtn {
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }

  /* Modern IPA Frontend (ipa.php) */
  .ipaModernWrap {
    padding: 12px 10px 30px !important;
  }

  .ipaHeroCard {
    padding: 18px 14px !important;
    border-radius: var(--radius-lg) !important;
  }

  .ipaHeroHeader {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .ipaHeroIcon {
    width: 76px !important;
    height: 76px !important;
    border-radius: 18px !important;
  }

  .ipaHeroTitle {
    font-size: 20px !important;
  }

  .ipaHeroSubtitle {
    font-size: 12.5px !important;
  }

  .ipaPillsRow {
    justify-content: center !important;
    gap: 6px !important;
  }

  .ipaKeyInputGroup {
    flex-direction: column !important;
    border-radius: var(--radius-md) !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  .ipaKeyInputPrefix {
    display: none !important;
  }

  .ipaKeyInputGroup input {
    width: 100% !important;
    height: 38px !important;
    text-align: center !important;
  }

  .ipaModernRedeemBtn {
    width: 100% !important;
    height: 40px !important;
  }

  .ipaBuyKeyBar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .ipaBuyBtnModern {
    width: 100% !important;
    justify-content: center !important;
  }

  .ipaDownloadButtonsModern {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ipaModernSpecsGrid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ipaGuideStepsGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ipaSpecsGridSection,
  .ipaGuideSection,
  .ipaDescCard,
  .ipaMediaSection {
    padding: 16px 14px !important;
    border-radius: var(--radius-lg) !important;
  }
}