* { margin: 0; padding: 0; box-sizing: border-box; }
:root, [data-theme="emerald"] {
    --primary: #2E9489; --primary-dark: #1a5c55; --primary-darker: #0d2926;
    --gold: #d4a853; --gold-light: #f0d48a; --gold-glow: rgba(212,168,83,0.4);
    --gray: #A7A9AC; --gray-light: #d4d5d7; --white: #fff;
    --bg-body: #070f14;
    --sky-top: #030a12; --sky-mid: #071a17; --sky-bottom: #0d2926;
    --card-bg: linear-gradient(170deg, #071a17 0%, #0d3330 25%, #1a5c55 50%, #0d3330 75%, #071a17 100%);
}
[data-theme="royal"] {
    --primary: #8B6914; --primary-dark: #6B4F0E; --primary-darker: #2a1e05;
    --gold: #d4a853; --gold-light: #f0d48a; --gold-glow: rgba(212,168,83,0.5);
    --gray: #c4b896; --gray-light: #e0d5be; --white: #fff;
    --bg-body: #0f0a04;
    --sky-top: #0a0602; --sky-mid: #1a1006; --sky-bottom: #2a1e05;
    --card-bg: linear-gradient(170deg, #1a1006 0%, #2a1e0a 25%, #4a3510 50%, #2a1e0a 75%, #1a1006 100%);
}
[data-theme="silver"] {
    --primary: #6B7B8D; --primary-dark: #4a5868; --primary-darker: #1e2830;
    --gold: #A7A9AC; --gold-light: #d4d5d7; --gold-glow: rgba(167,169,172,0.4);
    --gray: #8a9bab; --gray-light: #c8d0d8; --white: #fff;
    --bg-body: #0a0e12;
    --sky-top: #050810; --sky-mid: #0e1520; --sky-bottom: #1e2830;
    --card-bg: linear-gradient(170deg, #0e1520 0%, #1a2535 25%, #2a3a4d 50%, #1a2535 75%, #0e1520 100%);
}
html { scroll-behavior: smooth; }
body { font-family: 'Tajawal', sans-serif; background: var(--bg-body); color: var(--white); overflow-x: hidden; transition: background 0.6s; }

/* ===== Splash Screen ===== */
.splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
    background: var(--bg-body);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}
.splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { text-align: center; }
.splash-logo {
    width: 120px; height: 120px; object-fit: contain; border-radius: 20px;
    animation: splashPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(46,148,137,0.5));
}
@keyframes splashPulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
.splash-loader {
    width: 200px; height: 3px; background: rgba(255,255,255,0.1);
    border-radius: 3px; margin: 25px auto 15px; overflow: hidden;
}
.splash-loader-bar {
    width: 0%; height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold));
    border-radius: 3px; animation: splashLoad 2s ease-in-out forwards;
}
@keyframes splashLoad { 0% { width: 0%; } 100% { width: 100%; } }
.splash-text { color: var(--gray); font-size: 1rem; letter-spacing: 2px; }

/* ===== Sound Toggle ===== */
.sound-toggle {
    position: fixed; top: 20px; right: 20px; z-index: 998;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1); color: var(--gold);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; opacity: 0; animation: fadeIn 1s ease-out 2.5s both;
}
.sound-toggle:hover { border-color: var(--gold); transform: scale(1.1); }

/* ===== Theme Switcher ===== */
.theme-switcher {
    position: fixed; top: 20px; left: 20px; z-index: 999;
    display: flex; gap: 10px; padding: 10px 16px;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(15px);
    border-radius: 50px; border: 1px solid rgba(255,255,255,0.1);
    animation: fadeIn 1s ease-out 2s both;
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.theme-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 3px; background: transparent;
    transition: all 0.3s; display: flex; align-items: center; justify-content: center;
}
.theme-btn:hover { transform: scale(1.15); }
.theme-btn.active { border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }
.theme-color { width: 100%; height: 100%; border-radius: 50%; display: block; }

/* ===== Canvas ===== */
#skyCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* ===== Arabesque Background ===== */
.arabesque-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; opacity: 0.04;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='%23d4a853' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='15' fill='none' stroke='%23d4a853' stroke-width='0.3'/%3E%3Ccircle cx='40' cy='40' r='8' fill='none' stroke='%23d4a853' stroke-width='0.3'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* ===== Golden Dust ===== */
.golden-dust { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.dust {
    position: absolute; background: var(--gold-light);
    animation: dustFall linear infinite; opacity: 0;
}
.dust.dust-circle { border-radius: 50%; }
.dust.dust-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.dust.dust-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
@keyframes dustFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
    15% { opacity: 0.8; }
    85% { opacity: 0.6; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* ===== Mosque ===== */
.mosque-silhouette {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 0;
    opacity: 0; animation: mosqueRise 2s ease-out 1s forwards;
    pointer-events: none; transition: transform 0.1s linear;
}
.mosque-svg { width: 100%; height: auto; }
@keyframes mosqueRise { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* ===== SVG Lanterns ===== */
.lanterns-container { position: fixed; top: 0; left: 0; width: 100%; z-index: 2; pointer-events: none; }
.hanging-lantern { position: absolute; top: 0; animation: lanternAppear 0.8s ease-out forwards; opacity: 0; }
@keyframes lanternAppear { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.lantern-rope { width: 2px; height: 60px; background: linear-gradient(to bottom, transparent, var(--gold)); margin: 0 auto; opacity: 0.6; }
.lantern-body {
    text-align: center; filter: drop-shadow(0 0 20px var(--gold-glow));
    animation: lanternSwing 3s ease-in-out infinite; transform-origin: top center;
}
@keyframes lanternSwing { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ===== Geometric Frame ===== */
.geo-frame { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.geo-corner {
    position: absolute; width: 100px; height: 100px;
    border: 2px solid rgba(212,168,83,0.15);
    animation: geoFade 2s ease-out 0.5s forwards; opacity: 0;
}
.geo-tl { top: 20px; left: 20px; border-right: none; border-bottom: none; border-top-left-radius: 15px; }
.geo-tr { top: 20px; right: 20px; border-left: none; border-bottom: none; border-top-right-radius: 15px; }
.geo-bl { bottom: 20px; left: 20px; border-right: none; border-top: none; border-bottom-left-radius: 15px; }
.geo-br { bottom: 20px; right: 20px; border-left: none; border-top: none; border-bottom-right-radius: 15px; }
@keyframes geoFade { to { opacity: 1; } }

/* ===== Decorative Arch Top ===== */
.landing-arch-top {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; max-width: 500px; z-index: 2; pointer-events: none;
    opacity: 0; animation: archSlideDown 1.5s ease-out 0.5s forwards;
}
@keyframes archSlideDown { 0% { transform: translateX(-50%) translateY(-50px); opacity: 0; } 100% { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ===== Landing ===== */
section { min-height: 100vh; display: none; align-items: center; justify-content: center; position: relative; z-index: 3; }
section.active { display: flex; }
.landing-content { text-align: center; padding: 20px; padding-bottom: 0; position: relative; z-index: 5; margin-top: -20px; gap: 0; }

/* ===== SVG Crescent Moon ===== */
.crescent-moon { position: relative; margin-bottom: -15px; }
.moon-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, var(--gold-glow), transparent 70%);
    animation: moonPulse 3s ease-in-out infinite;
}
@keyframes moonPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%,-50%) scale(1.3); opacity: 0.8; } }
.moon-svg {
    position: relative; z-index: 1;
    animation: moonFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--gold-glow));
}
@keyframes moonFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.logo {
    width: 320px; height: 320px; object-fit: contain; margin-bottom: -50px;
    filter: drop-shadow(0 0 20px rgba(46,148,137,0.6));
    opacity: 0; animation: fadeScale 1s ease-out 0.3s forwards;
    border-radius: 18px;
}
@keyframes fadeScale { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.title-main {
    font-size: 2.2rem; font-weight: 800; margin-bottom: 8px;
    text-shadow: 0 0 30px rgba(46,148,137,0.5);
    opacity: 0; animation: slideIn 1s ease-out 0.6s forwards;
}
.title-divider { margin: -25px 0 -5px; opacity: 0; animation: slideIn 1s ease-out 0.8s forwards; }
.divider-svg { display: block; margin: 0 auto; }

/* ===== Calligraphic Eid Title ===== */
.title-eid-calligraphy {
    opacity: 0; animation: slideIn 1s ease-out 1s forwards;
    margin: -10px 0 0;
}
.eid-calligraphy-svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }

.title-year { font-size: 1.1rem; color: var(--gray); margin-top: -8px; letter-spacing: 3px; opacity: 0; animation: slideIn 1s ease-out 1.2s forwards; }
@keyframes slideIn { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.btn-golden {
    margin-top: 30px; padding: 16px 45px; border: 2px solid var(--gold);
    background: linear-gradient(135deg, rgba(212,168,83,0.15), rgba(212,168,83,0.05));
    color: var(--gold-light); font-family: 'Tajawal', sans-serif; font-size: 1.15rem;
    font-weight: 700; border-radius: 50px; cursor: pointer;
    transition: all 0.4s; opacity: 0; animation: slideIn 1s ease-out 1.5s forwards;
    backdrop-filter: blur(10px); display: inline-flex; align-items: center;
}
.btn-golden:hover {
    background: var(--gold); color: #1a1a1a;
    box-shadow: 0 0 40px var(--gold-glow); transform: scale(1.05);
}


.dev-credit {
    margin-top: 20px; font-size: 1.05rem; color: #ffffff;
    font-family: 'Tajawal', sans-serif; opacity: 0;
    animation: slideIn 1s ease-out 2s forwards;
    letter-spacing: 0.5px;
}
.dev-credit-links {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    direction: ltr; margin-top: 6px; opacity: 0;
    animation: slideIn 1s ease-out 2.2s forwards;
}
.dev-credit-link {
    color: var(--gold); text-decoration: none; font-weight: 700;
    transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.9rem;
}
.dev-credit-link svg { flex-shrink: 0; }
.dev-credit-link:hover { opacity: 0.8; text-decoration: underline; }
.dev-credit-sep { color: rgba(255,255,255,0.3); }

/* ===== Form ===== */
.form-card {
    background: rgba(13,41,38,0.9); backdrop-filter: blur(25px);
    border: 1px solid rgba(212,168,83,0.2); border-radius: 25px;
    padding: 45px 40px; max-width: 520px; width: 90%; position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    animation: cardPop 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;
    overflow: hidden;
}
@keyframes cardPop { 0% { transform: scale(0.7) translateY(60px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.form-pattern-top, .form-pattern-bottom {
    position: absolute; left: 0; width: 100%; height: 6px;
    background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 15px, transparent 15px, transparent 25px);
    opacity: 0.3;
}
.form-pattern-top { top: 0; }
.form-pattern-bottom { bottom: 0; }
.form-icon { font-size: 3rem; text-align: center; margin-bottom: 10px; }
.form-card h2 { text-align: center; font-size: 1.6rem; color: var(--gold-light); margin-bottom: 5px; }
.form-sub { text-align: center; color: var(--gray); font-size: 0.95rem; margin-bottom: 30px; }

.input-group { margin-bottom: 22px; }
.input-group label { display: block; color: var(--gold); font-size: 0.9rem; font-weight: 500; margin-bottom: 8px; }
.input-wrapper {
    display: flex; align-items: center; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
    padding: 0 15px; transition: all 0.3s;
}
.input-wrapper:focus-within { border-color: var(--gold); box-shadow: 0 0 20px rgba(212,168,83,0.15); }
.input-icon { font-size: 1.2rem; margin-left: 10px; }
.input-wrapper input, .input-wrapper select {
    flex: 1; padding: 14px 10px; background: transparent; border: none; outline: none;
    color: var(--white); font-family: 'Tajawal', sans-serif; font-size: 1.05rem; direction: rtl;
}
.input-wrapper input::placeholder { color: rgba(255,255,255,0.25); }
.input-wrapper select option { background: var(--primary-darker); }

/* Logo Upload */
.logo-upload-container {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.logo-preview-box {
    width: 80px; height: 80px; border-radius: 12px; overflow: hidden;
    border: 2px dashed rgba(212,168,83,0.4); position: relative;
    cursor: pointer; transition: all 0.3s;
}
.logo-preview-box:hover { border-color: var(--gold); }
.logo-preview-box img {
    width: 100%; height: 100%; object-fit: contain; background: rgba(255,255,255,0.05);
}
.logo-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); display: flex; align-items: center;
    justify-content: center; opacity: 0; transition: opacity 0.3s;
    font-size: 0.75rem; color: var(--gold);
}
.logo-preview-box:hover .logo-overlay { opacity: 1; }
.logo-actions { display: flex; gap: 8px; }
.btn-logo-upload, .btn-logo-reset {
    padding: 8px 14px; border-radius: 8px; font-size: 0.85rem;
    cursor: pointer; transition: all 0.3s; font-family: 'Tajawal', sans-serif;
}
.btn-logo-upload {
    background: rgba(212,168,83,0.15); border: 1px solid rgba(212,168,83,0.3);
    color: var(--gold);
}
.btn-logo-upload:hover { background: rgba(212,168,83,0.25); }
.btn-logo-reset {
    background: rgba(255,100,100,0.1); border: 1px solid rgba(255,100,100,0.3);
    color: #ff7777;
}
.btn-logo-reset:hover { background: rgba(255,100,100,0.2); }
.color-extract-info {
    display: flex; align-items: center; gap: 6px; margin-top: 5px;
}
.color-dot {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3);
}
.color-extract-info small { color: var(--gray); font-size: 0.75rem; margin-right: 5px; }

/* Card Design Picker */
.card-design-picker { display: flex; gap: 12px; justify-content: center; }
.design-option { cursor: pointer; position: relative; }
.design-option input { display: none; }
.design-preview {
    width: 90px; height: 65px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.1);
    transition: all 0.3s; font-size: 0.8rem; color: var(--gray);
}
.design-option.active .design-preview { border-color: var(--gold); box-shadow: 0 0 15px var(--gold-glow); }
.design-arch-preview { background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker)); }
.design-elegant-preview { background: linear-gradient(135deg, var(--primary-darker), var(--primary-dark)); border-top: 3px solid var(--gold); }
.design-split-preview { background: linear-gradient(180deg, var(--primary) 50%, var(--primary-darker) 50%); }

/* Orientation Picker */
.orientation-picker { display: flex; gap: 15px; justify-content: center; }
.orient-option { cursor: pointer; text-align: center; }
.orient-option input { display: none; }
.orient-preview {
    width: 50px; height: 50px; border-radius: 8px; display: flex;
    align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.1);
    transition: all 0.3s; font-size: 1.4rem; color: var(--gray);
}
.orient-option.active .orient-preview { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
.orient-option span { display: block; margin-top: 5px; font-size: 0.8rem; color: var(--gray); }

/* Live Preview */
.live-preview-container { margin: 20px 0 10px; text-align: center; }
.preview-label { color: var(--gold); font-size: 0.85rem; margin-bottom: 8px; }
.live-preview {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,83,0.15);
    border-radius: 12px; padding: 15px 20px; min-height: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.lp-name { font-size: 1.4rem; font-weight: 800; color: var(--white); transition: all 0.3s; }
.lp-role { font-size: 0.9rem; color: var(--gray); margin-top: 3px; transition: all 0.3s; }

.btn-submit {
    width: 100%; padding: 16px; border: none; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, var(--gold), #c4943f); color: #1a1a1a;
    font-family: 'Tajawal', sans-serif; font-size: 1.15rem; font-weight: 800;
    transition: all 0.3s; margin-top: 10px;
}
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 10px 30px var(--gold-glow); }

.btn-back {
    display: block; margin: 18px auto 0; background: none; border: none;
    color: var(--gray); font-family: 'Tajawal', sans-serif; font-size: 0.95rem;
    cursor: pointer; transition: all 0.3s; padding: 8px 20px;
}
.btn-back:hover { color: var(--gold-light); }

/* ===== Result ===== */
.result-wrapper { text-align: center; animation: cardPop 0.8s cubic-bezier(0.34,1.56,0.64,1); }

/* ===== Card Tabs ===== */
.card-tabs {
    display: flex; justify-content: center; gap: 10px; margin-bottom: 20px;
}
.card-tab {
    padding: 10px 20px; border-radius: 50px; border: 2px solid var(--gold);
    background: transparent; color: var(--gold); font-family: 'Tajawal', sans-serif;
    font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.3s;
}
.card-tab.active {
    background: linear-gradient(135deg, var(--gold), #c4943f); color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}
.card-tab:hover:not(.active) {
    background: rgba(212, 175, 55, 0.15);
}

/* ===== Gift Recipient Input ===== */
.gift-recipient-input {
    max-width: 420px; margin: 0 auto 15px; text-align: right;
    font-family: 'Tajawal', sans-serif;
}
.gift-recipient-input label {
    display: block; margin-bottom: 6px; color: var(--gold-light);
    font-size: 0.9rem; font-weight: 600;
}
.gift-recipient-input .input-wrapper {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.06); border: 1.5px solid rgba(212,168,83,0.25);
    border-radius: 12px; padding: 10px 14px; transition: all 0.3s;
}
.gift-recipient-input .input-wrapper:focus-within {
    border-color: var(--gold); box-shadow: 0 0 15px rgba(212,168,83,0.15);
}
.gift-recipient-input input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--white); font-family: 'Tajawal', sans-serif;
    font-size: 1rem; text-align: right;
}
.gift-recipient-input input::placeholder { color: rgba(255,255,255,0.3); }

/* ===== Gift Card Sender ===== */
.card-gift-sender {
    color: var(--gray-light); font-size: 0.95rem; font-weight: 700;
    margin-top: 8px; position: relative; z-index: 2;
    font-family: 'Tajawal', sans-serif;
}

/* ===== Greeting Card Base ===== */
.greeting-card {
    width: 520px; max-width: 90vw; aspect-ratio: 3/4; margin: 0 auto 25px;
    background: var(--card-bg);
    border-radius: 20px; position: relative; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 50px rgba(46,148,137,0.15), inset 0 0 80px rgba(0,0,0,0.3);
    transform-style: preserve-3d;
    animation: card3DReveal 1.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes card3DReveal {
    0% { transform: perspective(1000px) rotateY(30deg) scale(0.7); opacity: 0; }
    100% { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 1; }
}
.greeting-card.horizontal { aspect-ratio: 4/3; }

/* Design layer toggle */
.d-arch-layer, .d-elegant-layer, .d-split-layer {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* ===== Shared Card Elements ===== */
.card-inner-border {
    position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1.5px solid rgba(212,168,83,0.2); border-radius: 14px; pointer-events: none;
}
.card-watermark {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    opacity: 0.04; pointer-events: none; z-index: 0;
}
.card-watermark img { width: 200px; height: 200px; object-fit: contain; }
.card-top-logo {
    width: 90px; height: 90px; object-fit: contain; border-radius: 12px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 15px rgba(212,168,83,0.35));
}
.card-calligraphy {
    font-family: 'Aref Ruqaa', serif; font-size: 2.2rem; font-weight: 700;
    color: var(--gold-light); text-shadow: 0 0 30px rgba(240,212,138,0.3);
    position: relative; z-index: 2; line-height: 1.2;
}
.card-calli-white { color: #fff; text-shadow: 0 0 25px rgba(255,255,255,0.2); }
.card-divider-svg { margin: 6px 0; position: relative; z-index: 2; }
.card-gold-line {
    width: 120px; height: 1.5px; margin: 8px auto;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.card-body-content {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; z-index: 2; padding: 10px 25px 50px; text-align: center; flex: 1;
    overflow: hidden;
}
.card-role-text { color: var(--gray-light); font-size: 1rem; position: relative; z-index: 2; }
.card-user-name {
    font-size: 2rem; font-weight: 900; color: var(--white); margin: 5px 0 12px;
    text-shadow: 0 0 25px rgba(46,148,137,0.5); position: relative; z-index: 2;
}
.card-msg-frame { position: relative; z-index: 2; width: 90%; max-width: 380px; padding: 8px 10px; }
.card-msg {
    color: var(--gray-light); font-size: 0.78rem; line-height: 1.8;
    position: relative; z-index: 1; text-align: center;
}
.card-dua {
    font-family: 'Aref Ruqaa', serif; font-size: 1rem; color: var(--gold);
    margin-top: 6px; font-weight: 700; position: relative; z-index: 1; text-align: center;
}
.card-bottom-footer {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; z-index: 5;
    background: linear-gradient(to top, var(--card-bg) 60%, transparent);
    padding: 8px 20px 4px; width: 100%;
}
.card-footer-logo {
    width: 35px; height: 35px; object-fit: contain; border-radius: 8px;
    filter: drop-shadow(0 0 8px rgba(46,148,137,0.3));
}
.card-footer-year { font-size: 0.75rem; color: var(--gray); letter-spacing: 2px; margin-top: 3px; }

/* ===== Design 1: Arch (القوس الملكي) ===== */
.card-arch-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
.card-arch-header svg { width: 100%; height: auto; }
.design-arch .card-body-content { margin-top: 50px; }
.card-mosque-bottom { position: absolute; bottom: 28px; left: 0; width: 100%; z-index: 1; }
.card-mosque-bottom svg { width: 100%; height: auto; }

/* ===== Design 2: Elegant (الأناقة البسيطة) ===== */
.d-elegant-layer {
    flex-direction: column;
    background: linear-gradient(180deg, var(--primary-darker) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%);
}
.card-elegant-top-accent {
    width: 100%; height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.card-elegant-content {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; padding: 30px 25px 20px; text-align: center; position: relative; z-index: 2;
}
.card-elegant-thin-line {
    width: 80px; height: 1px; margin: 10px auto;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.card-elegant-line-bottom { margin-top: 15px; }
.card-elegant-subtitle {
    color: var(--gold); font-size: 0.85rem; letter-spacing: 3px;
    font-family: 'Tajawal', sans-serif; font-weight: 300;
}
.card-elegant-name-section { margin: 12px 0; }
.card-elegant-footer {
    display: flex; flex-direction: column; align-items: center; margin-top: 8px;
}
.card-elegant-bottom-accent {
    width: 100%; height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ===== Design 3: Split (الفخامة المقسّمة) ===== */
.d-split-layer { flex-direction: column; }
.card-split-top {
    width: 100%; flex: 0 0 42%; position: relative;
    background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-split-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z' fill='none' stroke='%23d4a853' stroke-width='0.5'/%3E%3C/svg%3E");
}
.card-split-top-content { text-align: center; position: relative; z-index: 2; padding: 15px; }
.card-split-crescent { margin-bottom: 5px; }
.card-split-subtitle { color: var(--gold-light); font-size: 0.85rem; letter-spacing: 2px; margin-top: 4px; }
.card-split-divider { width: 100%; position: relative; z-index: 3; }
.card-split-divider svg { width: 100%; height: 30px; }
.card-split-bottom {
    width: 100%; flex: 1; position: relative;
    background: linear-gradient(180deg, var(--primary-darker) 0%, var(--sky-bottom) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 15px 25px 10px; text-align: center;
}
.card-split-mosque { position: absolute; bottom: 28px; left: 0; width: 100%; z-index: 1; }
.card-split-mosque svg { width: 100%; height: auto; }

/* ===== Color Customizer ===== */
.color-customizer {
    max-width: 420px; margin: 15px auto; padding: 16px 18px;
    background: rgba(255,255,255,0.05); border-radius: 14px;
    border: 1px solid rgba(212,168,83,0.2); backdrop-filter: blur(8px);
}
.color-customizer-title {
    font-family: 'Tajawal', sans-serif; font-size: 1rem; font-weight: 700;
    color: var(--gold-light); margin: 0 0 4px; text-align: center;
}
.color-customizer-hint {
    font-family: 'Tajawal', sans-serif; font-size: 0.78rem;
    color: rgba(255,255,255,0.5); margin: 0 0 12px; text-align: center;
}
.color-customizer-rows { display: flex; flex-direction: column; gap: 10px; }
.color-row {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 12px; background: rgba(0,0,0,0.15); border-radius: 10px;
}
.color-row-label {
    font-family: 'Tajawal', sans-serif; font-size: 0.85rem; font-weight: 600;
    color: rgba(255,255,255,0.7); text-align: center; width: 100%;
}
.color-row-options {
    display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center;
}
.color-swatch {
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    border: 2.5px solid transparent; transition: all 0.25s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(0,0,0,0.4); }
.color-swatch-custom {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 2px dashed rgba(212,175,55,0.6); transition: all 0.25s;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    position: relative; overflow: hidden;
}
.color-swatch-custom:hover { transform: scale(1.15); border-color: var(--gold); }
.color-swatch-custom input[type="color"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: none;
}

/* ===== Text Customizer ===== */
.text-customizer-rows { display: flex; flex-direction: column; gap: 12px; }
.text-edit-row { display: flex; flex-direction: column; gap: 4px; }
.text-edit-input {
    font-family: 'Tajawal', sans-serif; font-size: 0.9rem;
    color: #fff; background: rgba(0,0,0,0.25); border: 1px solid rgba(212,168,83,0.25);
    border-radius: 10px; padding: 10px 14px; resize: vertical; direction: rtl;
    transition: border-color 0.3s;
}
.text-edit-input:focus { outline: none; border-color: var(--gold); }
.text-edit-input::placeholder { color: rgba(255,255,255,0.3); }

/* ===== Logo Controller ===== */
.logo-controller {
    max-width: 420px; margin: 15px auto; padding: 16px 18px;
    background: rgba(255,255,255,0.05); border-radius: 14px;
    border: 1px solid rgba(212,168,83,0.2); backdrop-filter: blur(8px);
}
.logo-ctrl-content { display: flex; flex-direction: column; gap: 12px; }
.logo-ctrl-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; background: rgba(0,0,0,0.15); border-radius: 10px;
}
.logo-size-controls {
    display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center;
}
.logo-ctrl-btn {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(212,168,83,0.3);
    background: rgba(212,168,83,0.1); color: var(--gold-light); font-size: 1.2rem;
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
    font-family: 'Tajawal', sans-serif; font-weight: 700;
}
.logo-ctrl-btn:hover { background: rgba(212,168,83,0.25); border-color: var(--gold); transform: scale(1.05); }
.logo-ctrl-btn:active { transform: scale(0.95); }
.logo-size-value {
    font-family: 'Tajawal', sans-serif; font-size: 0.9rem; font-weight: 600;
    color: var(--gold-light); min-width: 50px; text-align: center;
}
.logo-dpad {
    display: grid; grid-template-columns: repeat(3, 36px); gap: 4px;
    flex: 1; justify-content: center; justify-items: center;
}
.logo-dpad-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(212,168,83,0.25);
    background: rgba(212,168,83,0.08); color: var(--gold-light); font-size: 1rem;
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.logo-dpad-btn:hover { background: rgba(212,168,83,0.2); border-color: var(--gold); }
.logo-dpad-btn:active { transform: scale(0.9); }
.logo-dpad-center {
    background: rgba(212,168,83,0.2); border-color: var(--gold); font-size: 1.1rem;
}
.logo-dpad-center:hover { background: rgba(212,168,83,0.35); }

/* ===== Action Buttons ===== */
.actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 420px; margin: 0 auto 20px; padding: 0 10px;
}
.btn-download, .btn-download-pdf, .btn-new, .btn-share, .btn-copy-link, .btn-back-result {
    padding: 12px 16px; border-radius: 12px; font-family: 'Tajawal', sans-serif;
    font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.3s;
    border: 1.5px solid rgba(212,175,55,0.3); background: rgba(255,255,255,0.05);
    color: var(--gold-light); display: flex; align-items: center; justify-content: center; gap: 6px;
    backdrop-filter: blur(5px);
}
.btn-download, .btn-download-pdf, .btn-new, .btn-share, .btn-copy-link, .btn-back-result {
    background: rgba(255,255,255,0.05);
}
.btn-download:hover, .btn-download-pdf:hover, .btn-new:hover,
.btn-share:hover, .btn-copy-link:hover, .btn-back-result:hover {
    background: rgba(212,175,55,0.15); border-color: var(--gold);
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,0.15);
}
.btn-download { background: linear-gradient(135deg, var(--gold), #c4943f); color: #1a1a1a; border-color: var(--gold); }
.btn-download:hover { box-shadow: 0 8px 25px var(--gold-glow); }

/* ===== Share Modal ===== */
.share-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.share-modal-content {
    background: rgba(13,41,38,0.95); backdrop-filter: blur(20px);
    border: 1px solid rgba(212,168,83,0.3); border-radius: 20px;
    padding: 35px; text-align: center; position: relative;
}
.share-modal-content h3 { color: var(--gold-light); margin-bottom: 20px; font-size: 1.3rem; }
.share-buttons { display: flex; gap: 15px; justify-content: center; }
.share-btn {
    padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05); color: var(--white); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-family: 'Tajawal', sans-serif; font-size: 0.85rem; transition: all 0.3s;
}
.share-btn:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); }
.share-close {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    color: var(--gray); font-size: 1.5rem; cursor: pointer;
}

/* ===== Toast ===== */
.toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: rgba(46,148,137,0.9); color: #fff; padding: 12px 30px;
    border-radius: 50px; font-family: 'Tajawal', sans-serif; font-size: 0.95rem;
    z-index: 99999; backdrop-filter: blur(10px);
    animation: toastIn 0.3s ease-out;
}
@keyframes toastIn { 0% { transform: translateX(-50%) translateY(20px); opacity: 0; } 100% { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ===== Confetti ===== */
.confetti { position: fixed; top: -10px; z-index: 100; animation: confDrop linear forwards; }
@keyframes confDrop { 0% { transform: translateY(0) rotateZ(0); opacity:1; } 100% { transform: translateY(100vh) rotateZ(720deg); opacity:0; } }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .title-main { font-size: 1.7rem; }
    .eid-calligraphy-svg { max-width: 300px; }
    .logo { width: 260px; height: 260px; border-radius: 14px; }
    .form-card { padding: 35px 25px; max-width: 95%; }
    .greeting-card { width: 100%; }
    .card-eid-calligraphy { margin-top: 45px; }
    .card-user-name { font-size: 1.5rem; }
    .card-calli-svg { max-width: 280px; }
    .hanging-lantern { display: none; }
    .actions { grid-template-columns: 1fr 1fr; gap: 8px; max-width: 100%; }
    .btn-download, .btn-download-pdf, .btn-new, .btn-share, .btn-copy-link, .btn-back-result {
        padding: 10px 12px; font-size: 0.82rem;
    }
}
@media (max-width: 480px) {
    .eid-calligraphy-svg { max-width: 250px; }
    .card-calli-svg { max-width: 220px; }
    .card-user-name { font-size: 1.3rem; }
    .btn-golden { padding: 14px 30px; font-size: 1rem; }
    .card-msg { font-size: 0.8rem; }
    .card-dua { font-size: 1rem; }
    .theme-switcher { top: 10px; left: 10px; padding: 8px 12px; }
    .sound-toggle { top: 10px; right: 10px; }
}