:root {
            --crimson:      #C0392B;
            --crimson-deep: #922B21;
            --crimson-light:#E74C3C;
            --scarlet:      #E53E3E;
            --amber:        #F6C90E;
            --amber-deep:   #D4A017;
            --amber-pale:   #FFFBEA;
            --saffron:      #F59E0B;
            --coral:        #F97316;
            --bg-base:      #FFFDF7;
            --bg-surface:   #FFF8EE;
            --bg-deep:      #1A0A00;
            --card-bg:      #FFFDF7;
            --card-border:  #F0E2C8;
            --ink:          #1A0A00;
            --ink-2:        #3D1A0A;
            --ink-3:        #7A4A35;
            --ink-4:        #B07A60;
            --line:         rgba(192,57,43,0.13);
            --shadow-sm:    0 2px 12px rgba(192,57,43,0.07);
            --shadow-md:    0 8px 32px rgba(192,57,43,0.12);
            --shadow-lg:    0 20px 60px rgba(192,57,43,0.16);
            --radius:       8px;
            --radius-lg:    14px;
            --radius-xl:    22px;
            --ease:         cubic-bezier(.4,0,.2,1);
            --nav-h:        68px;
            --section-x:    clamp(16px, 5%, 64px);
            --content-max:  1280px;
        }

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

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg-base);
            color: var(--ink);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        body::before {
            content: '';
            position: fixed; inset: 0; z-index: -1;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
            background-size: 200px;
            pointer-events: none;
        }

        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--bg-surface); }
        ::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: 3px; }

        /* ── NAVBAR ── */
        .navbar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 999;
            height: var(--nav-h);
            background: rgba(255,253,247,0.97);
            backdrop-filter: blur(18px);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 var(--section-x);
            border-bottom: 2px solid var(--amber);
            box-shadow: 0 2px 14px rgba(192,57,43,0.06);
        }
        .nav-brand {
            display: flex; align-items: center; gap: 10px;
            text-decoration: none;
        }
        .nav-logo-img {
            width: 38px; height: 38px; object-fit: contain;
            transform: scale(2.2); margin-right: 6px; flex-shrink: 0;
        }
        .nav-logo {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1rem, 2vw, 1.25rem);
            font-weight: 900; color: var(--crimson);
            letter-spacing: 0.01em; line-height: 1;
        }
        .nav-logo em { font-style: italic; color: var(--amber-deep); }
        .nav-back {
            display: flex; align-items: center; gap: 6px;
            text-decoration: none; color: var(--ink-3);
            font-size: 0.78rem; font-weight: 600;
            letter-spacing: 0.06em; text-transform: uppercase;
            transition: color 0.2s;
            border: 1.5px solid var(--card-border);
            padding: 7px 16px; border-radius: 40px;
        }
        .nav-back:hover { color: var(--crimson); border-color: var(--crimson); background: rgba(192,57,43,0.04); }
        .nav-back svg { width: 13px; height: 13px; }

        /* ── HERO BANNER ── */
        .page-hero {
            padding-top: calc(var(--nav-h) + 64px);
            padding-bottom: 64px;
            padding-left: var(--section-x);
            padding-right: var(--section-x);
            background: linear-gradient(150deg, var(--bg-deep) 0%, #3D1A0A 100%);
            position: relative; overflow: hidden;
            text-align: center;
        }
        .page-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: linear-gradient(rgba(246,201,14,0.04) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(246,201,14,0.04) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
        }
        .hero-accent {
            position: absolute; top: 0; right: -60px;
            width: 340px; height: 100%;
            background: linear-gradient(135deg, transparent 40%, rgba(246,201,14,0.06) 40%, rgba(246,201,14,0.06) 50%, transparent 50%);
            pointer-events: none;
        }
        .page-hero-eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 0.67rem; font-weight: 700;
            letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber);
            margin-bottom: 1rem;
            background: rgba(246,201,14,0.1);
            border: 1px solid rgba(246,201,14,0.2);
            padding: 5px 16px; border-radius: 40px;
        }
        .page-hero-eyebrow::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
        .page-hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.2rem, 5.5vw, 4rem);
            font-weight: 900; color: #fff; line-height: 1.02;
            margin-bottom: 1.1rem; position: relative;
        }
        .page-hero h1 em { font-style: italic; color: var(--amber); }
        .page-hero p {
            color: rgba(255,253,247,0.58);
            font-size: clamp(0.88rem, 1.5vw, 1rem);
            line-height: 1.8; font-weight: 300;
            max-width: 520px; margin: 0 auto 0;
        }
        .hero-stats {
            display: flex; justify-content: center; gap: clamp(24px, 5vw, 56px);
            margin-top: 36px; flex-wrap: wrap;
        }
        .hero-stat { text-align: center; }
        .hero-stat-num {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem; font-weight: 900; color: var(--amber); line-height: 1;
        }
        .hero-stat-lbl {
            font-size: 0.67rem; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: rgba(255,253,247,0.4); margin-top: 4px;
        }
        .hero-divider {
            width: 1px; background: rgba(246,201,14,0.15);
            align-self: stretch; margin: 4px 0;
        }

        /* ── SEARCH + FILTERS ── */
        .controls-bar {
            max-width: var(--content-max);
            margin: 40px auto 0;
            padding: 0 var(--section-x);
        }
        .search-wrap { position: relative; margin-bottom: 18px; }
        .search-wrap svg {
            position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
            width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
        }
        .search-input {
            width: 100%;
            background: var(--card-bg);
            border: 1.5px solid var(--card-border);
            border-radius: var(--radius-xl);
            padding: 15px 20px 15px 50px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.95rem; color: var(--ink);
            outline: none;
            box-shadow: var(--shadow-sm);
            transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
        }
        .search-input:focus {
            border-color: var(--crimson);
            box-shadow: 0 0 0 4px rgba(192,57,43,0.09);
        }
        .search-input::placeholder { color: var(--ink-4); }

        .filters-row {
            display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
            margin-bottom: 10px;
        }
        .filter-label {
            font-size: 0.68rem; font-weight: 700;
            letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--ink-3); white-space: nowrap;
        }
        .filter-pill {
            background: var(--card-bg);
            border: 1.5px solid var(--card-border);
            border-radius: 40px;
            padding: 7px 17px;
            font-size: 0.77rem; font-weight: 600;
            color: var(--ink-3);
            cursor: pointer;
            transition: all 0.18s var(--ease);
            white-space: nowrap;
        }
        .filter-pill:hover { border-color: var(--amber); color: var(--ink); background: var(--amber-pale); }
        .filter-pill.active {
            background: linear-gradient(135deg, var(--crimson), var(--scarlet));
            border-color: transparent; color: #fff;
            box-shadow: 0 3px 12px rgba(192,57,43,0.28);
        }
        .sort-select {
            background: var(--card-bg);
            border: 1.5px solid var(--card-border);
            border-radius: 40px;
            padding: 7px 30px 7px 14px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.77rem; font-weight: 600; color: var(--ink-3);
            cursor: pointer; outline: none; appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A4A35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            transition: border-color 0.2s;
        }
        .sort-select:focus { border-color: var(--crimson); }
        .results-info {
            font-size: 0.78rem; color: var(--ink-3);
            font-weight: 400; margin-top: 10px; min-height: 22px;
        }
        .results-info strong { color: var(--crimson); }

        /* ── MASONRY GRID ── */
        .grid-section {
            max-width: var(--content-max);
            margin: 28px auto 0;
            padding: 0 var(--section-x) 80px;
        }
        .masonry-grid { columns: 3 320px; column-gap: 22px; }
        @media (max-width: 700px) { .masonry-grid { columns: 1; } }
        @media (min-width: 701px) and (max-width: 1000px) { .masonry-grid { columns: 2 300px; } }

        /* ── CARD ── */
        .itin-card {
            break-inside: avoid;
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--card-border);
            overflow: hidden;
            display: flex; flex-direction: column;
            box-shadow: var(--shadow-sm);
            transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), outline 0.2s var(--ease);
            animation: fadeUp 0.45s var(--ease) both;
            margin-bottom: 22px;
        }
        .itin-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
        .itin-card.highlight-pulse {
            outline: 2.5px solid var(--amber);
            outline-offset: 4px;
            box-shadow: 0 0 0 6px rgba(246,201,14,0.15), var(--shadow-lg);
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .card-img {
            overflow: hidden;
            background: linear-gradient(135deg, #F0E2C8, #FAE6D0);
            position: relative;
        }
        .card-img.h-sm  { height: 170px; }
        .card-img.h-md  { height: 210px; }
        .card-img.h-lg  { height: 260px; }
        .card-img img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.55s var(--ease); display: block;
        }
        .itin-card:hover .card-img img { transform: scale(1.07); }
        .card-img-placeholder {
            width: 100%; height: 100%; min-height: 190px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #F5E8D0, #F0D9BC);
        }
        .card-img-placeholder svg { width: 48px; height: 48px; opacity: 0.25; }
        .card-category-badge {
            position: absolute; top: 12px; left: 12px;
            background: rgba(26,10,0,0.7); backdrop-filter: blur(8px);
            color: var(--amber); font-size: 0.62rem; font-weight: 700;
            letter-spacing: 0.14em; text-transform: uppercase;
            padding: 4px 12px; border-radius: 40px;
            border: 1px solid rgba(246,201,14,0.25);
        }

        .card-body {
            padding: 18px 20px 14px;
            display: flex; flex-direction: column; gap: 7px;
        }
        .card-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem; font-weight: 900;
            color: var(--ink); line-height: 1.2;
        }
        .card-desc {
            font-size: 0.81rem; color: var(--ink-3);
            line-height: 1.65; font-weight: 300;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .card-learn-more {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.74rem; font-weight: 700;
            color: var(--crimson);
            background: none; border: none;
            cursor: pointer; padding: 0;
            letter-spacing: 0.05em;
            transition: color 0.18s;
            margin-top: 2px; width: fit-content;
        }
        .card-learn-more:hover { color: var(--crimson-deep); }
        .card-learn-more svg { width: 12px; height: 12px; transition: transform 0.2s; }
        .card-learn-more:hover svg { transform: translateX(3px); }

        .card-meta { display: flex; gap: 12px; flex-wrap: wrap; }
        .card-meta-item {
            display: flex; align-items: center; gap: 5px;
            font-size: 0.71rem; color: var(--ink-3); font-weight: 500;
        }
        .card-meta-item svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--ink-4); }

        .card-footer {
            display: flex; align-items: center; justify-content: space-between;
            padding: 13px 20px;
            border-top: 1px solid var(--line);
            background: var(--bg-surface);
            gap: 8px;
        }
        .card-price {
            font-family: 'Playfair Display', serif;
            font-size: 1.45rem; font-weight: 900; color: var(--crimson);
        }
        .card-price small {
            display: block;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.63rem; color: var(--ink-4);
            font-weight: 400; margin-top: 1px;
        }

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

        /* ── COPY LINK BUTTON ── */
        .btn-copy-link {
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--bg-surface);
            border: 1.5px solid var(--card-border);
            color: var(--ink-3);
            width: 36px; height: 36px; border-radius: 50%;
            cursor: pointer; flex-shrink: 0;
            transition: all 0.2s var(--ease);
            position: relative;
        }
        .btn-copy-link:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-pale); }
        .btn-copy-link.copied { border-color: #27AE60; color: #27AE60; background: #F0FFF4; }
        .btn-copy-link svg { width: 14px; height: 14px; }
        .btn-copy-link::after {
            content: attr(data-tip);
            position: absolute; bottom: calc(100% + 8px); left: 50%;
            transform: translateX(-50%);
            background: var(--ink); color: #fff;
            font-size: 0.62rem; font-weight: 600;
            letter-spacing: 0.06em;
            white-space: nowrap;
            padding: 4px 10px; border-radius: 6px;
            opacity: 0; pointer-events: none;
            transition: opacity 0.15s;
        }
        .btn-copy-link:hover::after { opacity: 1; }

        .btn-buy {
            display: inline-flex; align-items: center; gap: 6px;
            background: linear-gradient(135deg, var(--crimson), var(--scarlet));
            color: #fff; padding: 9px 18px; border-radius: 40px;
            font-size: 0.73rem; font-weight: 700;
            letter-spacing: 0.06em; text-transform: uppercase;
            cursor: pointer; text-decoration: none; border: none;
            box-shadow: 0 3px 14px rgba(192,57,43,0.26);
            transition: all 0.2s var(--ease);
        }
        .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(192,57,43,0.42); }
        .btn-buy svg { width: 12px; height: 12px; }

        /* ── EMPTY STATE ── */
        .empty-state { text-align: center; padding: 80px 20px; }
        .empty-state svg { width: 56px; height: 56px; color: var(--card-border); margin-bottom: 18px; }
        .empty-state h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.35rem; font-weight: 900; color: var(--ink); margin-bottom: 8px;
        }
        .empty-state p { font-size: 0.86rem; color: var(--ink-3); font-weight: 300; line-height: 1.7; }

        /* ── LOADING SKELETONS ── */
        .skeleton-grid { columns: 3 320px; column-gap: 22px; }
        .skeleton-card {
            break-inside: avoid;
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--card-border);
            overflow: hidden; margin-bottom: 22px;
        }
        .skeleton-img {
            background: linear-gradient(90deg, #F0E2C8 25%, #FAF0E0 50%, #F0E2C8 75%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite;
        }
        .skeleton-img.h-sm { height: 170px; }
        .skeleton-img.h-md { height: 210px; }
        .skeleton-img.h-lg { height: 260px; }
        .skeleton-body { padding: 18px 20px; }
        .skeleton-line {
            height: 11px; border-radius: 6px; margin-bottom: 9px;
            background: linear-gradient(90deg, #F0E2C8 25%, #FAF0E0 50%, #F0E2C8 75%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite;
        }
        .skeleton-line.wide  { width: 80%; }
        .skeleton-line.short { width: 48%; }
        .skeleton-line.tall  { height: 54px; }
        @keyframes shimmer {
            from { background-position: 200% 0; }
            to   { background-position: -200% 0; }
        }

        /* ── CUSTOM PLAN BANNER ── */
        .custom-banner {
            background: linear-gradient(135deg, var(--amber), var(--saffron) 55%, var(--coral));
            border-radius: var(--radius-xl);
            padding: clamp(22px, 4vw, 38px) clamp(22px, 4vw, 44px);
            margin: 0 0 30px 0;
            display: flex; align-items: center;
            gap: clamp(20px, 4vw, 40px);
            flex-wrap: wrap;
            position: relative; overflow: hidden;
        }
        .custom-banner::before {
            content: '';
            position: absolute; right: -40px; top: -40px;
            width: 220px; height: 220px; border-radius: 50%;
            background: rgba(255,255,255,0.08);
            pointer-events: none;
        }
        .custom-banner-text { flex: 1; min-width: 200px; position: relative; }
        .custom-banner-text h3 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.1rem, 2.5vw, 1.45rem);
            color: var(--ink); font-weight: 900; line-height: 1.22; margin-bottom: 5px;
        }
        .custom-banner-text h3 em { font-style: italic; }
        .custom-banner-text p { font-size: 0.82rem; color: rgba(26,10,0,0.58); font-weight: 400; line-height: 1.6; }
        .btn-custom {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--ink); color: var(--amber);
            padding: 13px 26px; border-radius: 40px;
            font-size: 0.76rem; font-weight: 700;
            letter-spacing: 0.08em; text-transform: uppercase;
            text-decoration: none; flex-shrink: 0; position: relative;
            transition: all 0.2s var(--ease);
            box-shadow: 0 4px 18px rgba(26,10,0,0.22);
        }
        .btn-custom:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,10,0,0.32); }
        .btn-custom svg { width: 13px; height: 13px; }

        /* ── DESCRIPTION MODAL ── */
        .desc-modal-overlay {
            display: none; position: fixed; inset: 0; z-index: 1900;
            background: rgba(26,10,0,0.72); backdrop-filter: blur(12px);
            align-items: center; justify-content: center; padding: 20px;
        }
        .desc-modal-overlay.open { display: flex; }
        .desc-modal-box {
            background: var(--card-bg);
            border-radius: var(--radius-xl);
            width: 100%; max-width: 620px;
            box-shadow: 0 40px 90px rgba(26,10,0,0.5);
            position: relative;
            animation: modalIn 0.3s var(--ease) both;
            max-height: 88vh;
            overflow: hidden;
            display: flex; flex-direction: column;
        }
        .desc-modal-img { width: 100%; height: 220px; object-fit: cover; display: block; flex-shrink: 0; }
        .desc-modal-img-placeholder {
            width: 100%; height: 180px;
            background: linear-gradient(135deg, #F0E2C8, #FAE6D0);
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .desc-modal-img-placeholder svg { width: 54px; height: 54px; opacity: 0.2; }
        .desc-modal-close {
            position: absolute; top: 14px; right: 14px;
            background: rgba(255,253,247,0.92); backdrop-filter: blur(8px);
            border: none; width: 32px; height: 32px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; cursor: pointer; color: var(--ink);
            transition: background 0.2s, color 0.2s;
            box-shadow: 0 2px 8px rgba(26,10,0,0.15); z-index: 10;
        }
        .desc-modal-close:hover { background: var(--crimson); color: #fff; }
        .desc-modal-body { padding: clamp(20px, 4vw, 32px); overflow-y: auto; flex: 1; }
        .desc-modal-cat {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 0.63rem; font-weight: 700;
            letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-deep);
            background: var(--amber-pale); border: 1px solid rgba(246,201,14,0.3);
            padding: 4px 12px; border-radius: 40px; margin-bottom: 12px;
        }
        .desc-modal-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.3rem, 3vw, 1.85rem); color: var(--ink);
            font-weight: 900; line-height: 1.15; margin-bottom: 14px;
        }
        .desc-modal-meta {
            display: flex; gap: 16px; flex-wrap: wrap;
            margin-bottom: 20px; padding-bottom: 18px;
            border-bottom: 1px solid var(--line);
        }
        .desc-modal-meta-item {
            display: flex; align-items: center; gap: 5px;
            font-size: 0.75rem; color: var(--ink-3); font-weight: 500;
        }
        .desc-modal-meta-item svg { width: 13px; height: 13px; color: var(--crimson); }
        .desc-modal-desc-label {
            font-size: 0.65rem; font-weight: 700;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--ink-4); margin-bottom: 10px;
        }
        .desc-modal-desc { font-size: 0.9rem; color: var(--ink-2); line-height: 1.82; font-weight: 300; white-space: pre-wrap; }
        .desc-modal-footer {
            padding: 18px clamp(20px, 4vw, 32px);
            border-top: 1px solid var(--line);
            background: var(--bg-surface);
            display: flex; align-items: center;
            justify-content: space-between; flex-wrap: wrap; gap: 12px; flex-shrink: 0;
        }
        .desc-modal-price {
            font-family: 'Playfair Display', serif;
            font-size: 1.6rem; font-weight: 900; color: var(--crimson);
        }
        .desc-modal-price small {
            display: block; font-family: 'DM Sans', sans-serif;
            font-size: 0.63rem; color: var(--ink-4); font-weight: 400; margin-top: 1px;
        }

        /* ── PURCHASE MODAL ── */
        .modal-overlay {
            display: none; position: fixed; inset: 0; z-index: 2000;
            background: rgba(26,10,0,0.72); backdrop-filter: blur(10px);
            align-items: center; justify-content: center; padding: 20px;
        }
        .modal-overlay.open { display: flex; }
        .modal-box {
            background: var(--card-bg);
            border-radius: var(--radius-xl); padding: clamp(22px,4vw,36px);
            width: 100%; max-width: 470px;
            box-shadow: 0 40px 90px rgba(26,10,0,0.5);
            position: relative; animation: modalIn 0.3s var(--ease) both;
            max-height: 90vh; overflow-y: auto;
        }
        @keyframes modalIn {
            from { opacity:0; transform: scale(0.93) translateY(18px); }
            to   { opacity:1; transform: scale(1) translateY(0); }
        }
        .modal-close {
            position: absolute; top: 14px; right: 16px;
            background: var(--bg-surface); border: none;
            width: 30px; height: 30px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; cursor: pointer; color: var(--ink-3);
            transition: background 0.2s, color 0.2s;
        }
        .modal-close:hover { background: var(--crimson); color: #fff; }
        .modal-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.3rem; color: var(--ink);
            font-weight: 900; margin-bottom: 20px;
            padding-right: 28px; line-height: 1.2;
        }
        .modal-title span {
            color: var(--ink-3); display: block;
            font-size: 0.76rem; font-family: 'DM Sans', sans-serif;
            font-weight: 400; margin-top: 5px;
        }
        .modal-label {
            font-size: 0.65rem; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--ink-3); margin-bottom: 5px; display: block;
        }
        .modal-input {
            width: 100%; background: var(--bg-surface);
            border: 1.5px solid var(--line);
            border-radius: var(--radius); padding: 10px 13px;
            font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
            color: var(--ink); outline: none; transition: border-color 0.2s;
            margin-bottom: 13px;
        }
        .modal-input:focus { border-color: var(--crimson); background: #fff; }
        .btn-confirm {
            width: 100%; background: linear-gradient(135deg, var(--crimson), var(--scarlet));
            color: #fff; border: none; border-radius: 40px;
            padding: 14px 26px; font-family: 'DM Sans', sans-serif;
            font-size: 0.84rem; font-weight: 700; letter-spacing: 0.07em;
            text-transform: uppercase; cursor: pointer; margin-top: 4px;
            box-shadow: 0 4px 18px rgba(192,57,43,0.28);
            transition: all 0.2s var(--ease);
        }
        .btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(192,57,43,0.42); }
        .btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        /* ── SUCCESS MODAL ── */
        .success-icon {
            width: 60px; height: 60px;
            background: linear-gradient(135deg, #27AE60, #2ECC71);
            border-radius: 50%; display: flex; align-items: center;
            justify-content: center; margin: 0 auto 14px;
            box-shadow: 0 8px 24px rgba(39,174,96,0.3);
        }
        .success-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
        .success-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; text-align: center; margin-bottom: 6px; }
        .success-sub { font-size: 0.84rem; color: var(--ink-3); text-align: center; line-height: 1.65; margin-bottom: 20px; font-weight: 300; }

        /* ── DB SAVE STATUS STRIP ── */
        .db-status-strip {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; border-radius: var(--radius);
            font-size: 0.76rem; font-weight: 600;
            margin-bottom: 14px; transition: all 0.3s;
        }
        .db-status-strip.saving  { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.25); color: #1d4ed8; }
        .db-status-strip.saved   { background: #F0FFF4; border: 1px solid #A3E6B8; color: #1B7A43; }
        .db-status-strip.db-failed { background: #FFF5F5; border: 1px solid #F9C2C2; color: #922B21; }
        .db-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }

        /* ── EMAIL STATUS STRIP ── */
        .email-status-strip {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; border-radius: var(--radius);
            font-size: 0.76rem; font-weight: 600;
            margin-bottom: 14px; transition: all 0.3s;
        }
        .email-status-strip.sending {
            background: rgba(246,201,14,0.12); border: 1px solid rgba(246,201,14,0.3); color: var(--amber-deep);
        }
        .email-status-strip.sent {
            background: #F0FFF4; border: 1px solid #A3E6B8; color: #1B7A43;
        }
        .email-status-strip.failed {
            background: #FFF5F5; border: 1px solid #F9C2C2; color: #922B21;
        }
        .email-spinner {
            width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
            border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        .info-box {
            background: var(--amber-pale); border: 1px solid rgba(246,201,14,0.22);
            border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px;
        }
        .info-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.79rem; margin-bottom: 4px; }
        .info-row .lbl { color: var(--ink-3); }
        .info-row .val { color: var(--ink); font-weight: 700; }
        .info-row .val.mono { font-family: monospace; font-size: 0.72rem; background: #F0E2C8; padding: 2px 7px; border-radius: 4px; }
        .btn-dl {
            width: 100%; background: linear-gradient(135deg, var(--crimson), var(--scarlet));
            color: #fff; border: none; border-radius: 40px;
            padding: 12px; font-family: 'DM Sans', sans-serif;
            font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
            text-transform: uppercase; cursor: pointer; margin-bottom: 8px;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            box-shadow: 0 4px 18px rgba(192,57,43,0.28);
            transition: all 0.2s var(--ease);
        }
        .btn-dl:hover { transform: translateY(-2px); }
        .btn-later {
            width: 100%; background: transparent; border: 1px solid var(--line);
            border-radius: 40px; padding: 10px; font-family: 'DM Sans', sans-serif;
            font-size: 0.76rem; font-weight: 500; color: var(--ink-3);
            cursor: pointer; transition: all 0.2s var(--ease);
        }
        .btn-later:hover { border-color: var(--ink-3); color: var(--ink); }

        /* ── SHARE LINK TOAST ── */
        .toast {
            position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
            background: var(--ink); color: #fff;
            padding: 12px 22px; border-radius: 40px;
            font-size: 0.8rem; font-weight: 600;
            display: flex; align-items: center; gap: 9px;
            box-shadow: 0 8px 28px rgba(26,10,0,0.32);
            z-index: 9999;
            transition: transform 0.32s var(--ease), opacity 0.32s;
            opacity: 0; pointer-events: none;
        }
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
        .toast svg { width: 15px; height: 15px; stroke: var(--amber); }

        /* ── FOOTER ── */
        .page-footer {
            text-align: center;
            padding: 28px var(--section-x);
            border-top: 1px solid var(--line);
            font-size: 0.73rem; color: var(--ink-4);
        }
        .page-footer a { color: var(--crimson); text-decoration: none; font-weight: 600; }

        /* ── RESPONSIVE ── */
        @media (max-width: 600px) {
            .custom-banner { flex-direction: column; text-align: center; }
            .btn-custom { width: 100%; justify-content: center; }
            .filters-row { gap: 6px; }
            .hero-stats { gap: 20px; }
            .hero-divider { display: none; }
        }