/* Extracted home page styles from inline <style> in home/index.php */
/* NOTE: Ensure this file is loaded AFTER app.css */

.home-wrapper { min-height: 100vh; position: relative; background: linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%); overflow: hidden; }
.bg-decorations { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.decoration { position:absolute; border-radius:50%; opacity:.1; animation:float 6s ease-in-out infinite; }
.decoration-1 { width:400px; height:400px; background:linear-gradient(45deg,#0ea5e9,#3b82f6); top:-200px; left:-200px; animation-delay:0s; }
.decoration-2 { width:300px; height:300px; background:linear-gradient(45deg,#8b5cf6,#a78bfa); top:50%; right:-150px; animation-delay:2s; }
.decoration-3 { width:250px; height:250px; background:linear-gradient(45deg,#22c55e,#16a34a); bottom:-125px; left:20%; animation-delay:4s; }
.floating-particles { position:absolute; width:100%; height:100%; animation:particleContainer 20s ease-in-out infinite; }
@keyframes particleContainer { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-10px);} }
.particle { position:absolute; width:6px; height:6px; background:radial-gradient(circle,rgba(59,130,246,.8),rgba(14,165,233,.4)); border-radius:50%; animation:particle-float 12s linear infinite; box-shadow:0 0 10px rgba(59,130,246,.3); }
.particle:nth-child(1){ left:10%; animation-delay:0s; animation-duration:15s; }
.particle:nth-child(2){ left:30%; animation-delay:3s; animation-duration:12s; }
.particle:nth-child(3){ left:50%; animation-delay:6s; animation-duration:18s; }
.particle:nth-child(4){ left:70%; animation-delay:9s; animation-duration:14s; }
.particle:nth-child(5){ left:90%; animation-delay:12s; animation-duration:16s; }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0deg);} 50% { transform:translateY(-20px) rotate(180deg);} }
@keyframes particle-float { 0% { transform:translateY(100vh) scale(0); opacity:0;} 10% { opacity:1;} 90% { opacity:1;} 100% { transform:translateY(-100px) scale(1); opacity:0;} }
.home-header { position:relative; z-index:10; padding:2rem; opacity:0; transform:translateY(-50px); animation:headerSlideDown 1.2s cubic-bezier(.4,0,.2,1) forwards, headerFloat 8s ease-in-out 2s infinite; overflow:hidden; }
.home-header::before { content:''; position:absolute; inset:0; background-image:radial-gradient(2px 2px at 20% 30%,rgba(14,165,233,.4),transparent),radial-gradient(1px 1px at 40% 70%,rgba(59,130,246,.3),transparent),radial-gradient(1px 1px at 90% 40%,rgba(14,165,233,.3),transparent),radial-gradient(2px 2px at 70% 80%,rgba(59,130,246,.2),transparent); background-size:200px 200px,150px 150px,180px 180px,220px 220px; animation:floatingParticles 15s linear infinite; pointer-events:none; z-index:-1; }
@keyframes floatingParticles { 0%{ transform:translateX(0) translateY(0);} 25%{ transform:translateX(10px) translateY(-5px);} 50%{ transform:translateX(-5px) translateY(10px);} 75%{ transform:translateX(8px) translateY(3px);} 100%{ transform:translateX(0) translateY(0);} }
@keyframes headerSlideDown { to { opacity:1; transform:translateY(0);} }
@keyframes headerFloat { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-5px);} }
.header-content { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; opacity:0; animation:contentFadeIn .8s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes contentFadeIn { to { opacity:1; } }
.brand-logo { display:flex; align-items:center; gap:1rem; transform:translateX(-30px); opacity:0; animation:logoSlideIn .8s cubic-bezier(.4,0,.2,1) .5s forwards; transition:all .3s ease; cursor:pointer; padding:.5rem; border-radius:12px; }
.brand-logo:hover { background:rgba(14,165,233,.05); transform:scale(1.02); }
@keyframes logoSlideIn { to { transform:translateX(0); opacity:1; } }
.logo-icon { width:60px; height:60px; background:rgba(255,255,255,0.05); backdrop-filter:blur(4px) saturate(160%); -webkit-backdrop-filter:blur(4px) saturate(160%); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; box-shadow:0 8px 20px -6px rgba(0,0,0,0.55), 0 4px 8px -2px rgba(0,0,0,0.35); transition:all .4s cubic-bezier(.4,0,.2,1); animation:logoIconBounce 2s ease-in-out 1s infinite; cursor:pointer; position:relative; overflow:hidden; }
.logo-icon .logo-image { width:100%; height:100%; object-fit:cover; display:block; border-radius:14px; box-shadow:none; transition:transform .5s ease, filter .5s ease; }
.logo-icon:hover .logo-image { transform:scale(1.08) rotate(2deg); filter:brightness(1.05) saturate(1.1); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.logo-icon:hover { transform:scale(1.07) translateY(-3px); box-shadow:0 14px 34px -8px rgba(0,0,0,0.55), 0 6px 14px -4px rgba(0,0,0,0.38); }
.logo-icon::before { content:''; position:absolute; inset:-40%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.25),rgba(255,255,255,0) 70%); opacity:.35; mix-blend-mode:soft-light; pointer-events:none; animation:logoShimmer 6s ease-in-out infinite; filter:blur(2px); }
@keyframes logoIconBounce { 0%,100% { transform:scale(1) rotate(0deg);} 50% { transform:scale(1.05) rotate(2deg);} }
@keyframes logoShimmer { 0% { transform:translateX(-200%) translateY(-200%) rotate(45deg);} 50% { transform:translateX(0) translateY(0) rotate(45deg);} 100% { transform:translateX(200%) translateY(200%) rotate(45deg);} }
.brand-text { animation:brandTextSlide 1.5s cubic-bezier(.4,0,.2,1) .8s both; }
.brand-text h2 { margin:0; font-size:1.5rem; font-weight:700; color:#f1f5f9; opacity:0; animation:titleCharAppear 2s cubic-bezier(.4,0,.2,1) 1s both; transform:translateY(20px); }
.brand-text .year { color:#0ea5e9; font-weight:800; text-shadow:0 0 10px rgba(14,165,233,.3); animation:yearGlow 3s ease-in-out infinite; }
.brand-text p { margin:0; font-size:.875rem; color:#94a3b8; opacity:0; animation:subtitleFadeIn 1.5s ease-out 1.3s both; }
@keyframes brandTextSlide { 0% { opacity:0; transform:translateX(30px);} 100% { opacity:1; transform:translateX(0);} }
@keyframes titleCharAppear { 0% { opacity:0; transform:translateY(20px); filter:blur(10px);} 100% { opacity:1; transform:translateY(0); filter:blur(0);} }
@keyframes yearGlow { 0%,100% { text-shadow:0 0 10px rgba(14,165,233,.3);} 50% { text-shadow:0 0 20px rgba(14,165,233,.6),0 0 30px rgba(14,165,233,.4);} }
@keyframes subtitleFadeIn { 0% { opacity:0; transform:translateY(10px);} 100% { opacity:1; transform:translateY(0);} }
.status-indicator { display:flex; align-items:center; gap:.5rem; background:rgba(34,197,94,.1); padding:.5rem 1rem; border-radius:20px; border:1px solid rgba(34,197,94,.2); opacity:0; transform:translateX(30px); animation:statusSlideIn 1.8s cubic-bezier(.4,0,.2,1) 1.5s both; transition:all .3s ease; cursor:pointer; }
.status-indicator:hover { background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.4); transform:translateY(-2px); box-shadow:0 8px 25px rgba(34,197,94,.2); }
.status-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:statusPulse 2s infinite; position:relative; overflow:hidden; }
.status-dot::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; background:rgba(34,197,94,.6); border-radius:50%; transform:translate(-50%,-50%); animation:statusRing 2s infinite; }
.status-text { color:#22c55e; font-size:.875rem; font-weight:500; text-shadow:0 0 10px rgba(34,197,94,.2); }
@keyframes statusSlideIn { 0% { opacity:0; transform:translateX(30px) scale(.8);} 70% { opacity:1; transform:translateX(-5px) scale(1.05);} 100% { opacity:1; transform:translateX(0) scale(1);} }
@keyframes statusPulse { 0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.7);} 50% { opacity:.8; transform:scale(1.1); box-shadow:0 0 0 4px rgba(34,197,94,.2);} }
@keyframes statusRing { 0% { width:0; height:0; opacity:1;} 70% { width:20px; height:20px; opacity:.5;} 100% { width:24px; height:24px; opacity:0;} }
.home-main { position:relative; z-index:10; max-width:1200px; margin:0 auto; padding:2rem; display:grid; gap:3rem; }
.welcome-section { text-align:center; max-width:800px; margin:0 auto; opacity:0; transform:translateY(-30px); animation:welcomeSlide 1s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes welcomeSlide { to { opacity:1; transform:translateY(0);} }
.welcome-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(14,165,233,.1); color:#0ea5e9; padding:.5rem 1rem; border-radius:20px; border:1px solid rgba(14,165,233,.2); font-size:.875rem; font-weight:500; position:relative; animation:badgePulse 3s ease-in-out infinite; }
.security-indicator { position:absolute; top:-4px; right:-4px; width:12px; height:12px; background:#22c55e; border-radius:50%; border:2px solid rgba(15,23,42,.9); }
.security-pulse { position:absolute; top:50%; left:50%; width:100%; height:100%; border-radius:50%; background:#22c55e; transform:translate(-50%,-50%); animation:securityPulse 2s infinite; }
@keyframes securityPulse { 0% { transform:translate(-50%,-50%) scale(1); opacity:1;} 100% { transform:translate(-50%,-50%) scale(2.5); opacity:0;} }
@keyframes badgePulse { 0%,100% { box-shadow:0 0 0 0 rgba(14,165,233,.4); transform:scale(1);} 50% { box-shadow:0 0 0 8px rgba(14,165,233,.1); transform:scale(1.05);} }
.main-title { font-size:2.5rem; font-weight:800; color:#f1f5f9; margin:0 0 1rem 0; background:linear-gradient(135deg,#f1f5f9,#cbd5e1); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; opacity:0; transform:translateY(20px); animation:titleSlide .8s cubic-bezier(.4,0,.2,1) .4s forwards; }
@keyframes titleSlide { to { opacity:1; transform:translateY(0);} }
.main-subtitle { font-size:1.125rem; color:#cbd5e1; margin:0; line-height:1.7; opacity:0; transform:translateY(15px); animation:subtitleFade .8s cubic-bezier(.4,0,.2,1) .6s forwards; }
@keyframes subtitleFade { to { opacity:1; transform:translateY(0);} }
.search-section { max-width:800px !important; margin:0 auto !important; width:100% !important; padding:0 1rem; position:relative; opacity:0; transform:translateY(30px) scale(.98); animation:slideInUp 1s cubic-bezier(.4,0,.2,1) .5s forwards, gentleFloat 8s ease-in-out 2s infinite; }
@keyframes slideInUp { to { opacity:1; transform:translateY(0) scale(1);} }
@keyframes gentleFloat { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-3px);} }
.search-section * { box-sizing:border-box; }
.error-alert { background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(220,38,38,.05)); border:1px solid rgba(239,68,68,.2); border-radius:16px; padding:1.5rem; margin-bottom:2rem; display:flex; align-items:flex-start; gap:1rem; position:relative; }
.error-icon { width:40px; height:40px; background:rgba(239,68,68,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ef4444; flex-shrink:0; }
.error-content h4 { margin:0 0 .5rem 0; color:#fecaca; font-weight:600; }
.error-content p { margin:0; color:#fca5a5; font-size:.875rem; }
.error-close { position:absolute; top:.75rem; right:.75rem; background:none; border:none; color:#ef4444; cursor:pointer; font-size:1.25rem; padding:.25rem; border-radius:4px; transition:background .2s; }
.error-close:hover { background:rgba(239,68,68,.1); }
.security-alert { background:linear-gradient(135deg,rgba(251,146,60,.15),rgba(245,158,11,.1)); border:1px solid rgba(251,146,60,.3); border-radius:16px; padding:1.5rem; margin-bottom:1.5rem; display:flex; align-items:flex-start; gap:1rem; position:relative; animation:securityAlertSlide .5s cubic-bezier(.4,0,.2,1); }
.security-alert .error-icon { background:rgba(251,146,60,.2); color:#f59e0b; }
.security-alert .error-content h4 { color:#fbbf24; margin:0 0 .5rem 0; font-weight:600; }
.security-alert .error-content p { color:#fcd34d; margin:0; font-size:.875rem; }
.security-alert .error-close { color:#f59e0b; }
.security-alert .error-close:hover { background:rgba(251,146,60,.1); }
.search-btn.security-cooldown { background:linear-gradient(135deg,#64748b,#475569); cursor:not-allowed; opacity:.7; }
.search-btn.security-cooldown:hover { background:linear-gradient(135deg,#64748b,#475569); transform:none; box-shadow:0 4px 15px rgba(100,116,139,.3); }
.search-btn.security-cooldown .btn-icon { animation:none; }
@keyframes securityAlertSlide { 0% { opacity:0; transform:translateY(-20px) scale(.95);} 100% { opacity:1; transform:translateY(0) scale(1);} }
.captcha-section { background:linear-gradient(135deg,rgba(251,146,60,.05),rgba(245,158,11,.03)); border:1px solid rgba(251,146,60,.2); border-radius:12px; padding:1.25rem; margin:1rem 0; animation:captchaSlideIn .4s cubic-bezier(.4,0,.2,1); }
.captcha-header { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:1rem; color:#f59e0b; }
.captcha-header i { font-size:1.1rem; animation:iconBounce 2s ease-in-out infinite; }
.captcha-header h4 { margin:0; font-size:.9rem; font-weight:600; text-align:center; }
.captcha-content { display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.captcha-row { display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; width:100%; }
.captcha-question { background:rgba(15,23,42,.6); border:1px solid rgba(251,146,60,.3); border-radius:8px; padding:.8rem 1.4rem; font-size:1.1rem; font-weight:600; color:#f59e0b; font-family:'Courier New',monospace; letter-spacing:1px; text-align:center; min-width:140px; display:flex; align-items:center; justify-content:center; }
.captcha-input-wrapper { display:flex; gap:1rem; align-items:center; justify-content:center; }
.captcha-input { background:rgba(15,23,42,.6); border:1px solid rgba(251,146,60,.3); border-radius:8px; padding:.8rem 1.2rem; color:#f1f5f9; font-size:1.1rem; text-align:center; font-weight:600; font-family:'Courier New',monospace; letter-spacing:.5px; transition:all .3s ease; width:130px; min-width:110px; height:48px; -webkit-appearance:none; -moz-appearance:textfield; appearance:none; }
.captcha-input::-webkit-outer-spin-button, .captcha-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.captcha-input[type=number] { -moz-appearance: textfield; appearance: none; }
.captcha-input:focus { outline:none; border-color:#f59e0b; box-shadow:0 0 0 3px rgba(251,146,60,.2); animation:captchaPulse 1.5s ease-in-out infinite; }
.captcha-input.correct { border-color:#22c55e; background:rgba(34,197,94,.1); animation:captchaSuccess .6s ease-out; }
.captcha-input.incorrect { border-color:#ef4444; background:rgba(239,68,68,.1); animation:captchaShake .6s ease-in-out,captchaError .6s ease-out; }
.captcha-refresh { background:rgba(251,146,60,.15); border:1px solid rgba(251,146,60,.3); border-radius:8px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:#f59e0b; cursor:pointer; transition:all .3s ease; font-size:1.1rem; flex-shrink:0; }
.captcha-refresh:hover { background:rgba(251,146,60,.25); transform:rotate(90deg); animation:refreshSpin .8s cubic-bezier(.4,0,.2,1); }
.captcha-refresh:active { animation:refreshSpin .6s cubic-bezier(.4,0,.2,1); }
.captcha-status { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.85rem; font-weight:500; min-height:1.5rem; text-align:center; width:100%; }
.captcha-status.success { color:#22c55e; }
.captcha-status.error { color:#ef4444; }
.captcha-status.info { color:#94a3b8; }
@keyframes captchaSlideIn { 0% { opacity:0; transform:translateY(40px) scale(.9) rotateX(15deg);} 50% { opacity:.8; transform:translateY(-5px) scale(1.02) rotateX(0deg);} 100% { opacity:1; transform:translateY(0) scale(1) rotateX(0deg);} }
@keyframes captchaShake { 0%,100% { transform:translateX(0);} 10% { transform:translateX(-8px) rotate(-1deg);} 20% { transform:translateX(8px) rotate(1deg);} 30% { transform:translateX(-6px) rotate(-1deg);} 40% { transform:translateX(6px) rotate(1deg);} 50% { transform:translateX(-4px) rotate(-.5deg);} 60% { transform:translateX(4px) rotate(.5deg);} 70% { transform:translateX(-2px) rotate(-.5deg);} 80% { transform:translateX(2px) rotate(.5deg);} 90% { transform:translateX(-1px);} }
@keyframes borderGlow { 0%,100% { opacity:.3; transform:scale(1);} 50% { opacity:.6; transform:scale(1.05);} }
@keyframes captchaPulse { 0%,100% { box-shadow:0 0 0 0 rgba(251,146,60,.4);} 50% { box-shadow:0 0 0 10px rgba(251,146,60,0);} }
@keyframes captchaSuccess { 0% { transform:scale(1);} 50% { transform:scale(1.05);} 100% { transform:scale(1);} }
@keyframes captchaError { 0% { transform:scale(1); filter:brightness(1);} 25% { transform:scale(1.02); filter:brightness(1.2);} 50% { transform:scale(.98); filter:brightness(.8);} 75% { transform:scale(1.01); filter:brightness(1.1);} 100% { transform:scale(1); filter:brightness(1);} }
@keyframes iconBounce { 0%,100% { transform:translateY(0) scale(1);} 50% { transform:translateY(-3px) scale(1.1);} }
@keyframes refreshSpin { 0% { transform:rotate(0deg) scale(1);} 50% { transform:rotate(180deg) scale(1.1);} 100% { transform:rotate(360deg) scale(1);} }
@media (max-width:480px){ .captcha-section{ padding:1rem; margin:.75rem 0;} .captcha-header h4{ font-size:.85rem;} .captcha-row{ flex-direction:column; gap:.75rem;} .captcha-question{ font-size:.9rem; padding:.6rem 1rem; min-width:100px;} .captcha-input{ width:120px; font-size:.9rem; padding:.6rem .8rem;} .captcha-refresh{ width:42px; height:42px; font-size:.95rem;} }
@media (min-width:481px) and (max-width:768px){ .captcha-row{ gap:1rem;} .captcha-question{ min-width:125px;} .captcha-input{ width:125px;} }
@media (min-width:769px){ .captcha-row{ gap:1.5rem;} .captcha-question{ min-width:160px;} .captcha-input{ width:140px;} }
.search-form { background:rgba(15,23,42,.7); backdrop-filter:blur(10px); border:1px solid #334155; border-radius:20px; padding:3rem; box-shadow:0 20px 50px rgba(0,0,0,.3); width:100%; box-sizing:border-box; transform:scale(.95); opacity:0; animation:formScale .8s cubic-bezier(.4,0,.2,1) .8s forwards; position:relative; overflow:hidden; }
@keyframes formScale { to { transform:scale(1); opacity:1;} }
.search-form::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 30% 70%,rgba(14,165,233,.05) 0%,transparent 50%); animation:backgroundShift 12s ease-in-out infinite; z-index:-1; }
@keyframes backgroundShift { 0%,100% { transform:translate(0,0) rotate(0deg);} 50% { transform:translate(20px,-20px) rotate(1deg);} }
.form-group { margin-bottom:2rem; opacity:0; transform:translateY(20px); animation:slideInFromBottom .6s cubic-bezier(.4,0,.2,1) 1.2s forwards; }
@keyframes slideInFromBottom { to { opacity:1; transform:translateY(0);} }
.form-label { display:flex; align-items:center; gap:.5rem; color:#f1f5f9; font-weight:600; margin-bottom:.75rem; font-size:.95rem; transition:all .3s ease; }
.form-label i { transition:all .3s cubic-bezier(.4,0,.2,1); animation:iconBounce 2s ease-in-out 1.8s infinite; }
.input-wrapper { position:relative; }
.form-input { width:100%; padding:1.25rem 1rem; background:rgba(30,41,59,.8); border:2px solid #475569; border-radius:16px; color:#f1f5f9; font-size:1.1rem; transition:all .4s cubic-bezier(.4,0,.2,1); letter-spacing:.5px; position:relative; transform:scale(.98); animation:inputGrow .5s cubic-bezier(.4,0,.2,1) 1.5s forwards; }
@keyframes inputGrow { to { transform:scale(1);} }
.form-input:focus { outline:none; border-color:#0ea5e9; box-shadow:0 0 0 4px rgba(14,165,233,.1); background:rgba(30,41,59,1); transform:scale(1.02); }
.form-input.error { border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.1); animation:shake .5s ease-in-out; }
@keyframes shake { 0%,100% { transform:translateX(0);} 25% { transform:translateX(-5px);} 75% { transform:translateX(5px);} }
.form-input.success { border-color:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.1); animation:successGlow .6s ease-in-out; }
@keyframes successGlow { 0%,100% { box-shadow:0 0 0 4px rgba(34,197,94,.1);} 50% { box-shadow:0 0 0 8px rgba(34,197,94,.2),0 0 20px rgba(34,197,94,.1);} }
.input-decoration { position:absolute; top:0; right:0; height:100%; display:flex; align-items:center; gap:.75rem; padding-right:1rem; }
.input-progress { width:60px; height:4px; background:#475569; border-radius:2px; overflow:hidden; }
.progress-bar { height:100%; background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e); width:0%; transition:width .4s cubic-bezier(.4,0,.2,1); border-radius:2px; position:relative; overflow:hidden; }
.progress-bar::after { content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { 0% { left:-50%; } 100% { left:100%; } }
.input-counter { color:#94a3b8; font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums; }
.input-status { display:flex; align-items:center; gap:.5rem; margin-top:.75rem; color:#64748b; font-size:.875rem; transition:all .3s ease; }
.input-status.success { color:#22c55e; }
.input-status.error { color:#ef4444; }
.validation-messages { margin-top:.5rem; display:grid; gap:.5rem; }
.validation-message { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:8px; font-size:.875rem; transition:all .3s ease; }
.validation-message.error { background:rgba(239,68,68,.1); color:#fca5a5; border:1px solid rgba(239,68,68,.2); }
.validation-message.success { background:rgba(34,197,94,.1); color:#86efac; border:1px solid rgba(34,197,94,.2); }
.form-actions { text-align:center; opacity:0; transform:translateY(30px); animation:buttonSlideUp .8s cubic-bezier(.4,0,.2,1) 1.8s forwards; }
@keyframes buttonSlideUp { to { opacity:1; transform:translateY(0);} }
.search-btn { position:relative; width:100%; padding:1rem 2rem; background:linear-gradient(135deg,#0ea5e9 0%,#3b82f6 100%); border:2px solid rgba(14,165,233,.3); border-radius:16px; color:#fff; font-size:1.1rem; font-weight:600; cursor:pointer; transition:all .4s cubic-bezier(.4,0,.2,1); overflow:hidden; backdrop-filter:blur(10px); box-shadow:0 8px 32px rgba(14,165,233,.3),0 4px 12px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.1); min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center; }
.search-btn:hover:not(:disabled):not(.loading){ transform:translateY(-2px); background:linear-gradient(135deg,#0284c7 0%,#2563eb 100%); box-shadow:0 12px 40px rgba(14,165,233,.4),0 6px 16px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.15); border-color:rgba(14,165,233,.5); }
.search-btn:active:not(:disabled):not(.loading){ transform:translateY(0); box-shadow:0 6px 20px rgba(14,165,233,.3),0 2px 8px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.1); }
.search-btn:disabled:not(.loading){ background:linear-gradient(135deg,#64748b 0%,#475569 100%); border-color:rgba(100,116,139,.3); color:rgba(255,255,255,.5); cursor:not-allowed; box-shadow:0 4px 12px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.05); transform:none; }
.search-btn.loading { background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(59,130,246,.15)); border-color:rgba(14,165,233,.3); pointer-events:none; animation:loadingPulse 2s ease-in-out infinite; color:#0ea5e9; }
.search-btn:not(:disabled):not(.loading):not(:hover){ animation:buttonBreathe 4s ease-in-out infinite; }
.search-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),rgba(14,165,233,.1),rgba(255,255,255,.12),transparent); transition:left .7s cubic-bezier(.4,0,.2,1); z-index:1; }
.search-btn:hover:not(:disabled)::before { left:100%; }
.search-btn::after { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:radial-gradient(circle,rgba(14,165,233,.3),rgba(59,130,246,.1)); transform:translate(-50%,-50%); transition:all .5s cubic-bezier(.25,.46,.45,.94); z-index:1; opacity:0; }
.search-btn:active:not(:disabled)::after { width:250px; height:250px; opacity:1; transition:all .6s cubic-bezier(.25,.46,.45,.94); }
.btn-content { display:flex; align-items:center; justify-content:center; gap:.75rem; width:100%; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative; z-index:2; }
.btn-icon { display:flex; align-items:center; font-size:1.2rem; transition:all .3s ease; color:inherit; }
.search-btn:hover:not(:disabled):not(.loading) .btn-icon { transform:scale(1.1) rotate(5deg); }
.btn-text { position:relative; font-weight:600; transition:all .3s cubic-bezier(.4,0,.2,1); color:inherit; white-space:nowrap; text-align:center; }
.search-btn:hover:not(:disabled):not(.loading) .btn-text { letter-spacing:.5px; text-shadow:0 0 10px rgba(255,255,255,.3); transform:translateX(1px); }
.btn-loading { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:.75rem; opacity:0; transition:all .4s cubic-bezier(.4,0,.2,1); z-index:3; color:inherit; font-weight:600; background:transparent; pointer-events:none; }
.loading-text { font-size:1rem; font-weight:600; color:inherit; white-space:nowrap; text-align:center; }
.search-btn.loading .btn-content { opacity:0; transform:scale(.95); pointer-events:none; }
.search-btn.loading .btn-loading { opacity:1; transform:scale(1); pointer-events:none; }
@keyframes loadingPulse { 0%,100% { box-shadow:0 6px 20px rgba(14,165,233,.2),0 2px 8px rgba(14,165,233,.1),inset 0 1px 0 rgba(255,255,255,.08);} 50% { box-shadow:0 8px 25px rgba(14,165,233,.3),0 4px 12px rgba(14,165,233,.15),inset 0 1px 0 rgba(255,255,255,.12);} }
@keyframes buttonBreathe { 0%,100% { transform:scale(1); box-shadow:0 6px 20px rgba(0,0,0,.15),0 2px 8px rgba(14,165,233,.1),inset 0 1px 0 rgba(255,255,255,.08);} 50% { transform:scale(1.005); box-shadow:0 6px 22px rgba(0,0,0,.15),0 3px 10px rgba(14,165,233,.12),inset 0 1px 0 rgba(255,255,255,.1);} }
.loading-spinner { width:24px; height:24px; border:3px solid rgba(255,255,255,.3); border-top:3px solid #fff; border-radius:50%; animation:enhancedSpin 1.2s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes enhancedSpin { 0% { transform:rotate(0deg) scale(1);} 50% { transform:rotate(180deg) scale(1.1);} 100% { transform:rotate(360deg) scale(1);} }
.help-section { margin-top:3rem; animation:helpSectionAppear .8s cubic-bezier(.34,1.56,.64,1); animation-fill-mode:both; }
.help-card { background:rgba(15,23,42,.6); backdrop-filter:blur(10px); border:1px solid #334155; border-radius:20px; padding:2.5rem; max-width:800px; margin:0 auto; overflow:hidden; transition:all .4s cubic-bezier(.25,.46,.45,.94); position:relative; transform-origin:center top; }
.help-card:hover { border-color:#475569; box-shadow:0 15px 40px rgba(0,0,0,.25); transform:translateY(-2px) scale(1.005); }
.help-card.refreshing { animation:helpCardRefresh .6s cubic-bezier(.68,-.55,.265,1.55); }
.help-header { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; cursor:pointer; padding:.75rem 1rem; border-radius:12px; transition:all .3s cubic-bezier(.4,0,.2,1); user-select:none; position:relative; overflow:hidden; }
.help-header:hover { background:rgba(59,130,246,.1); transform:translateY(-1px); }
.help-header:active { transform:translateY(0) scale(.98); }
.help-header.toggling { animation:helpHeaderToggle .4s cubic-bezier(.175,.885,.32,1.275); }
.help-toggle-icon { margin-left:auto; font-size:1.2rem; color:#64748b; transition:all .4s cubic-bezier(.4,0,.2,1); transform-origin:center; }
.help-toggle-icon.expanded { transform:rotate(180deg) scale(1.1); color:#0ea5e9; text-shadow:0 0 10px rgba(14,165,233,.3); }
.help-toggle-icon.spinning { animation:helpIconSpin .6s cubic-bezier(.68,-.55,.265,1.55); }
.help-content { overflow:hidden; transition:all .6s cubic-bezier(.4,0,.2,1); opacity:1; transform:translateY(0); transform-origin:top center; display:grid; gap:1.5rem; margin-bottom:2rem; }
.help-content.collapsed { max-height:0!important; opacity:0; transform:translateY(-20px) scaleY(.8); margin-bottom:0; padding-top:0; padding-bottom:0; }
.help-content:not(.collapsed) { max-height:800px; animation:helpContentExpand .6s cubic-bezier(.34,1.56,.64,1); }
.help-content.expanding { animation:helpContentSlideIn .5s cubic-bezier(.175,.885,.32,1.275); }
.help-content.collapsing { animation:helpContentSlideOut .4s cubic-bezier(.55,.085,.68,.53); }
.help-item { display:flex; align-items:flex-start; gap:1rem; animation:fadeInUp .6s ease-out; animation-fill-mode:both; transition:all .3s cubic-bezier(.4,0,.2,1); }
.help-item:nth-child(1){ animation-delay:.1s; }
.help-item:nth-child(2){ animation-delay:.2s; }
.help-item:nth-child(3){ animation-delay:.3s; }
.help-item:hover { transform:translateY(-1px); background:rgba(59,130,246,.05); border-radius:8px; padding:.5rem; margin:-.5rem; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} }
.help-header h3 { transition:color .3s ease; margin:0; font-weight:600; color:#f1f5f9; }
.help-header:hover h3 { color:#0ea5e9; }
.help-header i { color:#0ea5e9; font-size:1.5rem; }
.step-number { width:32px; height:32px; background:linear-gradient(135deg,#0ea5e9,#3b82f6); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0; }
.step-content h4 { color:#f1f5f9; margin:0 0 .5rem 0; font-weight:600; }
.step-content p { color:#cbd5e1; margin:0; font-size:.95rem; line-height:1.5; }
.help-example { background:rgba(30,41,59,.5); border:1px solid #475569; border-radius:12px; padding:1.5rem; }
.example-label { display:flex; align-items:center; gap:.5rem; color:#94a3b8; font-size:.875rem; margin-bottom:.75rem; }
.example-nik { font-family:'Courier New',monospace; font-size:1.25rem; color:#0ea5e9; font-weight:600; letter-spacing:2px; padding:.5rem; background:rgba(14,165,233,.1); border-radius:8px; text-align:center; }
.security-info { margin-top:2rem; padding:1.5rem; background:rgba(34,197,94,.05); border:1px solid rgba(34,197,94,.2); border-radius:12px; animation:securityInfoSlide .8s cubic-bezier(.4,0,.2,1) .5s both; }
.security-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; color:#22c55e; }
.security-header i { font-size:1.25rem; }
.security-header h4 { margin:0; font-size:1rem; font-weight:600; color:#22c55e; }
.security-list { display:flex; flex-direction:column; gap:.75rem; }
.security-item { display:flex; align-items:center; gap:.75rem; color:#94a3b8; font-size:.875rem; padding:.5rem 0; border-bottom:1px solid rgba(148,163,184,.1); }
.security-item:last-child { border-bottom:none; }
.security-item i { color:#22c55e; font-size:1rem; width:16px; text-align:center; }
@keyframes securityInfoSlide { 0% { opacity:0; transform:translateY(20px);} 100% { opacity:1; transform:translateY(0);} }
@keyframes helpSectionAppear { 0% { opacity:0; transform:translateY(30px) scale(.95);} 60% { opacity:.8; transform:translateY(-5px) scale(1.02);} 100% { opacity:1; transform:translateY(0) scale(1);} }
@keyframes helpCardRefresh { 0% { transform:scale(1) rotateX(0deg); opacity:1;} 25% { transform:scale(.95) rotateX(-5deg); opacity:.8;} 50% { transform:scale(1.02) rotateX(5deg); opacity:.9;} 75% { transform:scale(.98) rotateX(-2deg); opacity:.95;} 100% { transform:scale(1) rotateX(0deg); opacity:1;} }
@keyframes helpHeaderToggle { 0% { transform:translateY(0) scale(1);} 30% { transform:translateY(-2px) scale(1.05);} 60% { transform:translateY(1px) scale(.98);} 100% { transform:translateY(0) scale(1);} }
@keyframes helpIconSpin { 0% { transform:rotate(0deg) scale(1);} 30% { transform:rotate(120deg) scale(1.2);} 60% { transform:rotate(240deg) scale(.9);} 100% { transform:rotate(360deg) scale(1);} }
@keyframes helpContentExpand { 0% { opacity:0; transform:translateY(-15px) scaleY(.8);} 40% { opacity:.6; transform:translateY(-5px) scaleY(.95);} 100% { opacity:1; transform:translateY(0) scaleY(1);} }
@keyframes helpContentSlideIn { 0% { opacity:0; transform:translateY(-20px) rotateX(-10deg) scale(.95);} 50% { opacity:.7; transform:translateY(-5px) rotateX(2deg) scale(1.02);} 100% { opacity:1; transform:translateY(0) rotateX(0deg) scale(1);} }
@keyframes helpContentSlideOut { 0% { opacity:1; transform:translateY(0) rotateX(0deg) scale(1);} 50% { opacity:.3; transform:translateY(-10px) rotateX(-5deg) scale(.98);} 100% { opacity:0; transform:translateY(-25px) rotateX(-15deg) scale(.9);} }
@keyframes ripple { to { transform:scale(4); opacity:0;} }
@media (max-width:768px){ .header-content{ flex-direction:column; gap:1rem; text-align:center;} .home-main{ padding:1rem; gap:2rem;} .main-title{ font-size:2rem;} .search-form{ padding:1.5rem;} .search-section{ max-width:100%!important; padding:0 .5rem;} .help-card{ padding:1.5rem;} .help-item{ flex-direction:column; text-align:center;} .step-number{ align-self:center;} }
@media (min-width:769px){ .search-section{ max-width:800px!important; } .help-card{ max-width:800px!important; } }
@media (max-width:480px){ .search-btn{ padding:.875rem 1.5rem; font-size:1rem; min-height:56px;} .btn-text,.loading-text{ font-size:.95rem;} .btn-icon{ font-size:1.1rem;} .loading-spinner{ width:20px; height:20px; border-width:2px;} }
@media (min-width:481px) and (max-width:768px){ .search-btn{ padding:.95rem 1.75rem; font-size:1.05rem; min-height:60px;} .btn-text,.loading-text{ font-size:1rem;} .btn-icon{ font-size:1.15rem;} .loading-spinner{ width:22px; height:22px;} }
@media (min-width:769px){ .search-btn{ padding:1rem 2rem; font-size:1.1rem; min-height:64px;} .btn-text,.loading-text{ font-size:1rem;} .btn-icon{ font-size:1.2rem;} .loading-spinner{ width:24px; height:24px;} }