*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  
  html { scroll-behavior: smooth; font-size: 16px; }
  
  body {
    font-family: var(--ff-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
  }

  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; height: auto; }

  
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: var(--rose-50); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--rose-400), var(--rose-600));
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--rose-600); }

  
  ::selection { background: rgba(233,30,140,0.18); color: var(--rose-800); }

  
  .petal-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  }
  .petal {
    position: absolute;
    width: var(--pw, 12px); height: var(--pw, 12px);
    background: radial-gradient(circle at 30% 30%, rgba(244,143,177,0.6), rgba(233,30,140,0.2));
    border-radius: 50% 0 50% 0;
    opacity: 0;
    animation: petalFall var(--pd, 12s) ease-in var(--pdelay, 0s) infinite;
    transform-origin: center;
  }
  @keyframes petalFall {
    0%   { opacity:0; transform: translateY(-20px) rotate(0deg) scale(0.5); }
    5%   { opacity: 0.7; }
    85%  { opacity: 0.4; }
    100% { opacity:0; transform: translateY(110vh) rotate(var(--pr, 360deg)) scale(0.8) translateX(var(--px, 40px)); }
  }

  
  .sparkle-wrap { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .sparkle {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--rose-400);
    border-radius: 50%;
    animation: sparklePop var(--sd, 3s) ease-in-out var(--sdl, 0s) infinite;
  }
  @keyframes sparklePop {
    0%, 100% { opacity:0; transform: scale(0); }
    50% { opacity:1; transform: scale(1); }
  }

  
  @keyframes fadeUp {
    from { opacity:0; transform: translateY(24px); }
    to   { opacity:1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
  }
  @keyframes slideLeft {
    from { opacity:0; transform: translateX(24px); }
    to   { opacity:1; transform: translateX(0); }
  }
  @keyframes scaleIn {
    from { opacity:0; transform: scale(0.92); }
    to   { opacity:1; transform: scale(1); }
  }
  @keyframes shimmerPink {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes heartBeat {
    0%,100% { transform: scale(1); }
    14%     { transform: scale(1.15); }
    28%     { transform: scale(1); }
    42%     { transform: scale(1.1); }
    70%     { transform: scale(1); }
  }
  @keyframes float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
  }
  @keyframes rotateHue {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(30deg); }
  }
  @keyframes ribbonWave {
    0%,100% { transform: skewX(0deg); }
    25% { transform: skewX(2deg); }
    75% { transform: skewX(-2deg); }
  }

  
  .reveal {
    opacity:0; transform: translateY(32px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.visible { opacity:1; transform: translateY(0); }
  .reveal-left {
    opacity:0; transform: translateX(-32px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal-left.visible { opacity:1; transform: translateX(0); }
  .reveal-scale {
    opacity:0; transform: scale(0.9);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .reveal-scale.visible { opacity:1; transform: scale(1); }

  
  .glass {
    background: var(--grad-glass);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
  }
  
  
  .text-shimmer {
    background: linear-gradient(90deg,
      var(--rose-600) 0%,
      var(--rose-400) 30%,
      #ffb3d1 50%,
      var(--rose-400) 70%,
      var(--rose-600) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerPink 4s linear infinite;
  }

  
  .badge-pink {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--grad-main);
    color: #fff; font-family: var(--ff-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    padding: 5px 14px; border-radius: var(--r-full);
    box-shadow: var(--shadow-sm);
    animation: heartBeat 3s ease-in-out infinite;
  }

  
  .ribbon-83 {
    background: var(--grad-main);
    color: #fff;
    text-align: center;
    padding: 12px 0;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    animation: ribbonWave 6s ease-in-out infinite;
  }
  .ribbon-83::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: shimmerPink 3s linear infinite;
    background-size: 200% 100%;
  }
  
  
  .heart-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='15' y='35' font-size='16' opacity='0.04' fill='%23e91e8c'%3E💗%3C/text%3E%3C/svg%3E");
  }

        
  

        
        @keyframes ios-spring {
            0% { transform: scale(1); }
            40% { transform: scale(0.92); }
            70% { transform: scale(1.04); }
            100% { transform: scale(1); }
        }
        @keyframes ios-fade-up {
            from { opacity: 0; transform: translateY(18px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        :root {

            
            --rose-50:  #fff0f5;
            --rose-100: #fce4ec;
            --rose-200: #f8bbd0;
            --rose-300: #f48fb1;
            --rose-400: #f06292;
            --rose-500: #e91e8c;
            --rose-600: #c2185b;
            --rose-700: #880e4f;
            --rose-800: #560027;
            --rose-900: #3d0020;
            --cream:    #fffaf5;
            --blush:    #fdf2f7;
            --petal:    #fde8f1;
            --ink:      #3d0020;
            --grad-main: linear-gradient(135deg, #880e4f 0%, #e91e8c 45%, #f48fb1 100%);
            --grad-dark: linear-gradient(135deg, #560027 0%, #880e4f 50%, #c2185b 100%);
            --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,240,248,0.4) 100%);
            --shadow-xs: 0 2px 8px rgba(233,30,140,0.08);
            --shadow-sm: 0 4px 16px rgba(194,24,91,0.12);
            --shadow-md: 0 8px 32px rgba(194,24,91,0.16);
            --shadow-lg: 0 16px 56px rgba(136,14,79,0.2);
            --ff-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
            --ff-body:    'Nunito', 'DM Sans', system-ui, sans-serif;
            --ff-mono:    'Fira Code', 'Space Mono', monospace;
            --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
            --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --r-full: 9999px;
            --bg: #fce4ec;
            --surface: #fdf0f5;
            --surface2: #fce4ec;
            --accent: #e91e8c;
            --accent2: #f48fb1;
            --text: #3d0020;
            --muted: #c2185b;
            --border: rgba(233, 30, 140, 0.18);
            --glass: rgba(255, 192, 203, 0.12);
        }

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

        html {
            scroll-behavior: smooth;
        }

        
        .section:not(#home):not(#camera) {
            content-visibility: auto;
            contain-intrinsic-size: 0 600px;
        }

        
        .filter-grid-cam,
        .frame-grid,
        #gallery-grid {
            contain: layout style;
        }

        
        @media (max-width: 768px) {
            
            header {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(252,228,236,0.95) !important;
            }
            .nav-more-dropdown {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(40,0,20,0.98) !important;
            }
            nav button:hover, nav button.active {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            .btn-ghost {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(255,255,255,0.06) !important;
            }
            .upload-area {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            
            .hero-bg-circle {
                animation: none !important;
                filter: none !important;
                opacity: 0.06 !important;
            }
            .c1, .c2, .c3 { animation: none !important; filter: none !important; }
            
            body::before { display: none !important; }
            
            .hero-grid-overlay { display: none !important; }
            
            .home-particle { animation: none !important; display: none !important; }
            
            .logo-3d::after { animation: none !important; }
            .logo-3d .logo-part1,
            .logo-3d .logo-italic,
            .logo-3d .logo-part2 {
                animation: none !important;
                background-position: 0% 50% !important;
            }
            
            .feat-card, .gallery-item, .btn-primary, .btn-ghost { transition-duration: 0.12s !important; }
            
            .feat-card:hover { transform: none !important; }
            .gallery-item:hover img { transform: none !important; }
            
            .hero-bg-circle, .home-particle { will-change: auto !important; }
            
            --ios-blur: 0px;
            
            .camera-view { box-shadow: 0 4px 16px rgba(136,14,79,0.4) !important; }
            
            #cam-fullscreen-overlay video { will-change: auto !important; }
            
            .cam-perm-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
            
            .filter-grid-cam { contain: layout style !important; }
            
            #frame-preview-overlay { display: none !important; }
        }
        
        @media (hover: none) {
            .feat-card:hover { transform: none !important; box-shadow: none !important; }
            .gallery-item:hover img { transform: none !important; }
            .btn-primary:hover { transform: none !important; }
            .btn-ghost:hover { transform: none !important; }
        }

        body {
            font-family: var(--ff-body);
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4t5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29lZWVjY2Mi1ww3AAAADHRSTlMATt3t7u7u7u7u7u5Rb4W0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAI0lEQVRIie3BMQEAAADCoPVP7WsIoAAAAAAAAAAAAAAAeAMBxAABkZAAAAAASUVORK5CYII=");
            pointer-events: none;
            z-index: 9999;
            opacity: 0.025;
            will-change: auto;
        }

        
    
    #womens-day-banner {
      position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
      background: linear-gradient(90deg, #880e4f, #e91e8c, #f48fb1, #e91e8c, #880e4f);
      background-size: 300% 100%;
      animation: wdBannerFlow 4s ease-in-out infinite;
      padding: 10px 0;
      text-align: center;
      font-family: var(--ff-body);
      font-size: 0.9rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.06em;
      box-shadow: 0 2px 20px rgba(233,30,140,0.5);
    }
    @keyframes wdBannerFlow {
      0%,100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    #womens-day-banner .wd-hearts {
      display: inline-block; margin: 0 12px;
      animation: wdHeartBeat 1.2s ease-in-out infinite;
    }
    @keyframes wdHeartBeat {
      0%,100% { transform: scale(1); }
      50% { transform: scale(1.3); }
    }
    #womens-day-banner .wd-close {
      position: absolute; right: 18px; top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.2); border: none;
      border-radius: 50%; width: 22px; height: 22px;
      color: #fff; cursor: pointer; font-size: 12px;
      display: flex; align-items: center; justify-content: center;
    }
    body { padding-top: 40px; }

        
        ::-webkit-scrollbar {
            width: 4px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 2px;
        }

        
        header {
            position: fixed;
            top: 12px;
            left: 0;
            right: 0;
            z-index: 100;
            padding: 22px 92px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(252, 228, 236, 0.88);
            backdrop-filter: blur(var(--ios-blur)) saturate(1.8);
            -webkit-backdrop-filter: blur(var(--ios-blur)) saturate(1.8);
            border-bottom: 1px solid var(--ios-glass-border);
            box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(233,30,140,0.12);
            border-radius: 35px;
        }

        .logo {
            font-family: var(--ff-display);
            font-size: 1.4rem;
            letter-spacing: 0.05em;
            text-decoration: none;
            position: relative;
            display: inline-block;
        }

        .logo span {
            font-style: italic;
        }

        
        .logo-3d {
            display: inline-block;
            position: relative;
            cursor: pointer;
        }

        .logo-3d .logo-part1,
        .logo-3d .logo-italic,
        .logo-3d .logo-part2 {
            font-family: var(--ff-display);
            background: linear-gradient(
                135deg,
                #FF85C2 0%,
                #e91e8c 20%,
                #f48fb1 40%,
                #c2185b 55%,
                #ff69b4 70%,
                #e91e8c 80%,
                #FF85C2 100%
            );
            background-size: 300% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 2px 4px rgba(233,30,140,0.4));
            animation: gold-gradient-flow 6s ease-in-out infinite; 
        }

        .logo-3d .logo-italic {
            font-style: italic;
        }

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

        
        .logo-3d::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(
                105deg,
                transparent 30%,
                rgba(255,105,180,0.85) 50%,
                transparent 70%
            );
            animation: logo-shimmer 5s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes logo-shimmer {
            0%, 70%, 100% { left: -100%; opacity: 0; }
            72% { left: -100%; opacity: 1; }
            84% { left: 150%; opacity: 1; }
            86%, 100% { left: 150%; opacity: 0; }
        }

        .logo-3d:hover .logo-part1,
        .logo-3d:hover .logo-italic,
        .logo-3d:hover .logo-part2 {
            filter: drop-shadow(0 0 12px rgba(255, 105, 180, 0.6)) drop-shadow(0 2px 4px rgba(233,30,140,0.4));
            animation: gold-gradient-flow 1.5s ease-in-out infinite, gold-3d-tilt 0.3s ease;
        }

        @keyframes gold-3d-tilt {
            0% { transform: perspective(300px) rotateX(0deg); }
            50% { transform: perspective(300px) rotateX(-3deg) scale(1.02); }
            100% { transform: perspective(300px) rotateX(0deg); }
        }

        nav {
            display: flex;
            gap: 8px;
        }

        nav button {
            background: transparent;
            border: 1px solid transparent;
            color: var(--muted);
            padding: 8px 16px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        nav button:active {
            transform: scale(0.93);
            transition: transform 0.1s;
        }

        nav button svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            transition: transform 0.3s;
        }

        nav button:hover svg,
        nav button.active svg {
            transform: scale(1.2);
        }

        nav button:hover,
        nav button.active {
            border-color: rgba(233,30,140,0.25);
            color: var(--accent);
            background: rgba(233,30,140,0.10);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 2px 12px rgba(233,30,140,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
        }

        
        .nav-more-wrap {
            position: relative;
        }

        .nav-more-btn {
            background: transparent;
            border: 1px solid transparent;
            color: var(--muted);
            padding: 8px 18px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .nav-more-btn svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

        .nav-more-caret {
            transition: transform 0.3s;
        }

        .nav-more-btn:hover,
        .nav-more-btn.active {
            border-color: var(--border);
            color: var(--accent);
            background: var(--glass);
            transform: translateY(-1px);
        }

        .nav-more-btn.open .nav-more-caret {
            transform: rotate(180deg);
        }

        .nav-more-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 200px;
            background: rgba(255,240,248,0.92);
            backdrop-filter: blur(var(--ios-blur)) saturate(1.8);
            -webkit-backdrop-filter: blur(var(--ios-blur)) saturate(1.8);
            border: 0.5px solid rgba(255,255,255,0.12);
            border-radius: var(--ios-radius-md);
            padding: 8px;
            box-shadow: 0 20px 60px rgba(80,0,40,0.55), 0 4px 16px rgba(233,30,140,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95);
            transition: all 0.25s cubic-bezier(0.34,1.2,0.64,1);
            z-index: 200;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .nav-more-dropdown.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            border-radius: 25px;
        }

        .nav-more-dropdown button {
            background: transparent;
            border: none;
            color: var(--muted);
            padding: 10px 14px;
            border-radius: 10px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.85rem;
            font-weight: 500;
            width: 100%;
            text-align: left;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-more-dropdown button svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

        .nav-more-dropdown button:hover {
            background: rgba(233,30,140,0.1);
            color: var(--accent);
        }

        .nav-new-badge {
            font-size: 0.55rem;
            background: rgba(233,30,140,0.15);
            color: #e91e8c;
            border: 1px solid rgba(233,30,140,0.25);
            border-radius: 50px;
            padding: 1px 5px;
            margin-left: 2px;
        }

        @media (max-width: 600px) {
            .nav-more-dropdown {
                position: fixed;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 20px 20px 0 0;
                min-width: 100%;
                transform: translateY(20px) scale(1) !important;
            }
            .nav-more-dropdown.open {
                transform: translateY(0) scale(1) !important;
            }
        }

        
        .section {
            display: none;
            min-height: 100vh;
            padding: 100px 40px 60px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .section.active {
            display: block;
        }

        #chat.active {
            display: flex !important;
            flex-direction: column;
            height: 100vh;
            padding-bottom: 0;
        }

        #chat-messages::-webkit-scrollbar { width: 4px; }
        #chat-messages::-webkit-scrollbar-track { background: var(--bg, #fce4ec); }
        #chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        
        #home {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding-top: 120px;
            position: relative;
        }

        #home.active {
            display: flex;
        }

        .hero-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            overflow: hidden;
            background: radial-gradient(ellipse 100% 70% at 50% 100%, #fce4ec 0%, #fff0f5 50%, #ffeef5 100%);
        }

        .hero-bg-circle {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px); 
        }

        .c1 {
            width: 900px; height: 900px;
            background: radial-gradient(circle, #e91e8c 0%, #880e4f 50%, transparent 100%);
            top: -350px; left: -250px;
            opacity: 0.10;
            animation: drift 24s ease-in-out infinite; 
        }

        .c2 {
            width: 700px; height: 700px;
            background: radial-gradient(circle, #f06292 0%, #6d0040 50%, transparent 100%);
            bottom: -200px; right: -200px;
            opacity: 0.09;
            animation: drift 30s ease-in-out infinite reverse; 
        }

        .c3 {
            width: 500px; height: 500px;
            background: radial-gradient(circle, #f48fb1 0%, #c2185b 50%, transparent 100%);
            top: 45%; left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.06;
            animation: pulse 18s ease-in-out infinite; 
        }

        @keyframes drift {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33%  { transform: translate(50px, -35px) scale(1.06); }
            66%  { transform: translate(-25px, 45px) scale(0.96); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
            50%      { opacity: 0.12; transform: translate(-50%, -50%) scale(1.15); }
        }

        
        .c1, .c2, .c3 { will-change: transform; }

        
        .hero-grid-overlay {
            position: fixed; inset: 0; z-index: -1; pointer-events: none;
            background-image:
                linear-gradient(rgba(233,30,140,0.018) 1px, transparent 1px),
                linear-gradient(90deg, rgba(233,30,140,0.018) 1px, transparent 1px);
            background-size: 80px 80px;
            mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 100%);
        }

        
        .hero-vignette {
            position: fixed; inset: 0; z-index: -1; pointer-events: none;
            background: radial-gradient(ellipse 90% 80% at 50% 50%,
                transparent 40%, rgba(233,30,140,0.12) 70%, rgba(80,0,40,0.65) 100%
            );
        }

        .hero-tag {
            font-size: 0.65rem;
            letter-spacing: 0.45em;
            text-transform: uppercase;
            color: rgba(233,30,140,0.8);
            border: 1px solid rgba(233,30,140,0.2);
            padding: 8px 26px;
            border-radius: 50px;
            margin-bottom: 32px;
            animation: fadeUp 0.8s ease both;
            background: rgba(233,30,140,0.04);
            backdrop-filter: blur(16px);
            display: inline-flex; align-items: center; gap: 10px;
            box-shadow: 0 0 30px rgba(233,30,140,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .hero-tag::before {
            content: '';
            width: 5px; height: 5px; border-radius: 50%;
            background: #e91e8c;
            box-shadow: 0 0 10px rgba(233,30,140,0.9), 0 0 20px rgba(233,30,140,0.4);
            animation: blink 2.5s ease-in-out infinite;
            flex-shrink: 0;
        }
        @keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 10px rgba(233,30,140,.9)} 50%{opacity:0.2;box-shadow:none} }

        .hero-title { color: #3d0020;
            font-family: var(--ff-display);
            font-size: clamp(2.8rem, 7.5vw, 7rem);
            line-height: 1.05;
            margin-bottom: 24px;
            animation: fadeUp 0.8s 0.1s ease both;
            background: linear-gradient(135deg, #e91e8c 0%, #f48fb1 25%, #fff8dc 50%, #e91e8c 75%, #f48fb1 100%);
            background-size: 200% auto;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            animation: fadeUp 0.8s 0.1s ease both, gold-gradient-flow 6s ease-in-out infinite;
            filter: drop-shadow(0 4px 20px rgba(233,30,140,0.3));
        }
        @keyframes gold-gradient-flow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .hero-title em {
            font-style: italic;
            display: block;
            background: linear-gradient(135deg, #f48fb1, #e91e8c, #fff8dc, #b8860b, #f48fb1);
            background-size: 200% auto;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            animation: gold-em-flow 5s ease-in-out infinite;
            filter: drop-shadow(0 0 20px rgba(233,30,140,0.25));
        }
        @keyframes gold-em-flow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .hero-sub {
            color: rgba(245,235,200,0.55);
            font-size: 1.05rem;
            max-width: 480px;
            line-height: 1.8;
            margin-bottom: 44px;
            animation: fadeUp 0.8s 0.2s ease both;
        }

        .hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            justify-content: center;
            animation: fadeUp 0.8s 0.3s ease both;
        }

        .btn-primary {
            background: linear-gradient(135deg, #e91e8c, #e8c99e, #e91e8c);
            background-size: 200% auto;
            color: #fce4ec;
            border: none;
            padding: 15px 34px;
            border-radius: 50px;
            font-family: var(--ff-body);
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.03em;
            transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
            display: inline-flex;
            align-items: center;
            gap: 9px;
            box-shadow: 0 6px 30px rgba(233,30,140,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
            position: relative; overflow: hidden;
        }
        .btn-primary::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }
        .btn-primary:hover::after { transform: translateX(100%); }
        .btn-primary:active { transform: scale(0.94); transition: transform 0.12s; }
        .btn-primary svg { width: 17px; height: 17px; flex-shrink: 0; }
        .btn-primary:hover {
            background-position: right center;
            transform: translateY(-3px);
            box-shadow: 0 16px 50px rgba(233,30,140,0.45);
        }

        .btn-ghost {
            background: rgba(255,255,255,0.04);
            color: var(--text);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 14px 28px;
            border-radius: 50px;
            font-family: var(--ff-body);
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.02em;
            transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(194,24,91,0.2);
        }
        .btn-ghost:active { transform: scale(0.94); transition: transform 0.12s; }
        .btn-ghost svg { width: 16px; height: 16px; flex-shrink: 0; }
        .btn-ghost:hover {
            border-color: rgba(233,30,140,0.5);
            color: var(--accent);
            transform: translateY(-2px);
            background: rgba(233,30,140,0.07);
            box-shadow: 0 8px 24px rgba(233,30,140,0.15);
        }

        .hero-stats {
            display: flex;
            gap: 40px;
            margin-top: 72px;
            animation: fadeUp 0.8s 0.4s ease both;
        }

        .stat {
            text-align: center;
            position: relative;
        }
        .stat + .stat::before {
            content: '';
            position: absolute; left: -20px; top: 10%; bottom: 10%;
            width: 1px;
            background: linear-gradient(to bottom, transparent, rgba(233,30,140,0.2), transparent);
        }

        .stat-num {
            font-family: var(--ff-display);
            font-size: 2.2rem;
            background: linear-gradient(135deg, #f48fb1, #e91e8c, #fff8dc);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            display: block;
            filter: drop-shadow(0 2px 12px rgba(233,30,140,0.5));
        }

        .stat-label {
            font-size: 0.7rem;
            color: rgba(233,30,140,0.5);
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }

        
        #gallery {
            display: none;
        }

        #gallery.active {
            display: block;
        }

        .page-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 40px;
            gap: 20px;
            flex-wrap: wrap;
        }

        .page-title {
            font-family: var(--ff-display);
            font-size: 2.5rem;
        }

        .page-title em {
            font-style: italic;
            color: var(--accent);
        }

        .filter-bar {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .filter-btn {
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--muted);
            padding: 8px 20px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.8rem;
            transition: all 0.2s;
        }

        .filter-btn:hover,
        .filter-btn.active {
            background: var(--accent);
            color: #fce4ec;
            border-color: var(--accent);
        }

        .gallery-grid {
            columns: 4;
            column-gap: 12px;
        }

        @media (max-width: 1200px) {
            .gallery-grid {
                columns: 3;
            }
        }

        @media (max-width: 768px) {
            .gallery-grid {
                columns: 2;
            }
        }

        @media (max-width: 480px) {
            .gallery-grid {
                columns: unset;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 4px;
            }
            .gallery-item {
                margin-bottom: 0;
                height: 80px;
            }
            .gallery-item img {
                width: 100%;
                height: 80px;
                object-fit: cover;
            }
        }

        .gallery-item {
            break-inside: avoid;
            margin-bottom: 12px;
            border-radius: var(--ios-radius-sm);
            overflow: hidden;
            position: relative;
            cursor: pointer;
            background: var(--surface2);
            animation: fadeIn 0.4s ease both;
            transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
        }
        .gallery-item:active {
            transform: scale(0.96);
            transition: transform 0.12s ease;
        }

        .gallery-item img {
            width: 100%;
            display: block;
            transition: transform 0.4s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.04);
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(80,0,40,0.8) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.3s;
            display: flex;
            align-items: flex-end;
            padding: 16px;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .overlay-actions {
            display: flex;
            gap: 8px;
        }

        .overlay-btn {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .overlay-btn:hover {
            background: var(--accent);
            color: #fce4ec;
            border-color: var(--accent);
        }

        
        .item-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(233,30,140,0.85);
            color: #fce4ec;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 50px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .empty-gallery {
            text-align: center;
            padding: 100px 20px;
            color: var(--muted);
        }

        .empty-icon {
            font-size: 4rem;
            margin-bottom: 16px;
            opacity: 0.4;
        }

        .empty-text {
            font-family: var(--ff-display);
            font-size: 1.5rem;
            margin-bottom: 8px;
        }

        
        #upload {
            display: none;
        }

        #upload.active {
            display: block;
        }

        .upload-area {
            border: 2px dashed rgba(233,30,140,0.3);
            border-radius: var(--ios-radius-lg);
            padding: 60px 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1);
            background: linear-gradient(135deg, rgba(233,30,140,0.04), rgba(255,255,255,0.02));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            position: relative;
            margin-bottom: 40px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(194,24,91,0.2);
            overflow: hidden;
        }

        
        .upload-area::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(233,30,140,0.15), transparent 50%, rgba(233,30,140,0.08));
            opacity: 0;
            transition: opacity 0.35s;
            pointer-events: none;
        }

        .upload-area:hover::before,
        .upload-area.dragover::before {
            opacity: 1;
        }

        .upload-area:hover,
        .upload-area.dragover {
            border-color: var(--accent);
            border-style: solid;
            background: rgba(233,30,140,0.07);
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(233,30,140,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
        }

        
        @keyframes upload-float {
            0%,100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        .upload-icon {
            font-size: 3rem;
            margin-bottom: 16px;
            opacity: 0.7;
            animation: upload-float 3s ease-in-out infinite;
            display: inline-block;
        }

        .upload-icon svg {
            width: 52px;
            height: 52px;
            stroke: var(--accent);
            filter: drop-shadow(0 0 12px rgba(233,30,140,0.4));
        }

        .upload-title {
            font-family: var(--ff-display);
            font-size: 1.8rem;
            margin-bottom: 10px;
            background: linear-gradient(135deg, var(--text), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .upload-sub {
            color: var(--muted);
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        
        .upload-format-badges {
            display: flex;
            gap: 6px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .upload-format-badge {
            background: rgba(233,30,140,0.1);
            border: 1px solid rgba(233,30,140,0.2);
            color: var(--accent);
            padding: 3px 10px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: .06em;
        }

        
        .upload-preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 12px;
            margin-bottom: 32px;
        }

        
        .upload-area.dragover {
            animation: drag-pulse 0.8s ease infinite alternate;
        }

        @keyframes drag-pulse {
            from { box-shadow: 0 0 0 0 rgba(233,30,140,0.2); }
            to   { box-shadow: 0 0 0 12px rgba(233,30,140,0); }
        }

        #file-input {
            display: none;
        }

        .preview-card {
            background: var(--surface2);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            position: relative;
            animation: fadeIn 0.3s ease;
        }

        .preview-card img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            display: block;
        }

        .preview-card-info {
            padding: 10px 14px;
        }

        .preview-name {
            font-size: 0.78rem;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .preview-size {
            font-size: 0.72rem;
            color: var(--accent);
            margin-top: 2px;
        }

        .preview-remove {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(80,0,40,0.7);
            border: none;
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            transition: background 0.2s;
        }

        .preview-remove:hover {
            background: #e74c3c;
        }

        .upload-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        
        #camera {
            display: none;
        }

        #camera.active {
            display: block;
        }

        .camera-layout {
            display: grid;
            grid-template-columns: 190px 1fr 320px;
            gap: 16px;
            align-items: start;
        }
        @media (max-width: 1100px) {
            .camera-layout { grid-template-columns: 160px 1fr 300px; gap: 12px; }
        }
        @media (max-width: 900px) {
            .camera-layout { grid-template-columns: 1fr; }
        }

        
        #desktop-preview-panel {
            position: sticky;
            top: 80px;
            background: rgba(255,255,255,.02);
            border: 1px solid rgba(233,30,140,.15);
            border-radius: 20px;
            padding: 14px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        @media (max-width: 900px) { #desktop-preview-panel { display: none !important; } }
        .dpp-title {
            font-size: 0.65rem;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: .1em;
            display: flex; align-items: center; gap: 5px;
            opacity: .8;
            margin-bottom: 4px;
        }
        .dpp-empty {
            text-align: center;
            color: rgba(255,255,255,.18);
            font-size: 0.7rem;
            padding: 18px 8px;
            border: 1px dashed rgba(255,255,255,.08);
            border-radius: 10px;
        }
        #dpp-grid {
            display: flex; flex-direction: column; gap: 5px;
        }
        #dpp-grid.g6 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
        .dpp-cell {
            border-radius: 8px; overflow: hidden;
            border: 1.5px solid rgba(233,30,140,.25);
            background: rgba(255,255,255,.03);
            position: relative; aspect-ratio: 4/3; width: 100%;
        }
        .dpp-cell.empty { border-style: dashed; opacity: .4; }
        .dpp-cell.filled { border-color: rgba(233,30,140,.7); box-shadow: 0 0 10px rgba(233,30,140,.2); }
        .dpp-cell img { width:100%;height:100%;object-fit:cover;display:block; }
        .dpp-cell .dpp-n {
            position:absolute;bottom:3px;right:4px;
            font-size:.5rem;font-weight:700;color:rgba(255,255,255,.5);
            background:rgba(136,14,79,0.5);padding:1px 4px;border-radius:3px;
        }
        .dpp-frame-ov {
            position:absolute;inset:0;width:100%;height:100%;
            object-fit:fill;opacity:.82;pointer-events:none;z-index:3;
        }
        #dpp-frame-lbl {
            font-size:.6rem;color:rgba(233,30,140,.6);
            text-align:center;padding:2px 0;
        }

        
        #mobile-preview-bar {
            display: none;
            padding: 8px 12px 6px;
            background: rgba(255,255,255,.02);
            border: 1px solid rgba(233,30,140,.12);
            border-radius: 14px;
            margin-bottom: 8px;
        }
        @media (min-width: 901px) { #mobile-preview-bar { display: none !important; } }
        .mpb-title {
            font-size: .6rem; color: var(--accent);
            text-transform: uppercase; letter-spacing: .1em;
            display: flex; align-items: center; gap: 4px;
            margin-bottom: 6px; opacity: .8;
        }
        #mpb-grid {
            display: flex; gap: 5px; justify-content: center;
        }
        #mpb-grid.g6 { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
        .mpb-cell {
            border-radius: 7px; overflow: hidden;
            border: 1.5px solid rgba(233,30,140,.25);
            background: rgba(255,255,255,.03);
            position: relative; aspect-ratio: 4/3; flex-shrink:0;
        }
        .mpb-cell.empty { border-style: dashed; opacity: .35; }
        .mpb-cell.filled { border-color: rgba(233,30,140,.7); }
        .mpb-cell img { width:100%;height:100%;object-fit:cover;display:block; }
        .mpb-cell .mpb-n {
            position:absolute;bottom:2px;right:3px;
            font-size:.48rem;font-weight:700;color:rgba(255,255,255,.5);
            background:rgba(136,14,79,0.5);padding:1px 3px;border-radius:3px;
        }
        .mpb-frame-ov {
            position:absolute;inset:0;width:100%;height:100%;
            object-fit:fill;opacity:.82;pointer-events:none;z-index:3;
        }

        
        #review-countdown-bar {
            display: none;
            align-items: center; gap: 10px;
            background: rgba(233,30,140,.08);
            border: 1px solid rgba(233,30,140,.25);
            border-radius: 12px;
            padding: 9px 14px; margin-top: 10px;
            font-size: .78rem; color: var(--text);
        }
        #review-countdown-bar .rcb-num {
            font-size: 1.15rem; font-weight: 800;
            color: var(--accent); min-width: 24px; text-align: center;
        }
        #review-countdown-bar .rcb-skip {
            margin-left: auto;
            background: linear-gradient(135deg,var(--accent),var(--accent2));
            border: none; color: #fce4ec;
            padding: 5px 14px; border-radius: 50px;
            font-family: inherit; font-size: .74rem;
            font-weight: 700; cursor: pointer;
        }

        
        #cam-watermark-text {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 22%;          
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--ff-display);
            font-style: italic;
            font-size: clamp(0.85rem, 2.2vw, 1.35rem);
            letter-spacing: 0.18em;
            color: rgba(233,30,140,0.22);
            pointer-events: none;
            z-index: 5;
            user-select: none;
        }
        @media (max-width: 768px) {
            #cam-watermark-text { display: none !important; }
        }

        
        .camera-view {
            background: #080810;
            border-radius: var(--ios-radius-lg);
            overflow: hidden;
            border: 0.5px solid rgba(233,30,140,.15);
            position: relative;
            box-shadow: var(--ios-shadow), inset 0 1px 0 rgba(255,255,255,.04);
            aspect-ratio: 4 / 3;
            width: 100%;
            
            contain: layout paint;
        }
        @media (max-width: 768px) {
            .camera-view {
                aspect-ratio: 3 / 4; 
                max-height: 70vh;
                width: 100%;
            }
        }

        
        #szc { display:none!important; visibility:hidden!important; pointer-events:none!important; }

        
        .no-cam-msg {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 380px;
            text-align: center;
            padding: 48px 32px;
        }
        .no-cam-msg.show { display: flex; }

        .no-cam-icon {
            width: 80px; height: 80px;
            border-radius: 50%;
            background: rgba(233,30,140,.07);
            border: 1.5px solid rgba(233,30,140,.2);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 20px;
            animation: cam-icon-float 3s ease-in-out infinite;
        }
        @keyframes cam-icon-float {
            0%,100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(233,30,140,.2); }
            50% { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(233,30,140,.15); }
        }
        .no-cam-icon svg { width: 36px; height: 36px; color: rgba(233,30,140,.5); }

        .no-cam-title {
            font-family: var(--ff-display);
            font-size: 1.2rem; margin-bottom: 8px;
        }
        .no-cam-sub {
            color: var(--muted); font-size: 0.84rem;
            max-width: 280px; line-height: 1.7;
        }

        #video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform: scaleX(-1);
            background: #fce4ec;
            transition: filter 0.3s;
        }

        
        .ar-overlay { position: absolute; inset: 0; pointer-events: none; }
        .ar-mask { position: absolute; background: rgba(136,14,79,0.45); }
        .ar-mask.top { top:0; left:0; right:0; }
        .ar-mask.bottom { bottom:0; left:0; right:0; }
        .ar-mask.left { top:0; left:0; bottom:0; }
        .ar-mask.right { top:0; right:0; bottom:0; }
        .ar-frame { position: absolute; }
        .ar-corner {
            position: absolute; width: 20px; height: 20px;
            border-color: var(--accent); border-style: solid; opacity: .9;
        }
        .ar-corner.tl { top:0; left:0; border-width: 2px 0 0 2px; }
        .ar-corner.tr { top:0; right:0; border-width: 2px 2px 0 0; }
        .ar-corner.bl { bottom:0; left:0; border-width: 0 0 2px 2px; }
        .ar-corner.br { bottom:0; right:0; border-width: 0 2px 2px 0; }
        
        @media (max-width: 768px) {
            #ar-overlay { display: none !important; }
        }

        
        .countdown-overlay {
            position: absolute; inset: 0; background: rgba(80,0,40,0.6);
            display: flex; align-items: center; justify-content: center;
            z-index: 10; opacity: 0; pointer-events: none; transition: opacity .3s;
        }
        .countdown-overlay.show { opacity: 1; pointer-events: all; }
        .cd-num {
            font-family: var(--ff-display); font-size: 10rem;
            color: var(--accent); font-style: italic;
            text-shadow: 0 0 80px rgba(233,30,140,.6);
            animation: cdPop .6s ease; line-height: 1;
        }
        @keyframes cdPop { from { transform: scale(1.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        
        .strip-progress {
            position: absolute; bottom: 0; left: 0; right: 0;
            display: flex; gap: 4px; padding: 12px 16px;
            background: linear-gradient(transparent, rgba(80,0,40,0.8));
            opacity: 0; transition: opacity .3s; z-index: 5;
        }
        .strip-progress.show { opacity: 1; }
        .sp-dot { flex:1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); transition: background .3s; }
        .sp-dot.done { background: var(--accent); }
        .sp-dot.active { background: var(--accent2); animation: spPulse .6s infinite; }
        @keyframes spPulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }

        
        .flash-layer {
            position: absolute; inset: 0; background: #fff; opacity: 0;
            pointer-events: none; z-index: 20; transition: opacity .08s;
        }
        .flash-layer.pop { opacity: .85; }

        
        .camera-overlay-ui { position: absolute; inset: 0; pointer-events: none; }
        .corner {
            position: absolute; width: 22px; height: 22px;
            border-color: rgba(233,30,140,.7); border-style: solid; transition: opacity .3s;
        }
        .corner.tl { top:16px; left:16px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
        .corner.tr { top:16px; right:16px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
        .corner.bl { bottom:80px; left:16px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
        .corner.br { bottom:80px; right:16px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

        .camera-status {
            position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
            background: rgba(80,0,40,0.65); backdrop-filter: blur(12px);
            border: 1px solid rgba(233,30,140,.25); padding: 5px 14px;
            border-radius: 50px; font-size: 0.72rem; color: var(--accent);
            letter-spacing: .12em; white-space: nowrap;
            box-shadow: 0 2px 12px rgba(136,14,79,0.4);
        }
        .rec-dot {
            display: none; width: 6px; height: 6px; background: #e74c3c;
            border-radius: 50%; margin-right: 6px; animation: blink 1s infinite;
        }
        .recording .rec-dot { display: inline-block; }
        @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }

        
        .camera-controls-panel {
            border-radius: 12px;
            padding: 16px 20px;
            display: flex; gap: 12px;
            justify-content: center; align-items: center;
            background: rgba(8,8,16,.9);
            backdrop-filter: blur(20px);
            flex-wrap: wrap;
            border-top: 15px solid rgba(233,30,140,.1);
        }

        .ctrl-btn {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.1);
            color: rgba(255,255,255,.7);
            width: 48px; height: 48px; border-radius: 50%;
            cursor: pointer; transition: all .3s cubic-bezier(.2,.9,.4,1);
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
        }
        .ctrl-btn::after {
            content: ''; position: absolute; inset: 0; border-radius: 50%;
            background: radial-gradient(circle, rgba(233,30,140,.2) 0%, transparent 70%);
            opacity: 0; transition: opacity .3s;
        }
        .ctrl-btn:hover::after { opacity: 1; }
        .ctrl-btn svg {
            width: 20px; height: 20px; position: relative; z-index: 1;
            transition: transform .35s cubic-bezier(.34,1.56,.64,1);
        }
        .ctrl-btn:hover {
            border-color: rgba(233,30,140,.5);
            color: var(--accent);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(233,30,140,.15);
        }
        .ctrl-btn:hover svg { transform: scale(1.2) rotate(-5deg); }
        .ctrl-btn:disabled { opacity: .3; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

        
        .ctrl-btn.capture {
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            color: #fdf2f8; width: 64px; height: 64px;
            border-color: transparent;
            box-shadow: 0 0 0 3px rgba(233,30,140,.2), 0 8px 28px rgba(233,30,140,.4);
        }
        .ctrl-btn.capture svg { width: 26px; height: 26px; }
        .ctrl-btn.capture:hover {
            transform: translateY(-3px) scale(1.06);
            box-shadow: 0 0 0 5px rgba(233,30,140,.3), 0 16px 40px rgba(233,30,140,.6);
            color: #fdf2f8;
        }
        .ctrl-btn.capture:hover svg { transform: scale(1.15); }
        .ctrl-btn.capture.live { animation: captureGlow 2.5s ease-in-out infinite; }
        @keyframes captureGlow {
            0%,100% { box-shadow: 0 0 0 3px rgba(233,30,140,.2), 0 8px 28px rgba(233,30,140,.4); }
            50% { box-shadow: 0 0 0 7px rgba(233,30,140,.3), 0 12px 40px rgba(233,30,140,.6); }
        }
        .ctrl-btn.recording { background: rgba(231,76,60,.2) !important; border-color: #e74c3c !important; color: #e74c3c !important; animation: captureGlow 1.2s ease-in-out infinite; }

        
        .ctrl-btn.btn-cam:hover svg { transform: scale(1.15); animation: cam-shake .4s ease; }
        @keyframes cam-shake {
            0%,100% { transform: scale(1.15) rotate(0); }
            25% { transform: scale(1.15) rotate(-8deg); }
            75% { transform: scale(1.15) rotate(8deg); }
        }
        .ctrl-btn.btn-switch:hover svg { animation: spin-once .5s ease; }
        @keyframes spin-once { from { transform: rotate(0) scale(1.2); } to { transform: rotate(360deg) scale(1.2); } }
        .ctrl-btn.btn-mirror:hover svg { animation: flip-anim .4s ease; }
        @keyframes flip-anim { 0%,100% { transform: scaleX(1.2); } 50% { transform: scaleX(-1.2); } }
        .ctrl-btn.btn-strip:hover svg { animation: strip-slide .5s ease; }
        @keyframes strip-slide {
            0% { transform: translateX(0) scale(1.1); }
            50% { transform: translateX(3px) scale(1.1); }
            100% { transform: translateX(0) scale(1.2); }
        }

        
        .btn-help-guide {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.12);
            color: rgba(255,255,255,.55);
            padding: 0 16px; height: 36px; border-radius: 50px;
            cursor: pointer; font-family: inherit; font-size: 0.76rem;
            font-weight: 500; letter-spacing: .02em;
            text-decoration: none;
            transition: all .25s cubic-bezier(.2,.9,.4,1);
            white-space: nowrap;
            position: relative; overflow: hidden;
        }
        .btn-help-guide::before {
            content: '';
            position: absolute; inset: 0; border-radius: 50px;
            background: linear-gradient(135deg, rgba(255,60,60,.15), rgba(255,0,0,.08));
            opacity: 0; transition: opacity .25s;
        }
        .btn-help-guide:hover::before { opacity: 1; }
        .btn-help-guide:hover {
            border-color: rgba(255,80,80,.5);
            color: #ff6b6b;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255,50,50,.2);
        }
        .btn-help-guide svg { position: relative; z-index: 1; flex-shrink: 0; }
        .btn-help-guide span { position: relative; z-index: 1; }

        
        .camera-sidebar {
            display: flex; flex-direction: column;
            background: rgba(8,8,14,0.82);
            border: 0.5px solid rgba(255,255,255,0.07);
            border-radius: 22px;
            overflow: hidden;
            backdrop-filter: blur(28px) saturate(1.6);
            -webkit-backdrop-filter: blur(28px) saturate(1.6);
            box-shadow: 0 8px 40px rgba(136,14,79,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
            height: fit-content;
        }

        
        .cam-subtab-bar { display: none; }
        #cam-mobile-panel { display: none; }

        
        .sidebar-tabs-nav {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 0;
            background: rgba(136,14,79,0.35);
            border-bottom: 0.5px solid rgba(255,255,255,0.05);
            padding: 6px 6px 0;
            flex-shrink: 0;
        }

        .sidebar-tab-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; padding: 9px 4px 8px;
            background: transparent; border: none;
            color: rgba(160,150,135,0.5);
            cursor: pointer; border-radius: 12px 12px 0 0;
            transition: color 0.2s ease, background 0.2s ease;
            position: relative; overflow: hidden;
            min-width: 0;
        }
        .sidebar-tab-btn svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
        .sidebar-tab-btn span {
            font-size: 8.5px; font-weight: 600;
            letter-spacing: 0.02em; line-height: 1;
            white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; max-width: 100%;
        }
        .sidebar-tab-btn:hover { color: rgba(233,30,140,0.75); }
        .sidebar-tab-btn:hover svg { transform: scale(1.18) translateY(-1px); }
        .sidebar-tab-btn.active {
            color: var(--accent);
            background: rgba(233,30,140,0.08);
        }
        .sidebar-tab-btn.active svg {
            filter: drop-shadow(0 0 5px rgba(233,30,140,0.5));
            transform: scale(1.1);
        }
        
        .sidebar-tab-btn.active::after {
            content: '';
            position: absolute; bottom: 0; left: 20%; right: 20%; height: 1.5px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            border-radius: 1px;
        }
        .sidebar-tab-btn:active { animation: ios-spring 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }

        
        .sidebar-tab-panels {
            flex: 1; overflow: hidden;
        }
        .sidebar-tab-panel {
            display: none;
            padding: 16px;
            animation: stab-fadein 0.22s cubic-bezier(0.2,0.9,0.4,1) both;
        }
        .sidebar-tab-panel.active { display: block; }
        @keyframes stab-fadein {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        
        .stab-panel-title {
            font-size: 0.7rem; font-weight: 700;
            color: var(--accent); letter-spacing: 0.15em;
            text-transform: uppercase; margin-bottom: 12px;
            display: flex; align-items: center; gap: 8px;
        }
        .stab-panel-title::before, .stab-panel-title::after {
            content: ''; flex: 1; height: 1px;
            background: linear-gradient(to right, transparent, rgba(233,30,140,0.12));
        }
        .stab-panel-title::after {
            background: linear-gradient(to left, transparent, rgba(233,30,140,0.12));
        }

        
        .sidebar-card {
            background: transparent; border: none; border-radius: 0; padding: 0;
        }
        .sidebar-card-header { display: none !important; }

        @keyframes icon-bounce {
            0%,100% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-10deg); } 70% { transform: scale(.9) rotate(5deg); }
        }

        
        .tool-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
        .tool-btn {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.1);
            color: rgba(255,255,255,.5);
            padding: 6px 13px; border-radius: 8px; cursor: pointer;
            font-family: var(--ff-body); font-size: 0.76rem; font-weight: 500;
            transition: all .2s;
        }
        .tool-btn:hover { color: var(--accent); border-color: rgba(233,30,140,.4); }
        .tool-btn.active { background: rgba(233,30,140,.15); color: var(--accent); border-color: var(--accent); }

        
        .filter-grid-cam { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
        .filter-card-cam {
            background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
            border-radius: 8px; cursor: pointer; overflow: hidden; transition: all .2s; text-align: center;
        }
        .filter-card-cam:hover { border-color: rgba(233,30,140,.4); transform: translateY(-2px); }
        .filter-card-cam.active { border-color: var(--accent); background: rgba(233,30,140,.1); }
        .filter-swatch { height: 28px; width: 100%; }
        .filter-label { font-size: 0.6rem; padding: 3px 2px; color: rgba(255,255,255,.4); }
        .filter-card-cam.active .filter-label { color: var(--accent); }

        
        .shot-thumb {
            border-radius: 8px; overflow: hidden; position: relative; cursor: pointer;
            background: rgba(255,255,255,.05); animation: fadeIn .3s ease;
            border: 1px solid rgba(255,255,255,.06);
        }
        .shot-thumb img {
            width: 100%; height: 80px; object-fit: cover; display: block; transition: transform .3s;
        }
        .shot-thumb:hover img { transform: scale(1.07); }
        .shot-download {
            position: absolute; inset: 0; background: rgba(80,0,40,0.65);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity .2s; font-size: 1.2rem;
        }
        .shot-thumb:hover .shot-download { opacity: 1; }

        
        .setting-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05);
        }
        .setting-row:last-child { border-bottom: none; }
        .setting-label { font-size: 0.78rem; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 6px; }
        .setting-label svg { color: rgba(233,30,140,.6); flex-shrink: 0; }
        .setting-section-label {
            font-size: 0.6rem; color: var(--accent); text-transform: uppercase;
            letter-spacing: .12em; margin: 10px 0 6px; opacity: .8;
            display: flex; align-items: center; gap: 5px;
        }
        .setting-section-label::before,
        .setting-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(233,30,140,.15); }

        
        .toggle {
            width: 34px; height: 18px; background: rgba(255,255,255,.1);
            border-radius: 9px; cursor: pointer; position: relative;
            transition: background .3s; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1);
        }
        .toggle::after {
            content: ''; position: absolute; top: 2px; left: 2px;
            width: 12px; height: 12px; background: rgba(255,255,255,.4);
            border-radius: 50%; transition: transform .3s, background .3s;
        }
        .toggle.on { background: rgba(233,30,140,.2); border-color: rgba(233,30,140,.5); }
        .toggle.on::after { transform: translateX(16px); background: var(--accent); }

        
        .shots-below-cam { margin-top: 16px; }
        .shots-below-inner {
            background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
            border-radius: 20px; padding: 18px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .shots-below-header {
            display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
        }
        .shots-below-title {
            display: flex; align-items: center; gap: 8px;
            font-size: 0.82rem; font-weight: 600; color: var(--accent);
        }
        .shots-below-title svg { animation: none; }
        .shots-below-title:hover svg { animation: icon-bounce .5s ease; }
        .shots-below-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
        }
        .shots-empty {
            grid-column: 1/-1; text-align: center; padding: 36px 20px;
            color: rgba(255,255,255,.2); font-size: 0.8rem;
        }
        .shots-empty svg { opacity: .2; margin-bottom: 8px; }
        .btn-clear-shots {
            background: transparent; border: 1px solid rgba(239,68,68,.25);
            color: rgba(239,68,68,.7); padding: 4px 12px; border-radius: 50px;
            cursor: pointer; font-size: 0.7rem; font-family: inherit;
            display: flex; align-items: center; gap: 4px; transition: all .2s;
        }
        .btn-clear-shots:hover { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.5); }
        .btn-clear-shots svg { transition: transform .4s; }
        .btn-clear-shots:hover svg { transform: rotate(180deg); }

        
        .live-strip-grid {
            display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start;
        }
        .live-strip-cell {
            border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(233,30,140,.35);
            background: rgba(255,255,255,.04); position: relative; flex-shrink: 0;
            animation: cell-pop .3s cubic-bezier(.2,.9,.4,1) both;
            aspect-ratio: 4/3;
        }
        .live-strip-cell.empty {
            border-style: dashed; opacity: .3;
        }
        .live-strip-cell.filled {
            border-color: rgba(233,30,140,.7);
            box-shadow: 0 0 12px rgba(233,30,140,.25);
        }
        .live-strip-cell img { display: block; object-fit: cover; }
        .live-strip-cell .cell-num {
            position: absolute; bottom: 3px; right: 5px;
            font-size: 0.55rem; font-weight: 700; color: rgba(255,255,255,.5);
            background: rgba(136,14,79,0.5); padding: 1px 4px; border-radius: 4px;
        }
        @keyframes cell-pop {
            from { transform: scale(.85); opacity:0; }
            to { transform: scale(1); opacity:1; }
        }

        
        .layout-guide-panel {
            background: rgba(233,30,140,.06); border: 1px solid rgba(233,30,140,.18);
            border-radius: 12px; padding: 10px 14px; margin-top: 10px;
            font-size: 0.72rem; color: rgba(240,236,228,.75); line-height: 1.6;
            display: flex; align-items: flex-start; gap: 10px;
            animation: fadeIn .25s ease;
        }
        .layout-guide-panel .guide-icon {
            width: 40px; height: 40px; flex-shrink: 0;
            background: rgba(233,30,140,.1); border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
        }
        .layout-guide-panel .guide-icon svg { color: var(--accent); }
        .layout-guide-preview-row {
            display: flex; gap: 4px; margin-top: 8px; align-items: flex-start;
        }
        .layout-guide-mini-cell {
            background: rgba(233,30,140,.2); border-radius: 3px;
            border: 1px solid rgba(233,30,140,.3);
        }
        @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

        
        .countdown-guide-panel {
            background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.2);
            border-radius: 12px; padding: 10px 14px; margin-top: 10px;
            font-size: 0.72rem; color: rgba(240,236,228,.75); line-height: 1.6;
            display: flex; align-items: center; gap: 10px;
            animation: fadeIn .25s ease;
        }
        .countdown-guide-panel .big-num {
            font-family: var(--ff-display); font-size: 2rem; color: #818cf8;
            min-width: 36px; text-align: center; line-height: 1;
        }

        
        .aspect-guide-panel {
            background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.18);
            border-radius: 12px; padding: 10px 14px; margin-top: 10px;
            font-size: 0.72rem; color: rgba(240,236,228,.75); line-height: 1.6;
            display: flex; align-items: center; gap: 12px;
            animation: fadeIn .25s ease;
        }
        .aspect-visual {
            background: rgba(16,185,129,.15); border: 2px solid rgba(16,185,129,.5);
            border-radius: 4px; flex-shrink: 0;
        }

        
        .home-particles {
            position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
        }
        .home-particle {
            position: absolute; border-radius: 50%;
            background: radial-gradient(circle, rgba(233,30,140,.6) 0%, transparent 70%);
            animation: particle-float linear infinite;
        }
        @keyframes particle-float {
            0% { transform: translateY(110vh) scale(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-20vh) scale(1); opacity: 0; }
        }

        
        .feat-card {
            transition: all .3s cubic-bezier(.2,.9,.4,1);
        }
        .feat-card:hover {
            transform: translateY(-8px) scale(1.03) !important;
            box-shadow: 0 20px 50px rgba(233,30,140,.18);
        }

        
        .stat-num { transition: color .3s; }

        
        .hero-live-badge {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(16,185,129,.12); border: 1px solid rgba(233,30,140,0.25);
            color: #34d399; font-size: 0.72rem; padding: 5px 14px; border-radius: 50px;
            margin-bottom: 16px; animation: fadeUp .8s .05s ease both;
        }
        .hero-live-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #e91e8c; animation: live-pulse 2s ease-in-out infinite;
        }
        @keyframes live-pulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
            50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
        }

        
        .hero-scroll {
            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            color: rgba(255,255,255,.18); font-size: 0.65rem; letter-spacing: .15em;
            text-transform: uppercase; animation: fadeIn 1.5s 1s ease both;
            cursor: pointer;
        }
        .scroll-mouse {
            width: 20px; height: 32px; border: 1.5px solid rgba(255,255,255,.15);
            border-radius: 10px; display: flex; align-items: flex-start;
            justify-content: center; padding-top: 5px;
        }
        .scroll-wheel {
            width: 3px; height: 7px; background: rgba(255,255,255,.35);
            border-radius: 2px; animation: scroll-bounce 2s ease-in-out infinite;
        }
        @keyframes scroll-bounce {
            0%,100% { transform: translateY(0); opacity: 1; }
            50% { transform: translateY(6px); opacity: .3; }
        }

        
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(80,0,40,0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            backdrop-filter: blur(20px);
        }

        .lightbox.active {
            opacity: 1;
            pointer-events: all;
        }

        .lightbox-inner {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .lightbox-img {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 12px;
            object-fit: contain;
            box-shadow: 0 40px 100px rgba(80,0,40,0.8);
        }

        .lightbox-actions {
            display: flex;
            gap: 12px;
        }

        .lb-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff;
            padding: 10px 24px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.85rem;
            transition: all 0.2s;
        }

        .lb-btn:hover {
            background: var(--accent);
            color: #fce4ec;
            border-color: var(--accent);
        }

        .lb-close {
            position: fixed;
            top: 24px;
            right: 24px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lb-close:hover {
            background: #e74c3c;
            border-color: #e74c3c;
        }

        .lb-nav {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lb-prev {
            left: 24px;
        }

        .lb-next {
            right: 24px;
        }

        .lb-nav:hover {
            background: var(--accent);
            color: #fce4ec;
            border-color: var(--accent);
        }

        
        .toast-container {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .toast {
            background: var(--surface);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            color: var(--text);
            padding: 14px 20px;
            border-radius: 10px;
            font-size: 0.85rem;
            animation: slideIn 0.3s ease;
            box-shadow: 0 8px 32px rgba(136,14,79,0.4);
            max-width: 300px;
        }

        .toast.success {
            border-left-color: #e91e8c;
        }

        .toast.error {
            border-left-color: #e74c3c;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(24px);
            }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        footer {
            text-align: center;
            padding: 40px;
            color: var(--muted);
            font-size: 0.8rem;
            border-top: 1px solid var(--border);
            letter-spacing: 0.1em;
        }

        footer span {
            color: var(--accent);
            font-family: var(--ff-display);
            font-style: italic;
        }

        
.home-marquee-wrap {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    padding: 60px 0;
    margin-top: 80px;
    background: rgba(233,30,140,0.03);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(8deg) scaleX(1.15);
    transform-origin: center;
}
.home-marquee-wrap-d {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    padding: 60px 0;
    margin-top: 80px;
    background: rgba(233,30,140,0.03);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(-8deg) scaleX(1.15);
    transform-origin: center;
}
        .home-marquee {
            display: flex;
            gap: 48px;
            animation: marqueeScroll 30s linear infinite;
            white-space: nowrap;
            width: max-content;
            will-change: transform;
        }

        .home-marquee-inner {
            display: flex;
            gap: 48px;
        }

        @keyframes marqueeScroll {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }

        .marquee-item {
            font-size: 1rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .marquee-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.6;
        }

        
        .home-about {
            margin-top: 80px;
            width: 100%;
            max-width: 900px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            animation: fadeUp 0.8s 0.7s ease both;
        }

        .about-visual {
            position: relative;
            height: 280px;
        }

        .about-visual-card {
            position: absolute;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid var(--border);
            background: var(--surface);
        }

        .about-visual-card.big {
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
        }

        .about-visual-card.sml {
            width: 130px;
            height: 130px;
            right: 0;
            top: 40px;
        }

        .about-visual-card.tiny {
            width: 100px;
            height: 100px;
            left: 60px;
            bottom: 0;
        }

        .about-visual-inner {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px;
            color: var(--accent);
        }

        .about-visual-inner svg {
            width: 40px;
            height: 40px;
            opacity: 0.6;
        }

        .about-visual-inner.sml svg {
            width: 28px;
            height: 28px;
        }

        .about-visual-inner.tiny svg {
            width: 22px;
            height: 22px;
        }

        .about-visual-caption {
            font-size: 0.62rem;
            color: var(--muted);
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .floating-badge {
            position: absolute;
            right: 20px;
            bottom: 70px;
            background: var(--accent);
            color: #fce4ec;
            border-radius: 50px;
            padding: 8px 16px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            box-shadow: 0 8px 24px rgba(233,30,140,0.4);
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .about-text h2 {
            font-family: var(--ff-display);
            font-size: 2rem;
            line-height: 1.25;
            margin-bottom: 20px;
        }

        .about-text h2 em {
            color: var(--accent);
        }

        .about-text p {
            color: var(--muted);
            font-size: 0.9rem;
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .about-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .about-tag {
            border: 1px solid var(--border);
            border-radius: 50px;
            padding: 5px 14px;
            font-size: 0.75rem;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .about-tag svg {
            width: 12px;
            height: 12px;
            color: var(--accent);
        }

        
        .home-filmstrip {
            width: 100%;
            max-width: 900px;
            margin-top: 80px;
            animation: fadeUp 0.8s 0.8s ease both;
        }

        .filmstrip-label {
            text-align: center;
            margin-bottom: 24px;
        }

        .filmstrip-label h2 {
            font-family: var(--ff-display);
            font-size: 1.8rem;
        }

        .filmstrip-label h2 em {
            color: var(--accent);
        }

        .filmstrip-label p {
            color: var(--muted);
            font-size: 0.88rem;
            margin-top: 8px;
        }

        .filmstrip-track {
            display: flex;
            gap: 4px;
            overflow: hidden;
            border-radius: 16px;
            border: 1px solid var(--border);
            background: #111;
            padding: 16px 8px;
            position: relative;
        }

        .filmstrip-track::before,
        .filmstrip-track::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 80px;
            z-index: 2;
            pointer-events: none;
        }

        .filmstrip-track::before {
            left: 0;
            background: linear-gradient(to right, #111, transparent);
        }

        .filmstrip-track::after {
            right: 0;
            background: linear-gradient(to left, #111, transparent);
        }

        .filmstrip-holes {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            gap: 0;
            width: 14px;
            flex-shrink: 0;
            padding: 2px 0;
        }

        .filmstrip-hole {
            width: 10px;
            height: 8px;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 2px;
            margin: 4px 2px;
        }

        .filmstrip-frames {
            display: flex;
            gap: 4px;
            flex: 1;
            overflow: hidden;
        }

        .filmstrip-frame {
            flex-shrink: 0;
            width: 100px;
            height: 75px;
            border-radius: 6px;
            background: var(--surface2);
            border: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .filmstrip-frame svg {
            width: 32px;
            height: 32px;
            color: var(--accent);
            opacity: 0.2;
        }

        .filmstrip-frame-label {
            position: absolute;
            bottom: 5px;
            right: 6px;
            font-size: 0.55rem;
            color: var(--muted);
            letter-spacing: 0.1em;
            opacity: 0.5;
        }

        .fs-gradient-1 {
            background: linear-gradient(135deg, rgba(233,30,140,0.15), rgba(139, 94, 60, 0.1));
        }

        .fs-gradient-2 {
            background: linear-gradient(135deg, rgba(60, 80, 160, 0.15), rgba(100, 60, 200, 0.1));
        }

        .fs-gradient-3 {
            background: linear-gradient(135deg, rgba(160, 60, 60, 0.15), rgba(200, 100, 80, 0.1));
        }

        .fs-gradient-4 {
            background: linear-gradient(135deg, rgba(60, 140, 100, 0.15), rgba(80, 160, 120, 0.1));
        }

        .fs-gradient-5 {
            background: linear-gradient(135deg, rgba(120, 80, 200, 0.15), rgba(200, 120, 80, 0.1));
        }

        .fs-gradient-6 {
            background: linear-gradient(135deg, rgba(80, 160, 200, 0.15), rgba(60, 100, 180, 0.1));
        }

        
        .home-stats-strip {
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
            max-width: 900px;
            margin-top: 60px;
            border: 1px solid var(--border);
            border-radius: 20px;
            overflow: hidden;
            animation: fadeUp 0.8s 0.9s ease both;
        }

        .stats-strip-item {
            flex: 1;
            padding: 24px 20px;
            text-align: center;
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            background: var(--surface);
            transition: background 0.3s;
        }

        .stats-strip-item:last-child {
            border-right: none;
        }

        .stats-strip-item:hover {
            background: var(--surface2);
        }

        .stats-strip-icon svg {
            width: 28px;
            height: 28px;
            color: var(--accent);
            opacity: 0.7;
        }

        .stats-strip-num {
            font-family: var(--ff-display);
            font-size: 1.6rem;
            color: var(--accent);
            line-height: 1;
        }

        .stats-strip-label {
            font-size: 0.7rem;
            color: var(--muted);
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        
        .home-showcase {
            width: 100%;
            max-width: 900px;
            margin-top: 80px;
            animation: fadeUp 0.8s 1s ease both;
        }

        .showcase-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .showcase-label h2 {
            font-family: var(--ff-display);
            font-size: 1.8rem;
        }

        .showcase-label h2 em {
            color: var(--accent);
        }

        .showcase-label a {
            font-size: 0.82rem;
            color: var(--accent);
            text-decoration: none;
            letter-spacing: 0.05em;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .showcase-label a svg {
            width: 14px;
            height: 14px;
        }

        .filter-showcase-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }

        .filter-showcase-item {
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .filter-showcase-item:hover {
            transform: translateY(-4px);
            border-color: var(--accent);
            box-shadow: 0 12px 30px rgba(233,30,140,0.25);
        }

        .filter-swatch-big {
            height: 70px;
            width: 100%;
        }

        .filter-showcase-name {
            background: var(--surface);
            padding: 8px;
            font-size: 0.72rem;
            color: var(--muted);
            text-align: center;
            letter-spacing: 0.08em;
        }

        
        .home-testimonials {
            width: 100%;
            max-width: 900px;
            margin-top: 80px;
            animation: fadeUp 0.8s 1.1s ease both;
        }

        .testimonial-scroll {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 8px;
            scrollbar-width: none;
        }

        .testimonial-scroll::-webkit-scrollbar {
            display: none;
        }

        .testimonial-card {
            flex-shrink: 0;
            width: 280px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 24px;
        }

        .testi-quote {
            color: var(--accent);
            opacity: 0.4;
            margin-bottom: 12px;
        }

        .testi-quote svg {
            width: 24px;
            height: 24px;
        }

        .testi-text {
            font-style: italic;
            color: var(--text);
            font-size: 0.88rem;
            line-height: 1.7;
            margin-bottom: 18px;
        }

        .testi-author {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .testi-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(233,30,140,0.2);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 0.75rem;
            font-weight: 700;
            font-family: var(--ff-display);
        }

        .testi-info-name {
            font-size: 0.82rem;
            color: var(--text);
            font-weight: 600;
        }

        .testi-info-role {
            font-size: 0.72rem;
            color: var(--muted);
        }

        
        .home-cta-final {
            width: 100%;
            max-width: 900px;
            margin-top: 80px;
            margin-bottom: 40px;
            border: 1px solid var(--border);
            border-radius: 28px;
            padding: 56px 48px;
            text-align: center;
            background: linear-gradient(145deg, var(--surface) 0%, rgba(233,30,140,0.04) 100%);
            position: relative;
            overflow: hidden;
            animation: fadeUp 0.8s 1.2s ease both;
        }

        .home-cta-final::before {
            content: '';
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(233,30,140,0.12), transparent 70%);
            pointer-events: none;
        }

        .home-cta-final h2 {
            font-family: var(--ff-display);
            font-size: 2.2rem;
            margin-bottom: 16px;
            position: relative;
        }

        .home-cta-final h2 em {
            color: var(--accent);
        }

        .home-cta-final p {
            color: var(--muted);
            max-width: 440px;
            margin: 0 auto 32px;
            line-height: 1.7;
            font-size: 0.95rem;
        }

        .cta-btn-group {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        
        .hero-tag {
            font-size: 0.75rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--accent);
            border: 1px solid var(--border);
            padding: 8px 22px;
            border-radius: 50px;
            margin-bottom: 32px;
            animation: fadeUp 0.8s ease both;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(233,30,140,0.05);
        }

        .hero-tag svg {
            width: 13px;
            height: 13px;
            animation: spin 8s linear infinite;
        }

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

            to {
                transform: rotate(360deg);
            }
        }

        
        .step {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 28px 20px;
            text-align: center;
            flex: 1;
            min-width: 180px;
            max-width: 220px;
            transition: all 0.3s;
        }

        .step:hover {
            border-color: rgba(233,30,140,0.4);
            transform: translateY(-4px);
        }

        .step-icon-wrap {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(233,30,140,0.12);
            border: 1px solid rgba(233,30,140,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            color: var(--accent);
        }

        .step-icon-wrap svg {
            width: 24px;
            height: 24px;
        }

        
        .upload-icon svg {
            width: 56px;
            height: 56px;
            color: var(--accent);
            opacity: 0.55;
        }

        
        .no-cam-icon svg {
            width: 60px;
            height: 60px;
            color: var(--muted);
        }

        
        .empty-icon svg {
            width: 64px;
            height: 64px;
            color: var(--muted);
            opacity: 0.3;
        }

        @media (max-width: 768px) {
            .home-about {
                grid-template-columns: 1fr;
            }

            .about-visual {
                height: 200px;
            }

            .filter-showcase-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .home-stats-strip {
                flex-wrap: wrap;
            }

            .stats-strip-item {
                min-width: 45%;
                border-right: none;
                border-bottom: 1px solid var(--border);
            }
        }

        .home-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 56px;
            width: 100%;
            max-width: 960px;
            animation: fadeUp 0.8s 0.5s ease both;
        }

        .feat-card {
            background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 22px;
            padding: 26px 20px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
            text-align: center;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(12px);
        }
        #page-404{
    position:fixed;
    inset:0;
    background:linear-gradient(130deg,#eef2f3,#8e9eab,#dde1e7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.container-404{
    text-align:center;
    backdrop-filter:blur(16px);
    background:rgba(255,255,255,0.7);
    padding:60px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(194,24,91,0.1);
}

.container-404 h1{
    font-size:120px;
    font-weight:900;
}

.btn-404{
    display:inline-block;
    margin-top:20px;
    padding:12px 30px;
    border-radius:50px;
    background:linear-gradient(90deg,#6a11cb,#2575fc);
    color:white;
    text-decoration:none;
    font-weight:700;
}

        
        .feat-card::before {
            content: '';
            position: absolute; inset: 0;
            border-radius: 22px;
            padding: 1px;
            background: linear-gradient(135deg, transparent 40%, rgba(233,30,140,0.15) 60%, transparent 80%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
            opacity: 0; transition: opacity 0.4s;
        }

        .feat-card::after {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(circle at 50% 0%, rgba(233,30,140,0.12), transparent 60%);
            opacity: 0; transition: opacity 0.4s;
        }

        .feat-card:hover {
            border-color: rgba(233,30,140,0.35);
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 24px 60px rgba(233,30,140,0.15), 0 8px 20px rgba(233,30,140,0.12);
            background: linear-gradient(145deg, rgba(233,30,140,0.06) 0%, rgba(129,140,248,0.04) 100%);
        }

        .feat-card:hover::before { opacity: 1; }
        .feat-card:hover::after { opacity: 1; }

        .feat-icon {
            font-size: 2.2rem;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative; z-index: 1;
        }

        .feat-icon svg {
            width: 42px; height: 42px;
            color: var(--accent2);
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
            filter: drop-shadow(0 2px 8px rgba(233,30,140,0.2));
        }

        .feat-card:hover .feat-icon svg {
            transform: scale(1.2) rotate(-8deg);
            filter: drop-shadow(0 4px 16px rgba(233,30,140,0.6));
            color: var(--accent);
        }

        .feat-title {
            font-family: var(--ff-display);
            font-size: 1rem;
            margin-bottom: 8px;
            color: var(--accent);
            position: relative; z-index: 1;
            transition: color 0.3s;
        }

        .feat-card:hover .feat-title {
            background: linear-gradient(135deg, #FF85C2, #e91e8c, #e8c99e);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }

        .feat-desc {
            font-size: 0.78rem;
            color: rgba(200,180,160,0.55);
            line-height: 1.65;
            position: relative; z-index: 1;
            transition: color 0.3s;
        }
        .feat-card:hover .feat-desc { color: rgba(220,200,180,0.75); }

        
        .home-howto {
            margin-top: 60px;
            width: 100%;
            max-width: 900px;
            text-align: center;
            animation: fadeUp 0.8s 0.6s ease both;
        }

        .howto-title {
            font-family: var(--ff-display);
            font-size: 1.8rem;
            margin-bottom: 32px;
        }

        .howto-title em {
            color: var(--accent);
        }

        .howto-steps {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .step {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px 20px;
            text-align: center;
            flex: 1;
            min-width: 180px;
            max-width: 220px;
        }

        .step-num {
            font-family: var(--ff-display);
            font-size: 2.5rem;
            color: var(--accent);
            opacity: 0.5;
            line-height: 1;
            margin-bottom: 8px;
        }

        .step-text {
            font-size: 0.82rem;
            color: var(--muted);
            line-height: 1.6;
        }

        .step-text b {
            color: var(--text);
            display: block;
            margin-bottom: 4px;
        }

        .step-arrow {
            font-size: 1.5rem;
            color: var(--accent);
            opacity: 0.5;
        }

        
        .donate-wrap {
            display: grid;
            grid-template-columns: 1fr 320px 1fr;
            gap: 24px;
            align-items: start;
        }

        .donate-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 32px;
            transition: box-shadow 0.4s ease, border-color 0.4s ease;
        }
        .donate-card:hover {
            box-shadow: 0 0 40px rgba(233,30,140,0.18), 0 8px 32px rgba(233,30,140,0.12);
            border-color: rgba(233,30,140,0.35);
        }

        .donate-heart {
            font-size: 3rem;
            margin-bottom: 16px;
            display: inline-block;
            animation: heart-pulse 2s ease-in-out infinite;
            cursor: pointer;
            filter: drop-shadow(0 0 6px rgba(233,30,140,0.4));
        }
        .donate-heart:hover { animation: heart-beat 0.4s ease; }
        @keyframes heart-pulse {
            0%,100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(233,30,140,0.3)); }
            50%      { transform: scale(1.1); filter: drop-shadow(0 0 14px rgba(233,30,140,0.7)); }
        }
        @keyframes heart-beat {
            0%   { transform: scale(1); }
            30%  { transform: scale(1.38); }
            60%  { transform: scale(0.9); }
            100% { transform: scale(1.15); }
        }

        .donate-title {
            font-family: var(--ff-display);
            font-size: 1.3rem;
            margin-bottom: 16px;
            color: var(--accent);
            line-height: 1.4;
        }

        .donate-desc {
            color: var(--muted);
            font-size: 0.88rem;
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .donate-features {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .donate-feat {
            font-size: 0.85rem;
            color: var(--text);
        }

        .donate-qr-card {
            background: var(--surface);
            border: 2px solid transparent;
            border-radius: 20px;
            padding: 28px 24px;
            text-align: center;
            position: relative;
            background-clip: padding-box;
        }
        .donate-qr-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 22px;
            background: linear-gradient(135deg,
                #FF85C2 0%, #e91e8c 20%, #f48fb1 40%,
                #c2185b 55%, #ff69b4 70%, #e91e8c 85%, #FF85C2 100%);
            background-size: 300% 300%;
            animation: gold-border-spin 4s ease-in-out infinite;
            z-index: -1;
        }
        @keyframes gold-border-spin {
            0%,100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }
        
        .qr-box { position: relative; overflow: hidden; }
        .qr-box::after {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 60%; height: 100%;
            background: linear-gradient(105deg, transparent 30%, rgba(255,105,180,0.55) 50%, transparent 70%);
            animation: qr-shimmer 3.5s ease-in-out infinite;
            pointer-events: none;
            border-radius: 12px;
        }
        @keyframes qr-shimmer {
            0%,60%  { left: -100%; opacity:0; }
            62%     { left: -100%; opacity:1; }
            78%     { left: 140%; opacity:1; }
            80%,100%{ left: 140%; opacity:0; }
        }

        .donate-bank-logo {
            font-size: 2.5rem;
            margin-bottom: 8px;
        }

        .donate-bank-name {
            font-family: var(--ff-display);
            font-size: 1.1rem;
            color: var(--accent);
            margin-bottom: 8px;
        }

        .donate-account,
        .donate-name {
            font-size: 0.85rem;
            color: var(--muted);
            margin-bottom: 4px;
        }

        .donate-account strong,
        .donate-name strong {
            color: var(--text);
        }

        .qr-box {
            margin: 20px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        #qr-canvas {
            border-radius: 12px;
            background: #fff;
            padding: 8px;
            display: block;
        }

        .qr-label {
            font-size: 0.75rem;
            color: var(--muted);
        }

        .donate-amounts {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 16px;
        }

        .amount-btn {
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 8px 14px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.82rem;
            transition: all 0.2s;
        }

        .amount-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .amount-btn-gold {
            background: rgba(233,30,140,0.1);
            border-color: var(--accent);
            color: var(--accent);
        }

        .donate-input {
            width: 100%;
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 10px 14px;
            border-radius: 10px;
            font-family: var(--ff-body);
            font-size: 0.85rem;
            outline: none;
            transition: border-color 0.2s;
        }

        .donate-input:focus {
            border-color: var(--accent);
        }

        .donate-thanks {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 32px;
        }

        .roadmap {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .road-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: var(--surface2);
            border-radius: 12px;
            padding: 14px;
        }

        .road-icon {
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        
        .frame-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
        }

        .frame-tab {
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--muted);
            padding: 6px 14px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.78rem;
            transition: all 0.2s;
        }

        .frame-tab.active {
            background: var(--accent);
            color: #fce4ec;
            border-color: var(--accent);
        }

        .frame-search-input {
            width: 100%;
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 7px 12px;
            border-radius: 8px;
            font-family: var(--ff-body);
            font-size: 0.78rem;
            outline: none;
            margin-bottom: 8px;
        }

        .frame-search-input:focus {
            border-color: var(--accent);
        }

        .frame-cat-row {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        .frame-cat-btn {
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--muted);
            padding: 4px 10px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 0.7rem;
            transition: all 0.2s;
        }

        .frame-cat-btn.active {
            background: var(--surface);
            color: var(--accent);
            border-color: var(--accent);
        }

        .custom-frame-drop {
            border: 2px dashed var(--border);
            border-radius: 12px;
            padding: 24px 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .custom-frame-drop:hover {
            border-color: var(--accent);
            background: rgba(233,30,140,0.05);
        }

        .custom-frame-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .custom-frame-item:hover,
        .custom-frame-item.active {
            border-color: var(--accent);
        }

        .custom-frame-item img {
            width: 44px;
            height: 44px;
            object-fit: contain;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
        }

        .custom-frame-item .cf-name {
            flex: 1;
            font-size: 0.78rem;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .custom-frame-item .cf-del {
            background: none;
            border: none;
            color: var(--muted);
            cursor: pointer;
            font-size: 0.9rem;
            padding: 2px 6px;
        }

        .custom-frame-item .cf-del:hover {
            color: #e74c3c;
        }

        
        #frame-preview-overlay { display:none!important; visibility:hidden!important; pointer-events:none!important; }

        #frame-preview-overlay img {
            width: 100%;
            height: 100%;
            object-fit: fill;
            opacity: 0.85;
        }

        
        #live-frame-overlay {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: fill;
            pointer-events: none;
            z-index: 8;
            display: none;
        }

        
        #slot-indicator-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 7;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        #slot-indicator-overlay.layout-2x3,
        #slot-indicator-overlay.layout-6 {
            flex-direction: row;
            flex-wrap: wrap;
        }
        .slot-indicator-cell {
            flex: 1;
            position: relative;
            border: 2px solid rgba(233,30,140,0.18);
            box-sizing: border-box;
            transition: all 0.3s cubic-bezier(0.34,1.4,0.64,1);
            overflow: hidden;
            min-height: 0;
        }
        
        #slot-indicator-overlay.layout-6 .slot-indicator-cell {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .slot-indicator-cell.active {
            border-color: #FF85C2;
            box-shadow:
                inset 0 0 0 2px rgba(245,215,130,0.6),
                inset 0 0 24px rgba(245,215,130,0.18),
                0 0 20px rgba(245,215,130,0.35);
            background: rgba(245,215,130,0.06);
        }
        .slot-indicator-cell.active::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(245,215,130,0.12) 0%, transparent 60%);
            animation: slot-glow-pulse 0.8s ease-in-out infinite alternate;
        }
        @keyframes slot-glow-pulse {
            from { opacity: 0.5; }
            to   { opacity: 1; }
        }
        .slot-indicator-cell.done {
            border-color: rgba(16,185,129,0.45);
            box-shadow: inset 0 0 0 1.5px rgba(16,185,129,0.3);
        }
        .slot-indicator-cell.done .slot-preview-img {
            display: block;
        }
        .slot-indicator-cell.idle {
            border-color: rgba(233,30,140,0.14);
        }
        .slot-num-badge {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(245,215,130,0.18);
            border: 1.5px solid rgba(245,215,130,0.45);
            color: #FF85C2;
            font-size: 0.65rem;
            font-weight: 700;
            font-family: var(--ff-body);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            transition: all 0.25s;
        }
        .slot-indicator-cell.active .slot-num-badge {
            background: rgba(245,215,130,0.35);
            border-color: #FF85C2;
            box-shadow: 0 0 10px rgba(245,215,130,0.5);
            transform: scale(1.15);
        }
        .slot-indicator-cell.done .slot-num-badge {
            background: rgba(16,185,129,0.3);
            border-color: rgba(16,185,129,0.7);
            color: #e91e8c;
        }
        .slot-preview-img {
            display: none;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.35;
        }
        .slot-active-label {
            display: none;
            position: absolute;
            bottom: 7px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(245,215,130,0.22);
            border: 1px solid rgba(245,215,130,0.5);
            border-radius: 20px;
            padding: 2px 9px;
            font-size: 0.58rem;
            font-weight: 700;
            color: #FF85C2;
            font-family: var(--ff-body);
            white-space: nowrap;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            backdrop-filter: blur(4px);
        }
        .slot-indicator-cell.active .slot-active-label {
            display: block;
            animation: slot-label-appear 0.3s cubic-bezier(0.34,1.5,0.64,1);
        }
        @keyframes slot-label-appear {
            from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); }
            to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        }
        .slot-done-check {
            display: none;
            position: absolute;
            bottom: 6px;
            right: 6px;
            width: 18px;
            height: 18px;
            background: rgba(16,185,129,0.25);
            border: 1.5px solid rgba(16,185,129,0.6);
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        .slot-done-check svg {
            width: 10px;
            height: 10px;
            stroke: #e91e8c;
        }
        .slot-indicator-cell.done .slot-done-check {
            display: flex;
            animation: slot-check-pop 0.35s cubic-bezier(0.34,1.6,0.64,1);
        }
        @keyframes slot-check-pop {
            from { transform: scale(0); }
            to   { transform: scale(1); }
        }

        
        @media (max-width: 768px) {
            header {
                padding: 12px 16px;
                height: auto;
                flex-wrap: wrap;
                gap: 8px;
            }

            nav {
                flex-wrap: wrap;
                gap: 4px;
                justify-content: center;
            }

            nav button {
                padding: 5px 10px;
                font-size: 0.72rem;
            }

            .logo {
                font-size: 1.1rem;
            }

            .section {
                padding: 80px 16px 40px;
            }

            #home {
                padding-top: 90px;
            }

            .hero-title { color: #3d0020;
                font-size: clamp(2rem, 8vw, 5rem);
            }

            .hero-stats {
                gap: 16px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .home-features {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                margin-top: 40px;
            }

            .feat-card {
                padding: 18px 14px;
            }

            .howto-steps {
                flex-direction: column;
                align-items: center;
            }

            .step-arrow {
                transform: rotate(90deg);
            }

            .step {
                min-width: 100%;
                max-width: 100%;
            }

            .camera-layout {
                grid-template-columns: 1fr;
            }

            .camera-sidebar {
                order: -1;
            }

            .gallery-grid {
                columns: 2;
            }

            .donate-wrap {
                grid-template-columns: 1fr;
            }

            .hero-actions {
                flex-direction: column;
                align-items: center;
            }
        }

        @media (max-width: 480px) {
            .home-features {
                grid-template-columns: 1fr;
            }

            .gallery-grid {
                columns: 1;
            }

            .hero-stats {
                flex-direction: column;
                gap: 10px;
                align-items: center;
            }

            header {
                padding: 10px 12px;
            }

            nav button {
                padding: 4px 8px;
                font-size: 0.68rem;
            }
        }

        
        .menu-toggle {
            display: none;
        }

        
        .ios-tab-bar {
            display: none;
        }

        @media (max-width: 600px) {
            
            nav {
                display: none !important;
            }
            .menu-toggle {
                display: none !important;
            }
            header {
                padding: 12px 20px;
                justify-content: center;
                position: relative;
            }
            header .logo-3d {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
            .section {
                padding-bottom: calc(var(--ios-tab-height) + 36px + var(--ios-safe-bottom)) !important;
            }

            
            .ios-tab-bar {
                display: flex;
                position: fixed;
                bottom: calc(14px + var(--ios-safe-bottom));
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - 32px);
                max-width: 420px;
                z-index: 999;
                padding: 6px 8px;
                height: auto;
                align-items: center;
                justify-content: space-around;
                
                background: rgba(255, 242, 248, 0.95);
                backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
                -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
                border-radius: 26px;
                border: 1px solid rgba(233,30,140,0.18);
                box-shadow:
                    0 -4px 20px rgba(233,30,140,0.08),
                    0 8px 32px rgba(136,14,79,0.18),
                    0 0 0 0.5px rgba(255,255,255,0.6) inset,
                    0 1px 0 rgba(255,255,255,0.9) inset;
            }

            
            .ios-tab-bar::before {
                content: '';
                position: absolute;
                top: 0; left: 16px; right: 16px;
                height: 0.5px;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
                border-radius: 50%;
            }

            .ios-tab-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                padding: 8px 10px 7px;
                border-radius: 20px;
                background: transparent;
                border: none;
                color: rgba(136,14,79,0.45);
                cursor: pointer;
                transition: color 0.22s ease;
                position: relative;
                min-width: 48px;
                flex: 1;
                max-width: 70px;
            }

            .ios-tab-item:active {
                animation: ios-spring 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
            }

            
            .ios-tab-icon-wrap {
                width: 36px;
                height: 36px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
                background: transparent;
                position: relative;
            }

            
            .ios-tab-item.active .ios-tab-icon-wrap::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(145deg, rgba(233,30,140,0.28), rgba(233,30,140,0.12));
                
                border-radius: 14px;
                box-shadow:
                    0 4px 18px rgba(233,30,140,0.28),
                    0 1px 4px rgba(233,30,140,0.15),
                    inset 0 1px 0 rgba(255,255,255,0.12);
                animation: dropPulse 2.4s ease-in-out infinite;
            }

            
            .ios-tab-item.active .ios-tab-icon-wrap::after {
                content: '';
                position: absolute;
                width: 6px; height: 6px;
                border-radius: 50%;
                background: var(--accent);
                bottom: -3px;
                left: 50%;
                transform: translateX(-50%);
                box-shadow: 0 0 8px rgba(233,30,140,0.8), 0 0 16px rgba(233,30,140,0.4);
                animation: dropDot 2.4s ease-in-out infinite;
            }

            @keyframes dropPulse {
                0%, 100% { transform: scale(1); opacity: 1; }
                50%       { transform: scale(1.06); opacity: 0.85; }
            }
            @keyframes dropDot {
                0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
                50%       { transform: translateX(-50%) scale(0.7); opacity: 0.6; }
            }

            
            @keyframes tabRipple {
                0%   { transform: translateX(-50%) scale(0); opacity: 0.5; }
                100% { transform: translateX(-50%) scale(3); opacity: 0; }
            }
            .ios-tab-item:active .ios-tab-icon-wrap {
                transform: scale(0.88);
            }

            .ios-tab-item svg {
                width: 21px;
                height: 21px;
                transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1);
                stroke: currentColor;
                position: relative;
                z-index: 1;
            }

            .ios-tab-label {
                font-family: 'Nunito', -apple-system, sans-serif;
                font-size: 9.5px;
                font-weight: 600;
                letter-spacing: -0.01em;
                transition: all 0.25s ease;
                line-height: 1;
                position: relative;
                z-index: 1;
            }

            
            .ios-tab-item.active {
                color: var(--accent);
            }
            .ios-tab-item.active .ios-tab-icon-wrap {
                transform: translateY(-1px);
            }
            .ios-tab-item.active svg {
                filter: drop-shadow(0 0 5px rgba(233,30,140,0.55));
                transform: scale(1.1);
            }
            .ios-tab-item.active .ios-tab-label {
                color: var(--accent);
                font-weight: 700;
            }

            
            .ios-tab-camera .ios-tab-icon-wrap {
                width: 52px;
                height: 38px;
                border-radius: 16px;
                background: linear-gradient(140deg, #ff69b4 0%, var(--accent) 50%, #c2185b 100%);
                box-shadow:
                    0 5px 20px rgba(233,30,140,0.45),
                    0 2px 6px rgba(136,14,79,0.35),
                    inset 0 1px 0 rgba(255,255,255,0.22);
                transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
            }
            .ios-tab-camera .ios-tab-icon-wrap::before,
            .ios-tab-camera .ios-tab-icon-wrap::after { display: none !important; }
            .ios-tab-camera svg {
                stroke: #fce4ec;
                width: 19px;
                height: 19px;
                filter: none !important;
            }
            .ios-tab-camera.active .ios-tab-icon-wrap {
                background: linear-gradient(140deg, #FF85C2 0%, var(--accent2) 50%, #e91e8c 100%);
                box-shadow: 0 8px 28px rgba(233,30,140,0.60), 0 2px 8px rgba(136,14,79,0.35), inset 0 1px 0 rgba(255,255,255,0.28);
                transform: translateY(-2px) scale(1.04);
            }
            .ios-tab-camera:active .ios-tab-icon-wrap {
                transform: scale(0.91) translateY(0) !important;
            }
            .ios-tab-camera.active svg {
                filter: none !important;
            }

            
            .ios-more-sheet {
                position: fixed;
                inset: 0;
                z-index: 9998;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .ios-more-sheet.open {
                opacity: 1;
                pointer-events: auto;
            }
            .ios-more-sheet-backdrop {
                position: absolute;
                inset: 0;
                background: rgba(80,0,40,0.55);
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
            }
            .ios-more-sheet-content {
                position: relative;
                background: rgba(20,18,24,0.97);
                backdrop-filter: blur(36px) saturate(2);
                -webkit-backdrop-filter: blur(36px) saturate(2);
                border-radius: 28px 28px 28px 28px;
                margin: 0 12px calc(var(--ios-tab-height) + var(--ios-safe-bottom) + 18px) 12px;
                padding: 12px 16px 16px;
                border: 1px solid rgba(233,30,140,0.12);
                box-shadow: 0 -8px 40px rgba(136,14,79,0.15), 0 8px 40px rgba(136,14,79,0.1);
                transform: translateY(120%);
                transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1);
            }
            .ios-more-sheet.open .ios-more-sheet-content {
                transform: translateY(0);
            }
            .ios-sheet-handle {
                width: 36px; height: 4px;
                background: rgba(255,255,255,0.18);
                border-radius: 2px;
                margin: 0 auto 18px;
            }
            .ios-sheet-title {
                font-size: 13px;
                font-weight: 600;
                color: rgba(136,14,79,0.55);
                text-transform: uppercase;
                letter-spacing: 0.08em;
                padding: 0 6px;
                margin-bottom: 8px;
            }
            
            .ios-sheet-grid {
                display: grid !important;
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 8px !important;
                padding: 4px 0 8px !important;
            }

            
            #home.active {
                padding-bottom: calc(var(--ios-tab-height) + 60px + var(--ios-safe-bottom)) !important;
            }

            
            .cam-subtab-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: rgba(255,240,248,0.92);
                backdrop-filter: blur(24px) saturate(1.6);
                -webkit-backdrop-filter: blur(24px) saturate(1.6);
                border: 1px solid rgba(233,30,140,0.12);
                border-radius: 0 0 20px 20px;
                padding: 6px 4px 8px;
                gap: 2px;
                box-shadow: 0 4px 20px rgba(136,14,79,0.35);
            }
            .cam-subtab-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3px;
                padding: 7px 0 5px;
                border-radius: 14px;
                background: transparent;
                border: none;
                color: rgba(136,14,79,0.45);
                cursor: pointer;
                transition: color 0.2s ease, background 0.2s ease;
                flex: 1;
                min-width: 0;
            }
            .cam-subtab-item:active { animation: ios-spring 0.32s cubic-bezier(0.34,1.56,0.64,1) both; }
            .cam-subtab-item svg { width: 20px; height: 20px; transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1); flex-shrink: 0; }
            .cam-subtab-item span { font-size: 9.5px; font-weight: 600; font-family: 'Nunito', -apple-system, sans-serif; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
            .cam-subtab-item.active { color: var(--accent); }
            .cam-subtab-item.active svg { transform: scale(1.12); filter: drop-shadow(0 0 5px rgba(233,30,140,0.5)); }
            
            .camera-sidebar { display: none !important; }
            
            #cam-mobile-panel {
                display: block;
                background: rgba(10,10,18,0.75);
                backdrop-filter: blur(20px) saturate(1.6);
                -webkit-backdrop-filter: blur(20px) saturate(1.6);
                border: 0.5px solid rgba(255,255,255,0.08);
                border-radius: 16px;
                margin-top: 8px;
                overflow: hidden;
                animation: ios-fade-up 0.28s cubic-bezier(0.34,1.2,0.64,1) both;
            }
            #cam-mobile-panel .cam-panel-inner { padding: 14px 14px 16px; }
            #cam-mobile-panel .cam-panel-title { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; opacity: 0.8; }
            #cam-mobile-panel .tool-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
            #cam-mobile-panel .tool-btn { padding: 9px 4px; font-size: 0.75rem; border-radius: 12px; font-weight: 600; text-align: center; }
            #cam-mobile-panel .filter-grid-cam { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
            #cam-mobile-panel .layout-guide-panel,
            #cam-mobile-panel .countdown-guide-panel,
            #cam-mobile-panel .aspect-guide-panel { display: none !important; }
            #cam-mobile-panel .setting-row { padding: 9px 0; }
            #cam-mobile-panel .setting-section-label { margin: 10px 0 4px; font-size: 0.68rem; }
        }

        canvas {
            display: none;
        }

        
        .editor-slider-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .editor-slider-row label {
            font-size: 0.75rem;
            color: var(--muted);
            width: 72px;
            flex-shrink: 0;
        }
        .ed-slider {
            flex: 1;
            accent-color: var(--accent);
            cursor: pointer;
        }
        .editor-slider-row span {
            font-size: 0.72rem;
            color: var(--accent);
            width: 26px;
            text-align: right;
            flex-shrink: 0;
        }
        .ed-preset-item {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            overflow: hidden;
            text-align: center;
            transition: all .2s;
        }
        .ed-preset-item:hover { border-color: var(--accent); }
        .ed-preset-item.active { border-color: var(--accent); background: rgba(233,30,140,.12); }
        .ed-preset-swatch { height: 30px; width: 100%; }
        .ed-preset-label { font-size: 0.58rem; padding: 3px 2px; color: var(--muted); }

        
        .portfolio-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            overflow: hidden;
            transition: all .3s;
            position: relative;
        }
        .portfolio-card:hover {
            border-color: rgba(233,30,140,.4);
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(136,14,79,0.4);
        }
        .portfolio-tab-content { display: block; }

        
        .portfolio-cover-hero {
            height: 200px;
            position: relative;
            overflow: hidden;
        }
        .portfolio-cover-hero-inner {
            width: 100%; height: 100%;
            background: linear-gradient(135deg, #1a0a05, #4a2010);
            display: flex; align-items: center; justify-content: center;
            transition: transform .4s;
        }
        .portfolio-card:hover .portfolio-cover-hero-inner { transform: scale(1.04); }
        .portfolio-cover-badge {
            position: absolute; top: 14px; right: 14px;
            background: rgba(233,30,140,.9); color: #fce4ec;
            font-size: 0.65rem; font-weight: 700; padding: 4px 12px;
            border-radius: 50px; letter-spacing: .1em; text-transform: uppercase;
        }
        .portfolio-avatar {
            width: 56px; height: 56px; border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            display: flex; align-items: center; justify-content: center;
            font-family: var(--ff-display); font-weight: 700;
            color: #fce4ec; font-size: 1.2rem;
            border: 3px solid var(--border);
            margin-top: -28px; position: relative; z-index: 2;
            box-shadow: 0 4px 20px rgba(136,14,79,0.5);
        }
        .portfolio-stats-row {
            display: flex; gap: 0;
            border-top: 1px solid var(--border); margin-top: 14px;
        }
        .portfolio-stat-item {
            flex: 1; padding: 12px 8px; text-align: center;
            border-right: 1px solid var(--border);
        }
        .portfolio-stat-item:last-child { border-right: none; }
        .portfolio-stat-num {
            font-family: var(--ff-display); font-size: 1.1rem; color: var(--accent);
        }
        .portfolio-stat-lbl {
            font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px;
        }
        .portfolio-tag {
            background: var(--surface2); border: 1px solid var(--border);
            font-size: 0.7rem; padding: 3px 10px; border-radius: 50px; color: var(--muted);
            transition: all .2s;
        }
        .portfolio-tag:hover { background: rgba(233,30,140,.15); border-color: var(--accent); color: var(--accent); }

        
        .portfolio-modal {
            display: none; position: fixed; inset: 0; z-index: 9000;
            background: rgba(80,0,40,0.85); backdrop-filter: blur(16px);
            align-items: flex-start; justify-content: center;
            overflow-y: auto; padding: 20px;
        }
        .portfolio-modal.open { display: flex; animation: fadeIn .3s ease; }
        .portfolio-modal-inner {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 28px; width: 100%; max-width: 960px;
            overflow: hidden; margin: auto;
            box-shadow: 0 40px 120px rgba(80,0,40,0.7);
            animation: slideUpIn .4s cubic-bezier(.2,.9,.4,1);
        }
        @keyframes slideUpIn {
            from { transform: translateY(40px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .pm-hero {
            height: 260px; position: relative; overflow: hidden;
        }
        .pm-hero-bg {
            width: 100%; height: 100%; object-fit: cover;
            filter: brightness(.5);
        }
        .pm-hero-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(10,10,12,1) 0%, transparent 50%);
            display: flex; align-items: flex-end; padding: 32px;
            gap: 20px;
        }
        .pm-avatar {
            width: 80px; height: 80px; border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            display: flex; align-items: center; justify-content: center;
            font-family: var(--ff-display); font-weight: 700;
            color: #fce4ec; font-size: 1.8rem;
            border: 3px solid rgba(233,30,140,.4);
            flex-shrink: 0;
        }
        .pm-info { flex: 1; }
        .pm-name {
            font-family: var(--ff-display); font-size: 1.8rem;
            color: var(--text); margin-bottom: 4px;
        }
        .pm-location { font-size: 0.85rem; color: var(--accent); }
        .pm-close {
            position: absolute; top: 16px; right: 16px;
            background: rgba(136,14,79,0.5); border: 1px solid rgba(255,255,255,.15);
            color: #fff; width: 36px; height: 36px; border-radius: 50%;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all .2s;
        }
        .pm-close:hover { background: rgba(231,76,60,.5); }
        .pm-body { padding: 32px; }
        .pm-tabs {
            display: flex; gap: 4px; border-bottom: 1px solid var(--border);
            margin-bottom: 28px; overflow-x: auto;
        }
        .pm-tab {
            background: transparent; border: none; color: var(--muted);
            padding: 10px 20px; cursor: pointer; font-family: var(--ff-body);
            font-size: 0.85rem; font-weight: 500; white-space: nowrap;
            border-bottom: 2px solid transparent; transition: all .2s;
            display: flex; align-items: center; gap: 6px;
        }
        .pm-tab:hover { color: var(--text); }
        .pm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
        .pm-tab-content { display: none; }
        .pm-tab-content.active { display: block; }

        
        .pm-photo-grid {
            columns: 3; column-gap: 10px;
        }
        @media (max-width: 640px) {
            .pm-body { padding: 20px; }
            #pm-about-content { grid-template-columns: 1fr !important; }
            #pmt-contact > div { grid-template-columns: 1fr !important; }
            .pm-photo-grid { columns: 2; }
            .portfolio-modal-inner { border-radius: 20px; }
        }
        .pm-photo-item {
            break-inside: avoid; margin-bottom: 10px;
            border-radius: 10px; overflow: hidden; cursor: pointer;
            position: relative;
        }
        .pm-photo-item img {
            width: 100%; display: block; transition: transform .3s;
        }
        .pm-photo-item:hover img { transform: scale(1.05); }
        .pm-photo-overlay {
            position: absolute; inset: 0;
            background: rgba(136,14,79,0.4); opacity: 0; transition: opacity .2s;
            display: flex; align-items: center; justify-content: center;
        }
        .pm-photo-item:hover .pm-photo-overlay { opacity: 1; }

        
        .pm-service-card {
            background: var(--surface2); border: 1px solid var(--border);
            border-radius: 16px; padding: 20px; transition: all .2s;
        }
        .pm-service-card:hover { border-color: rgba(233,30,140,.4); }

        
        .pm-contact-row {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 0; border-bottom: 1px solid var(--border);
        }
        .pm-contact-row:last-child { border-bottom: none; }
        .pm-contact-icon {
            width: 36px; height: 36px; border-radius: 10px;
            background: rgba(233,30,140,.12); border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; color: var(--accent);
        }

        
        #portfolio-tabs .filter-btn {
            display: inline-flex; align-items: center; gap: 6px;
        }

        
        @media (max-width: 768px) {
            #upload > div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }
            #editor-layout {
                grid-template-columns: 1fr !important;
            }
            #ptab-booking > div, #ptab-blog > div, #ptab-seo > div {
                grid-template-columns: 1fr !important;
            }
        }

        
        .ctrl-btn.recording { background: rgba(231,76,60,.2) !important; border-color: #e74c3c !important; color: #e74c3c !important; animation: captureGlow 1.2s ease-in-out infinite; }

        
        .shot-thumb { position: relative; overflow: hidden; }
        .shot-actions-overlay {
            position: absolute; bottom: 0; left: 0; right: 0;
            display: flex; gap: 2px; padding: 4px;
            background: linear-gradient(to top, rgba(80,0,40,0.85), transparent);
            opacity: 0; transition: opacity .2s;
        }
        .shot-thumb:hover .shot-actions-overlay { opacity: 1; }
        .shot-action-btn {
            flex: 1; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
            color: #fff; padding: 5px 0; border-radius: 6px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all .2s;
        }
        .shot-action-btn:hover { background: var(--accent); border-color: var(--accent); color: #fce4ec; }
        .shot-action-btn.edit-btn:hover { background: #e91e8c; border-color: #e91e8c; color: #fff; }
        .shot-num-badge {
            position: absolute; top: 5px; left: 5px;
            background: rgba(233,30,140,.9); color: #fce4ec;
            font-size: 0.58rem; font-weight: 700; padding: 1px 5px;
            border-radius: 4px; letter-spacing: .05em;
        }
        .shot-zoom-hint {
            position: absolute; top: 5px; right: 5px;
            background: rgba(80,0,40,0.55); border-radius: 4px;
            padding: 3px; display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity .2s; color: rgba(255,255,255,0.7);
            pointer-events: none;
        }
        .shot-thumb:hover .shot-zoom-hint { opacity: 1; }
        @media (hover: none) { .shot-zoom-hint { opacity: 1 !important; } }

        
        #cam-zoom-bar {
            position:absolute; bottom:58px; left:50%; transform:translateX(-50%);
            display:none; align-items:center; gap:8px;
            background:rgba(80,0,40,0.62); backdrop-filter:blur(12px);
            -webkit-backdrop-filter:blur(12px);
            border:1px solid rgba(255,255,255,0.14); border-radius:32px;
            padding:7px 16px; z-index:14; user-select:none; white-space:nowrap;
            box-shadow:0 4px 20px rgba(136,14,79,0.4);
        }
        #cam-zoom-bar.visible { display:flex; animation:zoomBarIn .22s cubic-bezier(.34,1.4,.64,1); }
        @keyframes zoomBarIn {
            from { opacity:0; transform:translateX(-50%) scale(0.85) translateY(6px); }
            to   { opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
        }
        #cam-zoom-slider {
            -webkit-appearance:none; appearance:none;
            width:110px; height:3px; cursor:pointer; outline:none;
            background:rgba(255,255,255,0.25); border-radius:2px;
        }
        #cam-zoom-slider::-webkit-slider-thumb {
            -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
            background:var(--accent); cursor:pointer;
            box-shadow:0 0 6px rgba(233,30,140,0.55);
        }
        #cam-zoom-slider::-moz-range-thumb {
            width:17px; height:17px; border:none;
            border-radius:50%; background:var(--accent); cursor:pointer;
        }
        #cam-zoom-label {
            font-size:0.72rem; font-weight:700; color:#fff;
            min-width:34px; text-align:right; letter-spacing:.03em;
        }
        .czoom-step {
            background:none; border:none; color:rgba(255,255,255,0.65);
            font-size:1.05rem; line-height:1; padding:0 2px; cursor:pointer;
            transition:color .15s; -webkit-tap-highlight-color:transparent;
        }
        .czoom-step:hover, .czoom-step:active { color:var(--accent); }
        #btn-zoom-toggle {
            position:absolute; top:10px; right:10px; z-index:13;
            display:none; align-items:center; gap:5px;
            background:rgba(80,0,40,0.52); border:1px solid rgba(255,255,255,0.15);
            border-radius:9px; color:rgba(255,255,255,0.8);
            padding:5px 10px; font-size:0.7rem; font-weight:700;
            cursor:pointer; transition:all .18s;
            -webkit-tap-highlight-color:transparent; letter-spacing:.04em;
        }
        #btn-zoom-toggle.visible { display:flex; }
        #btn-zoom-toggle.active,
        #btn-zoom-toggle:hover { background:rgba(233,30,140,0.22); border-color:var(--accent); color:var(--accent); }

        
        .session-album-bar {
            background:var(--surface); border:1px solid var(--border);
            border-radius:14px; padding:12px 16px;
            display:flex; align-items:center; gap:10px;
            margin-bottom:14px; flex-wrap:wrap;
        }
        .album-name-input {
            flex:1; min-width:120px;
            background:var(--surface2); border:1px solid var(--border);
            border-radius:8px; padding:6px 12px;
            color:var(--text); font-size:0.8rem; outline:none;
            font-family:'Nunito',sans-serif; transition:border-color .2s;
        }
        .album-name-input:focus { border-color:var(--accent); }
        .album-badge {
            background:rgba(233,30,140,.12); border:1px solid rgba(233,30,140,.3);
            border-radius:20px; padding:4px 12px;
            font-size:0.7rem; color:var(--accent); font-weight:600; white-space:nowrap;
        }
        .preview-card-overlay {
            position:absolute; inset:0;
            background:linear-gradient(to top,rgba(80,0,40,0.82) 0%,transparent 55%);
            opacity:0; transition:opacity .2s;
            display:flex; flex-direction:column; justify-content:flex-end; padding:8px;
        }
        .preview-card:hover .preview-card-overlay { opacity:1; }
        @media (hover:none) { .preview-card-overlay { opacity:1; } }
        .preview-card-btns { display:flex; gap:5px; flex-wrap:wrap; }
        .pc-btn {
            flex:1; min-width:0;
            background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2);
            color:#fff; border-radius:7px; padding:5px 4px;
            font-size:0.65rem; font-weight:600; cursor:pointer;
            display:flex; align-items:center; justify-content:center; gap:3px;
            transition:all .15s; white-space:nowrap;
            -webkit-tap-highlight-color:transparent;
        }
        .pc-btn:hover { background:var(--accent); border-color:var(--accent); color:#fce4ec; }
        .pc-btn.pc-edit { background:rgba(99,102,241,.25); border-color:rgba(99,102,241,.4); color:#a5b4fc; }
        .pc-btn.pc-edit:hover { background:#e91e8c; border-color:#e91e8c; color:#fff; }
        .tag-row { display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px 8px; }
        .tag-chip {
            background:rgba(233,30,140,.15); border:1px solid rgba(233,30,140,.3);
            border-radius:20px; padding:2px 9px; font-size:0.62rem; color:var(--accent);
            cursor:pointer; transition:all .15s; user-select:none;
        }
        .tag-chip:hover, .tag-chip.selected { background:var(--accent); color:#fce4ec; }
        .tag-input-wrap { display:flex; gap:6px; align-items:center; padding:0 10px 8px; }
        .tag-input {
            flex:1; background:var(--surface2); border:1px solid var(--border);
            border-radius:8px; padding:5px 10px; color:var(--text);
            font-size:0.75rem; outline:none; font-family:'Nunito',sans-serif;
        }
        .tag-input:focus { border-color:var(--accent); }
        .url-import-bar {
            display:flex; gap:8px; align-items:center;
            background:var(--surface); border:1px solid var(--border);
            border-radius:12px; padding:10px 14px; margin-bottom:14px;
        }
        .url-import-input {
            flex:1; background:var(--surface2); border:1px solid var(--border);
            border-radius:8px; padding:7px 12px; color:var(--text);
            font-size:0.8rem; outline:none; font-family:'Nunito',sans-serif;
        }
        .url-import-input:focus { border-color:var(--accent); }
        .url-import-input::placeholder { color:var(--muted); font-size:0.75rem; }
        .batch-bar {
            display:none; align-items:center; gap:10px; flex-wrap:wrap;
            background:rgba(233,30,140,.07); border:1px solid rgba(233,30,140,.2);
            border-radius:14px; padding:12px 16px; margin-top:12px;
        }
        .batch-bar.visible { display:flex; }
        .upload-side-panel { display:flex; flex-direction:column; gap:14px; }
        .side-panel-card {
            background:var(--surface); border:1px solid var(--border);
            border-radius:16px; overflow:hidden;
        }
        .side-panel-title {
            font-family:'Playfair Display',serif; font-size:0.85rem; color:var(--accent);
            padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06);
            display:flex; align-items:center; gap:6px;
        }
        .exif-row {
            display:flex; justify-content:space-between; align-items:center;
            padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:0.74rem;
        }
        .exif-row:last-child { border-bottom:none; }
        .exif-key { color:var(--muted); }
        .exif-val { color:var(--text); font-weight:600; text-align:right; }
        .color-swatch-row { display:flex; gap:5px; margin-top:8px; }
        .color-swatch {
            width:26px; height:26px; border-radius:6px;
            border:2px solid rgba(255,255,255,.1); cursor:pointer;
            transition:transform .15s; flex-shrink:0;
        }
        .color-swatch:hover { transform:scale(1.2); }
        .quality-badge {
            display:inline-flex; align-items:center; gap:5px;
            padding:3px 10px; border-radius:20px; font-size:0.65rem; font-weight:700;
        }
        .quality-badge.good { background:rgba(16,185,129,.15); color:#34d399; border:1px solid rgba(233,30,140,0.25); }
        .quality-badge.warn { background:rgba(245,158,11,.15); color:#fbbf24; border:1px solid rgba(245,158,11,.3); }
        .quality-badge.bad  { background:rgba(239,68,68,.15);  color:#f87171; border:1px solid rgba(239,68,68,.3); }
        #qe-modal {
            display:none; position:fixed; inset:0; z-index:10025;
            background:rgba(80,0,40,0.92); backdrop-filter:blur(20px);
            align-items:center; justify-content:center; padding:12px;
        }
        #qe-modal.open { display:flex; animation:spm-fadein .22s ease; }
        .qe-inner {
            background:rgba(255,250,252,0.98); border:1px solid rgba(233,30,140,.2);
            border-radius:20px; width:100%; max-width:480px; overflow:hidden;
        }
        .qe-header {
            display:flex; align-items:center; justify-content:space-between;
            padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06);
        }
        .qe-canvas-wrap { padding:12px 16px; text-align:center; }
        #qe-canvas { max-width:100%; max-height:42vh; border-radius:10px; display:block; margin:0 auto; }
        .qe-toolbar { display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 10px; }
        .qe-btn {
            background:var(--surface2); border:1px solid var(--border);
            color:var(--text); border-radius:8px; padding:6px 11px;
            font-size:0.72rem; cursor:pointer; transition:all .15s;
            font-family:'Nunito',sans-serif;
        }
        .qe-btn:hover { border-color:var(--accent); color:var(--accent); }
        .qe-btn.qe-active { border-color:var(--accent); color:var(--accent); background:rgba(233,30,140,.12); }
        .qe-sliders { padding:0 16px 12px; display:flex; flex-direction:column; gap:6px; }
        .qe-slider-row { display:flex; align-items:center; gap:8px; font-size:0.73rem; }
        .qe-slider-row label { min-width:72px; color:var(--muted); }
        .qe-slider-row input[type=range] { flex:1; }
        .qe-actions { display:flex; gap:8px; padding:12px 16px; border-top:1px solid rgba(255,255,255,.06); }
        #collage-modal {
            display:none; position:fixed; inset:0; z-index:10020;
            background:rgba(80,0,40,0.9); backdrop-filter:blur(20px);
            align-items:center; justify-content:center; padding:16px;
        }
        #collage-modal.open { display:flex; animation:spm-fadein .22s ease; }
        .collage-inner {
            background:rgba(255,250,252,0.98); border:1px solid rgba(233,30,140,.2);
            border-radius:22px; width:100%; max-width:640px;
            max-height:90vh; overflow-y:auto;
        }
        .collage-header {
            display:flex; align-items:center; justify-content:space-between;
            padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.06);
            position:sticky; top:0; background:rgba(255,250,252,0.98); z-index:2; color:#3d0020;
        }
        .collage-layout-btn {
            flex:1; min-width:80px;
            background:var(--surface2); border:1px solid var(--border);
            color:var(--muted); border-radius:10px; padding:8px 6px;
            font-size:0.72rem; cursor:pointer; transition:all .18s; text-align:center;
        }
        .collage-layout-btn.active, .collage-layout-btn:hover {
            border-color:var(--accent); color:var(--accent); background:rgba(233,30,140,.1);
        }
        #collage-canvas { max-width:100%; border-radius:10px; display:block; margin:0 auto; }
        #ba-modal {
            display:none; position:fixed; inset:0; z-index:10020;
            background:rgba(80,0,40,0.9); backdrop-filter:blur(20px);
            align-items:center; justify-content:center; padding:16px;
        }
        #ba-modal.open { display:flex; animation:spm-fadein .22s ease; }
        .ba-inner {
            background:rgba(255,250,252,0.98); border:1px solid rgba(233,30,140,.2);
            border-radius:22px; width:100%; max-width:600px; overflow:hidden;
        }
        .ba-compare-wrap {
            position:relative; overflow:hidden; border-radius:12px;
            margin:14px 20px; cursor:col-resize; user-select:none;
        }
        .ba-compare-wrap img { width:100%; height:280px; object-fit:cover; display:block; }
        .ba-after-clip { position:absolute; inset:0; overflow:hidden; }
        .ba-after-clip img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
        .ba-divider { position:absolute; top:0; bottom:0; width:3px; background:#fff; transform:translateX(-50%); pointer-events:none; }
        .ba-handle {
            position:absolute; top:50%; transform:translate(-50%,-50%);
            width:36px; height:36px; border-radius:50%; background:#fff;
            box-shadow:0 2px 12px rgba(136,14,79,0.5);
            display:flex; align-items:center; justify-content:center; pointer-events:none;
        }
        .ba-label { position:absolute; top:10px; background:rgba(80,0,40,0.65); color:#fff; font-size:0.65rem; font-weight:700; padding:3px 9px; border-radius:6px; letter-spacing:.06em; }
        .ba-label.before { left:14px; }
        .ba-label.after { right:14px; }
        @media (max-width:768px) {
            #upload-3col { grid-template-columns:1fr !important; }
            #upload-3col > div[style*="grid-column"] { grid-column:auto !important; }
            .collage-inner, .ba-inner, .qe-inner { max-height:95vh; overflow-y:auto; }
        }

        
        #shot-preview-modal {
            display: none; position: fixed; inset: 0; z-index: 10010;
            background: rgba(80,0,40,0.92); backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            align-items: center; justify-content: center;
            padding: 16px;
        }
        #shot-preview-modal.open { display: flex; animation: spm-fadein .22s ease; }
        @keyframes spm-fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .spm-inner {
            position: relative; max-width: 520px; width: 100%;
            background: rgba(255,250,252,0.98);
            border: 1px solid rgba(233,30,140,0.22);
            border-radius: 22px; overflow: hidden;
            box-shadow: 0 32px 80px rgba(80,0,40,0.75);
            animation: spm-slide .24s cubic-bezier(.34,1.4,.64,1);
        }
        @keyframes spm-slide {
            from { transform: scale(0.88) translateY(28px); opacity: 0; }
            to   { transform: scale(1) translateY(0); opacity: 1; }
        }
        .spm-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .spm-title {
            font-family: var(--ff-display);
            font-size: 0.9rem; color: var(--accent); letter-spacing: .06em;
        }
        .spm-close {
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
            color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all .18s; -webkit-tap-highlight-color: transparent;
        }
        .spm-close:hover, .spm-close:active { background: #e74c3c; border-color: #e74c3c; color: #fff; }
        .spm-img-wrap {
            width: 100%; background: #fce4ec;
            display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        .spm-img-wrap img {
            width: 100%; max-height: 60vh; object-fit: contain; display: block;
        }
        .spm-actions {
            display: flex; gap: 10px; padding: 14px 16px;
            border-top: 1px solid rgba(255,255,255,0.07);
        }
        .spm-btn {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
            padding: 12px 10px; border-radius: 14px; cursor: pointer;
            font-family: var(--ff-body); font-size: 0.85rem; font-weight: 600;
            border: none; transition: all .18s; -webkit-tap-highlight-color: transparent;
            user-select: none; letter-spacing: .02em;
        }
        .spm-btn-save {
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            color: #fce4ec;
            box-shadow: 0 4px 16px rgba(233,30,140,0.3);
        }
        .spm-btn-save:active { transform: scale(0.96); opacity: 0.9; }
        .spm-btn-edit {
            background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.35);
            color: #a5b4fc;
        }
        .spm-btn-edit:active { transform: scale(0.96); background: rgba(99,102,241,0.28); }
        
        @media (hover: none) {
            .shot-actions-overlay { opacity: 1 !important; background: linear-gradient(to top, rgba(80,0,40,0.7), transparent) !important; }
        }

        
        
        

        #loading-screen {
            position: fixed; inset: 0; z-index: 99999;
            background: #fff0f7;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            overflow: hidden;
            transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1),
                        visibility 0.8s,
                        transform 0.8s cubic-bezier(0.4,0,0.2,1);
        }
        #loading-screen.hide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: scale(1.06);
        }

        
        #ls-bg {
            position: absolute; inset: 0;
            background: 
                radial-gradient(ellipse 80% 60% at 30% 20%, rgba(233,30,140,0.10) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 75% 80%, rgba(194,24,91,0.07) 0%, transparent 55%),
                linear-gradient(160deg, #fff8fb 0%, #fce4ec 40%, #f8bbd0 100%);
        }

        
        .ls-petal {
            position: absolute;
            font-size: var(--sz, 14px);
            opacity: 0;
            pointer-events: none;
            animation: lsPetalDrift var(--dur, 6s) ease-in var(--del, 0s) infinite;
            top: -30px; left: var(--left, 50%);
        }
        @keyframes lsPetalDrift {
            0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.4); }
            8%   { opacity: 0.7; }
            90%  { opacity: 0.3; }
            100% { opacity: 0; transform: translateY(110vh) rotate(var(--rot, 360deg)) scale(0.8); }
        }

        
        .ls-corner { position:absolute; z-index:8; width:22px; height:22px; }
        .ls-corner::before, .ls-corner::after {
            content:''; position:absolute;
            background: linear-gradient(135deg, #e91e8c, #c2185b);
            border-radius: 2px;
        }
        .ls-corner::before { width:100%; height:2px; }
        .ls-corner::after  { width:2px; height:100%; }
        .ls-corner.tl { top:20px; left:20px; }
        .ls-corner.tr { top:20px; right:20px; transform:scaleX(-1); }
        .ls-corner.bl { bottom:20px; left:20px; transform:scaleY(-1); }
        .ls-corner.br { bottom:20px; right:20px; transform:scale(-1); }

        
        #ls-cam-scene {
            position: relative; z-index: 20;
            width: 200px; height: 200px;
            perspective: 700px;
            display: flex; align-items: center; justify-content: center;
        }

        
        #ls-cam-group {
            position: relative;
            transform-style: preserve-3d;
            width: 140px; height: 100px;
            animation: camJumpIn 0.9s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        @keyframes camJumpIn {
            0%   { transform: translateY(180px) scale(0.4) rotateX(-30deg); opacity: 0; }
            60%  { transform: translateY(-18px) scale(1.08) rotateX(6deg); opacity: 1; }
            80%  { transform: translateY(8px) scale(0.97) rotateX(-3deg); }
            100% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; }
        }

        
        #ls-cam-body {
            position: absolute;
            width: 140px; height: 90px;
            left: 0; top: 10px;
            background: linear-gradient(145deg, #2a0018 0%, #3d0020 30%, #560027 60%, #4a001e 100%);
            border-radius: 16px 16px 14px 14px;
            box-shadow:
                0 8px 32px rgba(136,14,79,0.5),
                0 2px 8px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.12),
                inset 0 -1px 0 rgba(0,0,0,0.3);
            transform-style: preserve-3d;
        }

        
        #ls-cam-body::before {
            content: '';
            position: absolute;
            width: 48px; height: 18px;
            background: linear-gradient(145deg, #1a000e, #2a0018);
            border-radius: 8px 8px 0 0;
            top: -14px; left: 20px;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
        }

        
        #ls-cam-body::after {
            content: '';
            position: absolute;
            width: 14px; height: 14px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #ff85c2, #e91e8c 50%, #880e4f);
            top: -20px; left: 26px;
            box-shadow: 0 2px 8px rgba(233,30,140,0.7), 0 0 0 2px rgba(233,30,140,0.2);
        }

        
        #ls-lens {
            position: absolute;
            width: 56px; height: 56px;
            border-radius: 50%;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(145deg, #0a0005, #1a0010 40%, #0d0008 100%);
            box-shadow:
                0 0 0 5px rgba(233,30,140,0.2),
                0 0 0 8px rgba(136,14,79,0.1),
                inset 0 2px 4px rgba(255,255,255,0.06),
                0 4px 16px rgba(0,0,0,0.5);
        }

        
        #ls-lens::before {
            content: '';
            position: absolute;
            inset: 8px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%,
                rgba(100,180,255,0.15) 0%,
                rgba(233,30,140,0.08) 40%,
                rgba(10,0,20,0.9) 70%,
                #050003 100%);
            box-shadow:
                inset 0 2px 6px rgba(255,255,255,0.1),
                0 0 20px rgba(233,30,140,0.15);
        }
        
        #ls-lens::after {
            content: '';
            position: absolute;
            width: 10px; height: 6px;
            background: rgba(255,255,255,0.55);
            border-radius: 50%;
            top: 12px; left: 14px;
            transform: rotate(-30deg);
            filter: blur(1px);
        }

        
        #ls-viewfinder {
            position: absolute;
            width: 22px; height: 14px;
            background: linear-gradient(145deg, #0a0005, #1a0010);
            border-radius: 4px;
            top: 5px; right: 18px;
            box-shadow: inset 0 1px 3px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.4);
        }

        
        #ls-flash-module {
            position: absolute;
            width: 18px; height: 12px;
            background: linear-gradient(145deg, #1a000e, #0a0005);
            border-radius: 4px;
            top: 6px; left: 16px;
            box-shadow: inset 0 1px 2px rgba(255,255,255,0.05);
            overflow: hidden;
        }
        #ls-flash-module::after {
            content: '';
            position: absolute; inset: 3px;
            border-radius: 2px;
            background: rgba(255,240,180,0.6);
            box-shadow: 0 0 4px rgba(255,220,100,0.5);
        }

        
        #ls-grip {
            position: absolute;
            width: 14px; bottom: 10px; top: 10px; right: 8px;
            border-radius: 6px;
            background: repeating-linear-gradient(
                0deg,
                rgba(255,255,255,0.04) 0px,
                rgba(255,255,255,0.04) 1px,
                transparent 1px,
                transparent 4px
            );
        }

        
        #ls-cam-group {
            animation: camJumpIn 0.9s cubic-bezier(0.34,1.56,0.64,1) both,
                       camFloat 3s ease-in-out 0.9s infinite;
        }
        @keyframes camFloat {
            0%,100% { transform: translateY(0) rotateY(-8deg) rotateX(3deg); }
            25%     { transform: translateY(-10px) rotateY(2deg) rotateX(6deg); }
            50%     { transform: translateY(-14px) rotateY(8deg) rotateX(2deg); }
            75%     { transform: translateY(-5px) rotateY(-2deg) rotateX(4deg); }
        }

        
        #ls-flash-overlay {
            position: fixed; inset: 0; z-index: 99998;
            background: #fff;
            opacity: 0; pointer-events: none;
            animation: camFlash 0.5s ease-out 1.6s both;
        }
        @keyframes camFlash {
            0%   { opacity: 0; }
            5%   { opacity: 0.95; }
            15%  { opacity: 0.7; }
            100% { opacity: 0; }
        }

        
        #ls-lens-flash {
            position: absolute;
            width: 80px; height: 80px;
            border-radius: 50%;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(255,240,200,0.95) 0%, rgba(255,200,150,0.5) 30%, transparent 70%);
            opacity: 0; pointer-events: none;
            animation: lensFlash 0.6s ease-out 1.6s both;
            z-index: 25;
        }
        @keyframes lensFlash {
            0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
            10%  { opacity: 1; transform: translate(-50%,-50%) scale(1.4); }
            25%  { opacity: 0.8; transform: translate(-50%,-50%) scale(1.1); }
            100% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
        }

        
        #ls-shutter-ring {
            position: absolute;
            width: 60px; height: 60px;
            border-radius: 50%;
            top: 50%; left: 50%;
            transform: translate(-50%,-50%) scale(0);
            border: 3px solid rgba(255,230,150,0.8);
            opacity: 0; pointer-events: none;
            animation: shutterRing 0.8s ease-out 1.62s both;
            z-index: 24;
        }
        @keyframes shutterRing {
            0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
            15%  { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%,-50%) scale(4); }
        }

        
        #ls-cam-group.shooting {
            animation: camShoot 0.25s ease both;
        }
        @keyframes camShoot {
            0%   { transform: scale(1) rotateX(0deg); }
            30%  { transform: scale(0.93) rotateX(5deg); }
            100% { transform: scale(1) rotateX(0deg); }
        }

        
        .ls-progress-wrap {
            position: relative; z-index: 15;
            margin-top: 36px;
            width: min(260px, 80vw);
        }
        .ls-progress-track {
            width: 100%;
            height: 3px;
            background: rgba(233,30,140,0.1);
            border-radius: 3px;
            overflow: hidden;
        }
        .ls-progress-fill {
            height: 100%;
            border-radius: 3px;
            width: 0%;
            transition: width 0.4s ease;
            background: linear-gradient(90deg, #880e4f, #e91e8c, #f48fb1, #e91e8c);
            background-size: 200% 100%;
            animation: lsProgressShimmer 1.5s linear infinite;
        }
        @keyframes lsProgressShimmer {
            0% { background-position: 0% 0; }
            100% { background-position: 200% 0; }
        }

        
        .ls-logo-text {
            position: relative; z-index: 15;
            font-family: 'Playfair Display', serif !important;
            font-weight: 900 !important;
            font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, #560027, #880e4f, #e91e8c, #f48fb1, #c2185b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 200% auto;
            animation: lsLogoShimmer 3s linear infinite;
            margin-bottom: 4px;
            text-align: center;
        }
        @keyframes lsLogoShimmer {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }
        .ls-subtitle {
            position: relative; z-index: 15;
            font-family: 'Fira Code', monospace !important;
            font-size: 0.68rem;
            letter-spacing: 0.22em;
            color: rgba(194,24,91,0.55);
            text-transform: uppercase;
            text-align: center;
            animation: lsFadeIn 0.8s ease both 0.4s;
            opacity: 0;
        }
        .ls-tip {
            position: relative; z-index: 15;
            font-size: 0.72rem;
            color: rgba(136,14,79,0.5);
            font-family: 'Nunito', sans-serif;
            font-weight: 600;
            margin-top: 12px;
            text-align: center;
            letter-spacing: 0.02em;
            animation: lsFadeIn 1s ease both 0.6s; opacity: 0;
        }
        @keyframes lsFadeIn { to { opacity: 1; } }

        
        .ls-spark {
            position: absolute;
            border-radius: 50%;
            background: #e91e8c;
            pointer-events: none;
            opacity: 0;
            animation: lsSparkFloat var(--sd, 2.5s) ease-in-out var(--sdl, 0s) infinite;
        }
        @keyframes lsSparkFloat {
            0%,100% { opacity: 0; transform: scale(0) translate(0,0); }
            50% { opacity: 0.7; transform: scale(1) translate(var(--sx,10px), var(--sy,-20px)); }
        }

        
        
        #frame-picker-modal {
            position: fixed;
            inset: 0;
            z-index: 5000;
            background: rgba(80,0,40,0.88);
            backdrop-filter: blur(24px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
            padding: 20px;
        }

        #frame-picker-modal.show {
            opacity: 1;
            pointer-events: all;
        }

        .fpm-inner {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 24px;
            width: 100%;
            max-width: 900px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: fpmSlideIn 0.4s cubic-bezier(0.2,0.9,0.4,1) both;
        }

        @keyframes fpmSlideIn {
            from { transform: translateY(40px) scale(0.96); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }

        .fpm-header {
            padding: 24px 28px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .fpm-title {
            font-family: var(--ff-display);
            font-size: 1.4rem;
            color: var(--accent);
        }

        .fpm-title span {
            font-size: 0.8rem;
            color: var(--muted);
            font-family: var(--ff-body);
            font-style: normal;
            margin-left: 10px;
        }

        .fpm-close {
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--text);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .fpm-close:hover { background: #e74c3c; border-color: #e74c3c; }

        .fpm-body {
            display: flex;
            gap: 0;
            flex: 1;
            overflow: hidden;
            padding: 20px 28px 0;
        }

        
        .fpm-preview-col {
            width: 200px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-right: 20px;
            border-right: 1px solid var(--border);
        }

        .fpm-preview-label {
            font-size: 0.72rem;
            color: #880e4f;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .fpm-preview-img-wrap {
            flex: 1;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            background: #fce4ec;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            max-height: 340px;
            position: relative;
        }

        #fpm-preview-canvas {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        .fpm-preview-frame-name {
            font-size: 0.78rem;
            color: var(--accent);
            text-align: center;
        }

        
        .fpm-frames-col {
            flex: 1;
            overflow-y: auto;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .fpm-search-row {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-shrink: 0;
        }

        .fpm-search-input {
            flex: 1;
            background: var(--surface2);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 9px 14px;
            border-radius: 10px;
            font-family: var(--ff-body);
            font-size: 0.82rem;
            outline: none;
            transition: border-color 0.2s;
        }

        .fpm-search-input:focus { border-color: var(--accent); }

        .fpm-cat-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .fpm-cat-btn {
            background: var(--surface2);
            border: 1px solid var(--border);
            color: #3d0020;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.75rem;
            transition: all 0.2s;
        }

        .fpm-cat-btn.active {
            background: var(--accent);
            color: #fce4ec;
            border-color: var(--accent);
        }

        
        .fpm-tabs {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
            border-bottom: 1px solid var(--border);
            padding-bottom: 12px;
        }

        .fpm-tab {
            background: transparent;
            border: 1px solid var(--border);
            color: #3d0020;
            font-weight: 700;
            padding: 6px 16px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--ff-body);
            font-size: 0.78rem;
            transition: all 0.2s;
        }

        .fpm-tab.active {
            background: var(--accent);
            color: #fce4ec;
            border-color: var(--accent);
        }

        .fpm-panel { display: none; }
        .fpm-panel.active { display: block; }

        
        .fpm-png-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 8px;
        }

        .fpm-png-item {
            border-radius: 10px;
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.25s;
            background: var(--surface2);
            aspect-ratio: 3/4;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .fpm-png-item:hover { border-color: rgba(233,30,140,0.5); transform: translateY(-2px); }
        .fpm-png-item.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(233,30,140,0.3); }

        .fpm-png-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .fpm-png-name {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(80,0,40,0.7);
            font-size: 0.6rem;
            color: #fff;
            padding: 4px 5px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        
        .fpm-draw-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 8px;
        }

        .fpm-draw-item {
            border-radius: 10px;
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.25s;
            background: var(--surface2);
        }

        .fpm-draw-item:hover { border-color: rgba(233,30,140,0.5); transform: translateY(-2px); }
        .fpm-draw-item.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(233,30,140,0.3); }

        .fpm-draw-swatch {
            height: 52px;
            width: 100%;
        }

        .fpm-draw-label {
            font-size: 0.65rem;
            color: #2d0018;
            font-weight: 700;
            text-align: center;
            padding: 5px 4px;
        }

        .fpm-draw-item.active .fpm-draw-label { color: var(--accent); }

        
        .fpm-custom-drop {
            border: 2px dashed var(--border);
            border-radius: 12px;
            padding: 28px 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 12px;
        }

        .fpm-custom-drop:hover { border-color: var(--accent); background: rgba(233,30,140,0.04); }

        .fpm-custom-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .fpm-custom-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--surface2);
            border: 2px solid transparent;
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .fpm-custom-item:hover, .fpm-custom-item.active { border-color: var(--accent); }

        .fpm-custom-item img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,0.08); }
        .fpm-custom-item .cf-name { flex: 1; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .fpm-custom-item .cf-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 2px 6px; }
        .fpm-custom-item .cf-del:hover { color: #e74c3c; }

        
        .frames-filter-btn {
            padding: 8px 20px; border-radius: 24px; font-size: 0.82rem; font-family: var(--ff-body);
            border: 1px solid rgba(233,30,140,.25); background: rgba(255,255,255,.04);
            color: var(--muted); cursor: pointer; transition: all .22s; font-weight: 500;
        }
        .frames-filter-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(233,30,140,.08); }
        .frames-filter-btn.active {
            background: linear-gradient(135deg, rgba(233,30,140,.2), rgba(245,224,112,.1));
            border-color: var(--accent); color: var(--accent2); font-weight: 600;
            box-shadow: 0 0 16px rgba(233,30,140,.15);
        }
        .frames-card {
            border-radius: 14px; overflow: hidden; cursor: pointer;
            border: 1.5px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
            transition: all .25s cubic-bezier(.34,1.56,.64,1); position: relative;
        }
        .frames-card:hover {
            border-color: var(--accent); transform: translateY(-4px) scale(1.02);
            box-shadow: 0 10px 28px rgba(233,30,140,.2);
        }
        .frames-card img {
            width: 100%; aspect-ratio: 1/1.55; object-fit: contain;
            display: block; background: rgba(255,255,255,.04); transition: opacity .3s;
        }
        .frames-card .fc-info {
            padding: 8px 10px 10px;
            background: linear-gradient(to bottom, rgba(20,18,14,.8), rgba(10,9,7,.95));
        }
        .frames-card .fc-name { font-size: 0.78rem; color: var(--text); font-weight: 500; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
        .frames-card .fc-badge {
            display: inline-block; font-size: 0.6rem; background: rgba(233,30,140,.18);
            color: var(--accent); border-radius: 8px; padding: 2px 7px; margin-top: 4px; font-weight: 600;
        }
        .frames-card .fc-zoom-overlay {
            position: absolute; inset: 0; background: rgba(136,14,79,0.45);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity .2s; font-size: 1.8rem;
        }
        .frames-card:hover .fc-zoom-overlay { opacity: 1; }

        
        .frlb-bg-btn { transition: border-color .18s, transform .18s, box-shadow .18s; }
        .frlb-bg-btn:hover { border-color: #e91e8c !important; transform: scale(1.08); }
        .frlb-bg-btn.active { border-color: #f48fb1 !important; box-shadow: 0 0 12px rgba(245,224,112,.5); transform: scale(1.06); }

        
        .fpm-footer {
            padding: 20px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
            gap: 12px;
            flex-wrap: wrap;
        }

        .fpm-selected-info {
            font-size: 0.82rem;
            color: var(--muted);
        }

        .fpm-selected-info strong { color: var(--accent); }

        .fpm-actions {
            display: flex;
            gap: 10px;
        }

        @media (max-width: 600px) {
            .fpm-body { flex-direction: column; padding: 12px 16px 0; }
            .fpm-preview-col { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 16px; flex-direction: row; gap: 16px; align-items: center; }
            .fpm-preview-img-wrap { flex: 0 0 120px; height: 120px; min-height: auto; }
            .fpm-frames-col { padding-left: 0; }
            .fpm-header { padding: 16px 16px 0; }
            .fpm-footer { padding: 14px 16px; }
        }
    
  

  
  .site-header {
    background: rgba(255,250,252,0.92) !important;
    backdrop-filter: blur(28px) saturate(2.2) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2.2) !important;
    border-bottom: 1px solid rgba(233,30,140,0.1) !important;
    box-shadow: 0 2px 32px rgba(194,24,91,0.08) !important;
  }
  [data-theme="dark"] .site-header {
    background: rgba(26,0,16,0.92) !important;
  }

  
  .logo-emblem {
    background: var(--grad-main) !important;
    box-shadow: 0 4px 20px rgba(233,30,140,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    border-radius: 14px !important;
    animation: float 4s ease-in-out infinite;
  }
  .logo-name {
    font-family: var(--ff-display) !important;
    font-size: 30px !important;
    background: var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }
  .logo-name em { -webkit-text-fill-color: transparent; }

  
  .nav-btn {
    font-family: var(--ff-body) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    color: var(--rose-600) !important;
    transition: color 0.2s, transform 0.2s !important;
  }
  .nav-btn:hover { color: var(--rose-500) !important; transform: translateY(-1px); }
  .nav-btn.active { color: var(--rose-700) !important; }
  .nav-btn::after {
    background: var(--grad-main) !important;
    height: 3px !important;
    border-radius: 3px !important;
  }

  
  .btn-cta {
    background: var(--grad-main) !important;
    font-family: var(--ff-body) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    border-radius: var(--r-full) !important;
    box-shadow: 0 4px 20px rgba(233,30,140,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transition: transform 0.2s var(--bounce), box-shadow 0.2s !important;
  }
  .btn-cta:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 32px rgba(233,30,140,0.5), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  }
  .btn-cta:active { transform: translateY(0) scale(0.98) !important; }

  
  .art-card, .art-card-sm, .hero-main {
    border-radius: var(--r-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform 0.35s var(--spring), box-shadow 0.35s var(--ease) !important;
  }
  .art-card:hover, .art-card-sm:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(233,30,140,0.08) !important;
  }

  
  .art-card img, .art-card-sm img {
    transition: transform 0.7s var(--ease) !important;
  }
  .art-card:hover img, .art-card-sm:hover img {
    transform: scale(1.07) rotate(0.3deg) !important;
  }

  
  .hero-overlay, .art-card .card-overlay {
    background: linear-gradient(to top,
      rgba(86,0,39,0.92) 0%,
      rgba(136,14,79,0.45) 45%,
      transparent 100%) !important;
  }

  
  .hero-cat, .art-cat, .card-cat {
    background: var(--grad-main) !important;
    color: #fff !important;
    font-family: var(--ff-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    border-radius: var(--r-full) !important;
    box-shadow: 0 2px 12px rgba(233,30,140,0.3) !important;
  }

  
  .hero-title, .art-title {
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }

  
  .hero-time, .art-time {
    font-family: var(--ff-mono) !important;
    font-size: 9.5px !important;
    color: rgba(255,220,240,0.8) !important;
  }

  
  .ticker-wrap {
    background: var(--grad-dark) !important;
    box-shadow: 0 2px 16px rgba(136,14,79,0.3) !important;
    border: none !important;
  }
  .ticker-item {
    color: rgba(255,235,245,0.9) !important;
    font-family: var(--ff-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }
  .ticker-item .dot { color: var(--rose-300) !important; }

  
  .promo-banner {
    background: linear-gradient(135deg, var(--rose-800) 0%, var(--rose-700) 50%, var(--rose-600) 100%) !important;
  }
  .promo-banner::before {
    background: radial-gradient(ellipse at 15% 50%, rgba(255,182,193,0.15), transparent 55%),
                radial-gradient(ellipse at 85% 50%, rgba(255,105,180,0.1), transparent 55%) !important;
  }
  .promo-headline { color: #fff !important; }
  .promo-headline em { color: var(--rose-200) !important; }
  .promo-sub { color: rgba(255,220,240,0.7) !important; }
  .promo-cta {
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
  }
  .promo-cta:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
  .promo-dismiss { color: rgba(255,200,220,0.6) !important; }

  
  .newsletter-wrap {
    background: var(--grad-dark) !important;
    position: relative; overflow: hidden;
  }
  .newsletter-wrap::after {
    content: '💗';
    position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
    font-size: 120px; opacity: 0.06;
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
  }
  .nl-title { color: #fff !important; font-family: var(--ff-display) !important; font-size: 40px !important; }
  .nl-title em { color: var(--rose-200) !important; }
  .nl-eyebrow, .nl-note { color: rgba(255,210,235,0.6) !important; }
  .nl-sub { color: rgba(255,220,240,0.7) !important; }
  .nl-input {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border-radius: var(--r-full) !important;
  }
  .nl-input::placeholder { color: rgba(255,220,240,0.5) !important; }
  .nl-input:focus { border-color: rgba(255,255,255,0.5) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important; }
  .nl-btn {
    background: #fff !important;
    color: var(--rose-600) !important;
    font-weight: 700 !important;
    border-radius: var(--r-full) !important;
    transition: transform 0.2s var(--bounce), box-shadow 0.2s !important;
  }
  .nl-btn:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 6px 20px rgba(255,255,255,0.25) !important; }

  
  .site-footer {
    background: linear-gradient(160deg, var(--rose-900) 0%, var(--rose-800) 100%) !important;
    position: relative; overflow: hidden;
  }
  .site-footer::before {
    content: '';
    position: absolute; top: -50%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(233,30,140,0.08), transparent 60%);
    pointer-events: none;
  }
  .footer-logo { color: #fff !important; font-family: var(--ff-display) !important; font-size: 32px !important; }
  .footer-logo em { color: var(--rose-300) !important; }
  .footer-tagline { color: rgba(255,200,230,0.5) !important; }
  .footer-desc { color: rgba(255,200,230,0.7) !important; line-height: 1.9 !important; }
  .footer-col-title { color: var(--rose-300) !important; }
  .footer-link { color: rgba(255,200,230,0.65) !important; }
  .footer-link:hover { color: #fff !important; transform: translateX(3px); display: block; }
  .footer-bottom { color: rgba(255,180,220,0.5) !important; }
  .footer-bottom a { color: var(--rose-300) !important; }
  .social-pill {
    color: var(--rose-300) !important;
    border-color: rgba(233,30,140,0.25) !important;
    transition: all 0.25s var(--ease) !important;
  }
  .social-pill:hover {
    background: rgba(233,30,140,0.15) !important;
    border-color: var(--rose-300) !important;
    transform: translateY(-2px) !important;
  }

  
  #toast {
    background: var(--grad-main) !important;
    color: #fff !important;
    border-left: none !important;
    border-radius: var(--r-full) !important;
    box-shadow: 0 8px 32px rgba(233,30,140,0.4) !important;
    font-family: var(--ff-body) !important;
    font-weight: 600 !important;
    padding: 13px 28px !important;
  }

  
  #backTop {
    background: var(--grad-main) !important;
    box-shadow: 0 6px 24px rgba(233,30,140,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    border-radius: 16px !important;
    width: 52px !important; height: 52px !important;
    transition: transform 0.3s var(--bounce), box-shadow 0.3s !important;
  }
  #backTop:hover {
    transform: translateY(-5px) scale(1.08) !important;
    box-shadow: 0 12px 40px rgba(233,30,140,0.55) !important;
  }

  
  #progress {
    background: var(--grad-main) !important;
    height: 3px !important;
    box-shadow: 0 0 10px rgba(233,30,140,0.5) !important;
  }

  
  .search-box {
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-full) !important;
    transition: all 0.3s var(--ease) !important;
  }
  .search-box:focus-within {
    border-color: var(--rose-400) !important;
    box-shadow: 0 0 0 4px rgba(233,30,140,0.1), var(--shadow-sm) !important;
    transform: scale(1.01) !important;
  }
  .search-drop {
    border-radius: var(--r-lg) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden !important;
  }

  
  .form-input {
    border-radius: var(--r) !important;
    border: 1.5px solid var(--border) !important;
    background: var(--surface) !important;
    font-family: var(--ff-body) !important;
    font-size: 14px !important;
    transition: all 0.25s var(--ease) !important;
  }
  .form-input:focus {
    border-color: var(--rose-400) !important;
    box-shadow: 0 0 0 4px rgba(233,30,140,0.08) !important;
    transform: translateY(-1px) !important;
  }
  .submit-btn {
    background: var(--grad-main) !important;
    border-radius: var(--r-full) !important;
    font-family: var(--ff-body) !important;
    font-weight: 700 !important;
    transition: transform 0.2s var(--bounce), box-shadow 0.2s !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .submit-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
  }

  
  .step-num {
    background: var(--grad-main) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm) !important;
    font-family: var(--ff-mono) !important;
  }

  
  .womens-day-hero {
    background: var(--grad-main) !important;
    padding: 60px 56px 48px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
  }
  .womens-day-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ctext x='20' y='50' font-size='30' opacity='0.07'%3E🌸%3C/text%3E%3C/svg%3E");
    pointer-events: none; z-index: 0;
  }
  .wd-hero-title {
    font-family: var(--ff-display) !important;
    font-size: clamp(32px, 5.5vw, 64px) !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-shadow: 0 4px 30px rgba(136,14,79,0.4) !important;
    position: relative; z-index: 1;
    animation: fadeUp 0.8s var(--ease) both;
  }
  .wd-hero-sub {
    color: rgba(255,240,248,0.9) !important;
    font-size: 17px !important;
    font-family: var(--ff-body) !important;
    font-weight: 400 !important;
    margin-bottom: 28px !important;
    position: relative; z-index: 1;
    animation: fadeUp 0.8s 0.1s var(--ease) both;
  }
  .wd-hero-cta {
    background: rgba(255,255,255,0.95) !important;
    color: var(--rose-600) !important;
    font-family: var(--ff-body) !important;
    font-weight: 700 !important;
    border-radius: var(--r-full) !important;
    padding: 14px 36px !important;
    font-size: 14px !important;
    box-shadow: 0 8px 30px rgba(136,14,79,0.3) !important;
    transition: transform 0.25s var(--bounce), box-shadow 0.25s !important;
    position: relative; z-index: 1;
    animation: scaleIn 0.6s 0.2s var(--bounce) both;
  }
  .wd-hero-cta:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow: 0 14px 40px rgba(136,14,79,0.4) !important;
  }

  
  .ios-tab-bar {
    background: rgba(255,250,252,0.95) !important;
    backdrop-filter: blur(24px) saturate(2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(2) !important;
    border-top: 1px solid rgba(233,30,140,0.1) !important;
    box-shadow: 0 -4px 20px rgba(194,24,91,0.08) !important;
  }
  [data-theme="dark"] .ios-tab-bar {
    background: rgba(26,0,16,0.95) !important;
    border-top-color: rgba(233,30,140,0.2) !important;
  }
  .tab-item.active svg, .tab-item.active span { color: var(--rose-500) !important; }
  .tab-item svg, .tab-item span { color: var(--rose-300) !important; }

  
  .sidebar-block {
    border-radius: var(--r-xl) !important;
    border-color: var(--border) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-xs) !important;
    transition: box-shadow 0.25s !important;
  }
  .sidebar-block:hover { box-shadow: var(--shadow-md) !important; }
  .sidebar-block-head {
    background: var(--surface2) !important;
    border-bottom-color: var(--border) !important;
  }
  .sidebar-block-title {
    font-family: var(--ff-mono) !important;
    color: var(--rose-600) !important;
    letter-spacing: 0.18em !important;
  }

  
  .tag {
    background: rgba(233,30,140,0.08) !important;
    color: var(--rose-600) !important;
    border: 1px solid rgba(233,30,140,0.2) !important;
    border-radius: var(--r-full) !important;
    font-family: var(--ff-mono) !important;
    font-size: 10px !important;
    transition: all 0.2s var(--ease) !important;
  }
  .tag:hover {
    background: rgba(233,30,140,0.15) !important;
    border-color: var(--rose-400) !important;
    transform: translateY(-1px) !important;
  }

  
  .promo-sidebar-title {
    font-family: var(--ff-display) !important;
    color: var(--rose-700) !important;
    font-size: 20px !important;
  }
  .promo-sidebar-btn {
    background: var(--grad-main) !important;
    border-radius: var(--r-full) !important;
    font-family: var(--ff-body) !important;
    font-weight: 700 !important;
    transition: transform 0.2s var(--bounce), box-shadow 0.2s !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .promo-sidebar-btn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: var(--shadow-md) !important;
  }

  
  .article-body {
    font-family: var(--ff-body) !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: var(--ink) !important;
  }
  .article-body h2 {
    font-family: var(--ff-display) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--rose-800) !important;
    margin: 2.5rem 0 1rem !important;
    background: var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .article-body p { margin-bottom: 1.4rem !important; }
  .article-body blockquote {
    border-left: 4px solid var(--rose-400) !important;
    background: var(--petal) !important;
    border-radius: 0 var(--r) var(--r) 0 !important;
    padding: 16px 20px !important;
    font-style: italic !important;
    color: var(--rose-700) !important;
  }

  
  .featured-image {
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-md) !important;
  }

  
  .article-title {
    font-family: var(--ff-display) !important;
    font-size: clamp(32px, 5vw, 56px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    color: var(--rose-900) !important;
  }

  
  .article-deck {
    border-left: 4px solid var(--rose-400) !important;
    font-style: italic !important;
    font-size: 18px !important;
    color: var(--rose-700) !important;
    font-family: var(--ff-display) !important;
  }

  
  .article-cat {
    background: var(--grad-main) !important;
    color: #fff !important;
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-full) !important;
    letter-spacing: 0.22em !important;
  }

  
  .social-share-btn {
    background: rgba(233,30,140,0.08) !important;
    color: var(--rose-600) !important;
    border: 1px solid rgba(233,30,140,0.2) !important;
    border-radius: var(--r-full) !important;
    transition: all 0.2s var(--ease) !important;
  }
  .social-share-btn:hover {
    background: var(--grad-main) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  
  .author-bio-box, .bio-box {
    background: var(--petal) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-xs) !important;
  }
  .bio-name { font-family: var(--ff-display) !important; color: var(--rose-800) !important; }
  .bio-role, .author-role { color: var(--rose-500) !important; }

  
  .related-card {
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    transition: transform 0.3s var(--spring), box-shadow 0.3s !important;
  }
  .related-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .related-cat { color: var(--rose-500) !important; font-family: var(--ff-mono) !important; }
  .related-card-title { font-family: var(--ff-display) !important; font-weight: 600 !important; }

  
  #topbar {
    background: rgba(26,0,13,0.95) !important;
    border-bottom: 1px solid rgba(240,98,146,0.2) !important;
    box-shadow: 0 2px 20px rgba(136,14,79,0.3) !important;
  }
  .topbar-logo { font-family: var(--ff-display) !important; font-size: 1.1rem !important; }
  .topbar-logo .logo-1 { color: var(--rose-400) !important; }
  .topbar-logo .logo-2 { color: var(--rose-200) !important; font-style: italic !important; }
  .topbar-logo .logo-3 { color: var(--rose-400) !important; }

  
  .tb-btn {
    border-radius: var(--r) !important;
    font-family: var(--ff-body) !important;
    transition: all 0.2s var(--ease) !important;
    border-color: rgba(240,98,146,0.2) !important;
  }
  .tb-btn:hover { border-color: var(--rose-400) !important; color: var(--rose-200) !important; }
  .tb-btn.primary {
    background: var(--grad-main) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(194,24,91,0.4) !important;
  }
  .tb-btn.primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(194,24,91,0.5) !important;
  }

  
  .art-card:nth-child(1) { animation: fadeUp 0.6s 0.05s both; }
  .art-card:nth-child(2) { animation: fadeUp 0.6s 0.1s both; }
  .art-card:nth-child(3) { animation: fadeUp 0.6s 0.15s both; }
  .art-card:nth-child(4) { animation: fadeUp 0.6s 0.2s both; }
  .art-card:nth-child(5) { animation: fadeUp 0.6s 0.25s both; }
  .art-card:nth-child(6) { animation: fadeUp 0.6s 0.3s both; }

  
  .image-caption {
    font-family: var(--ff-mono) !important;
    font-size: 11px !important;
    color: var(--rose-400) !important;
    text-align: center !important;
    margin-top: 12px !important;
  }

  
  .back-link {
    color: var(--rose-500) !important;
    border-color: var(--border) !important;
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-full) !important;
    transition: all 0.2s var(--ease) !important;
  }
  .back-link:hover {
    border-color: var(--rose-400) !important;
    color: var(--rose-600) !important;
    transform: translateX(-2px) !important;
  }

  
  .toc-item.active { color: var(--rose-500) !important; }
  .toc-item:hover { color: var(--rose-600) !important; }
  .toc-item::before { background: var(--rose-400) !important; }

  
  .ring-fg { stroke: var(--rose-500) !important; }
  .ring-text { color: var(--rose-500) !important; }

  
  @media (max-width: 768px) {
    .header-top { padding: 12px 20px !important; }
    .logo-name { font-size: 22px !important; }
    .wd-hero-title { font-size: clamp(22px, 8vw, 36px) !important; }
    .womens-day-hero { padding: 40px 24px 32px !important; }
    .article-title { font-size: clamp(26px, 7vw, 40px) !important; }
    .ticker-item { font-size: 10px !important; }
    .nl-form { flex-direction: column !important; }
    .nl-input, .nl-btn { width: 100% !important; }
    .footer-top { padding: 48px 24px !important; gap: 32px !important; }
    .submit-section { padding: 48px 24px !important; grid-template-columns: 1fr !important; }
    #backTop { bottom: 90px !important; right: 20px !important; }
  }

  @media (max-width: 480px) {
    .nav-inner { padding: 0 12px !important; }
    .hero-section { padding: 24px 16px 20px !important; }
    .art-card { border-radius: var(--r-lg) !important; }
    .logo-emblem { width: 38px !important; height: 38px !important; }
  }

  
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-emblem { box-shadow: 0 4px 20px rgba(233,30,140,0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important; }
  }

  
  @media print {
    .petal-bg, .sparkle-wrap, .ribbon-83, .womens-day-hero { display: none !important; }
    body { background: white !important; color: black !important; }
  }

    

    
    .page-title {
        font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
        font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
        font-weight: 600 !important;
        background: linear-gradient(135deg, #880e4f, #e91e8c, #f48fb1) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        letter-spacing: -0.02em !important;
    }
    .page-title em { -webkit-text-fill-color: transparent !important; }
    .page-header {
        border-bottom: 1px solid rgba(233,30,140,0.12) !important;
        padding-bottom: 20px !important;
        margin-bottom: 32px !important;
    }

    
    .filter-btn, .frame-tab, .nav-more-dropdown button {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
    }
    .filter-btn.active, .frame-tab.active {
        background: linear-gradient(135deg, #880e4f, #e91e8c) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 12px rgba(233,30,140,0.3) !important;
        transform: translateY(-1px) !important;
    }
    .filter-btn:hover { transform: translateY(-1px) !important; }

    
    .feat-card {
        background: linear-gradient(145deg, #ffffff, #fdf2f7) !important;
        border: 1px solid rgba(233,30,140,0.1) !important;
        border-radius: 20px !important;
        transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
        box-shadow: 0 2px 12px rgba(233,30,140,0.06) !important;
    }
    .feat-card:hover {
        transform: translateY(-6px) scale(1.02) !important;
        box-shadow: 0 12px 40px rgba(233,30,140,0.18), 0 0 0 1px rgba(233,30,140,0.1) !important;
        border-color: rgba(233,30,140,0.25) !important;
    }
    .feat-icon {
        background: linear-gradient(135deg, rgba(233,30,140,0.1), rgba(244,143,177,0.1)) !important;
        border-radius: 14px !important;
        color: #e91e8c !important;
        box-shadow: 0 4px 12px rgba(233,30,140,0.12) !important;
    }
    .feat-title {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        color: #3d0020 !important;
    }
    .feat-desc {
        font-family: 'Nunito', sans-serif !important;
        color: #880e4f !important;
        font-size: 0.82rem !important;
    }

    
    .btn-primary {
        background: linear-gradient(135deg, #880e4f, #e91e8c) !important;
        border: none !important;
        border-radius: 50px !important;
        font-family: 'Nunito', sans-serif !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 16px rgba(233,30,140,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
        transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
    }
    .btn-primary:hover {
        transform: translateY(-3px) scale(1.02) !important;
        box-shadow: 0 8px 28px rgba(233,30,140,0.45) !important;
    }
    .btn-primary:active { transform: translateY(0) scale(0.98) !important; }
    .btn-ghost {
        background: rgba(233,30,140,0.06) !important;
        border: 1px solid rgba(233,30,140,0.2) !important;
        color: #c2185b !important;
        border-radius: 50px !important;
        font-family: 'Nunito', sans-serif !important;
        font-weight: 600 !important;
        transition: all 0.2s !important;
    }
    .btn-ghost:hover {
        background: rgba(233,30,140,0.12) !important;
        border-color: rgba(233,30,140,0.4) !important;
        transform: translateY(-1px) !important;
    }

    
    .gallery-item {
        border-radius: 16px !important;
        overflow: hidden !important;
        transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
        box-shadow: 0 2px 12px rgba(233,30,140,0.08) !important;
    }
    .gallery-item:hover {
        transform: translateY(-4px) scale(1.01) !important;
        box-shadow: 0 10px 32px rgba(233,30,140,0.2) !important;
    }
    .empty-gallery { 
        border-radius: 24px !important;
        border: 2px dashed rgba(233,30,140,0.2) !important;
        background: linear-gradient(135deg, #fff0f5, #fce4ec) !important;
    }
    .empty-icon { color: #e91e8c !important; }
    .empty-text {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 1.3rem !important;
        color: #880e4f !important;
    }

    
    .upload-area {
        background: linear-gradient(135deg, #fff0f5, #fce4ec) !important;
        border: 2px dashed rgba(233,30,140,0.25) !important;
        border-radius: 24px !important;
        transition: all 0.3s !important;
    }
    .upload-area:hover, .upload-area.drag-over {
        border-color: rgba(233,30,140,0.5) !important;
        background: linear-gradient(135deg, #fce4ec, #f8bbd0) !important;
        box-shadow: 0 0 0 4px rgba(233,30,140,0.06) !important;
    }

    
    .spm-inner, .qe-inner, .ba-inner, .collage-inner {
        background: rgba(255,250,252,0.98) !important;
        border: 1px solid rgba(233,30,140,0.15) !important;
        border-radius: 24px !important;
        box-shadow: 0 24px 80px rgba(136,14,79,0.2) !important;
        color: #3d0020 !important;
    }
    .spm-header, .qe-header, .collage-header {
        border-bottom: 1px solid rgba(233,30,140,0.1) !important;
    }
    .spm-title {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 1rem !important;
        color: #e91e8c !important;
    }
    .spm-close {
        background: rgba(233,30,140,0.06) !important;
        border: 1px solid rgba(233,30,140,0.15) !important;
        color: #c2185b !important;
    }
    .spm-close:hover { background: #e91e8c !important; color: #fff !important; border-color: transparent !important; }
    .spm-btn {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 600 !important;
        border-radius: 14px !important;
    }

    
    .camera-view {
        border-radius: 24px !important;
        box-shadow: 0 8px 40px rgba(136,14,79,0.2), inset 0 0 0 2px rgba(233,30,140,0.15) !important;
        overflow: hidden !important;
    }
    .cam-perm-card {
        background: rgba(255,250,252,0.95) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(233,30,140,0.2) !important;
    }

    
    .frame-item {
        border-radius: 14px !important;
        border: 2px solid transparent !important;
        transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
        overflow: hidden !important;
    }
    .frame-item:hover {
        border-color: rgba(233,30,140,0.4) !important;
        transform: scale(1.05) !important;
        box-shadow: 0 8px 24px rgba(233,30,140,0.2) !important;
    }
    .frame-item.selected {
        border-color: #e91e8c !important;
        box-shadow: 0 0 0 3px rgba(233,30,140,0.15) !important;
    }

    
    .ed-slider {
        accent-color: #e91e8c !important;
    }
    .editor-slider-row label {
        font-family: 'Fira Code', monospace !important;
        font-size: 0.72rem !important;
        color: #880e4f !important;
    }

    
    .home-photo-card {
        border-radius: 18px !important;
        box-shadow: 0 8px 32px rgba(136,14,79,0.15) !important;
        background: linear-gradient(145deg, rgba(253,226,237,0.6), rgba(248,187,208,0.3)) !important;
        border: 1px solid rgba(233,30,140,0.15) !important;
        backdrop-filter: blur(10px) !important;
    }

    
    @media (max-width: 768px) {
        .page-title { font-size: 1.8rem !important; }
        .donate-wrap { grid-template-columns: 1fr !important; }
        .section { padding: 80px 16px 60px !important; }
    }

    
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-thumb { background: linear-gradient(#e91e8c, #c2185b); border-radius: 4px; }
    ::-webkit-scrollbar-track { background: #fff0f5; }

    
    

    
    :root {
        --ff-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
        --ff-body:    'Nunito', 'DM Sans', system-ui, sans-serif !important;
        --ff-mono:    'Fira Code', 'Courier New', monospace !important;
    }

    
    body {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        letter-spacing: -0.01em !important;
    }

    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        line-height: 1.2 !important;
    }

    
    .hero-title {
        font-family: 'Playfair Display', serif !important;
        font-weight: 900 !important;
        font-size: clamp(2.8rem, 8vw, 5.5rem) !important;
        letter-spacing: -0.04em !important;
        line-height: 1.05 !important;
    }

    
    .page-title {
        font-family: 'Playfair Display', serif !important;
        font-weight: 900 !important;
        font-size: clamp(2rem, 5vw, 3rem) !important;
        letter-spacing: -0.03em !important;
    }

    
    .logo-text, .logo-3d span, .logo span {
        font-family: 'Playfair Display', serif !important;
        font-weight: 900 !important;
        letter-spacing: -0.03em !important;
    }

    
    nav button, .nav-btn, .nav-label {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    
    button, .btn-primary, .btn-ghost, .filter-btn, .amount-btn {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 800 !important;
    }

    
    .feat-title, .feat-desc, .road-item b {
        font-family: 'Nunito', sans-serif !important;
    }
    .feat-title { font-weight: 800 !important; font-size: 0.95rem !important; }

    
    .donate-title {
        font-family: 'Playfair Display', serif !important;
        font-weight: 700 !important;
    }

    
    .ls-logo-text {
        font-family: 'Playfair Display', serif !important;
        font-weight: 900 !important;
        font-size: clamp(1.8rem, 5vw, 2.6rem) !important;
        letter-spacing: -0.02em !important;
    }

    
    .ios-tab-label {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 800 !important;
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }

    
    .portfolio-card h3, .portfolio-card .name {
        font-family: 'Playfair Display', serif !important;
        font-weight: 700 !important;
    }

    
    p, .donate-desc, .feat-desc {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 500 !important;
        line-height: 1.75 !important;
    }

    
    .badge-pink, .ls-subtitle, code, pre, .filter-tag {
        font-family: 'Fira Code', monospace !important;
        font-weight: 500 !important;
    }

    
    .ios-tab-bar {
        background: rgba(255, 245, 250, 0.92) !important;
        border: 1px solid rgba(233,30,140,0.15) !important;
        box-shadow: 
            0 -2px 20px rgba(136,14,79,0.15),
            0 8px 40px rgba(136,14,79,0.2),
            inset 0 1px 0 rgba(255,255,255,0.8) !important;
    }
    .ios-tab-bar::before {
        background: linear-gradient(90deg, transparent, rgba(233,30,140,0.15), transparent) !important;
    }
    .ios-tab-item {
        color: rgba(136,14,79,0.5) !important;
    }
    .ios-tab-item.active {
        color: #e91e8c !important;
    }
    .ios-tab-item.active .ios-tab-icon-wrap::before {
        background: linear-gradient(145deg, rgba(233,30,140,0.15), rgba(233,30,140,0.06)) !important;
    }
    .ios-tab-camera .ios-tab-icon-wrap {
        background: linear-gradient(135deg, #880e4f, #e91e8c) !important;
    }
    .ios-tab-camera svg {
        stroke: #fff !important;
    }

    
    .ios-more-sheet-content {
        background: rgba(255,245,250,0.97) !important;
        border: 1px solid rgba(233,30,140,0.12) !important;
        color: #3d0020 !important;
    }
    .ios-sheet-title {
        color: rgba(136,14,79,0.6) !important;
        font-family: 'Fira Code', monospace !important;
        font-weight: 500 !important;
    }
    .ios-sheet-item {
        color: #3d0020 !important;
    }
    .ios-sheet-item-label {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 700 !important;
        color: #3d0020 !important;
    }
    .ios-sheet-item-icon {
        background: rgba(233,30,140,0.08) !important;
        border: 1px solid rgba(233,30,140,0.15) !important;
        color: #e91e8c !important;
    }

    

.fpm-guide-banner{background:linear-gradient(135deg,#fff0f6,#fce4ec);border:1.5px solid rgba(233,30,140,0.18);border-radius:18px;padding:14px 16px;margin-bottom:14px;}
.fpm-guide-step{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.fpm-guide-step:last-child{margin-bottom:0;}
.fpm-guide-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#880e4f,#e91e8c);color:#fff;font-family:'Nunito',sans-serif;font-size:0.8rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(233,30,140,0.3);}
.fpm-guide-text{font-family:'Nunito',sans-serif;font-size:0.82rem;color:#3d0020;font-weight:700;line-height:1.55;}
.fpm-guide-text em{color:#e91e8c;font-style:normal;font-weight:800;}
.fpm-demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.fpm-demo-card{border-radius:14px;overflow:hidden;border:2px solid rgba(233,30,140,0.12);background:#fff;cursor:pointer;transition:transform .2s,border-color .2s;text-align:center;}
.fpm-demo-card:hover{transform:translateY(-3px);border-color:rgba(233,30,140,0.45);}
.fpm-demo-thumb{width:100%;aspect-ratio:3/4;position:relative;overflow:hidden;}
.fpm-demo-label{font-family:'Nunito',sans-serif;font-size:0.68rem;font-weight:800;color:#3d0020;padding:5px 4px 6px;line-height:1.2;}
.fpm-tip-row{display:flex;align-items:center;gap:8px;background:rgba(233,30,140,0.05);border-radius:12px;padding:9px 12px;margin-top:4px;}
.fpm-tip-icon{font-size:1rem;flex-shrink:0;}
.fpm-tip-text{font-family:'Nunito',sans-serif;font-size:0.78rem;color:#560027;font-weight:700;line-height:1.45;}

.fpm-tab{font-size:0.82rem!important;font-weight:800!important;border-radius:14px!important;padding:8px 14px!important;}
.fpm-cat-btn{font-size:0.8rem!important;font-weight:800!important;border-radius:50px!important;}
.fpm-draw-label{font-size:0.72rem!important;font-weight:800!important;color:#2d0018!important;}
.fpm-png-name{font-size:0.68rem!important;font-weight:800!important;}
.fpm-preview-label{font-size:0.85rem!important;font-weight:800!important;color:#880e4f!important;}
.fpm-title{font-size:1.05rem!important;font-weight:900!important;color:#2d0018!important;}
.fpm-selected-info{font-size:0.82rem!important;font-weight:700!important;color:#560027!important;}
.fpm-search-input{font-size:0.85rem!important;font-weight:600!important;color:#2d0018!important;}
.fpm-search-input::placeholder{color:rgba(136,14,79,0.45)!important;}

        
        @keyframes adTimerShrink{from{width:100%}to{width:0%}}
        @keyframes adShimmer{0%,100%{opacity:0}50%{opacity:1}}

body { color: #2a0018 !important; }

#home .section-inner, #home > div:first-of-type {
  position: relative;
}

body {
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(255,182,212,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(248,155,200,0.25) 0%, transparent 45%),
    radial-gradient(ellipse at 60% 80%, rgba(255,204,230,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 5% 85%, rgba(244,143,177,0.2) 0%, transparent 45%),
    linear-gradient(160deg, #fce4ec 0%, #fff0f6 35%, #fdf5fa 60%, #fff0f5 100%) !important;
  background-attachment: fixed !important;
}

.feat-card, .card, .glass { color: #2a0018 !important; }
.feat-card p, .feat-card span, .card p { color: #560027 !important; }
.feat-card h3, .feat-card h4 { color: #1a000e !important; }

.page-title, h1, h2 { color: #1a000e !important; font-weight: 900 !important; }
.page-subtitle, .section-subtitle { color: #560027 !important; }

.text-muted, [class*="muted"], .caption { color: #880e4f !important; }

header { 
  background: rgba(252,228,236,0.92) !important;
  backdrop-filter: blur(24px) saturate(2) !important;
  border-bottom: 1px solid rgba(233,30,140,0.12) !important;
  box-shadow: 0 2px 20px rgba(194,24,91,0.1) !important;
}
nav button { color: #560027 !important; font-weight: 700 !important; }
nav button.active, nav button:hover { color: #e91e8c !important; }

footer { 
  background: linear-gradient(160deg, #3d0020 0%, #560027 40%, #1a000e 100%) !important;
  color: #f8bbd0 !important;
}
footer a, footer span { color: #f48fb1 !important; }
footer strong { color: #fff !important; }

input, textarea, select {
  color: #2a0018 !important;
  background: rgba(255,255,255,0.88) !important;
}
input::placeholder, textarea::placeholder { color: rgba(136,14,79,0.4) !important; }
label { color: #560027 !important; font-weight: 700 !important; }

.btn-primary, [class*="btn-primary"] {
  background: linear-gradient(135deg, #880e4f 0%, #e91e8c 60%, #f06292 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(80,0,40,0.3) !important;
}
.btn-ghost, [class*="btn-ghost"] {
  border-color: rgba(233,30,140,0.35) !important;
  color: #880e4f !important;
  font-weight: 700 !important;
}
.btn-ghost:hover { background: rgba(233,30,140,0.08) !important; color: #e91e8c !important; }

.feat-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(255,240,248,0.8) 100%) !important;
  border: 1px solid rgba(233,30,140,0.12) !important;
  box-shadow: 0 4px 24px rgba(194,24,91,0.1), 0 1px 4px rgba(194,24,91,0.06) !important;
}
.feat-card:hover {
  box-shadow: 0 12px 40px rgba(194,24,91,0.2), 0 2px 8px rgba(194,24,91,0.1) !important;
  border-color: rgba(233,30,140,0.25) !important;
}

.gallery-item { 
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(136,14,79,0.15) !important;
}

.section { 
  border-top: 1px solid rgba(233,30,140,0.06) !important;
}

.promo-banner, .ribbon-83 {
  background: linear-gradient(90deg, #560027 0%, #e91e8c 35%, #f48fb1 55%, #e91e8c 75%, #560027 100%) !important;
  background-size: 300% auto !important;
  animation: bannerSlide 8s linear infinite, ribbonWave 6s ease-in-out infinite !important;
}
@keyframes bannerSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

#letter83 {
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(255,182,212,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(248,155,200,0.3) 0%, transparent 50%),
    linear-gradient(160deg, #fff5fb 0%, #fce4ec 50%, #fff0f5 100%) !important;
  min-height: 100vh !important;
}
#letter83 .l83i { 
  background: rgba(255,255,255,0.92) !important; 
  color: #2a0018 !important;
  border: 1.5px solid rgba(233,30,140,0.2) !important;
  font-size: 0.9rem !important;
}
#letter83 textarea.l83i { min-height: 120px !important; }
#l83-preview-card { 
  min-height: 100px !important;
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  color: #2a0018 !important;
}

.l83-tmpl-btn:hover { 
  background: rgba(233,30,140,0.12) !important;
  border-color: rgba(233,30,140,0.35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(233,30,140,0.15) !important;
}

.l83th, .l83-deco-btn, .l83-font-btn {
  transition: all 0.2s ease !important;
}
.l83th:hover, .l83-deco-btn:hover, .l83-font-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(233,30,140,0.2) !important;
}

#donate .page-title { color: #1a000e !important; }
#donate p { color: #560027 !important; }
.qr-label { color: #880e4f !important; font-weight: 700 !important; }

.sidebar-tab-btn { color: #f48fb1 !important; }
.sidebar-tab-btn.active, .sidebar-tab-btn:hover { 
  color: #fff !important; 
  background: rgba(233,30,140,0.2) !important;
}

.cam-section-title, .cam-panel-title { color: #f48fb1 !important; font-weight: 800 !important; }

.ai-msg.user .ai-bubble { 
  background: linear-gradient(135deg, #880e4f, #e91e8c) !important;
  color: #fff !important;
}
.ai-msg.bot .ai-bubble { 
  background: rgba(255,255,255,0.92) !important;
  color: #2a0018 !important;
  border: 1px solid rgba(233,30,140,0.15) !important;
}

.fpm-tab.active { 
  background: linear-gradient(135deg, #880e4f, #e91e8c) !important;
  color: #fff !important;
}

#cam-media-ad { border-radius: 20px; overflow: hidden; }
.side-ad-inner { border: 1px solid rgba(255,255,255,0.15) !important; }

.stat-num, [class*="stat"] span:first-child { 
  color: #e91e8c !important; 
  font-weight: 900 !important;
}

.badge-pink { letter-spacing: 0.15em !important; }

[data-tooltip]::after {
  background: rgba(40,0,20,0.92) !important;
  color: #f8bbd0 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] body {
  background: linear-gradient(160deg, #1a000e 0%, #0d0008 50%, #120010 100%) !important;
}
[data-theme="dark"] .glass {
  background: linear-gradient(135deg, rgba(40,0,20,0.7) 0%, rgba(60,0,30,0.5) 100%) !important;
  border-color: rgba(233,30,140,0.2) !important;
}
[data-theme="dark"] .feat-card {
  background: linear-gradient(145deg, rgba(30,0,15,0.92) 0%, rgba(50,0,25,0.8) 100%) !important;
  border-color: rgba(233,30,140,0.18) !important;
}
[data-theme="dark"] .page-title, 
[data-theme="dark"] h1, 
[data-theme="dark"] h2 { color: #f8bbd0 !important; }
[data-theme="dark"] p, [data-theme="dark"] span { color: #f48fb1 !important; }
[data-theme="dark"] input, [data-theme="dark"] textarea {
  background: rgba(30,0,15,0.8) !important;
  color: #f8bbd0 !important;
  border-color: rgba(233,30,140,0.25) !important;
}

#womens-day-banner {
  background: linear-gradient(90deg, #560027 0%, #880e4f 20%, #e91e8c 45%, #f48fb1 60%, #e91e8c 75%, #880e4f 90%, #560027 100%) !important;
  background-size: 300% auto !important;
  animation: bannerSlide 10s linear infinite !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(80,0,40,0.4) !important;
  padding: 11px 48px !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
}

#loading-screen { 
  background: linear-gradient(160deg, #fce4ec 0%, #fff0f5 50%, #fdf5fa 100%) !important;
}

@media (max-width: 768px) {
  .feat-card { padding: 18px !important; }
  .section { padding: 48px 16px !important; }
  h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
}

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #e91e8c !important;
  outline-offset: 2px !important;
}

@media print {
  header, footer, #womens-day-banner, .side-ad-wrap { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* ============================================================ */

#skin-smooth-badge {
    display: none;
    position: absolute; top: 10px; right: 10px; z-index: 50;
    align-items: center; gap: 5px;
    background: rgba(255,180,200,0.15);
    border: 1px solid rgba(255,150,180,0.4);
    border-radius: 20px; padding: 4px 10px;
    font-size: 0.68rem; color: #ffb3c6;
    backdrop-filter: blur(8px);
    animation: skin-badge-pulse 2s ease-in-out infinite;
}
@keyframes skin-badge-pulse {
    0%,100%{box-shadow:0 0 0 0 rgba(255,150,180,0)}
    50%{box-shadow:0 0 0 6px rgba(255,150,180,0.15)}
}

#filter-cat-bar { -ms-overflow-style:none; scrollbar-width:none; }
#filter-cat-bar::-webkit-scrollbar { display:none; }

#sticker-size-panel {
    display: none;
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    z-index: 20; background: rgba(10,10,14,0.88);
    border: 1px solid rgba(233,30,140,0.25); border-radius: 20px;
    padding: 6px 14px; gap: 10px; align-items: center;
    backdrop-filter: blur(12px);
    white-space: nowrap;
}
#sticker-size-panel.visible { display: flex; }
#sticker-size-panel label { font-size: 0.68rem; color: var(--muted); }
#sticker-size-range { width: 100px; accent-color: var(--accent); cursor: pointer; }
#sticker-delete-btn {
    background: rgba(255,60,60,0.15); border: 1px solid rgba(255,60,60,0.3);
    color: #ff6060; border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.7rem; transition: all .2s;
}
#sticker-delete-btn:hover { background: rgba(255,60,60,0.3); }

@keyframes home-orb-float {
    0%,100%{transform:translateY(0) scale(1);opacity:0.6}
    33%{transform:translateY(-30px) scale(1.05);opacity:0.9}
    66%{transform:translateY(15px) scale(0.97);opacity:0.7}
}
.home-orb {
    position:absolute; border-radius:50%; pointer-events:none;
    animation: home-orb-float var(--dur,18s) var(--delay,0s) ease-in-out infinite;
    filter: blur(var(--blur,80px));
}

.feat-card {
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.feat-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 60px rgba(233,30,140,0.15), 0 0 0 1px rgba(233,30,140,0.2) !important;
}
.feat-card:active { transform: scale(0.97) !important; }

@keyframes stat-count-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stat { animation: stat-count-up 0.6s ease both; }
.stat:nth-child(1){animation-delay:0.2s}
.stat:nth-child(2){animation-delay:0.4s}
.stat:nth-child(3){animation-delay:0.6s}

.home-photo-card {
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
}
.home-photo-card:hover {
    box-shadow: 0 24px 80px rgba(233,30,140,0.2), 0 0 0 1px rgba(233,30,140,0.15) !important;
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.scroll-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

@keyframes hero-letter-in {
    from{opacity:0;transform:translateY(20px) rotateX(-40deg)}
    to{opacity:1;transform:translateY(0) rotateX(0)}
}
.hero-letter {
    display:0;
    animation:hero-letter-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
    background: linear-gradient(135deg, #e91e8c 0%, #f48fb1 25%, #fff8dc 50%, #e91e8c 75%, #f48fb1 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(233,30,140,0.3));
}

.home-new-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(233,30,140,0.1);
    border: 1px solid rgba(233,30,140,0.25);
    border-radius: 30px; padding: 5px 14px;
    font-size: 0.68rem; color: var(--accent);
    letter-spacing: 0.08em;
    animation: fadeUp 0.6s ease both, badge-glow 3s ease-in-out infinite 1s;
    margin-bottom: 16px;
}
@keyframes badge-glow {
    0%,100%{box-shadow:0 0 0 0 rgba(233,30,140,0)}
    50%{box-shadow:0 0 20px rgba(233,30,140,0.2)}
}

.home-feat-cat-row {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin: 24px 0 16px;
}
.home-feat-cat-btn {
    padding: 5px 16px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all .25s;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
}
.home-feat-cat-btn.active, .home-feat-cat-btn:hover {
    background: rgba(233,30,140,0.12);
    border-color: rgba(233,30,140,0.4);
    color: var(--accent);
}

@keyframes border-dance {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.hero-gradient-border {
    position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
    background: linear-gradient(270deg, #e91e8c, #ff80aa, #40a0ff, #80ff80, #e91e8c);
    background-size: 400% 400%;
    animation: border-dance 6s ease infinite;
    opacity: 0;
    transition: opacity .3s;
}
.feat-card:hover .hero-gradient-border { opacity: 0.25; }

/* ============================================================ */

.ei {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}
.ei svg {
    display: block;
}

/* ============================================================ */

@media (min-width: 601px) {
    #ios-more-sheet {
        display: none !important;
    }
}

.ios-sheet-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 4px 0 8px !important;
}

.ios-sheet-item {
    
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    
    padding: 12px 4px 10px !important;
    margin: 0 !important;
    
    background: rgba(255,255,255,0.05) !important;
    border: 0.5px solid rgba(255,255,255,0.1) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    outline: none !important;
    
    color: #f0ece4 !important;
    font-family: var(--ff-body) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.ios-sheet-item:hover {
    background: rgba(255,255,255,0.08) !important;
}

.ios-sheet-item:active {
    background: rgba(255,255,255,0.12) !important;
    transform: scale(0.94) !important;
}

.ios-sheet-item-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    background: rgba(233,30,140,0.12) !important;
    border: 0.5px solid rgba(233,30,140,0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

.ios-sheet-item-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #e91e8c !important;
    fill: none !important;
    display: block !important;
}

.ios-sheet-item-label {
    font-size: 0.67rem !important;
    font-weight: 600 !important;
    color: #f0ece4 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.ios-sheet-item-label span {
    display: block !important;
    color: #7a7570 !important;
    font-weight: 400 !important;
    font-size: 0.6rem !important;
    margin-top: 1px !important;
}

.ios-sheet-item-sub {
    display: none !important;
}

#ios-more-sheet .ios-more-sheet-content {
    background: rgba(16,14,22,0.97) !important;
    backdrop-filter: blur(40px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
}

#ios-more-sheet .ios-sheet-title {
    color: rgba(200,180,140,0.6) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0 4px !important;
    margin-bottom: 10px !important;
}

/* ============================================================ */

#pbPrivacyOverlay {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,0,60,0.96) 0%, rgba(5,0,15,0.98) 100%);
  backdrop-filter: blur(12px) saturate(1.4);
  animation: pbP2FadeIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pbP2FadeIn { from { opacity:0 } to { opacity:1 } }

#pbPrivacyOverlay::before,
#pbPrivacyOverlay::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none; filter:blur(60px);
}
#pbPrivacyOverlay::before {
  width:340px; height:340px; top:-60px; left:-80px;
  background: radial-gradient(circle, rgba(233,30,140,0.22) 0%, transparent 70%);
  animation: pbOrbDrift 8s ease-in-out infinite alternate;
}
#pbPrivacyOverlay::after {
  width:280px; height:280px; bottom:-40px; right:-60px;
  background: radial-gradient(circle, rgba(120,40,220,0.2) 0%, transparent 70%);
  animation: pbOrbDrift 11s ease-in-out infinite alternate-reverse;
}
@keyframes pbOrbDrift { 0%{transform:translate(0,0)} 100%{transform:translate(30px,20px)} }

#pbPrivacyBox {
  position: relative; z-index: 2;
  width: 100%; max-width: 500px;
  background: linear-gradient(160deg, rgba(28,4,48,0.95) 0%, rgba(18,2,34,0.98) 100%);
  border: 1px solid rgba(233,30,140,0.25);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 20px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(233,30,140,0.15),
    inset 0 1px 0 rgba(255,255,255,0.07);
  animation: pbP2SlideUp 0.7s cubic-bezier(0.34,1.2,0.64,1) 0.1s both;
}
@keyframes pbP2SlideUp {
  from { transform: translateY(60px) scale(0.96); opacity:0 }
  to   { transform: translateY(0)    scale(1);    opacity:1 }
}

#pbPrivacyBoxInner {
  padding: 36px 32px 28px;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(233,30,140,0.3) transparent;
}
#pbPrivacyBoxInner::-webkit-scrollbar { width: 4px; }
#pbPrivacyBoxInner::-webkit-scrollbar-thumb { background: rgba(233,30,140,0.35); border-radius: 4px; }

#pbPrivacyBox .pb2-topbar {
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #e91e8c 30%, #c084fc 65%, transparent 100%);
}

.pb2-header { text-align: center; margin-bottom: 24px; }

.pb2-shield-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(145deg, rgba(233,30,140,0.15), rgba(120,40,220,0.1));
  border: 1px solid rgba(233,30,140,0.3);
  margin-bottom: 16px;
  position: relative;
  box-shadow: 0 0 30px rgba(233,30,140,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pb2-shield-wrap::after {
  content:''; position:absolute; inset:-1px; border-radius:18px;
  background: linear-gradient(145deg, rgba(233,30,140,0.4), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}
.pb2-shield-svg { width:28px; height:28px; }

.pb2-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 6px;
  background: linear-gradient(135deg, #fff 0%, #f9a8d4 50%, #e879f9 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pb2-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(244,143,177,0.55);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pb2-divider {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
}
.pb2-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,30,140,0.35));
}
.pb2-divider-line:last-child {
  background: linear-gradient(90deg, rgba(233,30,140,0.35), transparent);
}
.pb2-divider-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(233,30,140,0.6);
  box-shadow: 0 0 6px rgba(233,30,140,0.8);
}

.pb2-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.pb2-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  cursor: default;
  animation: pbItemIn 0.5s cubic-bezier(0.34,1.2,0.64,1) both;
}
.pb2-item:nth-child(1){animation-delay:0.25s}
.pb2-item:nth-child(2){animation-delay:0.35s}
.pb2-item:nth-child(3){animation-delay:0.45s}
.pb2-item:nth-child(4){animation-delay:0.55s}
@keyframes pbItemIn {
  from { transform: translateX(-16px); opacity:0 }
  to   { transform: translateX(0);     opacity:1 }
}
.pb2-item:hover {
  background: rgba(233,30,140,0.07);
  border-color: rgba(233,30,140,0.2);
  transform: translateX(3px);
}

.pb2-icon-wrap {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.pb2-icon-wrap.c-green  { background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.28); }
.pb2-icon-wrap.c-pink   { background:rgba(233,30,140,0.12); border:1px solid rgba(233,30,140,0.28); }
.pb2-icon-wrap.c-violet { background:rgba(167,139,250,0.12); border:1px solid rgba(167,139,250,0.28); }
.pb2-icon-wrap.c-amber  { background:rgba(251,191,36,0.12);  border:1px solid rgba(251,191,36,0.28);  }
.pb2-icon-wrap svg { width:18px; height:18px; }

.pb2-item-text { flex:1; }
.pb2-item-title {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem; font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.pb2-item-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}

.pb2-seal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(52,211,153,0.08) 0%, rgba(16,185,129,0.05) 100%);
  border: 1px solid rgba(52,211,153,0.2);
  animation: pbSealIn 0.5s ease 0.65s both;
}
@keyframes pbSealIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.pb2-seal svg { flex-shrink:0; width:18px; height:18px; }
.pb2-seal-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem; font-weight: 500;
  color: rgba(110,231,183,0.85);
  line-height: 1.4;
}
.pb2-seal-text strong { color: #6ee7b7; font-weight:600; display:block; }

#pbPrivAcceptBtn {
  width: 100%;
  padding: 15px 20px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #e91e8c 0%, #ad1457 55%, #7b1fa2 100%);
  border: none; border-radius: 14px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer; letter-spacing: 0.02em;
  box-shadow: 0 4px 30px rgba(233,30,140,0.5), 0 1px 0 rgba(255,255,255,0.1) inset;
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  animation: pbBtnIn 0.5s ease 0.7s both;
}
@keyframes pbBtnIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
#pbPrivAcceptBtn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  border-radius: 14px;
}
#pbPrivAcceptBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(233,30,140,0.65), 0 1px 0 rgba(255,255,255,0.15) inset;
}
#pbPrivAcceptBtn:active { transform: translateY(1px); }
#pbPrivAcceptBtn .btn-shimmer {
  position:absolute; top:0; left:-100%; width:50%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: btnShimmer 3s ease 1.5s infinite;
}
@keyframes btnShimmer { 0%{left:-100%} 40%,100%{left:200%} }
#pbPrivAcceptBtn svg { width:18px; height:18px; }

.pb2-footer {
  text-align: center; margin-top: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem; font-weight: 400;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.pb2-footer a {
  color: rgba(244,143,177,0.4);
  text-decoration: none; border-bottom: 1px solid rgba(244,143,177,0.2);
  cursor: pointer; transition: color 0.15s;
}
.pb2-footer a:hover { color: rgba(244,143,177,0.7); }

.pb2-trust {
  display: flex; justify-content: center; gap: 16px;
  margin-top: 16px; flex-wrap: wrap;
}
.pb2-trust-badge {
  display: flex; align-items: center; gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem; font-weight: 500;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pb2-trust-badge svg { width:11px; height:11px; opacity:0.4; }

@media (max-width:480px) {
  #pbPrivacyBoxInner { padding: 28px 20px 22px; }
  .pb2-title { font-size: 1.3rem; }
}

/* ============================================================ */

.h1-icon {
            position: absolute;
            left: var(--ix);
            top: var(--iy);
            transform: translateY(-50%);
            pointer-events: none;
            animation: h1-float 3.2s ease-in-out var(--id, 0s) infinite;
            opacity: 0.92;
            filter: drop-shadow(0 2px 6px rgba(233,30,140,0.3));
        }
        @keyframes h1-float {
            0%,100% { transform: translateY(-50%) rotate(-8deg) scale(1); }
            50%      { transform: translateY(calc(-50% - 8px)) rotate(8deg) scale(1.12); }
        }

/* ============================================================ */

.home-3d-scene {
            width: 100%; max-width: 900px;
            height: 200px;
            position: relative;
            margin-top: 40px;
            perspective: 1200px;
            overflow: visible;
            animation: fadeUp 0.8s 0.55s ease both;
        }
        .home-photo-card {
            position: absolute;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--a) 0%, var(--b) 100%);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 20px 60px rgba(136,14,79,0.5), 0 4px 12px rgba(233,30,140,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.08);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .home-photo-card::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
        }
        .home-photo-card:hover { box-shadow: 0 32px 80px rgba(80,0,40,0.6), 0 8px 24px rgba(233,30,140,0.2); }

        
        .hpc-1 {
            --a: #fce4ec; --b: #2a1e00;
            width: 140px; height: 180px;
            left: 50%; top: 10px;
            transform: translateX(-50%) rotate(-2deg) translateZ(0px);
            animation: hpc-float-1 6s ease-in-out infinite;
            z-index: 5;
        }
        
        .hpc-2 {
            --a: #150f00; --b: #251a00;
            width: 120px; height: 155px;
            left: calc(50% - 170px); top: 20px;
            transform: rotate(-8deg) translateZ(-80px);
            animation: hpc-float-2 7s ease-in-out infinite 0.5s;
            z-index: 4; opacity: 0.85;
        }
        
        .hpc-3 {
            --a: #120e00; --b: #1e1800;
            width: 120px; height: 155px;
            right: calc(50% - 170px); top: 15px;
            transform: rotate(7deg) translateZ(-80px);
            animation: hpc-float-3 8s ease-in-out infinite 1s;
            z-index: 4; opacity: 0.85;
        }
        
        .hpc-4 {
            --a: #0e0b00; --b: #181200;
            width: 100px; height: 130px;
            left: calc(50% - 310px); top: 35px;
            transform: rotate(-14deg) translateZ(-160px);
            animation: hpc-float-2 9s ease-in-out infinite 1.5s;
            z-index: 3; opacity: 0.6;
        }
        
        .hpc-5 {
            --a: #0f0c00; --b: #1c1500;
            width: 100px; height: 130px;
            right: calc(50% - 310px); top: 30px;
            transform: rotate(13deg) translateZ(-160px);
            animation: hpc-float-3 10s ease-in-out infinite 2s;
            z-index: 3; opacity: 0.6;
        }
        @keyframes hpc-float-1 {
            0%,100% { transform: translateX(-50%) rotate(-2deg) translateY(0px); }
            50%      { transform: translateX(-50%) rotate(1deg) translateY(-12px); }
        }
        @keyframes hpc-float-2 {
            0%,100% { transform: rotate(-8deg) translateY(0px); }
            50%      { transform: rotate(-5deg) translateY(-8px); }
        }
        @keyframes hpc-float-3 {
            0%,100% { transform: rotate(7deg) translateY(0px); }
            50%      { transform: rotate(4deg) translateY(-10px); }
        }

        
        .hpc-inner {
            position: absolute; inset: 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 6px;
        }
        .hpc-icon { opacity: 0.4; }
        .hpc-label {
            font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
            color: rgba(255,255,255,0.3); font-weight: 600;
        }
        .hpc-badge {
            position: absolute; top: 8px; right: 8px;
            width: 20px; height: 20px; border-radius: 50%;
            background: linear-gradient(135deg, #e91e8c, #e8c99e);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.5rem; font-weight: 900; color: #fce4ec;
        }
        
        .hpc-shimmer {
            position: absolute; inset: 0;
            background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
            background-size: 200% 100%;
            animation: hpc-shine 4s linear infinite;
        }
        @keyframes hpc-shine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
        
    
    .qe-inner *, .ba-inner *, .collage-inner *, .spm-inner * {
        color: #3d0020;
    }
    .qe-inner svg, .ba-inner svg, .collage-inner svg, .spm-inner svg {
        color: currentColor;
    }
    .spm-btn.primary { color: #fff !important; }
    .qe-btn.qe-active { color: #e91e8c !important; }
    #frames-lightbox > div {
        background: rgba(255,250,252,0.98) !important;
        color: #3d0020 !important;
        border: 1px solid rgba(233,30,140,0.15) !important;
    }
    
    #frames-lb-prev, #frames-lb-next {
        background: rgba(255,250,252,0.95) !important;
        border: 1px solid rgba(233,30,140,0.2) !important;
        color: #e91e8c !important;
    }
    
    .cam-perm-card { color: #3d0020 !important; }

    
    @keyframes shimmerPink {
        0%   { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    @keyframes progressFill {
        from { width: 0%; }
        to { width: 42%; }
    }
    @keyframes float {
        0%,100% { transform: translateY(0px); }
        50%     { transform: translateY(-8px); }
    }
    @keyframes pulse {
        0%,100% { opacity:1; transform: scale(1); }
        50%     { opacity:0.6; transform: scale(0.9); }
    }

    
    .home-orb {
        pointer-events: none !important;
    }

    
    nav button.active {
        background: rgba(233,30,140,0.08) !important;
        color: #e91e8c !important;
        border-color: rgba(233,30,140,0.2) !important;
        box-shadow: 0 2px 12px rgba(233,30,140,0.1) !important;
    }
    nav button {
        font-family: 'Nunito', sans-serif !important;
        font-weight: 600 !important;
    }

    
    header {
        background: rgba(255,250,252,0.92) !important;
        box-shadow: 0 4px 32px rgba(194,24,91,0.08), 0 1px 0 rgba(233,30,140,0.1) !important;
    }

    
    @media (max-width:900px) {
        .donate-wrap { grid-template-columns: 1fr !important; }
    }

    
    .amount-btn {
        background: linear-gradient(135deg,rgba(233,30,140,0.06),rgba(244,143,177,0.06)) !important;
        border: 1px solid rgba(233,30,140,0.18) !important;
        color: #c2185b !important;
        font-family: 'Nunito', sans-serif !important;
        font-weight: 700 !important;
        transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
    }
    .amount-btn:hover {
        background: linear-gradient(135deg,#880e4f,#e91e8c) !important;
        color: #fff !important;
        border-color: transparent !important;
        transform: translateY(-2px) scale(1.04) !important;
        box-shadow: 0 4px 14px rgba(233,30,140,0.3) !important;
    }
    .amount-btn-gold {
        background: linear-gradient(135deg,#880e4f,#e91e8c) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 16px rgba(233,30,140,0.3) !important;
    }

    
    .donate-input {
        font-family: 'Nunito', sans-serif !important;
        border-radius: 12px !important;
        border: 1.5px solid rgba(233,30,140,0.2) !important;
        background: rgba(255,240,248,0.5) !important;
        color: #3d0020 !important;
        transition: all 0.2s !important;
    }
    .donate-input:focus {
        border-color: #e91e8c !important;
        box-shadow: 0 0 0 4px rgba(233,30,140,0.08) !important;
        outline: none !important;
    }

    
    .road-item {
        transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s !important;
    }
    .road-item:hover {
        transform: translateX(4px) !important;
        box-shadow: 0 4px 16px rgba(233,30,140,0.1) !important;
    }

    
    .supporter-item {
        transition: all 0.2s !important;
    }
    .supporter-item:hover {
        background: rgba(233,30,140,0.1) !important;
        transform: translateX(2px) !important;
    }

/* ============================================================ */

.frame-marquee-track {
            display: flex;
            gap: 20px;
            width: max-content;
            animation: frame-scroll 28s linear infinite;
            will-change: transform;
        }
        .frame-marquee-track:hover { animation-play-state: paused; }
        @keyframes frame-scroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .frame-marquee-card {
            flex-shrink: 0;
            width: 110px;
            transform: rotate(var(--r, 0deg));
            transition: transform 0.35s cubic-bezier(.2,.9,.4,1), box-shadow 0.35s;
            cursor: pointer;
        }
        .frame-marquee-card:hover {
            transform: rotate(0deg) scale(1.08) translateY(-8px);
            z-index: 10;
        }
        .frame-marquee-inner {
            border-radius: 14px;
            padding: 10px 10px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: 0 6px 24px rgba(136,14,79,0.35);
            transition: box-shadow 0.35s;
        }
        .frame-marquee-card:hover .frame-marquee-inner {
            box-shadow: 0 16px 40px rgba(136,14,79,0.5);
        }
        .frame-mock-photo {
            width: 100%;
            height: 68px;
            background: rgba(194,24,91,0.18);
            border-radius: 8px;
        }
        .frame-mock-label {
            font-family: var(--ff-display);
            font-size: 0.72rem;
            text-align: center;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding-top: 4px;
        }
        
    

    @media (max-width: 600px) {

        
        .ios-tab-bar {
            background: rgba(255, 242, 248, 0.96) !important;
            border: 1px solid rgba(233,30,140,0.16) !important;
            box-shadow:
                0 -2px 16px rgba(233,30,140,0.08),
                0 6px 28px rgba(136,14,79,0.14),
                inset 0 1px 0 rgba(255,255,255,0.9) !important;
        }
        .ios-tab-bar::before {
            background: linear-gradient(90deg, transparent, rgba(233,30,140,0.18), transparent) !important;
            height: 1px !important;
        }
        .ios-tab-item { color: rgba(136,14,79,0.4) !important; }
        .ios-tab-item.active { color: #e91e8c !important; }
        .ios-tab-item.active svg {
            filter: drop-shadow(0 0 4px rgba(233,30,140,0.5)) !important;
        }
        .ios-tab-label { color: inherit !important; font-weight: 800 !important; }
        .ios-tab-item.active .ios-tab-icon-wrap::before {
            background: linear-gradient(145deg, rgba(233,30,140,0.12), rgba(233,30,140,0.05)) !important;
            box-shadow: 0 2px 12px rgba(233,30,140,0.2), inset 0 1px 0 rgba(255,255,255,0.5) !important;
        }
        .ios-tab-item.active .ios-tab-icon-wrap::after {
            background: #e91e8c !important;
            box-shadow: 0 0 8px rgba(233,30,140,0.6) !important;
        }

        
        .ios-tab-camera .ios-tab-icon-wrap {
            background: linear-gradient(135deg, #880e4f 0%, #e91e8c 60%, #f06292 100%) !important;
            box-shadow:
                0 4px 20px rgba(233,30,140,0.45),
                0 1px 4px rgba(136,14,79,0.3),
                inset 0 1px 0 rgba(255,255,255,0.25) !important;
        }
        .ios-tab-camera svg { stroke: #fff !important; }
        .ios-tab-camera .ios-tab-label { color: #e91e8c !important; }

        
        .ios-more-sheet-content {
            background: rgba(255, 245, 250, 0.98) !important;
            border: 1px solid rgba(233,30,140,0.12) !important;
            box-shadow: 0 -8px 40px rgba(136,14,79,0.12), 0 4px 24px rgba(136,14,79,0.08) !important;
        }
        .ios-sheet-handle { background: rgba(233,30,140,0.2) !important; }
        .ios-sheet-title {
            color: rgba(136,14,79,0.55) !important;
            font-family: 'Fira Code', monospace !important;
            font-weight: 500 !important;
        }
        .ios-sheet-item {
            color: #3d0020 !important;
            background: transparent !important;
            transition: background 0.2s !important;
        }
        .ios-sheet-item:active { background: rgba(233,30,140,0.06) !important; }
        .ios-sheet-item-icon {
            background: rgba(233,30,140,0.08) !important;
            border: 1px solid rgba(233,30,140,0.15) !important;
            color: #e91e8c !important;
        }
        .ios-sheet-item-label {
            font-family: 'Nunito', sans-serif !important;
            font-weight: 700 !important;
            color: #3d0020 !important;
            font-size: 0.82rem !important;
        }

        
        .cam-subtab-bar {
            background: rgba(255,242,248,0.94) !important;
            border: 1px solid rgba(233,30,140,0.1) !important;
            border-top: none !important;
            box-shadow: 0 4px 16px rgba(136,14,79,0.1) !important;
        }
        .cam-subtab-item { color: rgba(136,14,79,0.45) !important; }
        .cam-subtab-item.active { color: #e91e8c !important; }
        .cam-subtab-item.active svg { filter: drop-shadow(0 0 3px rgba(233,30,140,0.5)) !important; }

        
        .section {
            padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        }
    }

    
    #loading-screen {
        background: linear-gradient(160deg, #fff8fb 0%, #fce4ec 50%, #f8bbd0 100%) !important;
    }

    
    #ls-cam-scene::after {
        content: '';
        position: absolute;
        bottom: -8px; left: 50%;
        transform: translateX(-50%);
        width: 120px; height: 16px;
        background: radial-gradient(ellipse, rgba(136,14,79,0.25), transparent 70%);
        border-radius: 50%;
        animation: camShadowPulse 3s ease-in-out infinite;
        z-index: 10;
    }
    @keyframes camShadowPulse {
        0%,100% { transform: translateX(-50%) scaleX(0.8); opacity: 0.7; }
        50%      { transform: translateX(-50%) scaleX(1.1); opacity: 0.4; }
    }

/* ============================================================ */

@keyframes progressFill { from { width:0%; } to { width:42%; } }

/* ============================================================ */

.chat-header-wrap { display:flex;align-items:center;gap:14px;padding:0 0 16px;border-bottom:1px solid var(--border);flex-shrink:0; }
    .chat-room-badge { display:flex;align-items:center;gap:7px;font-size:0.72rem;color:var(--muted);background:var(--surface2);border:1px solid var(--border);padding:5px 12px;border-radius:50px;margin-left:auto; }
    .chat-msg-bubble { display:flex;gap:10px;align-items:flex-end;padding:3px 0;animation:fadeIn .2s ease; }
    .chat-msg-bubble.mine { flex-direction:row-reverse; }
    .chat-avatar-sm { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:#fce4ec;flex-shrink:0; }
    .chat-bubble-inner { max-width:70%;display:flex;flex-direction:column;gap:3px; }
    .chat-bubble-meta { font-size:0.65rem;color:var(--muted);padding:0 10px; }
    .chat-msg-bubble.mine .chat-bubble-meta { text-align:right; }
    .chat-bubble-text { background:var(--surface2);border:1px solid var(--border);border-radius:18px 18px 18px 4px;padding:9px 14px;font-size:0.88rem;line-height:1.55;color:var(--text);position:relative;word-break:break-word; }
    .chat-msg-bubble.mine .chat-bubble-text { background:linear-gradient(135deg,rgba(233,30,140,.25),rgba(232,201,158,.15));border-color:rgba(233,30,140,.3);border-radius:18px 18px 4px 18px; }
    .chat-bubble-text:hover .chat-react-btn { opacity:1; }
    .chat-react-btn { position:absolute;right:-8px;top:-8px;background:var(--surface);border:1px solid var(--border);border-radius:50px;padding:3px 7px;font-size:0.75rem;cursor:pointer;opacity:0;transition:opacity .2s;white-space:nowrap;display:flex;gap:3px; }
    .chat-system-msg { text-align:center;font-size:0.72rem;color:var(--muted);padding:6px 20px;display:flex;align-items:center;justify-content:center;gap:8px; }
    .chat-system-msg::before,.chat-system-msg::after { content:'';flex:1;height:1px;background:var(--border); }
    .chat-emoji-picker { display:none;position:absolute;bottom:60px;left:44px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:0 8px 32px rgba(136,14,79,0.4);z-index:100;animation:fadeIn .15s ease; }
    .chat-emoji-picker.open { display:flex;flex-wrap:wrap;gap:6px;width:240px; }
    .chat-emoji-btn { width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;border-radius:8px;transition:background .15s; }
    .chat-emoji-btn:hover { background:var(--surface2); }
    .chat-typing-indicator { display:none;padding:6px 0;color:var(--muted);font-size:0.78rem;font-style:italic; }
    .chat-typing-indicator.show { display:block; }
    .chat-input-wrap { position:relative;flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:20px;display:flex;align-items:flex-end;gap:6px;padding:8px 10px 8px 14px;transition:border-color .2s; }
    .chat-input-wrap:focus-within { border-color:rgba(233,30,140,.5); }
    .chat-action-btn { width:32px;height:32px;border-radius:50%;background:transparent;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s; }
    .chat-action-btn:hover { color:var(--accent);background:rgba(233,30,140,.1); }
    .chat-send-btn { width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;color:#fce4ec;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;flex-shrink:0; }
    .chat-send-btn:hover { background:var(--accent2);transform:scale(1.05); }
    .chat-image-preview-wrap { position:absolute;bottom:100%;left:0;right:0;padding:8px;pointer-events:none; }
    .chat-img-thumb { width:60px;height:60px;border-radius:10px;object-fit:cover;border:2px solid var(--accent);pointer-events:all; }
    .chat-reactions { display:flex;gap:4px;flex-wrap:wrap;margin-top:4px; }
    .chat-reaction { background:var(--surface2);border:1px solid var(--border);border-radius:50px;padding:2px 8px;font-size:0.75rem;cursor:pointer;transition:all .15s; }
    .chat-reaction:hover { border-color:var(--accent);background:rgba(233,30,140,.1); }

/* ============================================================ */

.brand-cute-wrap {
        position: relative;
        display: inline-block;
        padding: 0 4px;
    }
    .brand-cute-icon {
        position: absolute;
        left: var(--x);
        top: var(--y);
        font-size: 0.9rem;
        pointer-events: none;
        animation: cute-float 3s ease-in-out var(--d, 0s) infinite;
        transform-origin: center;
    }
    @keyframes cute-float {
        0%,100% { transform: translateY(0) rotate(-6deg) scale(1); opacity:.8; }
        50%      { transform: translateY(-6px) rotate(6deg) scale(1.15); opacity:1; }
    }

/* ============================================================ */

#filter-cat-bar::-webkit-scrollbar{display:none}

/* ============================================================ */

@keyframes recapDotBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes heartBeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.15)} 28%{transform:scale(1)} 42%{transform:scale(1.1)} 70%{transform:scale(1)} }
@keyframes l83FloatHeart { 0%{transform:translate(0,0) scale(0);opacity:0} 20%{opacity:1} 100%{transform:translate(var(--hx),var(--hy)) scale(0.3);opacity:0} }
    @keyframes spin { to{transform:rotate(360deg)} }
        
        @media (max-width: 768px) {
            .section, .home-about, .home-showcase, .home-stats-strip, .donate-wrap, .page-header {
                will-change: auto !important;
                filter: none !important;
            }
            
            .feat-card, .gallery-item, .filter-card-cam, .shot-thumb {
                contain: layout style;
            }
            
            
            #cam-fs-close-btn {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            
            #cam-fs-shoot-btn {
                animation: none !important;
            }
            
            .fb-floating-icon, .fb-floating-icon2, .fb-shine, .fb-bounce {
                animation: none !important;
            }
        }

    
    #cam-fullscreen-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000010;
        background: #fce4ec;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        pointer-events: all;
    }
    #cam-fullscreen-overlay.active { display: flex; }
    #cam-fs-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
    }
    #cam-fs-ui {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: env(safe-area-inset-top, 20px) 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
        pointer-events: none;
    }
    #cam-fs-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(to bottom, rgba(80,0,40,0.6), transparent);
        pointer-events: all;
    }
    #cam-fs-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 0 20px 12px;
        background: linear-gradient(to top, rgba(80,0,40,0.7), transparent);
        pointer-events: all;
    }
    #cam-fs-shoot-btn {
        width: 76px; height: 76px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        border: 4px solid rgba(255,255,255,.3);
        box-shadow: 0 0 0 6px rgba(233,30,140,.2), 0 8px 32px rgba(233,30,140,.5);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: transform .15s cubic-bezier(.34,1.56,.64,1);
        animation: captureGlow 2.5s ease-in-out infinite;
    }
    #cam-fs-shoot-btn:active { transform: scale(0.9); }
    #cam-fs-close-btn {
        background: rgba(255,255,255,.15);
        border: none; color: #fff;
        width: 38px; height: 38px; border-radius: 50%;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        backdrop-filter: blur(8px);
    }
    #cam-fs-countdown-overlay {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 8rem;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 60px rgba(233,30,140,.8);
        font-family: var(--ff-display);
        animation: cd-pop .8s cubic-bezier(.34,1.56,.64,1) infinite;
        pointer-events: none;
    }
    #cam-fs-strip-progress {
        display: flex; gap: 8px; justify-content: center;
    }
    #cam-fs-strip-progress .sp-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: rgba(255,255,255,.3);
        border: 1.5px solid rgba(255,255,255,.5);
        transition: background .3s;
    }
    #cam-fs-strip-progress .sp-dot.done { background: var(--accent); border-color: var(--accent); }
    #cam-fs-strip-progress .sp-dot.active { background: #fff; border-color: #fff; animation: recapDotBlink .7s infinite; }

    
    #cam-fs-prompt {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000011;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    #cam-fs-prompt.show { display: flex; }
    #cam-fs-prompt-inner {
        background: linear-gradient(155deg, #fff0f7 0%, #fce4ec 50%, #ffd6e7 100%);
        border: 1.5px solid rgba(233,30,140,0.3);
        border-radius: 28px;
        padding: 36px 28px 28px;
        max-width: 310px;
        width: calc(100% - 48px);
        text-align: center;
        box-shadow: 0 32px 80px rgba(136,14,79,0.35), 0 0 0 1px rgba(255,255,255,0.7) inset;
        position: relative;
        overflow: hidden;
        animation: heartModalPop .45s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes heartModalPop {
        from { opacity:0; transform:scale(0.65) translateY(20px); }
        to   { opacity:1; transform:scale(1) translateY(0); }
    }
    #cam-fs-prompt-inner::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 50% -10%, rgba(233,30,140,0.18) 0%, transparent 65%);
        pointer-events: none;
    }
    .fsp-heart-ring {
        width: 86px; height: 86px;
        border-radius: 50%;
        background: rgba(233,30,140,0.08);
        border: 2px solid rgba(233,30,140,0.15);
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 18px;
        position: relative;
        animation: heartRingPulse 2s ease-in-out infinite;
    }
    @keyframes heartRingPulse {
        0%,100% { box-shadow: 0 0 0 0 rgba(233,30,140,0.25); }
        50%      { box-shadow: 0 0 0 14px rgba(233,30,140,0); }
    }
    .fsp-heart-svg { animation: fspHeartBeat 1.5s ease-in-out infinite; }
    @keyframes fspHeartBeat {
        0%,100% { transform: scale(1); }
        30%     { transform: scale(1.18); }
        60%     { transform: scale(0.95); }
    }
    .fsp-petals { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
    .fsp-petal {
        position:absolute;font-size:1.1rem;opacity:0;
        animation: fspPetalDrift linear infinite;
    }
    @keyframes fspPetalDrift {
        0%   { opacity:0; transform:translateY(0) rotate(0deg); }
        15%  { opacity:.75; }
        85%  { opacity:.4; }
        100% { opacity:0; transform:translateY(-90px) rotate(200deg); }
    }
    .fsp-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 1.18rem; font-weight: 900;
        color: #560027; line-height: 1.35;
        margin-bottom: 8px;
    }
    .fsp-sub {
        font-size: 0.78rem; color: #880e4f;
        line-height: 1.7; margin-bottom: 22px;
    }
    .fsp-btns { display:flex; gap:10px; }
    .fsp-btn-no {
        flex:1;
        background: rgba(136,14,79,0.07);
        border: 1.5px solid rgba(136,14,79,0.2);
        color: #880e4f; padding:13px 10px;
        border-radius: 16px; cursor:pointer;
        font-family:'Nunito',sans-serif; font-size:0.85rem; font-weight:700;
        display:flex;align-items:center;justify-content:center;gap:6px;
        transition: all .2s;
    }
    .fsp-btn-no:active { background: rgba(136,14,79,0.14); }
    .fsp-btn-yes {
        flex:1.4;
        background: linear-gradient(135deg,#880e4f 0%,#e91e8c 100%);
        border: none; color: #fff; padding:13px 10px;
        border-radius: 16px; cursor:pointer;
        font-family:'Nunito',sans-serif; font-size:0.85rem; font-weight:800;
        box-shadow: 0 6px 20px rgba(233,30,140,0.45);
        display:flex;align-items:center;justify-content:center;gap:6px;
        transition: all .2s;
    }
    .fsp-btn-yes:active { transform:scale(0.97); }
    .fsp-no-ask {
        display:flex;align-items:center;justify-content:center;gap:6px;
        margin-top:14px;cursor:pointer;
        font-size:0.72rem;color:rgba(136,14,79,0.45);
    }
    #cam-fs-prompt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

    
    .recap-gif-section {
        margin-top: 24px;
        border-top: 0.5px solid var(--border);
        padding-top: 24px;
    }
    .recap-photo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
        margin-top: 12px;
    }
    .recap-photo-item {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        aspect-ratio: 4/3;
        background: #111;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: border-color .2s, transform .2s;
    }
    .recap-photo-item:hover { border-color: var(--accent); transform: scale(1.03); }
    .recap-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .recap-photo-actions {
        position: absolute; bottom: 0; left: 0; right: 0;
        background: linear-gradient(to top, rgba(80,0,40,0.85), transparent);
        display: flex; gap: 4px; padding: 8px 5px 5px;
        opacity: 0; transition: opacity .2s; flex-wrap: wrap;
    }
    .recap-photo-item:hover .recap-photo-actions { opacity: 1; }
    .recap-photo-dl {
        background: rgba(80,0,40,0.7); border: none; color: #fff;
        border-radius: 7px; cursor: pointer; display: flex; align-items: center;
        justify-content: center; padding: 4px 7px;
        font-size: 0.62rem; font-weight: 600; gap: 3px;
        transition: background .15s;
    }
    .recap-photo-dl:hover { background: rgba(233,30,140,.85); color: #fce4ec; }

/* ============================================================ */

@keyframes fb-float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8px) rotate(3deg)} }
        @keyframes fb-float2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-12px) rotate(-5deg)} }
        @keyframes fb-shine { 0%{opacity:.4} 50%{opacity:1} 100%{opacity:.4} }
        @keyframes fb-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
        @keyframes fb-sparkle { 0%{transform:scale(0) rotate(0)} 50%{transform:scale(1.2) rotate(180deg)} 100%{transform:scale(1) rotate(360deg)} }
        @keyframes fb-slide-in { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
        @keyframes fb-count { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1)} }
        .fb-floating-icon { animation: fb-float 3s ease-in-out infinite; }
        .fb-floating-icon2 { animation: fb-float2 4s ease-in-out infinite; }
        .fb-shine { animation: fb-shine 2s ease-in-out infinite; }
        .fb-bounce { animation: fb-bounce 2s ease-in-out infinite; }
        .fb-sparkle { animation: fb-sparkle 1s ease forwards; }
        .fb-card-new { animation: fb-slide-in .4s ease both; }
        .fb-stat-num { animation: fb-count .5s ease both; }

        .fb-star-interactive { cursor:pointer; transition:transform .15s, filter .15s; display:inline-flex; align-items:center; justify-content:center; }
        .fb-star-interactive:hover { transform:scale(1.3); } .fb-star-interactive:hover svg { filter:drop-shadow(0 0 8px rgba(245,158,11,0.8)) drop-shadow(0 0 4px rgba(245,158,11,0.6)); }
        .fb-tag { display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:50px;font-size:0.72rem;font-weight:600;letter-spacing:.05em; }

        .fb-review-card { background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px 22px;transition:all .3s;animation:fb-slide-in .4s ease both; }
        .fb-review-card:hover { transform:translateY(-3px);border-color:rgba(233,30,140,.3);box-shadow:0 12px 40px rgba(136,14,79,0.3); }

        .fb-write-section { background:linear-gradient(135deg,rgba(233,30,140,.05),rgba(233,30,140,.02));border:1px solid rgba(233,30,140,.15);border-radius:24px;padding:36px;position:relative;overflow:hidden; }
        .fb-write-section::before { content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(233,30,140,.1),transparent 70%);pointer-events:none; }

        .fb-input-field { width:100%;background:rgba(255,255,255,.04);border:1.5px solid var(--border);color:var(--text);padding:13px 16px;border-radius:14px;font-family:'Nunito',sans-serif;font-size:0.9rem;outline:none;transition:all .25s; }
        .fb-input-field:focus { border-color:var(--accent);background:rgba(233,30,140,.04);box-shadow:0 0 0 3px rgba(233,30,140,.12); }

        .fb-submit-btn { background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fce4ec;padding:14px 32px;border-radius:50px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:0.92rem;font-weight:700;transition:all .3s;display:inline-flex;align-items:center;gap:10px;letter-spacing:.03em;box-shadow:0 8px 24px rgba(233,30,140,.3); }
        .fb-submit-btn:hover { transform:translateY(-2px);box-shadow:0 14px 36px rgba(233,30,140,.4); }
        .fb-submit-btn:active { transform:translateY(0); }

        .fb-topic-tag { background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:6px 14px;border-radius:50px;cursor:pointer;font-size:0.78rem;transition:all .2s; }
        .fb-topic-tag.selected { background:rgba(233,30,140,.15);border-color:var(--accent);color:var(--accent); }
        .fb-topic-tag:hover { border-color:rgba(233,30,140,.4); }

        .fb-stat-card { background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;text-align:center;transition:all .3s;position:relative;overflow:hidden; }
        .fb-stat-card::before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(233,30,140,.08),transparent 70%);pointer-events:none; }
        .fb-stat-card:hover { transform:translateY(-4px);box-shadow:0 16px 48px rgba(136,14,79,0.3); }

        
        .fb-stat-card {
            position: relative;
            overflow: hidden;
        }
        .fb-stat-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(
                transparent 0deg,
                rgba(233,30,140,0.06) 90deg,
                transparent 180deg,
                rgba(233,30,140,0.04) 270deg,
                transparent 360deg
            );
            animation: fb-card-rotate 8s linear infinite;
            pointer-events: none;
        }
        @keyframes fb-card-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        
        .fb-star-interactive:hover {
            text-shadow: 0 0 12px rgba(245,158,11,0.8), 0 0 24px rgba(245,158,11,0.4);
        }

        
        .fb-write-section {
            border-image: linear-gradient(135deg, rgba(233,30,140,0.3), rgba(233,30,140,0.05), rgba(233,30,140,0.3)) 1;
        }

        
        .fb-review-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 21px;
            background: linear-gradient(135deg, rgba(233,30,140,0.2), transparent, rgba(233,30,140,0.1));
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        .fb-review-card:hover::before {
            opacity: 1;
        }

        
        .fb-floating-icon, .fb-floating-icon2 {
            will-change: transform;
        }

/* ============================================================ */

.ndtk-slideshow {
                    position: relative;
                    width: 100%;
                    aspect-ratio: 16 / 9;
                    border-radius: 20px;
                    overflow: hidden;
                    background: var(--surface2);
                    box-shadow: 0 20px 60px rgba(136,14,79,0.5), 0 0 0 1px rgba(233,30,140,0.1);
                    cursor: pointer;
                    user-select: none;
                }
                .ndtk-slide {
                    position: absolute;
                    inset: 0;
                    opacity: 0;
                    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
                    transform: scale(1.04);
                }
                .ndtk-slide.active {
                    opacity: 1;
                    transform: scale(1);
                    z-index: 1;
                }
                .ndtk-slide img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    border-radius: 20px;
                    pointer-events: none;
                }
                
                .ndtk-slide-placeholder {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 14px;
                    background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
                    border-radius: 20px;
                    color: var(--muted);
                    font-size: 0.88rem;
                }
                
                .ndtk-slideshow::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to top, rgba(136,14,79,0.45) 0%, transparent 40%);
                    pointer-events: none;
                    z-index: 2;
                    border-radius: 20px;
                }
                
                .ndtk-arrow {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 10;
                    width: 42px;
                    height: 42px;
                    border-radius: 50%;
                    background: rgba(136,14,79,0.5);
                    border: 1px solid rgba(255,255,255,0.12);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.2s;
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                }
                .ndtk-arrow:hover { background: rgba(233,30,140,0.6); border-color: var(--accent); }
                .ndtk-arrow.prev { left: 14px; }
                .ndtk-arrow.next { right: 14px; }
                
                .ndtk-dots {
                    position: absolute;
                    bottom: 16px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 10;
                    display: flex;
                    gap: 7px;
                    align-items: center;
                }
                .ndtk-dot {
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    background: rgba(255,255,255,0.4);
                    cursor: pointer;
                    transition: all 0.25s;
                    border: none;
                    padding: 0;
                }
                .ndtk-dot.active {
                    background: var(--accent);
                    width: 22px;
                    border-radius: 4px;
                    box-shadow: 0 0 8px rgba(233,30,140,0.6);
                }
                
                .ndtk-counter {
                    position: absolute;
                    top: 14px;
                    right: 16px;
                    z-index: 10;
                    background: rgba(80,0,40,0.55);
                    border: 1px solid rgba(255,255,255,0.1);
                    border-radius: 50px;
                    padding: 4px 12px;
                    font-size: 0.72rem;
                    color: rgba(255,255,255,0.8);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                    letter-spacing: .04em;
                }
                
                .ndtk-thumbs {
                    display: flex;
                    gap: 8px;
                    margin-top: 12px;
                    overflow-x: auto;
                    padding-bottom: 4px;
                    scrollbar-width: none;
                }
                .ndtk-thumbs::-webkit-scrollbar { display: none; }
                .ndtk-thumb {
                    flex-shrink: 0;
                    width: 72px;
                    height: 40px;  
                    border-radius: 8px;
                    overflow: hidden;
                    border: 2px solid transparent;
                    cursor: pointer;
                    transition: all 0.2s;
                    opacity: 0.55;
                    background: var(--surface2);
                }
                .ndtk-thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    pointer-events: none;
                }
                .ndtk-thumb.active {
                    border-color: var(--accent);
                    opacity: 1;
                    box-shadow: 0 0 0 1px rgba(233,30,140,0.3);
                }
                .ndtk-thumb:hover { opacity: 0.85; }
                @media (max-width: 480px) {
                    .ndtk-arrow { width: 34px; height: 34px; }
                    .ndtk-thumb { width: 56px; height: 31px; }
                }

/* ============================================================ */

.section,
.home-about,
.home-showcase,
.home-stats-strip,
.donate-wrap,
.page-header {
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
    
}

/* ============================================================ */

@keyframes lpmIn {
    from { opacity:0; transform: scale(0.92) translateY(24px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}
.lpm-cell {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border);
    transition: border-color .2s, box-shadow .2s, transform .2s;
    cursor: pointer;
    background: var(--surface2);
    aspect-ratio: 4/3;
}
.lpm-cell:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(233,30,140,0.25); transform: scale(1.02); }
.lpm-cell img { width:100%;height:100%;object-fit:cover;display:block; }
.lpm-cell-overlay {
    position:absolute;inset:0;
    background:rgba(233,30,140,0.0);
    display:flex;align-items:center;justify-content:center;
    transition: background .2s;
}
.lpm-cell:hover .lpm-cell-overlay { background:rgba(136,14,79,0.45); }
.lpm-cell-overlay-btn {
    opacity:0;transform:scale(0.8);
    transition:opacity .2s, transform .2s;
    background:rgba(233,30,140,0.9);
    color:#fce4ec;border:none;
    padding:8px 18px;border-radius:50px;
    font-size:0.8rem;font-weight:700;
    display:flex;align-items:center;gap:6px;cursor:pointer;
}
.lpm-cell:hover .lpm-cell-overlay-btn { opacity:1; transform:scale(1); }
.lpm-cell-num {
    position:absolute;top:8px;left:8px;
    background:rgba(80,0,40,0.55);color:#fff;
    font-size:0.7rem;font-weight:700;
    padding:2px 8px;border-radius:50px;
    letter-spacing:.05em;
}
.lpm-cell.retaking {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233,30,140,0.35);
    animation: lpm-pulse-border 1s ease-in-out infinite;
}
.lpm-cell.retaking .lpm-cell-overlay { background:rgba(233,30,140,0.15); }
@keyframes lpm-pulse-border {
    0%,100% { box-shadow: 0 0 0 3px rgba(233,30,140,0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(233,30,140,0.15); }
}

#lpm-grid.grid-1 { display:grid;grid-template-columns:1fr;max-width:340px;margin:0 auto; }
#lpm-grid.grid-2 { display:grid;grid-template-columns:1fr;gap:10px;max-width:320px;margin:0 auto; }
#lpm-grid.grid-4 { display:grid;grid-template-columns:1fr;gap:8px;max-width:280px;margin:0 auto; }
#lpm-grid.grid-6 { display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:440px;margin:0 auto; }

/* ============================================================ */

#cam-fs-torch-btn, #cam-fs-switch-btn {
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 42px; height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
#cam-fs-torch-btn.torch-on {
    background: rgba(255, 230, 80, 0.25);
    border-color: rgba(255, 230, 80, 0.7);
    color: #ffe050;
    box-shadow: 0 0 14px rgba(255,220,50,0.5);
}
#cam-fs-torch-btn.torch-hidden { display: none; }
#cam-fs-torch-btn:active, #cam-fs-switch-btn:active { transform: scale(0.88); }

#cam-fs-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
}

#cam-fs-cam-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.06em;
    text-align: center;
    margin-top: 2px;
}

/* ============================================================ */

@media (max-width: 768px) {
    #ios-chat-mobile-overlay {
        position: fixed;
        top: 60px;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        background: rgba(20,18,28,0.96);
        backdrop-filter: blur(28px) saturate(2);
        -webkit-backdrop-filter: blur(28px) saturate(2);
        border: 0.5px solid rgba(233,30,140,0.25);
        border-radius: 20px;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 9997;
        box-shadow: 0 8px 32px rgba(136,14,79,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
        min-width: 240px;
        max-width: calc(100vw - 40px);
    }
    #ios-chat-mobile-overlay.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .ios-chat-notif-icon {
        width: 38px; height: 38px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(233,30,140,.2), rgba(232,200,158,.12));
        border: 0.5px solid rgba(233,30,140,0.3);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .ios-chat-notif-icon svg { stroke: var(--accent); width: 18px; height: 18px; }
    .ios-chat-notif-text { font-size: 0.8rem; font-weight: 600; color: var(--text); }
    .ios-chat-notif-sub { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
}
@media (min-width: 769px) {
    #ios-chat-mobile-overlay { display: none !important; }
}

/* ============================================================ */

#cam-perm-modal {
    position: fixed; inset: 0; z-index: 99990;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(80,0,40,0.7);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
}
#cam-perm-modal.show {
    opacity: 1; pointer-events: all;
}
.cam-perm-card {
    background: linear-gradient(145deg, #0e0d0a 0%, #fdf2f8 100%);
    border: 1px solid rgba(233,30,140,0.2);
    border-radius: 28px;
    padding: 0;
    width: 100%; max-width: 400px;
    box-shadow:
        0 40px 100px rgba(80,0,40,0.8),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 1px 0 rgba(255,255,255,0.06) inset;
    overflow: hidden;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1);
}
#cam-perm-modal.show .cam-perm-card {
    transform: translateY(0) scale(1);
}

.cam-perm-banner {
    position: relative;
    height: 160px;
    background: radial-gradient(ellipse 120% 100% at 50% 110%, #2a1800 0%, #0e0900 60%, #050300 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.cam-perm-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(233,30,140,0.15) 0%, transparent 70%);
    animation: perm-amb 3s ease-in-out infinite;
}
@keyframes perm-amb {
    0%,100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.cam-perm-icon-wrap {
    position: relative; z-index: 2;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2a1f00, #100d00);
    border: 1.5px solid rgba(233,30,140,0.35);
    box-shadow:
        0 0 40px rgba(233,30,140,0.2),
        inset 0 0 20px rgba(80,0,40,0.6),
        0 8px 32px rgba(136,14,79,0.5);
    display: flex; align-items: center; justify-content: center;
    animation: perm-icon-float 3s ease-in-out infinite;
}
@keyframes perm-icon-float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.cam-perm-icon-wrap svg { color: #e91e8c; }

.cam-perm-orbit {
    position: absolute; z-index: 1;
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 0.5px solid rgba(233,30,140,0.15);
    animation: perm-orbit-spin 6s linear infinite;
}
@keyframes perm-orbit-spin { to { transform: rotate(360deg); } }
.cam-perm-orbit::before {
    content: '';
    position: absolute;
    width: 6px; height: 6px; border-radius: 50%;
    background: #e91e8c;
    top: -3px; left: 50%; transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(233,30,140,0.9), 0 0 20px rgba(233,30,140,0.4);
}
.cam-perm-orbit-2 {
    position: absolute; z-index: 1;
    width: 150px; height: 150px;
    border-radius: 50%;
    border: 0.5px solid rgba(233,30,140,0.08);
    animation: perm-orbit-spin 10s linear infinite reverse;
}

.cam-perm-pulse {
    position: absolute; z-index: 0;
    border-radius: 50%;
    border: 1px solid rgba(233,30,140,0.2);
    width: 88px; height: 88px;
    animation: perm-pulse 2.4s ease-out infinite;
}
.cam-perm-pulse:nth-child(2) { animation-delay: 0.8s; border-color: rgba(233,30,140,0.12); }
.cam-perm-pulse:nth-child(3) { animation-delay: 1.6s; border-color: rgba(233,30,140,0.06); }
@keyframes perm-pulse {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.6); opacity: 0; }
}

.cam-perm-body {
    padding: 28px 28px 24px;
}
.cam-perm-title {
    font-family: var(--ff-display);
    font-size: 1.4rem;
    color: #f5f0e8;
    margin-bottom: 10px;
    text-align: center;
}
.cam-perm-title em { color: #e91e8c; font-style: italic; }
.cam-perm-desc {
    font-size: 0.88rem;
    color: rgba(200,180,140,0.7);
    line-height: 1.7;
    text-align: center;
    margin-bottom: 20px;
}
.cam-perm-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}
.cam-perm-feat {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.82rem; color: rgba(240,230,210,0.75);
}
.cam-perm-feat-icon {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
}

.cam-perm-btn-allow {
    width: 100%;
    background: linear-gradient(135deg, #e91e8c, #e8c99e, #e91e8c);
    background-size: 200% auto;
    color: #fce4ec;
    border: none;
    padding: 15px 24px;
    border-radius: 50px;
    font-family: var(--ff-body);
    font-size: 0.95rem; font-weight: 700;
    cursor: pointer; letter-spacing: 0.03em;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 6px 30px rgba(233,30,140,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    position: relative; overflow: hidden;
    margin-bottom: 10px;
    animation: perm-btn-attention 3s ease-in-out infinite 1s; 
}
@keyframes perm-btn-attention {
    0%,100% { box-shadow: 0 6px 30px rgba(233,30,140,0.4), inset 0 1px 0 rgba(255,255,255,0.3); }
    50% { box-shadow: 0 8px 40px rgba(233,30,140,0.65), inset 0 1px 0 rgba(255,255,255,0.3); }
}
.cam-perm-btn-allow::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.cam-perm-btn-allow:hover::after { transform: translateX(100%); }
.cam-perm-btn-allow:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(233,30,140,0.55);
}
.cam-perm-btn-allow:active { transform: scale(0.96); }

.cam-perm-btn-cancel {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(200,180,140,0.5);
    padding: 11px 24px;
    border-radius: 50px;
    font-family: var(--ff-body);
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.cam-perm-btn-cancel:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: rgba(200,180,140,0.8);
}

.cam-perm-privacy {
    display: flex; align-items: center; gap: 6px;
    justify-content: center;
    margin-top: 14px;
    font-size: 0.72rem;
    color: rgba(150,140,120,0.5);
}
.cam-perm-privacy svg { flex-shrink: 0; }

/* ============================================================ */

.l83i {
  width:100%;box-sizing:border-box;
  border:1.5px solid rgba(233,30,140,0.2);border-radius:12px;
  padding:10px 14px;background:rgba(255,255,255,0.75);
  font-family:'Nunito',sans-serif;font-size:0.85rem;font-weight:600;
  color:#3d0020;outline:none;transition:border-color .2s,box-shadow .2s;
}
.l83i::placeholder{color:rgba(136,14,79,0.35);}
.l83i:focus{border-color:#e91e8c;box-shadow:0 0 0 3px rgba(233,30,140,0.1);}

.l83th {
  padding:7px 12px;border-radius:50px;
  border:1.5px solid rgba(233,30,140,0.18);
  background:rgba(255,240,248,0.6);
  font-family:'Nunito',sans-serif;font-size:0.78rem;font-weight:700;
  color:#880e4f;cursor:pointer;transition:all .2s;
}
.l83th.active{background:linear-gradient(135deg,#880e4f,#e91e8c);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(233,30,140,0.3);}

.l83-font-btn{padding:6px 12px;border-radius:50px;border:1.5px solid rgba(233,30,140,0.18);background:rgba(255,240,248,0.6);font-size:0.8rem;font-weight:700;color:#880e4f;cursor:pointer;transition:all .2s;}
.l83-font-btn.active{background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(99,102,241,0.3);}

.l83-deco-btn{padding:6px 12px;border-radius:50px;border:1.5px solid rgba(233,30,140,0.18);background:rgba(255,240,248,0.6);font-family:'Nunito',sans-serif;font-size:0.78rem;font-weight:700;color:#880e4f;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:4px;}
.l83-deco-btn.active{background:linear-gradient(135deg,#e91e8c,#f48fb1);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(233,30,140,0.3);}
.l83-lbl{font-size:0.72rem;font-weight:800;color:#880e4f;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:5px;}
#l83-drop-zone:hover,.l83-drag-over{border-color:#e91e8c !important;background:rgba(233,30,140,0.06) !important;}

.l83-tmpl-btn{padding:5px 10px;border-radius:8px;border:1.5px solid rgba(233,30,140,0.18);background:rgba(255,255,255,0.7);font-family:'Nunito',sans-serif;font-size:0.72rem;font-weight:700;color:#880e4f;cursor:pointer;transition:all .18s;}
.l83-tmpl-btn:hover{background:rgba(233,30,140,0.1);}

.l83-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:600px){.l83-form-grid{grid-template-columns:1fr !important;}}

.l83-deco-particle{position:absolute;pointer-events:none;animation:l83DecoFloat linear infinite;font-size:1rem;opacity:0.65;will-change:transform,opacity;}
@keyframes l83DecoFloat{0%{transform:translateY(0) scale(1);opacity:0.7;}50%{opacity:0.9;}100%{transform:translateY(-30px) scale(0.65);opacity:0;}}

#l83-3d-overlay{position:fixed;inset:0;z-index:20000;background:linear-gradient(160deg,rgba(255,240,248,0.98),rgba(252,228,236,0.98));backdrop-filter:blur(40px);display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px;}
#l83-3d-overlay.show{display:flex !important;}

@keyframes l83Spin3d{
  0%  {transform:perspective(500px) rotateY(-200deg) scale(0.3);opacity:0;}
  60% {transform:perspective(500px) rotateY(18deg) scale(1.05);opacity:1;}
  80% {transform:perspective(500px) rotateY(-6deg) scale(1);}
  100%{transform:perspective(500px) rotateY(0deg) scale(1);opacity:1;}
}
@keyframes l83SpinClick{
  0%  {transform:perspective(500px) rotateY(0deg);}
  50% {transform:perspective(500px) rotateY(180deg) scale(1.1);}
  100%{transform:perspective(500px) rotateY(360deg) scale(1);}
}

.l83h {
  position:absolute;pointer-events:none;
  animation:l83HFly linear forwards;
}
@keyframes l83HFly{
  0%  {opacity:1;transform:translate(0,0) scale(0) rotate(0deg);}
  25% {opacity:1;transform:translate(var(--hx),var(--hy)) scale(1.2) rotate(var(--hr));}
  100%{opacity:0;transform:translate(calc(var(--hx)*2.6),calc(var(--hy)*2.6 + 25px)) scale(0.2) rotate(calc(var(--hr)*2));}
}

.l83-card{
  border-radius:22px;padding:26px 22px;
  box-shadow:0 12px 40px rgba(136,14,79,0.12),inset 0 1px 0 rgba(255,255,255,0.8);
  animation:l83CardIn .55s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes l83CardIn{from{opacity:0;transform:translateY(22px) scale(.95);}to{opacity:1;transform:none;}}

@media(max-width:600px){
  #ios-tab-bar{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    padding:4px 2px !important;
    gap:0 !important;
  }
  #ios-tab-bar .ios-tab-item{
    display:flex !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    max-width:none !important;
    padding:5px 1px 4px !important;
  }
  #ios-tab-bar .ios-tab-label{
    font-size:7.5px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #ios-tab-bar .ios-tab-icon-wrap{
    width:28px !important;height:28px !important;
  }
  .ios-tab-camera .ios-tab-icon-wrap{
    width:44px !important;height:34px !important;
  }
  
  .ios-tab-83-wrap{ background:transparent !important; }
  #ios-tab-83.active .ios-tab-83-wrap{
    background:linear-gradient(145deg,rgba(233,30,140,0.22),rgba(233,30,140,0.1)) !important;
    border-radius:12px !important;
  }
  #ios-tab-83.active svg{ stroke:#e91e8c !important; filter:drop-shadow(0 0 5px rgba(233,30,140,0.7)) !important; }
  #ios-tab-83 svg{ width:18px !important; height:18px !important; }
}

@keyframes l83Shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ============================================================ */

@media (max-width: 900px) {
  #ios-tab-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom,0px)) !important;
    gap: 0 !important;
    z-index: 999999 !important;
    background: rgba(255,245,250,0.98) !important;
    backdrop-filter: blur(30px) saturate(2) !important;
    -webkit-backdrop-filter: blur(30px) saturate(2) !important;
    border-top: 1.5px solid rgba(233,30,140,0.18) !important;
    box-shadow: 0 -4px 24px rgba(136,14,79,0.14) !important;
  }
  #ios-tab-bar .ios-tab-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 6px 2px 4px !important;
    gap: 3px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: rgba(136,14,79,0.4) !important;
    transition: color 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #ios-tab-bar .ios-tab-item.active { color: #e91e8c !important; }
  #ios-tab-bar .ios-tab-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: inherit !important;
    display: block !important;
  }
  #ios-tab-bar .ios-tab-icon-wrap {
    width: 34px !important; height: 34px !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    border-radius: 12px !important;
    transition: background 0.2s !important;
  }
  #ios-tab-bar .ios-tab-item.active .ios-tab-icon-wrap {
    background: rgba(233,30,140,0.1) !important;
  }
  #ios-tab-bar .ios-tab-item svg {
    width: 20px !important; height: 20px !important;
    stroke: currentColor !important;
  }
  #ios-tab-bar .ios-tab-item.active svg {
    filter: drop-shadow(0 0 4px rgba(233,30,140,0.5)) !important;
  }
  
  #ios-tab-bar .ios-tab-camera .ios-tab-icon-wrap {
    width: 48px !important; height: 34px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg,#880e4f,#e91e8c) !important;
    box-shadow: 0 4px 16px rgba(233,30,140,0.4) !important;
  }
  #ios-tab-bar .ios-tab-camera svg { stroke: #fff !important; }
  #ios-tab-bar .ios-tab-camera.active .ios-tab-icon-wrap,
  #ios-tab-bar .ios-tab-camera .ios-tab-icon-wrap { background: linear-gradient(135deg,#880e4f,#e91e8c) !important; }
  
  #ios-tab-bar .ios-tab-83 svg { stroke: #e91e8c !important; }
  #ios-tab-bar .ios-tab-83 .ios-tab-label { color: #e91e8c !important; }
  #ios-tab-bar .ios-tab-83.active .ios-tab-icon-wrap {
    background: rgba(233,30,140,0.12) !important;
    box-shadow: 0 2px 10px rgba(233,30,140,0.2) !important;
  }
  
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)) !important; }
}

body { color: #4a0028 !important; }

.hero-title, .hero-sub { color: #3d0020 !important; -webkit-text-fill-color: inherit !important; }
.hero-title em { color: #e91e8c !important; -webkit-text-fill-color: #e91e8c !important; }
.hero-tag { color: #880e4f !important; }

h1, h2, h3, h4, h5 {
  color: #3d0020 !important;
  -webkit-text-fill-color: inherit !important;
}

h1[style*="gradient"], h2[style*="gradient"], h3[style*="gradient"] {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

p, li, span:not([class*="badge"]):not([class*="pill"]):not(.ios-tab-label):not([style*="color:#fff"]):not([style*="color: #fff"]) {
  color: rgb(216 187 130 / 62%);
}

label { color: #880e4f !important; }
input, textarea, select {
  color: #3d0020 !important;
  background-color: rgba(255,255,255,0.92) !important;
}
input::placeholder, textarea::placeholder { color: rgba(136,14,79,0.4) !important; }

.muted, [class*="muted"], [class*="sub-"], small { color: #9e3060 !important; }

nav a, .nav-link { color: #3d0020 !important; }
nav a:hover, .nav-link:hover { color: #e91e8c !important; }

.sidebar-block, [class*="-card"]:not([class*="ios"]) { color: #4a0028 !important; }

.ios-sheet-item-label { color: #3d0020 !important; }

footer, footer * {  }
.footer-link { color: rgba(255,220,240,0.85) !important; }
.footer-link:hover { color: #fff !important; }

.btn-primary, [class*="btn-primary"] { color: #fff !important; }

/* ============================================================ */

@keyframes aiPulse {
  0%,100%{box-shadow:0 6px 24px rgba(233,30,140,0.5),0 0 0 0 rgba(233,30,140,0.4);}
  50%{box-shadow:0 6px 24px rgba(233,30,140,0.5),0 0 0 10px rgba(233,30,140,0);}
}
@keyframes aiSlideUp {
  from{opacity:0;transform:translateY(20px) scale(0.95);}
  to{opacity:1;transform:none;}
}
.ai-typing { display:flex;align-items:center;gap:4px;padding:4px 0; }
.ai-dot { width:7px;height:7px;border-radius:50%;background:#e91e8c;animation:aiDot 1.2s infinite; }
.ai-dot:nth-child(2){animation-delay:.2s;} .ai-dot:nth-child(3){animation-delay:.4s;}
@keyframes aiDot{0%,80%,100%{transform:scale(0.6);opacity:.5;}40%{transform:scale(1);opacity:1;}}
#ai-msgs::-webkit-scrollbar{width:3px;}
#ai-msgs::-webkit-scrollbar-thumb{background:rgba(233,30,140,0.3);border-radius:2px;}

/* ============================================================ */

#l83-music-player{position:fixed;bottom:80px;right:16px;z-index:9999;background:linear-gradient(135deg,#880e4f,#e91e8c);border-radius:50%;width:44px;height:44px;display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(233,30,140,0.5);cursor:pointer;animation:heartBeat 2s ease-in-out infinite;}
#l83-music-player.show{display:flex;}

#cam-fs-ar-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);pointer-events:none;z-index:8;opacity:0;transition:opacity .35s;}
#cam-fs-ar-overlay.show{opacity:1;}
#cam-fs-scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(233,30,140,.7),transparent);z-index:7;pointer-events:none;display:none;animation:camScan 3s linear infinite;}
@keyframes camScan{0%{top:0;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{top:100%;opacity:0;}}
#cam-fs-scan-line.show{display:block;}
#cam-fs-grid-ov{position:absolute;inset:0;pointer-events:none;z-index:5;display:none;}
#cam-fs-grid-ov.show{display:block;}
#cam-fs-focus-ring{position:absolute;width:60px;height:60px;border:2.5px solid rgba(255,220,0,.9);border-radius:8px;pointer-events:none;z-index:9;display:none;transform:translate(-50%,-50%);}
@keyframes focusPop{0%{box-shadow:0 0 0 0 rgba(255,220,0,.8);}70%{box-shadow:0 0 0 16px rgba(255,220,0,0);}100%{box-shadow:0 0 0 0 rgba(255,220,0,0);}}
#cam-fs-ar-btn{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
#cam-fs-ar-btn.on{background:rgba(233,30,140,.35);border-color:rgba(233,30,140,.7);}
#cam-fs-grid-btn{background:none;border:none;color:rgba(255,255,255,.4);font-size:.68rem;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:3px;padding:2px 6px;}
#cam-fs-grid-btn.on{color:rgba(233,30,140,.9);}

#fpm-ai-suggest-btn{background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));border:1.5px solid rgba(99,102,241,.3);color:#818cf8;padding:9px 14px;border-radius:12px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:6px;transition:all .2s;}
#fpm-ai-suggest-btn:hover{background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.2));}

/* ============================================================ */

.fpm-font-btn.active,.fpm-pos-btn.active{background:rgba(233,30,140,0.12)!important;border-color:rgba(233,30,140,0.5)!important;color:var(--accent)!important;}
#fpm-panel-bgcolor,#fpm-panel-textoverlay{overflow-y:auto;max-height:340px;}

/* ============================================================ */

@keyframes adTimerShrink{from{width:100%}to{width:0%}}
@keyframes adShimmer{0%,100%{opacity:0}50%{opacity:1}}
@keyframes adSlideIn{from{opacity:0;transform:translateX(-28px) translateY(-50%)}to{opacity:1;transform:translateX(0) translateY(-50%)}}
@keyframes adSlideInR{from{opacity:0;transform:translateX(28px) translateY(-50%)}to{opacity:1;transform:translateX(0) translateY(-50%)}}
.side-ad-wrap{position:fixed;top:50%;transform:translateY(-50%);width:136px;z-index:900;display:none;transition:opacity .5s,transform .5s;}
.side-ad-wrap.hidden{opacity:0;pointer-events:none;}
@media(min-width:1440px){
  .side-ad-wrap{display:block;}
  .side-ad-wrap.left{left:10px;animation:adSlideIn .6s cubic-bezier(.34,1.3,.64,1) both;}
  .side-ad-wrap.right{right:10px;animation:adSlideInR .6s cubic-bezier(.34,1.3,.64,1) both;}
}
.side-ad-inner{background:linear-gradient(155deg,#880e4f,#e91e8c 60%,#f48fb1);border-radius:18px;padding:15px 11px 13px;text-align:center;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(233,30,140,0.32);transition:transform .25s,box-shadow .25s;}
.side-ad-inner:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 36px rgba(233,30,140,0.45);}
.side-ad-shimmer{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.15) 50%,transparent 60%);animation:adShimmer 3.5s ease-in-out infinite;pointer-events:none;}
.side-ad-close{position:absolute;top:6px;right:6px;background:rgba(255,255,255,0.2);border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:0.65rem;z-index:2;line-height:1;}
.side-ad-timer-bar{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,0.5);animation:adTimerShrink 40s linear forwards;border-radius:0 0 18px 18px;}
.side-ad-icon{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,0.2);border:1.5px solid rgba(255,255,255,0.35);display:flex;align-items:center;justify-content:center;margin:0 auto 9px;}
.side-ad-title{font-family:'Nunito',sans-serif;font-size:0.75rem;font-weight:900;color:#fff;line-height:1.35;margin-bottom:6px;text-shadow:0 1px 3px rgba(136,14,79,0.3);}
.side-ad-list{font-size:0.62rem;color:rgba(255,235,245,0.9);margin-bottom:10px;line-height:1.65;font-family:'Nunito',sans-serif;font-weight:600;}
.side-ad-cta{background:rgba(255,255,255,0.9);border-radius:10px;padding:7px 6px;font-family:'Nunito',sans-serif;font-size:0.72rem;font-weight:800;color:#880e4f;display:flex;align-items:center;justify-content:center;gap:4px;}

/* ============================================================ */

#pbCountdownOverlay {
  position:fixed;inset:0;z-index:88888;
  display:none;align-items:center;justify-content:center;flex-direction:column;
  background:rgba(8,0,4,0.72);backdrop-filter:blur(6px);pointer-events:none;
}
#pbCountdownOverlay.show{display:flex;animation:pbCdFadeIn .12s ease;}
@keyframes pbCdFadeIn{from{opacity:0}to{opacity:1}}
.pb-cd-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.pb-cd-ring{
  position:absolute;width:260px;height:260px;border-radius:50%;
  border:3px solid rgba(233,30,140,0.5);
  animation:pbRingExpand 0.85s ease-out forwards;
  pointer-events:none;
}
@keyframes pbRingExpand{0%{transform:scale(0.5);opacity:1;border-color:rgba(233,30,140,0.8);}100%{transform:scale(1.6);opacity:0;}}
.pb-cd-num{
  font-family:'Playfair Display',serif;
  font-size:clamp(7rem,20vw,11rem);font-weight:900;line-height:1;
  background:linear-gradient(135deg,#fff 0%,#f9a8d4 45%,#fff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;filter:drop-shadow(0 0 32px rgba(233,30,140,0.6));
  animation:pbNumPop .55s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes pbNumPop{0%{transform:scale(2.5);opacity:0;filter:blur(16px) drop-shadow(0 0 0 rgba(233,30,140,0));}60%{transform:scale(0.9);opacity:1;filter:blur(0) drop-shadow(0 0 32px rgba(233,30,140,0.6));}80%{transform:scale(1.05);}100%{transform:scale(1);}}
.pb-cd-label{
  font-family:'Fira Code',monospace;font-size:0.72rem;font-weight:600;
  color:rgba(244,143,177,0.7);letter-spacing:0.4em;text-transform:uppercase;margin-top:14px;
}

#pbFlashEl{position:fixed;inset:0;z-index:99995;background:#fff;opacity:0;pointer-events:none;}
#pbFlashEl.pop{animation:pbFlashPop 0.55s ease-out forwards;}
@keyframes pbFlashPop{0%{opacity:1;}40%{opacity:0.85;}100%{opacity:0;}}

#pbMobileTorchEl{position:fixed;inset:0;z-index:99994;background:rgba(255,255,255,0.0);opacity:0;pointer-events:none;display:none;}
#pbMobileTorchEl.torch-pop{animation:pbTorchPop 0.6s ease-out forwards;}
@keyframes pbTorchPop{0%{opacity:0.95;background:rgba(255,255,255,1);}50%{opacity:0.7;background:rgba(255,255,220,0.9);}100%{opacity:0;background:rgba(255,255,255,0);}}

#pbFilmPrint{
  position:fixed;bottom:-120px;left:50%;transform:translateX(-50%);z-index:88887;
  background:linear-gradient(160deg,#1a0010 0%,#3d0020 100%);
  border-radius:16px 16px 0 0;padding:10px 20px 18px;
  min-width:200px;text-align:center;
  box-shadow:0 -6px 30px rgba(233,30,140,0.35);
  border-top:1.5px solid rgba(233,30,140,0.3);
  transition:bottom 0.45s cubic-bezier(0.34,1.2,0.64,1);
}
#pbFilmPrint.show{bottom:0;}
.pb-holes{display:flex;gap:7px;justify-content:center;margin-bottom:8px;}
.pb-hole{width:9px;height:9px;border-radius:2px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.08);}
.pb-print-txt{font-family:'Fira Code',monospace;font-size:0.62rem;color:rgba(244,143,177,0.65);letter-spacing:0.25em;text-transform:uppercase;animation:blinkPrint 0.7s ease-in-out infinite alternate;}
@keyframes blinkPrint{from{opacity:0.35}to{opacity:1}}

/* ============================================================ */

#pbBellStage {
  display: none;
  position: fixed; inset: 0; z-index: 999998;
  align-items: center; justify-content: center;
  
  pointer-events: none;
  
  perspective: 1000px;
  
  will-change: opacity;
  contain: strict;
}
#pbBellStage.active {
  display: flex;
  pointer-events: auto;
  background: rgba(5,0,18,0.78);
}

@media (min-width: 769px) {
  #pbBellStage.active { backdrop-filter: blur(5px); }
}

#pbBellShadow {
  position: absolute;
  
  bottom: calc(50% - 105px);
  left: 50%;
  width: 110px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(233,30,140,0.5) 0%, transparent 72%);
  opacity: 0;
  transform: translate3d(-50%,0,0);
  transition: opacity 0.25s ease;
  pointer-events: none;
  contain: layout style;
}
@media (max-width: 768px) {
  #pbBellShadow { filter: none; }   
}
@media (min-width: 769px) {
  #pbBellShadow { filter: blur(5px); }
}

#pbBell3DWrap {
  position: relative;
  cursor: pointer;
  
  transform: translate3d(0, 110vh, 0);
  will-change: transform, opacity;
  contain: layout style;
}

#pbBell3DInner {
  position: relative;
  
  --bs: 130px;
  width: var(--bs); height: var(--bs);
  transform-style: preserve-3d;
  will-change: transform;
  contain: layout style;
}
@media (max-width: 480px)  { #pbBell3DInner { --bs: 100px; } }
@media (min-width: 769px)  { #pbBell3DInner { --bs: 150px; } }

#pbBell3DSVG {
  width: var(--bs, 130px); height: var(--bs, 130px);
  display: block;
}
@media (max-width: 768px) {
  
  #pbBell3DSVG { filter: drop-shadow(0 0 18px rgba(233,30,140,0.85)); }
}
@media (min-width: 769px) {
  
  #pbBell3DSVG {
    filter:
      drop-shadow(0 0 24px rgba(233,30,140,0.9))
      drop-shadow(0 0 50px rgba(233,30,140,0.4))
      drop-shadow(0 10px 20px rgba(0,0,0,0.7));
  }
}

.pb3-pulse {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px solid rgba(233,30,140,0.5);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.pb3-pulse.go {
  animation: pb3PulseOut 1.0s cubic-bezier(0.2,0.6,0.4,1) forwards;
}
.pb3-pulse:nth-child(2).go { animation-delay: 0.25s; }
.pb3-pulse:nth-child(3).go { animation-delay: 0.50s; }
@keyframes pb3PulseOut {
  0%   { transform: scale3d(0.6,0.6,1); opacity: 0.85; }
  100% { transform: scale3d(2.4,2.4,1); opacity: 0;    }
}

#pb3Dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff6ed6, #e91e8c);
  border: 2.5px solid rgba(10,0,25,1);
  box-shadow: 0 0 12px rgba(233,30,140,0.9);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 700; color: #fff;
  opacity: 0;
  transform: scale3d(0,0,1);
  
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0s;
  will-change: transform, opacity;
}
#pb3Dot.show { opacity: 1; transform: scale3d(1,1,1); }

#pb3Label {
  text-align: center;
  margin-top: 14px;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: transform, opacity;
  contain: layout style;
}
#pb3Label.show { opacity: 1; transform: translate3d(0,0,0); }
#pb3Label span {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  font-weight: 600; font-style: italic;
  background: linear-gradient(135deg, #fff 0%, #f9a8d4 50%, #e879f9 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: 0.04em;
}
#pb3Label small {
  display: block; margin-top: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.6rem, 2vw, 0.68rem);
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em; text-transform: uppercase;
}

#pb3Progress {
  position: absolute;
  bottom: -24px; left: 50%;
  transform: translate3d(-50%,0,0);
  width: 56px; height: 3px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  contain: strict;
}
#pb3Progress.show { opacity: 1; }
#pb3ProgressFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #e91e8c, #a855f7);
  border-radius: 4px;
  transform-origin: left center;
  will-change: transform;
}
#pb3ProgressFill.go {
  animation: pb3ProgShrink 2.5s linear forwards;
}
@keyframes pb3ProgShrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes pb3JumpIn {
  0%   { transform: translate3d(0, 110vh, 0); }
  55%  { transform: translate3d(0, -36px, 0); }
  72%  { transform: translate3d(0,   8px, 0); }
  84%  { transform: translate3d(0, -14px, 0); }
  93%  { transform: translate3d(0,   4px, 0); }
  100% { transform: translate3d(0,   0,   0); }
}

@keyframes pb3Spin3D {
  0%   { transform: rotateY(0deg)   rotateX(0deg);   }
  25%  { transform: rotateY(90deg)  rotateX(12deg);  }
  50%  { transform: rotateY(180deg) rotateX(0deg);   }
  75%  { transform: rotateY(270deg) rotateX(-10deg); }
  100% { transform: rotateY(360deg) rotateX(0deg);   }
}

@keyframes pb3ExitPop {
  0%   { transform: translate3d(0,  0,   0) scale3d(1,  1,  1); opacity: 1;   }
  40%  { transform: translate3d(0, -24px,0) scale3d(1.08,1.08,1); opacity: 0.7; }
  100% { transform: translate3d(0, -70px,0) scale3d(0.2,0.2,1);   opacity: 0;   }
}

@keyframes pb3BellShake {
  0%,100% { transform: rotate(0deg); }
  15%     { transform: rotate(-16deg) rotateY(8deg); }
  35%     { transform: rotate(14deg)  rotateY(-6deg); }
  55%     { transform: rotate(-10deg) rotateY(5deg); }
  75%     { transform: rotate(7deg)   rotateY(-3deg); }
  90%     { transform: rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  #pbBellStage { display: none !important; }
}
/* ═══════════════════════════════════════
   AUTH NAV BUTTON & MODAL STYLES
   ═══════════════════════════════════════ */
#pb-auth-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #e91e8c, #c2185b);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 2px 14px rgba(233, 30, 140, 0.4);
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: 6px;
}
#pb-auth-btn:hover {
    opacity: 0.86;
    transform: scale(1.04);
}
@keyframes pbIn {
    from { opacity: 0; transform: translateY(26px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#pb-auth-overlay.open {
    display: flex !important;
}
#pb-auth-box {
    scrollbar-width: thin;
    scrollbar-color: #252a36 transparent;
}
#pb-auth-box::-webkit-scrollbar { width: 4px; }
#pb-auth-box::-webkit-scrollbar-thumb {
    background: #252a36;
    border-radius: 4px;
}
/* ============================================================ */
/* Feedback v3 — Full redesign                                  */
/* ============================================================ */

/* ── Ambient orbs ─────────────────────────────────────────── */
.fb3-orb {
  position:absolute;border-radius:50%;
  pointer-events:none;filter:blur(110px);z-index:0;
}
.fb3-orb-1 { width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(233,30,140,.07),transparent 68%); animation:fb3OrbDrift 14s ease-in-out infinite; }
.fb3-orb-2 { width:400px;height:400px;bottom:-80px;right:-80px;background:radial-gradient(circle,rgba(233,30,140,.06),transparent 65%); animation:fb3OrbDrift 18s ease-in-out infinite reverse; }
.fb3-orb-3 { width:260px;height:260px;top:40%;left:55%;background:radial-gradient(circle,rgba(245,158,11,.08),transparent 70%); animation:fb3OrbDrift 22s ease-in-out infinite 4s; }
@keyframes fb3OrbDrift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,30px) scale(.97)} }

/* ── Particles ────────────────────────────────────────────── */
.fb3-particles { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0; }
.fb3-particle  { position:absolute;bottom:-20px;opacity:0; animation:fb3ParticleRise linear infinite; }
@keyframes fb3ParticleRise { 0%{bottom:-20px;opacity:0;transform:translateX(0) rotate(0)} 10%{opacity:.7} 80%{opacity:.4} 100%{bottom:110%;opacity:0;transform:translateX(40px) rotate(360deg)} }

/* ── Hero ──────────────────────────────────────────────────── */
.fb3-hero { text-align:center;margin-bottom:52px;position:relative; }
.fb3-pill {
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(233,30,140,.09);border:1px solid rgba(233,30,140,.22);
  border-radius:50px;padding:6px 18px;margin-bottom:18px;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent,#e91e8c);font-family:'Fira Code',monospace;
}
.fb3-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.2rem);
  color:var(--text,#3d0020);margin:0 0 14px;line-height:1.15;
}
.fb3-title-accent {
  color:var(--accent,#e91e8c);font-style:italic;
  background:linear-gradient(135deg,#e91e8c,#c2185b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fb3-sparkle { font-style:normal;animation:fb3SpinPop 2s ease-in-out infinite; display:inline-block; }
@keyframes fb3SpinPop { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.3) rotate(20deg)} }
.fb3-subtitle { font-size:.95rem;color:var(--muted,#c2185b);max-width:500px;margin:0 auto 20px;line-height:1.7; }
.fb3-live-badge {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(233,30,140,.08);border:1px solid rgba(233,30,140,.18);
  border-radius:50px;padding:6px 16px;font-size:.78rem;color:var(--accent,#e91e8c);font-weight:700;
}
.fb3-live-dot {
  width:7px;height:7px;border-radius:50%;background:#e91e8c;flex-shrink:0;
  animation:fb3LivePulse 1.4s ease-in-out infinite;
}
@keyframes fb3LivePulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.6} }

/* ── Stats strip ───────────────────────────────────────────── */
.fb3-stats-strip {
  display:flex;align-items:center;justify-content:center;
  background:var(--surface,rgba(255,255,255,.06));
  border:1px solid var(--border,rgba(233,30,140,.15));
  border-radius:24px;padding:20px 32px;margin-bottom:32px;
  gap:0;flex-wrap:wrap;
  box-shadow:0 4px 32px rgba(136,14,79,.06);
}
.fb3-stat-item { text-align:center;flex:1;min-width:100px; }
.fb3-stat-icon {
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,rgba(var(--ic-rgb,233,30,140),.18),transparent);
  border:1px solid color-mix(in srgb,var(--ic,#e91e8c) 30%,transparent);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;color:var(--ic,#e91e8c);
  transition:transform .3s;
}
.fb3-stat-item:hover .fb3-stat-icon { transform:scale(1.12) rotate(-4deg); }
.fb3-stat-num { font-family:'Playfair Display',serif;font-size:1.85rem;color:var(--accent,#e91e8c);font-weight:700;line-height:1; }
.fb3-stat-label { font-size:.68rem;color:var(--muted,#c2185b);text-transform:uppercase;letter-spacing:.1em;margin-top:4px; }
.fb3-stat-divider { width:1px;height:50px;background:var(--border,rgba(233,30,140,.15));flex-shrink:0;margin:0 12px; }

/* ── Rating Breakdown ─────────────────────────────────────── */
.fb3-rating-breakdown {
  display:flex;align-items:center;gap:32px;
  background:var(--surface,rgba(255,255,255,.06));
  border:1px solid var(--border,rgba(233,30,140,.15));
  border-radius:24px;padding:28px 32px;margin-bottom:32px;
  box-shadow:0 4px 32px rgba(136,14,79,.06);
}
.fb3-breakdown-left { text-align:center;flex-shrink:0;min-width:100px; }
.fb3-big-score { font-family:'Playfair Display',serif;font-size:4rem;font-weight:700;color:var(--accent,#e91e8c);line-height:1; }
.fb3-stars-display { display:flex;justify-content:center;gap:2px;margin:8px 0 6px; }
.fb3-score-label { font-size:.78rem;font-weight:700;color:var(--muted,#c2185b);letter-spacing:.05em; }
.fb3-breakdown-bars { flex:1;display:flex;flex-direction:column;gap:8px; }
.fb3-bar-row { display:flex;align-items:center;gap:10px; }
.fb3-bar-num { font-size:.75rem;font-weight:700;color:var(--muted,#c2185b);width:26px;flex-shrink:0; }
.fb3-bar-track { flex:1;height:8px;background:rgba(233,30,140,.1);border-radius:8px;overflow:hidden; }
.fb3-bar-fill { height:100%;border-radius:8px;transition:width .8s cubic-bezier(.22,1,.36,1);background:#f59e0b; }
.fb3-bar-pct { font-size:.7rem;color:var(--muted,#c2185b);width:32px;text-align:right;flex-shrink:0; }
@media(max-width:600px){
  .fb3-rating-breakdown{flex-direction:column;gap:20px;}
  .fb3-big-score{font-size:3rem;}
}

/* ── Form card ─────────────────────────────────────────────── */
.fb3-form-card {
  background:var(--surface,rgba(255,255,255,.06));
  border:1px solid var(--border,rgba(233,30,140,.15));
  border-radius:28px;padding:32px;margin-bottom:32px;
  position:relative;overflow:hidden;
  box-shadow:0 8px 48px rgba(136,14,79,.08);
}
.fb3-form-card::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 0%,rgba(233,30,140,.07),transparent 60%);
  pointer-events:none;
}
.fb3-form-header {
  display:flex;align-items:center;gap:14px;
  margin-bottom:26px;padding-bottom:20px;
  border-bottom:1px solid rgba(233,30,140,.1);
}
.fb3-form-icon {
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(233,30,140,.18),rgba(136,14,79,.08));
  border:1px solid rgba(233,30,140,.22);
  display:flex;align-items:center;justify-content:center;color:var(--accent,#e91e8c);
}
.fb3-form-title { font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--text,#3d0020); }
.fb3-form-sub   { font-size:.74rem;color:var(--muted,#c2185b);margin-top:2px; }
.fb3-form-badge-right {
  margin-left:auto;flex-shrink:0;
  background:linear-gradient(135deg,#e91e8c,#c2185b);
  color:#fce4ec;font-size:.68rem;font-weight:800;
  padding:4px 12px;border-radius:50px;letter-spacing:.05em;text-transform:uppercase;
}
.fb3-form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px; }
@media(max-width:560px){ .fb3-form-row{grid-template-columns:1fr;} }

/* ── Mood picker ───────────────────────────────────────────── */
.fb3-mood-row { display:flex;gap:8px;flex-wrap:wrap;margin-top:8px; }
.fb3-mood-btn {
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(233,30,140,.06);border:1.5px solid rgba(233,30,140,.15);
  border-radius:14px;padding:10px 14px;cursor:pointer;
  font-size:1.4rem;transition:all .22s;color:var(--text,#3d0020);
}
.fb3-mood-btn span { font-size:.62rem;font-weight:700;opacity:.7;letter-spacing:.05em;text-transform:uppercase; }
.fb3-mood-btn:hover,.fb3-mood-btn.active {
  background:rgba(233,30,140,.14);border-color:rgba(233,30,140,.5);
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 6px 18px rgba(233,30,140,.2);
}
.fb3-mood-btn.active { border-color:var(--accent,#e91e8c); }

/* ── Star row ──────────────────────────────────────────────── */
.fb3-star-row { display:flex;align-items:center;gap:4px;margin-top:8px; }
.fb3-star { transition:transform .2s,color .2s; }
.fb3-star:hover { transform:scale(1.2); }
.fb3-star-label { margin-left:12px;font-size:.82rem;font-weight:700;color:var(--accent,#e91e8c);font-family:'Nunito',sans-serif; }

/* ── Textarea ──────────────────────────────────────────────── */
.fb3-textarea { min-height:110px;resize:vertical; }
.fb3-char-count { margin-left:auto;font-size:.72rem;font-weight:600;opacity:.6; }

/* ── Submit btn ────────────────────────────────────────────── */
.fb3-submit-btn {
  position:relative;overflow:hidden;
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#e91e8c,#c2185b);
  color:#fce4ec;border:none;border-radius:16px;
  padding:15px 28px;font-family:'Nunito',sans-serif;
  font-size:.95rem;font-weight:800;cursor:pointer;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 6px 24px rgba(233,30,140,.35);
  letter-spacing:.02em;
}
.fb3-submit-btn:hover { transform:translateY(-2px);box-shadow:0 12px 36px rgba(233,30,140,.45); }
.fb3-submit-btn:active { transform:translateY(0); }
.fb3-submit-shine {
  position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .5s;
}
.fb3-submit-btn:hover .fb3-submit-shine { transform:translateX(100%); }

/* ── Filter tabs ───────────────────────────────────────────── */
.fb3-filter-tabs {
  display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;
}
.fb3-ftab {
  background:rgba(233,30,140,.06);border:1px solid rgba(233,30,140,.15);
  color:var(--muted,#c2185b);border-radius:50px;
  padding:7px 16px;font-size:.78rem;font-weight:700;cursor:pointer;
  transition:all .22s;font-family:'Nunito',sans-serif;
}
.fb3-ftab:hover,.fb3-ftab.active {
  background:rgba(233,30,140,.15);border-color:var(--accent,#e91e8c);
  color:var(--accent,#e91e8c);
}

/* ── List header ───────────────────────────────────────────── */
.fb3-list-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
.fb3-reviews-count-badge {
  background:rgba(233,30,140,.1);border:1px solid rgba(233,30,140,.25);
  border-radius:50px;padding:4px 14px;font-size:.75rem;
  color:var(--accent,#e91e8c);font-weight:700;font-family:'Fira Code',monospace;
}
.fb3-reviews-list { margin-bottom:40px; }

/* ── Section block ─────────────────────────────────────────── */
.fb3-section-block {
  background:var(--surface,rgba(255,255,255,.06));
  border:1px solid var(--border,rgba(233,30,140,.15));
  border-radius:24px;padding:28px;margin-bottom:28px;
}
.fb3-block-header {
  display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;
}
.fb3-block-icon {
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ic,#e91e8c) 20%,transparent),transparent);
  border:1px solid color-mix(in srgb,var(--ic,#e91e8c) 25%,transparent);
  display:flex;align-items:center;justify-content:center;color:var(--ic,#e91e8c);
}
.fb3-live-mini {
  margin-left:auto;display:flex;align-items:center;gap:7px;
  background:rgba(233,30,140,.07);border:1px solid rgba(233,30,140,.15);
  border-radius:50px;padding:4px 12px;font-size:.75rem;color:var(--accent,#e91e8c);font-weight:600;
}

/* ── Gallery grid ──────────────────────────────────────────── */
.fb3-gallery-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;min-height:180px;border-radius:16px;overflow:hidden;
}
.fb3-gallery-empty {
  grid-column:1/-1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:50px;color:var(--muted,#c2185b);font-size:.88rem;
  background:var(--surface,rgba(255,255,255,.03));
  border:1px dashed rgba(233,30,140,.2);border-radius:16px;
}

/* ── CTA card ──────────────────────────────────────────────── */
.fb3-cta-card {
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(233,30,140,.1),rgba(233,30,140,.03),rgba(99,102,241,.06));
  border:1px solid rgba(233,30,140,.28);border-radius:28px;
  padding:48px 40px;text-align:center;
  box-shadow:0 8px 48px rgba(136,14,79,.1);
}
.fb3-cta-glow {
  position:absolute;width:200px;height:200px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(233,30,140,.18),transparent 70%);
  top:-60px;left:-60px;
}
.fb3-cta-glow2 { width:160px;height:160px;top:auto;left:auto;bottom:-40px;right:-40px;background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%); }
.fb3-cta-icon {
  width:72px;height:72px;border-radius:22px;
  background:linear-gradient(135deg,var(--accent,#e91e8c),var(--accent2,#c2185b));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;box-shadow:0 14px 36px rgba(233,30,140,.38);
  animation:fb3IconBob 3s ease-in-out infinite;
}
@keyframes fb3IconBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.fb3-cta-title { font-family:'Playfair Display',serif;font-size:1.6rem;margin-bottom:12px;color:var(--text,#3d0020); }
.fb3-cta-desc  { color:var(--muted,#c2185b);font-size:.9rem;max-width:480px;margin:0 auto 28px;line-height:1.75; }
.fb3-cta-btns  { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }
.fb3-cta-btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:50px;text-decoration:none;
  font-size:.88rem;font-weight:700;transition:all .25s;cursor:pointer;
  font-family:'Nunito',sans-serif;border:none;
}
.fb3-cta-btn:hover { transform:translateY(-2px); }
.fb3-cta-btn-ghost   { background:rgba(255,255,255,.06);border:1px solid var(--border,rgba(233,30,140,.2));color:var(--text,#3d0020); }
.fb3-cta-btn-ghost:hover { border-color:var(--accent,#e91e8c); }
.fb3-cta-btn-fb      { background:rgba(24,119,242,.12);border:1px solid rgba(24,119,242,.3);color:#60a5fa; }
.fb3-cta-btn-zalo    { background:rgba(0,120,255,.12);border:1px solid rgba(0,120,255,.3);color:#60a5fa; }
.fb3-cta-btn-primary { background:linear-gradient(135deg,#e91e8c,#c2185b);color:#fce4ec;box-shadow:0 6px 20px rgba(233,30,140,.32); }
.fb3-cta-btn-primary:hover { box-shadow:0 12px 28px rgba(233,30,140,.42); }

/* ── Tips strip ───────────────────────────────────────────── */
.fb3-tips-strip {
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(233,30,140,.06),rgba(99,102,241,.04));
  border:1px solid rgba(233,30,140,.14);border-radius:20px;
  padding:18px 28px;margin-bottom:28px;gap:0;
}
.fb3-tip-item {
  display:flex;align-items:center;gap:12px;
  flex:1;min-width:160px;padding:6px 16px;
}
.fb3-tip-icon {
  font-size:1.6rem;flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(233,30,140,.3));
}
.fb3-tip-item div { display:flex;flex-direction:column;gap:1px; }
.fb3-tip-item strong { font-size:.82rem;font-weight:800;color:var(--text,#3d0020); }
.fb3-tip-item span  { font-size:.72rem;color:var(--muted,#c2185b);opacity:.8; }
.fb3-tip-divider    { width:1px;height:36px;background:rgba(233,30,140,.12);flex-shrink:0; }
@media(max-width:600px){
  .fb3-tips-strip{gap:6px;padding:14px 16px;}
  .fb3-tip-divider{display:none;}
  .fb3-tip-item{min-width:140px;padding:6px 8px;}
}

/* ── Marquee quotes ───────────────────────────────────────── */
.fb3-marquee-wrap {
  overflow:hidden;margin-bottom:28px;
  -webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
  mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
}
.fb3-marquee-track {
  display:flex;align-items:center;gap:28px;width:max-content;
  animation:fb3Marquee 32s linear infinite;
  padding:14px 0;
}
.fb3-marquee-track:hover { animation-play-state:paused; }
@keyframes fb3Marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.fb3-mq-item {
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:var(--surface,rgba(255,255,255,.06));
  border:1px solid rgba(233,30,140,.14);border-radius:50px;
  padding:10px 20px;font-size:.82rem;color:var(--text,#3d0020);
  transition:border-color .25s,transform .25s;
}
.fb3-mq-item:hover { border-color:rgba(233,30,140,.4);transform:translateY(-2px); }
.fb3-mq-item em { color:var(--muted,#c2185b);font-style:normal;font-weight:700; }
.fb3-mq-star { font-size:.72rem;letter-spacing:-.5px; }
.fb3-mq-sep { color:rgba(233,30,140,.35);font-size:1rem;flex-shrink:0; }

/* ── Highlight cards ──────────────────────────────────────── */
.fb3-highlight-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px;
}
@media(max-width:700px){ .fb3-highlight-grid{grid-template-columns:1fr;} }
@media(min-width:701px) and (max-width:900px){ .fb3-highlight-grid{grid-template-columns:1fr 1fr;} }
.fb3-highlight-card {
  position:relative;border-radius:22px;padding:28px 24px 22px;
  border:1px solid;overflow:hidden;transition:transform .3s,box-shadow .3s;
}
.fb3-highlight-card:hover { transform:translateY(-5px); }
.fb3-hc-pink   { background:linear-gradient(140deg,rgba(233,30,140,.09),rgba(233,30,140,.03)); border-color:rgba(233,30,140,.22); box-shadow:0 4px 24px rgba(233,30,140,.07); }
.fb3-hc-pink:hover { box-shadow:0 12px 36px rgba(233,30,140,.16); }
.fb3-hc-purple { background:linear-gradient(140deg,rgba(99,102,241,.1),rgba(99,102,241,.03));  border-color:rgba(99,102,241,.22);  box-shadow:0 4px 24px rgba(99,102,241,.07); }
.fb3-hc-purple:hover { box-shadow:0 12px 36px rgba(99,102,241,.16); }
.fb3-hc-gold   { background:linear-gradient(140deg,rgba(245,158,11,.1),rgba(245,158,11,.03));  border-color:rgba(245,158,11,.22);  box-shadow:0 4px 24px rgba(245,158,11,.07); }
.fb3-hc-gold:hover { box-shadow:0 12px 36px rgba(245,158,11,.16); }
.fb3-hc-quote {
  position:absolute;top:12px;right:18px;
  font-family:'Playfair Display',serif;font-size:5rem;line-height:1;
  opacity:.08;color:var(--accent,#e91e8c);pointer-events:none;font-weight:700;
}
.fb3-hc-text {
  font-size:.875rem;line-height:1.7;color:var(--text,#3d0020);
  margin:0 0 18px;font-style:italic;position:relative;z-index:1;
}
.fb3-hc-author {
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.fb3-hc-avatar {
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:.9rem;
}
.fb3-hc-author > div:nth-child(2) {
  display:flex;flex-direction:column;gap:1px;flex:1;
}
.fb3-hc-author strong { font-size:.82rem;font-weight:800;color:var(--text,#3d0020); }
.fb3-hc-author span   { font-size:.7rem;color:var(--muted,#c2185b); }
.fb3-hc-stars { margin-left:auto;font-size:.78rem;letter-spacing:-.5px; }
/*
  ╔══════════════════════════════════════════════════════════════╗
  ║   PhotobothNe — CSS Enhancement Patch v2.0                  ║
  ║   Cách dùng: <link> file này SAU style.css trong <head>     ║
  ╚══════════════════════════════════════════════════════════════╝

  NHỮNG CẢI TIẾN CHÍNH:
  ✅ Fix lag: giảm blur nặng trên mobile, tối ưu animation
  ✅ Tab Feedback: thêm photo preview attachment, fix layout lỗi
  ✅ Thêm tính năng: hướng dẫn sử dụng (guide section) đẹp hơn
  ✅ Thêm FAQ section trong feedback
  ✅ Cải thiện responsive toàn diện
  ✅ Dark mode nâng cao
  ✅ Micro-animation mới sinh động hơn
  ✅ Cải thiện section Hướng Dẫn
*/

/* ══════════════════════════════════════════
   PERFORMANCE: Giảm lag trên mobile
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Tắt hiệu ứng nặng trên mobile */
  .fb3-orb, .petal-bg, .sparkle-wrap {
    display: none !important;
  }
  /* Giảm blur backdrop */
  .glass {
    backdrop-filter: blur(8px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
  }
  /* Giảm animation particles */
  .fb3-particle {
    animation-duration: 20s !important;
  }
}

/* Tắt animation nặng khi user prefer giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .petal, .sparkle, .fb3-particle,
  .fb3-orb, .badge-pink, .text-shimmer {
    animation: none !important;
    transition: none !important;
  }
}

/* GPU acceleration cho các phần tử thường xuyên animate */
.petal, .fb3-orb, .fb3-particle, .ios-tab-item {
  will-change: transform;
  transform: translateZ(0);
}

/* ══════════════════════════════════════════
   TAB FEEDBACK — SỬA LỖI & NÂNG CẤP
   ══════════════════════════════════════════ */

/* Fix: gallery grid hiển thị đẹp hơn khi trống */
.fb3-gallery-grid:empty::after,
.fb3-gallery-empty {
  background: linear-gradient(135deg,
    rgba(233,30,140,.04),
    rgba(233,30,140,.01)
  ) !important;
  border: 1.5px dashed rgba(233,30,140,.22) !important;
}

/* Fix: filter tabs trên mobile scroll ngang */
.fb3-filter-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  gap: 6px !important;
  scroll-snap-type: x mandatory;
}
.fb3-filter-tabs::-webkit-scrollbar { display: none; }
.fb3-ftab { 
  scroll-snap-align: start;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fix: form review — name field validation visual */
.pb-form-input:invalid:not(:placeholder-shown) {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
.pb-form-input:valid:not(:placeholder-shown) {
  border-color: #10b981 !important;
}

/* NEW: Photo attachment button trong form feedback */
.fb3-photo-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(233,30,140,.05);
  border: 1.5px dashed rgba(233,30,140,.2);
  border-radius: 14px;
  cursor: pointer;
  transition: all .22s;
  font-size: .82rem;
  color: var(--muted, #c2185b);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}
.fb3-photo-attach:hover {
  background: rgba(233,30,140,.1);
  border-color: rgba(233,30,140,.45);
  color: var(--accent, #e91e8c);
  transform: translateY(-1px);
}
.fb3-photo-attach input[type=file] {
  display: none;
}
.fb3-photo-preview-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.fb3-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(233,30,140,.2);
  transition: all .2s;
}
.fb3-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fb3-photo-thumb-del {
  position: absolute;
  top: 3px; right: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(30,0,15,.7);
  border: none;
  color: #fff;
  font-size: .6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.fb3-photo-thumb:hover .fb3-photo-thumb-del { opacity: 1; }

/* NEW: Review card - photo display */
.fb3-review-photo {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 10px;
  border: 1px solid rgba(233,30,140,.12);
}

/* NEW: "Hữu ích" like button trên mỗi review */
.fb3-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(233,30,140,.15);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: .72rem;
  color: var(--muted, #c2185b);
  cursor: pointer;
  transition: all .2s;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  margin-top: 8px;
}
.fb3-like-btn:hover, .fb3-like-btn.liked {
  background: rgba(233,30,140,.1);
  border-color: rgba(233,30,140,.4);
  color: var(--accent, #e91e8c);
}
.fb3-like-btn.liked {
  background: rgba(233,30,140,.14);
}

/* NEW: Review verified badge */
.fb3-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 50px;
  padding: 2px 8px;
  font-size: .62rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   NEW SECTION: HƯỚNG DẪN SỬ DỤNG (Guide)
   ══════════════════════════════════════════ */

.guide-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.guide-steps-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.guide-header {
  text-align: center;
  margin-bottom: 60px;
}
.guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(233,30,140,.1), rgba(233,30,140,.05));
  border: 1px solid rgba(233,30,140,.22);
  border-radius: 50px;
  padding: 6px 18px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, #e91e8c);
  font-family: 'Fira Code', monospace;
  margin-bottom: 16px;
}
.guide-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--text, #3d0020);
  margin-bottom: 12px;
  line-height: 1.2;
}
.guide-subtitle {
  font-size: .95rem;
  color: var(--muted, #c2185b);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Steps grid */
.guide-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

.guide-step-card {
  position: relative;
  background: var(--surface, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(233,30,140,.12));
  border-radius: 24px;
  padding: 28px 24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  overflow: hidden;
}
.guide-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #e91e8c), transparent);
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transition: opacity .3s;
}
.guide-step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(136,14,79,.12);
}
.guide-step-card:hover::before { opacity: 1; }

.guide-step-num {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent, #e91e8c), #c2185b);
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(233,30,140,.35);
}
.guide-step-icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(233,30,140,.3));
}
.guide-step-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #3d0020);
  margin-bottom: 8px;
}
.guide-step-desc {
  font-size: .84rem;
  color: var(--muted, #c2185b);
  line-height: 1.65;
}
.guide-step-tip {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(233,30,140,.06);
  border-left: 2.5px solid var(--accent, #e91e8c);
  border-radius: 0 8px 8px 0;
  font-size: .75rem;
  color: var(--accent, #e91e8c);
  font-weight: 600;
  font-style: italic;
}

/* Video demo embed block */
.guide-video-block {
  background: var(--surface, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(233,30,140,.12));
  border-radius: 24px;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.guide-video-thumb {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 16/9;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(233,30,140,.15), rgba(233,30,140,.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  cursor: pointer;
  border: 1px solid rgba(233,30,140,.2);
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.guide-video-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 36px rgba(233,30,140,.2);
}
.guide-video-play {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #e91e8c), #c2185b);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(233,30,140,.5);
  animation: guidePlayPulse 2s ease-in-out infinite;
}
@keyframes guidePlayPulse {
  0%,100% { box-shadow: 0 8px 28px rgba(233,30,140,.5); transform: scale(1); }
  50% { box-shadow: 0 12px 40px rgba(233,30,140,.7); transform: scale(1.07); }
}
.guide-video-info { flex: 1; min-width: 200px; }
.guide-video-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text, #3d0020);
  margin-bottom: 8px;
}
.guide-video-desc {
  font-size: .85rem;
  color: var(--muted, #c2185b);
  line-height: 1.65;
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .guide-video-block { flex-direction: column; }
  .guide-video-thumb { width: 100%; }
}

/* ══════════════════════════════════════════
   NEW SECTION: FAQ ACCORDION
   ══════════════════════════════════════════ */

.faq-section {
  padding: 72px 0;
  position: relative;
}
.faq-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}
.faq-header {
  text-align: center;
  margin-bottom: 48px;
}
.faq-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--text, #3d0020);
  margin-bottom: 10px;
}
.faq-subtitle {
  font-size: .9rem;
  color: var(--muted, #c2185b);
  line-height: 1.65;
}

.faq-item {
  background: var(--surface, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(233,30,140,.12));
  border-radius: 18px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .25s, border-color .25s;
}
.faq-item:hover {
  border-color: rgba(233,30,140,.28);
  box-shadow: 0 6px 28px rgba(136,14,79,.07);
}
.faq-item.open {
  border-color: rgba(233,30,140,.35);
  box-shadow: 0 8px 36px rgba(136,14,79,.1);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  gap: 12px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text, #3d0020);
  font-family: 'Nunito', sans-serif;
  user-select: none;
  transition: color .2s;
}
.faq-item.open .faq-question {
  color: var(--accent, #e91e8c);
}
.faq-q-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(233,30,140,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.faq-q-text { flex: 1; }
.faq-chevron {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--muted, #c2185b);
  transition: transform .3s var(--ease);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer-inner {
  padding: 0 22px 20px 22px;
  font-size: .87rem;
  color: var(--muted, #c2185b);
  line-height: 1.75;
  border-top: 1px solid rgba(233,30,140,.08);
  padding-top: 16px;
}
.faq-answer-inner strong { color: var(--accent, #e91e8c); }
.faq-answer-inner a {
  color: var(--accent, #e91e8c);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══════════════════════════════════════════
   NÂNG CẤP VISUAL: Cards & Sections
   ══════════════════════════════════════════ */

/* Cải thiện hero section với animated gradient mesh */
.hero-section {
  position: relative;
  isolation: isolate;
}
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(233,30,140,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(99,102,241,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 60% 10%, rgba(245,158,11,.05) 0%, transparent 60%);
  animation: meshDrift 20s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.08) rotate(1.5deg); }
}

/* Feature cards nâng cấp */
.feat-card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease) !important;
}
.feat-card:hover {
  box-shadow:
    0 20px 60px rgba(136,14,79,.14),
    0 0 0 1px rgba(233,30,140,.18) !important;
}

/* Animated counter display */
.pb-counter-num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.pb-counter-anim {
  animation: counterPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes counterPop {
  0%   { transform: scale(.8); opacity: .5; }
  100% { transform: scale(1);  opacity: 1;  }
}

/* ══════════════════════════════════════════
   NÂNG CẤP IOS TAB BAR
   ══════════════════════════════════════════ */

/* Notification dot cho tab */
.ios-tab-item[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: 2px; right: calc(50% - 20px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #e91e8c, #c2185b);
  color: #fff;
  font-size: .55rem;
  font-weight: 900;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  z-index: 1;
}

/* Tab active indicator strip */
.ios-tab-item.active .ios-tab-icon-wrap::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px;
  border-radius: 3px;
  background: var(--accent, #e91e8c);
  animation: tabIndicator .3s var(--ease);
}
@keyframes tabIndicator {
  from { width: 0; opacity: 0; }
  to   { width: 18px; opacity: 1; }
}

/* ══════════════════════════════════════════
   SCROLL TO TOP BUTTON
   ══════════════════════════════════════════ */

#pb-scroll-top {
  position: fixed;
  bottom: 90px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #e91e8c), #c2185b);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(233,30,140,.4);
  opacity: 0;
  transform: translateY(20px) scale(.85);
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 999;
  pointer-events: none;
}
#pb-scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#pb-scroll-top:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 12px 32px rgba(233,30,140,.55);
}
@media (min-width: 769px) {
  #pb-scroll-top { bottom: 30px; right: 24px; }
}

/* ══════════════════════════════════════════
   LOADING SKELETON (Giảm CLS)
   ══════════════════════════════════════════ */

.pb-skeleton {
  background: linear-gradient(90deg,
    rgba(233,30,140,.06) 0%,
    rgba(233,30,140,.12) 50%,
    rgba(233,30,140,.06) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeletonShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.pb-skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 7px; }
.pb-skeleton-text:last-child { width: 70%; }
.pb-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.pb-skeleton-card { height: 120px; border-radius: 18px; }

/* ══════════════════════════════════════════
   REVIEW CARD NÂNG CẤP
   ══════════════════════════════════════════ */

/* Review card với entrance animation */
.pb-review-card-v2 {
  background: var(--surface, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(233,30,140,.12));
  border-radius: 22px;
  padding: 22px 24px;
  margin-bottom: 14px;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: reviewCardIn .4s var(--ease) both;
}
@keyframes reviewCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pb-review-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(136,14,79,.08);
  border-color: rgba(233,30,140,.22);
}
.pb-review-card-v2 .review-header-v2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.pb-review-card-v2 .review-avatar-v2 {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent, #e91e8c), #c2185b);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  box-shadow: 0 4px 14px rgba(233,30,140,.3);
}
.pb-review-card-v2 .review-meta-v2 { flex: 1; }
.pb-review-card-v2 .review-name-v2 {
  font-weight: 800;
  font-size: .9rem;
  color: var(--text, #3d0020);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.pb-review-card-v2 .review-date-v2 {
  font-size: .7rem;
  color: var(--muted, #c2185b);
  opacity: .7;
  margin-top: 2px;
}
.pb-review-card-v2 .review-stars-v2 {
  display: flex;
  gap: 2px;
  color: #f59e0b;
  font-size: .85rem;
}
.pb-review-card-v2 .review-mood-v2 {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.pb-review-card-v2 .review-tag-v2 {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 50px;
  font-size: .64rem;
  font-weight: 700;
  background: rgba(233,30,140,.1);
  color: var(--accent, #e91e8c);
  border: 1px solid rgba(233,30,140,.2);
  margin-top: 4px;
}
.pb-review-card-v2 .review-text-v2 {
  font-size: .88rem;
  color: var(--muted, #c2185b);
  line-height: 1.75;
  position: relative;
  padding-left: 14px;
}
.pb-review-card-v2 .review-text-v2::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent, #e91e8c), transparent);
}
.pb-review-card-v2 .review-footer-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ══════════════════════════════════════════
   FEEDBACK FORM — THÊM "UPLOAD ẢNH PHOTOBOOTH"
   ══════════════════════════════════════════ */

/* Label upload ảnh */
.fb3-upload-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  background: rgba(233,30,140,.06);
  border: 1.5px dashed rgba(233,30,140,.22);
  border-radius: 14px;
  cursor: pointer;
  font-size: .84rem;
  color: var(--muted, #c2185b);
  font-weight: 700;
  transition: all .22s;
  width: 100%;
  font-family: 'Nunito', sans-serif;
  justify-content: center;
}
.fb3-upload-label:hover {
  background: rgba(233,30,140,.12);
  border-color: rgba(233,30,140,.45);
  color: var(--accent, #e91e8c);
}

/* ══════════════════════════════════════════
   RESPONSIVE & MOBILE IMPROVEMENTS
   ══════════════════════════════════════════ */

/* Responsive padding cho sections */
@media (max-width: 480px) {
  .fb3-form-card { padding: 20px 16px !important; }
  .fb3-stats-strip { padding: 16px 12px !important; flex-direction: row; }
  .fb3-stat-num { font-size: 1.45rem !important; }
  .fb3-rating-breakdown { padding: 20px 16px !important; }
  .fb3-big-score { font-size: 2.6rem !important; }
  .fb3-cta-card { padding: 30px 18px !important; }
  .guide-steps-grid { grid-template-columns: 1fr !important; }
  .pb-review-card-v2 { padding: 16px !important; }
  .faq-question { padding: 14px 16px !important; font-size: .86rem; }
  .faq-answer-inner { padding: 0 16px 16px !important; }
}

@media (max-width: 768px) {
  /* Safe area cho iPhone notch */
  .ios-tab-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Scroll chỉ theo chiều dọc trên mobile */
  html { -webkit-overflow-scrolling: touch; }
  /* Fix font rendering */
  body { -webkit-text-size-adjust: 100%; }
}

/* ══════════════════════════════════════════
   DARK MODE NÂNG CẤP
   ══════════════════════════════════════════ */

[data-theme="dark"] .guide-step-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .pb-review-card-v2 {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(233,30,140,.18) !important;
}

[data-theme="dark"] .fb3-photo-attach {
  background: rgba(233,30,140,.08) !important;
  border-color: rgba(233,30,140,.25) !important;
}

/* ══════════════════════════════════════════
   TOAST NOTIFICATION NÂNG CẤP
   ══════════════════════════════════════════ */

.pb-toast-v2 {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #161926, #1e2535);
  border: 1px solid rgba(233,30,140,.4);
  border-radius: 20px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  font-weight: 700;
  color: #e8eaf0;
  box-shadow: 0 10px 40px rgba(233,30,140,.3);
  opacity: 0;
  z-index: 99999;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  max-width: calc(100vw - 40px);
}
.pb-toast-v2.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pb-toast-v2.success { border-color: rgba(16,185,129,.4); }
.pb-toast-v2.error   { border-color: rgba(239,68,68,.4); }

@media (min-width: 769px) {
  .pb-toast-v2 { bottom: 30px; }
}

/* ══════════════════════════════════════════
   SECTION CONNECTOR (visual link between sections)
   ══════════════════════════════════════════ */

.section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
  margin: 0 auto;
  max-width: 600px;
}
.section-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,30,140,.18), transparent);
}
.section-divider-icon {
  font-size: 1.2rem;
  opacity: .5;
  animation: dividerFloat 3s ease-in-out infinite;
}
@keyframes dividerFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(10deg); }
}