body { background: #edf2f8; }
#idc-wallpaper { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.015); }
#idc-wallpaper::after { position: absolute; inset: 0; content: ""; background: linear-gradient(118deg, rgba(247,250,255,.75), rgba(242,247,253,.52) 54%, rgba(245,248,255,.69)); }
.dark #idc-wallpaper::after { background: linear-gradient(118deg, rgba(9,15,28,.68), rgba(9,15,28,.48) 54%, rgba(9,15,28,.68)); }
#root { position: relative; z-index: 1; min-height: 100vh; }
#root .app-shell { background: transparent !important; }
#root .header-top { border: 1px solid rgba(148,163,184,.18); border-radius: 1.1rem; padding: .65rem .9rem; background: rgba(255,255,255,.54); box-shadow: 0 8px 26px rgba(30,55,90,.06); backdrop-filter: blur(18px); }
.dark #root .header-top { border-color: rgba(148,163,184,.16); background: rgba(15,23,42,.58); }
#root .header-timer { gap: .8rem; border: 1px solid rgba(148,163,184,.22); border-radius: 1.35rem; padding: 1.15rem 1.35rem; background: rgba(255,255,255,.64); box-shadow: 0 16px 42px rgba(30,55,90,.08); backdrop-filter: blur(18px); }
.dark #root .header-timer { border-color: rgba(148,163,184,.18); background: rgba(15,23,42,.62); box-shadow: 0 16px 42px rgba(0,0,0,.16); }
#root .header-timer > p { letter-spacing: -.025em; }
#root .header-timer > div { flex-wrap: wrap; column-gap: .6rem; row-gap: .55rem; }
#root .server-overview > div, #root .server-card-list > div { border: 1px solid rgba(148,163,184,.2); background: rgba(255,255,255,.74) !important; box-shadow: 0 10px 28px rgba(30,55,90,.07); backdrop-filter: blur(16px); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.dark #root .server-overview > div, .dark #root .server-card-list > div { border-color: rgba(148,163,184,.16); background: rgba(15,23,42,.72) !important; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
#root .server-overview > div:hover, #root .server-card-list > div:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(30,55,90,.12); }
.idc-weather-strip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-left: .2rem; color: hsl(var(--foreground)); vertical-align: middle; }
 .idc-weather-date { color: hsl(var(--muted-foreground)); font-size: .8rem; font-weight: 500; white-space: nowrap; }
.idc-calendar-date { display: inline-flex; flex: 0 0 3.9rem; flex-direction: column; overflow: hidden; width: 3.9rem; border: 1px solid rgba(226,232,240,.9); border-radius: .72rem; background: rgba(255,255,255,.86); box-shadow: 0 5px 14px rgba(30,55,90,.1); text-align: center; line-height: 1; }
.idc-calendar-month { display: block; padding: .18rem .2rem .16rem; background: linear-gradient(120deg,#ef5966,#e64555); color: #fff; font-size: .55rem; font-weight: 700; letter-spacing: .035em; }
.idc-calendar-body { display: flex; min-height: 1.85rem; align-items: center; justify-content: center; gap: .28rem; padding: .15rem .15rem .18rem; }
.idc-calendar-day { color: #dc4656; font-size: 1.28rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.idc-calendar-meta { display: flex; flex-direction: column; gap: .12rem; color: #64748b; font-size: .5rem; font-weight: 600; line-height: 1.05; }
.dark .idc-calendar-date { border-color: rgba(148,163,184,.25); background: rgba(15,23,42,.86); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.dark .idc-calendar-day { color: #ff8290; }
.dark .idc-calendar-meta { color: #cbd5e1; }
.idc-daily-quote { display: grid; width: 100%; grid-template-columns: 1.6rem minmax(0,1fr); align-items: center; gap: .2rem .45rem; margin-top: .15rem; padding: .62rem .8rem; border: 1px solid rgba(148,163,184,.2); border-radius: .9rem; background: rgba(255,255,255,.4); }
.dark .idc-daily-quote { border-color: rgba(148,163,184,.16); background: rgba(15,23,42,.28); }
.idc-daily-quote-mark { grid-row: span 2; align-self: start; color: #e45b6c; font-family: Georgia,serif; font-size: 2rem; font-weight: 700; line-height: .9; }
.dark .idc-daily-quote-mark { color: #ff8290; }
.idc-daily-quote-label { color: #e45b6c; font-size: .65rem; font-weight: 700; letter-spacing: .04em; }
.dark .idc-daily-quote-label { color: #ff9aa5; }
.idc-daily-quote-text { color: hsl(var(--foreground)); font-size: .8rem; font-weight: 500; line-height: 1.55; }
.idc-weather-divider { color: hsl(var(--muted-foreground)/.65); font-size: .85rem; }
.idc-weather-card { position: relative; display: inline-flex; min-height: 2.45rem; align-items: center; gap: .55rem; overflow: hidden; border: 1px solid rgba(148,163,184,.26); border-radius: 999px; padding: .32rem .75rem .32rem .45rem; background: rgba(255,255,255,.68); box-shadow: 0 5px 16px rgba(30,55,90,.08); backdrop-filter: blur(14px); }
.dark .idc-weather-card { border-color: rgba(148,163,184,.2); background: rgba(15,23,42,.72); box-shadow: 0 5px 16px rgba(0,0,0,.14); }
.idc-weather-art { position: relative; display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg,rgba(191,219,254,.8),rgba(224,242,254,.58)); }
.dark .idc-weather-art { background: linear-gradient(145deg,rgba(59,130,246,.34),rgba(30,41,59,.78)); }
.idc-weather-icon { position: relative; z-index: 1; font-size: 1.05rem; line-height: 1; animation: idc-weather-float 3s ease-in-out infinite; }
.idc-weather-particle { position: absolute; z-index: 2; display: none; }
.weather-rain .idc-weather-particle, .weather-storm .idc-weather-particle { top: .76rem; width: 1px; height: .34rem; border-radius: 2px; background: #3b82f6; animation: idc-rain-fall .72s linear infinite; }
.weather-rain .idc-weather-particle:nth-child(2), .weather-storm .idc-weather-particle:nth-child(2) { left: .3rem; animation-delay: -.4s; }
.weather-rain .idc-weather-particle:nth-child(3), .weather-storm .idc-weather-particle:nth-child(3) { left: .72rem; animation-delay: -.15s; }
.weather-rain .idc-weather-particle:nth-child(4), .weather-storm .idc-weather-particle:nth-child(4) { left: 1.12rem; animation-delay: -.58s; }
.weather-rain .idc-weather-particle:nth-child(5), .weather-storm .idc-weather-particle:nth-child(5) { left: .52rem; animation-delay: -.3s; }
.weather-rain .idc-weather-particle:nth-child(6), .weather-storm .idc-weather-particle:nth-child(6) { left: 1.35rem; animation-delay: -.08s; }
.weather-snow .idc-weather-particle { display: block; width: 3px; height: 3px; border-radius: 50%; background: #60a5fa; animation: idc-snow-fall 1.8s ease-in-out infinite; }
.weather-snow .idc-weather-particle:nth-child(2) { left: .28rem; top: .4rem; animation-delay: -.6s; }
.weather-snow .idc-weather-particle:nth-child(3) { left: 1.2rem; top: .3rem; animation-delay: -1s; }
.weather-snow .idc-weather-particle:nth-child(4) { left: .82rem; top: .85rem; animation-delay: -.3s; }
.weather-snow .idc-weather-particle:nth-child(5) { left: .42rem; top: 1.15rem; animation-delay: -1.3s; }
.weather-snow .idc-weather-particle:nth-child(6) { left: 1.32rem; top: 1.1rem; animation-delay: -.8s; }
.weather-sunny .idc-weather-art::after { position: absolute; inset: .1rem; border: 1px solid rgba(251,191,36,.7); border-radius: 50%; content: ""; animation: idc-sun-pulse 2.8s ease-out infinite; }
.weather-cloudy .idc-weather-icon, .weather-fog .idc-weather-icon { animation: idc-cloud-drift 4s ease-in-out infinite; }
.idc-weather-info { display: flex; flex-direction: column; gap: .08rem; line-height: 1.15; white-space: nowrap; }
.idc-weather-title { color: hsl(var(--foreground)); font-size: .73rem; font-weight: 650; }
.idc-weather-detail { color: hsl(var(--muted-foreground)); font-size: .67rem; }
.idc-weather-temp { margin-left: .1rem; color: hsl(var(--foreground)); font-size: .94rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.idc-weather-locate { display: grid; width: auto; min-width: 2rem; height: 1.75rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(148,163,184,.2); border-radius: 999px; padding: 0 .35rem; background: rgba(255,255,255,.55); color: hsl(var(--muted-foreground)); font-size: .58rem; font-weight: 650; line-height: 1; cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.idc-weather-locate:hover { transform: scale(1.06); background: rgba(219,234,254,.8); color: #2563eb; }
.idc-weather-locate:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.idc-weather-locate:disabled { opacity: .5; cursor: wait; }
.dark .idc-weather-locate { border-color: rgba(148,163,184,.2); background: rgba(15,23,42,.48); color: #cbd5e1; }
.dark .idc-weather-locate:hover { background: rgba(30,58,138,.58); color: #bfdbfe; }
@keyframes idc-weather-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes idc-rain-fall { 0% { opacity: 0; transform: translateY(-3px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(5px); } }
@keyframes idc-snow-fall { 0%,100% { opacity: .25; transform: translateY(-2px) translateX(0); } 50% { opacity: 1; transform: translateY(3px) translateX(2px); } }
@keyframes idc-sun-pulse { 0% { opacity: .75; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes idc-cloud-drift { 0%,100% { transform: translateX(-1px); } 50% { transform: translateX(2px); } }
@media (max-width: 640px) { #root .header-timer { padding: .9rem; gap: .6rem; } #root .header-timer > div { column-gap: .35rem; row-gap: .35rem; } .idc-weather-strip { flex-wrap: nowrap; margin-left: 0; gap: .3rem; } .idc-weather-card { gap: .38rem; padding-right: .42rem; } .idc-weather-info { min-width: 0; } .idc-weather-title { font-size: .7rem; } .idc-weather-detail { font-size: .62rem; } .idc-weather-locate { min-width: 2rem; height: 1.55rem; padding: 0 .28rem; font-size: .56rem; } .idc-weather-divider { display: none; } .idc-calendar-date { flex-basis: 3.9rem; width: 3.9rem; } .idc-daily-quote { padding: .5rem .65rem; } }
@media (max-width: 360px) { .idc-weather-card { gap: .28rem; padding-left: .34rem; padding-right: .34rem; } .idc-weather-art { width: 1.45rem; height: 1.45rem; } .idc-weather-info { max-width: 6rem; } .idc-weather-detail { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; } .idc-weather-temp { font-size: .85rem; } .idc-weather-locate { min-width: 1.85rem; height: 1.4rem; padding: 0 .22rem; font-size: .53rem; } }
@media (prefers-reduced-motion: reduce) { .idc-weather-icon, .idc-weather-particle, .weather-sunny .idc-weather-art::after { animation: none !important; } }