/**
 * ============================================================================
 * CHRONOS 01 // SISTEMA DE ESTILOS CSS3
 * ============================================================================
 * 
 * SUMÁRIO:
 *  1. VARIÁVEIS, TEMAS & DESIGN TOKENS
 *  2. RESET & BASE
 *  3. AMBIÊNCIA, GRADE HUD & CANVAS DE PARTÍCULAS
 *  4. ESTRUTURA DO VIEWPORT & CABEÇALHO HUD
 *  5. PALCO DO CRONÔMETRO (3D TILT & HOUSING)
 *  6. ANÉIS ORBITAIS SVG (INDICADOR DE 60 SEGUNDOS)
 *  7. NÚCLEO TRANSLÚCIDO (GLASSMORPHISM PREMIUM)
 *  8. TIPOGRAFIA & MOSTRADOR DE TEMPO (HH : MM : SS)
 *  9. MICRO-INDICADORES & SUB-SEGUNDOS
 * 10. INFORMAÇÃO SECUNDÁRIA (DATA & TELEMETRIA)
 * 11. CONTROLES HUD (DOCK FLUTUANTE)
 * 12. ANIMAÇÕES & MICROINTERAÇÕES LUMINOSAS
 * 13. RESPONSIVIDADE (MOBILE, TABLET, DESKTOP, ULTRAWIDE)
 * 14. ACESSIBILIDADE & REDUCED MOTION
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
 * 1. VARIÁVEIS, TEMAS & DESIGN TOKENS
 * ---------------------------------------------------------------------------- */
:root {
    /* Paleta Neutra Base - Profundidade e Escuridão Orgânica (Não preto puro) */
    --bg-deep: #05070a;
    --bg-surface: #0a0d14;
    --bg-card: rgba(14, 19, 29, 0.65);
    --bg-card-border: rgba(255, 255, 255, 0.08);
    --bg-card-highlight: rgba(255, 255, 255, 0.04);
    
    /* Tipografia e Textos */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #475569;
    --text-dim: #334155;

    /* Fontes */
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-brand: 'Syne', sans-serif;

    /* Cores Temáticas Padrão: Ciano Cósmico */
    --accent-primary: #00f2fe;
    --accent-secondary: #4facfe;
    --accent-highlight: #e0f7fa;
    --accent-glow: rgba(0, 242, 254, 0.35);
    --accent-glow-subtle: rgba(0, 242, 254, 0.08);
    --track-color: rgba(255, 255, 255, 0.04);
    --tick-color: rgba(255, 255, 255, 0.12);
    --tick-active-color: rgba(0, 242, 254, 0.7);

    /* Dimensões Globais e Escala do Relógio (Normal & Giro 3D) */
    --clock-scale: 1.0;
    --card-size: min(67vmin, 498px);
    --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-pill: 9999px;
    --radius-hud: 28px;

    /* Motor Óptico e Iluminação Direcional 3D (Defaults Sóbrios & Refinados) */
    --core-blur: 24px;
    --core-opacity: 0.68;
    --core-base-color: 11, 17, 30;
    --optic-light-top: 0px;
    --optic-light-bottom: 12px;
    --optic-light-left: 0px;
    --optic-light-right: 0px;
    --optic-light-color: var(--accent-primary);

    /* Linhas Perimétricas & Demarcações ao Redor */
    --dial-line-color: var(--accent-primary);
    --dial-line-opacity: 0.70;

    /* Tipografia Dinâmica & Customização de Dígitos */
    --digit-color: var(--text-primary);
    --digit-opacity: 1.0;
    --digit-blur: 0px;
    --digit-glow-strength: 1.0;

    /* Data & Calendário Sóbrio do Núcleo */
    --date-color: #cbd5e1;
    --date-opacity: 1.0;
}

/* Temas Cromáticos Selecionáveis */
body[data-theme="amber"] {
    --accent-primary: #ffaa00;
    --accent-secondary: #ff7700;
    --accent-highlight: #fff3e0;
    --accent-glow: rgba(255, 170, 0, 0.38);
    --accent-glow-subtle: rgba(255, 170, 0, 0.09);
    --tick-active-color: rgba(255, 170, 0, 0.75);
}

body[data-theme="emerald"] {
    --accent-primary: #00f5a0;
    --accent-secondary: #00d9f5;
    --accent-highlight: #e8f5e9;
    --accent-glow: rgba(0, 245, 160, 0.35);
    --accent-glow-subtle: rgba(0, 245, 160, 0.08);
    --tick-active-color: rgba(0, 245, 160, 0.75);
}

body[data-theme="violet"] {
    --accent-primary: #b388ff;
    --accent-secondary: #7c4dff;
    --accent-highlight: #ede7f6;
    --accent-glow: rgba(179, 136, 255, 0.38);
    --accent-glow-subtle: rgba(179, 136, 255, 0.09);
    --tick-active-color: rgba(179, 136, 255, 0.75);
}

body[data-theme="obsidian"] {
    --accent-primary: #e2e8f0;
    --accent-secondary: #94a3b8;
    --accent-highlight: #ffffff;
    --accent-glow: rgba(255, 255, 255, 0.22);
    --accent-glow-subtle: rgba(255, 255, 255, 0.05);
    --tick-active-color: rgba(255, 255, 255, 0.7);
}

body[data-theme="ruby"] {
    --accent-primary: #ff0055;
    --accent-secondary: #ff3366;
    --accent-highlight: #ffe4ec;
    --accent-glow: rgba(255, 0, 85, 0.42);
    --accent-glow-subtle: rgba(255, 0, 85, 0.1);
    --tick-active-color: rgba(255, 0, 85, 0.8);
}

body[data-theme="matrix"] {
    --accent-primary: #39ff14;
    --accent-secondary: #00e676;
    --accent-highlight: #e8f5e9;
    --accent-glow: rgba(57, 255, 20, 0.4);
    --accent-glow-subtle: rgba(57, 255, 20, 0.09);
    --tick-active-color: rgba(57, 255, 20, 0.85);
}

body[data-theme="magenta"] {
    --accent-primary: #ff00ff;
    --accent-secondary: #d500f9;
    --accent-highlight: #fce4ec;
    --accent-glow: rgba(255, 0, 255, 0.42);
    --accent-glow-subtle: rgba(255, 0, 255, 0.1);
    --tick-active-color: rgba(255, 0, 255, 0.8);
}

body[data-theme="gold"] {
    --accent-primary: #ffd700;
    --accent-secondary: #ff9100;
    --accent-highlight: #fffde7;
    --accent-glow: rgba(255, 215, 0, 0.38);
    --accent-glow-subtle: rgba(255, 215, 0, 0.09);
    --tick-active-color: rgba(255, 215, 0, 0.8);
}

body[data-theme="ice"] {
    --accent-primary: #38bdf8;
    --accent-secondary: #818cf8;
    --accent-highlight: #f0f9ff;
    --accent-glow: rgba(56, 189, 248, 0.38);
    --accent-glow-subtle: rgba(56, 189, 248, 0.09);
    --tick-active-color: rgba(56, 189, 248, 0.8);
}

body[data-theme="plasma"] {
    --accent-primary: #ff007f;
    --accent-secondary: #ff5252;
    --accent-highlight: #fff0f5;
    --accent-glow: rgba(255, 0, 127, 0.42);
    --accent-glow-subtle: rgba(255, 0, 127, 0.1);
    --tick-active-color: rgba(255, 0, 127, 0.85);
}

body[data-theme="sunset"] {
    --accent-primary: #ff5500;
    --accent-secondary: #ff9900;
    --accent-highlight: #fff5ee;
    --accent-glow: rgba(255, 85, 0, 0.42);
    --accent-glow-subtle: rgba(255, 85, 0, 0.1);
    --tick-active-color: rgba(255, 85, 0, 0.85);
}

body[data-theme="deep-space"] {
    --accent-primary: #4d7cff;
    --accent-secondary: #00e5ff;
    --accent-highlight: #f0f4ff;
    --accent-glow: rgba(77, 124, 255, 0.4);
    --accent-glow-subtle: rgba(77, 124, 255, 0.1);
    --tick-active-color: rgba(77, 124, 255, 0.85);
}

body[data-theme="laser-lime"] {
    --accent-primary: #a6ff00;
    --accent-secondary: #00ffaa;
    --accent-highlight: #fafff0;
    --accent-glow: rgba(166, 255, 0, 0.42);
    --accent-glow-subtle: rgba(166, 255, 0, 0.1);
    --tick-active-color: rgba(166, 255, 0, 0.85);
}

body[data-theme="blood-moon"] {
    --accent-primary: #e60039;
    --accent-secondary: #ff3366;
    --accent-highlight: #fff0f2;
    --accent-glow: rgba(230, 0, 57, 0.45);
    --accent-glow-subtle: rgba(230, 0, 57, 0.12);
    --tick-active-color: rgba(230, 0, 57, 0.88);
}

body[data-theme="vaporwave"] {
    --accent-primary: #c084fc;
    --accent-secondary: #38bdf8;
    --accent-highlight: #faf5ff;
    --accent-glow: rgba(192, 132, 252, 0.42);
    --accent-glow-subtle: rgba(192, 132, 252, 0.1);
    --tick-active-color: rgba(192, 132, 252, 0.85);
}

body[data-theme="pure-white"] {
    --accent-primary: #ffffff;
    --accent-secondary: #cbd5e1;
    --accent-highlight: #ffffff;
    --accent-glow: rgba(255, 255, 255, 0.3);
    --accent-glow-subtle: rgba(255, 255, 255, 0.08);
    --tick-active-color: rgba(255, 255, 255, 0.85);
}

body[data-theme="synthwave"] {
    --accent-primary: #ff2a85;
    --accent-secondary: #00fff2;
    --accent-highlight: #fff0f8;
    --accent-glow: rgba(255, 42, 133, 0.45);
    --accent-glow-subtle: rgba(255, 42, 133, 0.12);
    --tick-active-color: rgba(255, 42, 133, 0.88);
}

body[data-theme="tokyo-night"] {
    --accent-primary: #7aa2f7;
    --accent-secondary: #bb9af7;
    --accent-highlight: #f0f4ff;
    --accent-glow: rgba(122, 162, 247, 0.42);
    --accent-glow-subtle: rgba(122, 162, 247, 0.1);
    --tick-active-color: rgba(122, 162, 247, 0.85);
}

body[data-theme="cyber-mint"] {
    --accent-primary: #00ffc8;
    --accent-secondary: #00b4d8;
    --accent-highlight: #e6fff9;
    --accent-glow: rgba(0, 255, 200, 0.42);
    --accent-glow-subtle: rgba(0, 255, 200, 0.1);
    --tick-active-color: rgba(0, 255, 200, 0.85);
}

body[data-theme="solar-flare"] {
    --accent-primary: #ff5100;
    --accent-secondary: #ffd000;
    --accent-highlight: #fff7ed;
    --accent-glow: rgba(255, 81, 0, 0.45);
    --accent-glow-subtle: rgba(255, 81, 0, 0.12);
    --tick-active-color: rgba(255, 81, 0, 0.88);
}

body[data-theme="toxic-green"] {
    --accent-primary: #00ff41;
    --accent-secondary: #76ff03;
    --accent-highlight: #f0fff4;
    --accent-glow: rgba(0, 255, 65, 0.45);
    --accent-glow-subtle: rgba(0, 255, 65, 0.12);
    --tick-active-color: rgba(0, 255, 65, 0.88);
}

body[data-theme="amethyst"] {
    --accent-primary: #a855f7;
    --accent-secondary: #d946ef;
    --accent-highlight: #faf5ff;
    --accent-glow: rgba(168, 85, 247, 0.42);
    --accent-glow-subtle: rgba(168, 85, 247, 0.1);
    --tick-active-color: rgba(168, 85, 247, 0.85);
}

body[data-theme="rose-gold"] {
    --accent-primary: #f43f5e;
    --accent-secondary: #fb923c;
    --accent-highlight: #fff1f2;
    --accent-glow: rgba(244, 63, 94, 0.42);
    --accent-glow-subtle: rgba(244, 63, 94, 0.1);
    --tick-active-color: rgba(244, 63, 94, 0.85);
}

body[data-theme="electric-blue"] {
    --accent-primary: #2563eb;
    --accent-secondary: #38bdf8;
    --accent-highlight: #eff6ff;
    --accent-glow: rgba(37, 99, 235, 0.45);
    --accent-glow-subtle: rgba(37, 99, 235, 0.12);
    --tick-active-color: rgba(37, 99, 235, 0.88);
}

body[data-theme="cyber-yellow"] {
    --accent-primary: #ffe600;
    --accent-secondary: #ff9500;
    --accent-highlight: #fffde7;
    --accent-glow: rgba(255, 230, 0, 0.45);
    --accent-glow-subtle: rgba(255, 230, 0, 0.12);
    --tick-active-color: rgba(255, 230, 0, 0.88);
}

body[data-theme="crimson-void"] {
    --accent-primary: #dc2626;
    --accent-secondary: #f87171;
    --accent-highlight: #fef2f2;
    --accent-glow: rgba(220, 38, 38, 0.45);
    --accent-glow-subtle: rgba(220, 38, 38, 0.12);
    --tick-active-color: rgba(220, 38, 38, 0.88);
}

body[data-theme="arctic-frost"] {
    --accent-primary: #67e8f9;
    --accent-secondary: #e2e8f0;
    --accent-highlight: #ffffff;
    --accent-glow: rgba(103, 232, 249, 0.4);
    --accent-glow-subtle: rgba(103, 232, 249, 0.1);
    --tick-active-color: rgba(103, 232, 249, 0.85);
}

/* ----------------------------------------------------------------------------
 * 2. RESET & BASE
 * ---------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background-color: #040609;
    background-image: 
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(20, 35, 65, 0.45) 0%, transparent 70%),
        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(16, 26, 46, 0.5) 0%, transparent 75%),
        radial-gradient(circle at 50% 50%, #0a0e18 0%, #06080e 65%, #030406 100%);
    color: var(--text-primary);
    font-family: var(--font-display);
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 1.2s cubic-bezier(0.16, 1, 0.3, 1), background-image 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Utilitário universal de acessibilidade: visível para leitores de tela, oculto visualmente */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ambiência Celeste: Modo Dia Ensolarado */
body.sky-day {
    background-color: #0c1c38;
    background-image: 
        radial-gradient(ellipse 95% 70% at 70% 12%, rgba(56, 160, 255, 0.38) 0%, rgba(20, 80, 160, 0.28) 45%, transparent 75%),
        radial-gradient(circle at 20% 85%, rgba(251, 191, 36, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, #10274c 0%, #0c1e3b 35%, #081427 70%, #040a14 100%);
}

/* Ambiência Especial: Pôr do Sol & Crepúsculo (Sunset & Golden Hour) */
body.sky-day.sky-sunset {
    background-color: #120e24;
    background-image: 
        radial-gradient(ellipse 95% 70% at 85% 25%, rgba(249, 115, 22, 0.42) 0%, rgba(239, 68, 68, 0.28) 35%, rgba(124, 58, 237, 0.18) 60%, transparent 80%),
        radial-gradient(circle at 15% 85%, rgba(251, 146, 60, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #1c1432 0%, #17112a 35%, #0f0a1d 70%, #06040c 100%);
}

/* Ambiência Celeste: Modo Noite Estrelada Cósmica */
body.sky-night {
    background-color: #020408;
    background-image: 
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(20, 35, 65, 0.45) 0%, transparent 70%),
        radial-gradient(ellipse 80% 50% at 85% 20%, rgba(55, 25, 90, 0.22) 0%, transparent 65%),
        radial-gradient(circle at 50% 50%, #080c16 0%, #04060c 65%, #010204 100%);
}

/* ----------------------------------------------------------------------------
 * 3. AMBIÊNCIA, GRADE HUD & CANVAS DE PARTÍCULAS
 * ---------------------------------------------------------------------------- */
/* Luz de Fundo Reativa (Aura Luminosa) */
.ambient-glow {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vmin;
    height: 95vmin;
    background: radial-gradient(
        circle,
        var(--accent-glow) 0%,
        var(--accent-glow-subtle) 35%,
        rgba(10, 16, 28, 0.4) 65%,
        transparent 80%
    );
    filter: blur(65px);
    pointer-events: none;
    z-index: 1;
    transition: background 1.2s ease, transform 0.8s ease-out;
    will-change: transform, opacity;
}

/* Canvas de Partículas Estelares Fluidas */
.particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.65;
}

/* Grade Geométrica HUD Fina de Fundo */
.hud-background-grid {
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    pointer-events: none;
    z-index: 3;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
}

/* ============================================================================
 * SOL ATMOSFÉRICO & RAIOS CELESTES (MODO DIA ENSOLARADO)
 * ============================================================================ */
.sun-container {
    position: fixed;
    top: 14%;
    left: 75%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), top 1.5s ease-out, left 1.5s ease-out;
    will-change: opacity, transform, top, left;
}

body.sky-day .sun-container {
    opacity: 1;
}

/* Reduz brilho invasivo no Modo Zen para descanso visual */
body.zen-mode.sky-day .sun-container {
    opacity: 0.55;
    filter: saturate(0.85);
}

/* Disco Central do Sol (Sun Orb) */
.sun-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fff6d6 35%, #fde047 70%, #f59e0b 100%);
    box-shadow: 
        0 0 45px 16px rgba(254, 240, 138, 0.85),
        0 0 95px 45px rgba(245, 158, 11, 0.45),
        0 0 170px 85px rgba(217, 119, 6, 0.22);
    animation: sunOrbBreath 6s ease-in-out infinite alternate;
}

/* Feixes e Raios Solares Giratórios (Sun Rays) */
.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(254, 243, 199, 0.22) 0deg 14deg,
        transparent 14deg 28deg,
        rgba(253, 230, 138, 0.28) 28deg 42deg,
        transparent 42deg 56deg
    );
    filter: blur(8px);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 15%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 15%, transparent 72%);
    animation: sunRaySpin 70s linear infinite;
}

/* Corona e Resplendor Atmosférico Suave (Sun Glow) */
.sun-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 224, 71, 0.20) 0%, rgba(245, 158, 11, 0.10) 45%, transparent 72%);
    filter: blur(35px);
    animation: sunGlowPulse 7s ease-in-out infinite alternate;
}

/* Variação Atmosférica de Pôr do Sol (Sunset / Golden Hour) */
.sun-container.sunset-glow .sun-orb {
    background: radial-gradient(circle at 35% 35%, #fff1d6 0%, #fb923c 35%, #f97316 65%, #dc2626 100%);
    box-shadow: 
        0 0 55px 22px rgba(249, 115, 22, 0.92),
        0 0 115px 55px rgba(220, 38, 38, 0.55),
        0 0 200px 100px rgba(185, 28, 28, 0.30);
}

.sun-container.sunset-glow .sun-rays {
    background: repeating-conic-gradient(
        from 0deg,
        rgba(254, 215, 170, 0.25) 0deg 14deg,
        transparent 14deg 28deg,
        rgba(251, 146, 60, 0.30) 28deg 42deg,
        transparent 42deg 56deg
    );
}

.sun-container.sunset-glow .sun-glow {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.35) 0%, rgba(220, 38, 38, 0.20) 45%, transparent 75%);
}

/* Variação Atmosférica de Alvorada / Nascer do Sol (Sunrise) */
.sun-container.sunrise-glow .sun-orb {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fef08a 35%, #f59e0b 70%, #ea580c 100%);
    box-shadow: 
        0 0 50px 18px rgba(254, 240, 138, 0.88),
        0 0 100px 48px rgba(245, 158, 11, 0.50),
        0 0 180px 90px rgba(234, 88, 12, 0.25);
}

@keyframes sunOrbBreath {
    0% { transform: translate(-50%, -50%) scale(0.96); filter: brightness(1); }
    100% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.15); }
}

@keyframes sunRaySpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sunGlowPulse {
    0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.65; }
    100% { transform: translate(-50%, -50%) scale(1.10); opacity: 1; }
}

/* ============================================================================
 * PALCO DE PAISAGENS & CENÁRIOS CELESTES DINÂMICOS (GALÁXIAS, AURORAS & DIURNOS)
 * ============================================================================ */
.dynamic-landscape-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.landscape-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.4s;
    will-change: opacity, transform;
    pointer-events: none;
}

/* Regras de Ativação Conforme Modo & Seleção do Usuário */
body.sky-night[data-night-bg="aurora-borealis"] #layerAuroraBorealis,
body.sky-night:not([data-night-bg]) #layerAuroraBorealis,
body.sky-night[data-night-bg="galaxy-andromeda"] #layerGalaxyAndromeda,
body.sky-night[data-night-bg="nebula-orion"] #layerNebulaOrion,
body.sky-night[data-night-bg="aurora-austral"] #layerAuroraAustral,
body.sky-night[data-night-bg="cosmos-classic"] #layerCosmosClassic,
body.sky-day[data-day-bg="day-clouds"] #layerDayClouds,
body.sky-day:not([data-day-bg]) #layerDayClouds,
body.sky-day[data-day-bg="day-dawn"] #layerDayDawn,
body.sky-day[data-day-bg="day-sunset"] #layerDaySunset,
body.sky-day[data-day-bg="day-ocean"] #layerDayOcean,
body.sky-day[data-day-bg="day-zenith"] #layerDayZenith {
    opacity: 1;
    visibility: visible;
}

/* Suavização no Modo Zen para não poluir leitura */
body.zen-mode .dynamic-landscape-stage {
    opacity: 0.75;
    filter: contrast(0.95);
}

/* ----------------------------------------------------------------------------
 * 1. AURORA BOREAL ÁRTICA (Cortinas Fluidas Verde Esmeralda & Ciano)
 * ---------------------------------------------------------------------------- */
#layerAuroraBorealis {
    background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(0, 245, 160, 0.12) 0%, transparent 70%);
}

.aurora-ribbon {
    position: absolute;
    top: -15%;
    left: -20%;
    width: 140%;
    height: 75vh;
    background: linear-gradient(
        180deg,
        rgba(0, 245, 160, 0) 0%,
        rgba(0, 245, 160, 0.35) 25%,
        rgba(0, 242, 254, 0.40) 45%,
        rgba(168, 85, 247, 0.22) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    filter: blur(55px);
    transform-origin: 50% 0%;
    animation: auroraWaveFlow 22s ease-in-out infinite alternate;
}

.aurora-ribbon-2 {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 130%;
    height: 65vh;
    background: linear-gradient(
        180deg,
        rgba(0, 255, 200, 0) 0%,
        rgba(5, 150, 105, 0.25) 20%,
        rgba(6, 182, 212, 0.30) 45%,
        rgba(99, 102, 241, 0.20) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    filter: blur(65px);
    transform-origin: 30% 0%;
    animation: auroraWaveFlow2 28s ease-in-out infinite alternate;
}

@keyframes auroraWaveFlow {
    0% {
        transform: scaleY(0.9) skewX(-6deg) translate3d(-3%, 0, 0);
        opacity: 0.75;
    }
    50% {
        transform: scaleY(1.15) skewX(4deg) translate3d(2%, 4%, 0);
        opacity: 1;
    }
    100% {
        transform: scaleY(0.95) skewX(-3deg) translate3d(-1%, -2%, 0);
        opacity: 0.8;
    }
}

@keyframes auroraWaveFlow2 {
    0% {
        transform: scaleY(1.1) skewX(5deg) translate3d(2%, 0, 0);
        opacity: 0.65;
    }
    50% {
        transform: scaleY(0.85) skewX(-5deg) translate3d(-3%, 3%, 0);
        opacity: 0.95;
    }
    100% {
        transform: scaleY(1.05) skewX(2deg) translate3d(1%, -2%, 0);
        opacity: 0.7;
    }
}

/* ----------------------------------------------------------------------------
 * 2. GALÁXIA ESPIRAL ANDRÔMEDA (Disco Cósmico Inclinado com Rotação Leve)
 * ---------------------------------------------------------------------------- */
#layerGalaxyAndromeda {
    perspective: 1200px;
}

.galaxy-disc-wrap {
    position: absolute;
    top: 40%;
    left: 55%;
    width: min(1100px, 95vw);
    height: min(750px, 75vh);
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(32deg);
    transform-style: preserve-3d;
}

.galaxy-spiral-arm-1 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(139, 92, 246, 0.28) 0deg 35deg,
        transparent 35deg 70deg,
        rgba(56, 189, 248, 0.22) 70deg 110deg,
        transparent 110deg 150deg,
        rgba(192, 132, 252, 0.26) 150deg 190deg,
        transparent 190deg 230deg,
        rgba(56, 189, 248, 0.20) 230deg 270deg,
        transparent 270deg 360deg
    );
    filter: blur(28px);
    animation: galaxySlowSpin 160s linear infinite;
}

.galaxy-spiral-arm-2 {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 45deg,
        rgba(236, 72, 153, 0.22) 0deg 40deg,
        transparent 40deg 90deg,
        rgba(129, 140, 248, 0.26) 90deg 135deg,
        transparent 135deg 180deg
    );
    filter: blur(36px);
    animation: galaxySlowSpin 120s linear infinite reverse;
}

.galaxy-core-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        #ffffff 0%,
        rgba(254, 240, 138, 0.85) 20%,
        rgba(192, 132, 252, 0.65) 45%,
        rgba(99, 102, 241, 0.35) 70%,
        transparent 90%
    );
    box-shadow: 
        0 0 70px 30px rgba(254, 240, 138, 0.5),
        0 0 140px 60px rgba(168, 85, 247, 0.35);
    filter: blur(12px);
    animation: galaxyCoreBreath 8s ease-in-out infinite alternate;
}

@keyframes galaxySlowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes galaxyCoreBreath {
    0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* ----------------------------------------------------------------------------
 * 3. NEBULOSA CÓSMICA DE ÓRION (Nuvens de Gás Interestelar Magenta & Violeta)
 * ---------------------------------------------------------------------------- */
.nebula-cloud-drift {
    position: absolute;
    inset: -15%;
    background: 
        radial-gradient(ellipse 55% 45% at 28% 35%, rgba(217, 70, 239, 0.32) 0%, transparent 65%),
        radial-gradient(ellipse 65% 55% at 72% 65%, rgba(147, 51, 234, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 45% 40% at 50% 50%, rgba(244, 63, 94, 0.22) 0%, transparent 60%),
        radial-gradient(circle at 75% 25%, rgba(59, 130, 246, 0.25) 0%, transparent 55%);
    filter: blur(60px);
    animation: nebulaPulseBreath 26s ease-in-out infinite alternate;
}

@keyframes nebulaPulseBreath {
    0% {
        transform: scale(0.94) rotate(0deg);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.06) rotate(1.5deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.98) rotate(-1.5deg);
        opacity: 0.82;
    }
}

/* ----------------------------------------------------------------------------
 * 4. AURORA AUSTRAL BIPOLAR (Colunas Turquesa & Azul Antártico)
 * ---------------------------------------------------------------------------- */
.austral-curtain {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(6, 182, 212, 0.0) 0%,
        rgba(6, 182, 212, 0.28) 3%,
        rgba(14, 165, 233, 0.35) 6%,
        rgba(59, 130, 246, 0.22) 9%,
        rgba(6, 182, 212, 0.0) 14%
    );
    mask-image: linear-gradient(180deg, transparent 5%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.8) 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 5%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.8) 75%, transparent 100%);
    filter: blur(35px);
    animation: australShimmer 16s ease-in-out infinite alternate;
}

@keyframes australShimmer {
    0% {
        transform: translateY(0%) scaleX(0.95);
        opacity: 0.7;
    }
    50% {
        transform: translateY(3%) scaleX(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(-2%) scaleX(0.98);
        opacity: 0.75;
    }
}

/* ----------------------------------------------------------------------------
 * 5. COSMOS ESTRELADO CLÁSSICO
 * ---------------------------------------------------------------------------- */
#layerCosmosClassic {
    background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.35) 0%, transparent 80%);
}

/* ----------------------------------------------------------------------------
 * 6. CENÁRIO DIURNO: NUVENS EM BRISA LEVE (Deslocamento Fluido Eetérea)
 * ---------------------------------------------------------------------------- */
.cloud-drift-track {
    position: absolute;
    inset: 0;
    width: 200%;
    pointer-events: none;
}

.cloud-track-slow {
    animation: cloudDriftSlow 110s linear infinite;
}

.cloud-track-fast {
    animation: cloudDriftFast 70s linear infinite;
    opacity: 0.75;
}

.ether-cloud {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.18) 45%,
        rgba(255, 255, 255, 0.0) 75%
    );
    filter: blur(20px);
}

@keyframes cloudDriftSlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes cloudDriftFast {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------------------
 * 7. CENÁRIO DIURNO: ALVORADA DOURADA & MONTANHAS
 * ---------------------------------------------------------------------------- */
.dawn-horizon-sun {
    position: absolute;
    bottom: -10%;
    left: 0;
    right: 0;
    height: 55vh;
    background: radial-gradient(
        ellipse 90% 70% at 50% 100%,
        rgba(254, 215, 170, 0.45) 0%,
        rgba(251, 146, 60, 0.30) 35%,
        rgba(244, 63, 94, 0.15) 60%,
        transparent 80%
    );
    filter: blur(40px);
    animation: dawnBreath 10s ease-in-out infinite alternate;
}

.dawn-mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26vh;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.35) 0%, rgba(15, 23, 42, 0.75) 100%);
    clip-path: polygon(
        0% 100%, 0% 55%, 12% 40%, 25% 62%, 38% 30%, 52% 52%, 65% 35%, 78% 58%, 90% 38%, 100% 48%, 100% 100%
    );
    -webkit-clip-path: polygon(
        0% 100%, 0% 55%, 12% 40%, 25% 62%, 38% 30%, 52% 52%, 65% 35%, 78% 58%, 90% 38%, 100% 48%, 100% 100%
    );
    opacity: 0.55;
}

@keyframes dawnBreath {
    0% { transform: scaleY(0.95); opacity: 0.8; }
    100% { transform: scaleY(1.08); opacity: 1; }
}

/* ----------------------------------------------------------------------------
 * 8. CENÁRIO DIURNO: PÔR DO SOL ÂMBAR & COLINAS
 * ---------------------------------------------------------------------------- */
.sunset-horizon-glow {
    position: absolute;
    bottom: -5%;
    left: 0;
    right: 0;
    height: 60vh;
    background: radial-gradient(
        ellipse 95% 65% at 50% 100%,
        rgba(249, 115, 22, 0.50) 0%,
        rgba(225, 29, 72, 0.32) 35%,
        rgba(124, 58, 237, 0.18) 65%,
        transparent 85%
    );
    filter: blur(45px);
    animation: sunsetGlowPulse 12s ease-in-out infinite alternate;
}

.sunset-hills {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22vh;
    background: linear-gradient(180deg, rgba(28, 25, 23, 0.4) 0%, rgba(12, 10, 9, 0.8) 100%);
    clip-path: polygon(
        0% 100%, 0% 65%, 20% 50%, 40% 62%, 60% 45%, 80% 58%, 100% 52%, 100% 100%
    );
    -webkit-clip-path: polygon(
        0% 100%, 0% 65%, 20% 50%, 40% 62%, 60% 45%, 80% 58%, 100% 52%, 100% 100%
    );
    opacity: 0.6;
}

@keyframes sunsetGlowPulse {
    0% { transform: scale(0.96); opacity: 0.85; }
    100% { transform: scale(1.05); opacity: 1; }
}

/* ----------------------------------------------------------------------------
 * 9. CENÁRIO DIURNO: OCEANO SERENO & HORIZONTE
 * ---------------------------------------------------------------------------- */
.ocean-water {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36vh;
    background: linear-gradient(180deg, rgba(3, 105, 161, 0.22) 0%, rgba(8, 47, 73, 0.70) 100%);
    border-top: 1px solid rgba(56, 189, 248, 0.25);
}

.ocean-caustics-shimmer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36vh;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        rgba(255, 255, 255, 0.05) 12px,
        transparent 24px
    );
    animation: oceanRhythm 7s ease-in-out infinite alternate;
}

@keyframes oceanRhythm {
    0% { transform: scaleY(0.92); opacity: 0.45; }
    100% { transform: scaleY(1.08); opacity: 0.85; }
}

/* ----------------------------------------------------------------------------
 * 10. CENÁRIO DIURNO: SOL ZÊNITE ATMOSFÉRICO
 * ---------------------------------------------------------------------------- */
#layerDayZenith {
    background: radial-gradient(circle at 50% 15%, rgba(254, 240, 138, 0.18) 0%, transparent 65%);
}

.landscape-pill-group .interval-pill {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.03em;
}

/* ----------------------------------------------------------------------------
 * 4. ESTRUTURA DO VIEWPORT & CABEÇALHO HUD
 * ---------------------------------------------------------------------------- */
.viewport-wrapper {
    position: relative;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: clamp(16px, 3vh, 32px) clamp(16px, 4vw, 40px);
    perspective: 1200px;
}

/* Marcadores Reticulares Geométricos de Canto HUD */
.hud-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 5;
    transition: border-color 0.4s ease;
}

.corner-tl { top: clamp(12px, 2.5vmin, 24px); left: clamp(12px, 2.5vmin, 24px); border-right: none; border-bottom: none; }
.corner-tr { top: clamp(12px, 2.5vmin, 24px); right: clamp(12px, 2.5vmin, 24px); border-left: none; border-bottom: none; }
.corner-bl { bottom: clamp(12px, 2.5vmin, 24px); left: clamp(12px, 2.5vmin, 24px); border-right: none; border-top: none; }
.corner-br { bottom: clamp(12px, 2.5vmin, 24px); right: clamp(12px, 2.5vmin, 24px); border-left: none; border-top: none; }

/* Cabeçalho de Telemetria */
.hud-header {
    width: 100%;
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.85;
    animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hud-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: clamp(10px, 1.2vmin, 12px);
    letter-spacing: 0.12em;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hud-label {
    color: var(--text-tertiary);
    font-weight: 600;
}

.hud-value {
    color: var(--text-secondary);
    font-weight: 500;
}

.status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: statusBlink 2.4s infinite ease-in-out;
}

.status-indicator.syncing {
    background-color: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-primary);
}

.status-indicator.offline {
    background-color: #eab308;
    box-shadow: 0 0 8px #eab308;
}

/* ----------------------------------------------------------------------------
 * 5. PALCO DO CRONÔMETRO (3D TILT & HOUSING)
 * ---------------------------------------------------------------------------- */
.chronometer-stage {
    position: relative;
    width: 100%;
    max-width: 900px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    margin-top: -6.5vmin;
}

.chronometer-card {
    position: relative;
    width: var(--card-size);
    height: var(--card-size);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* transform gerenciado exclusivamente via interpolação lerp matemática no JS para fluidez absoluta */
    will-change: transform;
}

/* Estado de Destaque / Zoom durante telas informativas do Giro 3D */
.chronometer-card.flipping-info {
    z-index: 30;
}

/* ----------------------------------------------------------------------------
 * MECANISMO DE GIRO 3D DO CÍRCULO (FLIP HORÁRIO ESQUERDA PARA DIREITA)
 * ---------------------------------------------------------------------------- */
.clock-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1.25s cubic-bezier(0.34, 1.15, 0.64, 1);
    will-change: transform;
}

.clock-flipper-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.clock-face-front {
    transform: rotateY(0deg);
    z-index: 2;
}

.clock-face-back {
    transform: rotateY(180deg);
    z-index: 1;
}

.clock-face-timezones {
    transform: rotateY(0deg);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.clock-face-bible {
    transform: rotateY(0deg);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.clock-face-events {
    transform: rotateY(0deg);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* ----------------------------------------------------------------------------
 * 6. ANÉIS ORBITAIS SVG (INDICADOR DE 60 SEGUNDOS)
 * ---------------------------------------------------------------------------- */
.orbital-rings-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transform: translateZ(10px);
}

.orbital-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Trilhas Guia Estáticas & Demarcações Perimétricas */
.ring-track {
    fill: none;
    stroke: var(--dial-line-color, var(--track-color));
    stroke-width: 1.5;
    opacity: calc(var(--dial-line-opacity, 0.70) * 0.45);
    transition: stroke 0.35s ease, opacity 0.35s ease;
}

.minutes-track {
    stroke-dasharray: 2 4;
    opacity: calc(var(--dial-line-opacity, 0.70) * 0.7);
}

/* Linhas Sutis & Textos Cardinais HUD */
.ring-subtle {
    fill: none;
    stroke: var(--dial-line-color, rgba(255, 255, 255, 0.08));
    stroke-width: 1;
    opacity: calc(var(--dial-line-opacity, 0.70) * 0.35);
    transition: stroke 0.35s ease, opacity 0.35s ease;
}

.ring-subtle.dashed {
    stroke-dasharray: 3 6;
    opacity: calc(var(--dial-line-opacity, 0.70) * 0.60);
}

.cardinal-text {
    fill: var(--dial-line-color, rgba(255, 255, 255, 0.3));
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    opacity: var(--dial-line-opacity, 0.70);
    transition: fill 0.35s ease, opacity 0.35s ease;
}

/* Anéis Progressivos */
.ring-progress {
    fill: none;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 300px 300px;
    transition: stroke 0.6s ease;
}

/* Anel de 60 Segundos: Circunferência = 2 * PI * 260 ≈ 1633.63 */
.seconds-progress {
    stroke-width: 3.2;
    stroke-dasharray: 1633.63;
    stroke-dashoffset: 1633.63;
    will-change: stroke-dashoffset;
}

/* Marcador Circular Orbital que viaja no ápice */
.orbital-head {
    fill: var(--accent-highlight);
    stroke: var(--accent-primary);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px var(--accent-primary));
    transform-origin: 300px 300px;
    will-change: transform;
}

/* Anel de Minutos: Circunferência = 2 * PI * 236 ≈ 1482.83 */
.minutes-progress {
    stroke-width: 1.5;
    stroke-dasharray: 1482.83;
    stroke-dashoffset: 1482.83;
    opacity: 0.85;
}

/* Ticks / Marcadores de Escala de 60 Segundos */
.tick-mark {
    stroke: var(--dial-line-color, var(--tick-color));
    stroke-width: 1;
    opacity: calc(var(--dial-line-opacity, 0.70) * 0.50);
    transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
}

.tick-mark.active {
    stroke: var(--accent-primary);
    stroke-width: 2;
    opacity: 1 !important;
    filter: drop-shadow(0 0 3px var(--accent-primary));
}

.tick-mark.major {
    stroke-width: 1.8;
    stroke: var(--dial-line-color, rgba(255, 255, 255, 0.28));
    opacity: var(--dial-line-opacity, 0.70);
}

.tick-mark.major.active {
    stroke: var(--accent-primary);
    stroke-width: 2.4;
    opacity: 1 !important;
    filter: drop-shadow(0 0 4px var(--accent-primary));
}

.cardinal-mark {
    stroke: var(--dial-line-color, var(--text-tertiary));
    stroke-width: 1.5;
    opacity: var(--dial-line-opacity, 0.70);
    transition: stroke 0.35s ease, opacity 0.35s ease;
}

/* Geometrias Horárias Dinâmicas (Removidas a pedido do usuário) */
.hourly-geometry-group {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

.hour-geometry-primary,
.hour-geometry-subtle {
    display: none !important;
    animation: none !important;
}

/* ----------------------------------------------------------------------------
 * 6.1 MOSTRADOR ANALÓGICO HUD (PONTEIROS LUMINOSOS & TICKS DE PRECISÃO)
 * ---------------------------------------------------------------------------- */
.analog-dial-group {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.analog-mode .analog-dial-group {
    opacity: 1;
    pointer-events: auto;
}

/* No modo analógico, a forma geométrica sai de cena e só volta quando for digital */
body.analog-mode .hourly-geometry-group {
    opacity: 0 !important;
    transform: scale(0.65) rotate(45deg) !important;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none;
}

body.analog-mode .core-geometry-watermark {
    opacity: 0 !important;
    transform: scale(0.65) rotate(-45deg) !important;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none;
}

body.analog-mode .core-micro-header #geometryBadge {
    opacity: 0.2;
    transform: translateY(-2px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Elevação 3D: No modo analógico, os ponteiros e anéis sobem à frente do vidro central */
body.analog-mode .orbital-rings-container {
    transform: translateZ(48px) !important;
    z-index: 35 !important;
}

/* No modo analógico, a hora digital forma um mostrador híbrido sofisticado em segundo plano */
body.analog-mode .time-display {
    opacity: 0.35;
    transform: scale(0.88);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
    transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

body.analog-mode .time-display:hover {
    opacity: 0.90;
    filter: drop-shadow(0 0 18px var(--accent-glow));
}

body.analog-mode .subsecond-wrapper {
    opacity: 0 !important;
    pointer-events: none;
}

/* Marcadores Horários (Ticks) do Relógio Analógico */
.analog-hour-mark {
    stroke: var(--dial-line-color, rgba(255, 255, 255, 0.45));
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: var(--dial-line-opacity, 0.70);
    transition: stroke 0.4s ease, opacity 0.4s ease;
}

.analog-hour-mark.major {
    stroke: var(--accent-primary);
    stroke-width: 3.4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* Ponteiros Analógicos de Alta Precisão */
.analog-hand {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analog-hand.hour-hand {
    stroke: var(--accent-highlight, #ffffff);
    stroke-width: 5.5;
    filter: drop-shadow(0 0 4px #000000) drop-shadow(0 0 10px var(--accent-glow));
}

.analog-hand-tip.hour-tip {
    fill: var(--accent-highlight, #ffffff);
    stroke: #000000;
    stroke-width: 0.8;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.analog-hand.minute-hand {
    stroke: var(--accent-primary);
    stroke-width: 4;
    filter: drop-shadow(0 0 4px #000000) drop-shadow(0 0 12px var(--accent-glow));
}

.analog-hand-tip.minute-tip {
    fill: var(--accent-primary);
    stroke: #000000;
    stroke-width: 0.8;
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

.analog-hand.second-hand {
    stroke: #ff2a5f;
    stroke-width: 2.4;
    filter: drop-shadow(0 0 3px #000000) drop-shadow(0 0 8px rgba(255, 42, 95, 0.95));
}

.analog-second-glow-dot {
    fill: #ffffff;
    stroke: #ff2a5f;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 10px #ff2a5f) drop-shadow(0 0 4px #ffffff);
}

.analog-second-counterweight {
    fill: #ff2a5f;
    stroke: #ffffff;
    stroke-width: 1.2;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.9));
}

/* Pivô Central Luminescente */
.analog-center-base {
    fill: var(--accent-primary);
    stroke: #000000;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.analog-center-cap {
    fill: #ffffff;
    filter: drop-shadow(0 0 4px #ffffff);
}

/* ----------------------------------------------------------------------------
 * 7. NÚCLEO TRANSLÚCIDO // GLASS FOSCO E LUSTROSO (FROSTED & GLOSSY)
 * ---------------------------------------------------------------------------- */
.glass-core,
.glass-core-back,
.glass-core-timezones,
.glass-core-bible-face,
.glass-core-events-face {
    position: relative;
    width: 74%;
    height: 74%;
    border-radius: 50%;
    /* FOSCO E LUSTROSO: Gradiente multicamada acetinado com alta profundidade e cor/opacidade 100% reguláveis */
    background: radial-gradient(
        125% 125% at 32% 18%,
        rgba(255, 255, 255, calc(var(--core-opacity, 0.70) * 0.28)) 0%,
        rgba(var(--core-base-color, 15, 23, 38), calc(var(--core-opacity, 0.70) * 0.40)) 28%,
        rgba(var(--core-base-color, 15, 23, 38), calc(var(--core-opacity, 0.70) * 0.85)) 60%,
        rgba(var(--core-base-color, 15, 23, 38), var(--core-opacity, 0.70)) 100%
    ) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.50); /* Borda chanfrada superior brilhante/lustrosa */
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 
        inset 0 2px 3px 0 rgba(255, 255, 255, 0.45),      /* Reflexo especular chanfrado no topo */
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.70),            /* Sombra óptica profunda na base */
        inset 1.5px 0 2px 0 rgba(255, 255, 255, 0.20),    /* Reflexo lateral sutil */
        inset 0 0 35px 0 rgba(255, 255, 255, 0.04),       /* Dispersão interna de vidro fosco */
        0 28px 70px -15px rgba(0, 0, 0, 0.88),            /* Sombra de profundidade física flutuante */
        /* Projeção Direcional Otimizada (ativa apenas eixos com valor > 0, economizando GPU) */
        var(--optic-directional-shadow, 0 var(--optic-light-bottom, 12px) calc(var(--optic-light-bottom, 12px) * 1.8) calc(var(--optic-light-bottom, 12px) * 0.3) var(--optic-light-color, var(--accent-primary))) !important;
    backdrop-filter: blur(var(--core-blur, 24px)) saturate(210%) contrast(106%) !important;
    -webkit-backdrop-filter: blur(var(--core-blur, 24px)) saturate(210%) contrast(106%) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(18px, 3.8vmin, 40px);
    overflow: hidden;
    transform: translateZ(35px);
    transition: border-color 0.4s ease;
    container-type: inline-size;
    container-name: core-stage;
}

/* Brilho Especular Superior do Vidro (Acabamento Lustroso / Polido) */
.glass-core::before,
.glass-core-back::before,
.glass-core-timezones::before,
.glass-core-bible-face::before,
.glass-core-events-face::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 8%;
    right: 8%;
    height: 48%;
    background: linear-gradient(
        175deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.10) 30%,
        rgba(255, 255, 255, 0.02) 65%,
        transparent 100%
    );
    border-radius: 50% / 40%;
    pointer-events: none;
    z-index: 8;
}

/* Reflexo Óptico Inferior de Vidro Cristalino (Lente Lustrosa) */
.glass-core::after,
.glass-core-back::after,
.glass-core-timezones::after,
.glass-core-bible-face::after,
.glass-core-events-face::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 20%;
    right: 20%;
    height: 16%;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 80%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
}

/* ----------------------------------------------------------------------------
 * 7.1 TELEMETRIA AMBIENTAL (FACE TRASEIRA: LUGAR, TEMPERATURA E LUA)
 * ---------------------------------------------------------------------------- */
.back-orbital {
    opacity: 0.65;
}

.glass-core-back {
    gap: 6px;
    text-align: center;
    z-index: 5;
}

.telemetry-badge {
    background: rgba(var(--accent-primary-rgb, 0, 242, 254), 0.14) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    font-size: 8.5px !important;
    letter-spacing: 0.12em !important;
    padding: 3px 8px !important;
}

.telemetry-status-badge {
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.14) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.telemetry-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.telemetry-tag-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.telemetry-city {
    font-family: var(--font-mono);
    font-size: clamp(16px, 2.8vmin, 22px);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    text-shadow: 0 0 12px var(--accent-glow);
    line-height: 1.1;
}

.telemetry-country {
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 1px;
}

.telemetry-sep {
    width: 50%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    margin: 2px 0;
}

.telemetry-weather-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.telemetry-weather-icon {
    font-size: clamp(24px, 4vmin, 32px);
    line-height: 1;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.telemetry-temp {
    font-family: var(--font-digits);
    font-size: clamp(28px, 4.8vmin, 38px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    text-shadow: 0 0 16px var(--accent-glow);
}

.telemetry-weather-desc {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2px;
}

.telemetry-weather-sub {
    font-size: 8px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-top: 2px;
}

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

.telemetry-moon-canvas {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.telemetry-moon-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

.telemetry-moon-labels {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.telemetry-moon-phase {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-primary);
    line-height: 1.1;
}

.telemetry-moon-illum {
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--accent-primary);
    text-transform: uppercase;
}

.telemetry-footer {
    width: 72%;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.telemetry-footer-text {
    font-size: 7.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.telemetry-bar-wrap {
    width: 100%;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.telemetry-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
    box-shadow: 0 0 6px var(--accent-glow);
    transition: width 0.1s linear;
}

/* ----------------------------------------------------------------------------
 * 7.2 FUSOS HORÁRIOS GLOBAIS (FACE 3 DO GIRO: CAPITAIS DO MUNDO)
 * ---------------------------------------------------------------------------- */
.glass-core-timezones {
    gap: 6px;
    text-align: center;
    z-index: 5;
}

.dual-tz-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 8px;
    padding: 6px 4px;
    margin: 4px 0;
}

.tz-card-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 8px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.tz-card-tag {
    font-size: 7.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sat-left-color, var(--accent-primary));
    opacity: 0.9;
}

#tzColRight .tz-card-tag {
    color: var(--sat-right-color, var(--accent-secondary));
}

.tz-card-city {
    font-family: var(--font-mono);
    font-size: clamp(13px, 2.3vmin, 17px);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    line-height: 1.1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.tz-card-country {
    font-size: 7.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-top: 1px;
}

.tz-card-time {
    font-family: var(--font-digits);
    font-size: clamp(16px, 3.2vmin, 23px);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 2px 0;
    text-shadow: 0 0 12px var(--sat-left-glow, var(--accent-glow));
}

#tzColRight .tz-card-time {
    text-shadow: 0 0 12px var(--sat-right-glow, var(--accent-glow));
}

.tz-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.tz-card-delta {
    color: #10b981;
    background: rgba(16, 185, 129, 0.14);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.tz-card-bullet {
    color: rgba(255, 255, 255, 0.25);
}

.tz-card-abbr {
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.tz-vertical-sep {
    width: 1px;
    height: 80px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0.2) 70%,
        transparent 100%
    );
}

/* ----------------------------------------------------------------------------
 * 7.3 BÍBLIA SAGRADA (FACE 4 DO GIRO 3D: PALAVRA DE VIDA)
 * ---------------------------------------------------------------------------- */
.glass-core-bible-face {
    gap: 8px;
    text-align: center;
    z-index: 5;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.bible-face-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    max-width: 90%;
    margin: auto 0;
}

.bible-face-icon-badge {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 8px var(--accent-glow));
    animation: gentlePulse 3s ease-in-out infinite;
}

.bible-face-verse-text {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: clamp(12px, 2.2vmin, 15px);
    font-weight: 500;
    line-height: 1.48;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 12px var(--accent-glow);
    font-style: italic;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: none;
}

.bible-face-verse-text::-webkit-scrollbar {
    display: none;
}

.bible-face-reference {
    font-family: var(--font-mono);
    font-size: clamp(11px, 1.8vmin, 13px);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-primary);
    text-transform: uppercase;
    margin-top: 8px;
    text-shadow: 0 0 10px var(--accent-glow);
}

/* ----------------------------------------------------------------------------
 * 7.4 CONTAGENS REGRESSIVAS & DATAS ESPECIAIS (FACE 5 DO GIRO 3D)
 * ---------------------------------------------------------------------------- */
.glass-core-events-face {
    gap: 6px;
    text-align: center;
    z-index: 5;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.events-face-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    margin: auto 0;
}

.events-face-icon-badge {
    font-size: clamp(26px, 4.2vmin, 36px);
    line-height: 1;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 10px var(--accent-glow));
    animation: gentlePulse 2.5s ease-in-out infinite;
}

.events-face-title {
    font-family: var(--font-display);
    font-size: clamp(13px, 2.4vmin, 18px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 14px var(--accent-glow);
    margin-bottom: 5px;
    max-width: 92%;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.events-face-countdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    margin: 3px 0 5px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    max-width: 95%;
}

/* Grade de Contagem Regressiva Detalhada (Dias, Horas, Minutos, Segundos) */
.events-detailed-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 0.8vmin, 6px);
    margin: 2px 0;
}

.events-timer-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    padding: 2px clamp(5px, 1vmin, 8px);
    min-width: clamp(36px, 5.5vmin, 48px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.events-timer-digits {
    font-family: var(--font-display);
    font-size: clamp(15px, 3vmin, 24px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--accent-primary);
    text-shadow: 0 0 14px var(--accent-glow);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.events-timer-unit {
    font-family: var(--font-mono);
    font-size: clamp(6.5px, 0.9vmin, 8.5px);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 1px;
}

.events-timer-colon {
    font-family: var(--font-display);
    font-size: clamp(14px, 2.6vmin, 20px);
    font-weight: 800;
    color: var(--accent-primary);
    opacity: 0.8;
    margin-top: -6px;
    animation: colonPulse 1s ease-in-out infinite;
}

.events-face-countdown-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.events-face-countdown-digits {
    font-family: var(--font-display);
    font-size: clamp(11px, 1.8vmin, 14px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.05em;
}

.events-face-countdown-unit {
    font-family: var(--font-mono);
    font-size: clamp(8px, 1.1vmin, 9.5px);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.events-face-date {
    font-family: var(--font-mono);
    font-size: clamp(9px, 1.4vmin, 11px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

/* Painel de Gerenciamento de Datas no Modal de Opções */
.events-input-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-top: 8px;
}

.events-form-row {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.events-input-text {
    flex: 1;
    min-width: 160px;
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    padding: 6px 10px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.events-input-text:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-glow-subtle);
}

.events-select {
    background: #0f141f;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    padding: 6px 8px;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    outline: none;
    cursor: pointer;
}

.events-btn-add {
    background: var(--accent-primary);
    color: #05080e;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.events-btn-add:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

.custom-events-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    max-height: 130px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.custom-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    padding: 3px 8px 3px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.custom-event-chip:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--accent-primary);
}

.custom-event-chip-del {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1;
    transition: color 0.15s ease;
}

.custom-event-chip-del:hover {
    color: #ff4d6d;
}

.custom-event-chip.is-priority {
    border-color: rgba(255, 215, 0, 0.65);
    background: rgba(255, 215, 0, 0.12);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.custom-event-chip-pin {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.custom-event-chip-pin:hover,
.custom-event-chip-pin.active {
    opacity: 1;
    transform: scale(1.15);
}

/* Caixa de Prioridade / Foco Fixo */
.events-priority-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    margin-top: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

.events-priority-card.active {
    border-color: rgba(255, 215, 0, 0.55);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.18);
}

.events-priority-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.events-priority-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.events-priority-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.events-priority-checkbox-visual {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.events-priority-checkbox:checked + .events-priority-checkbox-visual {
    background: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.55);
}

.events-priority-checkbox:checked + .events-priority-checkbox-visual::after {
    content: "✓";
    color: #05080e;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.events-priority-title-text {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffffff;
}

.events-priority-status-tag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.events-priority-status-tag.active {
    background: rgba(255, 215, 0, 0.18);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.events-priority-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.events-priority-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.events-priority-input-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.events-priority-combo-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 220px;
}

.events-select-priority {
    flex: 1;
    min-width: 170px;
    background: #090e18;
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
}

.events-btn-add-priority {
    background: rgba(255, 215, 0, 0.16);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 6px 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.events-btn-add-priority:hover {
    background: #ffd700;
    color: #05080e;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
    transform: translateY(-1px);
}

.events-priority-chips-wrap {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.events-priority-chips-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.events-priority-chips-header {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 215, 0, 0.85);
    text-transform: uppercase;
}

.events-btn-clear-priorities {
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.35);
    color: #ff6b6b;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.events-btn-clear-priorities:hover {
    background: rgba(255, 80, 80, 0.25);
    border-color: #ff5252;
    color: #ffffff;
}

.events-chk-priority-add {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 215, 0, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-top: 5px;
    user-select: none;
}

.events-chk-priority-add input[type="checkbox"] {
    accent-color: #ffd700;
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.events-priority-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px dashed rgba(255, 215, 0, 0.30);
    border-radius: 5px;
    align-items: center;
}

.priority-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: var(--radius-pill);
    padding: 3px 8px 3px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
    transition: all 0.2s ease;
}

.priority-event-chip:hover {
    background: rgba(255, 215, 0, 0.22);
    border-color: #ffd700;
}

.priority-chip-del {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s ease;
}

.priority-chip-del:hover {
    color: #ff4d6d;
}

.events-priority-helper {
    font-family: var(--font-main);
    font-size: 10px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 4px;
}

.telemetry-face-title.priority-active {
    color: #ffd700 !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6) !important;
}

.telemetry-esc-kbd {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--accent-primary);
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.telemetry-esc-kbd:hover {
    background: var(--accent-primary);
    color: #07090e;
    border-color: var(--accent-primary);
}

/* ============================================================================
 * AGENDA INTELIGENTE // COMPROMISSOS & EVENTOS RECORRENTES (GIRO 3D)
 * ============================================================================ */
.appointments-manager-card {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(14, 165, 233, 0.04) 50%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appointments-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.appointments-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appointments-title {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
}

.appointments-subtitle {
    font-family: var(--font-main);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
}

.appointments-subtitle strong {
    color: #2dd4bf;
    font-weight: 600;
}

.appointments-badge-window {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
    border: 1px solid rgba(20, 184, 166, 0.4);
    text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-start;
    transition: all 0.25s ease;
}

.appointments-badge-window.has-active {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
    animation: urgentBadgePulse 2s infinite ease-in-out;
}

@keyframes urgentBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

.appointments-form {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.appointments-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appointments-form-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.appointments-form-field.flex-1 {
    flex: 1 1 140px;
}

.appointments-form-field.flex-2 {
    flex: 2 1 210px;
}

.appointments-form-field.flex-auto {
    flex: 0 0 auto;
}

.appointments-label {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.apt-input,
.apt-select {
    background: rgba(10, 15, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 6px 8px;
    color: #ffffff;
    font-size: 11.5px;
    font-family: var(--font-mono);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.apt-input:focus,
.apt-select:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.35);
}

.apt-time {
    letter-spacing: 0.05em;
    font-weight: 600;
}

.apt-conditional-block {
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(45, 212, 191, 0.3);
    border-radius: 5px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.apt-sub-label {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #2dd4bf;
    text-transform: uppercase;
}

.apt-weekdays-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.apt-day-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
}

.apt-day-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.apt-day-pill.active {
    background: rgba(45, 212, 191, 0.25);
    border-color: #2dd4bf;
    color: #2dd4bf;
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.35);
}

.apt-relative-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.apt-hint {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
}

.apt-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.apt-btn-submit {
    background: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 7px 16px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.35);
    transition: all 0.2s ease;
}

.apt-btn-submit:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.5);
}

.appointments-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.appointments-list-header {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.appointments-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 3px;
}

.appointment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 10px;
    transition: all 0.2s ease;
}

.appointment-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
}

.appointment-item.is-today {
    border-color: rgba(239, 68, 68, 0.6);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.appointment-item.is-tomorrow {
    border-color: rgba(245, 158, 11, 0.6);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.appointment-item.is-now {
    border-color: rgba(16, 185, 129, 0.7);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.appointment-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
}

.appointment-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.appointment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.appointment-title {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.6);
}

.appointment-badge-status {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    white-space: nowrap;
}

.appointment-badge-status.badge-today {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.7);
    color: #fca5a5;
}

.appointment-badge-status.badge-tomorrow {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.7);
    color: #fcd34d;
}

.appointment-badge-status.badge-now {
    background: rgba(16, 185, 129, 0.25);
    border: 1px solid rgba(16, 185, 129, 0.7);
    color: #6ee7b7;
}

.appointment-badge-status.badge-quiet {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.55);
}

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

.apt-btn-action {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.apt-btn-action:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.apt-btn-action.test-3d {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
}

.apt-btn-action.test-3d:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.apt-btn-action.del {
    color: rgba(255, 255, 255, 0.45);
    padding: 3px 5px;
}

.apt-btn-action.del:hover {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* Face 5 Urgência & Efeitos Visuais */
.glass-core-events-face.urgent-today {
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.25), inset 0 0 20px rgba(239, 68, 68, 0.12) !important;
}

.glass-core-events-face.urgent-tomorrow {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.25), inset 0 0 20px rgba(245, 158, 11, 0.12) !important;
}

.glass-core-events-face.urgent-now {
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.3), inset 0 0 20px rgba(16, 185, 129, 0.15) !important;
}

.events-face-location-tag {
    font-family: var(--font-mono);
    font-size: clamp(8px, 1.1vmin, 10px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    margin-top: 3px;
    display: inline-block;
}

/* Onda Luminosa ao Mudar de Minuto (Desativada a pedido do usuário - substituída pela refração contínua dos segundos) */
.light-wave,
.light-wave.sweep {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

/* Pulso Expansivo de Hora */
.hour-expansion-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent-primary);
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    z-index: 14;
}

.hour-expansion-pulse.trigger {
    animation: hourPulseExpand 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Marca d'Água Geométrica no Núcleo de Vidro (Desativada a pedido do usuário) */
.core-geometry-watermark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

.core-geo-poly {
    display: none !important;
    animation: none !important;
}

/* Efeméride da Lua no HUD */
.moon-phase-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.moon-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.moon-svg {
    width: 16px;
    height: 16px;
    overflow: visible;
}

.moon-base {
    fill: rgba(255, 255, 255, 0.08);
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1.2;
}

.moon-lit {
    fill: #ffffff;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
    transition: fill 0.6s ease;
}

/* Micro Header Interno */
.core-micro-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(6px, 1.5vmin, 16px);
    opacity: 0.75;
}

.micro-badge {
    font-family: var(--font-mono);
    font-size: clamp(8px, 1vmin, 10px);
    letter-spacing: 0.22em;
    color: var(--text-secondary);
}

.micro-cycle {
    font-family: var(--font-mono);
    font-size: clamp(8px, 1vmin, 10px);
    color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ----------------------------------------------------------------------------
 * 8. TIPOGRAFIA & MOSTRADOR DE TEMPO CENTRALIZADO (HH : MM : SS)
 * ---------------------------------------------------------------------------- */
.time-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1vmin, 12px);
    margin: clamp(4px, 1vmin, 10px) 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
    z-index: 10;
    width: 100%;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
    max-width: clamp(74px, 18vmin, 125px);
    text-align: center;
}

.time-digits {
    font-family: var(--font-display);
    font-size: clamp(34px, 17cqi, 80px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--digit-color, var(--text-primary)) !important;
    opacity: var(--digit-opacity, 1.0) !important;
    filter: blur(var(--digit-blur, 0px));
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 0 calc(15px * var(--digit-glow-strength, 1.0)) currentColor;
    transition: color 0.3s ease, opacity 0.2s ease, filter 0.2s ease, transform 0.15s ease;
    display: block;
    width: 100%;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
}

/* Destaque Sutil no Segundos */
.second-unit .time-digits {
    color: var(--digit-color, var(--accent-highlight)) !important;
    opacity: var(--digit-opacity, 1.0) !important;
    filter: blur(calc(var(--digit-blur, 0px) * 0.45));
    text-shadow: 0 0 16px currentColor;
}

/* Pulso do Segundo */
.second-unit.tick-pulse .time-digits {
    transform: scale(1.02);
}

.unit-caption {
    font-family: var(--font-mono);
    font-size: clamp(7.5px, 0.9vmin, 10px);
    letter-spacing: 0.22em;
    color: var(--text-tertiary);
    margin-top: 6px;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}

/* Separadores Dois Pontos (:) Perfeitamente Centralizados entre os Dígitos */
.time-separator {
    font-size: clamp(30px, 7.5vmin, 64px);
    font-weight: 300;
    color: var(--digit-color, var(--accent-primary));
    opacity: calc(var(--digit-opacity, 1.0) * 0.85) !important;
    filter: blur(var(--digit-blur, 0px));
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: clamp(14px, 2vmin, 20px);
    animation: colonPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    text-shadow: 0 0 12px var(--accent-glow);
    flex-shrink: 0;
    width: clamp(12px, 2.5vmin, 24px);
    text-align: center;
    transition: color 0.3s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* ============================================================================
 * 8.1. DISPOSIÇÃO TIPOGRÁFICA VERTICAL EMPILHADA (HH / MM + SEGUNDOS CAPSULE)
 * ============================================================================ */
body[data-time-layout="vertical"] .time-display {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 0.5cqi, 3px);
    margin: clamp(1px, 0.6cqi, 4px) 0;
    width: 100%;
}

body[data-time-layout="vertical"] .time-separator {
    display: none !important;
}

body[data-time-layout="vertical"] .time-unit {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    flex: none;
}

body[data-time-layout="vertical"] .hour-unit .time-digits,
body[data-time-layout="vertical"] .minute-unit .time-digits {
    font-size: clamp(36px, 24cqi, 86px);
    line-height: 0.88;
    letter-spacing: -0.035em;
}

body[data-time-layout="vertical"] .hour-unit .unit-caption,
body[data-time-layout="vertical"] .minute-unit .unit-caption {
    display: none;
}

body[data-time-layout="vertical"] .second-unit {
    margin-top: clamp(3px, 1.1cqi, 8px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: none;
    width: 100%;
}

body[data-time-layout="vertical"] .second-unit .time-digits {
    font-size: clamp(15px, 9cqi, 26px);
    line-height: 1;
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 14px var(--accent-glow-subtle);
    display: inline-block;
    width: auto;
    filter: blur(calc(var(--digit-blur, 0px) * 0.45));
}

body[data-time-layout="vertical"] .second-unit .unit-caption {
    display: none;
}

/* Modo de Centralização Absoluta */
body[data-center-focus="absolute"] .core-micro-header {
    margin-bottom: clamp(1px, 0.5cqi, 4px);
    opacity: 0.55;
}

body[data-center-focus="absolute"] .time-display {
    margin: auto 0;
}

body[data-center-focus="absolute"] .subsecond-wrapper {
    margin-top: clamp(1px, 0.5cqi, 4px);
    opacity: 0.55;
}

/* ----------------------------------------------------------------------------
 * 9. MICRO-INDICADORES & SUB-SEGUNDOS
 * ---------------------------------------------------------------------------- */
.subsecond-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 68%;
    max-width: 220px;
    margin: clamp(4px, 1.2vmin, 12px) 0;
    opacity: 0.85;
}

.second-micro-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}

.second-micro-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
    box-shadow: 0 0 6px var(--accent-primary);
    border-radius: var(--radius-pill);
    will-change: width;
}

.subsecond-digits {
    font-family: var(--font-mono);
    font-size: clamp(9px, 1.1vmin, 11px);
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    min-width: 32px;
    text-align: right;
}

/* ----------------------------------------------------------------------------
 * 10. INFORMAÇÃO SECUNDÁRIA (DATA & CALENDÁRIO DO NÚCLEO)
 * ---------------------------------------------------------------------------- */
.date-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(6px, 1.2vmin, 10px);
    font-family: var(--font-mono);
    font-size: clamp(10.5px, 1.35vmin, 13px);
    letter-spacing: 0.18em;
    margin-top: clamp(8px, 1.5vmin, 15px);
    text-transform: uppercase;
    padding: 4px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    box-shadow: none !important;
    animation: none !important;
    position: relative;
    overflow: hidden;
    color: var(--date-color, #cbd5e1);
    opacity: var(--date-opacity, 1.0);
    transition: color 0.3s ease, opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

/* Modo Caixa Delicada Opcional */
body[data-date-style="box"] .date-display {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Desativação Definitiva de Reflexos Reluzentes & Varreduras */
.date-display::after {
    display: none !important;
}

/* Tipografia Sóbria e Nítida da Data sem Brilho Excessivo */
.date-display .day-of-week,
.date-display .date-bullet,
.date-display .day-number,
.date-display .month-name,
.date-display .year-number {
    color: inherit !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    font-variant-numeric: tabular-nums;
}

.date-display .day-of-week {
    font-weight: 600;
    opacity: 0.92;
}

.date-display .date-bullet {
    font-size: 0.8em;
    opacity: 0.45;
    margin: 0 1px;
}

.date-display .day-number {
    font-weight: 700;
    opacity: 1.0;
}

.date-display .month-name {
    font-weight: 500;
    opacity: 0.88;
}

.date-display .year-number {
    font-weight: 500;
    opacity: 0.78;
}

/* Rodapé Micro HUD */
.core-micro-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(8px, 1.5vmin, 16px);
    font-family: var(--font-mono);
    font-size: clamp(8px, 0.95vmin, 10px);
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    opacity: 0.8;
}

.footer-divider {
    opacity: 0.3;
}

.footer-tag {
    transition: color 0.3s ease;
}

/* ----------------------------------------------------------------------------
 * 11. CONTROLES HUD (DOCK FLUTUANTE)
 * ---------------------------------------------------------------------------- */
.hud-controls-dock {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.8vmin, 14px);
    padding: 8px 16px;
    background: rgba(14, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 20;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ctrl-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: var(--transition-smooth);
    outline: none;
}

.ctrl-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.ctrl-btn:active {
    transform: translateY(1px);
}

.ctrl-btn.active {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 12px var(--accent-glow-subtle);
}

.ctrl-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sound-mute-line {
    transition: opacity 0.2s ease;
}

.ctrl-btn.sound-on .sound-mute-line {
    opacity: 0;
}

/* Navegador Interativo de Geometrias e Horas */
.geo-navigator {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    padding: 2px 4px;
    gap: 2px;
}

.geo-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    width: 24px;
    height: 30px;
    cursor: pointer;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    outline: none;
}

.geo-nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.geo-nav-label {
    background: transparent;
    border: none;
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 0 8px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-pill);
    transition: var(--transition-smooth);
    outline: none;
}

.geo-nav-label:hover {
    background: rgba(255, 255, 255, 0.06);
}

.geo-nav-label.manual {
    color: #ffaa00;
}

.geo-icon {
    font-size: 12px;
    display: inline-block;
    animation: geoIconSpin 14s linear infinite;
}

@keyframes geoIconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Seletor de Paletas / Swatches */
.theme-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    max-width: min(220px, 28vw);
    overflow-x: auto;
    scrollbar-width: none;
}

.theme-selector::-webkit-scrollbar {
    display: none;
}

.theme-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.theme-swatch:hover {
    transform: scale(1.25);
}

.theme-swatch.active {
    border-color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 0 10px currentColor;
}

.theme-swatch.cyan { background: #00f2fe; color: #00f2fe; }
.theme-swatch.amber { background: #ffaa00; color: #ffaa00; }
.theme-swatch.emerald { background: #00f5a0; color: #00f5a0; }
.theme-swatch.violet { background: #b388ff; color: #b388ff; }
.theme-swatch.obsidian { background: #e2e8f0; color: #ffffff; }
.theme-swatch.ruby { background: #ff0055; color: #ff0055; }
.theme-swatch.matrix { background: #39ff14; color: #39ff14; }
.theme-swatch.magenta { background: #ff00ff; color: #ff00ff; }
.theme-swatch.gold { background: #ffd700; color: #ffd700; }
.theme-swatch.ice { background: #38bdf8; color: #38bdf8; }

/* Toast / Notificação Suave */
.hud-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--accent-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 14px var(--accent-glow-subtle);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100;
}

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

/* ----------------------------------------------------------------------------
 * 12. ANIMAÇÕES & MICROINTERAÇÕES LUMINOSAS
 * ---------------------------------------------------------------------------- */
@keyframes colonPulse {
    0%, 100% {
        opacity: 0.85;
        filter: drop-shadow(0 0 4px var(--accent-primary));
    }
    50% {
        opacity: 0.25;
        filter: none;
    }
}

@keyframes statusBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

@keyframes minuteWaveSweep {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }
    40% {
        opacity: 0.9;
    }
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes hourPulseExpand {
    0% {
        transform: scale(0.7);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

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

/* ----------------------------------------------------------------------------
 * 13. RESPONSIVIDADE (MOBILE, TABLET, DESKTOP, ULTRAWIDE)
 * ---------------------------------------------------------------------------- */
/* Telas Grandes / Ultrawide */
@media (min-width: 1440px) {
    :root {
        --card-size: min(70vmin, 564px);
    }
}

/* Tablets e Telas Médias */
@media (max-width: 768px) {
    :root {
        --card-size: min(80vmin, 450px);
    }

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

    .timezone-info,
    .telemetry-aux {
        display: none !important;
    }

    .btn-label {
        display: none;
    }

    .hud-controls-dock.minimal-dock .btn-label {
        display: inline !important;
    }

    .hud-controls-dock {
        padding: 6px 12px;
        gap: 8px;
    }
    
    .ctrl-btn {
        padding: 0 10px;
        height: 36px;
    }

    .subsecond-wrapper {
        width: 80%;
    }
}

/* Smartphones / Telas Verticais Pequenas */
@media (max-width: 540px) {
    :root {
        --card-size: min(84vmin, 360px);
    }

    .viewport-wrapper {
        padding: 12px 8px;
    }

    .hud-corner {
        display: none;
    }

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

    .timezone-info, .telemetry-aux {
        display: none !important;
    }

    .hud-tag.system-id {
        font-size: 10px;
        padding: 4px 12px;
    }

    .core-micro-header {
        gap: 6px;
        margin-bottom: 4px;
    }

    .time-digits {
        font-size: clamp(26px, 8.5vmin, 38px);
    }

    .time-separator {
        font-size: clamp(20px, 7vmin, 30px);
        transform: translateY(-0.1em);
    }

    .unit-caption {
        font-size: 7px;
        letter-spacing: 0.1em;
    }

    .subsecond-wrapper {
        width: 86%;
        margin: 6px 0;
    }

    .date-display {
        font-size: 10px;
        gap: 4px;
        letter-spacing: 0.1em;
    }

    .core-micro-footer {
        font-size: 8px;
        margin-top: 6px;
    }

    .hud-controls-dock {
        bottom: 8px;
        max-width: calc(100vw - 16px);
        padding: 5px 6px;
        gap: 5px;
    }

    .ctrl-btn {
        height: 32px;
        padding: 0 8px;
    }

    .geo-navigator {
        padding: 1px 2px;
    }

    .geo-nav-label {
        font-size: 9px;
        padding: 0 4px;
        height: 26px;
    }

    .geo-nav-btn {
        width: 20px;
        height: 26px;
        font-size: 13px;
    }

    .theme-selector {
        max-width: 110px;
    }
}

/* Orientação Paisagem em Dispositivos Móveis (Landscape) */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --card-size: 85vh;
    }

    .viewport-wrapper {
        padding: 8px 16px;
    }

    .hud-header, .core-micro-footer, .subsecond-wrapper {
        display: none;
    }

    .hud-controls-dock {
        position: fixed;
        right: 12px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        padding: 10px 6px;
    }

    .theme-selector {
        flex-direction: column;
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 6px 0;
    }
}

/* ----------------------------------------------------------------------------
 * 14. ACESSIBILIDADE & REDUCED MOTION
 * ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    .particle-canvas {
        display: none;
    }

    .chronometer-card {
        transform: none !important;
    }

    .ambient-glow {
        filter: blur(80px);
        transform: translate(-50%, -50%) !important;
    }

    .time-separator {
        animation: none;
        opacity: 0.8;
    }
}

/* ----------------------------------------------------------------------------
 * 15. MODO ZEN AMBIENT & PROTEÇÃO DE TELA OLED
 * ---------------------------------------------------------------------------- */
body.zen-mode .hud-header,
body.zen-mode .hud-controls-dock,
body.zen-mode .hud-corner,
body.zen-mode .subsecond-wrapper,
body.zen-mode .hud-background-grid {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.zen-mode .date-display {
    opacity: var(--date-opacity, 1.0) !important;
    visibility: visible !important;
    display: inline-flex !important;
    transition: opacity 0.3s ease;
}

body.zen-mode .core-micro-footer {
    opacity: 0.15;
    transition: opacity 0.85s ease;
}

body.zen-mode .ambient-glow {
    opacity: 0.9;
    filter: blur(85px);
}

/* Micro Deslocamento OLED Anti-Burn-In */
.oled-shift-active {
    transition: transform 1.2s ease-in-out;
}

/* ----------------------------------------------------------------------------
 * 16. BARRA DE AÇÕES DE MODO (POMODORO & CRONÔMETRO)
 * ---------------------------------------------------------------------------- */
.mode-action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(6px, 1.2vmin, 14px);
    z-index: 25;
    animation: fadeIn 0.4s ease forwards;
}

.mode-action-btn {
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: clamp(10px, 1.2vmin, 12px);
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
    user-select: none;
}

.mode-action-btn.primary {
    background: var(--accent-primary);
    color: #030508;
    box-shadow: 0 0 16px var(--accent-glow);
}

.mode-action-btn.primary:hover {
    transform: translateY(-1px) scale(1.03);
    filter: brightness(1.15);
    box-shadow: 0 0 22px var(--accent-glow);
}

.mode-action-btn.secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.mode-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent-primary);
}

.mode-action-btn.switch-sub {
    background: rgba(255, 255, 255, 0.03);
    color: var(--accent-secondary);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.mode-action-btn.switch-sub:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-secondary);
    color: var(--text-primary);
}

/* Indicador de Modo Ativo no Display */
.time-display.mode-pomodoro .hour-unit,
.time-display.mode-stopwatch .hour-unit {
    /* Mantém legibilidade refinada */
}

/* ----------------------------------------------------------------------------
 * 17. MODAL HUD DE ATALHOS DE TECLADO (NATIVE DIALOG COM GLASSMORPHISM)
 * ---------------------------------------------------------------------------- */
.hud-shortcuts-dialog {
    padding: 0;
    border: none;
    border-radius: 20px;
    background: transparent;
    max-width: min(540px, 92vw);
    width: 100%;
    margin: auto;
    position: fixed;
    inset: 0;
    z-index: 100;
}

.hud-shortcuts-dialog::backdrop {
    background: rgba(3, 6, 12, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.hud-dialog-panel {
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.95) 0%,
        rgba(9, 14, 26, 0.98) 100%
    );
    border: 1px solid var(--accent-primary);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.85),
        0 0 40px -10px var(--accent-glow);
    border-radius: 20px;
    padding: 24px 28px;
    color: var(--text-primary);
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.dialog-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--accent-primary);
    display: block;
    margin-bottom: 4px;
}

.dialog-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0;
}

.dialog-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all var(--transition-fast);
}

.dialog-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: var(--accent-primary);
}

.dialog-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.shortcut-row kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 3px 8px;
    min-width: 26px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------------------------
 * 18. REFINAMENTO DOS BOTÕES NOVO NO DOCK
 * ---------------------------------------------------------------------------- */
.ctrl-btn.mode-btn {
    gap: 6px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ctrl-btn.mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-primary);
}

.ctrl-btn.mode-btn.active-mode {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-glow-subtle);
}

.ctrl-btn.zen-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.ctrl-btn.help-btn {
    font-family: var(--font-mono);
    font-weight: 700;
}

.help-btn-icon {
    font-size: 13px;
    color: var(--text-secondary);
}

.ctrl-btn.help-btn:hover .help-btn-icon {
    color: var(--accent-primary);
}

/* ----------------------------------------------------------------------------
 * 19. SATÉLITES GLOBAIS (MINI-RELÓGIOS DE FUSOS HORÁRIOS DAS CAPITAIS)
 * Proporção: ~30% do relógio principal (~160px)
 * Visibilidade: Primeiros 30 segundos de cada minuto, depois suave fade-out
 * ---------------------------------------------------------------------------- */
.satellite-clock {
    position: absolute;
    top: clamp(110px, 39vh, 44%);
    width: clamp(130px, 18vmin, 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.85);
    transition: 
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.75s;
    user-select: none;
}

.satellite-left {
    left: clamp(14px, calc(50% - min(530px, 76vmin) / 2 - clamp(130px, 18vmin, 160px) - 30px), calc(50% - 370px));
}

.satellite-right {
    right: clamp(14px, calc(50% - min(530px, 76vmin) / 2 - clamp(130px, 18vmin, 160px) - 30px), calc(50% - 370px));
}

.satellite-clock.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

/* Em Modo Zen: Os satélites operam com elegância cósmica durante a janela de 30s */
body.zen-mode .satellite-clock.visible {
    opacity: 0.95;
    visibility: visible;
}

/* Cabeçalho do Satélite (Cidade / País) */
.sat-header {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sat-tag-zone {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--sat-color, var(--accent-primary));
    background: rgba(255, 255, 255, 0.03);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
    margin-bottom: 3px;
}

.sat-city {
    font-family: var(--font-display);
    font-size: clamp(12px, 1.6vmin, 15px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 12px var(--sat-glow, var(--accent-glow));
    transition: color 0.5s ease;
}

.sat-country {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

/* Mostrador Circular do Satélite */
.sat-dial {
    position: relative;
    width: clamp(130px, 18vmin, 155px);
    height: clamp(130px, 18vmin, 155px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sat-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sat-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 2;
}

.sat-progress {
    fill: none;
    stroke: var(--sat-color, var(--accent-primary));
    stroke-width: 2.5;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 80px 80px;
    stroke-dasharray: 439.82;
    stroke-dashoffset: 439.82;
    filter: drop-shadow(0 0 5px var(--sat-color, var(--accent-primary)));
    transition: stroke 0.6s ease;
}

.sat-orbital-head {
    fill: #ffffff;
    stroke: var(--sat-color, var(--accent-primary));
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px var(--sat-color, var(--accent-primary)));
    transform-origin: 80px 80px;
    transition: stroke 0.6s ease;
}

/* Núcleo de Vidro do Satélite (Miniatura fiel de 30% do relógio central) */
.sat-glass-core {
    position: relative;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 25%,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(15, 21, 32, 0.55) 65%,
        rgba(6, 10, 18, 0.75) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 24px -6px rgba(0, 0, 0, 0.7),
        0 0 18px -4px var(--sat-glow, var(--accent-glow-subtle));
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: box-shadow 0.6s ease, border-color 0.6s ease;
}

.satellite-clock:hover .sat-glass-core {
    border-color: var(--sat-color, var(--accent-primary));
    box-shadow: 
        inset 0 1px 2px 0 rgba(255, 255, 255, 0.3),
        0 12px 30px -4px rgba(0, 0, 0, 0.8),
        0 0 24px 0 var(--sat-glow, var(--accent-glow));
}

.sat-geo-symbol {
    font-size: 10px;
    line-height: 1;
    color: var(--sat-color, var(--accent-primary));
    opacity: 0.85;
    margin-bottom: 2px;
}

.sat-time {
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.8vmin, 16px);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sat-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}

.sat-delta {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--sat-color, var(--accent-primary));
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1px 4px;
}

.sat-tz-abbr {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Responsividade Inteligente para Dispositivos Móveis e Telas Menores */
@media (max-width: 960px) {
    .satellite-clock {
        top: clamp(80px, 14vh, 125px);
        bottom: auto;
        transform: translateY(0) scale(0.82);
    }
    .satellite-left {
        left: clamp(8px, 2.5vw, 18px);
    }
    .satellite-right {
        right: clamp(8px, 2.5vw, 18px);
    }
    .satellite-clock.visible {
        transform: translateY(0) scale(0.86);
    }
}

@media (max-width: 600px) {
    .satellite-clock {
        top: clamp(70px, 11vh, 95px);
        bottom: auto;
        width: 108px;
    }
    .sat-dial {
        width: 92px;
        height: 92px;
    }
    .sat-city {
        font-size: 10px;
    }
    .sat-time {
        font-size: 11px;
    }
}

/* ============================================================================
 * 15. SMART DISPLAY: CLIMA EM TEMPO REAL (WEATHER HUD & MODAL)
 * ============================================================================ */
.weather-tag {
    cursor: pointer;
    user-select: none;
    transition: var(--transition-smooth);
}

.weather-tag:hover, .weather-tag:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 16px -2px var(--accent-glow-subtle);
    transform: translateY(-1px);
}

.weather-icon {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

.hud-weather-dialog {
    border: none;
    background: transparent;
    padding: 0;
    margin: auto;
    max-width: min(92vw, 540px);
    width: 100%;
}

.hud-weather-dialog::backdrop {
    background: rgba(4, 6, 11, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hud-dialog-panel.weather-panel {
    background: rgba(10, 14, 22, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.9), 0 0 32px -4px var(--accent-glow-subtle);
    padding: clamp(20px, 3.5vmin, 28px);
    color: var(--text-primary);
}

.weather-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}

.weather-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
}

.weather-hero-icon {
    font-size: clamp(48px, 8vmin, 64px);
    line-height: 1;
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.25));
}

.weather-hero-temp {
    font-family: var(--font-mono);
    font-size: clamp(32px, 5vmin, 44px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.weather-hero-desc {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--accent-primary);
    margin-top: 4px;
}

.weather-hero-city {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.weather-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.metric-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-label {
    font-size: 9.5px;
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
}

.metric-val {
    font-size: 13.5px;
    font-family: var(--font-mono);
    font-weight: 700;
    color: #ffffff;
}

.city-search-label {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 8px;
}

.city-search-row {
    display: flex;
    gap: 8px;
}

.city-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 13.5px;
    outline: none;
    transition: var(--transition-smooth);
}

.city-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 14px var(--accent-glow-subtle);
}

.city-search-btn {
    background: var(--accent-primary);
    color: #04060a;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.city-search-btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 14px var(--accent-glow);
}

.quick-cities-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.quick-city-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-family: var(--font-display);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.quick-city-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: var(--accent-primary);
}

/* ============================================================================
 * 16. MOSTRADOR ANALÓGICO HUD (ESTILOS CONSOLIDADOS NA SEÇÃO 6.1)
 * ============================================================================ */

/* ============================================================================
 * 17. PAINEL INTELIGENTE DA BÍBLIA COM INTERVALO PROGRAMÁVEL
 * ============================================================================ */
.hud-bible-card {
    position: absolute;
    bottom: clamp(68px, 9.5vh, 80px);
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 530px);
    background: rgba(8, 12, 18, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 
        0 16px 40px -10px rgba(0, 0, 0, 0.85),
        0 0 24px -6px var(--accent-glow-subtle);
    z-index: 40;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    overflow: hidden;
}

.hud-bible-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(24px);
}

.hud-bible-card.minimized {
    width: auto;
    min-width: 280px;
    padding-bottom: 0;
}

.hud-bible-card.minimized .bible-card-body,
.hud-bible-card.minimized .bible-progress-bar,
.hud-bible-card.minimized .bible-config-drawer {
    display: none !important;
}

/* Barra de Progresso do Próximo Versículo */
.bible-progress-bar {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.bible-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
    box-shadow: 0 0 8px var(--accent-glow);
    transition: width 0.8s linear;
}

.bible-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 4px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bible-tag-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bible-icon-badge {
    font-size: 14px;
    line-height: 1;
}

.bible-title-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

.bible-interval-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.05em;
}

.bible-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bible-countdown {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}

.bible-mini-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.bible-mini-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: var(--accent-primary);
}

.bible-card-body {
    padding: 8px 16px 10px 16px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bible-verse-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(12.5px, 1.45vmin, 14.5px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
    color: #f8fafc;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.bible-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.bible-reference {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    text-shadow: 0 0 10px var(--accent-glow-subtle);
}

.bible-theme-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Gaveta de Configuração de Intervalo */
.bible-config-drawer {
    padding: 12px 18px 14px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.interval-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.interval-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.interval-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: var(--accent-primary);
}

.interval-pill.active {
    background: var(--accent-primary);
    color: #04060a;
    font-weight: 700;
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px var(--accent-glow);
}

.interval-pill.danger {
    color: #f43f5e;
}

.interval-pill.danger.active {
    background: #f43f5e;
    color: #ffffff;
    border-color: #f43f5e;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.5);
}

/* Modo Zen: Regras dinâmicas de exibição conforme preferência do usuário */
body.zen-mode .hud-bible-card {
    opacity: 0.95 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: none;
    background: rgba(6, 10, 18, 0.86) !important;
    box-shadow: 0 18px 44px -8px rgba(0, 0, 0, 0.95), 0 0 26px -2px var(--accent-glow) !important;
}

body.zen-mode .hud-top-right-stack {
    opacity: 0.95 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.zen-mode .hud-glass-widget {
    background: rgba(6, 10, 18, 0.86) !important;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.95), 0 0 22px -2px var(--accent-glow) !important;
}

body.zen-mode.zen-hide-bible .hud-bible-card {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(28px) scale(0.95);
    display: none !important;
}

body.zen-mode.zen-hide-weather .weather-widget {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.9);
    display: none !important;
}

body.zen-mode.zen-hide-moon .moon-widget {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.9);
    display: none !important;
}

/* ============================================================================
 * 18. WIDGETS DE VIDRO NO CANTO SUPERIOR DIREITO (TEMPERATURA & FASE DA LUA)
 * ============================================================================ */
.hud-top-right-stack {
    position: absolute;
    top: clamp(14px, 2.5vmin, 26px);
    right: clamp(14px, 2.5vmin, 28px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50;
    pointer-events: auto;
}

.hud-glass-widget {
    width: clamp(130px, 16vmin, 160px);
    min-height: clamp(112px, 14vmin, 134px);
    background: rgba(8, 12, 19, 0.74);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--accent-primary);
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 
        0 16px 36px -8px rgba(0, 0, 0, 0.85),
        0 0 22px -3px var(--accent-glow);
    transition: 
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.4s ease,
        opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.hud-glass-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.hud-glass-widget:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 20px 42px -6px rgba(0, 0, 0, 0.9),
        0 0 28px 0px var(--accent-glow);
}

.hud-glass-widget.hidden {
    display: none !important;
}

/* Header do Widget */
.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.widget-tag {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-shadow: 0 0 8px var(--accent-glow-subtle);
}

.widget-btn-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    transition: var(--transition-smooth);
    opacity: 0.6;
}

.widget-btn-close:hover {
    opacity: 1;
    background: rgba(244, 63, 94, 0.25);
    border-color: #f43f5e;
    color: #ffffff;
}

/* Corpo do Widget de Clima */
.widget-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.widget-hero-temp {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.2vmin, 38px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 0 16px var(--accent-glow);
    font-variant-numeric: tabular-nums;
}

.widget-sub-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
}

.widget-condition {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-primary);
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px var(--accent-glow-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.widget-city {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Widget da Fase da Lua */
.moon-widget-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 6px;
}

.moon-widget-svg {
    width: clamp(38px, 5.5vmin, 48px);
    height: clamp(38px, 5.5vmin, 48px);
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

.moon-widget .moon-lit {
    fill: var(--accent-primary);
    filter: drop-shadow(0 0 6px var(--accent-glow));
    transition: fill 0.4s ease;
}

/* ============================================================================
 * 19. SWATCHES DAS NOVAS CORES DO RELÓGIO (28 PALETAS CROMÁTICAS)
 * ============================================================================ */
.theme-swatch.plasma { background: #ff007f; }
.theme-swatch.sunset { background: #ff5500; }
.theme-swatch.deep-space { background: #4d7cff; }
.theme-swatch.laser-lime { background: #a6ff00; }
.theme-swatch.blood-moon { background: #e60039; }
.theme-swatch.vaporwave { background: #c084fc; }
.theme-swatch.pure-white { background: #ffffff; }
.theme-swatch.synthwave { background: #ff2a85; }
.theme-swatch.tokyo-night { background: #7aa2f7; }
.theme-swatch.cyber-mint { background: #00ffc8; }
.theme-swatch.solar-flare { background: #ff5100; }
.theme-swatch.toxic-green { background: #00ff41; }
.theme-swatch.amethyst { background: #a855f7; }
.theme-swatch.rose-gold { background: #f43f5e; }
.theme-swatch.electric-blue { background: #2563eb; }
.theme-swatch.cyber-yellow { background: #ffe600; }
.theme-swatch.crimson-void { background: #dc2626; }
.theme-swatch.arctic-frost { background: #67e8f9; }

/* ----------------------------------------------------------------------------
 * 11.1 DOCK MINIMALISTA (BOTÃO ÚNICO CENTRAL // MENU DE OPÇÕES)
 * ---------------------------------------------------------------------------- */
.hud-controls-dock.minimal-dock {
    position: fixed;
    bottom: clamp(14px, 2.5vh, 22px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 6px;
    background: rgba(10, 15, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 16px var(--accent-glow-subtle);
    z-index: 45;
    transition: var(--transition-smooth);
}

.hud-controls-dock.minimal-dock:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65), 0 0 24px var(--accent-glow);
    transform: translateX(-50%) translateY(-2px);
}

.dock-main-menu-btn {
    height: 38px;
    padding: 0 18px;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: var(--transition-smooth);
    outline: none;
}

.dock-main-menu-btn .dock-menu-icon {
    font-size: 15px;
    filter: drop-shadow(0 0 4px var(--accent-glow));
    transition: transform 0.3s ease;
}

.dock-main-menu-btn:hover .dock-menu-icon {
    transform: rotate(30deg) scale(1.15);
}

.dock-main-menu-btn .dock-menu-kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 9.5px;
    color: var(--accent-primary);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Controles Agrupados no Modal de Opções */
.options-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.options-btn-group .ctrl-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 0 14px;
    height: 38px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: var(--transition-smooth);
    outline: none;
}

.options-btn-group .ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.options-btn-group .ctrl-btn.active {
    background: rgba(0, 242, 254, 0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 12px var(--accent-glow-subtle);
}

/* Grade Espaçosa para as 28 Cores dentro do Modal */
.options-panel .theme-selector {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
    padding: 12px !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    overflow: visible !important;
}

.options-panel .theme-swatch {
    width: 26px !important;
    height: 26px !important;
    margin: 0 auto !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.options-panel .theme-swatch:hover {
    transform: scale(1.3) !important;
    z-index: 2;
}

.options-panel .theme-swatch.active {
    transform: scale(1.22) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 14px currentColor, inset 0 0 4px #fff !important;
}

.options-panel .geo-navigator {
    width: 100%;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.25);
}

.options-panel .geo-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.options-panel .geo-nav-label {
    flex: 1;
    justify-content: center;
}

/* ============================================================================
 * 20. MODAL DE CONFIGURAÇÕES DE EXIBIÇÃO & MODO ZEN (MODAL LATERAL À DIREITA)
 * ============================================================================ */
.hud-options-dialog {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 0 0 auto; /* Posicionado firmemente à direita */
    max-width: min(94vw, 560px);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    overflow: hidden;
    z-index: 150;
}

.hud-options-dialog::backdrop {
    background: rgba(3, 5, 10, 0.35);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

.hud-dialog-panel.options-panel {
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(
        160deg,
        rgba(10, 14, 24, 0.95) 0%,
        rgba(6, 9, 16, 0.98) 100%
    );
    border-left: 1.5px solid var(--accent-primary);
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 28px 0 0 28px;
    box-shadow: 
        -24px 0 60px -10px rgba(0, 0, 0, 0.95),
        -6px 0 35px -5px var(--accent-glow);
    padding: clamp(20px, 3.5vh, 32px);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.options-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
}

.options-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.options-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
    text-shadow: 0 0 8px var(--accent-glow-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
}

.options-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: -4px;
}

.options-toggle-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Interruptor Toggle Cyberpunk */
.toggle-control {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.toggle-control input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #ffffff;
    border-radius: 50%;
    transition: var(--transition-smooth);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.toggle-control input:checked + .toggle-slider {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px var(--accent-glow);
}

.toggle-control input:checked + .toggle-slider::before {
    transform: translateX(18px);
    background: #04060a;
}

.toggle-label {
    font-size: 13px;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.options-interval-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.interval-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
}

.color-mode-select-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* Monitor Espectral de 100 Tons Cósmicos em Tempo Real */
.color-spectrum-monitor {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.spectrum-swatch-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 16px var(--accent-glow);
    flex-shrink: 0;
    transition: background 0.1s linear, box-shadow 0.1s linear;
}

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

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

.spectrum-tone-tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb, 0, 242, 254), 0.14);
    border: 1px solid rgba(var(--accent-primary-rgb, 0, 242, 254), 0.35);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}

.spectrum-tone-name {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spectrum-bar-track {
    width: 100%;
    height: 6px;
    background: linear-gradient(
        90deg,
        #ff0055 0%,
        #ff7700 12%,
        #ffd700 24%,
        #a6ff00 36%,
        #00ff66 48%,
        #00f2fe 60%,
        #3b82f6 72%,
        #9d4edd 84%,
        #ff00ff 94%,
        #ff0055 100%
    );
    border-radius: 999px;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    overflow: visible;
}

.spectrum-bar-indicator {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #000000;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: left 0.1s linear;
}

/* Responsividade Mobile para Widgets de Canto */
@media (max-width: 640px) {
    .hud-top-right-stack {
        top: 12px;
        right: 12px;
        gap: 8px;
    }
    .hud-glass-widget {
        width: 120px;
        min-height: 98px;
        padding: 8px 10px;
        border-radius: 16px;
    }
    .widget-hero-temp {
        font-size: 24px;
    }
    .widget-condition {
        font-size: 10px;
        max-width: 100px;
    }
    .moon-widget-svg {
        width: 32px;
        height: 32px;
    }
    .hud-bible-card {
        bottom: clamp(62px, 9.5vh, 80px);
        width: 95vw;
        border-radius: 14px;
    }
    .bible-card-body {
        padding: 10px 14px 12px;
    }
    .bible-verse-text {
        font-size: 13.5px;
        line-height: 1.5;
    }
    .weather-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hud-options-dialog {
        max-width: 100vw;
    }
    .hud-dialog-panel.options-panel {
        border-radius: 20px 20px 0 0;
        border-left: 1px solid var(--accent-primary);
    }
}

/* Telas Ultra-Compactas (320px, 375px, 430px): Evita sobreposição do relógio e corte de widgets */
@media (max-width: 440px) {
    .hud-top-right-stack {
        top: 8px;
        right: 8px;
        gap: 6px;
    }
    .hud-glass-widget {
        width: clamp(96px, 27vw, 110px);
        min-height: auto;
        padding: 6px 8px;
        border-radius: 12px;
    }
    .widget-hero-temp {
        font-size: 20px;
    }
    .widget-condition {
        font-size: 9px;
        max-width: 80px;
    }
    .widget-city {
        font-size: 8px;
    }
    .moon-widget-svg {
        width: 26px;
        height: 26px;
    }
    .hud-bible-card {
        bottom: clamp(56px, 8.5vh, 70px);
        width: calc(100vw - 16px);
        border-radius: 12px;
    }
    .hud-controls-dock {
        max-width: calc(100vw - 12px);
    }
}

/* ============================================================================
 * 19. REFORÇO DE NITIDEZ & CONTRASTE DIURNO (ANTI-WASHOUT & SHARPNESS BOOST)
 * ============================================================================ */
/* Baseline Diurna: Mantém compatibilidade óptica com o céu ensolarado */
body.sky-day .glass-core {
    border-color: rgba(255, 255, 255, 0.20);
}

body.sky-day .time-digits {
    text-shadow: 
        0 0 2px #000000,
        0 2px 8px rgba(0, 0, 0, 0.92),
        0 0 22px var(--accent-glow);
}

/* MODO DE ALTO CONTRASTE DIURNO ATIVADO (Default com Toggle ON) */
body.sky-day.day-contrast-boost .glass-core {
    border: 1.5px solid rgba(255, 255, 255, 0.28);
}

body.sky-day.day-contrast-boost .time-digits {
    color: var(--digit-color, #ffffff) !important;
    opacity: var(--digit-opacity, 1.0) !important;
    filter: blur(var(--digit-blur, 0px));
    text-shadow: 
        0 0 2px #000000,
        0 1px 3px #000000,
        0 3px 10px rgba(0, 0, 0, 0.98),
        0 5px 24px rgba(0, 0, 0, 0.95),
        0 0 28px var(--accent-glow) !important;
    -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.6);
}

body.sky-day.day-contrast-boost .second-unit .time-digits {
    color: var(--digit-color, var(--accent-highlight)) !important;
    opacity: var(--digit-opacity, 1.0) !important;
    filter: blur(var(--digit-blur, 0px));
    text-shadow: 
        0 0 2px #000000,
        0 2px 8px rgba(0, 0, 0, 0.98),
        0 0 24px var(--accent-glow) !important;
}

body.sky-day.day-contrast-boost .time-separator {
    color: var(--accent-primary) !important;
    text-shadow: 
        0 0 3px #000000,
        0 2px 8px rgba(0, 0, 0, 0.98),
        0 0 20px var(--accent-glow) !important;
}

body.sky-day.day-contrast-boost .hud-glass-widget {
    background: rgba(5, 11, 20, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 
        0 18px 42px -8px rgba(0, 0, 0, 0.92),
        0 0 24px -2px var(--accent-glow) !important;
}

body.sky-day.day-contrast-boost .hud-bible-card {
    background: rgba(5, 11, 20, 0.93) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 
        0 22px 55px -10px rgba(0, 0, 0, 0.96),
        0 0 28px -4px var(--accent-glow) !important;
}

body.sky-day.day-contrast-boost .bible-verse-text {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95) !important;
}

body.sky-day.day-contrast-boost .hud-tag {
    background: rgba(6, 12, 22, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.sky-day.day-contrast-boost .ctrl-btn {
    background: rgba(6, 12, 22, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.sky-day.day-contrast-boost .ring-track {
    stroke: rgba(0, 0, 0, 0.35) !important;
}

body.sky-day.day-contrast-boost .ring-subtle {
    stroke: rgba(255, 255, 255, 0.12) !important;
}

body.sky-day.day-contrast-boost .hud-background-grid {
    opacity: 0.35;
}

/* ----------------------------------------------------------------------------
 * 18. CONTROLES DO GIRO HORÁRIO 3D & TELEMETRIA AMBIENTAL (OPÇÕES)
 * ---------------------------------------------------------------------------- */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.options-active-badge {
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb, 0, 242, 254), 0.12);
    border: 1px solid rgba(var(--accent-primary-rgb, 0, 242, 254), 0.35);
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 0 8px var(--accent-glow-subtle);
}

.flip-interval-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px 0;
}

.flip-duration-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px 0;
}

.timing-control-block {
    margin-bottom: 12px;
}

.timing-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.timing-sub-title {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.timing-current-val {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.08em;
    background: rgba(var(--accent-primary-rgb, 0, 242, 254), 0.1);
    border: 1px solid rgba(var(--accent-primary-rgb, 0, 242, 254), 0.3);
    padding: 1px 7px;
    border-radius: 999px;
}

.flip-ctrl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.flip-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flip-status-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.flip-status-val {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.08em;
}

.test-flip-action-btn {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(var(--accent-primary-rgb, 0, 242, 254), 0.35);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    transition: var(--transition-smooth);
}

.test-flip-action-btn:hover {
    background: rgba(var(--accent-primary-rgb, 0, 242, 254), 0.15);
    border-color: var(--accent-primary);
    box-shadow: 0 0 14px var(--accent-glow-subtle);
}

/* ----------------------------------------------------------------------------
 * 18. ESTILOS MODULARES PARA AS FACES INDEPENDENTES DO GIRO 3D
 * ---------------------------------------------------------------------------- */
.flip-card-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    transition: var(--transition-smooth);
}

.flip-card-box:hover {
    border-color: rgba(var(--accent-primary-rgb, 0, 242, 254), 0.25);
    background: rgba(255, 255, 255, 0.04);
}

.flip-card-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.flip-card-box-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.flip-shortcut-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(var(--accent-primary-rgb, 0, 242, 254), 0.08);
    border: 1px solid rgba(var(--accent-primary-rgb, 0, 242, 254), 0.25);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ============================================================================
 * CHRONOS POLYMORPH // METAMORFOSE GEOMÉTRICA DO HUD
 * 5 FORMAS: CÍRCULO, QUADRADO, TRIÂNGULO, LOSANGO, RETÂNGULO
 * UNIFORMIDADE ABSOLUTA: MESMA TEXTURA DE VIDRO FOSCO E LUSTROSO
 * ============================================================================ */

/* Transições suaves para metamorfose física dos componentes centrais */
.chronometer-card {
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), height 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-core,
.glass-core-back,
.glass-core-timezones,
.glass-core-bible-face,
.glass-core-events-face {
    transition: box-shadow 0.6s ease, border-color 0.6s ease, background 0.6s ease, border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1), width 0.5s ease, height 0.5s ease, padding 0.5s ease;
}

/* Visibilidade e transição dos grupos geométricos SVG */
.shape-geometry-group {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s ease;
}

/* Propriedades comuns de trilhas e linhas sutis para os anéis de todas as formas */
.shape-geometry-group .ring-progress {
    stroke-linecap: round;
    stroke-width: 3.2;
    will-change: stroke-dashoffset;
}

.shape-geometry-group .ring-track {
    fill: none;
    stroke: var(--track-color);
    stroke-width: 1.5;
}

.shape-geometry-group .ring-subtle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.035);
    stroke-width: 1;
}

.shape-geometry-group .ring-subtle.dashed {
    stroke-dasharray: 3 6;
    opacity: 0.75;
}

.shape-geometry-group .orbital-head {
    fill: var(--accent-highlight);
    stroke: var(--accent-primary);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px var(--accent-primary));
}

/* EXCLUSIVO DAS FORMAS POLIGONAIS (Quadrado, Triângulo, Losango, Retângulo):
   Os caminhos SVG iniciam no ápice superior (00s) e a cabeça orbital viaja via coordenadas cx/cy */
.shape-square-group .ring-progress,
.shape-triangle-group .ring-progress,
.shape-diamond-group .ring-progress,
.shape-rectangle-group .ring-progress {
    transform: none !important;
    transform-origin: unset !important;
    will-change: stroke-dashoffset;
}

.shape-square-group .orbital-head,
.shape-triangle-group .orbital-head,
.shape-diamond-group .orbital-head,
.shape-rectangle-group .orbital-head {
    transform: none !important;
    transform-origin: unset !important;
    will-change: cx, cy;
}

/* EXCLUSIVO DO CÍRCULO (Orbital Clássico 360°):
   DEVE ter transform: rotate(-90deg) com origem em 300px 300px para o traço iniciar às 12h (00s),
   e a cabeça orbital DEVE ter transform-origin: 300px 300px para permitir rotação 360° suave via JS! */
#shapeCircleGroup .ring-progress,
#shapeCircleGroup #secondsProgressRing,
.shape-circle-group .ring-progress,
.seconds-progress {
    transform: rotate(-90deg) !important;
    transform-origin: 300px 300px !important;
    stroke-dasharray: 1633.63;
    will-change: stroke-dashoffset;
}

#shapeCircleGroup .orbital-head,
#shapeCircleGroup #orbitalHead,
.shape-circle-group .orbital-head,
#orbitalHead {
    transform-origin: 300px 300px !important;
    will-change: transform;
}

/* ----------------------------------------------------------------------------
 * 1. FORMA ATIVA: CÍRCULO (ORBITAL CLÁSSICO)
 * ---------------------------------------------------------------------------- */
body:not([data-shape]) .shape-circle-group,
body[data-shape="circle"] .shape-circle-group,
[data-shape="circle"] .shape-circle-group {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body:not([data-shape]) .glass-core,
body[data-shape="circle"] .glass-core,
body:not([data-shape]) .glass-core-back,
body[data-shape="circle"] .glass-core-back,
body:not([data-shape]) .glass-core-timezones,
body[data-shape="circle"] .glass-core-timezones,
body:not([data-shape]) .glass-core-bible-face,
body[data-shape="circle"] .glass-core-bible-face,
body:not([data-shape]) .glass-core-events-face,
body[data-shape="circle"] .glass-core-events-face {
    border-radius: 50%;
    clip-path: none;
}

/* ----------------------------------------------------------------------------
 * 2. FORMA ATIVA: QUADRADO (CYBER CUBE / 4 ARESTAS DE 15S)
 * ---------------------------------------------------------------------------- */
body[data-shape="square"] .shape-square-group,
[data-shape="square"] .shape-square-group {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body[data-shape="square"] .chronometer-card {
    border-radius: 36px;
}

body[data-shape="square"] .glass-core,
body[data-shape="square"] .glass-core-back,
body[data-shape="square"] .glass-core-timezones,
body[data-shape="square"] .glass-core-bible-face,
body[data-shape="square"] .glass-core-events-face {
    width: 76%;
    height: 76%;
    border-radius: 28px;
    clip-path: polygon(6% 0%, 94% 0%, 100% 6%, 100% 94%, 94% 100%, 6% 100%, 0% 94%, 0% 6%);
}

body[data-shape="square"] .glass-core::before,
body[data-shape="square"] .glass-core-back::before,
body[data-shape="square"] .glass-core-timezones::before,
body[data-shape="square"] .glass-core-bible-face::before,
body[data-shape="square"] .glass-core-events-face::before {
    border-radius: 24px 24px 0 0;
    clip-path: polygon(6% 0%, 94% 0%, 100% 12%, 100% 100%, 0% 100%, 0% 12%);
}

/* ----------------------------------------------------------------------------
 * 3. FORMA ATIVA: TRIÂNGULO (CYBER DELTA / 3 FACES DE 20S)
 * ---------------------------------------------------------------------------- */
body[data-shape="triangle"] .shape-triangle-group,
[data-shape="triangle"] .shape-triangle-group {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body[data-shape="triangle"] .chronometer-card {
    border-radius: 0;
}

body[data-shape="triangle"] .glass-core,
body[data-shape="triangle"] .glass-core-back,
body[data-shape="triangle"] .glass-core-timezones,
body[data-shape="triangle"] .glass-core-bible-face,
body[data-shape="triangle"] .glass-core-events-face {
    width: 82%;
    height: 82%;
    border-radius: 0;
    clip-path: polygon(50% 4%, 96% 92%, 4% 92%);
    padding: 15% 8% 8% 8%;
}

body[data-shape="triangle"] .glass-core::before,
body[data-shape="triangle"] .glass-core-back::before,
body[data-shape="triangle"] .glass-core-timezones::before,
body[data-shape="triangle"] .glass-core-bible-face::before,
body[data-shape="triangle"] .glass-core-events-face::before {
    clip-path: polygon(50% 6%, 86% 84%, 14% 84%);
    border-radius: 0;
}

/* Hierarquia Vertical do Triângulo: Horas no ápice, Minutos no centro, Segundos na base */
body[data-shape="triangle"] .core-micro-header {
    transform: scale(0.82);
    margin-bottom: 2px;
}

body[data-shape="triangle"] .time-display {
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    line-height: 0.98;
}

body[data-shape="triangle"] .time-separator {
    display: none !important;
}

body[data-shape="triangle"] .hour-unit .time-digits,
body[data-shape="triangle"] .minute-unit .time-digits {
    font-size: clamp(26px, 5.8vmin, 50px);
}

body[data-shape="triangle"] .second-unit .time-digits {
    font-size: clamp(20px, 4.4vmin, 38px);
}

body[data-shape="triangle"] .unit-caption {
    display: none !important;
}

body[data-shape="triangle"] .subsecond-wrapper {
    margin-top: 2px;
    transform: scale(0.85);
}

body[data-shape="triangle"] .date-display {
    margin-top: 4px;
    font-size: clamp(8.5px, 1.15vmin, 11px);
}

body[data-shape="triangle"] .core-micro-footer {
    display: none !important;
}

/* ----------------------------------------------------------------------------
 * 4. FORMA ATIVA: LOSANGO (CRISTAL RÔMBICO / 4 VÉRTICES A 45°)
 * ---------------------------------------------------------------------------- */
body[data-shape="diamond"] .shape-diamond-group,
[data-shape="diamond"] .shape-diamond-group {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body[data-shape="diamond"] .chronometer-card {
    border-radius: 0;
}

body[data-shape="diamond"] .glass-core,
body[data-shape="diamond"] .glass-core-back,
body[data-shape="diamond"] .glass-core-timezones,
body[data-shape="diamond"] .glass-core-bible-face,
body[data-shape="diamond"] .glass-core-events-face {
    width: 78%;
    height: 78%;
    border-radius: 0;
    clip-path: polygon(50% 3%, 97% 50%, 50% 97%, 3% 50%);
    padding: 12% 10%;
}

body[data-shape="diamond"] .glass-core::before,
body[data-shape="diamond"] .glass-core-back::before,
body[data-shape="diamond"] .glass-core-timezones::before,
body[data-shape="diamond"] .glass-core-bible-face::before,
body[data-shape="diamond"] .glass-core-events-face::before {
    clip-path: polygon(50% 5%, 92% 50%, 50% 92%, 8% 50%);
    border-radius: 0;
}

body[data-shape="diamond"] .time-display {
    gap: clamp(4px, 1.2vmin, 14px);
}

body[data-shape="diamond"] .time-digits {
    font-size: clamp(28px, 6.5vmin, 60px);
}

body[data-shape="diamond"] .date-display {
    font-size: clamp(8.5px, 1.15vmin, 11px);
}

/* ----------------------------------------------------------------------------
 * 5. FORMA ATIVA: RETÂNGULO (HUD WIDESCREEN PANORÂMICO)
 * ---------------------------------------------------------------------------- */
body[data-shape="rectangle"] .shape-rectangle-group,
[data-shape="rectangle"] .shape-rectangle-group {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body[data-shape="rectangle"] .chronometer-stage {
    max-width: 980px;
}

body[data-shape="rectangle"] .chronometer-card {
    width: min(88vmin, 640px);
    height: min(58vmin, 420px);
    border-radius: 28px;
}

body[data-shape="rectangle"] .glass-core,
body[data-shape="rectangle"] .glass-core-back,
body[data-shape="rectangle"] .glass-core-timezones,
body[data-shape="rectangle"] .glass-core-bible-face,
body[data-shape="rectangle"] .glass-core-events-face {
    width: 86%;
    height: 72%;
    border-radius: 22px;
    clip-path: polygon(4% 0%, 96% 0%, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0% 94%, 0% 6%);
}

body[data-shape="rectangle"] .glass-core::before,
body[data-shape="rectangle"] .glass-core-back::before,
body[data-shape="rectangle"] .glass-core-timezones::before,
body[data-shape="rectangle"] .glass-core-bible-face::before,
body[data-shape="rectangle"] .glass-core-events-face::before {
    border-radius: 18px 18px 6px 6px;
}

body[data-shape="rectangle"] .time-display {
    gap: clamp(12px, 3vmin, 28px);
}

body[data-shape="rectangle"] .time-digits {
    font-size: clamp(38px, 8.8vmin, 76px);
}

/* Oculta marcadores circulares e anel de minutos quando estiver em formas não-circulares */
body[data-shape]:not([data-shape="circle"]) #tickGroup,
body[data-shape]:not([data-shape="circle"]) #minutesProgressRing,
body[data-shape]:not([data-shape="circle"]) .minutes-track {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease;
}

/* ============================================================================
 * 23. HUD AUTO-UPDATE BANNER & CACHE REVALIDATION CONTROLS
 * ============================================================================ */
.hud-update-banner {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    background: rgba(11, 19, 38, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--accent-primary, #00f2fe);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 20px var(--accent-glow-subtle, rgba(0, 242, 254, 0.25));
    color: var(--text-primary, #f8fafc);
    animation: hudBannerSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 92vw;
    width: 580px;
}

@keyframes hudBannerSlide {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.hud-update-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hud-update-icon {
    font-size: 22px;
    display: inline-block;
    animation: updateIconPulse 2s infinite ease-in-out;
}

@keyframes updateIconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px var(--accent-primary, #00f2fe));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px var(--accent-primary, #00f2fe));
    }
}

.hud-update-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hud-update-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-primary, #00f2fe);
    text-transform: uppercase;
}

.hud-update-sub {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.hud-update-btn-apply {
    background: linear-gradient(135deg, var(--accent-primary, #00f2fe), var(--accent-secondary, #4facfe));
    color: #050b14;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 0 10px var(--accent-glow-subtle, rgba(0, 242, 254, 0.3));
}

.hud-update-btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px var(--accent-primary, #00f2fe);
    filter: brightness(1.1);
}

.hud-update-btn-dismiss {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.hud-update-btn-dismiss:hover {
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

/* Painel de Opções: Seção de Sistema */
.options-section-system {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.system-update-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.system-update-btn {
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid var(--accent-primary, #00f2fe);
    color: var(--text-primary, #f8fafc);
    padding: 10px 18px;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

.system-update-btn:hover {
    background: rgba(0, 242, 254, 0.18);
    box-shadow: 0 0 14px var(--accent-glow-subtle, rgba(0, 242, 254, 0.35));
    transform: translateY(-1px);
}

.system-update-btn.checking {
    pointer-events: none;
    opacity: 0.7;
    animation: updatePulseBtn 1s infinite alternate ease-in-out;
}

@keyframes updatePulseBtn {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

.system-update-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary, #94a3b8);
}

.system-status-bullet {
    color: var(--accent-primary, #00f2fe);
    font-size: 8px;
    display: inline-block;
    animation: bulletPulse 1.5s infinite alternate;
}

@keyframes bulletPulse {
    from { opacity: 0.4; filter: none; }
    to { opacity: 1; filter: drop-shadow(0 0 4px var(--accent-primary, #00f2fe)); }
}

/* ============================================================================
 * 24. CONTROLES ÓPTICOS DO NÚCLEO // DESFOCO, COR & LUZ 3D
 * ============================================================================ */
.options-section-optic {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Mini Pré-Visualizador Óptico Interativo em Tempo Real */
.optic-preview-container {
    background: rgba(4, 7, 14, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 16px;
    margin-top: 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.optic-preview-screen {
    width: 100%;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(20, 28, 48, 0.55) 0%, rgba(4, 7, 14, 0.95) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: visible;
}

.optic-preview-core {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(
        125% 125% at 32% 18%,
        rgba(255, 255, 255, calc(var(--core-opacity, 0.70) * 0.28)) 0%,
        rgba(var(--core-base-color, 15, 23, 38), calc(var(--core-opacity, 0.70) * 0.40)) 28%,
        rgba(var(--core-base-color, 15, 23, 38), calc(var(--core-opacity, 0.70) * 0.85)) 60%,
        rgba(var(--core-base-color, 15, 23, 38), var(--core-opacity, 0.70)) 100%
    ) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow: 
        inset 0 2px 3px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.70),
        0 14px 35px rgba(0, 0, 0, 0.85),
        0 calc(-0.45 * var(--optic-light-top, 30px)) calc(var(--optic-light-top, 30px) * 0.9) calc(var(--optic-light-top, 30px) * 0.15) var(--optic-light-color, var(--accent-primary)),
        0 calc(0.45 * var(--optic-light-bottom, 45px)) calc(var(--optic-light-bottom, 45px) * 0.9) calc(var(--optic-light-bottom, 45px) * 0.15) var(--optic-light-color, var(--accent-primary)),
        calc(-0.45 * var(--optic-light-left, 20px)) 0 calc(var(--optic-light-left, 20px) * 0.9) calc(var(--optic-light-left, 20px) * 0.15) var(--optic-light-color, var(--accent-primary)),
        calc(0.45 * var(--optic-light-right, 20px)) 0 calc(var(--optic-light-right, 20px) * 0.9) calc(var(--optic-light-right, 20px) * 0.15) var(--optic-light-color, var(--accent-primary)) !important;
    backdrop-filter: blur(var(--core-blur, 28px)) saturate(200%) !important;
    -webkit-backdrop-filter: blur(var(--core-blur, 28px)) saturate(200%) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s ease, background 0.15s ease, backdrop-filter 0.15s ease;
    user-select: none;
}

.optic-preview-sample-time {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-shadow: 0 0 10px var(--optic-light-color, var(--accent-primary));
}

.optic-preview-sample-sub {
    font-family: var(--font-display);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    margin-top: 1px;
}

.optic-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 10.5px;
    flex-wrap: wrap;
    gap: 6px;
}

.optic-preview-tag {
    color: var(--accent-primary);
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.optic-preview-details {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 9.5px;
}

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

.optic-card-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.optic-card-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-primary, #00f2fe);
    display: block;
}

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

.optic-btn-sync {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-secondary, #94a3b8);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.optic-btn-sync.active {
    background: rgba(0, 242, 254, 0.12);
    border-color: var(--accent-primary, #00f2fe);
    color: var(--accent-primary, #00f2fe);
    box-shadow: 0 0 10px var(--accent-glow-subtle, rgba(0, 242, 254, 0.2));
}

.optic-sync-dot {
    font-size: 8px;
    color: currentColor;
}

.optic-control-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.optic-control-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #94a3b8);
    font-weight: 600;
}

.optic-val-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-primary, #00f2fe);
    background: rgba(0, 242, 254, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 242, 254, 0.25);
}

.optic-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.optic-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary, #00f2fe);
    box-shadow: 0 0 10px var(--accent-primary, #00f2fe), 0 0 2px #fff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.optic-range::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 0 16px var(--accent-primary, #00f2fe), 0 0 4px #fff;
}

.optic-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary, #00f2fe);
    border: none;
    box-shadow: 0 0 10px var(--accent-primary, #00f2fe);
    cursor: pointer;
}

.optic-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.optic-color-input {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    overflow: hidden;
}

.optic-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.optic-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.optic-color-code {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent-primary, #00f2fe);
    letter-spacing: 0.05em;
}

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

.optic-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.optic-swatch:hover {
    transform: scale(1.25);
    box-shadow: 0 0 8px currentColor;
    border-color: #fff;
}

.optic-link-row {
    display: flex;
    justify-content: flex-start;
    margin: 2px 0;
}

.optic-link-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--text-secondary, #94a3b8);
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.optic-link-toggle.linked {
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid var(--accent-primary, #00f2fe);
    color: var(--accent-primary, #00f2fe);
    box-shadow: 0 0 10px var(--accent-glow-subtle, rgba(0, 242, 254, 0.2));
}

.optic-directions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.optic-direction-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.optic-direction-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
}

.optic-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.optic-reset-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary, #94a3b8);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.optic-reset-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f8fafc);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================================
 * 20. ATALHOS RÁPIDOS, BOTÕES DE LAYOUT & TIPOGRAFIA DINÂMICA
 * ============================================================================ */
.optic-quick-presets-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: -2px;
    margin-bottom: 2px;
}

.optic-preset-title {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
}

.optic-preset-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.optic-preset-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.optic-preset-pill:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 0 8px var(--accent-glow-subtle);
}

.optic-layout-toggle-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.optic-layout-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.optic-layout-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.25);
}

.optic-layout-btn.active {
    background: rgba(0, 242, 254, 0.16);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 14px var(--accent-glow-subtle);
}

/* Adaptações do Mini Pré-Visualizador para Layout Vertical */
body[data-time-layout="vertical"] .optic-preview-core {
    gap: 2px;
}

body[data-time-layout="vertical"] .optic-preview-sample-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    line-height: 0.90;
    letter-spacing: 0.02em;
}

body[data-time-layout="vertical"] .optic-preview-sample-sub {
    font-size: 6.5px;
    margin-top: 2px;
}