/* Base styles */
:root{--pink-50:#fdf2f8;--pink-100:#fce7f3;--pink-200:#fbcfe8;--pink-300:#f9a8d4;--pink-400:#f472b6;--pink-500:#ec4899;--pink-600:#db2777;--rose-400:#fb7185;--rose-500:#f43f5e;--pastel-pink:#FFD6E0;--light-coral:#F8A5A5;--warm-white:#FFF9F9;--soft-rose:#FFECEF;--deep-rose:#E8919A;--muted-pink:#F2C4C4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#FFF9F9;min-height:100vh;margin:0}
::selection{background:rgba(232,145,154,.3)}
*:focus-visible{outline:2px solid #E8919A;outline-offset:2px}
a{transition:all .2s ease}

/* Custom font */
@font-face{font-family:'Alexander Bogdanov';src:url('/static/fonts/AlexanderBogdanov.woff2') format('woff2'),url('/static/fonts/AlexanderBogdanov.woff') format('woff'),url('/static/fonts/AlexanderBogdanov.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.slogan{font-family:'Alexander Bogdanov','Georgia',serif;background:linear-gradient(135deg,#E8919A 0%,#F8A5A5 50%,#E8919A 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em}

/* Neumorphic styles */
.neumorphic{background:linear-gradient(145deg,#fff,#f0e6e8);box-shadow:8px 8px 16px #e6d4d7,-8px -8px 16px #fff}
.neumorphic-inset{background:linear-gradient(145deg,#f0e6e8,#fff);box-shadow:inset 4px 4px 8px #e6d4d7,inset -4px -4px 8px #fff;transition:all .3s ease;border:2px solid transparent}
.neumorphic-inset:focus{border-color:rgba(236,72,153,.5);box-shadow:inset 4px 4px 8px rgba(0,0,0,.1),inset -4px -4px 8px rgba(255,255,255,.9),0 0 15px rgba(236,72,153,.3);transform:scale(1.01)}
.neumorphic-inset:hover{border-color:rgba(236,72,153,.3)}
.neumorphic-btn{background:linear-gradient(145deg,#ffd6e0,#f0c4cc);box-shadow:4px 4px 8px #e6c4cc,-4px -4px 8px #ffe8f0;transition:all .2s ease}
.neumorphic-btn:hover{box-shadow:2px 2px 4px #e6c4cc,-2px -2px 4px #ffe8f0}
.neumorphic-btn:active{box-shadow:inset 2px 2px 4px #e6c4cc,inset -2px -2px 4px #ffe8f0}
.valentine-card{background:linear-gradient(135deg,#fff9f9 0%,#ffecef 100%);border-radius:16px;box-shadow:6px 6px 12px #e6d4d7,-6px -6px 12px #fff}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}10%,30%{transform:scale(1.1)}20%{transform:scale(1.2)}}
@keyframes pulse-soft{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bounce-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(236,72,153,.3)}50%{box-shadow:0 0 20px rgba(236,72,153,.6)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes sparkle{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 10px 30px -10px rgba(0,0,0,.2)}50%{box-shadow:0 20px 40px -10px rgba(236,72,153,.4)}}
@keyframes bounce-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.animate-fadeInUp{animation:fadeInUp .5s ease-out forwards}
.animate-fadeIn{animation:fadeIn .4s ease-out forwards}
.animate-scaleIn{animation:scaleIn .4s ease-out forwards}
.animate-heartbeat{animation:heartbeat 1.5s ease-in-out infinite}

/* Form enhancements */
select.neumorphic-inset{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ec4899'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:40px}
input[type=radio]{appearance:none;width:20px;height:20px;border:2px solid #d1d5db;border-radius:50%;transition:all .2s ease;cursor:pointer;position:relative}
input[type=radio]:checked{border-color:#ec4899;background:linear-gradient(135deg,#ec4899,#f43f5e)}
input[type=radio]:checked::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#fff;border-radius:50%}
input[type=radio]:hover{border-color:#f9a8d4;box-shadow:0 0 10px rgba(236,72,153,.3)}

/* Section cards */
.section-card{transition:all .4s ease}
.section-card:hover{transform:translateY(-2px);box-shadow:12px 12px 24px rgba(0,0,0,.1),-12px -12px 24px rgba(255,255,255,.9)}
.section-icon{display:inline-block;transition:transform .3s ease}
.section-card:hover .section-icon{animation:float 1s ease-in-out infinite}

/* Valentine cards */
.valentine-select-card input:checked+div{box-shadow:0 20px 40px -10px rgba(0,0,0,.3)}
.valentine-select-card input:checked+div .absolute.top-2.left-2{background-color:#fff}
.valentine-select-card input:checked+div .absolute.top-2.left-2 svg{opacity:1}
.valentine-select-card:hover .decorative-emoji{animation:wiggle .5s ease-in-out}
.valentine-select-card .bottom-hearts span{animation:bounce-soft 1.5s ease-in-out infinite}
.valentine-select-card .bottom-hearts span:nth-child(2){animation-delay:.2s}
.valentine-select-card .bottom-hearts span:nth-child(3){animation-delay:.4s}

/* Submit button */
.submit-btn-enhanced{background-size:200% auto;transition:all .4s ease;position:relative;overflow:hidden}
.submit-btn-enhanced::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}
.submit-btn-enhanced:hover::before{left:100%}
.submit-btn-enhanced:hover{background-position:right center;transform:translateY(-3px) scale(1.02);box-shadow:0 15px 35px -5px rgba(236,72,153,.5)}
.submit-btn-enhanced:active{transform:translateY(0) scale(.98)}

/* Toggle switch */
.toggle-enhanced .toggle-thumb{transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}
.toggle-enhanced input:checked+.toggle-track{animation:glow 2s ease-in-out infinite}

/* Back link */
.back-link{transition:all .3s ease;display:inline-flex;align-items:center;gap:4px}
.back-link:hover{transform:translateX(-5px);color:#be185d}

/* Received valentines */
.valentine-received{animation:slideInUp .6s ease-out forwards;opacity:0}
.valentine-received:nth-child(1){animation-delay:.1s}
.valentine-received:nth-child(2){animation-delay:.2s}
.valentine-received:nth-child(3){animation-delay:.3s}
.valentine-received:nth-child(4){animation-delay:.4s}
.valentine-received:nth-child(5){animation-delay:.5s}
.valentine-received:nth-child(6){animation-delay:.6s}
.floating-hearts span{animation:sparkle 2s ease-in-out infinite}
.floating-hearts span:nth-child(2){animation-delay:.5s}
.sender-card{transition:all .3s ease}
.group:hover .sender-card{transform:translateY(-2px);box-shadow:0 10px 25px -5px rgba(0,0,0,.15)}
.comment-card{transition:all .3s ease}
.group:hover .comment-card{background:rgba(255,255,255,.9);transform:scale(1.02)}
.empty-icon{animation:bounce-slow 3s ease-in-out infinite}

/* Print styles */
@media print{
    body{background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .no-print{display:none!important}
    .print-only{display:block!important}
    .valentine-received{animation:none!important;opacity:1!important;break-inside:avoid;page-break-inside:avoid;margin-bottom:20px}
    .neumorphic,.valentine-card{box-shadow:none!important;border:1px solid #e5e5e5}
    header,footer,.back-link{display:none!important}
    .grid{display:block!important}
    .valentine-received>div{margin-bottom:30px;border:2px solid #ec4899;border-radius:16px}
}

/* Mobile responsiveness */
@media(max-width:640px){
    .neumorphic{padding:1rem!important}
    .text-3xl{font-size:1.5rem}
    .text-2xl{font-size:1.25rem}
    .text-xl{font-size:1.1rem}
    .valentine-select-card div{padding:.75rem}
    .valentine-select-card p{font-size:.8rem}
    .grid.gap-6{gap:1rem}
    .grid.gap-4{gap:.75rem}
    .p-6{padding:1rem}
    .p-8{padding:1.25rem}
    .mb-8{margin-bottom:1.5rem}
    .mb-6{margin-bottom:1rem}
    header .max-w-5xl{flex-direction:column;gap:.75rem;text-align:center}
    header .flex.items-center.gap-4{flex-direction:column;gap:.5rem}
    .submit-btn-enhanced{padding:1rem!important;font-size:1rem!important}
    .toggle-enhanced .toggle-track{width:3rem;height:1.75rem}
    .toggle-enhanced .toggle-thumb{width:1.25rem;height:1.25rem}
}

@media(max-width:480px){
    .slogan{font-size:1.25rem!important}
    .grid.sm\:grid-cols-2{grid-template-columns:1fr!important}
    .max-w-5xl,.max-w-4xl{padding-left:.75rem;padding-right:.75rem}
    .rounded-3xl{border-radius:1rem}
    .rounded-2xl{border-radius:.75rem}
    header{padding:.75rem!important}
    .text-5xl{font-size:2.5rem}
    .sender-card{padding:.75rem}
    .sender-card .w-12{width:2.5rem;height:2.5rem}
}

/* Touch device optimizations */
@media(hover:none){
    .valentine-select-card:active div{transform:scale(.98)}
    .neumorphic-btn:active{transform:scale(.98)}
    .submit-btn-enhanced:active{transform:scale(.98)}
}

/* Download button */
.download-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}
.download-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -5px rgba(16,185,129,.4)}
.print-btn{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}
.print-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -5px rgba(99,102,241,.4)}