.analytics-page {
        height: auto;
        display: grid;
        gap: 10px;
        align-content: start;
        min-height: 100%;
      }

      .analytics-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        min-height: 0;
        align-items: start;
      }

      .class-analysis {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 12px;
        background: linear-gradient(
          160deg,
          rgba(12, 29, 58, 0.66),
          rgba(8, 20, 44, 0.68)
        );
        padding: 10px;
        display: grid;
        gap: 8px;
      }

      .class-analysis-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .class-analysis-rank {
        color: #9effb8;
        font-size: 0.66rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.3px;
      }

      .class-analysis-name {
        font-family: "Orbitron", sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.4px;
        color: #dff2ff;
      }

      .class-analysis-note {
        color: rgba(184, 208, 235, 0.82);
        font-size: 0.68rem;
        line-height: 1.35;
      }

      .class-analysis-grid {
        display: grid;
        gap: 7px;
      }

      .class-analysis-row {
        display: grid;
        gap: 3px;
        padding: 8px 9px;
        border: 1px solid rgba(103, 205, 255, 0.14);
        border-radius: 10px;
        background: rgba(7, 18, 40, 0.48);
      }

      .class-analysis-label {
        color: rgba(126, 215, 255, 0.78);
        font-size: 0.56rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.35px;
        text-transform: uppercase;
      }

      .class-analysis-value {
        margin: 0;
        color: rgba(221, 238, 255, 0.88);
        font-size: 0.64rem;
        line-height: 1.45;
      }

      .class-analysis-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .class-tag {
        border: 1px solid rgba(103, 205, 255, 0.24);
        border-radius: 999px;
        padding: 5px 8px;
        color: #bfe4ff;
        font-size: 0.62rem;
        font-family: "Orbitron", sans-serif;
        letter-spacing: 0.25px;
        background: rgba(9, 22, 47, 0.66);
      }

      .analytics-stats-grid .home-block {
        height: auto;
      }

      .analytics-stats-grid .radar-wrap {
        height: 220px;
        min-height: 220px;
      }

      @media (max-width: 900px) {
        .analytics-stats-grid {
          grid-template-columns: 1fr;
        }
      }

      .analytics-card {
        border: 1px solid rgba(103, 205, 255, 0.25);
        border-radius: 12px;
        background: linear-gradient(
          160deg,
          rgba(12, 29, 58, 0.66),
          rgba(8, 20, 44, 0.68)
        );
        padding: 10px;
        min-height: 0;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 8px;
      }

      .analytics-card:first-child {
        min-height: 220px;
      }

      .analytics-card:nth-child(2) {
        min-height: 260px;
      }

      .analytics-title {
        font-family: "Orbitron", sans-serif;
        color: var(--accent);
        font-size: 0.74rem;
        letter-spacing: 0.45px;
        text-transform: uppercase;
      }

      .analytics-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .analytics-head-stack {
        align-items: flex-start;
      }

      .analytics-head-stack > div:first-child {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .weekly-summary-meta {
        color: rgba(179, 213, 242, 0.74);
        font-size: 0.6rem;
        line-height: 1.3;
      }

      .weekly-summary-rank {
        color: #a8ffd8;
        font-family: "Orbitron", sans-serif;
        font-size: 0.56rem;
        letter-spacing: 0.3px;
        text-transform: uppercase;
      }

      .weekly-summary-note {
        color: rgba(212, 234, 255, 0.84);
        font-size: 0.64rem;
        line-height: 1.35;
      }

      .calendar-summary-meta {
        color: rgba(179, 213, 242, 0.74);
        font-size: 0.6rem;
        line-height: 1.3;
      }

      .calendar-summary-note {
        color: rgba(212, 234, 255, 0.84);
        font-size: 0.64rem;
        line-height: 1.35;
      }

      .weekly-bars {
        position: relative;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
        align-items: end;
        min-height: 170px;
        border-left: 2px solid rgba(103, 205, 255, 0.35);
        border-bottom: 2px solid rgba(103, 205, 255, 0.35);
        padding: 4px 6px 16px 8px;
        overflow: visible;
        background: linear-gradient(
          180deg,
          rgba(103, 205, 255, 0.04),
          transparent 45%
        );
      }

      .bar-wrap {
        position: relative;
        display: grid;
        grid-template-rows: 1fr;
        gap: 4px;
        min-height: 0;
        justify-items: center;
      }

      .bar-wrap.current .bar-track {
        filter: drop-shadow(0 0 10px rgba(143, 232, 255, 0.28));
      }

      .bar-wrap.current .bar-label {
        color: #dff4ff;
      }

      .bar-track {
        width: 16px;
        position: relative;
        min-height: 96px;
        height: 100%;
      }

      .bar-track.zero {
        opacity: 0.7;
      }

      .bar-fill {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0%;
        border-radius: 4px 4px 0 0;
        background: linear-gradient(180deg, #7be4ff, #2f89ff);
        box-shadow: 0 0 10px rgba(67, 217, 255, 0.42);
        transition: height 160ms ease;
      }

      .bar-label {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -13px;
        text-align: center;
        color: #b4d1ef;
        font-size: 0.64rem;
        font-family: "Orbitron", sans-serif;
      }

      .bar-top {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -100%);
        color: rgba(183, 211, 243, 0.95);
        font-size: 0.56rem;
        font-family: "Orbitron", sans-serif;
        white-space: nowrap;
        text-shadow: 0 0 6px rgba(67, 217, 255, 0.3);
      }

      .calendar-wrap {
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: 6px;
        min-height: 210px;
      }

      .calendar-controls {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
        white-space: nowrap;
      }

      .calendar-select {
        border: 1px solid rgba(103, 205, 255, 0.32);
        border-radius: 8px;
        background: rgba(10, 24, 48, 0.82);
        color: #d9ecff;
        font-family: "Orbitron", sans-serif;
        font-size: 0.64rem;
        padding: 5px 7px;
        outline: none;
        min-width: 0;
      }

      .calendar-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
      }

      .calendar-weekdays span {
        margin-top: 10px;
        text-align: center;
        color: rgba(191, 215, 242, 0.78);
        font-size: 0.6rem;
        font-family: "Orbitron", sans-serif;
      }

      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: minmax(34px, auto);
        gap: 4px;
        align-content: start;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: none;
      }

      .calendar-grid::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .calendar-day {
        border: 1px solid rgba(255, 96, 96, 0.35);
        border-radius: 8px;
        background: rgba(56, 20, 20, 0.62);
        color: #ffc1c1;
        min-height: 34px;
        font-size: 0.62rem;
        display: grid;
        place-items: center;
        font-family: "Orbitron", sans-serif;
      }

      .calendar-day.empty {
        border-color: transparent;
        background: transparent;
      }

      .calendar-day.done {
        border-color: rgba(122, 247, 107, 0.5);
        color: #d8ffd2;
        background: rgba(24, 64, 30, 0.75);
        box-shadow: 0 0 8px rgba(122, 247, 107, 0.2);
      }

      .achievements-page {
        height: auto;
        display: grid;
        grid-auto-rows: min-content;
        gap: 10px;
        min-height: 0;
      }

      @media (max-width: 640px) {
        .analytics-page {
          gap: 8px;
        }

        .analytics-card,
        .job-trial-block,
        .class-analysis,
        .analytics-stats-grid .home-block {
          padding: 8px;
        }

        .analytics-title,
        .job-trial-title,
        .block-title {
          font-size: 0.68rem;
        }

        .analytics-head,
        .job-trial-head,
        .class-analysis-head {
          gap: 8px;
        }

        .calendar-select,
        .job-trial-btn {
          font-size: 0.58rem;
        }

        .weekly-bars {
          min-height: 150px;
          padding: 2px 4px 12px 6px;
        }

        .bar-top,
        .bar-label,
        .calendar-weekdays span,
        .calendar-day,
        .job-trial-status,
        .job-trial-tier,
        .class-analysis-rank,
        .class-analysis-note,
        .class-analysis-value,
        .class-tag {
          font-size: 0.58rem;
        }

        .class-analysis-label {
          font-size: 0.52rem;
        }

        .calendar-wrap {
          min-height: 180px;
        }

        .calendar-grid {
          gap: 4px;
        }

        .calendar-day {
          min-height: 30px;
        }

        .analytics-stats-grid .radar-wrap {
          height: 190px;
          min-height: 190px;
        }

        .class-analysis-name {
          font-size: 0.78rem;
        }
      }