@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap);*{box-sizing:border-box;margin:0;padding:0}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f5f5f5;font-family:Arial,sans-serif;flex-direction:column}main{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;padding:20px}footer{width:100%;text-align:center;padding:15px;background:#fff;border-top:1px solid #ddd}.container{width:100%;max-width:800px;display:flex;flex-direction:column;gap:20px}.calendar{width:100%}.days-container{display:grid;grid-template-columns:repeat(7,1fr);width:100%}@media screen and (max-width:768px){main{padding:10px}}@media screen and (max-width:768px){main{padding:10px}footer{padding:10px}}.calendar{width:100%;max-width:800px;background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.1)}.header{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:#f0f0f0;margin-bottom:10px}.month-year-selector{display:flex;align-items:center;gap:10px}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;background-color:#f0f0f0;padding:10px 0}.days-container{display:grid;grid-template-columns:repeat(7,1fr);gap:0;padding:0;border:1px solid #ddd}.cell{position:relative;height:80px;padding:5px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;border-top:none;border-left:none;background:#fff;display:flex;flex-direction:column;justify-content:space-between}.cell:nth-child(7n){border-right:none}.cell:nth-last-child(-n+7){border-bottom:none}.cell .solar{font-size:1rem;position:absolute;top:5px;left:5px;z-index:2}.cell .festival{font-size:.7em;color:#e74c3c;position:absolute;font-weight:500}.cell .festival-solar{color:#e74c3c;position:absolute;top:28px;left:5px;font-weight:500;z-index:1}.cell .festival-lunar{color:#e74c3c;position:absolute;bottom:25px;right:5px;font-weight:500}.cell .has-festival{color:#e74c3c}.cell .lunar{font-size:.85rem;position:absolute;bottom:5px;right:5px}.cell.other-month .festival,.cell.other-month .lunar,.cell.other-month .solar{opacity:.5}.cell.other-month .festival{color:#ffb3b3}.cell.other-month .has-festival{color:#ffb3b3}.cell.today{background-color:#e8f4f8}.other-month{color:#aaa}select{padding:5px;font-size:1.1em}button{padding:8px 16px;font-size:1.1em;cursor:pointer}#monthDisplay{font-size:1.3em;margin:0}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1000}.modal-content{position:relative;background-color:#fff;margin:5% auto;padding:20px;width:80%;max-width:600px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}.month-grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0}.month-display,.year-display{cursor:pointer;padding:8px 15px;border:1px solid #ddd;border-radius:5px;background:#fff;font-size:1.1rem;min-width:100px;text-align:center;margin:0 5px}#monthDisplay,#yearDisplay{font-size:1.1rem;font-weight:500}.month-display:hover,.year-display:hover{background:#f0f0f0}.month-btn,.year-btn{padding:25px 16px;border:1px solid #ddd;background:#fff;cursor:pointer;border-radius:8px;font-size:16px;transition:all .3s ease;text-align:center}.month-btn:hover,.year-btn:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.1)}.month-btn.active,.year-btn.active{background:#e8f4f8;border-color:#4a90e2;font-weight:700}.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid #eee;margin-bottom:15px}.modal-title{font-size:20px;font-weight:700}.close-btn{background:0 0;border:none;font-size:1.5em;cursor:pointer;padding:5px 10px;color:#666}.close-btn:hover{color:#000}.year-grid{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0}.year-range{font-size:16px;font-weight:700}.modal-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 0;position:relative}.modal-nav button{padding:8px 15px;border:1px solid #ddd;background:#fff;cursor:pointer;border-radius:5px;z-index:1}.modal-nav button:hover{background:#f0f0f0}.year-range{font-size:1.1rem;font-weight:500;position:absolute;left:50%;transform:translateX(-50%);text-align:center;width:auto}.modal-nav button:first-child{margin-right:20px}.modal-nav button:last-child{margin-left:20px}@media screen and (max-width:768px){body{align-items:flex-start}.calendar{margin:0;border-radius:0;min-height:100vh}.header{padding:10px 5px;gap:5px}.header button{padding:8px;font-size:.9rem}.month-display,.year-display{padding:8px;min-width:80px;font-size:.9rem}.weekdays{gap:2px;padding:5px 2px}.weekdays div{padding:5px;font-size:.9rem}.days-container{display:grid;grid-template-rows:repeat(6,1fr)}.cell{height:70px}.cell .solar{font-size:.9rem;top:3px;left:3px}.cell .festival{font-size:.6rem}.cell .festival-solar{top:25px;left:3px}.cell .festival-lunar{bottom:22px;right:3px}.cell .lunar{font-size:.75rem;bottom:3px;right:3px}.modal-content{width:95%;margin:10% auto;padding:15px}.month-grid,.year-grid{gap:10px;padding:10px}.month-btn,.year-btn{padding:15px 10px;font-size:.9rem}.modal-nav{padding:10px}.modal-nav button{padding:5px 10px;font-size:.9rem}.year-range{font-size:.9rem}.modal-title{font-size:1.1rem}.close-btn{font-size:1.3rem;padding:5px}}@media screen and (max-width:380px){.calendar{font-size:14px}.header button{padding:5px;font-size:.8rem}.month-display,.year-display{padding:5px;min-width:70px;font-size:.8rem}.cell{height:60px;padding:3px}.cell .solar{font-size:.85rem;top:2px;left:2px}.cell .festival{font-size:.55rem}.cell .festival-solar{top:23px;left:2px}.cell .festival-lunar{bottom:20px;right:2px}.cell .lunar{font-size:.7rem;bottom:2px;right:2px}.month-btn,.year-btn{padding:12px 8px;font-size:.8rem}}@media screen and (max-width:768px) and (orientation:landscape){.calendar{height:100vh;display:flex;flex-direction:column}.days-container{flex:1;height:auto;border:1px solid #ddd}.cell{height:55px}.cell .festival-solar{bottom:16px}.cell .festival-lunar{bottom:2px}}@media (hover:none){.cell,.header button,.month-btn,.month-display,.year-btn,.year-display{cursor:pointer;-webkit-tap-highlight-color:transparent}.month-btn:active,.year-btn:active{background:#e8f4f8;transform:scale(.98)}}.cell.has-festival .lunar,.cell.has-festival .solar{color:#e74c3c}.cell.other-month.has-festival .lunar,.cell.other-month.has-festival .solar{color:#ffb3b3}