/* =============================
   Date pill (top-left)
   ============================= */
.fc-date {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10001;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Numeric stability */
#date-time { font-variant-numeric: tabular-nums; }

/* Light theme tweak for legibility */
html:not([data-theme="dark"]) .fc-date { background: rgba(0,0,0,0.45); }

/* High-contrast safety */
@media (forced-colors: active){
  .fc-date { background: Canvas; color: CanvasText; box-shadow: none; }
}

/* Small screens */
@media (max-width: 480px){
  .fc-date { top: 0.75rem; left: 0.75rem; font-size: 0.85rem; padding: 0.35rem 0.55rem; }
}
/* css/style.css - VibeMe Enhanced Styles */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* Theme Colors (dynamically updated by JS) */
    --color1: #aaaaaa;
    --color2: #bbbbbb;
    --color3: #cccccc;
    --container-bg-color: rgba(255, 255, 255, 0.95);
    --inner-box-color: rgba(255, 255, 255, 0.85);
    --text-color-main: #374151;
    --text-color-secondary: #6b7280;
    --social-icon-bg: #555555;
    
    /* Font Families (dynamically updated by JS) */
    --font-quote: 'Playfair Display', serif;
    --font-heading: 'Poppins', sans-serif;
    --font-author: 'Poppins', sans-serif;
    
    /* Animation Timings */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-theme: 1.5s ease;
    --bounce-timing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --elastic-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --typewriter-speed: 0.05s;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-full: 50%;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Z-Index Scale */
    --z-negative: -1;
    --z-base: 1;
    --z-elevated: 10;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal-backdrop: 9999;
    --z-modal: 10000;
    --z-popover: 10001;
    --z-tooltip: 10002;
    
    /* Settings-driven tokens */
    --glow-size: 150px;
    --glow-intensity: 0.8;
    --matrix-opacity-token: 0.8;
    --container-blur: 20px;
    --card-radius: var(--radius-lg);
}

/* ===== RESET & BASE STYLES ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-heading);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background var(--transition-theme);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent page scrolling (X & Y) across browsers */
html { overflow: hidden; }
@supports (overflow: clip) {
  html, body { overflow: clip; }
}

/* Disable bounce/overscroll effects that can reveal hidden overflow */
html, body { overscroll-behavior: none; }

/* ===== Viewport fit: prevent any page scroll (x & y) ===== */
html, body { height: 100%; }
body { min-height: 100dvh; height: 100dvh; overflow: hidden !important; padding: 0 !important; }

/* Constrain main UI to the viewport width/height */
#app-title-bar,
.quote-container-outer {
  max-width: min(92vw, 1100px);
  margin-left: auto;
  margin-right: auto;
}

/* Ensure inner card never pushes the page taller than the viewport */
.quote-container-inner {
  max-height: calc(100dvh - 160px); /* room for title, clock, buttons */
  overflow: hidden;
}

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

/* Focus management for keyboard navigation */
body.using-keyboard *:focus {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

body:not(.using-keyboard) *:focus {
    outline: none;
}

/* ===== TYPOGRAPHY ===== */
.quote-text-font { 
    font-family: var(--font-quote); 
}

.heading-font { 
    font-family: var(--font-heading); 
}

.author-font { 
    font-family: var(--font-author); 
}

.dynamic-text-main {
    color: var(--text-color-main);
    transition: color var(--transition-theme);
}

.dynamic-text-secondary {
    color: var(--text-color-secondary);
    transition: color var(--transition-theme);
}

/* ===== BACKGROUND & GRADIENT ===== */
.gradient-bg {
    background: linear-gradient(135deg, var(--color1), var(--color2), var(--color3));
    transition: background var(--transition-theme);
}

/* ===== MAIN QUOTE CONTAINER ===== */
.quote-container-outer {
    position: relative;
    padding: 4px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--color1), var(--color2), var(--color3));
    box-shadow: var(--shadow-lg);
    border: 3px solid;
    animation: rgb-border-spin 8s linear infinite;
    z-index: var(--z-base);
    overflow: clip; /* clip decorative ::before glow so it can't widen layout */
    contain: layout paint; /* isolate layout/paint to avoid accidental page overflow */
}

.quote-container-outer::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    border: 2px solid;
    z-index: var(--z-negative);
    animation: rgb-border-spin 8s linear infinite reverse;
    filter: blur(8px);
    opacity: 0.7;
}

.quote-container-inner {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(var(--container-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--container-blur)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-lg);
    border-radius: var(--card-radius);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

/* Quote pattern background */
.quote-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    mix-blend-mode: multiply;
    border-radius: var(--radius-lg);
    transition: background-image var(--transition-medium);
}

/* ===== ANIMATIONS ===== */
@keyframes rgb-border-spin {
    0% { border-color: hsl(0, 85%, 65%); box-shadow: 0 0 15px hsl(0, 85%, 65%); }
    16.6% { border-color: hsl(60, 85%, 65%); box-shadow: 0 0 15px hsl(60, 85%, 65%); }
    33.3% { border-color: hsl(120, 85%, 65%); box-shadow: 0 0 15px hsl(120, 85%, 65%); }
    50% { border-color: hsl(180, 85%, 65%); box-shadow: 0 0 15px hsl(180, 85%, 65%); }
    66.6% { border-color: hsl(240, 85%, 65%); box-shadow: 0 0 15px hsl(240, 85%, 65%); }
    83.3% { border-color: hsl(300, 85%, 65%); box-shadow: 0 0 15px hsl(300, 85%, 65%); }
    100% { border-color: hsl(360, 85%, 65%); box-shadow: 0 0 15px hsl(360, 85%, 65%); }
}

@keyframes float {
    0% { 
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); 
        transform: translatey(0px); 
    }
    50% { 
        box-shadow: 0 20px 15px 0px rgba(0, 0, 0, 0.2); 
        transform: translatey(-10px); 
    }
    100% { 
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); 
        transform: translatey(0px); 
    }
}

@keyframes gradient-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes matrix-fall {
    0% { 
        top: -100vh; 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
    }
    90% { 
        opacity: 0.7; 
    }
    100% { 
        top: 100vh; 
        opacity: 0; 
    }
}

/* Bidirectional matrix effect - upward movement */
@keyframes matrix-rise {
    0% { 
        top: 100vh; 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
    }
    90% { 
        opacity: 0.7; 
    }
    100% { 
        top: -100vh; 
        opacity: 0; 
    }
}

/* ===== QUOTE TEXT ANIMATIONS ===== */
.quote-animation-container {
    perspective: 1000px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Typewriter effect */
.typewriter-active {
    overflow: hidden;
    border-right: 3px solid var(--text-color-main);
    white-space: nowrap;
    animation: typewriter 2s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typewriter {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--text-color-main) }
}

/* Floating micro-animation */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Pulse effect for favorites */
.pulse-favorite {
    animation: pulseFavorite 0.6s var(--elastic-timing);
}

@keyframes pulseFavorite {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Button press effect */
.button-press {
    animation: buttonPress 0.15s var(--bounce-timing);
}

@keyframes buttonPress {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1.05); }
}

.quote-text-animate {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.exit-active { 
    animation: exitAnimation 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; 
}

@keyframes exitAnimation {
    0% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
    30% { transform: translateY(-20px) rotateX(20deg) scale(1.1); opacity: 0.8; }
    100% { transform: translateY(100px) rotateX(60deg) scale(0.5); opacity: 0; }
}

.enter-active { 
    animation: enterAnimation 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

@keyframes enterAnimation {
    0% { transform: translateY(-100px) rotateX(-60deg) scale(0.5); opacity: 0; }
    70% { transform: translateY(20px) rotateX(10deg) scale(1.05); opacity: 0.8; }
    100% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
}

/* Author animations */
.author-animate { 
    transform-origin: center bottom; 
    will-change: transform, opacity; 
}

.author-exit { 
    animation: authorExit 0.6s ease-out forwards; 
}

@keyframes authorExit {
    0% { transform: translateX(0) scaleY(1); opacity: 1; }
    100% { transform: translateX(50px) scaleY(0.8); opacity: 0; }
}

.author-enter { 
    animation: authorEnter 0.6s ease-in forwards; 
}

@keyframes authorEnter {
    0% { transform: translateX(-50px) scaleY(0.8); opacity: 0; }
    100% { transform: translateX(0) scaleY(1); opacity: 1; }
}

/* ===== GLITCH EFFECT ===== */
.glitch-effect { 
    position: relative; 
}

.glitch-effect::before,
.glitch-effect::after {
    content: attr(data-text);
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.glitch-effect::before { 
    color: #f0f; 
    z-index: var(--z-negative); 
    animation: glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 
}

.glitch-effect::after { 
    color: #0ff; 
    z-index: calc(var(--z-negative) - 1); 
    animation: glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both; 
}

@keyframes glitch-anim {
    0% { transform: translate(0); opacity: 1; }
    20% { transform: translate(-5px, 5px); opacity: 0.8; }
    40% { transform: translate(-5px, -5px); opacity: 0.6; }
    60% { transform: translate(5px, 5px); opacity: 0.4; }
    80% { transform: translate(5px, -5px); opacity: 0.2; }
    100% { transform: translate(0); opacity: 0; }
}

/* ===== GENERATE BUTTON ===== */
.generate-btn {
    width: 110px;
    height: 110px;
    padding: 5px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color1), var(--color2));
    color: white;
    border: none;
    position: relative;
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: none;
    overflow: hidden;
    cursor: pointer;
    z-index: var(--z-elevated);
}

.generate-btn::before {
    content: '';
    position: absolute;
    z-index: var(--z-negative);
    inset: -3px;
    border-radius: var(--radius-full);
    background: linear-gradient(60deg, var(--color1), var(--color2), var(--color3), var(--color1));
    background-size: 300% 300%;
    animation: gradient-border-flow 4s linear infinite;
    filter: blur(2px);
}

.generate-btn i {
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
    margin-right: 0;
}

.generate-btn span {
    font-size: 0.7rem;
    line-height: 1.1;
    display: block;
    font-weight: 600;
}

.generate-btn:hover {
    transform: translatey(0px);
}

.generate-btn:hover::before {
    filter: blur(4px);
}

.generate-btn:active {
    transform: translatey(2px);
}

/* ===== SOCIAL BUTTONS ===== */
.social-bubble {
    position: relative;
    z-index: var(--z-elevated);
    transition: all var(--transition-medium);
    border-radius: var(--radius-full);
    background-color: var(--social-icon-bg);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.social-bubble::before {
    content: '';
    position: absolute;
    top: -4px; 
    left: -4px; 
    right: -4px; 
    bottom: -4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    z-index: var(--z-negative);
    opacity: 0;
    transition: all var(--transition-medium);
}

.social-bubble:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}

.social-bubble:hover::before {
    opacity: 1;
    top: -6px; 
    left: -6px; 
    right: -6px; 
    bottom: -6px;
}

.social-bubble i {
    color: white;
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Ensure brand icons are visible */
.social-bubble .fab {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", sans-serif;
    font-weight: 400;
}

/* Fallback for icons if Font Awesome fails */
.social-bubble .fab::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Specific fallbacks for social media icons */
#twitter-share .fab::before {
    content: "\f099"; /* Twitter icon */
}

#facebook-share .fab::before {
    content: "\f09a"; /* Facebook icon */
}

#linkedin-share .fab::before {
    content: "\f0e1"; /* LinkedIn icon */
}

#whatsapp-share .fab::before {
    content: "\f232"; /* WhatsApp icon */
}

#pinterest-share .fab::before {
    content: "\f0d2"; /* Pinterest icon */
}

/* ===== ENHANCED MOUSE GLOW EFFECT ===== */
.mouse-glow {
    position: fixed;
    width: var(--glow-size);
    height: var(--glow-size);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
    mix-blend-mode: screen;
    filter: blur(40px);
    will-change: transform, background;
    
    /* CSS variables for dynamic color changes via JavaScript */
    --glow-hue: 200;
    --glow-saturation: 100%;
    --glow-lightness: 60%;

    /* The radial gradient creates the layered glow effect */
    background: radial-gradient(
        circle,
        hsla(var(--glow-hue), var(--glow-saturation), var(--glow-lightness), 0.8) 0%,
        hsla(var(--glow-hue), var(--glow-saturation), var(--glow-lightness), 0.5) 30%,
        hsla(var(--glow-hue), var(--glow-saturation), var(--glow-lightness), 0.2) 50%,
        hsla(var(--glow-hue), var(--glow-saturation), var(--glow-lightness), 0) 70%
    );
}

/* A special class applied when hovering over interactive elements */
.mouse-glow.hover-effect {
    width: 200px;
    height: 200px;
    filter: blur(50px);
    opacity: 1 !important;
}

/* High contrast mode for better visibility on light backgrounds */
@media (prefers-contrast: high) {
    .mouse-glow {
        mix-blend-mode: difference;
        filter: blur(15px) contrast(1.5);
    }
}

/* Alternative glow styles for different background luminance */
.mouse-glow.high-contrast {
    mix-blend-mode: difference;
    filter: blur(18px) contrast(1.2);
}

.mouse-glow.low-contrast {
    mix-blend-mode: screen;
    filter: blur(22px) brightness(1.3);
    
    /* Enhanced visibility on similar colors */
    background: 
        radial-gradient(
            circle at center,
            hsl(calc(var(--glow-hue) + 180), 100%, 70%) 0%,
            hsla(calc(var(--glow-hue) + 180), 90%, 65%, 0.8) 25%,
            hsla(var(--glow-hue), var(--glow-saturation), var(--glow-lightness), 0.6) 50%,
            transparent 100%
        );
}

/* Dark mode optimizations */
:root[data-theme="dark"] .mouse-glow {
    mix-blend-mode: screen;
    filter: blur(20px) brightness(1.2);
}

/* Light mode optimizations */
html:not([data-theme="dark"]) .mouse-glow {
    mix-blend-mode: multiply;
    filter: blur(20px) contrast(1.3);
}

/* ===== MATRIX BACKGROUND EFFECT ===== */
/* Main container for the matrix effect - covers entire viewport */
.matrix-bg {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: var(--z-negative); 
    overflow: hidden; 
    opacity: 0.7; /* Slightly transparent for layered look */
    background: rgba(0, 0, 0, 0.1);
    /* Mix blend mode is now dynamic - set by JavaScript */
}

/* Canvas matrix effect - layered above DOM matrix */
.matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: calc(var(--z-negative) + 1); /* Above DOM matrix but below content */
    pointer-events: none; /* Allow interaction with elements below */
    opacity: var(--matrix-opacity-token); /* Slightly more visible than DOM matrix */
    display: none; /* Hidden by default, shown when canvas mode is active */
}

/* Individual column of falling characters */
.binary-column {
    position: absolute; 
    top: 0; 
    width: 16px; 
    font-family: 'Roboto Mono', 'Courier New', 'Monaco', 'Menlo', monospace; 
    font-size: 14px;
    line-height: 1.1;
    font-weight: bold;
    color: rgba(0, 255, 0, 0.9); /* Fallback green color */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7); /* Fallback glow */
    
    /* Enhanced text rendering for crisp characters */
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Performance optimizations */
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden;
    will-change: transform, opacity;
    
    /* Improve compositing to avoid square glow tiles on blends */
    image-rendering: auto;
    isolation: isolate;
    contain: paint;
    
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    
    /* Matrix column specific */
    display: block;
    text-align: center; 
    opacity: 0;
    transition: opacity 0.3s ease;
    letter-spacing: 0px;
}

/* Class to make column visible after creation */
.binary-column.visible { 
    opacity: 1; 
}

/* Individual character within a column - display:block stacks vertically */
.binary-column .matrix-char {
    display: block; 
    font-size: inherit;
    text-align: center;
    /* Opacity set inline by JavaScript for trailing effect */
}

/* Guard the head glyph itself */
.binary-column .matrix-char.head {
    background: transparent !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes fall {
    from { transform: translateY(-100%); }
    to { transform: translateY(100vh); }
}

/* ===== EFFECTS DISABLED STATE ===== */
body.effects-disabled .mouse-glow,
body.effects-disabled .matrix-bg,
body.effects-disabled .matrix-canvas {
    display: none !important;
}

/* ===== INTELLIGENT MATRIX BLEND MODES ===== */

/* Dark backgrounds - use screen blend mode for classic glow effect */
.matrix-mode-dark-bg .binary-column {
    mix-blend-mode: screen;
    /* Enhanced multi-layer text shadow for dark backgrounds */
    text-shadow: 
        0 0 1px rgba(255, 255, 255, 0.9),    /* Sharp white corona for definition */
        0 0 3px currentColor,                 /* Main color glow */
        0 0 8px currentColor,                 /* Extended glow */
        0 0 15px currentColor;                /* Outer halo */
}

/* Light backgrounds - use multiply blend mode for sharp contrast */
.matrix-mode-light-bg .binary-column {
    mix-blend-mode: multiply;
    /* Enhanced multi-layer text shadow for light backgrounds */
    text-shadow: 
        0 0 1px rgba(0, 0, 0, 0.8),          /* Dark outline for definition */
        0 0 2px currentColor,                 /* Subtle color glow */
        0 0 4px currentColor,                 /* Medium glow */
        1px 1px 2px rgba(0, 0, 0, 0.3);      /* Backdrop shadow for separation */
}

/* High contrast mode - forces maximum visibility */
.matrix-mode-high-contrast .binary-column {
    mix-blend-mode: difference;
    font-weight: bold;
    text-shadow: 
        0 0 1px rgba(255, 255, 255, 1),      /* Strong white outline */
        0 0 3px currentColor,                 /* Strong color glow */
        0 0 6px currentColor,                 /* Extended strong glow */
        0 0 12px currentColor,                /* Maximum outer glow */
        2px 2px 4px rgba(0, 0, 0, 0.5);      /* Strong backdrop shadow */
    filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 6px currentColor);
}

/* Leading character highlight system */
/* [region:matrix-head] — rounded "head" highlight without boxy artifacts */
.matrix-head {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 700;
    /* Kill layered text-shadow (causes square tiles when blended) */
    text-shadow: none;
    /* GPU-friendly, round glow */
    filter:
      drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 6px currentColor)
      drop-shadow(0 0 12px currentColor);
    background: transparent !important;
    /* Feather edges so the leading cell is circular */
    -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 70%, transparent 100%);
            mask-image: radial-gradient(70% 60% at 50% 55%, #000 70%, transparent 100%);
}
/* [end:matrix-head] */

/* Trailing characters with fade effect */
.matrix-trail-1 { opacity: 0.8; }
.matrix-trail-2 { opacity: 0.6; }
.matrix-trail-3 { opacity: 0.4; }
.matrix-trail-4 { opacity: 0.2; }
.matrix-trail-5 { opacity: 0.1; }

/* ===== BUTTONS & INTERACTIVE ELEMENTS ===== */
button {
    cursor: pointer;
    transition: all var(--transition-fast);
}

button:hover {
    transform: translateY(-1px);
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Action buttons (copy, favorite, timer) */
.action-button {
    padding: var(--spacing-sm);
    border-radius: var(--radius-full);
    transition: all var(--transition-medium);
}

.action-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* TTS Inline Controls Polish */
#tts-inline-controls .action-button i {
    font-size: 0.95rem;
    line-height: 1;
}

/* Enhanced disabled state for stop button */
#tts-stop-btn[disabled] {
    opacity: 0.45;
    pointer-events: none;
}

/* Toggle button pressed state */
#tts-toggle-btn[aria-pressed="true"] {
    background-color: rgba(255,255,255,0.2);
    box-shadow: var(--shadow-sm) inset;
}

/* ===== SETTINGS PANEL ===== */
#settings-toggle {
    transition: all var(--transition-medium);
}

#settings-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(45deg);
}

#settings-panel {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#settings-panel input[type="checkbox"] {
    cursor: pointer;
}

#settings-panel button {
    transition: all var(--transition-fast);
    font-weight: 500;
}

#settings-panel button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ===== ADD QUOTE FORM ===== */
#add-quote-form {
    animation: slideDown 0.3s ease-out;
}

#add-quote-form.hidden {
    animation: slideUp 0.3s ease-in;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
}

#add-quote-form textarea,
#add-quote-form input {
    transition: all var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#add-quote-form textarea:focus,
#add-quote-form input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .binary-column { 
        width: 14px; /* Proper width for tablet fonts */
        font-size: 12px; 
    }
    
    .generate-btn {
        width: 90px;
        height: 90px;
    }
    
    .social-bubble {
        width: 36px;
        height: 36px;
    }
    
    .social-bubble i {
        font-size: 0.9rem;
    }
    
    #settings-panel {
        width: 250px;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .binary-column { 
        width: 13px; /* Proper width for mobile fonts */
        font-size: 11px; 
    }
    
    .generate-btn {
        width: 80px;
        height: 80px;
    }
    
    .generate-btn i {
        font-size: 1.2rem;
    }
    
    .generate-btn span {
        font-size: 0.6rem;
    }
    
    .social-bubble {
        width: 32px;
        height: 32px;
    }
    
    .social-bubble i {
        font-size: 0.8rem;
    }
    
    #settings-panel {
        width: 200px;
        padding: var(--spacing-md);
    }
    
    .quote-container-outer {
        margin-inline: auto;            /* center horizontally without adding width */
        margin-block: var(--spacing-sm);/* keep top/bottom breathing room */
    }
    
    .quote-container-inner {
        padding: var(--spacing-md);
    }

    #app-title-bar,
    .quote-container-outer {
        max-width: min(94vw, 1100px); /* small-screen tweak to guarantee no horizontal creep */
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .mouse-glow,
    .matrix-bg,
    .matrix-canvas,
    .generate-btn,
    .social-bubble,
    #settings-toggle,
    #settings-panel,
    .action-button {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
    
    .quote-container-outer,
    .quote-container-inner {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .dynamic-text-main,
    .dynamic-text-secondary {
        color: #000 !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --text-color-main: #000000;
        --text-color-secondary: #333333;
    }
    
    .quote-container-inner {
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid #000000;
    }
    
    .social-bubble {
        background-color: #000000;
        border: 2px solid #ffffff;
    }
}

/* ===== DARK MODE ===== */
:root[data-theme="dark"] {
    --text-color-main: #e5e7eb;
    --text-color-secondary: #d1d5db;
    --container-bg-color: rgba(31, 41, 55, 0.95);
    --inner-box-color: rgba(55, 65, 81, 0.85);
    --social-icon-bg: #374151;
}

:root[data-theme="dark"] .gradient-bg {
    background: linear-gradient(135deg, #1f2937, #374151, #4b5563);
}

:root[data-theme="dark"] .quote-container-inner {
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] #settings-panel {
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] #daily-quote-widget {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .action-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .binary-column {
    color: rgba(34, 197, 94, 0.9);
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

@media (prefers-color-scheme: dark) {
    /* Auto dark mode based on system preference */
    :root {
        --text-color-main: #e5e7eb;
        --text-color-secondary: #d1d5db;
        --container-bg-color: rgba(31, 41, 55, 0.95);
        --inner-box-color: rgba(55, 65, 81, 0.85);
        --social-icon-bg: #374151;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.quote-container-outer,
.quote-container-inner,
.generate-btn,
.social-bubble,
.mouse-glow,
.binary-column {
    will-change: transform;
}

/* Optimize for touch devices */
@media (hover: none) and (pointer: coarse) {
    .social-bubble:hover,
    .generate-btn:hover,
    button:hover {
        transform: none;
    }
    
    .social-bubble:active,
    .generate-btn:active,
    button:active {
        transform: scale(0.95);
    }
}

/* ===== LOADING STATES ===== */
.app-loading {
    opacity: 0.5;
    pointer-events: none;
}

.app-loaded {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--transition-slow);
}

/* ===== UTILITY CLASSES ===== */
.hidden {
    display: none !important;
}

.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;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no-scroll {
    overflow: hidden;
}

/* ===== DEBUG STYLES (Development only) ===== */
.debug-outline * {
    outline: 1px solid red;
}

.debug-performance .slow-element {
    background-color: rgba(255, 0, 0, 0.2) !important;
}

/* ===== FALLBACK FONTS ===== */
@font-face {
    font-family: 'system-fallback';
    src: local('system-ui'), local('-apple-system'), local('Segoe UI'), local('Roboto'), local('Arial');
    font-display: swap;
}

/* Apply fallback if Google Fonts fail to load */
.fonts-failed {
    font-family: 'system-fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.fonts-failed .quote-text-font,
.fonts-failed .heading-font,
.fonts-failed .author-font {
    font-family: inherit;
}

/* ===== VibeMe theme-aware logo ===== */
.vb-logo{
  position: relative;
  display: inline-block;
  font-weight: 900;
  letter-spacing: .02em;
  /* responsive size without breaking layout */
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  line-height: 1.1;

  /* gradient fill from theme */
  color: transparent;
  background: linear-gradient(90deg, var(--color1), var(--color2), var(--color3));
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

  /* crisp outline (flips in dark mode below) */
  -webkit-text-stroke: 1.6px rgba(0,0,0,.35);

  /* gentle motion */
  animation: vb-logo-pan 12s linear infinite;

  /* layered glow that doesn't blur glyph edges */
  text-shadow:
    0 0 10px var(--color1),
    0 0 22px var(--color2),
    0 0 36px var(--color3);
}

/* flip outline for dark themes */
.dark .vb-logo,
:root[data-theme="dark"] .vb-logo{
  -webkit-text-stroke-color: rgba(255,255,255,.25);
}

/* gradient underline pill */
.vb-logo::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -.35em;
  width: clamp(120px, 55%, 520px);
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--color1), var(--color2), var(--color3));
  box-shadow:
    0 0 10px var(--color2),
    0 0 22px var(--color3);
}

/* accessibility: prefer crispness over motion if requested */
@media (prefers-reduced-motion: reduce){
  .vb-logo{ animation: none; }
}

/* subtle gradient pan for life without distraction */
@keyframes vb-logo-pan{
  0%{   background-position:   0% 50%; }
  50%{  background-position: 100% 50%; }
  100%{ background-position:   0% 50%; }
}

/* ===== Title bar layout + spacing presets ===== */
:root{
  --title-top: clamp(8px, 2.5vh, 20px);
  --title-gap: clamp(6px, 2.2vh, 18px);
}
.app-title-bar{
  position: relative;
  z-index: 5; /* above canvas */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: var(--title-top);
  margin-bottom: var(--title-gap);
}

/* Optional spacing modes you can toggle by class on #app-title-bar */
#app-title-bar.title-tight{  --title-top: clamp(6px, 1.6vh, 14px); --title-gap: clamp(4px, 1.4vh, 12px); }
#app-title-bar.title-roomy{  --title-top: clamp(12px, 4vh, 32px); --title-gap: clamp(10px, 3vh, 28px); }
/* "Comfy" is the default (base vars above). You can also add .title-comfy for clarity. */
#app-title-bar.title-comfy{  --title-top: clamp(8px, 2.5vh, 20px); --title-gap: clamp(6px, 2.2vh, 18px); }

/* ===== Bigger, still crisp logo (builds on your vb-logo) ===== */
.vb-logo{
  font-size: clamp(3rem, 8vw, 6.5rem);   /* larger title */
  line-height: 1.05;
}
@media (max-width: 480px){
  .vb-logo{ font-size: clamp(2rem, 10vw, 3rem); }
}

/* Hide the small, in-card VibeMe if a title bar is present above the card */
.quote-container-outer #app-title-bar + .quote-container-inner .vb-logo { 
  display: none !important; 
}

/* Ensure the title bar spans full width and is centered */
.app-title-bar{
  width:100%;
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-top: clamp(8px, 2.5vh, 20px);
  margin-bottom: clamp(8px, 2.5vh, 22px);
}

/* Keep the big, crisp logo sizing */
.vb-logo{
  font-size: clamp(3.25rem, 8vw, 6.75rem);
  line-height: 1.05;
}

/* Title bar alignment: will be width-synced to the card via JS; provide a sane fallback */
.app-title-bar{
  width: 100%;
  max-width: 56rem;            /* fallback (Tailwind max-w-4xl) */
  margin: clamp(8px, 2.5vh, 20px) auto clamp(10px, 3vh, 26px);
  padding-inline: 1rem;
  display: flex; 
  flex-direction: column;
  gap: .35rem;
  align-items: center; 
  justify-content: center; 
  text-align: center;
  z-index: 20;                 /* above card ring */
  pointer-events: none;        /* don't block UI below */
}
.app-title-bar .vb-logo{ pointer-events: auto; }

/* If a title bar directly precedes the card, hide any small in-card logo to avoid duplicates */
#app-title-bar + .quote-container-outer .quote-container-inner .vb-logo{
  display: none !important;
}

/* Crisp but not hollow header */
.vb-logo{
  -webkit-text-stroke: 1px rgba(0,0,0,.28);
  text-shadow:
    0 0 8px  var(--color1),
    0 0 16px var(--color2),
    0 0 22px var(--color3);
  font-size: clamp(3.25rem, 8vw, 6.75rem);
  line-height: 1.05;
}
.dark .vb-logo, :root[data-theme="dark"] .vb-logo{
  -webkit-text-stroke-color: rgba(255,255,255,.22);
}
/* Underline sits lower so it doesn't collide with the card edge */
.vb-logo::after{ bottom:-.55em; height:5px; width: clamp(140px, 45%, 460px); }

/* Kill the pseudo-underline under the big title to prevent the smear */
.app-title-bar .vb-logo::after{ display:none !important; }

/* Give a touch more gap between title area and the card */
.app-title-bar{
  margin-bottom: clamp(14px, 3.2vh, 36px);
}

/* Real anchor bar block under the H1 */
.app-title-bar .logo-underline{
  display:block;
  height:6px;
  margin-top: 0;                      /* gap handles spacing now */
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--color1), var(--color2), var(--color3));
  box-shadow:
    0 0 8px  var(--color2),
    0 0 16px var(--color3);
  width: clamp(160px, 55%, 560px);    /* JS will refine based on H1 width */
  margin-left:auto; margin-right:auto;
}

/* If your matrix uses a canvas element, keep it full-bleed behind the app */
#matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: calc(var(--z-negative) + 1); /* above DOM matrix, below content */
  pointer-events: none;
  opacity: var(--matrix-opacity-token);
}

/* Ensure settings panel body can scroll to reveal controls at the bottom */
#settings-panel { 
    max-height: 90vh; 
    overflow-y: auto; 
    overscroll-behavior: contain; 
}

/* Favorites off-canvas states */
#favorites-panel.open { transform: translateX(0); }
#favorites-toggle { box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* Favorite item card */
.favorite-item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
}
.favorite-item .meta{ opacity:.75; font-size:.85rem; }

/* Minimal scrollbar */
#favorites-list::-webkit-scrollbar{ width: 8px; }
#favorites-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 9999px; }

.toast{
  pointer-events: auto;
  min-width: 220px;
  max-width: 92vw;
  margin-inline: auto;
  color: #fff;
  background: rgba(25,25,25,.88);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(8px);
  opacity: 0;
  animation: toast-in .18s ease-out forwards;
}
.toast.success{ background: rgba(24, 160, 88, .92); }
.toast.error{   background: rgba(200, 60, 60, .92); }
.toast.info{    background: rgba(40, 120, 220, .92); }

@keyframes toast-in { to { transform: translateY(0); opacity:1; } }
@keyframes toast-out{ to { transform: translateY(8px); opacity:0; } }

/* === Flip Clock (title anchor) ============================================= */
:root{
  /* Derived tints from theme vars; fallbacks are safe/dark and subtle */
  --flip-bg: color-mix(in oklab, #0c0f18 86%, var(--color2, #7dd3fc) 14%);
  --flip-text: rgba(255,255,255,0.95);
  --flip-divider: rgba(255,255,255,0.10);
  --flip-glow: color-mix(in oklab, var(--color3, #a78bfa) 55%, transparent 45%);
}

.flip-clock{ 
  display:flex; gap:.9rem; justify-content:center; align-items:center; 
  margin-top:.55rem; user-select:none; perspective: 1000px;
}
.flip-clock[hidden]{ display:none !important; }

.flip-clock__piece{ display:inline-flex; flex-direction:column; align-items:center; }
.flip-clock__slot{ margin-top:.35rem; font-size:11px; letter-spacing:.2px;
  color: var(--dynamic-text-secondary, rgba(255,255,255,.75)); text-shadow:0 1px 0 rgba(0,0,0,.35);
}

.flip-clock__card.card{
  position:relative; width:88px; height:64px; border-radius:14px; overflow:hidden;
  background: var(--flip-bg);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 18px var(--flip-glow);
  transform-style: preserve-3d;
}

.card__top, .card__bottom, .card__back .card__bottom{
  position:absolute; left:0; right:0; height:50%;
  display:flex; align-items:center; justify-content:center;
  font: 800 34px/1.05 var(--heading-font, ui-sans-serif, system-ui);
  color: var(--flip-text);
  letter-spacing:.5px;
}
.card__top{ top:0; border-bottom:1px solid var(--flip-divider);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
}
.card__bottom{ bottom:0; transform-origin: top;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(255,255,255,.03));
}
.card__back{ position:absolute; inset:0; }

@keyframes flipTop { 0%{transform:rotateX(0)} 100%{transform:rotateX(-90deg)} }
@keyframes flipBottom { 0%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }
.flip .card__top { animation: flipTop .7s ease-in both; }
.flip .card__back .card__bottom { animation: flipBottom .7s ease-out .7s both; }

/* Small screens: scale down to avoid crowding the title area */
@media (max-width: 480px){
  .flip-clock__card.card{ width:72px; height:52px; border-radius:12px; }
  .card__top,.card__bottom,.card__back .card__bottom{ font-size:28px; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .flip .card__top, .flip .card__back .card__bottom { animation: none !important; }
}

/* ===== Flip Clock — Classic Skin (flat charcoal, crisp divider) ===== */
#app-title-bar .flip-clock-mount{ width:auto !important; display:flex; justify-content:center; }
#app-title-bar .flip-clock-mount .flip-clock{ gap: 14px; margin-top: clamp(8px,1.6vh,14px); }
#app-title-bar .flip-clock-mount[data-skin="classic"] .flip-clock__piece{ display:inline-flex; flex-direction:column; align-items:center; }

#app-title-bar .flip-clock-mount[data-skin="classic"] .flip-clock__slot{
  margin-top:.35rem; font-size:11px; letter-spacing:.2px; color:rgba(255,255,255,.82);
}

#app-title-bar .flip-clock-mount[data-skin="classic"] .flip-clock__card{
  position:relative; width:104px; height:74px; border-radius:12px; overflow:hidden;
  background:#2b2b2b;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset,
              0 -1px 0 rgba(0,0,0,.35) inset,
              0 6px 18px rgba(0,0,0,.28);
  transform-style:preserve-3d;
}

#app-title-bar .flip-clock-mount[data-skin="classic"] .card__top,
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__bottom,
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__back .card__bottom{
  position:absolute; left:0; right:0; height:50%;
  display:flex; align-items:center; justify-content:center;
  font: 800 46px/1.05 var(--heading-font, ui-sans-serif), system-ui, -apple-system, Segoe UI, Roboto;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  color:#fff;
  letter-spacing:.5px;
}

#app-title-bar .flip-clock-mount[data-skin="classic"] .card__top{
  top:0; border-bottom:1px solid rgba(0,0,0,.66);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
}
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__bottom{
  bottom:0; transform-origin: top;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(255,255,255,.03));
}

@keyframes fcFlipTop { 0%{transform:rotateX(0)} 100%{transform:rotateX(-90deg)} }
@keyframes fcFlipBottom { 0%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }

#app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__top{
  animation: fcFlipTop .6s ease-in both;
}
#app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__back .card__bottom{
  animation: fcFlipBottom .6s ease-out .6s both;
}

@media (max-width: 520px){
  #app-title-bar .flip-clock-mount[data-skin="classic"] .flip-clock{ gap:10px; }
  #app-title-bar .flip-clock-mount[data-skin="classic"] .flip-clock__card{ width:88px; height:62px; }
  #app-title-bar .flip-clock-mount[data-skin="classic"] .card__top,
  #app-title-bar .flip-clock-mount[data-skin="classic"] .card__bottom,
  #app-title-bar .flip-clock-mount[data-skin="classic"] .card__back .card__bottom{ font-size:38px; }
  #app-title-bar .logo-underline{ margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce){
  #app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__top,
  #app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__back .card__bottom{ animation:none!important; }
}

/* ===== Flip Clock — Classic centering fix (em geometry) ================== */
/* Scope to classic skin under the title bar */
#app-title-bar .flip-clock-mount[data-skin="classic"] .flip-clock__card{
  /* keep your block, size, shadows from earlier — we only add font metrics */
  font-size: 46px;                 /* controls digit size */
  line-height: 0.95;               /* like the reference */
  padding-bottom: 0.72em;          /* reserve space for bottom half */
}

/* Use EMs so the split sits exactly on the card divider */
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__top,
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__bottom,
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__back::before,
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__back .card__bottom{
  height: 0.72em;
  padding: 0.25em 0.25em;
  width: 100%;
  display: block;                  /* no flex centering — we want classic split */
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Top half visuals */
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__top{
  color: #ccc;
  background: #222;
  border-radius: 0.15em 0.15em 0 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(0);
  border-bottom: 1px solid rgba(0,0,0,.66);
}

/* Bottom half container (clips the lower half) */
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__bottom{
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  background: #393939;
  border-radius: 0 0 0.15em 0.15em;
  pointer-events: none;
  overflow: hidden;
  border-top: 1px solid #000;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Draw the bottom half text using ::after and pull it up by 0.72em */
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__bottom::after{
  content: attr(data-value);
  display: block;
  margin-top: -0.72em;   /* <-- the crucial centering fix */
}

/* Back face holds the previous value during the flip */
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__back{
  position: absolute;
  top: 0; left: 0; height: 100%;
  pointer-events: none;
}
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__back::before,
#app-title-bar .flip-clock-mount[data-skin="classic"] .card__back .card__bottom::after{
  content: attr(data-value);
}

/* Update animations to target ::before on back and ::after on bottom */
@keyframes fcFlipTop { 0%{transform:rotateX(0)} 100%{transform:rotateX(-90deg)} }
@keyframes fcFlipBottom { 0%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }

#app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__back::before{
  animation: fcFlipTop .3s cubic-bezier(0.37, 0.01, 0.94, 0.35) both;
  transform-origin: center bottom;
}
#app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__back .card__bottom{
  animation: fcFlipBottom .6s cubic-bezier(0.15, 0.45, 0.28, 1) both;
  transform-origin: center top;
}

/* Keep existing reduced-motion guard */
@media (prefers-reduced-motion: reduce){
  #app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__back::before,
  #app-title-bar .flip-clock-mount[data-skin="classic"] .flip .card__back .card__bottom{
    animation: none !important;
  }
}

/* ===== FlipClock V2: Fully-Namespaced fc-* Styles ====================== */
/* Completely isolated namespace to eliminate all collision issues */

#app-title-bar .flip-clock-mount .fc-clock{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(8px, 1.6vh, 14px);
  user-select: none;
  perspective: 1000px;
}

#app-title-bar .flip-clock-mount .fc-piece{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

#app-title-bar .flip-clock-mount .fc-slot{
  margin-top: 0.35rem;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* fc-card: The main tile container (fully namespaced) */
#app-title-bar .flip-clock-mount .fc-card{
  display: block;                      /* Critical: makes width/height apply */
  position: relative;
  width: 104px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: #2b2b2b;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 6px 18px rgba(0, 0, 0, 0.28);
  transform-style: preserve-3d;
  font-size: 46px;                     /* Em-based geometry root */
  line-height: 0.95;
  padding-bottom: 0.72em;              /* Reserve space for bottom half */
}

/* fc-top: Top half of the tile */
#app-title-bar .flip-clock-mount .fc-top{ color:#fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.72em;                      /* Em-based height */
  padding: 0.25em;
  display: block;
  text-align: center;
  color: #ccc;
  background: #222;
  border-radius: 0.15em 0.15em 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.66);
  font: 800 46px/1.05 var(--heading-font, ui-sans-serif), system-ui, -apple-system, "Segoe UI", Roboto;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.5px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-origin: center bottom;
}

/* fc-bottom: Bottom half of the tile */
#app-title-bar .flip-clock-mount .fc-bottom{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.72em;                      /* Em-based height */
  padding: 0.25em;
  display: block;
  text-align: center;
  color: #fff;
  background: #393939;
  border-radius: 0 0 0.15em 0.15em;
  border-top: 1px solid #000;
  font: 800 46px/1.05 var(--heading-font, ui-sans-serif), system-ui, -apple-system, "Segoe UI", Roboto;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.5px;
  pointer-events: none;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-origin: center top;
}

/* Critical centering fix: bottom half text using ::after with negative margin */
#app-title-bar .flip-clock-mount .fc-bottom::after{
  content: attr(data-value);
  display: block;
  margin-top: -0.72em;                 /* Crucial centering fix */
}

/* fc-back: Back face for flip animations */
#app-title-bar .flip-clock-mount .fc-back{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#app-title-bar .flip-clock-mount .fc-back .fc-top{
  color: #ccc;
  background: #222;
}

#app-title-bar .flip-clock-mount .fc-back .fc-bottom{
  color: #fff;
  background: #393939;
}

#app-title-bar .flip-clock-mount .fc-back .fc-bottom::after{
  content: attr(data-value);
  display: block;
  margin-top: -0.72em;
}

/* Flip animations with fc-specific keyframes */
@keyframes fcFlipTopV2{
  0% { transform: rotateX(0); }
  100% { transform: rotateX(-90deg); }
}

@keyframes fcFlipBottomV2{
  0% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

#app-title-bar .flip-clock-mount .fc-flip .fc-back::before{
  animation: fcFlipTopV2 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35) both;
}

#app-title-bar .flip-clock-mount .fc-flip .fc-back .fc-bottom{
  animation: fcFlipBottomV2 0.6s cubic-bezier(0.15, 0.45, 0.28, 1) both;
}

/* Responsive sizing for small screens */
@media (max-width: 520px){
  #app-title-bar .flip-clock-mount .fc-clock{
    gap: 10px;
  }
  
  #app-title-bar .flip-clock-mount .fc-card{
    width: 88px;
    height: 62px;
    font-size: 38px;
  }
  
  #app-title-bar .flip-clock-mount .fc-top,
  #app-title-bar .flip-clock-mount .fc-bottom,
  #app-title-bar .flip-clock-mount .fc-back .fc-top,
  #app-title-bar .flip-clock-mount .fc-back .fc-bottom{
    font-size: 38px;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  #app-title-bar .flip-clock-mount .fc-flip .fc-back::before,
  #app-title-bar .flip-clock-mount .fc-flip .fc-back .fc-bottom{
    animation: none !important;
  }
}

/* FlipClock V2 — back-face overlay for top half (required for correct flip) */
#app-title-bar .flip-clock-mount .fc-back::before{
  content: attr(data-value);
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:.72em;                   /* match .fc-top height */
  padding:.25em;
  width:1.8em; margin:0 auto;     /* center digit block */
  text-align:center;
  font: 800 46px/1.05 var(--heading-font, ui-sans-serif), system-ui, -apple-system, "Segoe UI", Roboto;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  color:#fff;                     /* high contrast like the reference; change to #ccc if desired */
  background:#222;
  border-radius:.15em .15em 0 0;
  border-bottom:1px solid rgba(0,0,0,.66);
  backface-visibility:hidden;
  transform-origin:center bottom;
  z-index:2;                      /* render above .fc-top during the flip */
}

/* ===== ENHANCED FAVORITES SYSTEM ===== */

/* Favorites Panel States */
.favorites-panel {
    transform-origin: bottom right;
    will-change: transform, opacity;
}

.favorites-closed {
    transform: scale(0.85) translateY(20px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

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

.favorites-minimized {
    transform: scale(0.95) translateY(10px);
    opacity: 0.7;
    pointer-events: none;
    max-height: 60px;
    overflow: hidden;
}

/* Enhanced Glass Morphism */
.favorites-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at top left, rgba(255,255,255,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0,0,0,0.08) 0%, transparent 50%);
    border-radius: inherit;
    pointer-events: none;
}

.favorites-panel::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: 
        linear-gradient(135deg, 
            rgba(255,255,255,0.02) 0%,
            rgba(255,255,255,0.05) 50%,
            rgba(0,0,0,0.02) 100%
        );
    border-radius: calc(1rem - 1px);
    pointer-events: none;
}

/* Header Styling */
.favorites-header {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Action Buttons */
.favorites-action-btn {
    position: relative;
    z-index: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.favorites-action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.favorites-action-btn:active {
    transform: scale(0.98);
}

/* Body Content */
.favorites-body {
    position: relative;
    z-index: 1;
}

/* Footer Styling */
.favorites-footer {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 100%);
}

/* Favorite Items */
.favorite-item {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.03) 50%,
        rgba(0,0,0,0.02) 100%
    );
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

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

.favorite-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(0,0,0,0.01) 100%
    );
    border-color: rgba(255,255,255,0.15);
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.12),
        0 4px 16px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Favorite Content */
.favorite-content {
    flex: 1;
    min-width: 0;
}

.favorite-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    word-wrap: break-word;
    position: relative;
}

.favorite-author {
    font-size: 12px;
    opacity: 0.8;
    font-style: italic;
}

/* Favorite Actions */
.favorite-actions {
    display: flex;
    gap: 8px;
    margin-left: 16px;
    align-items: flex-start;
}

.favorite-action-btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.favorite-action-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.favorite-action-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Empty State */
.favorites-empty {
    text-align: center;
    padding: 32px 16px;
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.01) 100%
    );
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.favorites-empty-icon {
    font-size: 32px;
    opacity: 0.3;
    margin-bottom: 12px;
}

.favorites-empty-text {
    font-size: 14px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.favorites-empty-hint {
    font-size: 12px;
    opacity: 0.5;
}

/* Badge Styling */
#favorites-count-badge {
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Scrollbar Styling */
.favorites-list::-webkit-scrollbar {
    width: 4px;
}

.favorites-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
}

.favorites-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.favorites-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* Cross-tab Sync Animation */
@keyframes sync-pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

.favorites-syncing {
    animation: sync-pulse 1s ease-in-out;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .favorites-panel {
        margin-right: 8px;
        margin-left: 8px;
        right: 0 !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }
    
    .favorite-item {
        padding: 12px;
    }
    
    .favorite-actions {
        margin-left: 8px;
    }
    
    .favorite-action-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    .favorites-panel,
    .favorite-item,
    .favorites-action-btn,
    .favorite-action-btn {
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-contrast: high) {
    .favorites-panel {
        border: 2px solid rgba(255,255,255,0.5);
    }
    
    .favorite-item {
        border: 1px solid rgba(255,255,255,0.3);
    }
    
    .favorite-action-btn {
        border: 1px solid rgba(255,255,255,0.4);
    }
}

/* Focus Styles */
.favorites-action-btn:focus,
.favorite-action-btn:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

/* Dark theme optimizations */
@media (prefers-color-scheme: dark) {
    .favorites-panel {
        box-shadow: 
            0 25px 45px rgba(0,0,0,0.3),
            0 15px 25px rgba(0,0,0,0.2),
            inset 0 1px 0 rgba(255,255,255,0.1),
            inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    
    .favorite-item:hover {
        box-shadow: 
            0 8px 32px rgba(0,0,0,0.2),
            0 4px 16px rgba(0,0,0,0.1),
            inset 0 1px 0 rgba(255,255,255,0.1);
    }
}

/* Panel transitions: only CLOSED and OPEN used */
#favorites-panel[data-state="open"] {
  max-height: 80vh;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#favorites-panel[data-state="closed"] {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* Hide body entirely when closed (defensive) */
#favorites-panel[data-state="closed"] .favorites-body { display:none; }


/* ===== FAVORITES — theme-aligned glass UI (open/close only) ===== */
.favorites-panel {
  background: linear-gradient(135deg, rgba(15,23,42,0.75), rgba(31,41,55,0.62));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  transition: transform var(--transition-medium), opacity var(--transition-medium), max-height var(--transition-medium);
  max-height: 0; opacity: 0; pointer-events: none; transform: translateY(8px);
}
.favorites-panel::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  background: linear-gradient(135deg, var(--color1), var(--color2), var(--color3));
  filter: blur(14px); opacity: 0.35; z-index: -1; animation: gradient-border-flow 6s linear infinite;
}
#favorites-panel[data-state="open"]   { max-height: 80vh; opacity: 1; pointer-events: auto; transform: translateY(0); }
#favorites-panel[data-state="closed"] { max-height: 0;    opacity: 0; pointer-events: none; transform: translateY(8px); }

.favorites-header { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-bottom: 1px solid rgba(255,255,255,0.10); }
.favorites-icon-btn { padding: 5px 8px; font-size: 12px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--text-color-secondary); }
.favorites-icon-btn:hover { background: rgba(255,255,255,0.12); }
.favorites-count-chip { background: linear-gradient(135deg, var(--color2), var(--color3)); color: #0b1220; font-weight: 700; box-shadow: 0 0 8px rgba(0,0,0,0.15); }

.favorites-body { color: var(--text-color-secondary); }
#favorites-panel[data-state="closed"] .favorites-body { display: none; }

.favorites-list::-webkit-scrollbar { width: 8px; }
.favorites-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 6px; }
.favorites-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--color1), var(--color2)); border-radius: 6px; }

/* Item rows */
.fav-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.fav-text-wrap{ flex:1; min-width:0; }
.fav-quote{ font-size:12px; color:var(--text-color-main); line-height:1.3; word-break:break-word; }
.fav-author{ font-size:11px; color:var(--text-color-secondary); margin-top:2px; }
.fav-actions{ display:flex; align-items:center; gap:8px; margin-left:8px; }
.fav-actions button{
  padding:6px 8px; border-radius:8px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--text-color-secondary);
}
.fav-actions button:hover{ background: rgba(255,255,255,0.14); }

/* TTS toggle clarity */
#tts-toggle-btn[aria-pressed="true"] { background-color: rgba(255,255,255,0.2); box-shadow: var(--shadow-sm) inset; }

/* ===== Flip Clock AM/PM Badge (inside Seconds) ===== */
/* Hide the dedicated AM/PM flip piece if it exists */
#app-title-bar .flip-clock-mount[data-skin="classic"] .fc-piece--ampm {
  display: none !important;
}

/* Tiny pill badge that sits inside the Seconds piece */
.fc-meridiem-badge{
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .5px;
  color: #fff;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Light theme */
html:not([data-theme="dark"]) .fc-meridiem-badge{
  background: rgba(0,0,0,0.14);
  color: #111;
}

@media (max-width: 520px){
  .fc-meridiem-badge{ font-size: 11px; padding: 2px 5px; top: 5px; right: 6px; }
}
#tts-toggle-btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
/* =============================
   Vibe Title hardening (scoped)
   - Keeps existing look, improves fallbacks & perf
   - Only affects .vb-logo and .app-title-bar
   ============================= */

/* Default readable color + sizing; overrides earlier heavy shadows */
.vb-logo {
  font-size: clamp(3.25rem, 8vw, 6.75rem);
  line-height: 1.05;
  text-wrap: balance;
  color: var(--text-color-main);
  -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.28);
  text-shadow: none; /* prefer drop-shadows below for cleaner halo */
  filter: drop-shadow(0 0 10px var(--color2)) drop-shadow(0 0 18px var(--color3));
}

:root[data-theme="dark"] .vb-logo {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.22);
}

/* Use gradient-as-text only when background-clip is supported */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .vb-logo {
    background: linear-gradient(90deg, var(--color1), var(--color2), var(--color3));
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: vb-logo-pan 16s linear infinite; /* calmer motion */
  }
}

@keyframes vb-logo-pan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vb-logo { animation: none !important; }
}

/* High-contrast / forced-colors safety */
@media (forced-colors: active) {
  .vb-logo {
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter: none;
    color: CanvasText;
    background: none !important;
  }
}

/* Print-friendly title */
@media print {
  .vb-logo {
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter: none;
    color: #000 !important;
    background: none !important;
  }
}

/* Ensure the title bar can receive clicks if previously disabled */
.app-title-bar { pointer-events: auto; }

/* ===== ENHANCED FLIP CLOCK AESTHETICS (Drop-in) ===== */
/* Container - .fc-clock */
.fc-clock {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.75rem;
  white-space: nowrap;
  user-select: none;
  perspective: 900px; /* subtle 3D */
  contain: layout paint; /* guard against overflow side-effects */
}

/* One piece = HH / MM / SS */
.fc-piece {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* Card shell */
.fc-card {
  position: relative;
  display: block;
  width: 6.5ch; /* fixed width fits two digits nicely */
  max-width: 9rem;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.25); /* glassy base; your theme can override */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Top & bottom faces */
.fc-top, .fc-bottom {
  display: block;
  text-align: center;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  line-height: 1.1;
  padding: 0.45em 0.2em;
  color: white; /* readable even if gradient fails */
  letter-spacing: 0.02em;
}

/* Subtle bevel to sell the card */
.fc-top {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.fc-bottom {
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

/* Flip back face—kept invisible until animated by your existing classes */
.fc-back {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Labels */
.fc-slot {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: .75;
}

/* Optional visual separators */
.fc-piece::after {
  content: attr(data-sep);
  position: absolute;
  right: -0.6rem;
  top: 0.2rem;
  font-size: 1.25rem;
  opacity: .5;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fc-card, .fc-top, .fc-bottom, .fc-back {
    transition: none !important;
    animation: none !important;
  }
}

/* =============================
   Palette-aware enhancements for date pill
   ============================= */
:root {
  --date-fg: var(--text-color-main);
  --date-glass: color-mix(in oklab, #000 32%, transparent);
  --date-ring-opacity: .45;
}
:root[data-theme="dark"] {
  --date-fg: #fff;
  --date-glass: color-mix(in oklab, #000 55%, transparent);
  --date-ring-opacity: .6;
}

/* Tie pill visuals to active palette and add premium ring */
.fc-date {
  color: var(--date-fg);
  background: var(--date-glass);
  border: 1px solid color-mix(in oklab, var(--color2) 28%, transparent);
  padding-left: 0.75rem; /* space for accent bar */
  isolation: isolate;    /* keep glow effects contained */
}

/* Gradient ring using a mask (no layout shift) */
.fc-date::before{
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--color1), var(--color2), var(--color3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--date-ring-opacity);
  pointer-events: none;
}

/* Slim accent bar that echoes the gradient */
.fc-date::after{
  content: "";
  position: absolute; left: 0; top: .25rem; bottom: .25rem; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color1), var(--color2));
  opacity: .85;
  filter: drop-shadow(0 0 4px var(--color2));
}

/* Slightly refine text spacing */
#date-time { letter-spacing: .02em; }

/* Hover micro-shimmer (respects reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .fc-date:hover::before{ opacity: calc(var(--date-ring-opacity) + .1); }
}

/* Ensure forced-colors stays clean of decoration */
@media (forced-colors: active){
  .fc-date::before, .fc-date::after { display: none; }
}