.moon-page{background:linear-gradient(#0c0a1d 0%,#1a1635 50%,#0f172a 100%);min-height:100vh;padding-bottom:60px}.lunar-hero{justify-content:space-between;align-items:center;padding:60px 0;display:flex;position:relative;overflow:hidden}.stars-layer{background-image:radial-gradient(2px 2px at 10% 20%,#ffffffe6,#0000),radial-gradient(2px 2px at 30% 40%,#fff9,#0000),radial-gradient(1px 1px at 50% 30%,#ffffffb3,#0000),radial-gradient(2px 2px at 70% 60%,#ffffff80,#0000),radial-gradient(1px 1px at 90% 20%,#fffc,#0000),radial-gradient(2px 2px at 15% 80%,#fff6,#0000),radial-gradient(1px 1px at 85% 75%,#fff9,#0000);background-size:300px 300px;animation:5s ease-in-out infinite alternate twinkle;position:absolute;inset:0}@keyframes twinkle{0%{opacity:.6}to{opacity:1}}.hero-moon-glow{filter:blur(40px);background:radial-gradient(circle,#6366f133 0%,#0000 70%);border-radius:50%;width:300px;height:300px;position:absolute;top:50%;right:10%;transform:translateY(-50%)}.hero-content{z-index:1;position:relative}.hero-badge{color:#a5b4fc;background:linear-gradient(135deg,#6366f133,#8b5cf633);border:1px solid #6366f14d;border-radius:30px;align-items:center;gap:8px;margin-bottom:20px;padding:10px 20px;font-size:13px;font-weight:600;display:inline-flex}.hero-badge i{color:#818cf8}.hero-title{color:#fff;background:linear-gradient(135deg,#fff 0%,#a5b4fc 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-size:48px;font-weight:900}.hero-subtitle{color:#94a3b8;margin:0;font-size:16px}.current-moon{z-index:1;position:relative}.current-moon-card{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:28px;padding:30px 50px}.cmc-label{color:#818cf8;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px;font-size:12px;font-weight:700}.cmc-image{width:120px;height:120px;margin:0 auto 15px;position:relative}.cmc-image img{object-fit:contain;filter:drop-shadow(0 0 30px #ffffff4d);width:100%;height:100%;animation:4s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.cmc-name{color:#fff;margin-bottom:5px;font-size:20px;font-weight:800}.cmc-date{color:#64748b;font-size:14px}.phase-legend{padding:40px 0}.legend-grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.legend-item{background:#ffffff08;border:1px solid #ffffff0f;border-radius:20px;align-items:center;gap:15px;padding:20px;transition:all .3s;display:flex}.legend-item:hover{background:#ffffff0f;border-color:#6366f14d}.legend-icon{background:#6366f11a;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;font-size:36px;display:flex}.legend-name{color:#fff;margin-bottom:4px;font-size:15px;font-weight:700;display:block}.legend-desc{color:#64748b;font-size:12px;display:block}.calendar-section{padding:40px 0}.section-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.section-header h2{color:#fff;align-items:center;gap:12px;margin:0;font-size:24px;font-weight:800;display:flex}.section-header h2 i{color:#818cf8}.current-month{color:#94a3b8;font-size:15px;font-weight:600}.moon-grid{grid-template-columns:repeat(7,1fr);gap:12px;display:grid}.moon-card{text-align:center;background:#ffffff08;border:1px solid #ffffff0f;border-radius:20px;padding:16px 10px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.moon-card:hover{background:#ffffff0f;border-color:#6366f166;transform:translateY(-5px)}.moon-card.today{background:linear-gradient(135deg,#6366f133,#8b5cf61a);border-color:#6366f180;box-shadow:0 10px 40px #6366f133}.today-badge{color:#fff;background:linear-gradient(135deg,#818cf8,#6366f1);border-radius:6px;padding:4px 8px;font-size:9px;font-weight:700;position:absolute;top:8px;right:8px}.card-date{margin-bottom:12px}.day-num{color:#fff;font-size:22px;font-weight:800;line-height:1;display:block}.day-name{color:#64748b;margin-top:4px;font-size:10px;font-weight:600;display:block}.card-moon{width:50px;height:50px;margin:0 auto 12px;position:relative}.card-moon img{object-fit:contain;filter:drop-shadow(0 0 10px #fff3);width:100%;height:100%;transition:all .3s}.moon-card:hover .card-moon img{filter:drop-shadow(0 0 20px #6366f180);transform:scale(1.15)}.moon-glow{opacity:0;background:radial-gradient(circle,#ffffff1a 0%,#0000 70%);transition:opacity .3s;position:absolute;inset:-10px}.moon-card:hover .moon-glow{opacity:1}.card-phase{color:#94a3b8;font-size:10px;font-weight:600;line-height:1.3}.moon-info{padding:40px 0}.info-grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.info-card{background:#ffffff08;border:1px solid #ffffff0f;border-radius:20px;align-items:center;gap:15px;padding:20px;display:flex}.info-icon{color:#fff;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;display:flex}.info-icon.sunset{background:linear-gradient(135deg,#f43f5e,#e11d48)}.info-icon.moon{background:linear-gradient(135deg,#6366f1,#4f46e5)}.info-icon.stars{background:linear-gradient(135deg,#a855f7,#9333ea)}.info-content h4{color:#94a3b8;text-transform:uppercase;margin:0 0 5px;font-size:11px;font-weight:600}.info-content p{color:#fff;margin:0;font-size:18px;font-weight:800}.moon-tips{padding:20px 0 40px}.tips-card{background:#ffffff08;border:1px solid #ffffff0f;border-radius:28px;padding:35px}.tips-header{align-items:center;gap:12px;margin-bottom:25px;display:flex}.tips-header i{color:#fbbf24;font-size:24px}.tips-header h3{color:#fff;margin:0;font-size:20px;font-weight:800}.tips-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.tip-item{background:#ffffff05;border-radius:16px;align-items:flex-start;gap:15px;padding:20px;display:flex}.tip-icon{flex-shrink:0;font-size:28px}.tip-text strong{color:#fff;margin-bottom:5px;font-size:15px;display:block}.tip-text p{color:#94a3b8;margin:0;font-size:13px;line-height:1.5}.banner-area{margin-top:20px}@media (max-width:1200px){.moon-grid{grid-template-columns:repeat(5,1fr)}}@media (max-width:1024px){.legend-grid{grid-template-columns:repeat(2,1fr)}.moon-grid{grid-template-columns:repeat(4,1fr)}.info-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.moon-page{padding-bottom:40px}.lunar-hero{text-align:center;flex-direction:column;gap:30px;padding:40px 0}.hero-title{font-size:32px}.hero-moon-glow{display:none}.current-moon-card{padding:25px 35px}.cmc-image{width:100px;height:100px}.legend-grid{grid-template-columns:1fr}.legend-item{padding:16px}.moon-grid{grid-template-columns:repeat(3,1fr);gap:8px}.moon-card{border-radius:16px;padding:12px 8px}.day-num{font-size:18px}.card-moon{width:40px;height:40px}.card-phase{font-size:9px}.info-grid{grid-template-columns:repeat(2,1fr);gap:10px}.info-card{padding:15px}.tips-grid{grid-template-columns:1fr}.tips-card{padding:25px}}@media (max-width:480px){.moon-grid{grid-template-columns:repeat(2,1fr)}}