/* ===== ROOT VARIABLES ===== */
        :root {
            --pink-blush:   #D1E8FC;
            --pink-soft:    #BDE0FE;
            --pink-main:    #8FC9FF;
            --pink-muted:   #A2D2FF;
            --pink-pale:    #E5F0FA;
            --pink-deep:    #2F6FAD;
            --cream:        #F7FBFF;
            --dark:         #17324D;
            --text-mid:     #4D6985;
            --text-light:   #F7FBFF;
            --white:        #FFFFFF;
            --spacing-xs:   0.5rem;
            --spacing-sm:   1rem;
            --spacing-md:   1.5rem;
            --spacing-lg:   2rem;
            --spacing-xl:   3rem;
            --spacing-2xl:  4rem;
            --radius:       18px;
            --transition:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: #D1E8FC;
            color: var(--dark);
            overflow-x: hidden;
            line-height: 1.6;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
        }

        /* ===== ANIMATIONS ===== */
        @keyframes float-blob-1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.05); }
            66% { transform: translate(-20px, 40px) scale(0.98); }
        }
        @keyframes float-blob-2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(-40px, 30px) scale(1.03); }
            66% { transform: translate(50px, -20px) scale(0.97); }
        }
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes slide-up {
            from { opacity: 0; transform: translateY(32px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes petal-drift {
            0%   { transform: translateY(0px) rotate(0deg); opacity: 0.8; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        .fade-in  { animation: fade-in  0.6s ease-out both; }
        .slide-up { animation: slide-up 0.7s ease-out both; }

        /* ===== NOTIFICATIONS ===== */
        .notification-stack {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: min(420px, calc(100vw - 32px));
            pointer-events: none;
        }
        .notification {
            pointer-events: auto;
            display: grid;
            grid-template-columns: 36px 1fr auto;
            gap: 12px;
            align-items: start;
            padding: 14px;
            background: rgba(255,255,255,0.95);
            border: 1px solid rgba(143,201,255,0.28);
            border-left: 4px solid var(--pink-main);
            border-radius: 14px;
            box-shadow: 0 18px 45px rgba(23,50,77,0.16);
            transform: translateY(14px) scale(0.96);
            opacity: 0;
            animation: notification-in 0.28s ease forwards;
        }
        .notification.hide { animation: notification-out 0.22s ease forwards; }
        .notification-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--pink-pale);
            color: var(--pink-deep);
            font-weight: 700;
        }
        .notification-title {
            color: var(--dark);
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 3px;
        }
        .notification-message {
            color: var(--text-mid);
            font-size: 0.86rem;
            line-height: 1.45;
        }
        .notification-close {
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-mid);
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 1;
        }
        .notification-close:hover { background: var(--pink-pale); color: var(--pink-deep); }
        .notification.error { border-left-color: #2F6FAD; }
        .notification.warning { border-left-color: #6A8FB5; }
        .notification.info { border-left-color: var(--pink-main); }
        @keyframes notification-in {
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes notification-out {
            to { opacity: 0; transform: translateY(14px) scale(0.96); }
        }
        @media (max-width: 640px) {
            .notification-stack { width: calc(100vw - 32px); }
            .notification { grid-template-columns: 32px 1fr auto; }
            .notification-icon { width: 32px; height: 32px; }
        }

        /* ===== BUTTONS ===== */
        .btn {
            padding: 12px 28px;
            border: none;
            border-radius: 50px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            letter-spacing: 0.02em;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
            color: white;
            box-shadow: 0 6px 20px rgba(47, 111, 173, 0.3);
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(47, 111, 173, 0.45);
        }
        .btn-outline {
            background: rgba(255,255,255,0.92);
            color: #17324D;
            border: 2px solid #2F6FAD;
            box-shadow: 0 8px 22px rgba(47, 111, 173, 0.18);
        }
        .btn-outline:hover {
            background: #2F6FAD;
            color: #FFFFFF;
            border-color: #17324D;
            box-shadow: 0 12px 30px rgba(23, 50, 77, 0.24);
        }
        .btn-secondary {
            background: var(--pink-pale);
            color: var(--pink-deep);
            border: 1px solid var(--pink-soft);
        }
        .btn-secondary:hover {
            background: var(--pink-soft);
            color: white;
        }

        /* ===== NAVBAR ===== */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background: rgba(247, 251, 255, 0.88);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(189, 224, 254, 0.3);
            padding: var(--spacing-md) 0;
        }
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }
        .logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.6rem;
            font-weight: 700;
            color: #1F5F9F;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: 0.03em;
        }
        .logo-rose { font-size: 1.2rem; }
        .logo-tagline {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.6rem;
            color: #2F6FAD;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            display: block;
            margin-top: 2px;
        }
        .nav-links { display: flex; gap: var(--spacing-xl); list-style: none; }
        .nav-links a {
            color: var(--text-mid);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: var(--transition);
            position: relative;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px; left: 0;
            width: 0; height: 2px;
            background: var(--pink-main);
            border-radius: 1px;
            transition: width 0.3s ease;
        }
        .nav-links a:hover { color: var(--pink-deep); }
        .nav-links a:hover::after { width: 100%; }
        .menu-toggle {
            display: none; flex-direction: column; cursor: pointer; gap: 6px;
            background: none; border: none;
        }
        .menu-toggle span { width: 24px; height: 2px; background: var(--pink-deep); border-radius: 1px; transition: var(--transition); }

        /* ===== HERO ===== */
        .hero {
            margin-top: 72px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(170deg, var(--pink-main) 0%, var(--pink-muted) 45%, var(--pink-blush) 75%, #E5F0FA 100%);
        }
        .hero-blob-1 {
            position: absolute;
            width: 500px; height: 500px;
            background: rgba(255,255,255,0.18);
            border-radius: 50%;
            top: 5%; left: 2%;
            animation: float-blob-1 18s ease-in-out infinite;
            filter: blur(60px);
        }
        .hero-blob-2 {
            position: absolute;
            width: 350px; height: 350px;
            background: rgba(47, 111, 173, 0.2);
            border-radius: 50%;
            bottom: 8%; right: 6%;
            animation: float-blob-2 14s ease-in-out infinite;
            filter: blur(50px);
        }
        /* Floating petals */
        .petal {
            position: absolute;
            width: 12px; height: 18px;
            background: rgba(255,255,255,0.35);
            border-radius: 50% 0 50% 0;
            animation: petal-drift linear infinite;
            pointer-events: none;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: var(--dark);
            max-width: 680px;
            padding: 0 var(--spacing-lg);
            animation: slide-up 1s ease-out;
        }
        .hero-eyebrow {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            opacity: 0.85;
            margin-bottom: var(--spacing-md);
        }
        .hero h1 {
            font-size: clamp(2.8rem, 8vw, 5rem);
            line-height: 1.05;
            text-shadow: 0 4px 24px rgba(255,255,255,0.42);
            margin-bottom: var(--spacing-md);
        }
        .hero h1 em { font-style: italic; opacity: 0.9; }
        #ctaBtn {
            margin-top: 5rem;
        }
        .hero .subtitle {
            font-size: clamp(0.95rem, 2.5vw, 1.15rem);
            margin-bottom: var(--spacing-2xl);
            opacity: 0.92;
            font-weight: 300;
        }
        .hero-badges {
            display: flex;
            gap: var(--spacing-lg);
            justify-content: center;
            flex-wrap: wrap;
            font-size: 0.85rem;
            opacity: 0.88;
            margin-top: var(--spacing-xl);
        }
        .hero-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.15);
            padding: 6px 14px;
            border-radius: 50px;
            backdrop-filter: blur(6px);
        }

        /* ===== QUIZ SECTION ===== */
        .quiz-section {
            padding: var(--spacing-2xl) 0;
            scroll-margin-top: 90px;
            background: linear-gradient(180deg, #E5F0FA 0%, #D1E8FC 40%, #D1E8FC 100%);
        }
        .quiz-container {
            background: white;
            border-radius: 28px;
            box-shadow: 0 24px 70px rgba(47, 111, 173, 0.1);
            padding: var(--spacing-2xl);
            max-width: 760px;
            margin: 0 auto;
            border: 1px solid rgba(189, 224, 254, 0.3);
        }
        .section-label {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--pink-main);
            text-align: center;
            margin-bottom: var(--spacing-sm);
        }
        .section-title {
            font-size: clamp(1.8rem, 4vw, 2.4rem);
            text-align: center;
            color: var(--dark);
            margin-bottom: var(--spacing-xs);
        }
        .section-desc {
            text-align: center;
            color: var(--text-mid);
            margin-bottom: var(--spacing-xl);
            font-size: 0.95rem;
        }

        /* Progress */
        .progress-wrap { margin-bottom: var(--spacing-2xl); }
        .progress-steps {
            display: flex;
            gap: 8px;
            margin-bottom: var(--spacing-md);
        }
        .progress-step {
            flex: 1;
            height: 4px;
            background: var(--pink-pale);
            border-radius: 2px;
            overflow: hidden;
        }
        .progress-step-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--pink-main), var(--pink-deep));
            border-radius: 2px;
            width: 0%;
            transition: width 0.5s ease;
        }
        .progress-step-fill.done { width: 100%; }
        .progress-label {
            font-size: 0.8rem;
            color: var(--text-mid);
            font-weight: 500;
        }

        /* Quiz steps */
        .quiz-step { display: none; animation: fade-in 0.4s ease-out; }
        .quiz-step.active { display: block; }

        .quiz-step-header {
            margin-bottom: var(--spacing-xl);
        }
        .quiz-step-title {
            font-size: 1.5rem;
            color: var(--dark);
            margin-bottom: var(--spacing-xs);
        }
        .quiz-step-hint {
            font-size: 0.85rem;
            color: var(--text-mid);
        }
        .quiz-step-hint .multi-hint {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: var(--pink-pale);
            color: var(--pink-deep);
            padding: 3px 10px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.78rem;
        }

        /* Option cards (skin type & goals - multi-select) */
        .quiz-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-xl);
        }
        #skinTypeOptions {
            max-width: 620px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        @media (min-width: 600px) {
            .quiz-options { grid-template-columns: repeat(3, 1fr); }
            #skinTypeOptions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        .option-card {
            padding: var(--spacing-lg) var(--spacing-md);
            border: 2px solid #BDE0FE;
            border-radius: var(--radius);
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            background: white;
            user-select: none;
            position: relative;
        }
        .option-card:hover {
            border-color: var(--pink-soft);
            background: var(--pink-pale);
            transform: translateY(-2px);
        }
        .option-card.selected {
            border-color: var(--pink-main);
            background: linear-gradient(135deg, rgba(209,232,252,0.4), rgba(189,224,254,0.3));
            box-shadow: 0 0 0 3px rgba(143, 201, 255, 0.15), inset 0 0 20px rgba(143, 201, 255, 0.05);
        }
        .option-card.selected::after {
            content: '\2713';
            position: absolute;
            top: 8px; right: 10px;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--pink-deep);
            background: var(--pink-blush);
            width: 20px; height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .option-icon {
            font-size: 2.2rem;
            margin-bottom: var(--spacing-sm);
            display: block;
        }
        .option-icon svg {
            width: 2.2rem;
            height: 2.2rem;
            color: var(--pink-deep);
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
        }
        .option-label {
            font-weight: 600;
            color: var(--dark);
            font-size: 0.9rem;
        }
        .option-sub {
            font-size: 0.75rem;
            color: var(--text-mid);
            margin-top: 3px;
        }

        /* Concern pills (multi-select) */
        .concern-pills {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-xl);
        }
        .pill {
            padding: 10px 18px;
            border: 2px solid #BDE0FE;
            border-radius: 50px;
            cursor: pointer;
            background: white;
            color: var(--dark);
            font-weight: 500;
            font-size: 0.9rem;
            transition: var(--transition);
            user-select: none;
            min-height: 44px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .pill:hover {
            border-color: var(--pink-soft);
            background: var(--pink-pale);
        }
        .pill.selected {
            background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
            color: white;
            border-color: var(--pink-main);
            box-shadow: 0 4px 14px rgba(47, 111, 173, 0.25);
        }

        /* Selection counter */
        .selection-counter {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: var(--spacing-lg);
        }
        .counter-bar {
            flex: 1;
            height: 6px;
            background: var(--pink-pale);
            border-radius: 3px;
            overflow: hidden;
        }
        .counter-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--pink-blush), var(--pink-main));
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        .counter-text { font-size: 0.8rem; color: var(--text-mid); font-weight: 500; white-space: nowrap; }

        /* Quiz Nav */
        .quiz-nav {
            display: flex;
            gap: var(--spacing-md);
            justify-content: space-between;
            margin-top: var(--spacing-xl);
        }
        .btn-nav { flex: 1; }
        .btn-back { display: none; }
        .btn-back.visible { display: flex; }

        /* ===== RESULTS ===== */
        .results-section { display: none; scroll-margin-top: 90px; background: linear-gradient(180deg, #D1E8FC 0%, #BDE0FE 100%); }
        .results-section.show { display: block; }

        .results-intro {
            text-align: center;
            padding: var(--spacing-2xl) 0 var(--spacing-xl);
        }
        .results-intro h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            color: var(--dark);
            margin-bottom: var(--spacing-sm);
        }
        .results-subtitle {
            color: var(--text-mid);
            font-size: 1rem;
        }

        /* Recommendation summary banner */
        .recommendation-summary {
            background: rgba(255,255,255,0.32);
            border: 1px solid rgba(143,201,255,0.25);
            border-radius: 16px;
            padding: var(--spacing-md);
            max-width: 680px;
            margin: 0 auto var(--spacing-2xl);
            display: flex;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
            justify-content: center;
        }
        .recommendation-tag {
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            border: 1px solid rgba(189,224,254,0.65);
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 0.82rem;
            color: var(--text-mid);
            font-weight: 500;
        }
        .recommendation-tag span {
            color: var(--text-mid);
            font-weight: 600;
        }
        .recommendation-tag strong { color: var(--pink-deep); }
        .recommendation-modal-content {
            max-height: 90vh;
            overflow-y: auto;
        }
        .recommendation-modal-body {
            display: grid;
            grid-template-columns: 45% 55%;
            gap: 24px;
            max-height: 85vh;
        }
        .recommendation-modal-main {
            overflow-y: auto;
            padding-right: 10px;
        }

        /* Products grid */
        .products-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
        }
        @media (min-width: 768px)  { .products-grid { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { .products-grid { grid-template-columns: 1fr 1fr 1fr; } }

        .product-card {
            background: white;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 6px 24px rgba(47,111,173,0.07);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(189,224,254,0.2);
        }
        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 44px rgba(47,111,173,0.16);
        }
        .product-card.recommended {
            border: 2px solid var(--pink-soft);
            box-shadow: 0 12px 40px rgba(143,201,255,0.2);
        }

        .product-image {
            width: 100%; height: 190px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            position: relative;
        }
        .top-match-badge {
            position: absolute;
            top: 12px; left: 12px;
            background: linear-gradient(135deg, var(--pink-main), var(--pink-deep));
            color: white;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            padding: 4px 12px;
            border-radius: 50px;
            font-family: 'DM Sans', sans-serif;
        }

        .product-content {
            padding: var(--spacing-lg);
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }
        .product-badges { display: flex; gap: 6px; flex-wrap: wrap; }
        .badge-category {
            background: linear-gradient(135deg, var(--pink-blush), var(--pink-soft));
            color: var(--pink-deep);
            padding: 3px 12px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: 'DM Sans', sans-serif;
        }
        .badge-skin {
            background: var(--pink-pale);
            color: var(--text-mid);
            padding: 3px 12px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            font-family: 'DM Sans', sans-serif;
        }
        .product-name {
            font-size: 1.15rem;
            color: var(--dark);
            line-height: 1.3;
        }
        .product-description {
            font-size: 0.88rem;
            color: #4D6985;
            line-height: 1.55;
            display: -webkit-box;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-summary {
            background: var(--pink-pale);
            border-radius: 12px;
            padding: 12px 14px;
            display: grid;
            gap: 8px;
        }
        .summary-row {
            display: flex;
            gap: 8px;
            font-size: 0.82rem;
            color: var(--text-mid);
            align-items: flex-start;
        }
        .summary-label {
            min-width: 70px;
            font-weight: 700;
            color: var(--dark);
        }

        .ingredients-title, .tags-title {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--pink-muted);
            font-weight: 700;
            font-family: 'DM Sans', sans-serif;
        }
        .ingredients-list { list-style: none; display: grid; gap: 6px; }
        .ingredients-list li {
            font-size: 0.85rem;
            color: var(--text-mid);
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }
        .ingredient-bullet { color: var(--pink-main); }

        .product-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .tag {
            background: rgba(143,201,255,0.08);
            color: var(--pink-deep);
            padding: 3px 10px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .product-actions {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: auto;
            padding-top: var(--spacing-sm);
        }
        .product-actions .btn { flex: 1; padding: 10px 14px; font-size: 0.85rem; }

        .product-link-button {
            display: block;
            width: 100%;
            text-align: center;
            padding: 14px;
            margin-top: 20px;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 600;
        }

        body.modal-open { overflow: hidden; }
        .detail-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 1800;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(23,50,77,0.42);
            backdrop-filter: blur(8px);
            animation: detail-fade-in 0.24s ease both;
        }
        .detail-modal-overlay.closing { animation: detail-fade-out 0.18s ease both; }
        .detail-modal {
            width: min(1100px, 95vw);

            height: 92vh;

            display: grid;
            grid-template-columns: 40% 60%;

            overflow: hidden;

            position: relative;
            background: var(--white);
            border-radius: 22px;
            border: 1px solid rgba(189,224,254,0.45);
            box-shadow: 0 28px 80px rgba(23,50,77,0.28);
        }
        .detail-modal-body {
            height: 100%;
            overflow-y: auto;

            padding: clamp(1.5rem, 3vw, 2.4rem);

            scrollbar-width: thin;
        }

        .detail-actions {
            margin-top: 24px;
            padding-bottom: 12px;
        }
        .detail-modal-close {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 2;
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            color: var(--pink-deep);
            cursor: pointer;
            font-size: 1.35rem;
            line-height: 1;
            box-shadow: 0 8px 24px rgba(23,50,77,0.12);
        }
        .detail-modal-close:hover { background: var(--pink-pale); }
        .detail-modal-media {
            height: 100%;
            background: linear-gradient(150deg, var(--pink-pale), rgba(209,232,252,0.45));
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .detail-modal-media img { width: 100%; height: 100%; object-fit: cover; }
        .detail-modal-eyebrow {
            color: var(--pink-muted);
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        .detail-modal-title {
            color: var(--dark);
            font-size: clamp(1.55rem, 3vw, 2.15rem);
            line-height: 1.08;
            padding-right: 2.25rem;
            margin-bottom: var(--spacing-sm);
        }
        .detail-modal-badges, .detail-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
        .detail-modal-badges { margin-bottom: var(--spacing-md); }
        .detail-score {
            background: var(--dark);
            color: var(--white);
            padding: 3px 12px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
        }
        .detail-reason {
            background: linear-gradient(135deg, rgba(209,232,252,0.42), rgba(255,255,255,0.85));
            border: 1px solid rgba(189,224,254,0.5);
            border-radius: 16px;
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
        }
        .detail-reason p, .detail-description { color: var(--text-mid); font-size: 0.92rem; line-height: 1.65; }
        .detail-section-title {
            color: var(--dark);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin: 0 0 8px;
        }
        .detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: var(--spacing-md);
        }
        .detail-info-box {
            background: var(--pink-pale);
            border-radius: 14px;
            padding: 12px 14px;
        }
        .detail-info-box span { display: block; color: var(--text-mid); font-size: 0.76rem; font-weight: 700; margin-bottom: 4px; }
        .detail-info-box strong { color: var(--dark); font-size: 0.9rem; line-height: 1.35; }
        .detail-chip {
            background: rgba(143,201,255,0.1);
            color: var(--pink-deep);
            border: 1px solid rgba(143,201,255,0.16);
            border-radius: 999px;
            padding: 6px 11px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .detail-ingredients { margin-bottom: var(--spacing-md); }
        .detail-done { width: 100%; margin-top: var(--spacing-lg); }
        @keyframes detail-fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes detail-fade-out { from { opacity: 1; } to { opacity: 0; } }
        @keyframes detail-pop-in {
            from { opacity: 0; transform: translateY(18px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @media (max-width: 760px) {
            .detail-modal-overlay { padding: 16px; align-items: flex-end; }
            .detail-modal { grid-template-columns: 1fr; max-height: calc(100vh - 32px); }
            .detail-modal-media { height: 100%}
            .detail-grid { grid-template-columns: 1fr; }
        }
        .detail-image {
            height: 100%;
            max-height: 650px;
            object-fit: cover;
        }
        .detail-actions {
            margin-top: 32px;
            padding-bottom: 40px;

            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* ===== TIPS ===== */
        .tips-section {
            background: linear-gradient(135deg, var(--pink-pale), rgba(209,232,252,0.3));
            border-radius: 24px;
            padding: var(--spacing-2xl);
            margin-bottom: var(--spacing-2xl);
            border: 1px solid rgba(189,224,254,0.3);
        }
        .tips-section h3 { font-size: 1.8rem; margin-bottom: var(--spacing-lg); text-align: center; color: var(--dark); }
        .tips-scroll { display: flex; gap: var(--spacing-lg); overflow-x: auto; padding-bottom: var(--spacing-md); scroll-behavior: smooth; }
        .tips-scroll::-webkit-scrollbar { height: 5px; }
        .tips-scroll::-webkit-scrollbar-track { background: rgba(189,224,254,0.2); border-radius: 3px; }
        .tips-scroll::-webkit-scrollbar-thumb { background: var(--pink-soft); border-radius: 3px; }

        .tip-card {
            flex: 0 0 280px;
            background: white;
            border-radius: var(--radius);
            padding: var(--spacing-lg);
            box-shadow: 0 4px 16px rgba(47,111,173,0.07);
            border-top: 3px solid var(--pink-main);
            transition: var(--transition);
        }
        .tip-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(47,111,173,0.12); }
        .tip-card h4 { font-size: 1.05rem; margin-bottom: var(--spacing-sm); color: var(--dark); }
        .tip-card p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; }

        /* ===== GLOSSARY ===== */
        .glossary-section { margin-bottom: var(--spacing-2xl); }
        .glossary-section h3 { font-size: 1.8rem; margin-bottom: var(--spacing-sm); text-align: center; color: var(--dark); }
        .glossary-desc {
            max-width: 620px;
            margin: 0 auto var(--spacing-lg);
            text-align: center;
            color: var(--text-mid);
            font-size: 0.92rem;
            line-height: 1.6;
        }
        .glossary-search { max-width: 480px; margin: 0 auto var(--spacing-lg); }
        .glossary-search input {
            width: 100%;
            padding: 12px 18px;
            border: 2px solid var(--pink-soft);
            border-radius: 50px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.95rem;
            background: white;
            color: var(--dark);
            transition: var(--transition);
            outline: none;
        }
        .glossary-search input:focus {
            border-color: var(--pink-main);
            box-shadow: 0 0 0 3px rgba(143,201,255,0.12);
        }
        .ingredients-grid { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
        .ingredient-pill {
            padding: 10px 18px;
            background: white;
            border: 2px solid var(--pink-soft);
            border-radius: 50px;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.88rem;
            color: var(--pink-deep);
            transition: var(--transition);
            font-family: 'DM Sans', sans-serif;
        }
        .ingredient-pill:hover { background: var(--pink-pale); border-color: var(--pink-main); transform: scale(1.04); }

        /* Tooltip */
        .ingredient-tooltip {
            position: fixed;
            background: white;
            border: 2px solid var(--pink-soft);
            border-radius: var(--radius);
            padding: var(--spacing-lg);
            max-width: 280px;
            box-shadow: 0 12px 40px rgba(47,111,173,0.15);
            z-index: 2000;
            display: none;
            animation: fade-in 0.25s ease-out;
        }
        .ingredient-tooltip.show { display: block; }
        .tooltip-title { font-weight: 700; color: var(--dark); margin-bottom: var(--spacing-sm); font-size: 1.05rem; font-family: 'Cormorant Garamond', serif; }
        .tooltip-label { font-size: 0.75rem; font-weight: 700; color: var(--pink-main); text-transform: uppercase; letter-spacing: 0.06em; }
        .tooltip-value { color: var(--text-mid); font-size: 0.88rem; margin-top: 3px; margin-bottom: var(--spacing-sm); }

        .reset-action {
            text-align: center;
            margin-top: var(--spacing-2xl);
            padding-bottom: clamp(4rem, 8vw, 7rem);
        }

        /* ===== FOOTER ===== */
        footer {
            background: linear-gradient(160deg, #D1E8FC 0%, #A2D2FF 45%, #8FC9FF 100%);
            color: #17324D;
            padding: var(--spacing-2xl) 0 var(--spacing-lg);
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
            max-width: 1200px;
            margin-left: auto; margin-right: auto;
            padding: 0 var(--spacing-lg);
        }
        .footer-section h4 { margin-bottom: var(--spacing-md); color: white; font-size: 1.1rem; }
        .footer-section p { color: rgba(255,255,255,0.8); }
        .footer-section a { color: rgba(255,255,255,0.78); text-decoration: none; transition: var(--transition); display: block; margin-bottom: var(--spacing-sm); font-size: 0.9rem; }
        .footer-section a:hover { color: white; padding-left: 4px; }
        .social-icons { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-md); }
        .social-icon {
            display: inline-flex; align-items: center; justify-content: center;
            width: 38px; height: 38px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            color: white;
            text-decoration: none; font-size: 1.1rem;
            transition: var(--transition);
            border: 1px solid rgba(255,255,255,0.25);
        }
        .social-icon:hover { background: rgba(255,255,255,0.35); transform: scale(1.1); }
        .footer-bottom {
            border-top: 1px solid rgba(47,111,173,0.22);
            padding-top: var(--spacing-lg);
            text-align: center;
            color: #17324D;
            font-weight: 700;
            font-size: 0.85rem;
            max-width: 1200px;
            margin: 0 auto;
            padding-left: var(--spacing-lg);
            padding-right: var(--spacing-lg);
        }

        /* Container */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .menu-toggle { display: flex; }
            .quiz-container { padding: var(--spacing-lg); }
            .quiz-options { grid-template-columns: 1fr 1fr; }
            .tip-card { flex: 0 0 240px; }
        }
        @media (max-width: 480px) {
            :root { --spacing-lg: 1.25rem; --spacing-xl: 2rem; --spacing-2xl: 2.5rem; }
            .hero h1 { font-size: 2.4rem; }
            .quiz-options { grid-template-columns: 1fr 1fr; }
        }