:root{color-scheme:light;font-family:Segoe UI,Avenir Next,sans-serif;background:radial-gradient(circle at top left,rgba(123,191,221,.35),transparent 35%),linear-gradient(180deg,#dff1fb,#eef5fb 45%,#f8fbfd);color:#17324d;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit}#root{min-height:100vh}.app-shell{min-height:100vh;padding:24px;display:flex;align-items:center;justify-content:center}.dashboard-card{width:min(1080px,100%);background:#ffffffe0;border:1px solid rgba(120,156,180,.24);box-shadow:0 28px 60px #234a6e1f;border-radius:28px;padding:28px 28px 144px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.eyebrow{color:#4e7a96;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.header-row{display:flex;gap:20px;align-items:flex-start;margin-bottom:24px}h1{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1}.subtitle{margin:10px 0 0;max-width:48rem;color:#5d7286;font-size:1rem}.summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px}.summary__metric{background:linear-gradient(180deg,#fefefe,#eef5fa);border:1px solid #d1e0ea;border-radius:24px;padding:22px 20px;box-shadow:inset 0 1px #fffc}.summary__label{display:block;color:#708499;font-size:.82rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em}.summary__value{font-size:clamp(1.4rem,2.5vw,2rem);color:#153f5c}.calendar-block{padding:20px;background:linear-gradient(180deg,#e6f0f794,#f5fafdeb);border:1px solid #dce8f0;border-radius:24px}.weekday-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-bottom:12px}.weekday-row__label{text-align:center;color:#708499;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.week-grid,.month-grid{display:grid;gap:12px}.week-grid,.month-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.day-cell{border:1px solid #d8e5ee;border-radius:22px;min-height:116px;padding:14px 12px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;background:#fff;color:#17324d;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;cursor:pointer}.day-cell:hover{transform:translateY(-1px);box-shadow:0 14px 24px #204d6d1a}.day-cell--selected{border-color:#1f6c97;box-shadow:0 0 0 2px #1f6c9726}.day-cell--month{min-height:104px}.day-cell--outside{background:#f6f9fb;color:#8ea0af}.day-cell--muted{background:repeating-linear-gradient(-45deg,#eef3f7f2,#eef3f7f2 14px,#f8fafcf2 14px,#f8fafcf2 28px);color:#8da0b1}.day-cell--tier-1{background:linear-gradient(180deg,#f8fcf3,#edf7e3)}.day-cell--tier-2{background:linear-gradient(180deg,#f6fbf0,#e4f2cf)}.day-cell--tier-3{background:linear-gradient(180deg,#fff8ec,#f8e7bb)}.day-cell--tier-4{background:linear-gradient(180deg,#fff0ea,#f6c7b5)}.day-cell__date{font-size:.95rem;font-weight:700}.day-cell__usage{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:800;line-height:1}.day-cell__unit{font-size:.78rem;color:#607588;text-transform:uppercase;letter-spacing:.08em}.bottom-tray{position:sticky;bottom:max(16px,env(safe-area-inset-bottom));margin-top:22px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);gap:14px;padding:14px;border-radius:26px;background:#184a6ce6;border:1px solid rgba(116,167,198,.28);box-shadow:0 18px 34px #11324a38;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.bottom-tray__group{background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:12px}.bottom-tray__caption{margin-bottom:10px;color:#e2f1fab8;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.bottom-period-nav{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.bottom-period-nav__button,.bottom-view-toggle__button{border:0;cursor:pointer}.bottom-period-nav__button{width:44px;height:44px;border-radius:14px;background:#f8fbfd;color:#184a6c;font-size:1.8rem;line-height:1}.bottom-period-nav__label{min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 14px;border-radius:16px;background:#f4fafdf5;color:#164868;font-weight:800;white-space:nowrap}.bottom-view-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bottom-view-toggle__button{min-height:44px;padding:10px 16px;border-radius:16px;background:#ffffff24;color:#eef8fd;font-weight:800}.bottom-view-toggle__button--active{background:linear-gradient(180deg,#fff,#e4f1f8);color:#1b5c83;box-shadow:0 10px 20px #0a1f2e2e}@media (max-width: 900px){.app-shell{padding:16px;align-items:stretch}.dashboard-card{padding:22px 22px 132px;border-radius:22px}.header-row{align-items:stretch}}@media (max-width: 720px){.dashboard-card{padding:18px 18px 156px}.calendar-block{padding:14px;overflow-x:auto}.weekday-row,.week-grid,.month-grid{min-width:620px}.day-cell{min-height:92px;border-radius:18px}.bottom-tray{grid-template-columns:1fr;bottom:max(12px,env(safe-area-inset-bottom))}}@media (max-width: 560px){.summary{grid-template-columns:1fr}h1{font-size:2rem}.dashboard-card{padding-bottom:198px}.bottom-tray{padding:12px;border-radius:22px}.bottom-tray__group{padding:10px}.bottom-period-nav__label{font-size:.95rem}}