body { font-family: system-ui, Arial, sans-serif; background: #f6f7fb; margin:0; }
.container { max-width: 680px; margin: 0 auto; padding: 14px; }
h2 { text-align: center; margin-bottom: 8px; }
form { text-align: center; margin-bottom: 14px;}
input[type="date"] { padding: 8px 12px; border-radius: 8px; border: 1px solid #bbb; font-size: 16px; }
button { padding: 8px 26px; border-radius: 7px; border:none; background: #1b88e7; color:#fff; font-size:16px; cursor:pointer; }
.calendars { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.calendar { border-collapse: collapse; background: #fff; border-radius: 13px; box-shadow:0 2px 7px #0002; margin: 10px auto 24px auto; width: 308px; max-width: 98vw;}
.calendar th, .calendar td { width: 36px; height: 36px; text-align: center; border-radius: 7px;}
.calendar th { background: #f0eaff; color: #6247aa; }
.calendar td { border: 1px solid #f2f2f2; background: #f8f8f8; color: #888; font-weight: normal;}
.calendar td.peak { background: #ff4c4c !important; color: #fff; font-weight: bold;}
.calendar td.leap { background: #ffb7c5 !important; color: #a91b38; font-weight: bold;}
.calendar td.sunny { background: #caf8c1 !important; color: #185c1a; font-weight: bold;}
.calendar td.normal { background: #eaeaea; color: #aaa;}
.calendar td.today { border: 2.5px solid #1749e3; font-weight: bold; box-shadow: 0 0 7px #1b88e765;}
.calendar td.before { background: #ededed; color: #ccc; }
.calendar td.over { background: #f8f8f8 !important; color: #b0b0b0 !important; font-style: italic;}
.calendar td { transition: background 0.2s;}
.calendar td.over,
.calendar td.before {
    background: #f8f8f8 !important;
    color: #b0b0b0 !important;
    font-style: italic;
}

.calendar td.birthday {
    border: 2.5px solid #e67e22 !important;
    background: #fff6e6 !important;
    color: #a35200 !important;
    font-weight: bold;
    position: relative;
}
.cake-icon {
    font-size: 1em;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 1px 1px #fff6e6);
}
.month-title {text-align:center; font-weight:bold; margin:10px 0 3px 0; font-size: 1.15em;}
.state-bar {margin:12px auto 20px auto; padding:10px 18px; background:#fff5cf; color:#a86500; border-radius:10px; max-width:390px; font-size:1.08em; text-align:center; box-shadow:0 2px 7px #0001;}
.legend {display: flex; justify-content:center; align-items:flex-end; gap:20px; margin:4px auto 16px auto; flex-wrap:wrap;}
.legend > div {display: flex; flex-direction: column; align-items: center;}
.color-box {display: inline-block; width: 24px; height: 24px; border-radius: 5px; margin-bottom: 3px;}
.legend-label {font-size: 15px; margin-top: 0; color: #333;}
#backToTopBtn {
    display: none; position: fixed; bottom: 28px; right: 18px; z-index: 99;
    font-size: 26px; background: #1b88e7; color: #fff; border: none; outline: none;
    border-radius: 100px; box-shadow: 0 2px 7px #0003; padding: 10px 17px 11px 17px;
    cursor: pointer; transition: opacity 0.2s; opacity: 0.85;
}
#backToTopBtn:hover { background: #1749e3; opacity: 1; }
#wwTooltip {
    display:none; position:absolute; pointer-events:none; z-index:999;
    background: #fffbea; color: #654321; border: 1px solid #e7db9e; 
    padding: 8px 14px; border-radius: 8px; box-shadow: 0 3px 16px #0001;
    font-size: 15px; max-width: 310px; min-width: 90px;
    word-break: break-word;
}
@media (max-width:800px) {.container{max-width:99vw;padding:4px;} .calendar {width:99vw;max-width:99vw;} }
@media (max-width:700px) {.calendars{flex-direction:column;align-items:center;gap:10px;} .calendar {width:97vw;max-width:98vw;} }
.hidden {display: none;}