@import url("/styles/tokens.css");
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap');

/* 
✨ Beautiful Protection Message ✨
Please do not steal the beauty of this site. Be honorable. We believe in you.
This site's design and animations are unique. Please respect creativity and build your own beautiful experiences.
The swimming-to-stars effect, layered clouds, dream mode, and all animations are original creations.
Please honor the creativity and build something uniquely yours instead.

*/

/* Obfuscated Protection */
/* 0x5049434F50554646 = PICOPUFF in hex */
/* 0x445245414D4D4F4445 = DREAM MODE in hex */
/* 0x53544152535357494D = STARS SWIM in hex */

:root{
    /* UI text font stack */
    --font-ui: "Comfortaa", cursive, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    
    /* Cloud opacity variables for different phases */
    --cloud-opacity: 0.65; /* 65% opacity - reduced by 35% from 1.0 */
    /* Monospace */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* Emoji stack */
    --font-emoji: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

html { font-size: 16px; }
body {
    font-family: var(--font-ui);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-synthesis-weight: none;
}

h1, h2, h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 500; }

button, input, select, textarea,
.btn, .badge, .chip, .toast, .modal, .navbar, .nav, .footer, .site-footer {
    font-family: inherit;
}

code, pre, kbd, samp { font-family: var(--font-mono); }

.emoji, .tool-icon.emoji { font-family: var(--font-emoji); line-height: 1; }

.tool-card, .tool-card * { font-family: inherit; }

header h1, .splash-title { letter-spacing: 0.1px; }
.tools-grid .tool-card .tool-icon-wrapper {
    display: grid;
    place-items: center;
    height: 96px;
    min-height: 96px;
    width: 100%;
    padding: 8px;
    border-radius: 16px;
    background: rgba(102, 126, 234, 0.08);
    box-sizing: border-box;
    transition: background 200ms ease;
}

.tools-grid .tool-card .tool-icon {
    font-size: 64px;
    line-height: 1;
    display: block;
}

.tools-grid .tool-card .tool-icon[type="image"],
.tools-grid .tool-card img.tool-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
  .tools-grid .tool-card .tool-icon-wrapper {
      height: 84px;
      min-height: 84px;
      border-radius: 14px;
  }
  .tools-grid .tool-card .tool-icon,
  .tools-grid .tool-card img.tool-icon {
      font-size: 56px;
      width: 56px;
      height: 56px;
  }
  
  /* Specific mobile fix for QR logo */
  .tools-grid .tool-card img.tool-icon[src*="qrdisplaylogo.png"] {
      width: 56px !important;
      height: 56px !important;
      max-width: 56px !important;
      max-height: 56px !important;
  }
}

/* Hover: tint the icon wrapper to brand purple */
.tools-grid .tool-card:hover .tool-icon-wrapper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


/* --- PicoPuff Logo Shimmer (white to off-white) --- */
.logo-container .logo-cloud::after {
  content: '';
  position: absolute;
  top: -10%; left: -20%;
  width: 140%; height: 120%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: pp-logo-shimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pp-logo-shimmer {
  0%   { transform: translateX(-60%) skewX(-12deg); opacity: .65; }
  50%  { transform: translateX(0%)   skewX(-12deg); opacity: .9; }
  100% { transform: translateX(60%)  skewX(-12deg); opacity: .65; }
}/* Removed CSS variables to restore original background behavior as requested */

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

body {
    font-family: 'Comfortaa', cursive;
    color: #2d3748;
    line-height: 1.6;
    padding: 20px;
    min-height: 100vh;
    overflow-x: hidden;
    /* Background will be set by theme system - no hardcoded gradient */
}

/* Print guard for ads */
@media print{
  .screen-only{ display:none !important; }
  .adsbygoogle{ display:none !important; }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}


/* Basic banner ad - beauty over money */
.basic-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    z-index: 100;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.basic-banner:hover {
    opacity: 1;
}

/* Beautiful Aesthetic Ads - Matching Site Design */
.aesthetic-ad {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    border-radius: 20px;
    padding: 16px 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    z-index: 100;
    opacity: 0.8;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 90%;
    font-family: 'Comfortaa', cursive;
}

.aesthetic-ad:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
}

.aesthetic-ad-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aesthetic-ad-subtitle {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

.aesthetic-ad-icon {
    font-size: 16px;
    margin-right: 6px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Mobile aesthetic ads */
@media (max-width: 768px) {
    .aesthetic-ad {
        bottom: 15px;
        padding: 12px 20px;
        font-size: 12px;
        border-radius: 16px;
        max-width: 95%;
    }
    
    .aesthetic-ad-title {
        font-size: 13px;
    }
    
    .aesthetic-ad-subtitle {
        font-size: 10px;
    }
}

/* Gentle Donation Banner - Keep the Dream Alive */
.donation-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 140, 0, 0.1) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    border-radius: 16px;
    padding: 12px 16px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    z-index: 100;
    opacity: 0.7;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 200px;
    font-family: 'Comfortaa', cursive;
    cursor: pointer;
}

.donation-banner:hover {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%);
}

.donation-banner-title {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
    background: linear-gradient(45deg, #FFD700, #FF8C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.donation-banner-subtitle {
    font-size: 9px;
    opacity: 0.7;
    margin-top: 2px;
}

.donation-banner-icon {
    font-size: 14px;
    margin-right: 4px;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}

/* QR Code Container */
.qr-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    border-radius: 20px;
    padding: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    font-family: 'Comfortaa', cursive;
}

.qr-container.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.qr-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.qr-subtitle {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 16px;
}

.qr-code {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    border-radius: 12px;
    background: white;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.qr-address {
    font-size: 10px;
    font-family: 'Space Mono', monospace;
    background: rgba(0, 0, 0, 0.1);
    padding: 8px;
    border-radius: 8px;
    word-break: break-all;
    margin-bottom: 12px;
}

.qr-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.qr-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Mobile donation banner */
@media (max-width: 768px) {
    .donation-banner {
        bottom: 15px;
        right: 15px;
        padding: 10px 14px;
        font-size: 10px;
        border-radius: 14px;
        max-width: 180px;
    }
    
    .donation-banner-title {
        font-size: 11px;
    }
    
    .donation-banner-subtitle {
        font-size: 8px;
    }
    
    .qr-container {
        padding: 20px;
        max-width: 90%;
    }
    
    .qr-code {
        width: 160px;
        height: 160px;
    }
}

/* Dream mode card dissolve animations - 27 second slow dissolve (40% reduction) */
.dream-mode-active .tool-card {
    animation: cardDissolve 27s ease-in forwards; /* forwards = stay invisible after */
    will-change: opacity, transform, filter;
    pointer-events: none;                         /* block clicks while fading */
}

@keyframes cardDissolve {
    0%   { opacity: 1; filter: blur(0px);  transform: scale(1); }
    100% { opacity: 0; filter: blur(6px);  transform: scale(0.98); }
}

/* Dream mode breathing animations */

@keyframes flyAway {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: translateY(-30px) scale(1.05) rotate(3deg);
        opacity: 0.6;
    }
    70% {
        transform: translateY(-100px) scale(0.9) rotate(8deg);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-200px) scale(0.8) rotate(15deg);
        opacity: 0;
    }
}

/* Dream mode button disappears with cards - DISABLED since button should always be visible */
/* .dream-mode-active .dream-mode-btn {
    animation: dreamButtonFade 0.5s ease-out forwards;
    animation-delay: 0.2s;
} */

@keyframes dreamButtonFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
    }
}

/* Dream Mode Button */
.flying-breathing-text {
    display: none;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(10px) saturate(120%);
    border-radius: 15px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-family: 'Comfortaa', cursive;
    font-size: 11px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    animation: flyingBreathing 3s ease-in-out infinite;
    margin-right: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2147483000 !important;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
    cursor: default;
    position: relative;
}

.flying-breathing-text.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.flying-breathing-text .breathing-icon {
    font-size: 10px;
    animation: iconFlyingBreathing 3s ease-in-out infinite;
}

.flying-breathing-text .breathing-message {
    font-size: 11px;
    letter-spacing: 0.2px;
    animation: textFlyingBreathing 3s ease-in-out infinite;
}

/* Dream mode - enhance flying breathing text */
.dream-mode-active .flying-breathing-text {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes flyingBreathing {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(0px) scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    25% {
        opacity: 0.8;
        transform: translateX(-2px) scale(1.02);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    50% {
        opacity: 1;
        transform: translateX(-4px) scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    75% {
        opacity: 0.8;
        transform: translateX(-2px) scale(1.02);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

@keyframes iconFlyingBreathing {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }
    25% {
        transform: scale(1.1) rotate(-2deg);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.2) rotate(-4deg);
        opacity: 1;
    }
    75% {
        transform: scale(1.1) rotate(-2deg);
        opacity: 0.9;
    }
}

@keyframes textFlyingBreathing {
    0%, 100% {
        opacity: 0.7;
        letter-spacing: 0.2px;
    }
    50% {
        opacity: 1;
        letter-spacing: 0.4px;
    }
}

/* Dream Mode Enhancements */
.nav-breathing-text {
    display: none;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(15px) saturate(150%);
    border-radius: 20px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-family: 'Comfortaa', cursive;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    animation: navBreathing 8s ease-in-out infinite;
    margin-right: 12px;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2147483000 !important;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none; /* Non-clickable */
    cursor: default; /* Default cursor */
}

.nav-breathing-text.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-breathing-text .breathing-icon {
    font-size: 12px;
    animation: iconBreathing 4s ease-in-out infinite;
}

.nav-breathing-text .breathing-message {
    font-size: 11px;
    letter-spacing: 0.3px;
    animation: textBreathing 4s ease-in-out infinite;
}

/* Dream mode - enhance breathing text */
.dream-mode-active .nav-breathing-text {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes navBreathing {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.01);
        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

@keyframes iconBreathing {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }
    25% {
        transform: scale(1.1) rotate(2deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.95) rotate(-1deg);
        opacity: 0.9;
    }
}

@keyframes textBreathing {
    0%, 100% {
        opacity: 0.8;
        letter-spacing: 0.5px;
    }
    50% {
        opacity: 1;
        letter-spacing: 0.8px;
    }
}

/* Dream mode button styling and hover effect */
.dream-mode-btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147482000 !important;
    pointer-events: all !important;
    position: relative;
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.8);
    color: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(15px) saturate(150%);
    transition: all 0.3s ease;
    margin-right: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: none;
    letter-spacing: 0.5px;
}

.dream-mode-btn.colorful {
    background: var(--pp-bg1, rgba(102, 126, 234, 0.2));
    border: 1px solid var(--pp-bg2, rgba(102, 126, 234, 0.4));
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Ensure active state overrides colorful state */
.dream-mode-btn.active.colorful {
    background: #000000 !important;
    border: 2px solid #000000 !important;
    color: white !important;
    text-shadow: none !important;
}

.dream-mode-btn.show {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

.dream-mode-btn:hover {
    background: var(--pp-bg1, rgba(102, 126, 234, 0.3)) !important;
    border-color: var(--pp-bg2, rgba(102, 126, 234, 0.6)) !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dream-mode-btn:not(.colorful):hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 1) !important;
    color: rgba(0, 0, 0, 1) !important;
    text-shadow: none !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dream-mode-btn.active {
    background: #000000 !important;
    border: 2px solid #000000 !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
    text-shadow: none !important;
}

.dream-mode-btn.active:hover {
    background: #333333 !important;
    border: 2px solid #333333 !important;
    color: white !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    text-shadow: none !important;
}

/* Night Mode Button Slide Animation */
.night-mode-btn {
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.night-mode-btn.slide-out {
    transform: translateX(200px);
    opacity: 0;
    pointer-events: none;
}

.night-mode-btn.slide-in {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}

/* Dream mode button disabled state */
.dream-mode-btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: rgba(255,0,0,0.1) !important;
    border-color: rgba(255,0,0,0.3) !important;
}

.dream-mode-btn.disabled:hover {
    background: rgba(255,0,0,0.1) !important;
    transform: none !important;
    box-shadow: none !important;
}







/* Ensure all buttons are clickable */
button, .btn, .nav-link, .tool-card {
    z-index: 1000 !important;
    pointer-events: all !important;
    position: relative;
}

/* Move cards to top - always visible */
.tools-grid {
    z-index: 1000 !important;
    position: relative;
}

.tool-card {
    z-index: 1001 !important;
    position: relative;
}

.navbar {
    z-index: 1002 !important;
    position: relative;
}

/* Gentle Breathing Notification - Left Edge Butterfly */
.breathing-notification {
    position: fixed;
    left: -200px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 140, 0, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    border-radius: 25px;
    padding: 12px 20px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    z-index: 1003;
    opacity: 1;
    animation: butterflySlide 30s ease-in-out infinite;
    font-family: 'Comfortaa', cursive;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 180px;
}

.breathing-notification:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation-play-state: paused;
}

.notification-icon {
    font-size: 14px;
    margin-right: 6px;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}

.notification-text {
    background: linear-gradient(45deg, #FFD700, #FF8C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* Support Initiative Popup */
.support-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px) saturate(120%);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.support-popup.show {
    opacity: 1;
    visibility: visible;
}

.support-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    backdrop-filter: blur(25px) saturate(180%);
    border-radius: 30px;
    padding: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-align: center;
    font-family: 'Comfortaa', cursive;
    max-width: 500px;
    width: 90%;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.support-popup.show .support-popup-content {
    transform: translate(-50%, -50%) scale(1);
}

.support-popup-title {
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.support-popup-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
    font-weight: 400;
}

.support-popup-qr {
    margin: 24px 0;
}

.support-popup-qr-image {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    background: white;
    padding: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    display: block;
    animation: supportQRPulse 3s ease-in-out infinite;
}

.support-popup-message {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 20px;
    font-style: italic;
}

.support-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
}

.support-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

@keyframes supportQRPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    }
}

@keyframes butterflySlide {
    0%, 40% {
        left: -200px;
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
    50% {
        left: 20px;
        opacity: 0.8;
        transform: translateY(-50%) scale(0.95);
    }
    55% {
        left: 30px;
        opacity: 0.9;
        transform: translateY(-50%) scale(1);
    }
    60% {
        left: 25px;
        opacity: 1;
        transform: translateY(-50%) scale(1.02);
    }
    65% {
        left: 20px;
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    70% {
        left: 15px;
        opacity: 0.9;
        transform: translateY(-50%) scale(0.98);
    }
    75% {
        left: -50px;
        opacity: 0.6;
        transform: translateY(-50%) scale(0.9);
    }
    80%, 100% {
        left: -200px;
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
}

/* Dream Mode Center QR Display */
.dream-center-qr {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    backdrop-filter: blur(25px) saturate(180%);
    border-radius: 20px;
    padding: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    font-family: 'Comfortaa', cursive;
}

.dream-center-qr.show {
    opacity: 1;
    visibility: visible;
}

.dream-qr-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dream-qr-image {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    background: white;
    padding: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    display: block;
    animation: dreamQRPulse 2s ease-in-out infinite;
}

.dream-qr-message {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 12px;
    font-style: italic;
}

@keyframes dreamQRPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    }
}

/* Dream Mode Card Fade Effect - Quick 20 Second Fade */
.dream-mode-active .tools-grid .tool-card {
    opacity: 0.2;
    filter: blur(3px);
    transform: scale(0.9);
    transition: all 20s ease;
}

.dream-mode-active .navbar {
    opacity: 0.3;
    filter: blur(2px);
    transition: all 20s ease;
}

/* Breathing Fade-In Animation for Card Restoration */
.tools-grid .tool-card {
    animation: breatheFadeIn 1.5s ease-in-out; /* 40% reduction */
}

.navbar {
    animation: breatheFadeIn 2.5s ease-in-out; /* Reduced breathing intensity */
}

@keyframes breatheFadeIn {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.95) translateY(10px);
    }
    20% {
        opacity: 0.3;
        filter: blur(3px);
        transform: scale(0.97) translateY(8px);
    }
    40% {
        opacity: 0.6;
        filter: blur(2px);
        transform: scale(0.98) translateY(5px);
    }
    60% {
        opacity: 0.8;
        filter: blur(1px);
        transform: scale(0.99) translateY(3px);
    }
    80% {
        opacity: 0.9;
        filter: blur(0.5px);
        transform: scale(0.995) translateY(1px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1) translateY(0px);
    }
}

/* Classy Contribution Display */
.contribution-display {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    border-radius: 20px;
    padding: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    opacity: 0;
    transform: translateX(-50%) translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    font-family: 'Comfortaa', cursive;
    max-width: 400px;
    width: 90%;
}

.bitcoin-contribution-display.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.contribution-container {
    position: relative;
}

.contribution-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.contribution-icon {
    font-size: 20px;
    margin-right: 8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.contribution-title {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contribution-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    font-weight: 500;
}

.contribution-image-container {
    margin-bottom: 20px;
}

.contribution-qr-image {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    background: white;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: block;
}

.contribution-fallback {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin: 0 auto;
    max-width: 200px;
}

.fallback-text {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    word-break: break-all;
    text-align: center;
}

.contribution-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.wake-up-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.theme-indicator {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    opacity: 0.8;
}

/* Mobile Contribution Display */
@media (max-width: 768px) {
    .contribution-display {
        padding: 20px;
        max-width: 95%;
    }
    
    .contribution-qr-image {
        width: 160px;
        height: 160px;
    }
    
    .contribution-title {
        font-size: 16px;
    }
    
    .contribution-subtitle {
        font-size: 12px;
    }
}

/* QR Code Ads - Different Sizes */
.qr-ad-small {
    position: fixed;
    bottom: 16px; /* Changed from top: 20px to bottom: 16px */
    right: 16px;  /* Changed from right: 20px to right: 16px */
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */ /* Increased from 500 to ensure ads are always on top */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.qr-ad-small:hover {
    opacity: 1;
}

.qr-ad-image-small {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.qr-ad-medium {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */ /* Increased from 500 to ensure ads are always on top */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.qr-ad-medium:hover {
    opacity: 1;
}

.qr-ad-image-medium {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.qr-ad-large {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 160px;
    height: 160px;
    background: white;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */ /* Increased from 500 to ensure ads are always on top */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.qr-ad-large:hover {
    opacity: 1;
}

.qr-ad-image-large {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Dream Mode Hypnotizing Eternal Nudge */
.dream-eternal-nudge {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    backdrop-filter: blur(25px) saturate(180%);
    border-radius: 25px;
    padding: 32px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    font-family: 'Comfortaa', cursive;
    max-width: 400px;
    width: 90%;
    animation: hypnotizingBreath 8s ease-in-out infinite;
    pointer-events: none;
}

.dream-mode-active .dream-eternal-nudge {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: hypnotizingBreath 8s ease-in-out infinite;
}

.eternal-nudge-content {
    position: relative;
    z-index: 2;
}

.eternal-nudge-icon {
    font-size: 32px;
    margin-bottom: 16px;
    animation: dreamyFloat 6s ease-in-out infinite;
}

.eternal-nudge-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.eternal-nudge-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
    font-weight: 400;
}

.eternal-nudge-message {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    font-weight: 500;
    font-style: italic;
}

.eternal-nudge-qr {
    margin-top: 16px;
}

.eternal-qr-image {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: white;
    padding: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    animation: dreamyPulse 4s ease-in-out infinite;
}

@keyframes hypnotizingBreath {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.95);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    25% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.02);
        box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    75% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.01);
        box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

@keyframes dreamyFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-8px) rotate(2deg);
    }
    66% {
        transform: translateY(4px) rotate(-1deg);
    }
}

@keyframes dreamyPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    }
}

/* Microservice Pages - Support Button Positioning */
.tools-page .breathing-notification,
.microservice-page .breathing-notification {
    display: none !important; /* Hide breathing notification on microservice pages */
}


/* Mobile Dream Eternal Nudge */
@media (max-width: 768px) {
    .dream-eternal-nudge {
        padding: 24px;
        max-width: 95%;
    }
    
    .eternal-nudge-icon {
        font-size: 28px;
    }
    
    .eternal-nudge-title {
        font-size: 16px;
    }
    
    .eternal-nudge-subtitle {
        font-size: 12px;
    }
    
    .eternal-nudge-message {
        font-size: 14px;
    }
    
    .eternal-qr-image {
        width: 100px;
        height: 100px;
    }
    
    /* Mobile microservice positioning */
    .tools-page .breathing-notification,
    .microservice-page .breathing-notification {
        display: none !important; /* Hide breathing notification on mobile microservice pages */
    }
    
    
    /* Mobile butterfly animation adjustments */
    @keyframes butterflySlide {
        0%, 40% {
            left: -180px;
            opacity: 0;
            transform: translateY(-50%) scale(0.8);
        }
        50% {
            left: 15px;
            opacity: 0.8;
            transform: translateY(-50%) scale(0.95);
        }
        55% {
            left: 25px;
            opacity: 0.9;
            transform: translateY(-50%) scale(1);
        }
        60% {
            left: 20px;
            opacity: 1;
            transform: translateY(-50%) scale(1.02);
        }
        65% {
            left: 15px;
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }
        70% {
            left: 10px;
            opacity: 0.9;
            transform: translateY(-50%) scale(0.98);
        }
        75% {
            left: -40px;
            opacity: 0.6;
            transform: translateY(-50%) scale(0.9);
        }
        80%, 100% {
            left: -180px;
            opacity: 0;
            transform: translateY(-50%) scale(0.8);
        }
    }
}

/* Mobile QR Ads */
@media (max-width: 768px) {
    .qr-ad-small {
        width: 60px;
        height: 60px;
        bottom: 15px; /* Changed from top: 15px to bottom: 15px */
        right: 15px;
    }
    
    .qr-ad-medium {
        width: 100px;
        height: 100px;
        bottom: 15px;
        left: 15px;
    }
    
    .qr-ad-large {
        width: 120px;
        height: 120px;
        right: 15px;
    }
    
    .dream-breathing-qr {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
}

/* Bot protection - hide content from automated tools */
@media (prefers-reduced-motion: no-preference) {
    .bot-protection {
        display: none !important;
    }
}

/* Additional protection for automated tools */
.tools-grid {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Global text selection protection */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Allow text selection only for input fields */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Mobile-specific protection */
@media (max-width: 768px) {
    * {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }
    
    /* Mobile gesture protection */
    body {
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Prevent mobile zoom on double-tap */
    * {
        touch-action: manipulation;
    }
}


@keyframes swimParticles {
    0%, 40% {
        opacity: 0.3;
        transform: translateY(0px);
    }
    50%, 90% {
        opacity: 0.8;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0.3;
        transform: translateY(0px);
    }
}

/* Screensaver mode animations - works for all day themes */
.screensaver-mode .tools-grid {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: all 3s ease-in-out;
    filter: blur(2px);
}

.screensaver-mode .navbar {
    opacity: 0;
    transform: translateY(-15px);
    transition: all 2s ease-in-out;
    filter: blur(1px);
}

.screensaver-mode .site-footer {
    opacity: 0;
    transform: translateY(15px);
    transition: all 2s ease-in-out;
    filter: blur(1px);
}

.screensaver-mode .banner-ad {
    opacity: 1;
    transform: translateY(0);
    transition: all 3s ease-in-out;
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
}

/* Soft screensaver overlay */
.screensaver-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    opacity: 0;
    z-index: 5;
    transition: all 3s ease-in-out;
    pointer-events: none;
}

.screensaver-mode .screensaver-overlay {
    opacity: 1;
}

.banner-ad {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 20px 30px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    max-width: 90%;
    text-align: center;
}

/* Dreamy wake-up animations */
.tools-grid.waking-up {
    animation: dreamyWakeUp 3s ease-out;
}

.tool-card.waking-up {
    animation: cardWakeUp 2s ease-out;
}

@keyframes dreamyWakeUp {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95) rotateX(10deg);
        filter: blur(5px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(25px) scale(0.98) rotateX(5deg);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}

@keyframes cardWakeUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9) rotateY(15deg);
        filter: blur(3px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(10px) scale(0.95) rotateY(5deg);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateY(0deg);
        filter: blur(0px);
    }
}



@keyframes float {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0.3;
    }
    20% {
        transform: translateX(20vw) translateY(-8px);
        opacity: 0.5;
    }
    40% {
        transform: translateX(40vw) translateY(-16px);
        opacity: 0.7;
    }
    60% {
        transform: translateX(60vw) translateY(-12px);
        opacity: 0.8;
    }
    80% {
        transform: translateX(80vw) translateY(-6px);
        opacity: 0.7;
    }
    90% {
        transform: translateX(90vw) translateY(-3px);
        opacity: 0.6;
    }
    95% {
        transform: translateX(95vw) translateY(0);
        opacity: 0.6;
    }
    98% {
        transform: translateX(100vw) translateY(0);
        opacity: 0.6;
    }
    100% {
        transform: translateX(calc(100vw + 500px)) translateY(0);
        opacity: 0;
    }
}

/* Navigation Bar - Enhanced positioning and reduced breathing */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    transition: all 0.3s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    margin: 0;
    padding: 0;
}

/* Transparent navbar for all phases */
body[data-phase="day"] .navbar {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

body[data-phase="dawn"] .navbar {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(255, 182, 193, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}

body[data-phase="dusk"] .navbar {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(255, 165, 0, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}

body[data-phase="night"] .navbar {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500; /* unbold */
    font-size: 20px;
    color: #667eea;
    text-decoration: none;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.nav-logo.show {
    opacity: 1;
    transform: translateX(0);
}

/* Fix for text fill color issues */
.nav-logo {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
}

.nav-title {
    color: #ffffff !important;
    font-weight: 500; /* unbold the wordmark */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.3s ease;
    position: relative;
    padding: 8px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: white;
    font-weight: 600;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.install-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Comfortaa', cursive;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.install-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: #667eea;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 90px; /* Account for fixed navbar */
    position: relative;
    z-index: 1;
    animation: fadeInDown 0.8s ease;
}

.logo-container {
    display: inline-block;
    position: relative;
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 3s infinite;
}

.logo-cloud {
    font-size: 160px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3));
    animation: bounce 2s infinite;
    margin-bottom: -40px;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
}

h1 {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin-top: -30px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    letter-spacing: -1px;
}

.tagline {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 5px;
    font-weight: 300;
}

/* Productivity Banner */
.productivity-banner {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 32px 40px;
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: slideInUp 0.6s ease 0.2s both;
    overflow: hidden;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.productivity-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.banner-content {
    text-align: center;
    margin-bottom: 24px;
}

.banner-text h2 {
    font-size: 32px;
    color: #2d3748;
    margin-bottom: 12px;
    font-weight: 700;
    animation: textGlow 2s ease-in-out infinite alternate;
}

.banner-text h2 .lightning {
    color: #ffa500;
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
    animation: lightningFlicker 1.5s ease-in-out infinite;
}

@keyframes lightningFlicker {
    0%, 100% { 
        color: #ffa500;
        text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
    }
    50% { 
        color: #ffd700;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }
}

@keyframes textGlow {
    0% { filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.3)); }
    100% { filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.6)); }
}

.banner-text p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.banner-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: featureSlideIn 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.2s; }
.feature-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes featureSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.feature-item:hover::before {
    left: 100%;
}

.feature-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.2);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
}

.feature-icon {
    font-size: 20px;
    animation: iconBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

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

.feature-item span:last-child {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    letter-spacing: 0.3px;
}

/* Mobile Productivity Banner */
@media (max-width: 768px) {
    .productivity-banner {
        padding: 24px 20px;
        margin-bottom: 30px;
        border-radius: 16px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .banner-content {
        margin-bottom: 20px;
    }

    .banner-text h2 {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .banner-text p {
        font-size: 15px;
    }

    .banner-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-item {
        padding: 14px 16px;
        gap: 10px;
    }

    .feature-icon {
        font-size: 18px;
    }

    .feature-item span:last-child {
        font-size: 13px;
    }
}

@keyframes shimmer {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    }
    50% { 
        box-shadow: 0 6px 30px rgba(102, 126, 234, 0.5);
    }
}

/* Install App Banner */
.install-banner {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px) saturate(120%);
    border-radius: 20px;
    padding: 20px 32px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    animation: slideInUp 0.6s ease 0.4s both;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.install-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.install-icon {
    font-size: 24px;
    animation: bounce 2s infinite;
}

.install-text {
    font-size: 16px;
    color: #4a5568;
    font-weight: 500;
}

.install-app-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Comfortaa', cursive;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.install-app-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.install-app-btn:active {
    transform: translateY(0) scale(1.02);
}

.install-app-btn .btn-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.install-app-btn:hover .btn-icon {
    transform: rotate(15deg);
}

/* iOS Install Tip */
.ios-tip {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px) saturate(120%);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.2);
    animation: slideInUp 0.6s ease 0.8s both;
}

.ios-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ios-icon {
    font-size: 20px;
    color: #667eea;
}

.ios-text {
    flex: 1;
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
}

.ios-close {
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.ios-close:hover {
    background: #c53030;
    transform: scale(1.1);
}

/* Ad Banner - Minimal */
.ad-banner {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border: 2px dashed rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    animation: fadeIn 0.8s ease 0.4s both;
}

.ad-text {
    font-size: 13px;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

/* Integrated Tools Section */
.tools-section {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px) saturate(120%);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 40px;
    margin-top: 20px; /* Add some top margin for better spacing */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
    animation: slideInUp 0.6s ease 0.6s both;
    scroll-margin-top: 90px; /* Account for fixed navbar when scrolling to this section */
}

/* Search Container */
.search-container {
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.search-bar {
    position: relative;
    width: 100%;
    background: rgba(102, 126, 234, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.search-bar:focus-within {
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.5);
}

.search-icon {
    font-size: 20px;
    color: #667eea;
    margin: 0 16px;
    flex-shrink: 0;
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #2d3748;
    font-family: 'Comfortaa', cursive;
    padding: 12px 0;
    outline: none;
}

.search-bar input::placeholder {
    color: #a0aec0;
    font-weight: 400;
}

.search-clear {
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 8px;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.search-clear:hover {
    background: #c53030;
    transform: scale(1.1);
}

.search-results-info {
    text-align: center;
    margin-top: 16px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Main Content Area */
.main-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

/* Category Filter Base Styles */
.category-filter {
    background: rgba(102, 126, 234, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    position: sticky;
    top: 100px;
    z-index: 100;
    animation: categoryFloatDown 0.8s ease-out 0.2s both;
    max-width: 100%;
    box-sizing: border-box;
}

/* Desktop: Show grid, hide dropdown */
.category-dropdown-mobile {
    display: none;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

@keyframes categoryFloatDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.1);
}

.category-icon {
    font-size: 24px;
    color: #667eea;
}

.category-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #4a5568;
    margin: 0;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: floatDown 0.8s ease-out;
}

@keyframes floatDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Comfortaa', cursive;
    text-align: left;
    width: 100%;
    opacity: 0;
    transform: translateY(-10px);
    animation: categoryFloatIn 0.6s ease-out forwards;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.category-btn:nth-child(1) { animation-delay: 0.1s; }
.category-btn:nth-child(2) { animation-delay: 0.2s; }
.category-btn:nth-child(3) { animation-delay: 0.3s; }
.category-btn:nth-child(4) { animation-delay: 0.4s; }
.category-btn:nth-child(5) { animation-delay: 0.5s; }
.category-btn:nth-child(6) { animation-delay: 0.6s; }

@keyframes categoryFloatIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateX(4px);
}

.category-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.category-btn.active:hover {
    transform: translateX(4px) scale(1.02);
}

.category-emoji {
    font-size: 18px;
    flex-shrink: 0;
}

.category-name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #4a5568;
}

.category-btn.active .category-name {
    color: white;
}

.category-count {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.category-btn.active .category-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Search Results Animation */
.tool-card.search-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: all 0.3s ease;
}

.tool-card.search-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition: all 0.3s ease;
}

.tool-card.category-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: all 0.3s ease;
}

.tool-card.category-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition: all 0.3s ease;
}

/* Tools Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 1;
}

.tool-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px) saturate(120%);
    border-radius: 20px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
    display: flex;
    flex-direction: column;
    /* Dynamic height based on content */
}

.tool-card:nth-child(1) { animation-delay: 0.1s; }
.tool-card:nth-child(2) { animation-delay: 0.2s; }
.tool-card:nth-child(3) { animation-delay: 0.3s; }
.tool-card:nth-child(4) { animation-delay: 0.4s; }
.tool-card:nth-child(5) { animation-delay: 0.5s; }
.tool-card:nth-child(6) { animation-delay: 0.6s; }
.tool-card:nth-child(7) { animation-delay: 0.7s; }
.tool-card:nth-child(8) { animation-delay: 0.8s; }
.tool-card:nth-child(9) { animation-delay: 0.9s; }
.tool-card:nth-child(10) { animation-delay: 1.0s; }
.tool-card:nth-child(11) { animation-delay: 1.1s; }
.tool-card:nth-child(12) { animation-delay: 1.2s; }

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.tool-card:hover::before {
    transform: scaleX(1);
}

.tool-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
}

.tool-icon-wrapper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 120px;
    min-height: 120px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* prevent tall images from stretching the header */
}

/* Center icon wrapper content explicitly */
.tools-grid .tool-card .tool-icon-wrapper { justify-items: center; }

.tool-icon {
    font-size: 64px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}

/* Ensure image icons match emoji size consistently */
.tools-grid .tool-card img.tool-icon {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

/* Specific fix for QR logo to ensure consistent sizing */
.tools-grid .tool-card img.tool-icon[src*="qrdisplaylogo.png"] {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    display: block !important;
}
/* Fallback: any img inside icon wrapper should be constrained */
.tools-grid .tool-card .tool-icon-wrapper img {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

.tool-card:hover .tool-icon {
    transform: scale(1.1) rotate(5deg);
}

.tool-body {
    padding: 24px;
    flex: 1; /* Allow body to grow and push footer to bottom */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center inner content */
}

.tool-title {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
    text-align: center; /* Center titles in all tool cards */
}

.tool-desc {
    font-size: 14px;
    color: #718096;
    line-height: 1.7;
    margin-bottom: 16px;
    font-weight: 400;
    flex: 1; /* Allow description to grow and push footer down */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Increased spacing between badges */
    flex-wrap: wrap;
    margin-top: auto; /* Push footer to bottom */
}

.tool-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #5e35b1 0%, #311b92 100%);
    color: white;
    padding: 8px 16px; /* Increased padding for consistent size */
    border-radius: 20px;
    font-size: 11px; /* Slightly smaller for consistency */
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 32px; /* Consistent height */
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(94, 53, 177, 0.3);
}

.tool-card:hover .tool-badge {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(94, 53, 177, 0.4);
}

.badge-popular {
    background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%);
    box-shadow: 0 2px 8px rgba(106, 27, 154, 0.3);
}

.badge-trending {
    background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
    box-shadow: 0 2px 8px rgba(123, 31, 162, 0.3);
}

.badge-business {
    background: linear-gradient(135deg, #5e35b1 0%, #311b92 100%);
    box-shadow: 0 2px 8px rgba(94, 53, 177, 0.3);
}

.badge-utility {
    background: linear-gradient(135deg, #512da8 0%, #311b92 100%);
    box-shadow: 0 2px 8px rgba(81, 45, 168, 0.3);
}

.badge-professional {
    background: linear-gradient(135deg, #673ab7 0%, #4527a0 100%);
    box-shadow: 0 2px 8px rgba(103, 58, 183, 0.3);
}

.badge-developer {
    background: linear-gradient(135deg, #5e35b1 0%, #311b92 100%);
    box-shadow: 0 2px 8px rgba(94, 53, 177, 0.3);
}

.badge-specific {
    background: linear-gradient(135deg, #8e24aa 0%, #6a1b9a 100%);
    box-shadow: 0 2px 8px rgba(142, 36, 170, 0.3);
}

.badge-personal {
    background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
    box-shadow: 0 2px 8px rgba(123, 31, 162, 0.3);
}

.badge-fun {
    background: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.badge-new {
    background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
    animation: shimmer 2s infinite;
    box-shadow: 0 2px 8px rgba(123, 31, 162, 0.3);
}

.badge-premium {
    background: linear-gradient(135deg, #5e35b1 0%, #311b92 100%);
}

.badge-special {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    animation: shimmer 2s infinite;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

@keyframes shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Premium Badge Dynamic Width */
.premium-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.premium-badge-item {
    /* Dynamic width calculation: (100% - total gap space) / number of items per row */
    /* Desktop: 4 items in one row */
    flex: 0 0 calc((100% - 30px) / 4); /* 3 gaps of 10px = 30px */
    max-width: calc((100% - 30px) / 4);
    box-sizing: border-box;
}

/* Tablet: 2 items per row */
@media (max-width: 768px) {
    .premium-badge-item {
        flex: 0 0 calc((100% - 10px) / 2); /* 1 gap of 10px = 10px */
        max-width: calc((100% - 10px) / 2);
    }
}

/* Small mobile: Stack vertically */
@media (max-width: 480px) {
    .premium-badge-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-family: 'Comfortaa', cursive;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: #ffffff; /* initial white */
    color: #4c1d95; /* deep purple text */
    border: 2px solid #4c1d95; /* deep purple outline */
}

.btn-secondary:hover {
    background: #111827; /* charcoal black */
    color: #ffffff;
    transform: translateY(-2px) scale(1.02);
}

.btn-success {
    background: #10b981;
    color: white;
    border: 2px solid #10b981;
}

.btn-success:hover {
    background: #059669;
    border-color: #059669;
    transform: translateY(-2px) scale(1.02);
}

.pp-shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Time Phase Indicator */
.theme-indicator {
    margin-top: 12px;
    font-size: 14px;
    opacity: 0.8;
}

.phase-item {
    transition: all 0.3s ease;
    opacity: 0.5;
}

.phase-item.active {
    opacity: 1;
    font-weight: 600;
    text-shadow: 0 0 8px currentColor;
    transform: scale(1.1);
    display: inline-block;
}

/* QR ad blocks positioning - Ensure ads are always at the very top */
.qr-ad-small, .qr-ad-medium, .qr-ad-large, .large-support-card, #qrSupportText {
    position: fixed;       /* overlays, not affected by page flow */
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */        /* Above clouds but below critical UI elements */
    pointer-events: auto;
}

/* example placements; adjust as you wish */
.qr-ad-medium { bottom: 16px; right: 16px; }
.qr-ad-small  { bottom: 16px; right: 16px; } /* Moved from left to right side */

footer, .site-footer { overflow: visible; } /* avoid clipping overlays */

/* Witch silhouette for dusk mode - positioned behind cards */
body[data-phase="dusk"] .witch-silhouette {
    position: fixed;
    bottom: 20px;
    left: -200px; /* Start from off-screen left */
    width: 120px;
    height: auto;
    z-index: 0; /* Behind cards (cards are z-index: 1) and text */
    animation: witchFly 45s linear infinite;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(75, 0, 130, 0.5));
    opacity: 0.8;
}

/* Witch glitter trail */
body[data-phase="dusk"] .witch-silhouette::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(255, 255, 255, 0.6), transparent);
    animation: glitterTrail 0.5s ease-in-out infinite;
    transform: translateY(-50%);
}

body[data-phase="dusk"] .witch-silhouette::after {
    content: '';
    position: absolute;
    top: 30%;
    left: -30px;
    width: 25px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: glitterTrail 0.3s ease-in-out infinite;
    animation-delay: 0.1s;
}

@keyframes witchFly {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    95% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(calc(100vw + 400px)) translateY(-20px);
        opacity: 0;
    }
}

@keyframes glitterTrail {
    0% {
        opacity: 0;
        transform: translateY(-50%) scaleX(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scaleX(0.5);
    }
}


/* Premium Section */
.premium-section {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    margin: 48px 0 0 0; /* Increased top margin to prevent overlap */
    position: relative;
    z-index: 1;
    box-shadow: 0 12px 40px rgba(245, 87, 108, 0.3);
    overflow: hidden;
    animation: slideInUp 0.8s ease 0.6s both;
    scroll-margin-top: 90px; /* Account for fixed navbar when scrolling to this section */
}

.premium-section::before {
    content: '✨';
    position: absolute;
    font-size: 200px;
    opacity: 0.1;
    top: -50px;
    right: -50px;
    animation: rotate 20s infinite linear;
}

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

.premium-section h2 {
    font-size: 36px;
    color: white;
    margin-bottom: 16px;
    font-weight: 700;
}

.premium-section p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.premium-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.premium-feature {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 16px;
    color: white;
    transition: transform 0.3s ease;
}

.premium-feature:hover {
    transform: translateY(-5px) scale(1.02);
}

.premium-feature h3 {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
}

.premium-feature p {
    font-size: 14px;
    margin: 0;
}

/* Footer */
footer {
    text-align: center;
    padding: 48px 20px;
    margin-top: 80px;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
    animation: fadeIn 0.8s ease 0.8s both;
}

.footer-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.footer-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #ffd700;
    transform: translateY(-2px) scale(1.05);
}

.heart {
    display: inline-block;
    color: #ff6b9d;
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.2); }
    20% { transform: scale(1); }
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

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

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success Animation */
.success-check {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    animation: checkmark 0.6s ease-in-out;
}

.success-check::after {
    content: '✓';
    color: white;
    font-size: 24px;
    font-weight: bold;
}

@keyframes checkmark {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    header {
        margin-top: 80px !important;  /* Account for fixed navbar */
        margin-bottom: 30px;
    }

    h1 {
        font-size: 36px;
        margin-top: -35px;
    }

    .tagline {
        font-size: 16px;
        margin-top: 3px;
    }

    .logo-cloud {
        font-size: 120px;
        margin-bottom: -20px; /* Reduced overlap */
    }

    h1 {
        font-size: 36px; /* Slightly smaller for mobile */
        margin-top: -10px; /* Reduced negative margin */
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    .premium-section {
        padding: 32px 24px;
        margin: 32px 0 0 0; /* Reduced margin for mobile */
    }

    .premium-section h2 {
        font-size: 28px;
    }

    .productivity-banner {
        padding: 24px;
    }

    .banner-content {
        text-align: center;
    }

    .banner-features {
        display: none !important; /* Hide feature badges on mobile */
    }

    .feature-item {
        padding: 12px 16px;
    }

    .install-banner {
        flex-direction: column;
        gap: 16px;
        padding: 20px 24px;
        text-align: center;
    }

    .install-content {
        flex-direction: column;
        gap: 8px;
    }

    .install-app-btn {
        width: 100%;
        justify-content: center;
    }


    /* Mobile Tools Section */
    .tools-section {
        padding: 24px;
    }

    .main-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .category-filter {
        position: sticky !important;
        top: 95px !important; /* Below time selector */
        z-index: 1000 !important; /* Above content */
        order: -1;
        padding: 8px 12px !important;
        margin-bottom: 16px;
        overflow: visible;
        max-height: none;
        width: 100%;
        max-width: calc(100vw - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        isolation: isolate; /* Create new stacking context */
    }

    /* Hide desktop grid on mobile */
    .category-list {
        display: none;
    }

    /* Hide category header on mobile */
    .category-header {
        display: none;
    }

    /* Show mobile dropdown */
    .category-dropdown-mobile {
        display: block;
    }

    .category-select {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px;
        border: 2px solid rgba(102, 126, 234, 0.3);
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
        backdrop-filter: blur(15px);
        color: #374151;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }

    .category-select:focus {
        outline: none;
        border-color: rgba(102, 126, 234, 0.5);
        box-shadow: 0 8px 30px rgba(102, 126, 234, 0.25);
        transform: translateY(-1px);
    }

    .category-select:hover {
        border-color: rgba(102, 126, 234, 0.4);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    }

    .tools-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        position: relative;
        z-index: 1 !important; /* Below category filter */
    }
    
    .tool-card {
        position: relative;
        z-index: 1 !important; /* Below category filter */
    }

    /* Mobile Navigation */
    .navbar {
        height: auto !important;
        min-height: 50px !important;
        padding: 8px 15px !important;
    }
    
    .nav-container {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .nav-actions {
        gap: 12px;
    }

    .install-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    .ios-tip {
        padding: 12px 16px;
    }

    .ios-content {
        gap: 8px;
    }

    .ios-text {
        font-size: 13px;
    }
    
    /* Time selector positioning on mobile */
    #pp-phase-switch,
    .floating-time-btn {
        position: fixed !important;
        top: 95px !important; /* Moved down 25px from 70px to avoid navbar overlap */
        right: 12px !important;
        z-index: 999 !important;
    }
    
    /* Scale cards and text for mobile */
    .tool-card {
        padding: 16px !important;
        font-size: 14px !important;
    }
    
    .tool-title {
        font-size: 16px !important;
    }
    
    .tool-desc {
        font-size: 13px !important;
    }
    
    .tool-icon-wrapper {
        height: 70px !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .tool-icon {
        font-size: 40px !important;
    }
    
    /* Remove blur effects on mobile */
    .tool-card,
    .category-filter,
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Hide clouds on mobile */
    .cloud,
    .cloud-wrapper {
        display: none !important;
    }
    
    
    .category-select {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    
    /* Add fade effect for cards going under selector */
    .category-filter::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), transparent);
        pointer-events: none;
        z-index: 1001;
    }
}

/* Desktop blur after 2 minutes of inactivity */
@media (min-width: 769px) {
    body.idle-2min .tool-card {
        animation: fadeToTransparent 10s ease-out forwards;
    }
}

@keyframes fadeToTransparent {
    to {
        opacity: 0;
    }
}

/* CAPTCHA Modal Styles */
.captcha-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

.captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
}

/* CAPTCHA Floating Clouds Background */
.captcha-clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.captcha-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    animation: captchaFloat 20s infinite ease-in-out;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
}

.captcha-cloud:nth-child(1) {
    width: 150px;
    height: 65px;
    top: 15%;
    left: -20%;
    animation-delay: 0s;
}

.captcha-cloud:nth-child(2) {
    width: 220px;
    height: 85px;
    top: 25%;
    left: -25%;
    animation-delay: 3s;
}

.captcha-cloud:nth-child(3) {
    width: 180px;
    height: 75px;
    top: 50%;
    left: -22%;
    animation-delay: 6s;
}

.captcha-cloud:nth-child(4) {
    width: 130px;
    height: 55px;
    top: 10%;
    left: -18%;
    animation-delay: 9s;
}

.captcha-cloud:nth-child(5) {
    width: 200px;
    height: 80px;
    top: 35%;
    left: -28%;
    animation-delay: 12s;
}

.captcha-cloud:nth-child(6) {
    width: 170px;
    height: 70px;
    top: 60%;
    left: -24%;
    animation-delay: 15s;
}

@keyframes captchaFloat {
    0% {
        transform: translateX(-20vw) translateY(0);
        opacity: 0.4;
    }
    20% {
        transform: translateX(20vw) translateY(-15px);
        opacity: 0.8;
    }
    40% {
        transform: translateX(40vw) translateY(10px);
        opacity: 0.6;
    }
    60% {
        transform: translateX(60vw) translateY(-8px);
        opacity: 0.9;
    }
    80% {
        transform: translateX(80vw) translateY(5px);
        opacity: 0.7;
    }
    100% {
        transform: translateX(120vw) translateY(0);
        opacity: 0.3;
    }
}

.captcha-container {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px;
    max-width: 450px;
    width: 100%;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: captchaSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Comfortaa', cursive;
    border: 2px solid rgba(102, 126, 234, 0.1);
    transform: scale(1);
    transition: all 0.3s ease;
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    margin: 20px auto;
}

.captcha-container:hover {
    transform: scale(1.02);
    box-shadow: 
        0 30px 100px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.captcha-header {
    text-align: center;
    margin-bottom: 30px;
}

.captcha-header h3 {
    color: #667eea;
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 700;
}

.captcha-header p {
    color: #718096;
    font-size: 14px;
    margin: 0;
}

.captcha-content {
    text-align: center;
}

.captcha-question {
    background: linear-gradient(135deg, #6b46c1 0%, #7c3aed 100%);
    color: white;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    font-size: 28px;
    font-weight: 700;
    box-shadow: 
        0 8px 25px rgba(102, 126, 234, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    animation: captchaQuestionPulse 3s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.captcha-question::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 100%;
    animation: captchaShimmer 2s ease-in-out infinite;
    border-radius: 16px 16px 0 0;
}

@keyframes captchaQuestionPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 8px 25px rgba(102, 126, 234, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 
            0 12px 35px rgba(102, 126, 234, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

@keyframes captchaShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.captcha-input {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.captcha-input input {
    flex: 1;
    min-width: 200px;
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 18px;
    font-family: 'Comfortaa', cursive;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.captcha-input input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 
        0 0 0 3px rgba(102, 126, 234, 0.1),
        0 4px 12px rgba(102, 126, 234, 0.2);
    transform: translateY(-1px);
}

.captcha-input button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Comfortaa', cursive;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(102, 126, 234, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    min-width: 100px;
}

.captcha-input button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.captcha-input button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 25px rgba(102, 126, 234, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.captcha-input button:hover::before {
    left: 100%;
}

.captcha-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.captcha-actions button {
    padding: 10px 18px;
    border: 2px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: #4a5568;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Comfortaa', cursive;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.captcha-actions button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s ease;
}

.captcha-actions button:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    background: rgba(102, 126, 234, 0.05);
}

.captcha-actions button:hover::before {
    left: 100%;
}

.captcha-status {
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: captchaStatusSlide 0.4s ease-out;
    backdrop-filter: blur(10px);
}

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

.captcha-status.success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 2px solid #10b981;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    animation: captchaSuccessPulse 0.6s ease-out;
}

@keyframes captchaSuccessPulse {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Success Message Animations */
.success-message {
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    50% {
        transform: scale(1.02);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-message h3 {
    animation: checkmarkVibrate 0.8s ease-out 0.2s both;
}

@keyframes checkmarkVibrate {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    20% {
        transform: scale(1.1);
        opacity: 1;
    }
    40% {
        transform: scale(1) translateX(-2px);
    }
    50% {
        transform: scale(1) translateX(2px);
    }
    60% {
        transform: scale(1) translateX(-1px);
    }
    70% {
        transform: scale(1) translateX(1px);
    }
    80% {
        transform: scale(1) translateX(-1px);
    }
    100% {
        transform: scale(1) translateX(0px);
        opacity: 1;
    }
}

.download-btn {
    animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
        transform: translateY(-1px);
    }
}

.captcha-status.error {
    background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
    color: #991b1b;
    border: 2px solid #ef4444;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    animation: captchaErrorShake 0.6s ease-out;
}

@keyframes captchaErrorShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes captchaSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-100px) scale(0.8) rotateX(20deg);
        filter: blur(10px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-20px) scale(1.05) rotateX(5deg);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}

@keyframes captchaSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-20px) scale(1.05) rotateX(5deg);
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0.8) rotateX(20deg);
        filter: blur(10px);
    }
}

/* CAPTCHA Responsive Design */
@media (max-width: 768px) {
    .captcha-container {
        max-width: 95%;
        padding: 20px;
        margin: 10px;
    }
    
    .captcha-question {
        font-size: 22px;
        padding: 16px;
        min-height: 60px;
    }
    
    .captcha-input {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .captcha-input input {
        font-size: 16px;
        padding: 12px 16px;
        min-width: auto;
        width: 100%;
    }
    
    .captcha-input button {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        min-width: auto;
    }
    
    .captcha-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .captcha-actions button {
        width: 100%;
        padding: 12px 16px;
    }
}

/* CAPTCHA Ad Styles */
.captcha-ad {
    margin-top: 30px;
    border-top: 2px solid #e2e8f0;
    padding-top: 20px;
}

.ad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ad-label {
    font-size: 12px;
    color: #718096;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ad-close {
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #4a5568;
    transition: all 0.3s ease;
}

.ad-close:hover {
    background: #cbd5e0;
    transform: scale(1.1);
}

.ad-content {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ad-image {
    flex-shrink: 0;
}

.ad-placeholder-image {
    width: 120px;
    height: 90px;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ad-placeholder-image:hover {
    border-color: #667eea;
    background: linear-gradient(135deg, #f0f4ff 0%, #e6f3ff 100%);
}

.ad-placeholder-text {
    font-size: 10px;
    color: #a0aec0;
    font-weight: 600;
}

.ad-text {
    flex: 1;
}

.ad-text h4 {
    font-size: 16px;
    color: #2d3748;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.ad-text p {
    font-size: 14px;
    color: #4a5568;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.ad-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Comfortaa', cursive;
}

.ad-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Mobile CAPTCHA Styles */
@media (max-width: 768px) {
    .captcha-container {
        padding: 30px 20px;
        margin: 20px;
    }

    .captcha-input {
        flex-direction: column;
    }

    .captcha-actions {
        flex-direction: column;
    }

    .captcha-question {
        font-size: 20px;
        padding: 16px;
    }

    .captcha-ad {
        margin-top: 20px;
        padding-top: 16px;
    }

    .ad-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .ad-placeholder-image {
        width: 100px;
        height: 75px;
    }

    .ad-text h4 {
        font-size: 15px;
    }

    .ad-text p {
        font-size: 13px;
    }
}

/* Non-obtrusive Ad Banner */
.ad-banner {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px) saturate(120%);
    border-radius: 16px;
    padding: 20px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInUp 0.6s ease 0.8s both;
}

.ad-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.ad-icon {
    font-size: 18px;
    animation: pulse 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-text {
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
    font-family: 'Comfortaa', cursive;
}

.ad-space {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-placeholder {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 120px;
    transition: all 0.3s ease;
}

.ad-placeholder:hover {
    border-color: #667eea;
    background: linear-gradient(135deg, #f0f4ff 0%, #e6f3ff 100%);
}

.ad-label {
    font-size: 12px;
    color: #718096;
    font-weight: 600;
    font-family: 'Comfortaa', cursive;
}

.ad-size {
    font-size: 10px;
    color: #a0aec0;
    font-family: 'Comfortaa', cursive;
}

/* Mobile Ad Banner */
@media (max-width: 768px) {
    .ad-banner {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        text-align: center;
    }

    .ad-content {
        flex-direction: column;
        gap: 8px;
    }

    .ad-placeholder {
        min-width: 100px;
        padding: 10px 16px;
    }
}

/* Floating Back Button */
.floating-back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
}

.floating-back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    color: #2d3748;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.2);
    font-family: 'Comfortaa', cursive;
    animation: floatingPulse 4s ease-in-out infinite;
}

.floating-back-link:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4);
}

.floating-back-link:hover .floating-back-text {
    color: #ffffff !important;
}

.floating-back-link:hover .floating-back-icon {
    color: #ffffff !important;
}

@keyframes floatingPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        transform: translateY(0px);
    }
    50% {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }
}

.floating-back-icon {
    font-size: 18px;
    animation: cloudFloat 3s ease-in-out infinite;
}

@keyframes cloudFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(2deg); }
    50% { transform: translateY(-1px) rotate(0deg); }
    75% { transform: translateY(-2px) rotate(-2deg); }
}

.floating-back-text {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

@keyframes backButtonReminder {
    0%, 100% {
        transform: translateY(0px) scale(1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    25% {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
    }
    50% {
        transform: translateY(-5px) scale(1.08);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
    }
    75% {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
    }
}

/* Available vs Coming Soon Cards */
.tool-card.available {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.tool-card.coming-soon {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
    filter: grayscale(0.3);
}

.tool-card.coming-soon .tool-icon-wrapper {
    background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%);
}

.tool-card.coming-soon .tool-title,
.tool-card.coming-soon .tool-desc {
    color: #718096;
}

.tool-card.coming-soon:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tool-card.coming-soon:hover .tool-icon {
    transform: none;
}

/* Sparkle effect */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: sparkle 1.5s infinite;
}

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

/* Page transitions */
.page-transition {
    animation: pageSlideIn 0.5s ease-out;
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Floating Back Button */
.floating-back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
}

.floating-back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    color: #2d3748;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.2);
    font-family: 'Comfortaa', cursive;
    animation: floatingPulse 4s ease-in-out infinite;
}

.floating-back-link:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4);
}

.floating-back-link:hover .floating-back-text {
    color: #ffffff !important;
}

.floating-back-icon {
    font-size: 18px;
    animation: cloudFloat 3s ease-in-out infinite;
}

.floating-back-text {
    font-size: 14px;
    color: #374151;
}

@keyframes floatingPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-2px) scale(1.02);
    }
}

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

/* ===== PWA SPLASH SCREEN STYLING ===== */
/* Enhanced splash screen for PWA launches */
.splash-content {
    display: none; /* Hidden by default */
}

@media (display-mode: standalone) {
    .splash-content {
        display: block; /* Show only in PWA mode */
    }
    
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        animation: splashFadeIn 0.8s ease-out;
    }
    
    .splash-content {
        text-align: center;
        animation: splashSlideUp 0.6s ease-out 0.1s both;
    }
    
    .splash-logo {
        font-size: 120px;
        margin-bottom: 20px;
        animation: splashBounce 0.8s ease-out 0.3s both;
        filter: drop-shadow(0 8px 20px rgba(255, 255, 255, 0.3));
    }
    
    .splash-title {
        font-size: 48px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 16px;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        animation: splashGlow 1.2s ease-in-out 0.5s infinite alternate;
    }
    
    .splash-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        animation: splashFadeIn 0.8s ease-out 0.6s both;
    }
    
    .splash-dot {
        width: 12px;
        height: 12px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        animation: splashDotBounce 0.8s ease-in-out infinite;
    }
    
    .splash-dot:nth-child(2) {
        animation-delay: 0.1s;
    }
    
    .splash-dot:nth-child(3) {
        animation-delay: 0.2s;
    }
    
    /* Hide splash after loading */
    .splash-content.hide {
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.5s ease-out;
    }
}

/* Splash screen animations */
@keyframes splashFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes splashBounce {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-50px);
    }
    50% {
        transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes splashGlow {
    0% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    100% {
        text-shadow: 0 4px 30px rgba(255, 255, 255, 0.4);
    }
}

@keyframes splashDotBounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Mobile splash screen adjustments */
@media (display-mode: standalone) and (max-width: 768px) {
    .splash-logo {
        font-size: 100px;
        margin-bottom: 16px;
    }
    
    .splash-title {
        font-size: 36px;
        margin-bottom: 12px;
    }
}

@media (display-mode: standalone) and (max-width: 480px) {
    .splash-logo {
        font-size: 80px;
        margin-bottom: 12px;
    }
    
    .splash-title {
        font-size: 28px;
        margin-bottom: 8px;
    }
}

/* Regular app styling (non-PWA) */
@media not (display-mode: standalone) {
    .splash-content {
        display: none;
    }
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 14px;
    }

    .container {
        padding: 0 10px;
    }

    /* Header optimizations */
    header {
        margin-bottom: 20px;
        padding: 15px 0;
    }

    h1 {
        font-size: 28px;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }

    /* Tool cards mobile optimization */
    .tools-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 10px;
    }

    .tool-card {
        padding: 20px;
        margin-bottom: 0;
        border-radius: 16px !important; /* Keep cute rounded corners */
        min-height: auto;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12) !important; /* Enhanced shadow */
        border: 2px solid rgba(255, 255, 255, 0.4) !important; /* Keep cute border */
        backdrop-filter: blur(15px) !important; /* Keep glass effect */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Keep smooth transitions */
    }

    .tool-card:hover {
        transform: translateY(-4px) scale(1.02) !important; /* Keep hover animation */
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15) !important; /* Enhanced hover shadow */
    }

    .tool-icon-wrapper {
        display: none !important; /* Hide wrapper on mobile */
    }

    /* Position icons at top center of card above title */
    .tool-card {
        position: relative !important;
        padding-top: 60px !important; /* Make space for top icon */
    }

    .tool-card .tool-icon {
        position: absolute !important;
        top: 16px !important; /* Position at top of card */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Perfect center */
        margin: 0 !important; /* Remove all margins */
        font-size: 40px !important; /* Appropriate size for top position */
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
        animation: iconBounce 2s ease-in-out infinite !important;
        z-index: 2 !important;
    }

    .tool-card img.tool-icon {
        position: absolute !important;
        top: 16px !important; /* Position at top of card */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Perfect center */
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        margin: 0 !important; /* Remove all margins */
        display: block !important;
        z-index: 2 !important;
    }

    .tool-title {
        font-size: 18px;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .tool-desc {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    /* Category filters mobile */
    .category-list {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 10px;
    }

    .category-btn {
        padding: 12px 16px !important; /* More padding for touch */
        font-size: 14px !important; /* Slightly larger */
        min-width: auto;
        flex: 1;
        min-width: 0;
        background: rgba(255, 255, 255, 0.15) !important; /* Keep glass effect */
        border: 2px solid rgba(255, 255, 255, 0.3) !important; /* Keep cute border */
        border-radius: 12px !important; /* Keep rounded corners */
        backdrop-filter: blur(10px) !important; /* Keep glass effect */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Keep smooth transitions */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Keep shadow */
    }

    .category-btn:hover {
        transform: translateY(-2px) scale(1.05) !important; /* Keep hover animation */
        background: rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; /* Enhanced hover shadow */
    }

    .category-btn.active {
        background: rgba(102, 126, 234, 0.9) !important;  /* Darker background */
        border-color: rgba(102, 126, 234, 0.6) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }

    .category-btn.active .category-name {
        color: white !important;  /* Ensure white text on dark background */
    }

    .category-name {
        font-size: 12px;
    }

    .category-count {
        font-size: 11px;
    }

    /* Search bar mobile */
    .search-container {
        padding: 0 10px;
        margin-bottom: 20px;
    }

    .search-input {
        font-size: 14px !important; /* Smaller text for mobile */
        padding: 12px 16px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }

    .search-input:focus {
        border-color: rgba(102, 126, 234, 0.5) !important;
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.2) !important; /* Enhanced focus shadow */
        transform: translateY(-1px) !important; /* Subtle lift on focus */
    }

    /* Floating back button mobile */
    .floating-back-btn {
        top: 15px;
        left: 15px;
    }

    .floating-back-link {
        padding: 12px 18px !important; /* More padding for touch */
        font-size: 15px !important; /* Slightly larger */
        border-radius: 16px !important; /* Keep rounded corners */
        background: rgba(255, 255, 255, 0.95) !important; /* Keep glass effect */
        backdrop-filter: blur(15px) !important; /* Keep glass effect */
        border: 2px solid rgba(102, 126, 234, 0.2) !important; /* Keep cute border */
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15) !important; /* Keep shadow */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Keep smooth transitions */
    }

    .floating-back-link:hover {
        transform: translateY(-3px) scale(1.05) !important; /* Keep hover animation */
        background: rgba(0, 0, 0, 0.9) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important; /* Enhanced hover shadow */
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: #ffffff !important;
    }

    .floating-back-link:hover .floating-back-text {
        color: #ffffff !important;
    }

    .floating-back-link:hover .floating-back-icon {
        color: #ffffff !important;
    }

    .floating-back-icon {
        font-size: 18px;
    }

    /* Footer mobile */
    .site-footer {
        margin: 20px 0;
        padding: 16px;
        border-radius: 8px;
        font-size: 13px;
    }

}

/* Mobile-optimized cloud animation */
@media (max-width: 768px) {
    @keyframes float {
        0% {
            transform: translateX(-20vw) translateY(0);
            opacity: 0.2;
        }
        25% {
            transform: translateX(20vw) translateY(-5px);
            opacity: 0.5;
        }
        50% {
            transform: translateX(60vw) translateY(-10px);
            opacity: 0.7;
        }
        75% {
            transform: translateX(80vw) translateY(-5px);
            opacity: 0.5;
        }
        100% {
            transform: translateX(120vw) translateY(0);
            opacity: 0.2;
        }
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    body {
        padding: 8px;
        font-size: 13px;
    }

    h1 {
        font-size: 24px;
    }

    .logo-cloud {
        font-size: 100px; /* Smaller for very small screens */
        margin-bottom: -15px; /* Minimal overlap */
    }

    .subtitle {
        font-size: 14px;
    }

    .tool-card {
        padding: 18px !important; /* Slightly more padding */
        border-radius: 14px !important; /* Keep rounded corners */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important; /* Enhanced shadow */
        border: 2px solid rgba(255, 255, 255, 0.4) !important; /* Keep cute border */
        backdrop-filter: blur(15px) !important; /* Keep glass effect */
    }

    .tool-card:hover {
        transform: translateY(-3px) scale(1.02) !important; /* Keep hover animation */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important; /* Enhanced hover shadow */
    }

    .tool-title {
        font-size: 16px;
    }

    .tool-desc {
        font-size: 13px;
    }

    .category-btn {
        padding: 10px 14px !important; /* More padding for touch */
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.15) !important; /* Keep glass effect */
        border: 2px solid rgba(255, 255, 255, 0.3) !important; /* Keep cute border */
        border-radius: 10px !important; /* Keep rounded corners */
        backdrop-filter: blur(10px) !important; /* Keep glass effect */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Keep shadow */
        transition: all 0.3s ease !important; /* Keep smooth transitions */
    }

    .category-btn:hover {
        transform: translateY(-2px) scale(1.05) !important; /* Keep hover animation */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; /* Enhanced hover shadow */
    }

    .search-input {
        font-size: 16px;
        padding: 12px 16px !important; /* More padding for touch */
        border-radius: 10px !important; /* Keep rounded corners */
        background: rgba(255, 255, 255, 0.9) !important; /* Keep glass effect */
        border: 2px solid rgba(255, 255, 255, 0.3) !important; /* Keep cute border */
        backdrop-filter: blur(10px) !important; /* Keep glass effect */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Keep shadow */
        transition: all 0.3s ease !important; /* Keep smooth transitions */
    }

    .search-input:focus {
        border-color: rgba(102, 126, 234, 0.5) !important;
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.2) !important; /* Enhanced focus shadow */
        transform: translateY(-1px) !important; /* Subtle lift on focus */
    }

    .floating-back-link {
        padding: 10px 14px !important; /* More padding for touch */
        font-size: 14px !important; /* Slightly larger */
        border-radius: 14px !important; /* Keep rounded corners */
        background: rgba(255, 255, 255, 0.95) !important; /* Keep glass effect */
        backdrop-filter: blur(15px) !important; /* Keep glass effect */
        border: 2px solid rgba(102, 126, 234, 0.2) !important; /* Keep cute border */
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15) !important; /* Keep shadow */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Keep smooth transitions */
    }

    .floating-back-link:hover {
        transform: translateY(-2px) scale(1.05) !important; /* Keep hover animation */
        background: rgba(0, 0, 0, 0.9) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; /* Enhanced hover shadow */
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: #ffffff !important;
    }

    .floating-back-link:hover .floating-back-text {
        color: #ffffff !important;
    }

    .floating-back-link:hover .floating-back-icon {
        color: #ffffff !important;
    }

}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .tool-card {
        /* Dynamic height based on content */
    }

    .category-btn {
        min-height: 44px;
    }

    .search-input {
        min-height: 44px;
    }

    .floating-back-link {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .tool-card:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .category-btn:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.1);
    }

    .floating-back-link:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tool-card {
        padding: 12px;
    }

    .tool-title {
        font-size: 16px;
    }

    .tool-desc {
        font-size: 12px;
    }

    /* Reduce header space in landscape */
    header {
        margin-bottom: 15px;
        padding: 10px 0;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .subtitle {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tool-icon {
        font-size: 28px;
    }

    .floating-back-icon {
        font-size: 22px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .tool-card {
        background: rgba(255, 255, 255, 0.95);
        color: #2d3748;
    }

    .category-btn {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .category-btn.active {
        background: rgba(255, 255, 255, 0.2);
    }

    .search-input {
        background: rgba(255, 255, 255, 0.9);
        color: #2d3748;
    }

    .floating-back-link {
        background: rgba(255, 255, 255, 0.95);
        color: #667eea;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .tool-card {
        transition: none;
    }

    .category-btn {
        transition: none;
    }

    .floating-back-link {
        transition: none;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== TOOL-SPECIFIC MOBILE OPTIMIZATIONS ===== */

/* QR/Barcode Generator Mobile Styles */
@media (max-width: 768px) {
    .converter-card {
        padding: 16px !important; /* More padding for touch */
        margin: 12px !important; /* More margin */
        border-radius: 16px !important; /* Keep cute rounded corners */
        background: rgba(255, 255, 255, 1.0) !important; /* Keep glass effect */
        backdrop-filter: blur(15px) !important; /* Keep glass effect */
        border: 2px solid rgba(255, 255, 255, 1.0) !important; /* Keep cute border */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important; /* Keep shadow */
        transition: all 0.3s ease !important; /* Keep smooth transitions */
    }

    .converter-card:hover {
        transform: translateY(-2px) !important; /* Keep hover animation */
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important; /* Enhanced hover shadow */
    }

    .actions-row {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 12px 16px !important; /* More padding for touch */
        font-size: 14px !important; /* Slightly larger */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 10px !important; /* Keep rounded corners */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Keep smooth transitions */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Keep shadow */
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; /* Keep gradient */
        color: white !important;
        border: none !important;
    }

    .btn-primary:hover {
        transform: translateY(-2px) scale(1.05) !important; /* Keep hover animation */
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important; /* Enhanced hover shadow */
    }

    .btn-secondary {
        background: rgba(255, 255, 255, 0.9) !important; /* Keep glass effect */
        color: #667eea !important;
        border: 2px solid #667eea !important; /* Keep cute border */
        backdrop-filter: blur(10px) !important; /* Keep glass effect */
    }

    .btn-secondary:hover {
        transform: translateY(-2px) scale(1.05) !important; /* Keep hover animation */
        background: #111827 !important; /* charcoal black */
        color: #ffffff !important;
        box-shadow: 0 8px 25px rgba(17, 24, 39, 0.3) !important; /* match charcoal */
    }

    .btn-danger {
        background: rgba(255, 255, 255, 0.9) !important; /* Keep glass effect */
        color: #e53e3e !important;
        border: 2px solid #e53e3e !important; /* Keep cute border */
        backdrop-filter: blur(10px) !important; /* Keep glass effect */
    }

    .btn-danger:hover {
        transform: translateY(-2px) scale(1.05) !important; /* Keep hover animation */
        background: #e53e3e !important;
        color: white !important;
        box-shadow: 0 8px 25px rgba(229, 62, 62, 0.3) !important; /* Enhanced hover shadow */
    }

    .input-group {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .input-field {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .input-field label {
        display: block !important;
        margin-bottom: 4px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #4a5568 !important;
    }

    .input-field input,
    .input-field select {
        width: 100% !important;
        padding: 12px 16px !important; /* More padding for touch */
        font-size: 16px !important; /* Prevents zoom on iOS */
        border: 2px solid #e2e8f0 !important;
        border-radius: 10px !important; /* Keep rounded corners */
        background: rgba(255, 255, 255, 0.9) !important; /* Keep glass effect */
        backdrop-filter: blur(10px) !important; /* Keep glass effect */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* Keep subtle shadow */
        transition: all 0.3s ease !important; /* Keep smooth transitions */
    }

    .input-field input:focus,
    .input-field select:focus {
        border-color: #667eea !important;
        outline: none !important;
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.2) !important; /* Enhanced focus shadow */
        transform: translateY(-1px) !important; /* Subtle lift on focus */
    }

    /* Preview area mobile */
    .preview-wrap {
        margin-top: 16px !important;
        padding: 16px !important; /* More padding */
        border-radius: 12px !important; /* Keep rounded corners */
        background: rgba(255, 255, 255, 0.95) !important; /* Keep glass effect */
        backdrop-filter: blur(10px) !important; /* Keep glass effect */
        border: 2px solid rgba(255, 255, 255, 0.3) !important; /* Keep cute border */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; /* Keep shadow */
    }

    #out svg {
        max-width: 100% !important;
        max-height: 200px !important;
    }

    /* File input mobile */
    .input-field input[type="file"] {
        padding: 8px !important;
        font-size: 14px !important;
    }

    /* Checkbox mobile */
    .input-field input[type="checkbox"] {
        width: auto !important;
        margin-right: 8px !important;
        transform: scale(1.2) !important;
    }

    /* Global action buttons mobile */
    .actions-row .btn-group:first-child {
        order: 1 !important;
    }

    .actions-row .btn-group:last-child {
        order: 2 !important;
    }

    /* Toggle checkbox mobile */
    label[style*="display:flex"] {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 8px 0 !important;
        font-size: 14px !important;
    }

    /* QR/Barcode Canvas Mobile Scaling */
    .preview-wrap {
        margin-top: 16px !important;
        padding: 16px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    .preview-wrap canvas {
        max-width: 100% !important;
        max-height: 300px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }

    .preview-wrap svg {
        max-width: 100% !important;
        max-height: 300px !important;
        width: auto !important;
        height: auto !important;
    }

    .code-caption {
        font-size: 14px !important;
        margin-top: 8px !important;
        color: #4a5568 !important;
        text-align: center !important;
        font-weight: 600 !important;
    }

    .meta {
        font-size: 12px !important;
        margin-top: 6px !important;
        color: #718096 !important;
    }
}

/* Small mobile devices - QR Generator */
@media (max-width: 480px) {
    .converter-card {
        padding: 8px !important;
        margin: 4px !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    .input-field input,
    .input-field select {
        padding: 8px 10px !important;
        font-size: 16px !important;
    }

    .input-field label {
        font-size: 13px !important;
    }

    /* QR/Barcode Canvas Mobile Scaling */
    .preview-wrap {
        margin-top: 12px !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .preview-wrap canvas {
        max-width: 100% !important;
        max-height: 250px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 6px !important;
    }

    .preview-wrap svg {
        max-width: 100% !important;
        max-height: 250px !important;
        width: auto !important;
        height: auto !important;
    }

    .code-caption {
        font-size: 12px !important;
        margin-top: 6px !important;
    }

    .meta {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    #out svg {
        max-height: 150px !important;
    }
}

/* Image Converter Mobile Styles */
@media (max-width: 768px) {
    .image-converter-container {
        padding: 12px !important;
        margin: 8px !important;
    }

    .converter-header {
        padding: 16px 12px !important;
        margin-bottom: 16px !important;
    }

    .converter-header h1 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .converter-header p {
        font-size: 14px !important;
    }

    .converter-options {
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .option-group {
        width: 100% !important;
    }

    .option-group h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .option-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .option-btn {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    .file-drop-zone {
        padding: 20px 12px !important;
        margin-bottom: 16px !important;
    }

    .file-drop-zone h3 {
        font-size: 16px !important;
    }

    .file-drop-zone p {
        font-size: 13px !important;
    }

    .file-list {
        margin-bottom: 16px !important;
    }

    .file-item {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .file-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .file-name {
        font-size: 13px !important;
    }

    .file-size {
        font-size: 11px !important;
    }

    .success-message {
        padding: 16px !important;
        margin: 16px 0 !important;
    }

    .success-message h3 {
        font-size: 18px !important;
    }

    .success-message p {
        font-size: 14px !important;
    }

    .btn-download {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* PDF Tools Mobile Styles */
@media (max-width: 768px) {
    .pdf-tool-container {
        padding: 12px !important;
        margin: 8px !important;
    }

    .upload-area {
        padding: 20px 12px !important;
        margin-bottom: 16px !important;
    }

    .upload-area h3 {
        font-size: 16px !important;
    }

    .upload-area p {
        font-size: 13px !important;
    }

    .file-list-item {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .file-controls {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .file-controls button {
        width: 100% !important;
        padding: 8px !important;
        font-size: 13px !important;
    }
}

/* Calculator Tools Mobile Styles */
@media (max-width: 768px) {
    .calculator-container {
        padding: 12px !important;
        margin: 8px !important;
    }

    .calculator-header {
        padding: 16px 12px !important;
        margin-bottom: 16px !important;
    }

    .calculator-header h1 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .calculator-header p {
        font-size: 14px !important;
    }

    .input-section {
        margin-bottom: 20px !important;
    }

    .input-section h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .date-inputs {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .date-input-group {
        width: 100% !important;
    }

    .date-input-group label {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .date-input-group input {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
    }

    .result-section {
        padding: 16px 12px !important;
        margin-top: 20px !important;
    }

    .result-section h3 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    .result-item {
        padding: 8px 0 !important;
        margin-bottom: 8px !important;
    }

    .result-label {
        font-size: 13px !important;
    }

    .result-value {
        font-size: 16px !important;
    }
}

/* CSV Tools Mobile Styles */
@media (max-width: 768px) {
    .csv-tool-container {
        padding: 12px !important;
        margin: 8px !important;
    }

    .csv-header {
        padding: 16px 12px !important;
        margin-bottom: 16px !important;
    }

    .csv-header h1 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .csv-header p {
        font-size: 14px !important;
    }

    .upload-section {
        margin-bottom: 20px !important;
    }

    .upload-section h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .file-input-wrapper {
        margin-bottom: 16px !important;
    }

    .file-input-wrapper input[type="file"] {
        width: 100% !important;
        padding: 8px !important;
        font-size: 14px !important;
    }

    .sheets-list {
        margin-bottom: 16px !important;
    }

    .sheet-item {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .sheet-controls {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .sheet-controls button {
        width: 100% !important;
        padding: 8px !important;
        font-size: 13px !important;
    }

    .action-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .action-buttons button {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* --- PicoPuff Global Page Loader (enhanced with dark background) --- */
.pp-loader{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,20,20,0.85);backdrop-filter:blur(8px) saturate(120%);z-index:2147483000}
.pp-loader.show{display:flex}
.pp-loader::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(40,40,40,0.4) 50%,rgba(0,0,0,0.6) 100%);backdrop-filter:blur(4px);z-index:-1}
.pp-loader::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,0.05) 0%,transparent 70%);z-index:-1}
.pp-lens{width:108px;height:108px;border-radius:999px;background:linear-gradient(135deg,#fff,#f8fafc);border:2px solid #e5e7eb;box-shadow:0 8px 30px rgba(0,0,0,0.2);position:relative;display:flex;align-items:center;justify-content:center}
.pp-lens::after{content:"";position:absolute;right:-14px;bottom:-6px;width:56px;height:12px;border-radius:6px;background:#111827;opacity:.9;transform:rotate(35deg);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pp-dots{display:flex;gap:10px}
.pp-dot{width:14px;height:14px;border-radius:999px;background:#667eea;animation:pp-dot 1.2s infinite ease-in-out}
.pp-dot:nth-child(2){animation-delay:.15s;background:#8b5cf6}
.pp-dot:nth-child(3){animation-delay:.3s;background:#764ba2}
@keyframes pp-dot{0%,80%,100%{transform:translateY(0);opacity:.85}40%{transform:translateY(-8px);opacity:1}}

/* Night stars */
#pp-stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;animation:starsFade 8s ease-in-out infinite}
.pp-star{position:absolute;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 8px rgba(255,255,255,.7), 0 0 16px rgba(255,255,255,.4);animation:pp-twinkle 2.6s infinite ease-in-out}
@keyframes pp-twinkle{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes starsFade{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.pp-shooting-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,.9);animation:pp-shoot 1.6s ease-out forwards}
@keyframes pp-shoot{0%{opacity:0;transform:translate(0,0) scale(1)}8%{opacity:1}100%{opacity:0;transform:translate(260px,120px) scale(0.9)}}

/* Night comets: brighter head with soft trail */
.pp-comet{position:absolute;width:var(--size,4px);height:var(--size,4px);border-radius:50%;background:var(--head,#fff);box-shadow:0 0 12px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.6);animation:pp-comet-fly var(--dur,3.8s) ease-out forwards}
.pp-comet::after{content:"";position:absolute;right:calc(var(--size,4px));top:1px;width:var(--trailW,160px);height:2px;background:linear-gradient(90deg, rgba(255,255,255,0), var(--trail, rgba(255,255,255,.75)));filter:blur(1.2px);opacity:.9}
@keyframes pp-comet-fly{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx,420px), var(--dy,180px)) scale(0.95)}}

/* Dawn: soft mist */
#pp-dawn{position:fixed;inset:0;pointer-events:none;z-index:0}
.pp-mist{position:absolute;width:180px;height:80px;filter:blur(22px);border-radius:50%;background:rgba(255,255,255,0.06);animation:pp-mist-drift 10s ease-in-out infinite}
@keyframes pp-mist-drift{0%{transform:translateX(-10px) translateY(0);opacity:.08}50%{transform:translateX(30px) translateY(-8px);opacity:.14}100%{transform:translateX(60px) translateY(0);opacity:.08}}

/* Morning: gentle pollen */
#pp-morning{position:fixed;inset:0;pointer-events:none;z-index:0}
.pp-pollen{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 6px rgba(255,255,255,.25);animation:pp-pollen 7s linear infinite}
@keyframes pp-pollen{0%{transform:translateY(0) translateX(0);opacity:.4}50%{transform:translateY(-60px) translateX(12px);opacity:.8}100%{transform:translateY(-120px) translateX(0);opacity:.1}}

/* Midday: shimmer motes */
#pp-midday{position:fixed;inset:0;pointer-events:none;z-index:0}
.pp-shimmer{position:absolute;width:4px;height:10px;border-radius:10px;background:rgba(255,255,255,.35);filter:blur(0.5px);animation:pp-shimmer-up 6s ease-in-out infinite}
@keyframes pp-shimmer-up{0%{transform:translateY(0) scaleY(0.8);opacity:.0}30%{opacity:.5}60%{opacity:.9}100%{transform:translateY(-120px) scaleY(1);opacity:.0}}

/* Golden hour: warm sparkles */
#pp-golden{position:fixed;inset:0;pointer-events:none;z-index:0}
.pp-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle, rgba(255,223,140,0.9) 0%, rgba(255,223,140,0.0) 70%);animation:pp-sparkle 3.4s ease-in-out infinite}
@keyframes pp-sparkle{0%{opacity:.2;transform:scale(0.8)}50%{opacity:1;transform:scale(1.25)}100%{opacity:.2;transform:scale(0.8)}}

/* Dusk: fireflies */
#pp-dusk{position:fixed;inset:0;pointer-events:none;z-index:0}
.pp-firefly{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,140,0.95) 0%, rgba(255,255,140,0.0) 70%);animation:pp-firefly 4.6s ease-in-out infinite}
@keyframes pp-firefly{0%{transform:translate(0,0);opacity:.3}25%{transform:translate(20px,-6px);opacity:.9}50%{transform:translate(6px,-2px);opacity:.6}75%{transform:translate(-8px,4px);opacity:.9}100%{transform:translate(0,0);opacity:.3}}

/* Gentle background breathe overlay (very subtle) */
#pp-breathe{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--pp-breathe-op,.08);mix-blend-mode:normal}
#pp-breathe::before,#pp-breathe::after{content:"";position:absolute;inset:-10%;pointer-events:none;border-radius:12px;opacity:.08}
#pp-breathe::before{background:linear-gradient(135deg, var(--pp-breathe1a,#ffffff) 0%, var(--pp-breathe2a,#ffffff) 100%);animation:pp-breathe-shift 22s ease-in-out infinite}
#pp-breathe::after{background:linear-gradient(135deg, var(--pp-breathe1b,#ffffff) 0%, var(--pp-breathe2b,#ffffff) 100%);animation:pp-breathe-shift-2 26s ease-in-out infinite}
@keyframes pp-breathe-shift{0%{transform:translate3d(-2%, -2%, 0) rotate(-0.6deg)}50%{transform:translate3d(2%, 2%, 0) rotate(0.6deg)}100%{transform:translate3d(-2%, -2%, 0) rotate(-0.6deg)}}
@keyframes pp-breathe-shift-2{0%{transform:translate3d(2%, -1%, 0) rotate(0.6deg)}50%{transform:translate3d(-2%, 1%, 0) rotate(-0.4deg)}100%{transform:translate3d(2%, -1%, 0) rotate(0.6deg)}}
/* Pop-in loader (colored blocks) */
.pp-popins{display:flex;gap:12px;align-items:flex-end}
.pp-popin{width:18px;height:18px;border-radius:6px;opacity:.95;animation:pp-popin 0.5s ease-in-out 5}
.pp-popin img{width:100%;height:100%;object-fit:contain;border-radius:4px;}
.pp-popin:nth-child(1){background:#667eea;animation-delay:.00s}
.pp-popin:nth-child(2){background:#8b5cf6;animation-delay:.08s}
.pp-popin:nth-child(3){background:#764ba2;animation-delay:.16s}
.pp-popin:nth-child(4){background:#10b981;animation-delay:.24s}
.pp-popin:nth-child(5){background:#f59e0b;animation-delay:.32s}
@keyframes pp-popin{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.08)}60%{transform:translateY(-6px)}100%{transform:translateY(0) scale(1)}}

/* --- Global Glass Cards (subtle translucency + micro-shine) --- */
:is(.main-card,
    .converter-card,
    .result-card,
    .iq-card,
    .option-section,
    .advanced-panel,
    .download-section,
    .tools-grid .tool-card){
  background: rgba(255,255,255,1.0) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,1.0) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
  position: relative;
  overflow: hidden;
}

:is(.main-card,
    .converter-card,
    .result-card,
    .iq-card,
    .option-section,
    .advanced-panel,
    .download-section,
    .tools-grid .tool-card)::before{
  content: '';
  position: absolute;
  top: -120%;
  left: -50%;
  width: 200%;
  height: 240%;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,var(--pp-shine-alpha,0.08)) 49%, rgba(255,255,255,0) 65%);
  transform: translateX(-60%);
  animation: pp-glass-shine 7.2s ease-in-out infinite;
}

@keyframes pp-glass-shine {
  0% { transform: translateX(-60%); opacity: .35; }
  50%{ transform: translateX(0%);   opacity: .55; }
  100%{ transform: translateX(60%);  opacity: .35; }
}

/* Gentle lift on hover/focus (desktop only) */
@media (hover: hover) and (pointer: fine){
  :is(.main-card,
      .converter-card,
      .result-card,
      .iq-card,
      .option-section,
      .advanced-panel,
      .download-section,
      .tools-grid .tool-card):hover{
    transform: translateY(-2px);
    transition: transform .25s ease;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :is(.main-card,
      .converter-card,
      .result-card,
      .iq-card,
      .option-section,
      .advanced-panel,
      .download-section,
      .tools-grid .tool-card)::before{
    animation: none;
    opacity: .06;
  }
}

/* Ensure logo inline SVGs size nicely */
.logo-container .logo-svg { display:block; width:128px; height:auto; }
.nav-cloud-img { display:block; width:24px; height:auto; }

/* Emoji cloud logo styling */
.logo-container .logo-cloud {
  font-family: "Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji", system-ui, sans-serif;
  font-size: 96px;
  line-height: 1;
  background: transparent !important;
  display: inline-block;
  animation: pp-logo-float 6s ease-in-out infinite;
}
.nav-logo .nav-cloud {
  font-family: "Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji", system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  background: transparent !important;
  animation: pp-logo-float 8s ease-in-out infinite;
}
/* Floating cloud logo on transparent background */
.logo-container { background: transparent !important; }
.logo-container .logo-cloud::after { content: none !important; }
.logo-container .logo-svg {
  display: block;
  width: 128px;
  height: auto;
  background: transparent !important;
  animation: pp-logo-float 6s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}
.nav-cloud-img {
  display: block;
  width: 24px;
  height: auto;
  background: transparent !important;
  animation: pp-logo-float 8s ease-in-out infinite;
}
@keyframes pp-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Image Converter — higher quality buttons (scoped) */
.image-converter-container .btn-convert,
.image-converter-container .download-btn,
.image-converter-container #downloadBtnMain {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: 1.5px solid rgba(102,126,234,0.55);
  border-radius: 14px;
  padding: 14px 28px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 8px 20px rgba(102,126,234,0.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.image-converter-container .btn-convert:hover,
.image-converter-container .download-btn:hover,
.image-converter-container #downloadBtnMain:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(102,126,234,0.38);
  filter: brightness(1.02);
}
.image-converter-container .btn-convert:active,
.image-converter-container .download-btn:active,
.image-converter-container #downloadBtnMain:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 6px 16px rgba(102,126,234,0.26);
}
.image-converter-container .btn-convert:focus-visible,
.image-converter-container .download-btn:focus-visible,
.image-converter-container #downloadBtnMain:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.25), 0 8px 20px rgba(102,126,234,0.28);
}
.image-converter-container .btn-convert:disabled,
.image-converter-container .download-btn:disabled,
.image-converter-container #downloadBtnMain:disabled {
  opacity: .6; cursor: not-allowed; transform: none; box-shadow: 0 4px 12px rgba(102,126,234,0.18);
}

.image-converter-container .btn-clear,
.image-converter-container .btn-secondary,
.image-converter-container .action-btn {
  background: rgba(255,255,255,0.9);
  color: #374151;
  border: 1.5px solid rgba(148,163,184,0.6);
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
}
.image-converter-container .btn-clear:hover,
.image-converter-container .btn-secondary:hover,
.image-converter-container .action-btn:hover {
  background: #111827;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(17,24,39,0.25);
}
.image-converter-container .btn-clear:active,
.image-converter-container .btn-secondary:active,
.image-converter-container .action-btn:active {
  transform: translateY(0) scale(.985);
}
.image-converter-container .btn-clear:focus-visible,
.image-converter-container .btn-secondary:focus-visible,
.image-converter-container .action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(148,163,184,0.35), 0 8px 18px rgba(15,23,42,0.12);
}
.image-converter-container .action-btn.remove {
  background: #ef4444; color: #fff; border-color: rgba(239,68,68,0.8);
}
.image-converter-container .action-btn.remove:hover { box-shadow: 0 10px 20px rgba(239,68,68,0.28); }
.image-converter-container .action-btn.remove:focus-visible { box-shadow: 0 0 0 3px rgba(239,68,68,0.35); }
/* Space dust (tiny pin dots) */
.pp-dust{position:absolute;width:1px;height:1px;border-radius:50%;background:rgba(255,255,255,.25);opacity:.25;animation:pp-dust-fade 6s ease-in-out infinite}
@keyframes pp-dust-fade{0%{opacity:.15}50%{opacity:.3}100%{opacity:.15}}

/* Support Text Under QR Code */
.qr-support-text {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Comfortaa', cursive;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 12px 24px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 999;  /* Change from 1000 to 999 to stay below critical UI elements */
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateX(-50%) translateY(20px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px) saturate(120%);
}

.qr-support-text:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateX(-50%) translateY(-5px) scale(1.05);
    color: #ffffff;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.8px;
    font-weight: 700;
}

.qr-support-text:active {
    transform: translateX(-50%) translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.qr-support-text.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dream mode - enhance support text */
.dream-mode-active .qr-support-text {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dream-mode-active .qr-support-text:hover {
    background: linear-gradient(135deg, #ff9ff3 0%, #54a0ff 25%, #5f27cd 50%, #00d2d3 75%, #ff9f43 100%);
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 40px rgba(255, 159, 243, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateX(-50%) translateY(-8px) scale(1.08);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
    letter-spacing: 1px;
    font-weight: 800;
}

/* Large Support Card */
.large-support-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    border-radius: 24px;
    padding: 32px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    font-family: 'Comfortaa', cursive;
    max-width: 400px;
    width: 90%;
}

.large-support-card.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.large-support-card .support-card-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: white;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-support-card .support-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.large-support-card .support-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.large-support-card .support-card-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.4;
}

.large-support-card .support-card-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.large-support-card .support-card-close:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #333;
    transform: scale(1.1);
}

/* Dream mode styling for large support card */
.dream-mode-active .large-support-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dream-mode-active .large-support-card .support-card-title {
    color: #f5f5f5;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dream-mode-active .large-support-card .support-card-subtitle {
    color: #ccc;
}

.dream-mode-active .large-support-card .support-card-close {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

.dream-mode-active .large-support-card .support-card-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #f5f5f5;
}



@keyframes daySunRays {
    0% {
        transform: translateX(-100%) translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateX(100%) translateY(100%);
        opacity: 0;
    }
}

/* ===== NEW CLOUD SYSTEM (From Demo) ===== */
.clouds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
}

.cloud-wrapper {
    position: absolute;
    animation: float 20s infinite ease-in-out;
    will-change: transform, opacity;
    pointer-events: auto;
}

.cloud {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    animation: depthBreathing 4s infinite ease-in-out;
    will-change: transform, filter;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.6s ease-out, background 0.3s ease;
}

/* Hover effect to show interactivity */
.cloud:hover {
    background: rgba(255, 255, 255, 0.5);
}

.cloud:active {
    background: rgba(255, 255, 255, 0.7);
}

/* Make clouds touchable */
.cloud-wrapper {
    pointer-events: auto;
}

/* Pop/dissolve animation - slower, more graceful */
@keyframes popDissolve {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0.8px);
    }
    30% {
        transform: scale(1.4);
        opacity: 0.8;
        filter: blur(4px);
    }
    70% {
        transform: scale(1.6);
        opacity: 0.4;
        filter: blur(8px);
    }
    100% {
        transform: scale(0.2);
        opacity: 0;
        filter: blur(12px);
    }
}

.cloud.popping {
    animation: popDissolve 1.4s ease-out forwards;
    pointer-events: none;
}

/* Exit dissolve animation - slower */
@keyframes exitDissolve {
    0% {
        opacity: 1;
        filter: blur(0.8px);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        filter: blur(6px);
        transform: scale(0.7);
    }
}

.cloud.exiting {
    animation: exitDissolve 1.2s ease-out forwards;
}

/* Original cloud positions - well distributed */
.cloud-wrapper:nth-child(1) {
    width: 120px;
    height: 50px;
    top: 25%;
    left: -10%;
    animation-delay: 0s;
}

.cloud-wrapper:nth-child(2) {
    width: 180px;
    height: 70px;
    top: 35%;
    left: -15%;
    animation-delay: 3s;
}

.cloud-wrapper:nth-child(3) {
    width: 150px;
    height: 60px;
    top: 60%;
    left: -12%;
    animation-delay: 6s;
}

.cloud-wrapper:nth-child(4) {
    width: 100px;
    height: 40px;
    top: 20%;
    left: -8%;
    animation-delay: 9s;
}

.cloud-wrapper:nth-child(5) {
    width: 160px;
    height: 65px;
    top: 45%;
    left: -18%;
    animation-delay: 12s;
}

.cloud-wrapper:nth-child(6) {
    width: 140px;
    height: 55px;
    top: 70%;
    left: -14%;
    animation-delay: 15s;
}

/* Stagger the depth breathing slightly for each cloud */
.cloud-wrapper:nth-child(1) .cloud { animation-delay: 0s; }
.cloud-wrapper:nth-child(2) .cloud { animation-delay: 0.5s; }
.cloud-wrapper:nth-child(3) .cloud { animation-delay: 1s; }
.cloud-wrapper:nth-child(4) .cloud { animation-delay: 1.5s; }
.cloud-wrapper:nth-child(5) .cloud { animation-delay: 2s; }
.cloud-wrapper:nth-child(6) .cloud { animation-delay: 2.5s; }

/* Original float animation - prevents clumping */
@keyframes float {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0.8;
    }
    25% {
        transform: translateX(25vw) translateY(-10px);
        opacity: 0.9;
    }
    50% {
        transform: translateX(50vw) translateY(-20px);
        opacity: 1.0;
    }
    75% {
        transform: translateX(75vw) translateY(-10px);
        opacity: 0.9;
    }
    100% {
        transform: translateX(100vw) translateY(0);
        opacity: 0.8;
    }
}

/* Z-axis depth breathing - faster, with minimum blur for softer look */
@keyframes depthBreathing {
    0% {
        filter: blur(0.8px);
        transform: scale(1);
    }
    50% {
        filter: blur(3px);
        transform: scale(0.92);
    }
    100% {
        filter: blur(0.8px);
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Hide some clouds on mobile */
    .cloud-wrapper:nth-child(4),
    .cloud-wrapper:nth-child(5),
    .cloud-wrapper:nth-child(6) {
        display: none;
    }
}

/*! PATCH: stability-speed v1 */
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }
html.anim-disabled .microanim{animation:none!important}
html:not(.anim-active) .microanim--deferred{visibility:hidden}
:root{--tap-min:44px}
:where(button,a,.tap){min-height:var(--tap-min);min-width:var(--tap-min)}
:where(img){image-rendering:auto}
.bg-fixed-ios{background-attachment:scroll!important}
/* Loader pulse + sparkle (non-destructive) */
@keyframes loaderPulse{0%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1)}100%{opacity:.55;transform:scale(.98)}}
.loader{will-change:transform,opacity}
.spark{outline:2px solid currentColor;outline-offset:2px;transition:outline-offset .2s}
/* Auditor UI (only when ?audit=1) */
#audit-panel{position:fixed;right:8px;bottom:8px;z-index:99999;font:12px/1.35 ui-monospace,monospace;background:rgba(0,0,0,.85);color:#fff;padding:10px 12px;border-radius:10px;max-width:92vw;max-height:65vh;overflow:auto}
#audit-panel h3{margin:0 0 6px;font-size:12px}
#audit-panel .ok{color:#7CFC00}.warn{color:#FFD700}.bad{color:#FF6B6B}
#audit-panel table{width:100%;border-collapse:collapse}
#audit-panel td,#audit-panel th{border-bottom:1px solid #333;padding:4px 6px;text-align:left}

/* Removed duplicate batch and order badge styles - using unified badge system above */

/*! PATCH: stability-speed v1 */
[data-defer-visibility]{content-visibility:auto;contain-intrinsic-size:800px 600px}
:where(img,video){max-width:100%;height:auto}
@font-face{font-family:SystemUIFallback;src:local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Ubuntu");font-display:swap}

/*! PATCH: batch-order-pills v1 */
.pill-batch,.pill-order{display:inline-block;font-size:.75rem;line-height:1;padding:.15rem .4rem;border-radius:999px;border:1px solid currentColor;opacity:.85;margin-left:.35rem;white-space:nowrap}

/*! PATCH: tools-grid-structure v1 */
/* Tools Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 1;
}

.tool-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px) saturate(120%);
    border-radius: 20px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
    display: flex;
    flex-direction: column;
    /* Dynamic height based on content */
}

.tool-card:nth-child(1) { animation-delay: 0.1s; }
.tool-card:nth-child(2) { animation-delay: 0.2s; }
.tool-card:nth-child(3) { animation-delay: 0.3s; }
.tool-card:nth-child(4) { animation-delay: 0.4s; }
.tool-card:nth-child(5) { animation-delay: 0.5s; }
.tool-card:nth-child(6) { animation-delay: 0.6s; }
.tool-card:nth-child(7) { animation-delay: 0.7s; }
.tool-card:nth-child(8) { animation-delay: 0.8s; }
.tool-card:nth-child(9) { animation-delay: 0.9s; }
.tool-card:nth-child(10) { animation-delay: 1.0s; }
.tool-card:nth-child(11) { animation-delay: 1.1s; }
.tool-card:nth-child(12) { animation-delay: 1.2s; }

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.tool-card:hover::before {
    transform: scaleX(1);
}

.tool-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
}

.tool-icon-wrapper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tool-icon {
    font-size: 64px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}

.tool-card:hover .tool-icon {
    transform: scale(1.1) rotate(5deg);
}

.tool-body {
    padding: 24px;
    flex: 1; /* Allow body to grow and push footer to bottom */
    display: flex;
    flex-direction: column;
}

.tool-title {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
}

.tool-desc {
    font-size: 14px;
    color: #718096;
    line-height: 1.7;
    margin-bottom: 16px;
    font-weight: 400;
    flex: 1; /* Allow description to grow and push footer down */
}

/* Removed duplicate badge styles - using unified badge system above */