main { max-width:1440px; }
.dashboard-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:26px 0 20px; }
.dashboard-heading h2 { font-size:20px;letter-spacing:-.025em;margin:0 0 5px; }
.dashboard-muted { color:#667b73;font-size:12px;line-height:1.6;margin:0; }
.period-control { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.period-control button { padding:8px 12px;min-height:38px; }
#historyPeriod { min-width:190px;text-align:center;font-size:14px;font-weight:650;color:#154f3e; }
.history-stats { grid-template-columns:repeat(6,minmax(0,1fr));gap:10px; }
.history-stat { background:#fff;border-top:3px solid #c5d8cf;min-width:0; }
.history-stat:first-child { background:#edf7f2;border-color:#157a5c; }
.history-stat:nth-child(2) { border-top-color:#3977bf; }
.history-stat:nth-child(3) { border-top-color:#8561c5; }
.history-stat strong { font-size:30px;margin-bottom:7px; }
.history-stat span { font-size:10px;letter-spacing:.035em; }
.dashboard-grid { display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:18px;margin:20px 0 24px; }
.chart-card { padding:22px;border:1px solid #dce7e0;border-radius:14px;background:#fff;min-width:0;overflow:hidden; }
.chart-head { display:flex;justify-content:space-between;gap:12px;align-items:flex-start; }
.chart-head h3 { margin:0 0 5px;font-size:17px;letter-spacing:-.02em; }
.chart-head .input { width:auto;max-width:190px;padding:7px 10px;font-size:12px; }
.chart-plot { position:relative;margin-top:20px; }
.monthly-chart { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;height:214px;padding:8px 4px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 43px,#eaf0ed 44px,#eaf0ed 45px);border-bottom:1px solid #dce7e0; }
.month-column { display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border:0;background:transparent;padding:0 4px;min-width:0;border-radius:7px;cursor:pointer;color:#6b7d75;font:inherit;transition:background .2s; }
.month-column:hover,.month-column:focus-visible { background:#eaf3ee;outline:2px solid #9fc6b6;outline-offset:1px; }
.month-column.is-selected { background:#eaf3ee;box-shadow:inset 0 -3px #157a5c;color:#104b38; }
.month-value { font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;height:23px; }
.month-track { height:150px;display:flex;align-items:flex-end;width:100%;max-width:32px; }
.month-bar { background:var(--chart-color);width:100%;border-radius:5px 5px 0 0;min-height:2px;opacity:.58;transition:height .4s ease,opacity .2s; }
.is-selected .month-bar,.month-column:hover .month-bar { opacity:1; }
.month-label { font-size:11px;padding:12px 0 10px; }
.chart-empty { font-size:12px;color:#718178;text-align:center;margin:10px 0 0; }
.chart-foot { display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:11px;color:#6b7d75; }
.completion { display:flex;align-items:center;gap:15px;background:#eff7f3;padding:14px;border-radius:10px;margin-bottom:18px; }
.completion strong { color:#157a5c;font-size:30px;letter-spacing:-.04em; }
.completion span { color:#526d60;font-size:11px;line-height:1.5;max-width:165px; }
.daily-chart { display:flex;align-items:flex-end;gap:3px;height:115px;margin:20px 0 22px;border-bottom:1px solid #dce7e0; }
.day-column { position:relative;flex:1;height:100%;display:flex;align-items:flex-end;outline-offset:2px;min-width:0; }
.day-bar { width:100%;border-radius:3px 3px 0 0;min-height:2px;opacity:.8;transition:height .4s; }
.day-label { position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);font-size:9px;color:#6b7d75; }
.day-tooltip { display:none;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#173e30;color:white;border-radius:5px;padding:5px 7px;font-size:10px;white-space:nowrap;z-index:2; }
.day-column:first-child .day-tooltip { left:0;transform:none; }
.day-column:last-child .day-tooltip { left:auto;right:0;transform:none; }
.day-column:hover .day-tooltip,.day-column:focus .day-tooltip { display:block; }
.history-table-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:20px 0 12px; }
.history-table-heading h2 { font-size:18px;margin:0; }
.dashboard-note { padding:12px 15px;background:#f5f8f6;border-radius:8px;font-size:11px;line-height:1.7;color:#687c71; }
#historyFeedback { min-height:20px;font-size:12px;color:#657a70;margin:8px 0 0; }
#historyFeedback.is-error { color:#a71d2a; }
#historyContent[aria-busy="true"] .dashboard-grid { opacity:.55; }
@media (max-width:1100px) { .history-stats { grid-template-columns:repeat(3,1fr); }.dashboard-grid { grid-template-columns:1fr; }.daily-chart { height:130px; }.completion span { max-width:none; } }
@media (max-width:600px) { main { padding:18px 10px 36px; }.card { padding:18px 14px; }.history-stats { grid-template-columns:repeat(2,1fr); }.chart-card { padding:16px 10px; }.chart-head { flex-wrap:wrap; }.monthly-chart { gap:2px; }.month-column { padding:0 2px; }.month-label,.month-value { font-size:10px; }.period-control { width:100%; }.dashboard-heading { gap:12px; }#historyPeriod { min-width:170px; }.chart-foot { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { .month-bar,.day-bar,.month-column { transition:none; } }