/* ==========================================================================
   NEXUS OS — APPLE OBSIDIAN GLASS & CINEMA-GRADE LUXURY DESIGN SYSTEM
   Inspirado no padrão arquitetural de UaiMídia & ErpIGS
   Hardware Acceleration: 120Hz ProMotion Ready · Spring Physics
   ========================================================================== */

:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Fundo OLED Puro & Superfícies Espaciais */
  --bg-oled: #050508;
  --bg-deep: #07080c;
  --bg-surface-glass: rgba(13, 14, 20, 0.78);
  --bg-surface-glass-hover: rgba(22, 24, 34, 0.90);
  --bg-card-glass: rgba(18, 19, 27, 0.74);
  --bg-card-elevated: rgba(26, 28, 40, 0.88);
  --bg-modal-glass: rgba(10, 11, 16, 0.92);

  /* Specular Rim Highlights (Chanfro de Luz Superior Padrão Apple) */
  --border-specular: rgba(255, 255, 255, 0.16);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-gold-specular: rgba(245, 230, 179, 0.40);
  --border-gold-subtle: rgba(197, 160, 89, 0.18);
  --border-gold-hover: rgba(197, 160, 89, 0.50);

  /* Paleta Ouro Champagne & Gradientes Metálicos */
  --gold-primary: #c5a059;
  --gold-light: #f1e3ad;
  --gold-dark: #997836;
  --gold-metallic: #c5a059;
  --gold-champagne: #f5e6b3;
  --gold-gradient: linear-gradient(135deg, #f5e6b3 0%, #c5a059 50%, #997836 100%);
  --gold-gradient-soft: linear-gradient(135deg, rgba(245, 230, 179, 0.15) 0%, rgba(197, 160, 89, 0.06) 100%);
  --gold-glow: rgba(197, 160, 89, 0.28);
  --gold-subtle: rgba(197, 160, 89, 0.08);

  /* Status & Live Indicators */
  --emerald-status: #10b981;
  --emerald-glow: rgba(16, 185, 129, 0.35);
  --emerald-bg: rgba(16, 185, 129, 0.12);
  --emerald-border: rgba(16, 185, 129, 0.25);

  --amber-status: #f59e0b;
  --amber-glow: rgba(245, 158, 11, 0.35);
  --amber-bg: rgba(245, 158, 11, 0.12);
  --amber-border: rgba(245, 158, 11, 0.25);

  --crimson-status: #ef4444;
  --crimson-glow: rgba(239, 68, 68, 0.35);
  --crimson-bg: rgba(239, 68, 68, 0.12);
  --crimson-border: rgba(239, 68, 68, 0.25);

  --sky-status: #38bdf8;
  --sky-glow: rgba(56, 189, 248, 0.35);

  /* Tipografia & Legibilidade */
  --text-main: #f8f9fc;
  --text-sub: #a1a4b5;
  --text-muted: #6a6d80;

  /* Física de Mola Apple & Curvas Cinemáticas */
  --ease-apple-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.25, 1.15, 0.4, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --backdrop-blur: blur(28px) saturate(180%);

  /* Raios de Arredondamento Geométrico */
  --radius-pill: 9999px;
  --radius-card: 18px;
  --radius-modal: 24px;
  --radius-btn: 11px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg-oled: #f4f5f8;
  --bg-deep: #f8f9fc;
  --bg-surface-glass: rgba(255, 255, 255, 0.86);
  --bg-surface-glass-hover: rgba(255, 255, 255, 0.96);
  --bg-card-glass: rgba(255, 255, 255, 0.88);
  --bg-card-elevated: #ffffff;
  --bg-modal-glass: rgba(255, 255, 255, 0.95);

  --border-specular: rgba(255, 255, 255, 0.95);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-gold-specular: rgba(163, 125, 50, 0.35);
  --border-gold-subtle: rgba(163, 125, 50, 0.20);
  --border-gold-hover: rgba(163, 125, 50, 0.50);

  --gold-primary: #a37d32;
  --gold-light: #d4b26f;
  --gold-dark: #7a5b1e;
  --gold-metallic: #b8860b;
  --gold-champagne: #e2c992;
  --gold-gradient: linear-gradient(135deg, #d4b26f 0%, #a37d32 50%, #7a5b1e 100%);
  --gold-gradient-soft: linear-gradient(135deg, rgba(163, 125, 50, 0.12) 0%, rgba(163, 125, 50, 0.04) 100%);
  --gold-glow: rgba(163, 125, 50, 0.18);
  --gold-subtle: rgba(163, 125, 50, 0.08);

  --text-main: #0c0d12;
  --text-sub: #4b4e5e;
  --text-muted: #74788c;
}

/* ==========================================================================
   1. RESET GLOBAL & ACELERAÇÃO DE HARDWARE (120Hz PROMOTION)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.gpu-accel {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
}

/* Scrollbar Minimalista Mac/iOS */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(197, 160, 89, 0.25) !important;
  border-radius: var(--radius-pill) !important;
  transition: background 0.2s ease !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(197, 160, 89, 0.55) !important;
}

/* ==========================================================================
   2. APPLE OBSIDIAN GLASS CARDS & SPECULAR RIM HIGHLIGHTS
   ========================================================================== */
.apple-canvas-card,
.card-glass,
.liquid-glass {
  position: relative;
  background: var(--bg-card-glass);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid var(--border-specular) !important;
  border-radius: var(--radius-card);
  box-shadow: 
    0 12px 36px 0 rgba(0, 0, 0, 0.50),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  transition: all 0.25s var(--ease-apple-spring);
}

.apple-canvas-card:hover,
.card-glass:hover,
.liquid-glass:hover {
  background: var(--bg-surface-glass-hover);
  border-color: var(--border-gold-hover);
  border-top-color: var(--border-gold-specular) !important;
  box-shadow: 
    0 16px 44px -4px rgba(0, 0, 0, 0.68),
    0 0 20px rgba(197, 160, 89, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.apple-specular-rim {
  border-top: 1px solid var(--border-specular) !important;
}

.apple-specular-gold {
  border-top: 1px solid var(--border-gold-specular) !important;
}

/* ==========================================================================
   3. APPLE PILL BUTTONS (FÍSICA DE MOLA E FEEDBACK TÁTIL)
   ========================================================================== */
.apple-pill-btn,
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid var(--border-specular);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s var(--ease-apple-spring);
  user-select: none;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.apple-pill-btn:hover,
.btn-pill:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.apple-pill-btn:active,
.btn-pill:active {
  transform: scale(0.97);
}

.apple-pill-btn.primary,
.btn-pill.primary {
  background: var(--gold-gradient);
  color: #08080a;
  border: none;
  font-weight: 800;
  box-shadow: 0 4px 18px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.apple-pill-btn.primary:hover,
.btn-pill.primary:hover {
  filter: brightness(1.06);
  transform: scale(1.02);
  box-shadow: 0 6px 24px rgba(197, 160, 89, 0.45);
}

/* ==========================================================================
   4. LIVE STATUS BADGES & RADAR PING
   ========================================================================== */
.badge-status-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.badge-status-live.green {
  background: var(--emerald-bg);
  color: #86efac;
  border: 1px solid var(--emerald-border);
}

.badge-status-live.amber {
  background: var(--amber-bg);
  color: #fcd34d;
  border: 1px solid var(--amber-border);
}

.badge-status-live.red {
  background: var(--crimson-bg);
  color: #fca5a5;
  border: 1px solid var(--crimson-border);
}

.badge-status-live.gold {
  background: var(--gold-subtle);
  color: var(--gold-primary);
  border: 1px solid var(--border-gold-subtle);
}

.radar-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.radar-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: appleRadarPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes appleRadarPing {
  0% { transform: scale(1); opacity: 0.8; }
  75%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ==========================================================================
   5. TRANSIÇÕES CINEMATOGRÁFICAS & ELASTIC FADE-IN
   ========================================================================== */
.nexus-fade-in,
.apple-entrance {
  animation: nexusElasticFadeIn 0.5s var(--ease-elastic) forwards;
  will-change: transform, opacity;
}

@keyframes nexusElasticFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   6. AMBIENT GLOWS & EFEITOS DE ATMOSFERA
   ========================================================================== */
.ambient-glow-gold {
  position: relative;
}
.ambient-glow-gold::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(197, 160, 89, 0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}