:root{--bg-color:#F8F9FA;--text-color:#2C3E50;--grid-line:rgba(52, 73, 94, 0.08);--text-shadow:hsla(0, 0%, 100%, .7);--card-bg:rgba(255, 255, 255, 0.95);--border-color:#A8D5BA;--accent-color:#27AE60;--link-color:#3498DB;--link-hover:#2980B9;--button-bg:linear-gradient(135deg, #34495E, #2C3E50);--button-hover:linear-gradient(135deg, #2C3E50, #34495E);--footer-color:#2980B9;--hover-bg:rgba(168, 213, 186, 0.15);--shadow-color:rgba(39, 174, 96, 0.25);--shine-bg:rgba(168, 213, 186, 0.2);--glow-color:rgba(39, 174, 96, 0.5);--premium-shadow:rgba(39, 174, 96, 0.15);--premium-glow:rgba(39, 174, 96, 0.1);--premium-border:rgba(168, 213, 186, 0.3);--bg-logo-opacity:0.3}:root.dark-mode{--bg-color:#121212;--text-color:#E8E8E8;--grid-line:rgba(255,255,255,0.06);--text-shadow:hsla(0, 0%, 0%, .7);--card-bg:rgba(30, 30, 30, 0.95);--border-color:#4A90E2;--accent-color:#4CAF50;--link-color:#81D4FA;--link-hover:#4FC3F7;--button-bg:linear-gradient(135deg, #37474F, #263238);--button-hover:linear-gradient(135deg, #263238, #37474F);--footer-color:#81D4FA;--hover-bg:rgba(74, 144, 226, 0.2);--shadow-color:rgba(76, 175, 80, 0.3);--shine-bg:rgba(74, 144, 226, 0.15);--glow-color:rgba(76, 175, 80, 0.6);--premium-shadow:rgba(76, 175, 80, 0.15);--premium-glow:rgba(76, 175, 80, 0.1);--premium-border:rgba(74, 144, 226, 0.3);--bg-logo-opacity:0.4}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background-attachment:fixed;background-color:var(--bg-color);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:10px 10px;color:var(--text-color);font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(14px, 2vw, 16px);line-height:1.5;margin:0;padding:clamp(10px, 2vw, 15px) 0;text-shadow:0 1px var(--text-shadow);text-rendering:optimizeLegibility;min-height:100vh;opacity:1!important;overflow-x:hidden;transition:all 0.4s cubic-bezier(.25,.46,.45,.94);position:relative}body.loaded{animation:fadeInGlow 1.2s cubic-bezier(.25,.46,.45,.94)}@keyframes fadeInGlow{from{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background-image:radial-gradient(2px 2px at 20px 30px,var(--accent-color),transparent),radial-gradient(2px 2px at 40px 70px,rgb(124 179 66 / .6),transparent),radial-gradient(1px 1px at 90px 40px,#7cb342,transparent),radial-gradient(1px 1px at 130px 80px,rgb(70 136 71 / .4),transparent),radial-gradient(2px 2px at 160px 30px,var(--accent-color),transparent),radial-gradient(3px 3px at 200px 50px,rgb(168 213 186 / .5),transparent);background-repeat:repeat;background-size:250px 120px;animation:floatParticles 25s linear infinite,subtleGlow 3s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px var(--premium-glow))}@keyframes floatParticles{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-120px) rotate(360deg)}}@keyframes subtleGlow{from{opacity:.8}to{opacity:1}}:root.dark-mode body::before{background-image:radial-gradient(2px 2px at 20px 30px,var(--accent-color),transparent),radial-gradient(2px 2px at 40px 70px,rgb(124 179 66 / .4),transparent),radial-gradient(1px 1px at 90px 40px,#4a8f28,transparent),radial-gradient(1px 1px at 130px 80px,rgb(74 143 40 / .3),transparent),radial-gradient(2px 2px at 160px 30px,var(--accent-color),transparent),radial-gradient(3px 3px at 200px 50px,rgb(74 144 226 / .4),transparent)}.container{margin:0 auto;max-width:min(100%, 750px);padding:0 clamp(10px, 3vw, 20px);display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:1}#background-logos{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-2;animation:logoCycle 7s ease-in-out infinite}.bg-logo{position:absolute;width:clamp(40px, 8vw, 60px);height:auto;opacity:var(--bg-logo-opacity);filter:drop-shadow(0 2px 4px var(--premium-shadow));animation:gentleFloat 3s ease-in-out infinite alternate;border-radius:8px}#background-logos .bg-logo:nth-child(1){top:10%;left:10%;transform:rotate(0deg)}#background-logos .bg-logo:nth-child(2){top:20%;right:15%;transform:rotate(45deg)}#background-logos .bg-logo:nth-child(3){top:60%;left:20%;transform:rotate(90deg)}#background-logos .bg-logo:nth-child(4){bottom:30%;right:10%;transform:rotate(135deg)}#background-logos .bg-logo:nth-child(5){top:40%;left:70%;transform:rotate(180deg)}#background-logos .bg-logo:nth-child(6){bottom:20%;left:60%;transform:rotate(225deg)}@keyframes logoCycle{0%,71%{opacity:var(--bg-logo-opacity)}72%,100%{opacity:0}}@keyframes gentleFloat{from{transform:translateY(0) rotate(var(--rotation,0deg))}to{transform:translateY(-2px) rotate(var(--rotation,0deg))}}#loading-spinner{position:fixed;inset:0;background:var(--bg-color);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;transition:opacity 0.4s cubic-bezier(.25,.46,.45,.94),transform 0.4s cubic-bezier(.25,.46,.45,.94);opacity:1;transform:scale(1)}#loading-spinner.hidden{opacity:0;transform:scale(.9);pointer-events:none}.spinner-container{display:flex;flex-direction:column;align-items:center;gap:20px;animation:fadeInGlow 0.8s cubic-bezier(.25,.46,.45,.94)}.spinner{width:60px;height:60px;border:3px solid #fff0;border-top:3px solid var(--accent-color);border-radius:50%;animation:premiumSpin 1s linear infinite;position:relative;box-shadow:0 0 20px var(--glow-color)}.spinner::before{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;background:radial-gradient(circle,var(--accent-color) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);opacity:.3;animation:pulse 2s ease-in-out infinite alternate}@keyframes premiumSpin{to{transform:rotate(360deg)}}@keyframes pulse{to{opacity:.8;transform:translate(-50%,-50%) scale(1.1)}}.loading-text{color:var(--text-color);font-size:1rem;font-weight:500;text-shadow:0 1px var(--text-shadow)}.logo{display:block;margin:0 auto 15px;width:clamp(80px, 15vw, 120px);height:auto;border:2px solid var(--border-color);border-radius:12px;box-shadow:0 4px 15px var(--premium-shadow),0 0 0 1px var(--premium-border);transition:all 0.4s cubic-bezier(.25,.46,.45,.94);animation:gentleFloat 3s ease-in-out infinite,logoGlow 2s ease-in-out infinite alternate;position:relative;overflow:hidden}.logo::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--shine-bg) 0%,transparent 70%);opacity:0;transition:opacity 0.6s;animation:rotateSlow 20s linear infinite}.logo:hover::before{opacity:.3}.logo:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 8px 25px var(--shadow-color),0 0 20px var(--glow-color),0 0 0 1px var(--premium-border)}@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes logoGlow{from{filter:drop-shadow(0 0 5px var(--premium-glow))}to{filter:drop-shadow(0 0 10px var(--premium-glow))}}@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}a{color:var(--link-color);text-decoration:none;position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(.25,.46,.45,.94)}a::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,var(--link-hover),var(--accent-color));transition:all 0.3s cubic-bezier(.25,.46,.45,.94);transform:translateX(-50%)}a:hover::after{width:100%}a:hover,a:focus,a:active{color:var(--link-hover);text-shadow:0 0 5px var(--glow-color)}a:focus{outline:thin dotted var(--text-color)}.btn{padding:clamp(12px, 2.5vw, 14px) clamp(18px, 3.5vw, 22px);background:var(--button-bg);color:#fff;border:none;border-radius:8px;font-size:clamp(14px, 2vw, 16px);font-weight:600;cursor:pointer;transition:all 0.4s cubic-bezier(.25,.46,.45,.94);display:inline-flex;align-items:center;gap:clamp(8px, 2vw, 10px);flex:1;min-width:140px;justify-content:center;white-space:nowrap;position:relative;overflow:hidden;box-shadow:0 4px 15px rgb(0 0 0 / .1),0 0 0 1px var(--premium-border)}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.6s}.btn:hover::before{left:100%}.btn:hover{background:var(--button-hover);transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px var(--shadow-color),0 0 20px var(--glow-color),0 0 0 1px var(--premium-border)}.btn:active{transform:translateY(-1px) scale(1.01)}.btn-group{display:flex;justify-content:center;gap:clamp(10px, 2.5vw, 12px);margin-top:20px;flex-wrap:wrap}.theme-toggle{position:fixed;top:20px;right:20px;background:var(--button-bg);color:#fff;border:none;border-radius:50%;width:50px;height:50px;cursor:pointer;transition:all 0.4s cubic-bezier(.25,.46,.45,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px var(--shadow-color),0 0 0 1px var(--premium-border);z-index:100;font-size:1.2rem}.theme-toggle:hover{background:var(--button-hover);transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px var(--glow-color),0 0 20px var(--glow-color)}.theme-toggle.dark-mode{background:var(--button-hover)}.jumbotron{margin:clamp(30px, 8vw, 60px) 0;text-align:center;flex-shrink:0}.jumbotron h1{color:inherit;font-family:inherit;font-size:clamp(2rem, 8vw, 4.5rem);font-weight:700;line-height:1;margin:10px 0;cursor:default;text-rendering:optimizeLegibility;animation:slideInDownGlow 1s cubic-bezier(.25,.46,.45,.94);position:relative;text-shadow:0 2px 4px var(--premium-shadow)}@keyframes slideInDownGlow{from{opacity:0;transform:translateY(-50px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.jumbotron h1::after{content:'';position:absolute;bottom:-10px;left:50%;width:0;height:3px;background:linear-gradient(90deg,var(--accent-color),var(--link-color));transition:width 0.5s ease;transform:translateX(-50%);box-shadow:0 2px 4px var(--premium-glow)}.jumbotron:hover h1::after{width:60px}.jumbotron .lead{font-size:clamp(1rem, 3vw, 1.3rem);font-weight:300;line-height:1.5;margin-bottom:20px;animation:fadeInUpGlow 1s cubic-bezier(.25,.46,.45,.94) 0.3s both;text-shadow:0 1px 2px var(--premium-shadow)}@keyframes fadeInUpGlow{from{opacity:0;transform:translateY(30px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.welcome-card{background:linear-gradient(135deg,var(--card-bg),rgb(255 255 255 / .8));backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:16px;padding:clamp(20px, 5vw, 30px);margin-bottom:30px;text-align:center;position:relative;overflow:hidden;animation:pulseGlow 3s cubic-bezier(.25,.46,.45,.94) infinite;flex-shrink:0;box-shadow:0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}@keyframes pulseGlow{0%{box-shadow:0 0 0 0 var(--shadow-color),0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}70%{box-shadow:0 0 0 20px #fff0,0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}100%{box-shadow:0 0 0 0 #fff0,0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}}.welcome-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--shine-bg) 0%,transparent 70%);opacity:0;transition:opacity 0.6s;animation:rotateSlow 15s linear infinite}.welcome-card:hover::before{opacity:1}@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.welcome-card h3{color:var(--accent-color);font-size:clamp(1.5rem, 4vw, 1.75rem);margin-bottom:15px;animation:bounceInGlow 1.2s cubic-bezier(.25,.46,.45,.94);font-weight:700;text-shadow:0 2px 4px var(--premium-shadow)}@keyframes bounceInGlow{0%{transform:scale(.3);opacity:0;filter:blur(10px)}50%{transform:scale(1.05);filter:blur(0)}70%{transform:scale(.9)}100%{transform:scale(1);opacity:1}}.welcome-card p{font-size:clamp(14px, 2.5vw, 16px);line-height:1.6;animation:fadeInUpGlow 1s cubic-bezier(.25,.46,.45,.94) 0.4s both;opacity:.9;text-shadow:0 1px 2px var(--premium-shadow)}@media only screen and (max-width:768px){.btn-group{justify-content:stretch}.btn{flex:1 1 100%;min-width:auto}}@media only screen and (max-width:600px){body{padding:clamp(5px, 2vw, 10px) 0}.jumbotron{margin:clamp(20px, 5vw, 30px) 0}.jumbotron .lead{font-size:clamp(0.9rem, 3vw, 1.1rem)}.container{padding:0 clamp(5px, 2vw, 10px);gap:15px}.welcome-card{padding:clamp(15px, 4vw, 20px)}.welcome-card h3{font-size:clamp(1.25rem, 4vw, 1.5rem)}}@media (max-width:480px){.jumbotron h1{font-size:clamp(1.75rem, 7vw, 2.5rem)}.welcome-card p{font-size:clamp(13px, 2vw, 14px)}}footer{text-align:center;padding:clamp(10px, 2vw, 15px);font-size:clamp(12px, 2vw, 0.85rem);color:var(--footer-color);font-weight:600;margin-top:auto;transition:all 0.4s cubic-bezier(.25,.46,.45,.94);flex-shrink:0;text-shadow:0 1px 2px var(--premium-shadow)}footer:hover{transform:translateY(-2px);text-shadow:0 0 10px var(--glow-color)}footer a{color:inherit;transition:color 0.3s ease}footer a:hover{color:var(--accent-color)}@media (max-width:480px){footer{padding:clamp(8px, 2vw, 10px)}}.donation-card{background:linear-gradient(135deg,var(--card-bg),rgb(255 255 255 / .8));backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:16px;padding:clamp(20px, 5vw, 30px);margin-bottom:30px;text-align:center;position:relative;overflow:hidden;animation:pulseGlow 3s cubic-bezier(.25,.46,.45,.94) infinite;box-shadow:0 10px 40px var(--shadow-color),0 0 0 1px var(--premium-border)}.donation-card .bank-logo{width:120px;height:auto;margin-bottom:20px;border-radius:8px;box-shadow:0 4px 15px var(--premium-shadow)}.donation-card .detail{margin:15px 0;font-size:clamp(14px, 2vw, 16px);font-weight:500;color:var(--text-color)}.donation-card .detail strong{color:var(--accent-color)}