/* ═══════════════════════════════════════════════════════════════
   GeoZakhraf Xhaos Engine v2.0 — styles.css
   Complete Mobile-First Build + POV Exit Button Fix
   ═══════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 1 — DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {

  --bg-deep:          #000008;
  --bg-mid:           #000412;
  --bg-surface:       #000820;

  --glass-bg:         rgba(0, 6, 24, 0.78);
  --glass-bg-hover:   rgba(0, 12, 40, 0.88);
  --glass-border:     rgba(0, 200, 255, 0.15);
  --glass-border-hot: rgba(0, 240, 255, 0.45);
  --glass-blur:       18px;
  --glass-saturate:   170%;

  --cyan:        #00f0ff;
  --cyan-dim:    rgba(0, 240, 255, 0.35);
  --cyan-glow:   rgba(0, 240, 255, 0.20);
  --violet:      #8b00ff;
  --violet-dim:  rgba(139, 0, 255, 0.35);
  --violet-glow: rgba(139, 0, 255, 0.20);
  --gold:        #ffd700;
  --gold-dim:    rgba(255, 215, 0, 0.35);
  --red:         #ff2244;
  --red-dim:     rgba(255, 34, 68, 0.35);
  --green:       #00ff88;
  --green-dim:   rgba(0, 255, 136, 0.35);
  --green-glow:  rgba(0, 255, 136, 0.20);

  --text-bright:  #f0f8ff;
  --text-primary: #c8dff0;
  --text-muted:   rgba(150, 190, 220, 0.55);
  --text-dim:     rgba(100, 140, 170, 0.40);

  --font-mono: 'Courier New', 'Consolas', 'Monaco', monospace;
  --font-ui:   'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --header-h: 52px;
  --bar-h:    72px;
  --panel-w:  265px;
  --sync-w:   168px;

  --r-xl: 18px;
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 5px;
  --r-xs: 3px;

  --shadow-panel:
    0 8px 32px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--glass-border);
  --shadow-glow-cyan:
    0 0 16px var(--cyan-glow),
    0 0 32px rgba(0, 240, 255, 0.08);
  --shadow-glow-violet:
    0 0 16px var(--violet-glow);
  --shadow-glow-green:
    0 0 16px var(--green-glow),
    0 0 32px rgba(0, 255, 136, 0.08);

  --t-fast:   0.14s ease;
  --t-base:   0.26s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   0.5s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.4s  cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-canvas:    1;
  --z-canvas3d:  2;
  --z-ui:        80;
  --z-panel:     90;
  --z-drawer:    95;
  --z-backdrop:  94;
  --z-header:    100;
  --z-mobile-btn:101;
  --z-overlay:   200;
  --z-pov:       155;
  --z-pov-exit:  160;
  --z-flash:     300;
  --z-loader:    9999;

  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 2 — RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*,
*::before,
*::after {
  box-sizing:  border-box;
  margin:      0;
  padding:     0;
}

html {
  height:              100%;
  overflow:            hidden;
  overscroll-behavior: none;
}

body {
  position:               fixed;
  inset:                  0;
  width:                  100%;
  height:                 100%;
  overflow:               hidden;
  overscroll-behavior:    none;
  background:             var(--bg-deep);
  color:                  var(--text-primary);
  font-family:            var(--font-ui);
  font-size:              14px;
  line-height:            1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select:            none;
  -webkit-user-select:    none;
  -webkit-touch-callout:  none;
}

button {
  font-family:                 inherit;
  cursor:                      pointer;
  border:                      none;
  background:                  none;
  outline:                     none;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline:        2px solid var(--cyan);
  outline-offset: 2px;
}

input {
  font-family:                 inherit;
  outline:                     none;
  -webkit-tap-highlight-color: transparent;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 3 — LOADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.loader {
  position:        fixed;
  inset:           0;
  z-index:         var(--z-loader);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  padding:         20px;
  background:      radial-gradient(
                     ellipse at 50% 55%,
                     #000c28 0%,
                     var(--bg-deep) 70%
                   );
  transition:      opacity var(--t-slow);
}

.loader.fade-out {
  opacity:        0;
  pointer-events: none;
}

.loader-logo {
  margin-bottom: 4px;
  animation:     hexSpin 8s linear infinite;
}

.loader-hex     { width: clamp(60px,12vw,90px); height: clamp(60px,12vw,90px); }
.hex-svg        { width: 100%; height: 100%; overflow: visible; }
.hex-outer      { color: var(--cyan); animation: hexPulse 2s ease-in-out infinite alternate; transform-origin: center; }
.hex-inner      { color: var(--violet); opacity: 0.7; }
.hex-letter     { fill: var(--cyan); font-family: var(--font-mono); font-weight: bold; }

.loader-brand {
  font-family:    var(--font-mono);
  font-size:      clamp(1.5rem, 6vw, 3.4rem);
  font-weight:    700;
  letter-spacing: clamp(0.1em, 2vw, 0.22em);
  line-height:    1;
  text-align:     center;
}

.loader-geo     { color: var(--cyan); }
.loader-zakhraf { color: var(--text-bright); }

.loader-engine-tag {
  font-family:    var(--font-mono);
  font-size:      clamp(0.42rem, 1.4vw, 0.62rem);
  letter-spacing: clamp(0.2em, 2vw, 0.45em);
  color:          var(--violet);
  text-transform: uppercase;
  margin-top:     -4px;
}

.loader-integration-badge {
  font-family:    var(--font-mono);
  font-size:      clamp(0.38rem, 1.2vw, 0.55rem);
  letter-spacing: clamp(0.12em, 1.5vw, 0.25em);
  color:          var(--green);
  border:         1px solid var(--green-dim);
  padding:        3px clamp(8px, 2vw, 14px);
  border-radius:  var(--r-xs);
  animation:      badgePulse 2.5s ease-in-out infinite;
  text-align:     center;
  white-space:    nowrap;
  max-width:      90vw;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.loader-status {
  font-family:    var(--font-mono);
  font-size:      clamp(0.52rem, 1.6vw, 0.72rem);
  letter-spacing: clamp(0.08em, 1vw, 0.18em);
  color:          var(--text-muted);
  text-transform: uppercase;
  text-align:     center;
  min-height:     1.2em;
}

.loader-bar-track {
  position:      relative;
  width:         min(340px, 82vw);
  height:        3px;
  background:    rgba(255, 255, 255, 0.06);
  border-radius: var(--r-xs);
  overflow:      visible;
}

.loader-bar-fill {
  position:      absolute;
  top: 0; left: 0;
  height:        100%;
  width:         0%;
  background:    linear-gradient(90deg, var(--violet), var(--cyan));
  border-radius: var(--r-xs);
  transition:    width 0.18s linear;
}

.loader-bar-glow {
  position:       absolute;
  top: -4px; left: 0;
  height:         11px;
  width:          0%;
  background:     linear-gradient(90deg, transparent, var(--cyan), transparent);
  filter:         blur(5px);
  border-radius:  var(--r-xs);
  pointer-events: none;
  transition:     width 0.18s linear;
}

.loader-percent {
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  letter-spacing: 0.18em;
  color:          var(--cyan);
  margin-top:     -4px;
}

.loader-formula {
  font-family:    var(--font-mono);
  font-size:      clamp(0.48rem, 1.3vw, 0.62rem);
  color:          var(--text-dim);
  letter-spacing: 0.04em;
  padding:        6px 14px;
  border:         1px solid rgba(0, 200, 255, 0.08);
  border-radius:  var(--r-md);
  max-width:      min(500px, 90vw);
  text-align:     center;
  opacity:        0.72;
  animation:      formulaCycle 3s ease-in-out infinite alternate;
  word-break:     break-all;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 4 — APP SHELL & CANVASES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app         { position: fixed; inset: 0; overflow: hidden; }
.app.hidden  { display: none; }

#canvas2d,
#canvas3d {
  position:            fixed;
  top: 0; left: 0;
  width:               100%;
  height:              100%;
  display:             block;
  transform:           translateZ(0);
  backface-visibility: hidden;
}

#canvas2d {
  z-index:        var(--z-canvas);
  pointer-events: none;
}

#canvas3d {
  z-index:        var(--z-canvas3d);
  pointer-events: all;
  cursor:         grab;
  touch-action:   none;
}

#canvas3d:active { cursor: grabbing; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 5 — GLASSMORPHISM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.glass {
  background:              var(--glass-bg);
  backdrop-filter:         blur(var(--glass-blur))
                           saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur))
                           saturate(var(--glass-saturate));
  border:                  1px solid var(--glass-border);
  box-shadow:              var(--shadow-panel);
}

.glass.hot {
  border-color: var(--glass-border-hot);
  box-shadow:   var(--shadow-panel), var(--shadow-glow-cyan);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 6 — HEADER HUD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hud-header {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          calc(var(--header-h) + var(--safe-top));
  padding-top:     var(--safe-top);
  z-index:         var(--z-header);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-left:    max(12px, var(--safe-left));
  padding-right:   max(12px, var(--safe-right));
  gap:             8px;
  border-top:      none;
  border-left:     none;
  border-right:    none;
  border-radius:   0;
  overflow:        hidden;
}

.brand {
  display:     flex;
  align-items: center;
  gap:         5px;
  flex-shrink: 0;
  min-width:   0;
}

.brand-hex {
  flex-shrink: 0;
  filter:      drop-shadow(0 0 5px var(--cyan));
}

.brand-geo,
.brand-zakhraf {
  font-family:    var(--font-mono);
  font-size:      1.0rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  white-space:    nowrap;
}

.brand-geo     { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
.brand-zakhraf { color: var(--text-bright); }

.brand-tag {
  font-family:    var(--font-mono);
  font-size:      0.48rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  color:          var(--violet);
  border:         1px solid var(--violet-dim);
  border-radius:  var(--r-xs);
  padding:        2px 6px;
  text-transform: uppercase;
  animation:      tagPulse 4s ease-in-out infinite;
  white-space:    nowrap;
}

.hud-metrics {
  display:         flex;
  align-items:     center;
  gap:             5px;
  flex:            1 1 auto;
  justify-content: center;
  overflow:        hidden;
  min-width:       0;
}

.metric-chip {
  display:       flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 7px;
  border:        1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background:    rgba(0, 240, 255, 0.04);
  flex-shrink:   0;
}

.metric-label {
  font-family:    var(--font-mono);
  font-size:      0.46rem;
  letter-spacing: 0.14em;
  color:          var(--text-muted);
  text-transform: uppercase;
}

.metric-value {
  font-family:    var(--font-mono);
  font-size:      0.66rem;
  font-weight:    600;
  color:          var(--cyan);
  min-width:      22px;
  text-align:     center;
}

.beat-dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    var(--text-dim);
  border:        1px solid var(--glass-border);
  transition:    background var(--t-fast), box-shadow var(--t-fast);
}

.beat-dot.active {
  background: var(--red);
  box-shadow: 0 0 10px var(--red-dim), 0 0 20px rgba(255,34,68,0.25);
}

.tex-dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    var(--green);
  border:        1px solid var(--green-dim);
  box-shadow:    0 0 6px var(--green-glow);
  transition:    background var(--t-base), box-shadow var(--t-base);
  animation:     texDotPulse 1.5s ease-in-out infinite;
}

.tex-dot.inactive {
  background: var(--violet);
  box-shadow: 0 0 6px var(--violet-glow);
  animation:  none;
}

.hud-controls {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex-shrink: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 7 — BUTTON SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.icon-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  background:      rgba(0, 240, 255, 0.05);
  border:          1px solid var(--glass-border);
  color:           var(--text-primary);
  font-family:     var(--font-mono);
  font-size:       0.64rem;
  letter-spacing:  0.08em;
  padding:         6px 11px;
  border-radius:   var(--r-sm);
  transition:      all var(--t-base);
  white-space:     nowrap;
  min-height:      34px;
  min-width:       34px;
}

.icon-btn:hover {
  background:   rgba(0, 240, 255, 0.14);
  border-color: var(--cyan);
  color:        var(--cyan);
  box-shadow:   var(--shadow-glow-cyan);
  transform:    translateY(-1px);
}

.icon-btn:active { transform: translateY(0) scale(0.96); }

.icon-btn.active,
.icon-btn[aria-pressed="true"] {
  background:   rgba(0, 240, 255, 0.16);
  border-color: var(--cyan);
  color:        var(--cyan);
  box-shadow:   var(--shadow-glow-cyan);
}

.icon-btn.small {
  padding:    4px 8px;
  font-size:  0.58rem;
  min-height: 28px;
  min-width:  28px;
}

#btn-tex-mode.active,
#btn-tex-mode[aria-pressed="true"] {
  background:   rgba(0, 255, 136, 0.14);
  border-color: var(--green);
  color:        var(--green);
  box-shadow:   var(--shadow-glow-green);
}

#btn-tex-mode:not(.active) {
  background:   rgba(139, 0, 255, 0.08);
  border-color: var(--violet-dim);
  color:        var(--text-muted);
}

.action-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  background:      linear-gradient(135deg,
                     rgba(139,0,255,0.22) 0%,
                     rgba(0,240,255,0.12) 100%);
  border:          1px solid rgba(139, 0, 255, 0.45);
  color:           var(--text-bright);
  font-family:     var(--font-mono);
  font-size:       0.64rem;
  font-weight:     600;
  letter-spacing:  0.15em;
  padding:         9px 16px;
  border-radius:   var(--r-md);
  text-transform:  uppercase;
  transition:      all var(--t-base);
  white-space:     nowrap;
  min-height:      36px;
}

.action-btn:hover {
  background:   linear-gradient(135deg,
                  rgba(139,0,255,0.45) 0%,
                  rgba(0,240,255,0.28) 100%);
  border-color: var(--cyan);
  box-shadow:   var(--shadow-glow-cyan), var(--shadow-glow-violet);
  transform:    translateY(-1px);
}

.action-btn:active     { transform: translateY(0) scale(0.97); }
.action-btn.full-width { width: 100%; }
.action-btn.beat-active { animation: shatterPulse 0.32s ease; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 8 — MOBILE HAMBURGER BUTTON
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mobile-menu-btn {
  display:         none;
  position:        fixed;
  top:             calc(var(--header-h) + var(--safe-top) + 8px);
  left:            8px;
  z-index:         var(--z-mobile-btn);
  width:           38px;
  height:          38px;
  border-radius:   var(--r-md);
  font-size:       1.1rem;
  color:           var(--cyan);
  align-items:     center;
  justify-content: center;
  transition:      all var(--t-base);
  padding:         0;
}

.mobile-menu-btn:hover { box-shadow: var(--shadow-glow-cyan); }

.mobile-menu-btn.panel-open {
  left:        calc(248px + 6px);
  color:       var(--red);
  border-color: var(--red-dim);
}

[dir="rtl"] .mobile-menu-btn { left: auto; right: 8px; }
[dir="rtl"] .mobile-menu-btn.panel-open { right: calc(248px + 6px); left: auto; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 9 — PANEL BACKDROP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.panel-backdrop {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         var(--z-backdrop);
  background:      rgba(0, 0, 8, 0.55);
  backdrop-filter: blur(2px);
  opacity:         0;
  transition:      opacity var(--t-base);
}

.panel-backdrop.visible {
  display: block;
  opacity: 1;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 10 — SIDE PANEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.side-panel {
  position:       fixed;
  top:            calc(var(--header-h) + var(--safe-top));
  left:           0;
  width:          var(--panel-w);
  bottom:         var(--bar-h);
  z-index:        var(--z-panel);
  display:        flex;
  flex-direction: column;
  border-top:     none;
  border-left:    none;
  border-bottom:  none;
  border-radius:  0;
  transition:     transform var(--t-base);
  overflow:       hidden;
}

.side-panel.collapsed {
  transform: translateX(calc(-1 * var(--panel-w) + 28px));
}

.panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         11px 12px 9px;
  border-bottom:   1px solid var(--glass-border);
  flex-shrink:     0;
}

.panel-title-group { display: flex; align-items: center; gap: 7px; }

.panel-title {
  font-family:    var(--font-mono);
  font-size:      0.60rem;
  font-weight:    700;
  letter-spacing: 0.20em;
  color:          var(--cyan);
  text-transform: uppercase;
}

.panel-count {
  font-family:   var(--font-mono);
  font-size:     0.54rem;
  color:         var(--violet);
  background:    var(--violet-dim);
  border:        1px solid var(--violet-dim);
  border-radius: var(--r-xs);
  padding:       1px 5px;
}

.preset-search-wrap {
  position:      relative;
  padding:       9px 11px 6px;
  flex-shrink:   0;
  border-bottom: 1px solid rgba(0, 200, 255, 0.06);
}

.search-icon {
  position:       absolute;
  left:           20px;
  top:            50%;
  transform:      translateY(-46%);
  color:          var(--text-muted);
  font-size:      0.82rem;
  pointer-events: none;
}

#preset-search {
  width:         100%;
  background:    rgba(0, 8, 28, 0.65);
  border:        1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color:         var(--text-primary);
  font-family:   var(--font-mono);
  padding:       7px 9px 7px 25px;
  transition:    border-color var(--t-base), box-shadow var(--t-base);
  font-size:     max(0.66rem, 16px);
}

#preset-search:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-glow); }
#preset-search::placeholder { color: var(--text-dim); }
#preset-search::-webkit-search-cancel-button { filter: invert(0.6); }

.preset-tabs {
  display:       flex;
  flex-shrink:   0;
  border-bottom: 1px solid var(--glass-border);
}

.tab-btn {
  flex:            1;
  background:      transparent;
  border:          none;
  border-bottom:   2px solid transparent;
  color:           var(--text-muted);
  font-family:     var(--font-mono);
  font-size:       0.54rem;
  font-weight:     600;
  letter-spacing:  0.13em;
  padding:         9px 4px;
  text-transform:  uppercase;
  transition:      all var(--t-base);
  min-height:      36px;
}

.tab-btn:hover { color: var(--text-primary); background: rgba(0,240,255,0.04); }
.tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-btn[data-tab="3d"].active { color: var(--violet); border-bottom-color: var(--violet); }

.preset-list {
  flex:                      1;
  overflow-y:                auto;
  overflow-x:                hidden;
  padding:                   5px 0 6px;
  scrollbar-width:           thin;
  scrollbar-color:           var(--violet-dim) transparent;
  -webkit-overflow-scrolling: touch;
}

.preset-list::-webkit-scrollbar       { width: 3px; }
.preset-list::-webkit-scrollbar-track { background: transparent; }
.preset-list::-webkit-scrollbar-thumb { background: var(--violet-dim); border-radius: 2px; }

.preset-item {
  display:     flex;
  align-items: center;
  gap:         9px;
  padding:     8px 12px;
  cursor:      pointer;
  border-left: 2px solid transparent;
  transition:  background var(--t-fast), border-color var(--t-fast);
  min-height:  40px;
  position:    relative;
}

.preset-item::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(90deg, var(--cyan-glow), transparent);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--t-base);
}

.preset-item:hover { background: rgba(0,240,255,0.06); border-left-color: rgba(0,240,255,0.4); }
.preset-item:hover::after { opacity: 1; }
.preset-item.active { background: rgba(0,240,255,0.11); border-left-color: var(--cyan); }
.preset-item.active .preset-name { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }

.preset-num {
  font-family: var(--font-mono);
  font-size:   0.54rem;
  font-weight: 600;
  color:       var(--violet);
  min-width:   20px;
  text-align:  right;
  flex-shrink: 0;
}

.preset-name {
  font-family:   var(--font-mono);
  font-size:     0.66rem;
  color:         var(--text-primary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  flex:          1;
  transition:    color var(--t-fast);
}

.panel-footer {
  padding:     9px 10px;
  border-top:  1px solid var(--glass-border);
  flex-shrink: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 11 — BOTTOM CONTROL BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.bottom-bar {
  position:      fixed;
  bottom:        0;
  left:          var(--panel-w);
  right:         0;
  height:        calc(var(--bar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  z-index:       var(--z-ui);
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding-left:  max(14px, var(--safe-left));
  padding-right: max(14px, var(--safe-right));
  border-bottom: none;
  border-left:   none;
  border-right:  none;
  border-radius: 0;
  overflow-x:    auto;
  overflow-y:    hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.bottom-bar::-webkit-scrollbar { display: none; }

.param-group {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  min-width:      84px;
  flex-shrink:    0;
  scroll-snap-align: start;
}

.param-group label {
  font-family:    var(--font-mono);
  font-size:      0.48rem;
  letter-spacing: 0.16em;
  color:          var(--text-muted);
  text-transform: uppercase;
  white-space:    nowrap;
}

.param-group input[type="range"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              84px;
  height:             3px;
  background:         rgba(255, 255, 255, 0.08);
  border-radius:      2px;
  outline:            none;
  cursor:             pointer;
  transition:         background var(--t-fast);
}

.param-group input[type="range"]:hover { background: rgba(255,255,255,0.14); }

.param-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:         none;
  width:              16px;
  height:             16px;
  border-radius:      50%;
  background:         var(--cyan);
  box-shadow:         0 0 8px var(--cyan), 0 0 16px var(--cyan-glow);
  cursor:             pointer;
  transition:         transform var(--t-fast), box-shadow var(--t-fast);
}

.param-group input[type="range"]::-webkit-slider-thumb:hover {
  transform:  scale(1.3);
  box-shadow: 0 0 14px var(--cyan), 0 0 28px var(--cyan-glow);
}

.param-group input[type="range"]::-moz-range-thumb {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  border:        none;
  background:    var(--cyan);
  box-shadow:    0 0 8px var(--cyan);
  cursor:        pointer;
}

.param-group input[type="range"]::-moz-range-progress {
  background:    linear-gradient(90deg, var(--violet), var(--cyan));
  border-radius: 2px;
  height:        3px;
}

#param-tex-opacity::-webkit-slider-thumb {
  background: var(--green);
  box-shadow: 0 0 8px var(--green), 0 0 16px var(--green-glow);
}

#param-tex-opacity::-moz-range-thumb {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.param-val { font-family: var(--font-mono); font-size: 0.58rem; color: var(--cyan); min-width: 30px; text-align: center; }
#val-tex-opacity { color: var(--green); }

.bar-sep { width: 1px; height: 34px; background: var(--glass-border); flex-shrink: 0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 12 — SYNC HUD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sync-hud {
  position:       fixed;
  top:            calc(var(--header-h) + var(--safe-top) + 12px);
  right:          12px;
  z-index:        var(--z-ui);
  width:          var(--sync-w);
  padding:        11px 13px;
  border-radius:  var(--r-lg);
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.sync-title {
  font-family:    var(--font-mono);
  font-size:      0.50rem;
  letter-spacing: 0.20em;
  color:          var(--text-muted);
  text-transform: uppercase;
  text-align:     center;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--glass-border);
}

.sync-row { display: flex; align-items: center; gap: 7px; }

.sync-label {
  font-family: var(--font-mono);
  font-size:   0.56rem;
  font-weight: 600;
  color:       var(--text-muted);
  min-width:   20px;
  text-align:  right;
}

.sync-bar-track {
  flex:          1;
  height:        4px;
  background:    rgba(255, 255, 255, 0.06);
  border-radius: var(--r-xs);
  overflow:      hidden;
}

.sync-bar-fill { height: 100%; width: 0%; border-radius: var(--r-xs); transition: width 0.12s linear; }
.sync-bar-fill.cyan   { background: linear-gradient(90deg, var(--violet-dim), var(--cyan)); box-shadow: 0 0 5px var(--cyan-glow); }
.sync-bar-fill.violet { background: linear-gradient(90deg, var(--cyan-dim), var(--violet)); box-shadow: 0 0 5px var(--violet-glow); }
.sync-bar-fill.gold   { background: linear-gradient(90deg, var(--red-dim), var(--gold)); box-shadow: 0 0 5px var(--gold-dim); }
.sync-bar-fill.green  { background: linear-gradient(90deg, var(--cyan-dim), var(--green)); box-shadow: 0 0 5px var(--green-glow); transition: width 0.08s linear, background var(--t-base); }

.sync-num { font-family: var(--font-mono); font-size: 0.52rem; color: var(--text-muted); min-width: 30px; text-align: right; }

.sync-direction { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; border-top: 1px solid var(--glass-border); }
.dir-label { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }
.dir-arrows { display: flex; align-items: center; gap: 7px; font-size: 1.05rem; }
.dir-arrow  { transition: color var(--t-base); }
#dir-2d { color: var(--cyan);   text-shadow: 0 0 7px var(--cyan-glow); }
#dir-3d { color: var(--violet); text-shadow: 0 0 7px var(--violet-glow); }
.dir-sep { color: var(--text-dim); font-size: 0.75rem; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 13 — ACTIVE PRESET LABEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.active-label {
  position:       fixed;
  bottom:         calc(var(--bar-h) + var(--safe-bottom) + 10px);
  left:           calc(var(--panel-w) + 12px);
  z-index:        var(--z-ui);
  display:        flex;
  align-items:    center;
  gap:            11px;
  padding:        7px 15px;
  border-radius:  var(--r-lg);
  pointer-events: none;
  transition:     transform var(--t-spring), opacity var(--t-base);
}

.active-label.flash { animation: labelFlash 0.5s ease; }

.active-num    { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--violet); text-shadow: 0 0 12px var(--violet-glow); line-height: 1; min-width: 24px; }
.active-info   { display: flex; flex-direction: column; gap: 2px; }
.active-name   { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); letter-spacing: 0.05em; }
.active-engine { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.20em; color: var(--green); text-shadow: 0 0 5px var(--green-glow); text-transform: uppercase; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 14 — POV MODE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Hide all UI elements in POV mode */
.app.pov-mode .hud-header,
.app.pov-mode .side-panel,
.app.pov-mode .bottom-bar,
.app.pov-mode .sync-hud,
.app.pov-mode .active-label,
.app.pov-mode .mobile-menu-btn {
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.65s ease;
}

/* Hint text — now says "DRAG TO LOOK AROUND"
   instead of "TAP TO EXIT" */
.app.pov-mode::after {
  content:        'DRAG TO LOOK AROUND';
  position:       fixed;
  bottom:         calc(22px + var(--safe-bottom));
  left:           50%;
  transform:      translateX(-50%);
  z-index:        var(--z-pov);
  font-family:    var(--font-mono);
  font-size:      0.50rem;
  letter-spacing: 0.25em;
  color:          rgba(0, 240, 255, 0.32);
  pointer-events: none;
  animation:      povHint 3s ease-in-out infinite;
  white-space:    nowrap;
  text-align:     center;
}

[dir="rtl"] .app.pov-mode::after {
  content: 'اسحب للنظر حولك';
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 15 — POV EXIT BUTTON (THE FIX)
   Replaces the full-screen invisible overlay.
   Only this button exits POV — the rest of the
   screen is fully interactive for cube rotation.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pov-exit-btn {
  /* Hidden by default */
  display:         none;
  position:        fixed;
  top:             max(14px, var(--safe-top));
  right:           max(14px, var(--safe-right));
  z-index:         var(--z-pov-exit);

  /* Appearance */
  padding:         12px 22px;
  border-radius:   var(--r-lg);
  font-family:     var(--font-mono);
  font-size:       0.72rem;
  font-weight:     700;
  letter-spacing:  0.18em;
  color:           var(--cyan);
  background:      rgba(0, 6, 24, 0.82);
  border:          1px solid var(--cyan-dim);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor:          pointer;
  transition:      all var(--t-base);

  /* Touch */
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;

  /* Size */
  min-height:      48px;
  min-width:       48px;

  /* Layout */
  align-items:     center;
  justify-content: center;

  /* Pulse to draw attention */
  animation:       povExitPulse 2.5s ease-in-out infinite;
}

/* Show ONLY when app is in POV mode */
.app.pov-mode .pov-exit-btn {
  display: flex;
}

/* Hover state */
.pov-exit-btn:hover {
  background:   rgba(40, 0, 8, 0.90);
  border-color: var(--red);
  color:        var(--red);
  box-shadow:   0 0 24px rgba(255, 34, 68, 0.35);
  transform:    scale(1.06);
}

/* Active / pressed */
.pov-exit-btn:active {
  transform: scale(0.95);
}

/* RTL — mirror to left side */
[dir="rtl"] .pov-exit-btn {
  right: auto;
  left:  max(14px, var(--safe-left));
}

/* Pulse animation */
@keyframes povExitPulse {
  0%, 100% {
    box-shadow:   0 0 8px  var(--cyan-glow);
    border-color: var(--cyan-dim);
  }
  50% {
    box-shadow:   0 0 20px var(--cyan-glow),
                  0 0 36px rgba(0, 240, 255, 0.12);
    border-color: var(--cyan);
  }
}

/* Mobile — slightly smaller */
@media (max-width: 768px) {
  .pov-exit-btn {
    padding:        10px 16px;
    font-size:      0.64rem;
    letter-spacing: 0.14em;
    min-height:     46px;
    top:            max(10px, var(--safe-top));
    right:          max(10px, var(--safe-right));
  }

  [dir="rtl"] .pov-exit-btn {
    right: auto;
    left:  max(10px, var(--safe-left));
  }
}

/* Very small screens */
@media (max-width: 420px) {
  .pov-exit-btn {
    padding:        8px 12px;
    font-size:      0.58rem;
    letter-spacing: 0.10em;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 16 — SHORTCUTS OVERLAY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.shortcuts-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; background: rgba(0,0,12,0.78); backdrop-filter: blur(6px); animation: fadeIn var(--t-base) both; padding: 20px; }
.shortcuts-overlay.hidden { display: none; }
.shortcuts-panel  { width: min(440px, 94vw); border-radius: var(--r-xl); overflow: hidden; animation: slideUp var(--t-spring) both; }
.shortcuts-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--glass-border); font-family: var(--font-mono); font-size: 0.60rem; letter-spacing: 0.20em; color: var(--cyan); text-transform: uppercase; }
.shortcuts-grid   { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; padding: 14px 16px 16px; }
kbd               { font-family: var(--font-mono); font-size: 0.62rem; color: var(--cyan); background: rgba(0,240,255,0.08); border: 1px solid var(--glass-border-hot); border-radius: var(--r-sm); padding: 3px 8px; white-space: nowrap; justify-self: start; align-self: center; }
.shortcuts-grid span { font-size: 0.68rem; color: var(--text-primary); align-self: center; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 17 — VFX OVERLAYS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.shatter-overlay  { position: fixed; inset: 0; z-index: var(--z-flash); background: radial-gradient(ellipse at center, rgba(255,34,68,0.55) 0%, rgba(139,0,255,0.25) 40%, transparent 70%); pointer-events: none; animation: shatterFlash 0.72s ease forwards; }
.screenshot-flash { position: fixed; inset: 0; z-index: var(--z-flash); background: white; pointer-events: none; opacity: 0; }
.screenshot-flash.active { animation: screenshotFlash 0.4s ease forwards; }
.screenshot-flash.hidden { display: none; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 18 — RTL / ARABIC
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

[dir="rtl"] .side-panel   { left: auto; right: 0; border-left: 1px solid var(--glass-border); border-right: none; }
[dir="rtl"] .side-panel.collapsed { transform: translateX(calc(var(--panel-w) - 28px)); }
[dir="rtl"] .bottom-bar   { left: 0; right: var(--panel-w); }
[dir="rtl"] .active-label { left: auto; right: calc(var(--panel-w) + 12px); }
[dir="rtl"] .sync-hud     { right: auto; left: 12px; }
[dir="rtl"] .preset-item  { border-left: none; border-right: 2px solid transparent; }
[dir="rtl"] .preset-item:hover  { border-right-color: rgba(0,240,255,0.4); border-left: none; }
[dir="rtl"] .preset-item.active { border-right-color: var(--cyan); border-left: none; }
[dir="rtl"] .preset-item::after { background: linear-gradient(270deg, var(--cyan-glow), transparent); }
[dir="rtl"] .search-icon  { left: auto; right: 20px; }
[dir="rtl"] #preset-search { padding-left: 9px; padding-right: 25px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 19 — RESPONSIVE TABLET (≤ 1024px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1024px) {
  :root { --panel-w: 240px; --sync-w: 150px; }
  .hud-metrics { gap: 4px; }
  .metric-chip { padding: 2px 5px; }
  #metric-tex, #metric-formula { display: none; }
  .icon-btn { font-size: 0.60rem; padding: 5px 9px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 20 — RESPONSIVE MOBILE (≤ 768px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  :root { --header-h: 46px; --bar-h: 58px; --panel-w: 0px; --sync-w: 0px; }

  .hud-header { padding-left: max(10px,var(--safe-left)); padding-right: max(10px,var(--safe-right)); gap: 5px; }
  .brand-geo, .brand-zakhraf { font-size: 0.85rem; }
  .brand-tag  { display: none; }
  .brand-hex  { display: none; }
  .hud-metrics { display: none; }
  #btn-screenshot { display: none; }

  .icon-btn { font-size: 0.54rem; padding: 5px 7px; min-height: 32px; min-width: 32px; }

  .mobile-menu-btn { display: flex; }

  .side-panel {
    width:      248px;
    transform:  translateX(-248px);
    bottom:     0;
    z-index:    var(--z-drawer);
    box-shadow: 4px 0 32px rgba(0,0,0,0.85);
    top:        calc(var(--header-h) + var(--safe-top));
  }

  .side-panel.open { transform: translateX(0); }

  [dir="rtl"] .side-panel { right: 0; left: auto; transform: translateX(248px); }
  [dir="rtl"] .side-panel.open { transform: translateX(0); }

  .bottom-bar {
    left:          0;
    right:         0;
    gap:           8px;
    padding-left:  max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
  }

  [dir="rtl"] .bottom-bar { left: 0; right: 0; }

  .param-group       { min-width: 68px; }
  .param-group input[type="range"] { width: 68px; }
  .param-group label { font-size: 0.42rem; }
  .param-val         { font-size: 0.52rem; }

  .sync-hud { display: none; }

  .active-label {
    left:   max(10px, var(--safe-left));
    right:  auto;
    bottom: calc(var(--bar-h) + var(--safe-bottom) + 8px);
    padding: 5px 12px;
    gap:    8px;
  }

  [dir="rtl"] .active-label { left: auto; right: max(10px, var(--safe-right)); }

  .active-num  { font-size: 0.95rem; }
  .active-name { font-size: 0.62rem; }

  .action-btn { font-size: 0.58rem; padding: 7px 12px; }

  .shortcuts-panel { width: min(360px, 96vw); }
  .shortcuts-grid  { gap: 7px 10px; padding: 12px; }
  kbd              { font-size: 0.58rem; padding: 2px 6px; }
  .shortcuts-grid span { font-size: 0.62rem; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 21 — RESPONSIVE SMALL (≤ 420px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 420px) {
  :root { --header-h: 44px; --bar-h: 54px; }

  .brand-zakhraf { display: none; }
  .brand-geo     { font-size: 0.78rem; }
  #btn-tex-mode  { display: none; }

  .hud-controls { gap: 3px; }
  .icon-btn { font-size: 0.50rem; padding: 4px 6px; min-height: 30px; min-width: 30px; }

  .param-group { min-width: 60px; }
  .param-group input[type="range"] { width: 60px; }

  .param-group:has(#param-bloom),
  .param-group:has(#param-density),
  .param-group:has(#param-tex-opacity) { display: none; }

  .bar-sep    { display: none; }
  .action-btn { font-size: 0.54rem; padding: 6px 10px; }
  .active-label { display: none; }
  .bottom-bar   { gap: 6px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 22 — KEYFRAME ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes fadeIn        { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp       { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hexSpin       { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hexPulse      { from { opacity: 0.6; filter: drop-shadow(0 0 3px var(--cyan)); } to { opacity: 1.0; filter: drop-shadow(0 0 14px var(--cyan)); } }
@keyframes tagPulse      { 0%,100% { opacity: 0.7; } 50% { opacity: 1.0; box-shadow: 0 0 8px var(--violet-glow); } }
@keyframes formulaCycle  { from { opacity: 0.38; transform: translateY(2px); } to { opacity: 0.78; transform: translateY(0); } }
@keyframes badgePulse    { 0%,100% { opacity: 0.6; } 50% { opacity: 1.0; box-shadow: 0 0 10px var(--green-glow); } }
@keyframes texDotPulse   { 0%,100% { box-shadow: 0 0 4px  var(--green-glow); } 50% { box-shadow: 0 0 12px var(--green), 0 0 22px var(--green-glow); } }
@keyframes shatterFlash  { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes screenshotFlash { 0% { opacity: 0.92; } 100% { opacity: 0; } }
@keyframes shatterPulse  { 0% { transform: scale(1); box-shadow: none; } 40% { transform: scale(1.07); box-shadow: 0 0 22px var(--red-dim); } 100% { transform: scale(1); box-shadow: none; } }
@keyframes labelFlash    { 0% { opacity: 0; transform: translateX(-7px); } 30% { opacity: 1; transform: translateX(3px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes povHint       { 0%,100% { opacity: 0.20; } 50% { opacity: 0.48; } }

/* POV exit button pulse */
@keyframes povExitPulse {
  0%, 100% {
    box-shadow:   0 0 8px  var(--cyan-glow);
    border-color: var(--cyan-dim);
  }
  50% {
    box-shadow:   0 0 20px var(--cyan-glow),
                  0 0 36px rgba(0, 240, 255, 0.12);
    border-color: var(--cyan);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 23 — ACCESSIBILITY & PRINT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

@media (forced-colors: active) {
  .glass { border: 2px solid ButtonText; }
  .icon-btn, .action-btn { border: 1px solid ButtonText; }
}

@media print {
  .hud-header, .side-panel, .bottom-bar,
  .sync-hud, .active-label, .mobile-menu-btn,
  .panel-backdrop, .pov-exit-btn { display: none; }
  #canvas2d, #canvas3d { position: static; width: 100%; height: auto; }
}