/* ==========================================================================
   LUI QR CODE STUDIO — CYBERPUNK THEME STYLESHEET
   Matching https://luifierey.my.id (Lui Visual)
   ========================================================================== */

:root {
  --bg-primary: #07090e;
  --bg-surface: #0e1422;
  --bg-surface-glass: rgba(14, 20, 34, 0.85);
  --bg-surface-elevated: #131b2e;

  --neon-orange: #f59e0b;
  --neon-orange-glow: rgba(245, 158, 11, 0.25);
  --neon-cyan: #00f0ff;
  --neon-cyan-glow: rgba(0, 240, 255, 0.35);
  --neon-green: #10b981;
  --neon-green-glow: rgba(16, 185, 129, 0.25);
  --neon-blue: #38bdf8;
  --neon-blue-glow: rgba(56, 189, 248, 0.25);
  --neon-pink: #f43f5e;

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow-orange: rgba(245, 158, 11, 0.35);
  --border-glow-cyan: rgba(0, 240, 255, 0.35);
  --border-glow-green: rgba(16, 185, 129, 0.35);

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-hud: 'Plus Jakarta Sans', sans-serif;
  --font-logo: 'Orbitron', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Global Reset */
/* Global Reset & Hidden Scrollbar */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html, body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

/* Background Effects with 60FPS Ambient Animation */
.bg-grid-overlay {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
  z-index: -2;
  animation: cyberGridDrift 90s linear infinite;
}

@keyframes cyberGridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 38px 38px; }
}

.bg-glow-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transform: translateZ(0);
}

.bg-orb-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.22) 0%, rgba(0, 136, 255, 0.08) 45%, transparent 70%);
  top: -120px;
  left: -80px;
}

.bg-orb-2 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(176, 38, 255, 0.20) 0%, rgba(99, 102, 241, 0.07) 45%, transparent 70%);
  bottom: -100px;
  right: -80px;
}

.bg-orb-3 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.16) 0%, rgba(0, 240, 255, 0.05) 45%, transparent 70%);
  top: 38%;
  right: 25%;
}

@media (max-width: 768px) {
  .hud-nav, .glassmorphism, .hud-bottom-bar, .app-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(14, 16, 26, 0.95) !important;
  }
}

@keyframes floatOrb1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(80px, 60px, 0) scale(1.15);
    opacity: 0.48;
  }
  100% {
    transform: translate3d(-40px, 100px, 0) scale(0.95);
    opacity: 0.32;
  }
}

@keyframes floatOrb2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.30;
  }
  50% {
    transform: translate3d(-90px, -70px, 0) scale(1.18);
    opacity: 0.44;
  }
  100% {
    transform: translate3d(40px, -110px, 0) scale(0.92);
    opacity: 0.28;
  }
}

@keyframes floatOrb3 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.22;
  }
  50% {
    transform: translate3d(-70px, 50px, 0) scale(1.22);
    opacity: 0.34;
  }
  100% {
    transform: translate3d(60px, -40px, 0) scale(0.92);
    opacity: 0.20;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-glow-orb, .bg-grid-overlay {
    animation: none !important;
  }
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Glassmorphism Classes */
.glassmorphism {
  background: var(--bg-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

/* HUD Navigation Bar */
.hud-nav {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 1000;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  padding: 0;
}
.nav-container {
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-group {
  display: flex;
  align-items: center;
}
.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}
.brand-logo-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.75));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.brand-logo-link:hover .brand-logo-img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.95));
}
.logo-circle-glow {
  display: contents;
}
.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-title {
  font-family: var(--font-logo, 'Orbitron', sans-serif);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  display: block;
  white-space: nowrap;
  color: #ffffff;
  line-height: 1.2;
}

.text-gradient {
  color: var(--neon-cyan, #00f0ff);
  background: none;
  -webkit-text-fill-color: initial;
  font-weight: 900;
}
.brand-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--neon-cyan, #00f0ff);
  display: block;
  white-space: nowrap;
  margin-top: 2px;
}
.brand-sub-author {
  color: #ffffff;
}

.hud-status-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-pill, .privacy-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-pill { color: var(--neon-cyan); border-color: rgba(0, 240, 255, 0.3); }
.privacy-pill { color: var(--neon-green); border-color: rgba(0, 255, 136, 0.3); }

/* Tool Dropdown Menu */
.tool-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.tool-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 13, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f0f4fc;
  padding: 6px 14px;
  border-radius: 10px;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 38px;
}
.tool-dropdown-btn:hover, .tool-dropdown-wrap.open .tool-dropdown-btn {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
  color: #fff;
}
.tool-dropdown-btn .dropdown-arrow {
  font-size: 0.65rem;
  transition: transform 0.25s ease;
}
.tool-dropdown-wrap.open .dropdown-arrow {
  transform: rotate(180deg);
}
.tool-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: rgba(10, 13, 24, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.15);
  z-index: 1000;
  animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-dropdown-wrap.open .tool-dropdown-menu {
  display: block;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dropdown-header {
  padding: 6px 12px 8px;
  font-size: 0.65rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 800;
  color: var(--text-dim, #8e9bb8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #f0f4fc;
  transition: all 0.18s ease;
}
.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(3px);
  color: #fff;
}
.dropdown-item.active {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
}
.dropdown-item i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  color: var(--neon-cyan) !important;
}
.dropdown-item-title {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.dropdown-item-desc {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.68rem;
  color: #8e9bb8;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-sawer-nav, .btn-support-nav {
  height: 38px;
  background: rgba(0, 240, 255, 0.08);
  border: 1.5px solid var(--neon-cyan);
  color: var(--neon-cyan);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  text-decoration: none;
}
.btn-sawer-nav i, .btn-support-nav i {
  color: var(--neon-cyan) !important;
  transition: color 0.2s ease;
}
.btn-sawer-nav:hover, .btn-support-nav:hover {
  background: var(--neon-cyan);
  color: #07090e;
  box-shadow: 0 0 18px var(--neon-cyan-glow);
  transform: translateY(-1px);
}
.btn-sawer-nav:hover i, .btn-support-nav:hover i {
  color: #07090e !important;
}
.btn-back-main, .btn-nav-back {
  height: 38px;
  width: 38px;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 0.88rem;
  border-radius: 8px;
  border: 1.5px solid var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-back-main:hover, .btn-nav-back:hover {
  background: var(--neon-cyan);
  color: #07090e;
  box-shadow: 0 0 18px var(--neon-cyan-glow);
  transform: translateY(-1px);
}

/* Hero Section (Matching bgremove / Lui Visual Standard) */
.hero-section {
  padding: 24px 0 20px;
  text-align: center;
}
.hero-title {
  font-family: var(--font-hud);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #fff 40%, var(--neon-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient {
  color: var(--neon-cyan);
  background: none;
  -webkit-text-fill-color: initial;
}
.hero-subtitle {
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 24px auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Workspace Grid */
.qr-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 24px;
  align-items: start;
}

/* Config Cards */
.config-card {
  position: relative;
  z-index: 10;
  padding: 24px;
}
.config-card:first-child {
  z-index: 25;
}
.config-card:has(.cyber-dropdown.open),
.config-card.has-open-dropdown {
  z-index: 150 !important;
}

.dynamic-input-container {
  position: relative;
  z-index: 5;
}

.input-form-panel {
  display: none;
  position: relative;
  z-index: 5;
}
.input-form-panel.active {
  display: block;
}
.card-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.card-header-title {
  font-family: var(--font-hud);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
}

.btn-mini-cyber {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--neon-cyan);
  font-family: var(--font-hud);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.btn-mini-cyber i {
  font-size: 0.8rem;
  color: var(--neon-cyan);
  transition: transform 0.25s ease;
}
.btn-mini-cyber:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 14px var(--neon-cyan-glow);
  transform: translateY(-1px);
}
.btn-mini-cyber:hover i {
  transform: rotate(180deg) scale(1.1);
}
.btn-mini-cyber:active {
  transform: scale(0.96);
}

/* Data Type Tabs Grid - Clean & Balanced */
.data-types-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.type-tab {
  flex: 1 1 calc(25% - 8px);
  min-width: 105px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 9px 12px;
  font-family: var(--font-hud);
  font-size: 0.74rem;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px;
}
.type-tab i {
  font-size: 0.95rem;
}
.type-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.type-tab.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

/* Customizer Sub-Tabs Navigation (Clean & uncluttered) */
.customizer-tabs-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  margin-top: 14px;
  margin-bottom: 16px;
}
.customizer-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-hud);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.customizer-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.customizer-tab-btn.active {
  background: rgba(0, 240, 255, 0.14);
  color: #fff;
  border-color: rgba(0, 240, 255, 0.38);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
}
.customizer-subpanel {
  animation: fadeInPanel 0.22s ease-out;
}
@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dynamic Input Forms */
.input-form-panel {
  display: none;
}
.input-form-panel.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

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

.form-label {
  font-family: var(--font-hud);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  display: block;
  letter-spacing: 0.5px;
}
.form-label i { color: var(--neon-cyan); margin-right: 4px; }

.form-label-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
  font-family: var(--font-mono);
}

.input-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 6px;
}

.input-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.input-glow-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 14px;
  color: var(--neon-cyan);
  font-size: 0.9rem;
  pointer-events: none;
}
.input-glow-group .cyber-input {
  padding-left: 40px;
}

.cyber-input, .cyber-textarea, .cyber-select {
  width: 100%;
  background: rgba(6, 9, 18, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
  min-height: 44px;
}
.cyber-textarea {
  min-height: 75px;
  resize: vertical;
}
.cyber-select {
  cursor: pointer;
}
.cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan-glow);
  background: rgba(8, 12, 24, 0.95);
}

/* Custom Cyber Dropdowns */
.cyber-dropdown {
  position: relative;
  width: 100%;
}
.cyber-dropdown.open {
  z-index: 250;
}

.cyber-dropdown-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(6, 9, 18, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  outline: none;
}

.cyber-dropdown-trigger:hover {
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(10, 15, 30, 0.92);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.12);
}

.cyber-dropdown.open .cyber-dropdown-trigger {
  border-color: var(--neon-cyan);
  background: rgba(10, 16, 32, 0.98);
  box-shadow: 0 0 14px var(--neon-cyan-glow);
}

.cyber-dropdown-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyber-dropdown-value i {
  font-size: 0.85rem;
  color: var(--neon-cyan);
  flex-shrink: 0;
}

.dropdown-arrow {
  color: var(--neon-cyan);
  font-size: 0.78rem;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-left: 8px;
}

.cyber-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.cyber-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 300;
  background: rgba(8, 12, 24, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 240, 255, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cyber-dropdown.open .cyber-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cyber-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  position: relative;
}

.cyber-dropdown-item i:first-child {
  font-size: 0.85rem;
  color: var(--neon-cyan);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.cyber-dropdown-item:hover {
  background: rgba(0, 240, 255, 0.1);
  color: #fff;
  transform: translateX(3px);
}

.cyber-dropdown-item.active {
  background: rgba(0, 240, 255, 0.18);
  color: #fff;
  font-weight: 600;
  border-left: 2px solid var(--neon-cyan);
}

.item-check {
  margin-left: auto;
  color: var(--neon-cyan);
  font-size: 0.82rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cyber-dropdown-item.active .item-check {
  opacity: 1;
}

.cyber-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  min-height: 38px;
}
.cyber-checkbox-label input[type="checkbox"] {
  display: none;
}
.checkbox-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: rgba(6, 9, 18, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.cyber-checkbox-label input[type="checkbox"]:checked + .checkbox-box {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan-glow);
}
.cyber-checkbox-label input[type="checkbox"]:checked + .checkbox-box::after {
  content: '✓';
  color: #000;
  font-weight: 900;
  font-size: 11px;
}

/* Cyber Toggle Switches */
.color-options-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.cyber-switch-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  background: rgba(6, 9, 18, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 30px;
  padding: 6px 14px 6px 8px;
  min-height: 44px;
  transition: all 0.25s ease;
}
.cyber-switch-wrap:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(12, 16, 30, 0.9);
}
.cyber-switch-wrap input[type="checkbox"] {
  display: none;
}
.cyber-switch-slider {
  position: relative;
  width: 42px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.cyber-switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.cyber-switch-wrap input[type="checkbox"]:checked + .cyber-switch-slider {
  background: rgba(0, 240, 255, 0.25);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan-glow);
}
.cyber-switch-wrap input[type="checkbox"]:checked + .cyber-switch-slider::after {
  transform: translateX(20px);
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}
.cyber-switch-label {
  font-family: var(--font-hud);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

/* Theme Presets */
.theme-presets-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.theme-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 6px 12px;
  color: var(--text-muted);
  font-family: var(--font-hud);
  font-size: 0.74rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.2s ease;
}
.color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.theme-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.theme-pill.active {
  border-color: var(--neon-cyan);
  color: #fff;
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 10px var(--neon-cyan-glow);
}

/* Color Picker Row */
.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.color-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 9, 18, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 4px 8px;
  min-height: 44px;
}
.color-picker-native {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.color-hex-text {
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  width: 100%;
  outline: none;
}

/* Style Selector Grid (Dots) */
.style-selector-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.style-choice {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 10px 4px;
  font-family: var(--font-hud);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-height: 52px;
  transition: all 0.2s ease;
}
.style-choice i { font-size: 1.1rem; }
.style-choice:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.style-choice.active {
  background: rgba(255, 102, 0, 0.12);
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  box-shadow: 0 0 12px var(--neon-orange-glow);
}

/* Logo Presets Row */
.logo-presets-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.logo-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 6px 12px;
  color: var(--text-muted);
  font-family: var(--font-hud);
  font-size: 0.74rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.2s ease;
}
.logo-pill-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.logo-pill:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.logo-pill.active {
  border-color: var(--neon-green);
  color: #fff;
  background: rgba(0, 255, 136, 0.12);
  box-shadow: 0 0 10px var(--neon-green-glow);
}

.logo-pill-upload {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.05);
  color: var(--neon-cyan);
}
.logo-pill-upload:hover {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.15);
  color: #fff;
  box-shadow: 0 0 12px var(--neon-cyan-glow);
}
.logo-pill-upload.active {
  border-color: var(--neon-cyan);
  color: #fff;
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 14px var(--neon-cyan-glow);
}

.custom-logo-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(6, 9, 18, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 6px 12px;
}
.logo-thumb-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}
.logo-filename {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-main);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-remove-logo {
  background: transparent;
  border: none;
  color: #ff3344;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
}

/* Range Inputs */
.cyber-range {
  width: 100%;
  accent-color: var(--neon-cyan);
  cursor: pointer;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

/* RIGHT COLUMN: PREVIEW STAGE */
.preview-sticky-card {
  position: sticky;
  top: 85px;
  padding: 24px;
}
.preview-live-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--neon-green);
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Holographic QR Display Stage */
.qr-display-stage {
  background: #080c16;
  border: 1px solid var(--border-glow-cyan);
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 24px rgba(0, 240, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 330px;
}
.qr-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.qr-canvas-container canvas, .qr-canvas-container svg {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  transition: transform 0.2s ease;
}

.qr-stage-hud {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}
.hud-scannable { color: var(--neon-cyan); }

/* Quick Utilities Toolbar - Clean & Balanced */
.preview-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 4px;
}
.btn-quick-util {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--font-hud);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 8px 4px;
  cursor: pointer;
  min-height: 38px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-quick-util i {
  font-size: 0.88rem;
  color: var(--neon-cyan);
  transition: transform 0.2s ease;
}
.btn-quick-util:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.btn-quick-util:hover i {
  transform: scale(1.15);
}

.btn-standard-util:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.badge-lock-member {
  font-size: 0.62rem;
  font-family: var(--font-hud);
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}

/* Resolution Pills */
.res-button-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.btn-res-pill {
  background: rgba(6, 9, 18, 0.9);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px;
  cursor: pointer;
  min-height: 36px;
  transition: all 0.15s ease;
}
.btn-res-pill:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.btn-res-pill.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

/* Download Buttons Grid */
.download-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.download-sub-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.btn-download-primary {
  width: 100%;
  background: var(--neon-cyan);
  color: #07090e;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 20px var(--neon-cyan-glow);
  transition: all 0.2s ease;
}
.btn-download-primary:hover, .btn-glow-cyan:hover {
  background: #33f3ff;
  color: #000;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.6);
  transform: translateY(-2px);
}
.btn-download-secondary {
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  font-family: var(--font-hud);
  font-size: 0.76rem;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-glow-green:hover {
  background: rgba(0, 255, 136, 0.22);
  box-shadow: 0 0 16px var(--neon-green-glow);
  transform: translateY(-1px);
}
.btn-download-tertiary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-family: var(--font-hud);
  font-size: 0.76rem;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-download-tertiary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.privacy-note-card {
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.privacy-note-card i {
  font-size: 1.1rem;
  margin-top: 2px;
}

/* Feature Row */
.qr-features-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}
.qr-feature-card {
  padding: 24px;
}
.feat-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-subtle);
}
.neon-cyan-border { border-color: var(--neon-cyan); box-shadow: 0 0 12px var(--neon-cyan-glow); }
.neon-green-border { border-color: var(--neon-green); box-shadow: 0 0 12px var(--neon-green-glow); }
.neon-orange-border { border-color: var(--neon-orange); box-shadow: 0 0 12px var(--neon-orange-glow); }

.feat-title {
  font-family: var(--font-hud);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.feat-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Footer */
.hud-footer {
  border-top: 1px solid var(--border-subtle);
  background: rgba(5, 7, 14, 0.95);
  padding: 24px 0;
  margin-top: 40px;
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}
.footer-copy {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.footer-links {
  display: flex;
  gap: 16px;
}
.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--neon-cyan); }

/* ==========================================================================
   CYBERPUNK MODAL SYSTEM (AUTH, QRIS, LOGOUT & DIALOGS)
   ========================================================================== */
.cyber-modal-backdrop, .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-modal-backdrop.open, .modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.cyber-modal-card, .modal-card {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: rgba(8, 12, 24, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 240, 255, 0.25);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.cyber-modal-backdrop.open .cyber-modal-card,
.modal-backdrop.open .modal-card {
  transform: scale(1);
}

.auth-modal-card {
  max-width: 460px;
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.35);
}
.modal-title-group, .modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.modal-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
  letter-spacing: 0.8px;
}
.modal-headline, .modal-title {
  font-family: var(--font-hud);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0;
}
.modal-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.modal-close-btn:hover {
  background: rgba(255, 51, 0, 0.25);
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  box-shadow: 0 0 16px var(--neon-orange-glow);
  transform: rotate(90deg);
}

.modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.auth-modal-body {
  padding: 18px 22px;
}

.auth-notice-box {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--neon-cyan);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  line-height: 1.45;
}

.auth-tab-switch {
  display: flex;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  margin-bottom: 18px;
  gap: 4px;
}
.auth-tab-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-hud);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.auth-tab-btn.active {
  background: rgba(0, 240, 255, 0.18);
  color: #fff;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.auth-form-pane {
  display: none;
}
.auth-form-pane.active {
  display: block;
}

.form-group {
  margin-bottom: 14px;
  text-align: left;
}
.form-group .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.form-group .form-label i {
  font-size: 0.8rem;
}
.form-group .cyber-input {
  width: 100%;
  background: rgba(4, 7, 16, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
  transition: all 0.2s ease;
}
.form-group .cyber-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.form-group .cyber-input:focus {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.04);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
}

.cyber-input.is-valid {
  border-color: var(--neon-green) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.35) !important;
}
.cyber-input.is-invalid {
  border-color: #ff3344 !important;
  box-shadow: 0 0 10px rgba(255, 51, 68, 0.35) !important;
}

/* Password Visibility Toggle */
.password-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.password-input-wrapper .cyber-input {
  padding-right: 40px !important;
}

.btn-toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  padding: 0;
}

.btn-toggle-password:hover {
  color: var(--neon-cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.12);
}

.btn-toggle-password:focus-visible {
  outline: 1px solid var(--neon-cyan, #00f0ff);
  color: var(--neon-cyan, #00f0ff);
}
.live-feedback {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  min-height: 16px;
}
.live-feedback.valid { color: var(--neon-green); }
.live-feedback.invalid { color: #ff6677; }

.auth-sub-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
}
.auth-sub-hint a {
  text-decoration: none;
  font-weight: 700;
}
.auth-sub-hint a:hover {
  text-decoration: underline;
}

/* Modal Action Buttons */
.btn-primary-neon {
  background: linear-gradient(135deg, #00f0ff, #0066ff);
  color: #000000 !important;
  font-family: var(--font-hud);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 44px;
}
.btn-primary-neon:hover {
  box-shadow: 0 0 20px var(--neon-cyan-glow);
  transform: translateY(-1px);
}
.btn-glow-green {
  background: linear-gradient(135deg, #00ff88, #00a855) !important;
  color: #000000 !important;
}
.btn-glow-green:hover {
  box-shadow: 0 0 20px var(--neon-green-glow) !important;
}
.btn-glow-cyan {
  background: linear-gradient(135deg, #00f0ff, #0099ff) !important;
  color: #000000 !important;
}
.btn-glow-cyan:hover {
  box-shadow: 0 0 20px var(--neon-cyan-glow) !important;
}

.btn-outline-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-family: var(--font-hud);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  min-height: 42px;
  transition: all 0.15s ease;
}
.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn-outline-orange {
  background: rgba(255, 51, 0, 0.1);
  border: 1px solid var(--neon-orange);
  color: var(--neon-orange);
  font-family: var(--font-hud);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  min-height: 42px;
  transition: all 0.15s ease;
}
.btn-outline-orange:hover {
  background: rgba(255, 51, 0, 0.22);
  box-shadow: 0 0 16px var(--neon-orange-glow);
}

/* User Logged Navbar Pill & Dropdown */
.user-logged-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.user-avatar-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.35);
  padding: 5px 12px;
  border-radius: 30px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}
.user-avatar-pill:hover,
.user-avatar-pill.active {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
}
.user-first-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  max-width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-caret {
  font-size: 0.62rem;
  color: var(--neon-cyan);
  transition: transform 0.2s ease;
}
.user-avatar-pill.active .dropdown-caret {
  transform: rotate(180deg);
}

/* User Dropdown Floating Menu */
.user-dropdown-menu {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 100000;
  background: rgba(8, 12, 24, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 240, 255, 0.2);
  border-radius: 14px;
  padding: 14px;
  width: 250px;
  display: none;
  flex-direction: column;
  gap: 6px;
  animation: udmFadeIn 0.2s ease;
}
.user-dropdown-menu.show {
  display: flex;
}
@keyframes udmFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.udm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}
.udm-avatar-circle {
  font-size: 1.8rem;
  color: var(--neon-green);
}
.udm-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.udm-name {
  font-family: var(--font-hud);
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udm-email {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udm-role-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--neon-green);
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.udm-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}
.udm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--font-body);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}
.udm-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.udm-item-logout:hover {
  background: rgba(255, 51, 0, 0.15);
  color: var(--neon-orange);
}

/* QRIS Modal Details */
.modal-qris-card {
  max-width: 440px;
}
.qris-img-wrap {
  margin: 16px auto;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  width: fit-content;
}
.qris-img {
  max-width: 210px;
  height: auto;
  display: block;
}
.qris-info-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.badge-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 8px;
  border-radius: 6px;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  margin-top: 16px;
}

/* Helpers */
.d-none { display: none !important; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.text-center { text-align: center; }
.neon-cyan { color: var(--neon-cyan); }
.neon-orange { color: var(--neon-orange); }
.neon-green { color: var(--neon-green); }
.neon-pink { color: var(--neon-pink); }
.text-green { color: #00ff88; }
.text-orange { color: #ff6600; }
.text-red { color: #ff3344; }

/* Pulse Animation */
.pulse-dot {
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* ========================================================================== */
/* VJ MOTION DESIGN SUITE (STAGE-GRADE PHYSICS & TACTILE MICRO-INTERACTIONS) */
/* ========================================================================== */

/* Fixed FX Layer for Tactile Click Shockwaves */
#vj-fx-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  overflow: hidden;
  contain: layout size paint;
}

.vj-laser-shockwave {
  position: absolute;
  top: var(--vj-y, 0px);
  left: var(--vj-x, 0px);
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  pointer-events: none;
  contain: layout paint;
  will-change: transform, opacity;
}

.vj-shockwave-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--vj-fx-color, var(--neon-cyan));
  box-shadow: 0 0 6px var(--vj-fx-color, var(--neon-cyan));
  animation: vjRingPulse 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vj-shockwave-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vj-fx-color, var(--neon-cyan));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px var(--vj-fx-color, var(--neon-cyan));
  animation: vjCoreFade 0.22s ease-out forwards;
}

@keyframes vjRingPulse {
  0% { transform: scale(0.25); opacity: 0.85; border-width: 1.8px; }
  100% { transform: scale(1.15); opacity: 0; border-width: 1px; }
}

@keyframes vjCoreFade {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
}

/* Stage Materialization */
.vj-materialize {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  filter: blur(5px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--vj-stagger, 0) * 60ms);
  will-change: opacity, transform, filter;
}

.vj-materialize.vj-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* 3D Holographic Card Tilt */
.vj-holo-tilt {
  transform-style: preserve-3d;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  position: relative;
  isolation: isolate;
}

.vj-holo-tilt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: var(--vj-glint-opacity, 0);
  background: radial-gradient(
    circle 240px at var(--vj-glint-x, 50%) var(--vj-glint-y, 50%),
    rgba(255, 255, 255, 0.14) 0%,
    rgba(0, 240, 255, 0.1) 30%,
    transparent 75%
  );
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
}

/* Button & Tab Active Press Feedback */
button:active,
.btn-download-primary:active,
.btn-download-secondary:active,
.type-tab:active,
.style-choice:active,
.theme-pill:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.type-tab.active, .style-choice.active {
  animation: vjTabSpring 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vjTabSpring {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Responsive Mobile Rules (< 992px & < 768px) */
@media (max-width: 992px) {
  .qr-workspace-grid {
    grid-template-columns: 1fr;
  }
  .preview-sticky-card {
    position: static;
  }
  .data-types-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .qr-features-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .nav-container {
    padding: 10px 14px;
  }
  .hud-status-center {
    display: none;
  }
  .data-types-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .style-selector-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .color-picker-grid {
    grid-template-columns: 1fr;
  }
  .input-row-2 {
    grid-template-columns: 1fr;
  }
  .qr-hero-banner {
    padding: 20px 14px;
    margin: 16px auto;
  }
  .qr-main-title {
    font-size: 1.55rem;
  }
  .config-card {
    padding: 16px 14px;
  }
  .download-buttons-grid {
    grid-template-columns: 1fr;
  }
  .btn-download-primary {
    grid-column: span 1;
  }
  .preview-quick-actions {
    grid-template-columns: 1fr;
  }
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  .footer-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .brand-sub { display: none; }
  .brand-title { font-size: 1rem; }
  .style-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #vj-fx-layer { display: none !important; }
  .vj-materialize { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .vj-holo-tilt { transform: none !important; }
  .pulse-dot { animation: none !important; }
}

/* ========================================================================== */
/* AUTHENTICATION & USER SESSION STYLES                                       */
/* ========================================================================== */
.btn-standard-util {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.btn-standard-util:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.5) !important;
}

.badge-lock-member {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  font-weight: 800;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
}

.btn-outline-cyan {
  background: transparent;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--font-hud);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  transition: all 0.2s ease;
}
.btn-outline-cyan:hover,
.btn-glow-cyan:hover {
  background: rgba(0, 240, 255, 0.15);
  box-shadow: 0 0 12px var(--neon-cyan-glow);
  color: #fff;
}

.user-logged-badge {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.user-avatar-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 9, 18, 0.85);
  border: 1px solid rgba(0, 255, 136, 0.4);
  border-radius: 20px;
  padding: 5px 12px;
  color: #fff;
  font-family: var(--font-hud);
  font-size: 0.78rem;
  font-weight: 700;
  transition: all 0.2s ease;
  min-height: 40px;
}
.user-avatar-pill:hover {
  border-color: var(--neon-green);
  box-shadow: 0 0 12px var(--neon-green-glow);
  background: rgba(0, 255, 136, 0.12);
}
.user-first-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-caret {
  font-size: 0.7rem;
  color: var(--neon-green);
}

/* User Dropdown Menu */
.user-dropdown-menu {
  position: fixed;
  top: 72px;
  right: 20px;
  width: 270px;
  background: rgba(8, 12, 22, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 240, 255, 0.15);
  border-radius: 12px;
  padding: 14px;
  z-index: 100000;
  display: none;
  flex-direction: column;
  gap: 8px;
  animation: userMenuSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.user-dropdown-menu.open {
  display: flex;
}
@keyframes userMenuSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.udm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}
.udm-avatar-circle {
  font-size: 1.8rem;
  color: var(--neon-green);
  flex-shrink: 0;
}
.udm-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.udm-name {
  font-family: var(--font-hud);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udm-email {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udm-role-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--neon-green);
  background: rgba(102, 255, 0, 0.12);
  border: 1px solid rgba(102, 255, 0, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
  width: fit-content;
  margin-top: 3px;
  letter-spacing: 0.5px;
}
.udm-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}
.udm-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.udm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.82rem;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.udm-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.udm-item-logout:hover {
  background: rgba(255, 51, 0, 0.12);
  color: var(--neon-orange);
}

/* Cyber Modal System */
.cyber-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}
.cyber-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.cyber-modal-card {
  background: rgba(8, 12, 24, 0.98);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.15);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  animation: cyberModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cyberModalPop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.modal-badge-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-notice-box {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--neon-cyan);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.auth-tab-switch {
  display: flex;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-subtle);
  padding: 3px;
  margin-bottom: 16px;
  gap: 4px;
}
.auth-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-hud);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.auth-tab-btn.active {
  background: rgba(0, 240, 255, 0.2);
  color: #fff;
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.auth-form-pane {
  display: none;
}
.auth-form-pane.active {
  display: block;
}

.form-group {
  margin-bottom: 12px;
  text-align: left;
}
.form-group .form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.live-feedback {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 16px;
}
.live-feedback.valid { color: var(--neon-green); }
.live-feedback.invalid { color: #ff5566; }

.auth-sub-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
}
.auth-sub-hint a {
  text-decoration: none;
  font-weight: 600;
}
.auth-sub-hint a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   DYNAMIC QRIS CONVERTER & STANDEE STYLES
   ========================================================================== */

.qris-header-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.qris-header-badge .neon-badge {
  font-family: var(--font-hud);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qris-sub-badge {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* QRIS Dropzone */
.qris-upload-zone {
  border: 2px dashed rgba(0, 240, 255, 0.3);
  background: rgba(0, 240, 255, 0.03);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.25s ease;
  position: relative;
  cursor: pointer;
}
.qris-upload-zone:hover,
.qris-upload-zone.dragover {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}
.qris-upload-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
  font-size: 1.4rem;
}
.upload-badge-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.75rem;
  background: var(--bg-surface);
  color: var(--neon-green);
  border: 1px solid var(--neon-green);
  border-radius: 50%;
  padding: 3px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qris-upload-title {
  font-family: var(--font-hud);
  font-size: 0.92rem;
  color: #fff;
  margin-bottom: 4px;
}
.qris-upload-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 14px;
}
.qris-upload-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qris-scan-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-top: 10px;
  display: none;
}
.qris-scan-status.loading {
  display: block;
  color: var(--neon-cyan);
}
.qris-scan-status.success {
  display: block;
  color: var(--neon-green);
}
.qris-scan-status.error {
  display: block;
  color: #ff5566;
}

/* Merchant Info Card */
.qris-merchant-card {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(10, 15, 30, 0.85));
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  animation: qrisCardSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes qrisCardSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.qris-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}
.qris-merchant-badge {
  font-family: var(--font-hud);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--neon-green);
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-mini-reset {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.70rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-mini-reset:hover {
  border-color: #ff5566;
  color: #ff5566;
}
.qris-merchant-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.qris-store-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--neon-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.qris-store-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}
.qris-store-nmid {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.qris-store-nmid span {
  color: var(--neon-cyan);
  font-weight: 600;
}
.qris-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
}
.qris-meta-item {
  display: flex;
  flex-direction: column;
}
.meta-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.meta-val {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nominal Input & Quick Pills */
.badge-auto-lock {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}
.badge-auto-lock.locked {
  background: rgba(0, 255, 136, 0.15);
  color: var(--neon-green);
  border-color: rgba(0, 255, 136, 0.4);
}
.input-nominal-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-nominal {
  position: absolute;
  left: 14px;
  font-family: var(--font-hud);
  font-weight: 700;
  color: var(--neon-green);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 2;
}
.nominal-input {
  padding-left: 46px !important;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--neon-green) !important;
  letter-spacing: 0.5px;
}
.btn-clear-nominal {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  font-size: 0.9rem;
  transition: color 0.2s;
  z-index: 2;
  display: none;
}
.btn-clear-nominal:hover {
  color: #ff5566;
}

/* Quick Pills */
.qris-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nominal-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nominal-pill:hover {
  background: rgba(0, 255, 136, 0.12);
  border-color: var(--neon-green);
  color: var(--neon-green);
  transform: translateY(-1px);
}
.nominal-pill.active {
  background: rgba(0, 255, 136, 0.22);
  border-color: var(--neon-green);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
.nominal-pill.pill-reset {
  color: var(--text-muted);
  border-style: dashed;
}
.nominal-pill.pill-reset:hover {
  border-color: #ff5566;
  color: #ff5566;
  background: rgba(255, 85, 102, 0.1);
}

/* Raw Details */
.qris-raw-details {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
}
.qris-raw-details summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  outline: none;
  user-select: none;
}
.qris-raw-details summary:hover {
  color: var(--neon-cyan);
}
.qris-raw-content {
  margin-top: 8px;
}
.raw-qris-textarea {
  font-size: 0.72rem !important;
  font-family: var(--font-mono) !important;
  word-break: break-all;
}
.raw-hint {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  color: var(--text-muted);
}
.btn-copy-raw {
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-size: 0.70rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-copy-raw:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
}

/* Standee Button */
.btn-download-standee {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.25), rgba(255, 0, 127, 0.25));
  border: 1px solid var(--neon-orange);
  color: #fff;
  font-family: var(--font-hud);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  grid-column: 1 / -1;
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.25);
}
.btn-download-standee:hover {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.4), rgba(255, 0, 127, 0.4));
  box-shadow: 0 0 25px rgba(255, 102, 0, 0.5);
  transform: translateY(-2px);
}

/* Standee Modal & Card Layout */
.qris-standee-modal-card {
  max-width: 480px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.qris-standee-modal-body {
  padding: 16px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.standee-preview-scroll {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
}

/* The Printable Standee Card */
.qris-standee-card {
  width: 340px;
  min-height: 520px;
  background: #ffffff;
  color: #111111;
  border-radius: 16px;
  position: relative;
  padding: 24px 20px 20px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  user-select: none;
}

/* Red Geometric Accents */
.standee-corner-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  background: #ee2a24;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.standee-corner-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: #ee2a24;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.standee-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.standee-logo-qris {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}
.standee-qris-bold {
  font-family: 'Arial Black', sans-serif;
  font-size: 1.4rem;
  letter-spacing: -0.5px;
  color: #000;
  font-weight: 900;
}
.standee-qris-sub {
  font-size: 0.46rem;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  max-width: 140px;
}
.standee-logo-gpn {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.gpn-icon {
  color: #ee2a24;
  font-size: 1.4rem;
}
.gpn-text {
  font-family: 'Arial Black', sans-serif;
  font-size: 0.70rem;
  font-weight: 900;
  color: #002d62;
  letter-spacing: 0.5px;
}

/* Standee Nominal */
.standee-amount-box {
  margin: 4px 0 8px 0;
  position: relative;
  z-index: 2;
}
.standee-amount-val {
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.5px;
}

/* Standee Merchant Info */
.standee-merchant-info {
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.standee-merchant-name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.standee-merchant-nmid {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: #444;
}
.standee-merchant-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #777;
  margin-top: 2px;
}

/* Standee QR Frame */
.standee-qr-frame {
  width: 220px;
  height: 220px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.standee-qr-canvas-wrap {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.standee-qr-canvas-wrap canvas,
.standee-qr-canvas-wrap svg {
  width: 220px !important;
  height: 220px !important;
}

/* Standee Footer */
.standee-footer {
  width: 100%;
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.standee-footer-print-info {
  font-size: 0.65rem;
  color: #555;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.standee-footer-slogan {
  display: flex;
  flex-direction: column;
  font-size: 0.68rem;
  color: #333;
  line-height: 1.3;
}
.standee-footer-slogan strong {
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #111;
}

.standee-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hud-nav { min-height: 60px; }
  .nav-container { padding: 0 14px; gap: 8px; }
  .brand-logo-img { width: 28px; height: 28px; }
  .brand-title { font-size: 0.88rem; }
  .brand-sub { font-size: 0.6rem; }
  .nav-actions { gap: 6px; }
  .tool-dropdown-btn { padding: 6px 9px; font-size: 0.74rem; border-radius: 8px; }
  .dropdown-btn-label { display: none; }
  .tool-dropdown-menu { width: 260px; max-width: calc(100vw - 28px); right: 0; }
  .hud-btn-support { padding: 6px 10px; font-size: 0.72rem; }
  .support-label { display: none; }
  .hud-back-btn { width: 34px; height: 34px; border-radius: 8px; }
}

@media (max-width: 480px) {
  .brand-sub { display: none; }
  .brand-title { font-size: 0.84rem; }
}

/* ==========================================================================
   UNIFIED HUD BOTTOM BAR (SUITE FOOTER)
   ========================================================================== */
.hud-bottom-bar {
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-radius: 16px 16px 0 0;
  background: rgba(8, 11, 20, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 0;
  position: relative;
  z-index: 50;
}
.bottom-bar-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.bottom-bar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.bottom-bar-brand strong {
  color: #ffffff;
  font-family: var(--font-hud);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.brand-divider {
  color: var(--text-dim);
}
.brand-suite {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.25);
  color: var(--neon-green, #00ff88);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: 6px;
}
.bottom-bar-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bottom-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-family: var(--font-hud);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.bottom-link:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}
.bottom-link.active {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}
@media (max-width: 860px) {
  .bottom-bar-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .bottom-bar-links {
    justify-content: center;
  }
}