﻿    .week-page,
    .order-page {
      display: none;
      height: 100vh;
      padding: 18px 16px calc(78px + var(--safe-bottom));
      flex-direction: column;
    }

    .week-page.active { display: flex; }
    .order-page.active { display: flex; }
    .home-page.hidden { display: none; }

    .week-header {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      align-items: center;
      gap: 10px;
    }

    .week-title {
      min-height: 46px;
      border-radius: 999px;
      background: var(--panel);
      box-shadow: var(--shadow);
      font-weight: 900;
      text-align: center;
      padding: 0 12px;
    }

    .week-nav-button {
      height: 44px;
      border-radius: 50%;
      background: var(--panel);
      box-shadow: var(--shadow);
      font-size: 22px;
      font-weight: 900;
    }

    .calendar-card {
      margin-top: 18px;
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 16px;
      display: none;
    }
    .calendar-card.open { display: block; }

    .calendar-grid {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
    }

    .calendar-grid span,
    .calendar-grid button,
    .calendar-grid .calendar-empty {
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 800;
    }
    .calendar-grid span { color: var(--muted); }
    .calendar-grid button { background: #f4f6f1; }
    .calendar-grid button.selected { background: var(--green); color: white; }
    .calendar-grid button.today:not(.selected) {
      outline: 2px solid rgba(35, 148, 86, .24);
      background: #eef8f2;
    }
    .calendar-grid .calendar-empty { visibility: hidden; }

    .week-placeholder {
      margin-top: 16px;
      flex: 1;
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 18px;
      color: var(--muted);
      line-height: 1.6;
    }

    .stats-page {
      display: none;
      height: 100vh;
      padding: 18px 16px calc(78px + var(--safe-bottom));
      flex-direction: column;
    }

    .stats-page.active {
      display: flex;
    }

    .stats-week-header {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      align-items: center;
      gap: 10px;
    }

    .stats-main-card {
      margin-top: 18px;
      border-radius: 20px;
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 18px 14px;
      overflow: auto;
      flex: 1;
      min-height: 0;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: minmax(130px, 1fr) repeat(7, 26px);
      gap: 10px 7px;
      align-items: center;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .stats-routine-head,
    .stats-day-head {
      min-height: 24px;
      color: var(--muted);
      font-size: 15px;
      font-weight: 900;
      display: grid;
      place-items: center;
    }

    .stats-routine-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-size: 17px;
      font-weight: 800;
      line-height: 1.25;
    }

    .stats-check-cell {
      width: 26px;
      min-height: 26px;
      display: grid;
      place-items: center;
      color: #cbd2cc;
      font-size: 14px;
      font-weight: 900;
    }

    .stats-check-box {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: #edf0ee;
      display: block;
    }

    .stats-check-box.completed {
      background: var(--green);
    }

    .stats-summary {
      margin-top: 14px;
      border-top: 1px solid var(--line);
      padding-top: 14px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .stats-summary-item {
      min-height: 82px;
      border-radius: 16px;
      background: #f4f7f2;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 6px;
    }

    .stats-summary-item span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
    }

    .stats-summary-item strong {
      color: var(--text);
      font-size: 28px;
      font-weight: 950;
      line-height: 1;
    }

    body.dark-mode .stats-summary-item {
      background: #252b24;
    }


