@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    [x-cloak] {
        display: none !important;
    }

    :root {
        --dashboard-bg: #080d0c;
        --dashboard-bg-soft: #0d1412;
        --dashboard-panel: #121918;
        --dashboard-panel-strong: #17211f;
        --dashboard-text: #edf7f2;
        --dashboard-muted: #8fa59c;
        --dashboard-line: rgba(237, 247, 242, 0.1);
        --dashboard-line-strong: rgba(237, 247, 242, 0.18);
        --dashboard-green: #57d39b;
        --dashboard-green-soft: rgba(87, 211, 155, 0.14);
        --dashboard-blue: #74b7e6;
        --dashboard-blue-soft: rgba(116, 183, 230, 0.13);
        --dashboard-amber: #d9aa55;
        --dashboard-amber-soft: rgba(217, 170, 85, 0.15);
        --dashboard-red: #e47668;
        --dashboard-red-soft: rgba(228, 118, 104, 0.15);
        --dashboard-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
        --dashboard-glow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
        --dashboard-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.035) 36%, rgba(255, 255, 255, 0.12) 68%, rgba(255, 255, 255, 0.02));
    }

    body {
        background: var(--dashboard-bg);
    }
}

@layer components {
    .app-nav {
        position: sticky;
        top: 0;
        z-index: 40;
        border-bottom: 1px solid var(--dashboard-line);
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.04)),
            rgba(8, 13, 12, 0.9);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
        backdrop-filter: blur(18px);
    }

    .app-nav__inner {
        width: min(90vw, 96rem);
        max-width: 96rem;
        margin: 0 auto;
        padding: 0;
    }

    .app-nav__logo {
        display: grid;
        place-items: center;
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid transparent;
        border-radius: 0.85rem;
        color: var(--dashboard-green);
        background:
            linear-gradient(145deg, rgba(14, 22, 20, 0.98), rgba(18, 25, 24, 0.98)) padding-box,
            var(--dashboard-edge) border-box;
        box-shadow: var(--dashboard-glow);
    }

    .app-nav__links {
        min-width: 0;
        gap: 0.35rem;
        overflow: visible;
        scrollbar-width: none;
    }

    .app-nav__links::-webkit-scrollbar {
        display: none;
    }

    .app-nav__divider {
        width: 1px;
        height: 1.35rem;
        margin: 0 0.15rem;
        background: linear-gradient(180deg, transparent, rgba(237, 247, 242, 0.2), transparent);
    }

    .app-nav__user-button,
    .app-nav__hamburger {
        border: 1px solid transparent;
        border-radius: 0.85rem;
        color: var(--dashboard-text);
        background:
            linear-gradient(145deg, rgba(18, 25, 24, 0.94), rgba(12, 18, 16, 0.94)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035)) border-box;
        transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }

    .app-nav__user-button:hover,
    .app-nav__hamburger:hover {
        border-color: var(--dashboard-line-strong);
        background:
            linear-gradient(145deg, rgba(22, 31, 28, 0.96), rgba(14, 22, 20, 0.96)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) border-box;
        transform: translateY(-1px);
    }

    .app-nav__mobile {
        border-top: 1px solid var(--dashboard-line);
        background: rgba(10, 16, 15, 0.96);
    }

    .app-nav__mobile-user {
        border-top: 1px solid var(--dashboard-line);
    }

    @media (min-width: 640px) and (max-width: 1279px) {
        .app-nav__inner {
            width: calc(100vw - 1rem);
        }

        .app-nav__brand {
            gap: 0.45rem;
        }

        .app-nav__brand-text {
            display: none;
        }

        .app-nav__links {
            gap: 0.12rem;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            padding-block: 0.35rem;
        }

        .app-nav__links a,
        .app-nav__menu-button {
            padding: 0.45rem 0.55rem;
            font-size: 0.78rem;
            line-height: 1.15;
            white-space: nowrap;
        }

        .app-nav__divider {
            margin-inline: 0;
        }

        .app-nav__user-button {
            max-width: 9rem;
        }

        .app-nav__user-button > div:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .app-dropdown-panel {
        border: 1px solid rgba(237, 247, 242, 0.18);
        border-radius: 0.95rem;
        background:
            linear-gradient(145deg, rgba(24, 34, 31, 0.99), rgba(13, 21, 19, 0.99)) padding-box,
            var(--dashboard-edge) border-box;
        box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        overflow: hidden;
    }

    .app-dropdown-heading,
    .app-nav__mobile-heading {
        padding: 0.7rem 1rem 0.25rem;
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .app-nav__mobile-heading {
        padding-inline: 1rem;
    }

    .dashboard-header {
        color: var(--dashboard-text);
    }

    .statistics-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        gap: clamp(1.5rem, 4vw, 4.5rem);
        justify-items: stretch;
        text-align: left;
    }

    .statistics-header > :first-child {
        justify-self: start;
    }

    .statistics-header .statistics-filter-bar {
        justify-self: stretch;
    }

    .dashboard-header__eyebrow,
    .dashboard-kicker {
        color: var(--dashboard-muted);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .dashboard-header__title,
    .dashboard-title {
        color: var(--dashboard-text);
        font-weight: 800;
        letter-spacing: -0.028em;
    }

    .dashboard-muted {
        color: var(--dashboard-muted);
    }

    .dashboard-page {
        position: relative;
        min-height: calc(100vh - 7rem);
        overflow: hidden;
        padding: 1.1rem;
        color: var(--dashboard-text);
        background:
            linear-gradient(115deg, transparent 0 15%, rgba(255, 255, 255, 0.045) 15.2%, transparent 15.6% 62%, rgba(255, 255, 255, 0.03) 62.2%, transparent 62.7%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 22rem),
            linear-gradient(180deg, #080d0c 0%, #0d1412 100%);
    }

    .dashboard-page::before,
    .dashboard-page::after {
        position: absolute;
        pointer-events: none;
        content: '';
        opacity: 0.75;
    }

    .dashboard-page::before {
        top: 4.8rem;
        left: -4rem;
        width: min(58rem, calc(100% + 8rem));
        height: 15rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 52% 48% 0 0;
        mask-image: linear-gradient(90deg, transparent, #000 18%, #000 76%, transparent);
        transform: rotate(-3deg);
    }

    .dashboard-page::after {
        right: -5rem;
        bottom: 3.2rem;
        width: min(48rem, calc(100% + 7rem));
        height: 13rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0 0 48% 52%;
        mask-image: linear-gradient(90deg, transparent, #000 16%, #000 72%, transparent);
        transform: rotate(4deg);
    }

    .dashboard-shell {
        position: relative;
        z-index: 1;
        width: min(90vw, 96rem);
        max-width: 96rem;
        margin: 0 auto;
    }

    .dashboard-shell::before,
    .dashboard-shell::after {
        position: absolute;
        z-index: -1;
        pointer-events: none;
        content: '';
        opacity: 0.62;
    }

    .dashboard-shell::before {
        top: 7.4rem;
        right: 4%;
        width: 18rem;
        height: 8rem;
        border: 1px solid transparent;
        border-top-color: rgba(255, 255, 255, 0.14);
        border-left-color: rgba(255, 255, 255, 0.045);
        border-radius: 58% 42% 44% 56%;
        mask-image: linear-gradient(135deg, transparent 0 14%, #000 34%, #000 74%, transparent 100%);
        transform: rotate(13deg) skewX(-6deg);
    }

    .dashboard-shell::after {
        left: 4%;
        bottom: 8rem;
        width: 20rem;
        height: 9rem;
        border: 1px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.1);
        border-right-color: rgba(255, 255, 255, 0.035);
        border-radius: 42% 58% 62% 38%;
        mask-image: linear-gradient(35deg, transparent 0 18%, #000 38%, #000 78%, transparent 100%);
        transform: rotate(-11deg) skewY(4deg);
    }

    .dashboard-grid {
        display: grid;
        gap: 0.9rem;
    }

    .dashboard-panel,
    .metric-card,
    .goal-card,
    .dashboard-hero {
        border: 1px solid transparent;
        box-shadow: var(--dashboard-shadow), var(--dashboard-glow);
    }

    .dashboard-panel,
    .metric-card,
    .goal-card {
        position: relative;
        isolation: isolate;
        border-radius: 1rem;
        background:
            linear-gradient(145deg, rgba(18, 25, 24, 0.92), rgba(13, 20, 18, 0.92)) padding-box,
            var(--dashboard-edge) border-box;
    }

    .dashboard-panel::before,
    .metric-card::before,
    .goal-card::before {
        position: absolute;
        inset: 0.35rem;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        content: '';
        box-shadow: 0.55rem 0.7rem 1.4rem rgba(0, 0, 0, 0.2);
    }

    .dashboard-panel {
        padding: 0.95rem;
    }

    .dashboard-hero {
        position: relative;
        overflow: hidden;
        border-radius: 1.25rem 1.25rem 1.05rem 1.05rem;
        padding: clamp(1rem, 1.8vw, 1.35rem);
        background:
            linear-gradient(145deg, rgba(27, 36, 33, 0.96), rgba(13, 20, 18, 0.96)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.13) 72%, rgba(255, 255, 255, 0.03)) border-box;
    }

    .dashboard-hero::before {
        position: absolute;
        inset: 0.45rem;
        border: 1px solid transparent;
        border-top-color: rgba(255, 255, 255, 0.16);
        border-left-color: rgba(255, 255, 255, 0.06);
        border-radius: 1rem 1rem 0.85rem 0.85rem;
        pointer-events: none;
        content: '';
        mask-image: linear-gradient(135deg, #000, #000 32%, transparent 72%);
    }

    .dashboard-hero::after {
        position: absolute;
        right: -0.9rem;
        bottom: -2.2rem;
        width: 18rem;
        height: 9rem;
        border: 1px solid transparent;
        border-top-color: rgba(255, 255, 255, 0.13);
        border-left-color: rgba(255, 255, 255, 0.04);
        border-radius: 58% 42% 44% 56%;
        content: '';
        mask-image: linear-gradient(115deg, transparent 0 12%, #000 34%, #000 72%, transparent 100%);
        transform: rotate(-13deg);
    }

    .dashboard-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.85rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--dashboard-line);
    }

    .module-chart-card__actions {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.45rem;
    }

    .dashboard-stat-grid {
        display: grid;
        gap: 0.65rem;
    }

    .dashboard-stat {
        position: relative;
        overflow: hidden;
        border: 1px solid transparent;
        border-radius: 0.95rem;
        padding: 0.75rem 0.8rem;
        background:
            linear-gradient(145deg, rgba(27, 36, 33, 0.84), rgba(17, 25, 23, 0.84)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)) border-box;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .dashboard-stat::before {
        position: absolute;
        inset: 0.28rem;
        border: 1px solid transparent;
        border-top-color: rgba(255, 255, 255, 0.12);
        border-left-color: rgba(255, 255, 255, 0.045);
        border-radius: 0.78rem;
        pointer-events: none;
        content: '';
        mask-image: linear-gradient(135deg, #000, #000 22%, transparent 68%);
    }

    .dashboard-stat::after {
        position: absolute;
        top: -2.4rem;
        right: -1.4rem;
        width: 8.5rem;
        height: 4.5rem;
        border: 1px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.12);
        border-left-color: rgba(255, 255, 255, 0.035);
        border-radius: 0 0 58% 42%;
        content: '';
        transform: rotate(-13deg);
    }

    .dashboard-stat__label,
    .metric-card__label {
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .dashboard-stat__value,
    .metric-card__value {
        margin-top: 0.45rem;
        color: var(--dashboard-text);
        font-size: clamp(1.35rem, 2.4vw, 1.72rem);
        font-weight: 850;
        line-height: 1;
        letter-spacing: -0.038em;
    }

    .dashboard-stat__meta,
    .metric-card__meta {
        color: var(--dashboard-muted);
        font-size: 0.78rem;
        font-weight: 600;
    }

    .dashboard-action-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.58rem;
    }

    .dashboard-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.35rem;
        border-radius: 0.78rem;
        padding: 0.58rem 0.85rem;
        font-size: 0.82rem;
        font-weight: 750;
        transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    }

    .dashboard-action:hover {
        transform: translateY(-1px);
    }

    .dashboard-action--primary {
        color: #06100d;
        background: linear-gradient(135deg, #69dca9, var(--dashboard-green));
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .dashboard-action--secondary {
        border: 1px solid transparent;
        color: var(--dashboard-text);
        background:
            linear-gradient(145deg, rgba(18, 25, 24, 0.88), rgba(11, 17, 16, 0.88)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)) border-box;
    }

    .metric-card {
        position: relative;
        overflow: hidden;
        min-height: 5.9rem;
        padding: 0.78rem 0.9rem;
    }

    .metric-card > * {
        position: relative;
        z-index: 1;
    }

    .metric-card::before {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 0;
        width: 0.2rem;
        content: '';
        background: var(--metric-accent, var(--dashboard-green));
        box-shadow: none;
    }

    .metric-card::after {
        position: absolute;
        right: -1.6rem;
        top: -2rem;
        width: 9rem;
        height: 5.4rem;
        border: 1px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.12);
        border-left-color: rgba(255, 255, 255, 0.04);
        border-radius: 0 0 58% 42%;
        content: '';
        mask-image: linear-gradient(115deg, transparent 0 8%, #000 35%, #000 82%, transparent 100%);
        transform: rotate(-15deg);
    }

    .metric-card--green {
        --metric-accent: var(--dashboard-green);
        border-radius: 1rem 1.25rem 1rem 1.25rem;
    }

    .metric-card--blue {
        --metric-accent: var(--dashboard-blue);
        border-radius: 1.25rem 1rem 1.25rem 1rem;
    }

    .metric-card--amber {
        --metric-accent: var(--dashboard-amber);
        border-radius: 1rem 1.25rem 1.25rem 1rem;
    }

    .metric-card--red {
        --metric-accent: var(--dashboard-red);
    }

    .metric-card--best {
        --metric-accent: #f5c85b;
        border-color: rgba(245, 200, 91, 0.42);
        background:
            linear-gradient(145deg, rgba(43, 34, 15, 0.92), rgba(19, 21, 17, 0.92)) padding-box,
            linear-gradient(135deg, rgba(245, 200, 91, 0.72), rgba(255, 255, 255, 0.05) 42%, rgba(245, 200, 91, 0.3)) border-box;
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(245, 200, 91, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .metric-card--record {
        animation: metric-record-pop 900ms ease-out both;
    }

    .metric-card--historical-record {
        --metric-accent: #f5c85b;
        border-color: rgba(245, 200, 91, 0.58);
        background:
            linear-gradient(145deg, rgba(43, 34, 15, 0.76), rgba(17, 20, 17, 0.92)) padding-box,
            linear-gradient(135deg, rgba(245, 200, 91, 0.72), rgba(255, 255, 255, 0.05) 46%, rgba(245, 200, 91, 0.28)) border-box;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 200, 91, 0.08);
    }

    .metric-card--period-record {
        --metric-accent: #c9d2d8;
        border-color: rgba(201, 210, 216, 0.48);
        background:
            linear-gradient(145deg, rgba(37, 43, 44, 0.72), rgba(17, 20, 19, 0.92)) padding-box,
            linear-gradient(135deg, rgba(201, 210, 216, 0.58), rgba(255, 255, 255, 0.05) 46%, rgba(201, 210, 216, 0.22)) border-box;
    }

    .metric-card__value-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.7rem;
        min-width: 0;
        margin-top: 0.55rem;
    }

    .metric-card__value-row .metric-card__value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .trend-badge {
        --trend-color: #c8d2d7;
        display: inline-flex;
        align-items: center;
        gap: 0.36rem;
        flex: 0 0 auto;
        width: fit-content;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 0.2rem 0.5rem;
        color: var(--trend-color) !important;
        font-size: 0.88rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .trend-badge strong {
        display: inline-flex;
        align-items: center;
        gap: 0.24rem;
        color: inherit !important;
        font-weight: 900;
    }

    .trend-badge__icon {
        color: inherit !important;
        font-size: 1.08rem;
        font-weight: 950;
        line-height: 1;
    }

    .trend-badge__label {
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 650;
    }

    .trend-badge--positive {
        border-color: rgba(87, 211, 155, 0.42);
        color: var(--trend-color) !important;
        background: rgba(87, 211, 155, 0.16);
    }

    .trend-badge--negative {
        border-color: rgba(228, 118, 104, 0.44);
        color: var(--trend-color) !important;
        background: rgba(228, 118, 104, 0.17);
    }

    .trend-badge--neutral {
        border-color: rgba(185, 199, 204, 0.34);
        color: var(--trend-color) !important;
        background: rgba(185, 199, 204, 0.12);
    }

    .metric-card__record-label {
        color: #f5c85b;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    @keyframes metric-record-pop {
        0% {
            transform: scale(0.98);
            box-shadow: 0 0 0 rgba(245, 200, 91, 0);
        }
        38% {
            transform: scale(1.02);
            box-shadow: 0 0 0 0.45rem rgba(245, 200, 91, 0.16), 0 22px 48px rgba(0, 0, 0, 0.36);
        }
        100% {
            transform: scale(1);
        }
    }

    .dashboard-progress {
        height: 0.42rem;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(237, 247, 242, 0.1);
    }

    .dashboard-progress__fill {
        height: 100%;
        border-radius: inherit;
        background: var(--progress-accent, var(--dashboard-green));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    .dashboard-progress__fill--green {
        --progress-accent: var(--dashboard-green);
    }

    .dashboard-progress__fill--blue {
        --progress-accent: var(--dashboard-blue);
    }

    .dashboard-progress__fill--amber {
        --progress-accent: var(--dashboard-amber);
    }

    .dashboard-progress__fill--red {
        --progress-accent: var(--dashboard-red);
    }

    .dashboard-pill,
    .goal-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 0.28rem 0.54rem;
        font-size: 0.65rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .dashboard-pill--green,
    .goal-badge--completed {
        border-color: rgba(87, 211, 155, 0.18);
        color: var(--dashboard-green);
        background: var(--dashboard-green-soft);
    }

    .dashboard-pill--blue {
        border-color: rgba(116, 183, 230, 0.18);
        color: var(--dashboard-blue);
        background: var(--dashboard-blue-soft);
    }

    .dashboard-pill--amber,
    .goal-badge--pending {
        border-color: rgba(217, 170, 85, 0.2);
        color: var(--dashboard-amber);
        background: var(--dashboard-amber-soft);
    }

    .dashboard-pill--red {
        border-color: rgba(228, 118, 104, 0.2);
        color: var(--dashboard-red);
        background: var(--dashboard-red-soft);
    }

    .activity-history-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
    }

    .activity-history-chip {
        display: inline-flex;
        align-items: center;
        min-height: 1.62rem;
        border: 1px solid rgba(237, 247, 242, 0.1);
        border-radius: 999px;
        padding: 0.28rem 0.55rem;
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        line-height: 1;
        text-transform: uppercase;
        background: rgba(255, 255, 255, 0.035);
    }

    .activity-history-side {
        display: grid;
        flex: 0 0 auto;
        justify-items: end;
        gap: 0.48rem;
        margin-left: auto;
    }

    .activity-history-score {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 3.15rem;
        aspect-ratio: 1;
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 50%, rgba(18, 25, 24, 0.96) 0 58%, transparent 59%),
            conic-gradient(var(--dashboard-green) var(--state-percent), rgba(255, 255, 255, 0.11) 0);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.22);
    }

    .activity-history-score::before {
        position: absolute;
        inset: 0.3rem;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: inherit;
        content: '';
    }

    .activity-history-score strong {
        color: var(--dashboard-text);
        font-size: 1rem;
        font-weight: 900;
        line-height: 0.9;
    }

    .activity-history-score span {
        margin-top: -0.52rem;
        color: var(--dashboard-muted);
        font-size: 0.5rem;
        font-weight: 850;
    }

    .goal-badge--failed {
        border-color: rgba(228, 118, 104, 0.2);
        color: var(--dashboard-red);
        background: var(--dashboard-red-soft);
    }

    .goal-card {
        position: relative;
        overflow: hidden;
        padding: 0.78rem;
        border-radius: 0.9rem 1.05rem 0.9rem 1.05rem;
    }

    .goal-card > * {
        position: relative;
        z-index: 1;
    }

    .goal-card::after {
        position: absolute;
        top: -2rem;
        right: -1rem;
        width: 8rem;
        height: 4.2rem;
        border: 1px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.1);
        border-left-color: rgba(255, 255, 255, 0.035);
        border-radius: 0 0 56% 44%;
        pointer-events: none;
        content: '';
        transform: rotate(-12deg);
    }

    .dashboard-empty {
        border: 1px dashed var(--dashboard-line-strong);
        border-radius: 0.9rem;
        padding: 0.82rem;
        color: var(--dashboard-muted);
        background: rgba(237, 247, 242, 0.035);
    }

    .dashboard-list {
        display: grid;
        gap: 0.62rem;
    }

    .dashboard-list-item {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        border: 1px solid transparent;
        border-radius: 0.9rem 1.05rem 0.9rem 1.05rem;
        padding: 0.74rem;
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.04), rgba(237, 247, 242, 0.025)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)) border-box;
    }

    .dashboard-list-item::after {
        position: absolute;
        right: -0.9rem;
        top: -1.6rem;
        width: 7.4rem;
        height: 3.8rem;
        border: 1px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.08);
        border-left-color: rgba(255, 255, 255, 0.025);
        border-radius: 0 0 58% 42%;
        pointer-events: none;
        content: '';
        transform: rotate(-14deg);
    }

    @media (min-width: 768px) {
        .dashboard-stat-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

@layer components {
    .app-nav__menu-button {
        border: 1px solid transparent;
        border-radius: 999px;
        color: var(--dashboard-muted);
        background: transparent;
        transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }

    .app-nav__menu-button:hover,
    .app-nav__menu-button--active {
        border-color: var(--dashboard-line);
        color: var(--dashboard-text);
        background: rgba(255, 255, 255, 0.04);
        transform: translateY(-1px);
    }

    .app-nav__menu-button--active {
        border-color: rgba(87, 211, 155, 0.18);
        color: var(--dashboard-green);
        background: var(--dashboard-green-soft);
    }

    .app-modal-card {
        border: 1px solid transparent;
        border-radius: 1.15rem;
        background:
            linear-gradient(145deg, rgba(18, 25, 24, 0.98), rgba(9, 14, 13, 0.98)) padding-box,
            var(--dashboard-edge) border-box;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .dashboard-overview-grid {
        display: grid;
        gap: 0.9rem;
    }

    .dashboard-quick-panel,
    .dashboard-goal-summary {
        min-height: 100%;
    }

    .dashboard-action-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .dashboard-action-stack .dashboard-action {
        min-height: 4.1rem;
        border-radius: 1rem;
        padding: 0.7rem 0.65rem;
        text-align: center;
        line-height: 1.15;
    }

    .dashboard-day-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
    }

    .dashboard-day-heading__actions {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem;
    }

    .dashboard-date-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 1.55rem;
        border: 1px solid rgba(87, 211, 155, 0.22);
        border-radius: 999px;
        padding: 0.18rem 0.5rem;
        color: var(--dashboard-green);
        font-size: 0.66rem;
        font-weight: 850;
        line-height: 1;
        background: var(--dashboard-green-soft);
        transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    }

    .dashboard-date-chip:hover {
        border-color: rgba(87, 211, 155, 0.38);
        background: rgba(87, 211, 155, 0.2);
        transform: translateY(-1px);
    }

    .dashboard-date-chip--muted {
        border-color: var(--dashboard-line);
        color: var(--dashboard-muted);
        background: rgba(255, 255, 255, 0.04);
    }

    .dashboard-date-chip--muted:hover {
        border-color: var(--dashboard-line-strong);
        background: rgba(255, 255, 255, 0.08);
    }

    .dashboard-day-panel {
        position: relative;
        overflow: hidden;
        border-radius: 1.2rem;
        padding: clamp(1.1rem, 2vw, 1.55rem);
        background:
            radial-gradient(circle at 14% 6%, rgba(255, 255, 255, 0.08), transparent 24%),
            linear-gradient(145deg, rgba(22, 31, 28, 0.9), rgba(10, 16, 15, 0.9));
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045);
        isolation: isolate;
    }

    .dashboard-day-panel::before,
    .dashboard-day-panel::after {
        position: absolute;
        z-index: -1;
        pointer-events: none;
        content: '';
    }

    .dashboard-day-panel::before {
        right: -3rem;
        top: -2.3rem;
        width: 18rem;
        height: 10rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0 0 58% 42%;
        mask-image: linear-gradient(100deg, transparent 0 14%, #000 36%, #000 72%, transparent 100%);
        transform: rotate(-13deg);
    }

    .dashboard-day-panel::after {
        left: -2.8rem;
        bottom: -2.9rem;
        width: 14rem;
        height: 8rem;
        border-top: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 58% 42% 0 0;
        mask-image: linear-gradient(90deg, transparent 0 16%, #000 38%, #000 72%, transparent 100%);
        transform: rotate(9deg);
    }

    .dashboard-day-panel__time {
        display: inline-flex;
        align-items: baseline;
        gap: 0.65rem;
        border-radius: 999px;
        padding: 0.44rem 0.72rem;
        color: var(--dashboard-muted);
        background: rgba(255, 255, 255, 0.045);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    .dashboard-day-panel__time span {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .dashboard-day-panel__time strong {
        color: var(--dashboard-text);
        font-size: 1.05rem;
        font-weight: 850;
        letter-spacing: -0.03em;
    }

    .dashboard-list-item--compact {
        font-size: 0.85rem;
        font-weight: 750;
    }

    .dashboard-list-item--compact strong {
        color: var(--dashboard-muted);
        font-size: 0.78rem;
    }

    .dashboard-objective-columns {
        display: grid;
        gap: 1rem;
    }

    .module-page {
        padding-top: 1.25rem;
    }

    .module-grid {
        display: grid;
        gap: 1rem;
    }

    .module-focus-card {
        min-height: 16rem;
    }

    .module-main-value {
        color: var(--dashboard-text);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 850;
        line-height: 0.95;
        letter-spacing: -0.055em;
    }

    .module-form-grid {
        display: grid;
        gap: 0.85rem;
    }

    .statistics-filter-bar {
        display: grid;
        grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1fr) minmax(8rem, 0.55fr) auto;
        align-items: end;
        gap: 0.75rem;
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .statistics-filter-bar__field {
        display: flex;
        flex-direction: column;
        gap: 0.36rem;
        min-width: 0;
    }

    .statistics-filter-bar__field > span {
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .statistics-filter-bar .module-input {
        min-height: 2.4rem;
        border-radius: 0.66rem;
        padding: 0.5rem 0.64rem;
        font-size: 0.9rem;
        background: rgba(255, 255, 255, 0.06);
    }

    .statistics-filter-bar .module-input:disabled {
        cursor: not-allowed;
        opacity: 0.62;
    }

    .statistics-filter-bar__actions {
        display: inline-flex;
        justify-content: flex-end;
        gap: 0.5rem;
        white-space: nowrap;
    }

    .statistics-filter-bar__actions .dashboard-action {
        min-height: 2.4rem;
        padding-block: 0.5rem;
    }

    @media (max-width: 980px) {
        .statistics-header {
            align-items: start;
            grid-template-columns: minmax(0, 1fr);
        }

        .statistics-filter-bar {
            justify-self: center;
            width: min(100%, 72rem);
            max-width: 100%;
        }
    }

    @media (max-width: 900px) {
        .statistics-filter-bar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .statistics-filter-bar__field--period,
        .statistics-filter-bar__actions {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .statistics-filter-bar {
            grid-template-columns: minmax(0, 1fr);
        }

        .statistics-filter-bar__actions {
            justify-content: stretch;
        }

        .statistics-filter-bar__actions .dashboard-action {
            flex: 1 1 0;
            justify-content: center;
        }
    }

    .module-field {
        display: flex;
        flex-direction: column;
        gap: 0.42rem;
    }

    .module-field > span,
    .module-check > span {
        color: var(--dashboard-muted);
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .module-input {
        width: 100%;
        border: 1px solid rgba(237, 247, 242, 0.12);
        border-radius: 0.82rem;
        padding: 0.72rem 0.78rem;
        color: var(--dashboard-text);
        background: rgba(255, 255, 255, 0.045);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    }

    .module-input:focus {
        border-color: rgba(87, 211, 155, 0.48);
        outline: none;
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 0 0 3px rgba(87, 211, 155, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }

    .module-input::placeholder {
        color: rgba(143, 165, 156, 0.72);
    }

    .module-input option {
        color: #101715;
    }

    select.module-input {
        appearance: none;
        padding-right: 2.7rem;
        background-image: linear-gradient(45deg, transparent 50%, var(--dashboard-muted) 50%), linear-gradient(135deg, var(--dashboard-muted) 50%, transparent 50%);
        background-position: calc(100% - 1.08rem) 52%, calc(100% - 0.76rem) 52%;
        background-repeat: no-repeat;
        background-size: 0.34rem 0.34rem, 0.34rem 0.34rem;
    }

    .module-field-error {
        color: var(--dashboard-red);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .module-form-alert {
        border: 1px solid rgba(228, 118, 104, 0.24);
        border-radius: 0.85rem;
        padding: 0.75rem 0.85rem;
        color: #ffd9d4;
        font-size: 0.86rem;
        font-weight: 800;
        background: var(--dashboard-red-soft);
    }

    .module-check {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 2.5rem;
    }

    .module-check input {
        width: 1rem;
        height: 1rem;
        border-radius: 0.25rem;
        accent-color: var(--dashboard-green);
    }

    .module-checkbox-row {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 2.7rem;
        color: var(--dashboard-text);
        font-weight: 700;
    }

    .module-checkbox-row input {
        width: 1rem;
        height: 1rem;
        border-radius: 0.25rem;
        accent-color: var(--dashboard-green);
    }

    .module-form-actions,
    .module-modal__actions,
    .module-inline-links,
    .module-actions-cell {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.65rem;
    }

    .module-form-actions,
    .module-modal__actions {
        justify-content: flex-end;
    }

    .module-modal {
        padding: 1rem;
        color: var(--dashboard-text);
    }

    .module-modal__header {
        padding-bottom: 0.85rem;
        border-bottom: 1px solid var(--dashboard-line);
    }

    .module-modal__actions {
        margin-top: 1rem;
        padding-top: 0.9rem;
        border-top: 1px solid var(--dashboard-line);
    }

    .module-table-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .module-table {
        width: 100%;
        min-width: 760px;
        border-collapse: separate;
        border-spacing: 0 0.5rem;
    }

    .module-table th {
        padding: 0 0.75rem 0.25rem;
        color: var(--dashboard-muted);
        font-size: 0.7rem;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-align: left;
        text-transform: uppercase;
    }

    .module-table td {
        padding: 0.75rem;
        color: var(--dashboard-text);
        font-size: 0.88rem;
        font-weight: 650;
        background: rgba(255, 255, 255, 0.035);
        border-top: 1px solid rgba(255, 255, 255, 0.055);
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    }

    .module-table td:first-child {
        border-left: 1px solid rgba(255, 255, 255, 0.055);
        border-radius: 0.75rem 0 0 0.75rem;
    }

    .module-table td:last-child {
        border-right: 1px solid rgba(255, 255, 255, 0.055);
        border-radius: 0 0.75rem 0.75rem 0;
    }

    .module-link {
        color: var(--dashboard-green);
        font-size: 0.82rem;
        font-weight: 800;
        transition: color 140ms ease;
    }

    .module-link:hover {
        color: var(--dashboard-text);
    }

    .module-link--danger {
        color: var(--dashboard-red);
    }

    .module-edit-panel {
        max-width: 48rem;
        margin: 0 auto;
    }

    .chart-placeholder__surface {
        display: grid;
        min-height: 12rem;
        place-items: center;
        border: 1px dashed var(--dashboard-line-strong);
        border-radius: 0.95rem;
        color: var(--dashboard-muted);
        font-size: 0.86rem;
        font-weight: 750;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 36%),
            rgba(255, 255, 255, 0.025);
    }

    @media (min-width: 640px) {
        .module-form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .dashboard-overview-grid {
            grid-template-columns: minmax(13rem, 0.75fr) minmax(24rem, 1.55fr) minmax(16rem, 1fr);
        }

        .dashboard-objective-columns,
        .module-grid--main {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@layer components {
    @media (min-width: 768px) {
        .dashboard-day-panel .dashboard-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@layer components {
    .dashboard-reference-grid {
        display: grid;
        gap: 1rem;
    }

    .dashboard-reference-actions,
    .dashboard-reference-day,
    .dashboard-reference-summary,
    .dashboard-reference-history,
    .dashboard-reference-main,
    .dashboard-reference-week,
    .dashboard-reference-month {
        min-width: 0;
    }

    .dashboard-reference-actions {
        grid-area: actions;
        align-self: start;
    }

    .dashboard-reference-day {
        grid-area: day;
    }

    .dashboard-reference-summary {
        grid-area: summary;
        align-self: start;
    }

    .dashboard-reference-history {
        grid-area: history;
        min-height: 30rem;
    }

    .dashboard-reference-main {
        grid-area: main;
        min-width: 0;
    }

    .dashboard-reference-week {
        grid-area: week;
        min-height: 26rem;
    }

    .dashboard-reference-month {
        grid-area: month;
        min-height: 10rem;
    }

    .dashboard-day-banner {
        display: grid;
        place-items: center;
        min-height: 4.55rem;
        border: 1px solid transparent;
        border-radius: 0.95rem;
        text-align: center;
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.055), rgba(237, 247, 242, 0.025)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.035)) border-box;
    }

    .dashboard-day-banner h1 {
        margin-top: 0.25rem;
        color: var(--dashboard-text);
        font-size: clamp(1.35rem, 2vw, 2rem);
        font-weight: 850;
        line-height: 1;
        letter-spacing: -0.045em;
    }

    .dashboard-day-stats {
        display: grid;
        gap: 0.8rem;
        margin-top: 0.8rem;
    }

    .dashboard-reference-metrics {
        display: grid;
        gap: 1rem;
    }

    .dashboard-reference-metrics .metric-card {
        min-height: 8.45rem;
    }

    .dashboard-list--columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .module-chart-grid {
        display: grid;
        gap: 1rem;
        width: 100%;
    }

    .module-chart-grid--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .module-chart-grid--focus {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
        align-items: stretch;
    }

    .statistics-page-stack,
    .statistics-section {
        display: grid;
        gap: 1rem;
    }

    .statistics-page-stack {
        gap: 1.35rem;
    }

    .statistics-section-title {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--dashboard-line);
        padding-bottom: 0.72rem;
    }

    .module-chart-card {
        width: 100%;
        min-height: 18rem;
    }

    .module-stat-card {
        align-self: start;
        width: 100%;
        min-height: 0;
    }

    .module-chart-period-input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .module-chart-dataset {
        display: none;
    }

    .module-chart-period-input[id$="-week"]:checked ~ .dashboard-section-header .module-chart-toggle__button--week,
    .module-chart-period-input[id$="-month"]:checked ~ .dashboard-section-header .module-chart-toggle__button--month {
        color: var(--dashboard-text);
        background: rgba(255, 255, 255, 0.1);
    }

    .module-chart-period-input[id$="-week"]:checked ~ .module-chart-datasets .module-chart-dataset--week,
    .module-chart-period-input[id$="-month"]:checked ~ .module-chart-datasets .module-chart-dataset--month {
        display: block;
    }

    .module-chart-toggle {
        display: inline-flex;
        gap: 0.25rem;
        border: 1px solid var(--dashboard-line);
        border-radius: 999px;
        padding: 0.2rem;
        background: rgba(255, 255, 255, 0.04);
    }

    .module-chart-toggle__button {
        border-radius: 999px;
        padding: 0.3rem 0.55rem;
        color: var(--dashboard-muted);
        font-size: 0.72rem;
        font-weight: 850;
        transition: color 140ms ease, background 140ms ease;
    }

    .module-chart {
        position: relative;
        overflow: visible;
        border: 1px solid var(--dashboard-line);
        border-radius: 1rem;
        padding: 0.68rem;
        color: var(--dashboard-green);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.014)),
            rgba(7, 13, 12, 0.62);
    }

    .module-chart--blue {
        color: var(--dashboard-blue);
    }

    .module-chart--amber {
        color: var(--dashboard-amber);
    }

    .module-chart--red {
        color: var(--dashboard-red);
    }

    .stats-horizontal-bars {
        display: grid;
        gap: 0.78rem;
    }

    .stats-horizontal-bar {
        display: grid;
        gap: 0.38rem;
        min-width: 0;
    }

    .stats-horizontal-bar__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 0.8rem;
        color: var(--dashboard-text);
        font-size: 0.88rem;
        font-weight: 800;
    }

    .stats-horizontal-bar__head span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stats-horizontal-bar__head strong {
        color: var(--dashboard-muted);
        font-size: 0.8rem;
        font-weight: 850;
    }

    .stats-horizontal-bar__track {
        overflow: hidden;
        height: 0.64rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.065);
    }

    .stats-horizontal-bar__track span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(87, 211, 155, 0.95), rgba(98, 166, 255, 0.88));
        box-shadow: 0 0 18px rgba(87, 211, 155, 0.18);
    }

    .stats-horizontal-bars--blue .stats-horizontal-bar__track span {
        background: linear-gradient(90deg, rgba(116, 183, 230, 0.95), rgba(87, 211, 155, 0.78));
    }

    .stats-horizontal-bars--amber .stats-horizontal-bar__track span {
        background: linear-gradient(90deg, rgba(217, 170, 85, 0.95), rgba(245, 200, 91, 0.82));
    }

    .stats-horizontal-bars--red .stats-horizontal-bar__track span {
        background: linear-gradient(90deg, rgba(228, 118, 104, 0.95), rgba(217, 170, 85, 0.78));
    }

    .stacked-day-chart {
        position: relative;
        min-height: 19rem;
        padding: 0.25rem 0 2.05rem 3.45rem;
    }

    .stacked-day-chart svg {
        display: block;
        width: 100%;
        height: 16rem;
        overflow: visible;
    }

    .stacked-day-chart__zero {
        fill: rgba(237, 247, 242, 0.16);
        stroke: rgba(237, 247, 242, 0.18);
    }

    .stacked-day-chart__y-axis,
    .stacked-day-chart__x-axis {
        position: absolute;
        pointer-events: none;
        color: var(--dashboard-muted);
        font-size: 0.65rem;
        font-weight: 800;
    }

    .stacked-day-chart__y-axis {
        inset: 0 auto 2.05rem 0;
        width: 3rem;
    }

    .stacked-day-chart__y-axis span {
        position: absolute;
        right: 0;
        transform: translateY(-50%);
        white-space: nowrap;
    }

    .stacked-day-chart__x-axis {
        right: 0;
        bottom: 0;
        left: 3.45rem;
        height: 1.7rem;
    }

    .stacked-day-chart__x-axis span {
        position: absolute;
        top: 0.35rem;
        transform: translateX(-50%);
        text-align: center;
        white-space: nowrap;
    }

    .module-chart--sleep-dual {
        color: var(--dashboard-blue);
    }

    .module-chart-frame {
        display: grid;
        grid-template-columns: 3.35rem minmax(0, 1fr);
        grid-template-rows: 11rem auto;
        column-gap: 0.55rem;
        row-gap: 0.42rem;
        min-width: 0;
    }

    .module-chart-y-axis {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        min-width: 0;
        padding: 0.15rem 0 0.15rem;
        color: rgba(190, 211, 202, 0.72);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .module-chart-canvas {
        position: relative;
        min-width: 0;
        height: 11rem;
        overflow: visible;
        border-radius: 0.8rem;
    }

    .module-chart-canvas::before {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: '';
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 24%),
            linear-gradient(180deg, color-mix(in srgb, currentColor 8%, transparent), transparent 76%);
        opacity: 0.46;
    }

    .module-chart-x-axis {
        grid-column: 2;
        position: relative;
        min-width: 0;
        height: 1.1rem;
        color: rgba(190, 211, 202, 0.76);
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1;
    }

    .module-chart-x-axis span {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .module-chart-x-axis span[hidden] {
        display: none;
    }

    .module-chart-x-axis span:first-child {
        transform: translateX(0);
    }

    .module-chart-x-axis span:last-child {
        transform: translateX(-100%);
    }

    .module-chart-dots {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .module-chart-dot {
        position: absolute;
        z-index: 4;
        width: 2rem;
        height: 2rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        pointer-events: auto;
        transform: translate(-50%, -50%);
    }

    .module-chart-dot::before {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.001);
        content: '';
    }

    .module-chart-dot::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.38rem;
        height: 0.38rem;
        border: 1.5px solid rgba(8, 13, 12, 0.92);
        border-radius: 999px;
        background: currentColor;
        box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent), 0 0.15rem 0.42rem rgba(0, 0, 0, 0.28);
        content: '';
        transform: translate(-50%, -50%);
        transition: width 120ms ease, height 120ms ease, box-shadow 120ms ease;
    }

    .module-chart-dot--zero::after {
        width: 0.25rem;
        height: 0.25rem;
        border-width: 1px;
        opacity: 0.82;
    }

    .module-chart-dot--active {
        z-index: 7;
        opacity: 1;
    }

    .module-chart-dot--active::after {
        width: 0.68rem;
        height: 0.68rem;
        box-shadow: 0 0 0 0.26rem color-mix(in srgb, currentColor 18%, transparent), 0 0.35rem 0.8rem rgba(0, 0, 0, 0.36);
    }

    .module-chart-dot--sleep::after {
        background: var(--dashboard-blue);
        box-shadow: 0 0 0 1px rgba(116, 183, 230, 0.42), 0 0.2rem 0.55rem rgba(0, 0, 0, 0.34);
    }

    .module-chart-dot--nap::after {
        background: var(--dashboard-amber);
        box-shadow: 0 0 0 1px rgba(217, 170, 85, 0.42), 0 0.2rem 0.55rem rgba(0, 0, 0, 0.34);
    }

    .module-chart-dot--series::after {
        background: var(--chart-series-color);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-series-color) 44%, transparent), 0 0.2rem 0.55rem rgba(0, 0, 0, 0.34);
    }

    .module-chart svg {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        filter: drop-shadow(0 0.45rem 0.85rem rgba(0, 0, 0, 0.2));
    }

    .module-chart-grid-line {
        stroke: rgba(237, 247, 242, 0.065);
        stroke-width: 0.6;
    }

    .module-chart-axis-line {
        stroke: rgba(237, 247, 242, 0.16);
        stroke-width: 0.75;
    }

    .module-chart-average-line {
        stroke: currentColor;
        stroke-dasharray: 3 3;
        stroke-opacity: 0.42;
        stroke-width: 0.9;
    }

    .module-chart-active-line {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 3;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(237, 247, 242, 0.24) 18%, rgba(237, 247, 242, 0.24) 82%, transparent);
        pointer-events: none;
        transform: translateX(-50%);
    }

    .module-chart-tooltip {
        position: fixed;
        z-index: 9999;
        display: grid;
        gap: 0.18rem;
        max-width: min(15rem, calc(100vw - 1.25rem));
        border: 1px solid rgba(237, 247, 242, 0.22);
        border-radius: 0.55rem;
        padding: 0.48rem 0.58rem;
        color: var(--dashboard-text);
        background: rgba(12, 18, 16, 0.98);
        box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        font-size: 0.72rem;
        font-weight: 750;
        line-height: 1.15;
        pointer-events: none;
        transform: translateZ(0);
    }

    .module-chart-tooltip::before,
    .module-chart-tooltip::after {
        position: absolute;
        left: var(--chart-tooltip-arrow-left, 50%);
        width: 0;
        height: 0;
        pointer-events: none;
        content: '';
        transform: translateX(-50%);
    }

    .module-chart-tooltip[data-placement="top"]::before {
        bottom: -0.48rem;
        border-top: 0.48rem solid rgba(237, 247, 242, 0.22);
        border-right: 0.48rem solid transparent;
        border-left: 0.48rem solid transparent;
    }

    .module-chart-tooltip[data-placement="top"]::after {
        bottom: -0.4rem;
        border-top: 0.42rem solid rgba(12, 18, 16, 0.98);
        border-right: 0.42rem solid transparent;
        border-left: 0.42rem solid transparent;
    }

    .module-chart-tooltip[data-placement="bottom"]::before {
        top: -0.48rem;
        border-right: 0.48rem solid transparent;
        border-bottom: 0.48rem solid rgba(237, 247, 242, 0.22);
        border-left: 0.48rem solid transparent;
    }

    .module-chart-tooltip[data-placement="bottom"]::after {
        top: -0.4rem;
        border-right: 0.42rem solid transparent;
        border-bottom: 0.42rem solid rgba(12, 18, 16, 0.98);
        border-left: 0.42rem solid transparent;
    }

    .module-chart-tooltip[hidden],
    .module-chart-active-line[hidden] {
        display: none;
    }

    .module-chart-tooltip__series,
    .module-chart-tooltip__date {
        overflow-wrap: anywhere;
    }

    .module-chart-tooltip__series {
        color: currentColor;
        font-size: 0.65rem;
        text-transform: uppercase;
    }

    .module-chart-tooltip__date {
        color: var(--dashboard-muted);
    }

    .module-chart-tooltip strong {
        color: var(--dashboard-text);
        font-size: 0.9rem;
    }

    .module-chart-target-line {
        stroke: #7dffc2;
        stroke-dasharray: 5 3;
        stroke-opacity: 0.72;
        stroke-width: 1;
    }

    .module-chart-target-line--limit {
        stroke: #ff9b8f;
        stroke-opacity: 0.68;
    }

    .module-chart-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.7rem;
        color: var(--dashboard-muted);
        font-size: 0.78rem;
        font-weight: 750;
    }

    .module-chart-meta--targets {
        justify-content: flex-start;
        font-size: 0.72rem;
    }

    .sleep-stack-chart {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(1.6rem, 1fr);
        gap: 0.42rem;
        align-items: end;
        overflow-x: auto;
        min-height: 13.5rem;
        border: 1px solid var(--dashboard-line);
        border-radius: 1rem;
        padding: 1rem 0.8rem 0.75rem;
        background: rgba(255, 255, 255, 0.035);
    }

    .sleep-stack-chart__day {
        display: grid;
        grid-template-rows: minmax(9.2rem, 1fr) auto;
        gap: 0.45rem;
        min-width: 1.6rem;
    }

    .sleep-stack-chart__bar {
        display: flex;
        flex-direction: column;
        justify-content: end;
        overflow: hidden;
        border: 1px solid rgba(237, 247, 242, 0.08);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
    }

    .sleep-stack-chart__segment {
        display: block;
        width: 100%;
    }

    .sleep-stack-chart__segment--sleep {
        background: linear-gradient(180deg, var(--dashboard-blue), rgba(116, 183, 230, 0.58));
    }

    .sleep-stack-chart__segment--nap {
        background: linear-gradient(180deg, var(--dashboard-amber), rgba(217, 170, 85, 0.62));
    }

    .sleep-stack-chart__label {
        color: var(--dashboard-muted);
        font-size: 0.62rem;
        font-weight: 800;
        text-align: center;
        white-space: nowrap;
    }

    .chart-dot {
        display: inline-block;
        width: 0.55rem;
        height: 0.55rem;
        margin-right: 0.35rem;
        border-radius: 999px;
        vertical-align: middle;
    }

    .chart-dot--sleep {
        background: var(--dashboard-blue);
    }

    .chart-dot--nap {
        background: var(--dashboard-amber);
    }

    .activity-dashboard-grid,
    .activity-side-stack {
        display: grid;
        gap: 1rem;
        align-items: start;
    }

    .statistics-history-layout {
        display: grid;
        gap: 1rem;
        align-items: start;
    }

    .activity-history-panel {
        min-height: 100%;
    }

    .statistics-history-list {
        gap: 0.82rem;
    }

    .statistics-history-item {
        align-items: flex-start;
        border-color: rgba(237, 247, 242, 0.11);
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.045), rgba(237, 247, 242, 0.025)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.026)) border-box;
    }

    .statistics-history-main {
        min-width: 0;
    }

    @media (min-width: 768px) {
        .dashboard-day-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dashboard-reference-metrics {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }

        .dashboard-reference-metrics .metric-card {
            grid-column: span 2;
        }

        .dashboard-reference-metrics .metric-card--wide {
            grid-column: span 3;
            min-height: 9.35rem;
        }

        .dashboard-reference-metrics--compact .metric-card,
        .dashboard-reference-metrics--compact .metric-card--wide {
            grid-column: span 2;
            min-height: 7.25rem;
        }

        .module-chart-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .module-chart-grid--single {
            grid-template-columns: minmax(0, 1fr);
        }

        .module-chart-grid--single > * {
            grid-column: 1 / -1;
        }
    }

    @media (min-width: 1024px) {
        .dashboard-reference-metrics--compact .metric-card,
        .dashboard-reference-metrics--compact .metric-card--wide {
            grid-column: span 1;
            min-height: 6.95rem;
        }

        .metric-card--compact {
            padding: 0.78rem 0.85rem;
        }

        .metric-card--compact .metric-card__value {
            font-size: clamp(1.08rem, 1.6vw, 1.34rem);
        }

        .metric-card--compact .metric-card__meta {
            font-size: 0.72rem;
        }

        .activity-dashboard-grid {
            grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
        }

        .statistics-history-layout {
            grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
        }
    }

    @media (min-width: 1180px) {
        .dashboard-reference-grid {
            grid-template-columns: minmax(12rem, 0.72fr) minmax(0, 2.65fr) minmax(13rem, 0.78fr);
            grid-template-areas:
                'actions day summary'
                'history main week'
                'history month week';
            align-items: stretch;
        }

        .dashboard-reference-history,
        .dashboard-reference-week {
            height: 100%;
        }
    }

    @media (max-width: 1179px) {
        .dashboard-reference-grid {
            grid-template-areas:
                'actions'
                'day'
                'summary'
                'main'
                'history'
                'week'
                'month';
        }
    }
}

@layer components {
    .dashboard-command-grid,
    .module-command-grid,
    .module-content-grid,
    .module-management-grid,
    .module-edit-grid,
    .dashboard-workspace-grid {
        display: grid;
        gap: 1rem;
    }

    .dashboard-command-main,
    .module-command-main,
    .module-command-side,
    .module-management-form,
    .module-management-list,
    .module-edit-context,
    .module-form-panel {
        min-width: 0;
    }

    .dashboard-command-main,
    .module-command-main {
        position: relative;
        overflow: hidden;
    }

    .dashboard-command-title {
        color: var(--dashboard-text);
        font-size: clamp(1.7rem, 3.2vw, 3.35rem);
        font-weight: 850;
        line-height: 0.98;
        letter-spacing: -0.055em;
    }

    .dashboard-command-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
        align-items: end;
        margin-top: 1rem;
    }

    .dashboard-score-row {
        position: relative;
        z-index: 1;
        display: block;
        padding-right: 4.8rem;
    }

    .dashboard-score-row form {
        position: absolute;
        top: 0;
        right: 0;
    }

    .dashboard-stat--score {
        grid-column: span 1;
    }

    .score-explain-card {
        display: grid;
        align-content: start;
        gap: 0.85rem;
    }

    .scores-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .score-reward-card {
        --score-accent: var(--dashboard-green);
        --score-progress: 0%;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: grid;
        gap: 1.15rem;
        min-width: 0;
        border: 1px solid transparent;
        border-radius: 1.35rem;
        padding: clamp(1rem, 2.2vw, 1.6rem);
        background:
            linear-gradient(145deg, rgba(19, 29, 26, 0.97), rgba(10, 16, 15, 0.98)) padding-box,
            linear-gradient(135deg, color-mix(in srgb, var(--score-accent) 64%, transparent), rgba(255, 255, 255, 0.08) 48%, color-mix(in srgb, var(--score-accent) 22%, transparent)) border-box;
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 36px color-mix(in srgb, var(--score-accent) 9%, transparent);
    }

    .score-reward-card > *:not(.score-reward-card__flare) {
        position: relative;
        z-index: 1;
    }

    .score-reward-card__flare {
        position: absolute;
        z-index: 0;
        top: -8rem;
        right: -6rem;
        width: 24rem;
        height: 24rem;
        border-radius: 999px;
        background: radial-gradient(circle, color-mix(in srgb, var(--score-accent) 24%, transparent), transparent 66%);
        filter: blur(3px);
        pointer-events: none;
    }

    .score-reward-card__header,
    .score-reward-card__body {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .score-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        width: fit-content;
        margin-top: 0.55rem;
        border: 1px solid color-mix(in srgb, var(--score-accent) 42%, transparent);
        border-radius: 999px;
        padding: 0.34rem 0.65rem;
        color: var(--score-accent);
        background: color-mix(in srgb, var(--score-accent) 13%, transparent);
        font-size: 0.7rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        animation: score-badge-pop 600ms cubic-bezier(.2, .9, .25, 1.2) both;
    }

    .score-status-badge__spark {
        font-size: 1rem;
    }

    .score-reward-card__body {
        align-items: end;
    }

    .score-reward-card__score {
        display: flex;
        align-items: baseline;
        gap: 0.45rem;
        min-width: 0;
        font-variant-numeric: tabular-nums;
    }

    .score-reward-card__score strong {
        color: var(--score-accent);
        font-size: clamp(3.4rem, 8vw, 7.1rem);
        font-weight: 900;
        line-height: 0.8;
        letter-spacing: -0.075em;
        text-shadow: 0 0 28px color-mix(in srgb, var(--score-accent) 26%, transparent);
        animation: score-number-in 720ms cubic-bezier(.2, .8, .2, 1) both;
    }

    .score-reward-card__score span {
        color: var(--dashboard-muted);
        font-size: clamp(0.8rem, 1.8vw, 1.1rem);
        font-weight: 800;
        white-space: nowrap;
    }

    .score-reward-card__copy {
        max-width: 21rem;
        text-align: right;
    }

    .score-reward-card__copy h2 {
        color: var(--dashboard-text);
        font-size: clamp(1.15rem, 2.4vw, 1.7rem);
        font-weight: 880;
        line-height: 1;
        letter-spacing: -0.035em;
    }

    .score-reward-card__copy p {
        margin-top: 0.45rem;
        color: var(--dashboard-muted);
        font-size: 0.82rem;
        font-weight: 650;
        line-height: 1.45;
    }

    .score-ladder {
        padding-top: 0.3rem;
    }

    .score-ladder__track {
        position: relative;
        height: 0.72rem;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
    }

    .score-ladder__fill {
        width: var(--score-progress);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, color-mix(in srgb, var(--score-accent) 65%, #fff), var(--score-accent));
        box-shadow: 0 0 18px color-mix(in srgb, var(--score-accent) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.36);
        animation: score-progress-in 950ms cubic-bezier(.2, .8, .2, 1) both;
    }

    .score-ladder__marker {
        position: absolute;
        top: 50%;
        width: 0.82rem;
        height: 0.82rem;
        border: 2px solid #25302d;
        border-radius: 999px;
        background: #65706c;
        transform: translate(-50%, -50%);
    }

    .score-ladder__marker--reached {
        border-color: color-mix(in srgb, var(--score-accent) 35%, #101715);
        background: var(--score-accent);
        box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--score-accent) 14%, transparent), 0 0 14px color-mix(in srgb, var(--score-accent) 52%, transparent);
    }

    .score-ladder__labels {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 0.45rem;
        color: var(--dashboard-muted);
        font-size: 0.63rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .score-ladder__labels span {
        text-align: right;
    }

    .score-ladder__labels .is-reached {
        color: var(--score-accent);
    }

    .score-reward-card__comparisons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .score-reward-card__comparisons > div {
        display: grid;
        gap: 0.25rem;
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 0.82rem;
        padding: 0.65rem 0.72rem;
        background: rgba(255, 255, 255, 0.025);
    }

    .score-reward-card__comparisons span {
        color: var(--dashboard-muted);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .score-reward-card__comparisons strong {
        color: var(--dashboard-text);
        font-size: 0.82rem;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    .score-reward-card__comparisons .is-positive {
        color: var(--dashboard-green);
    }

    .score-reward-card__comparisons .is-negative {
        color: var(--dashboard-red);
    }

    .score-reward-card__achievements {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .score-reward-card__achievements span {
        border: 1px solid color-mix(in srgb, var(--score-accent) 24%, transparent);
        border-radius: 999px;
        padding: 0.3rem 0.55rem;
        color: color-mix(in srgb, var(--score-accent) 88%, white);
        background: color-mix(in srgb, var(--score-accent) 9%, transparent);
        font-size: 0.65rem;
        font-weight: 800;
    }

    .score-reward-card--record {
        animation: score-record-glow 2.8s ease-in-out infinite;
    }

    .score-reward-card--compact {
        gap: 0.8rem;
        padding: 0.9rem;
        border-radius: 1rem;
    }

    .score-reward-card--compact .score-reward-card__score strong {
        font-size: clamp(2.8rem, 6vw, 4.4rem);
    }

    .score-reward-card--compact .score-reward-card__copy {
        max-width: 18rem;
    }

    .score-reward-card--compact .score-reward-card__copy p {
        font-size: 0.75rem;
    }

    .dashboard-score-reward {
        grid-column: 1 / -1;
    }

    .score-explain-insight {
        border: 1px solid rgba(87, 211, 155, 0.2);
        border-radius: 0.8rem;
        padding: 0.7rem;
        color: #a8e8cb;
        background: rgba(87, 211, 155, 0.08);
        font-size: 0.78rem;
        font-weight: 750;
        line-height: 1.4;
    }

    .score-formula {
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.015em;
        text-align: center;
    }

    .score-coefficient--bonus strong {
        color: var(--dashboard-green);
    }

    .score-coefficient--malus strong {
        color: var(--dashboard-red);
    }

    .score-coefficient--neutral strong {
        color: var(--dashboard-muted);
    }

    .metric-card__heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .metric-card__micro-badge {
        border: 1px solid color-mix(in srgb, var(--metric-accent) 28%, transparent);
        border-radius: 999px;
        padding: 0.2rem 0.4rem;
        color: var(--metric-accent);
        background: color-mix(in srgb, var(--metric-accent) 10%, transparent);
        font-size: 0.57rem;
        font-weight: 850;
        white-space: nowrap;
    }

    @keyframes score-progress-in {
        from { width: 0; }
    }

    @keyframes score-number-in {
        from { opacity: 0; transform: translateY(0.35rem) scale(0.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes score-badge-pop {
        from { opacity: 0; transform: scale(0.82); }
        to { opacity: 1; transform: scale(1); }
    }

    @keyframes score-record-glow {
        0%, 100% { box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38), 0 0 28px color-mix(in srgb, var(--score-accent) 10%, transparent); }
        50% { box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38), 0 0 46px color-mix(in srgb, var(--score-accent) 21%, transparent); }
    }

    @media (max-width: 720px) {
        .scores-toolbar,
        .score-reward-card__body {
            align-items: stretch;
            flex-direction: column;
        }

        .score-reward-card__copy {
            max-width: none;
            text-align: left;
        }

        .score-reward-card__comparisons {
            grid-template-columns: 1fr;
        }

        .score-reward-card--compact .score-reward-card__comparisons {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 520px) {
        .score-reward-card--compact .score-reward-card__comparisons {
            grid-template-columns: 1fr;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .score-reward-card,
        .score-status-badge,
        .score-reward-card__score strong,
        .score-ladder__fill {
            animation: none !important;
        }
    }

    .score-explain-total {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.8rem;
        border-bottom: 1px solid var(--dashboard-line);
        padding-bottom: 0.8rem;
    }

    .score-explain-total span,
    .score-explain-item span,
    .score-coefficient-list span {
        color: var(--dashboard-muted);
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1.15;
    }

    .score-explain-total span,
    .score-explain-item span {
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .score-explain-total strong {
        color: var(--dashboard-amber);
        font-size: 1.85rem;
        font-weight: 850;
        line-height: 0.95;
        letter-spacing: -0.04em;
    }

    .dashboard-stat--score .dashboard-stat__value,
    .scores-metric-grid .metric-card--green .metric-card__value {
        color: var(--dashboard-green);
    }

    .scores-metric-grid .metric-card--blue .metric-card__value {
        color: var(--dashboard-blue);
    }

    .scores-metric-grid .metric-card--amber .metric-card__value {
        color: var(--dashboard-amber);
    }

    .scores-metric-grid .metric-card--red .metric-card__value {
        color: var(--dashboard-red);
    }

    .score-explain-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .score-explain-item {
        display: grid;
        gap: 0.32rem;
        border: 1px solid rgba(237, 247, 242, 0.08);
        border-radius: 0.8rem;
        padding: 0.65rem;
        background: rgba(255, 255, 255, 0.035);
        min-width: 0;
    }

    .score-explain-item strong {
        color: var(--dashboard-text);
        font-size: 1rem;
        font-weight: 850;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .score-explain-item--green {
        border-color: rgba(87, 211, 155, 0.2);
    }

    .score-explain-item--green strong {
        color: var(--dashboard-green);
    }

    .score-explain-item--blue {
        border-color: rgba(116, 183, 230, 0.2);
    }

    .score-explain-item--blue strong {
        color: var(--dashboard-blue);
    }

    .score-explain-item--red {
        border-color: rgba(228, 118, 104, 0.2);
    }

    .score-explain-item--red strong {
        color: var(--dashboard-red);
    }

    .score-coefficient-list {
        display: grid;
        gap: 0.45rem;
    }

    .score-coefficient-list div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.8rem;
        border-top: 1px solid rgba(237, 247, 242, 0.07);
        padding-top: 0.45rem;
    }

    .score-coefficient-list div:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .score-coefficient-list strong {
        color: var(--dashboard-text);
        font-variant-numeric: tabular-nums;
        font-size: 0.9rem;
        font-weight: 850;
        white-space: nowrap;
    }

    .score-summary-card {
        --score-accent: var(--dashboard-green);
        --score-progress: 0%;
        display: grid;
        gap: 1rem;
        min-width: 0;
        border-color: color-mix(in srgb, var(--score-accent) 28%, transparent);
        background:
            radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--score-accent) 9%, transparent), transparent 30%),
            linear-gradient(145deg, rgba(18, 27, 24, 0.98), rgba(11, 17, 16, 0.98));
        box-shadow: var(--dashboard-glow), var(--dashboard-shadow);
    }

    .score-summary-card::before {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 0;
        width: 0.22rem;
        border-radius: 1rem 0 0 1rem;
        pointer-events: none;
        content: '';
        background: var(--score-accent);
    }

    .score-summary-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .score-summary-card__value,
    .dashboard-score-compact__value {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
        margin-top: 0.5rem;
        font-variant-numeric: tabular-nums;
    }

    .score-summary-card__value strong {
        color: var(--score-accent);
        font-size: clamp(3.1rem, 6vw, 5rem);
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: -0.065em;
    }

    .score-summary-card__value small {
        margin-left: -0.32rem;
        color: color-mix(in srgb, var(--score-accent) 78%, var(--dashboard-text));
        font-size: clamp(1.55rem, 3vw, 2.4rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.05em;
    }

    .score-summary-card__value span,
    .dashboard-score-compact__value span {
        color: var(--dashboard-muted);
        font-size: 0.75rem;
        font-weight: 800;
    }

    .score-summary-card__badges,
    .dashboard-score-compact__badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.4rem;
    }

    .score-status-badge,
    .score-record-badge,
    .score-overflow-badge,
    .score-target-badge {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        margin: 0;
        border: 1px solid color-mix(in srgb, var(--score-accent) 34%, transparent);
        border-radius: 999px;
        padding: 0.25rem 0.5rem;
        color: var(--score-accent);
        background: color-mix(in srgb, var(--score-accent) 10%, transparent);
        font-size: 0.62rem;
        font-weight: 850;
        letter-spacing: 0.02em;
        animation: none;
        white-space: nowrap;
    }

    .score-record-badge--gold {
        border-color: rgba(245, 200, 91, 0.4);
        color: #f5c85b;
        background: rgba(245, 200, 91, 0.1);
    }

    .score-target-badge {
        border-color: var(--dashboard-line-strong);
        color: var(--dashboard-muted);
        background: rgba(255, 255, 255, 0.035);
    }

    .score-record-badge--silver {
        border-color: rgba(201, 210, 216, 0.38);
        color: #d5dde1;
        background: rgba(201, 210, 216, 0.09);
    }

    .score-overflow-badge {
        border-color: rgba(198, 156, 255, 0.38);
        color: #c69cff;
        background: rgba(198, 156, 255, 0.1);
    }

    .score-summary-progress {
        position: relative;
        height: 0.72rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        background: rgba(237, 247, 242, 0.12);
    }

    .score-summary-progress__fill,
    .dashboard-score-compact__fill {
        width: var(--score-progress);
        height: 100%;
        border-radius: inherit;
        background: var(--score-accent);
        box-shadow: 0 0 12px color-mix(in srgb, var(--score-accent) 28%, transparent);
    }

    .score-summary-progress__fill {
        position: relative;
        min-width: 0.2rem;
        background: linear-gradient(90deg, color-mix(in srgb, var(--score-accent) 72%, #fff), var(--score-accent));
    }

    .score-summary-progress__fill span {
        position: absolute;
        top: 50%;
        right: 0;
        width: 0.55rem;
        height: 0.55rem;
        border: 2px solid rgba(8, 13, 12, 0.78);
        border-radius: 999px;
        background: #fff;
        transform: translate(35%, -50%);
    }

    .score-summary-progress > i {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
        width: 1px;
        background: rgba(8, 13, 12, 0.42);
    }

    .score-summary-gauge {
        display: grid;
        gap: 0.38rem;
    }

    .score-summary-gauge__header,
    .score-summary-gauge__scale {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--dashboard-muted);
        font-size: 0.61rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .score-summary-gauge__header {
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .score-summary-gauge__header strong {
        color: var(--score-accent);
        font-size: 0.72rem;
    }

    .score-summary-gauge__scale span:not(:first-child):not(:last-child) {
        transform: translateX(0.15rem);
    }

    .score-summary-card__indicators {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .score-summary-card__indicators > div {
        --indicator-accent: #aab8b2;
        --indicator-bg: rgba(255, 255, 255, 0.025);
        display: grid;
        gap: 0.25rem;
        min-width: 0;
        min-height: 4.2rem;
        border: 1px solid color-mix(in srgb, var(--indicator-accent) 21%, transparent);
        border-left: 0.2rem solid var(--indicator-accent);
        border-radius: 0.72rem;
        padding: 0.65rem 0.7rem;
        background: var(--indicator-bg);
    }

    .score-indicator--positive {
        --indicator-accent: var(--dashboard-green) !important;
        --indicator-bg: rgba(87, 211, 155, 0.055) !important;
    }

    .score-indicator--negative {
        --indicator-accent: var(--dashboard-red) !important;
        --indicator-bg: rgba(228, 118, 104, 0.055) !important;
    }

    .score-indicator--info {
        --indicator-accent: var(--dashboard-blue) !important;
        --indicator-bg: rgba(116, 183, 230, 0.055) !important;
    }

    .score-indicator--record {
        --indicator-accent: #b8c2c8 !important;
        --indicator-bg: rgba(201, 210, 216, 0.045) !important;
    }

    .score-indicator--gold {
        --indicator-accent: #f5c85b !important;
        --indicator-bg: rgba(245, 200, 91, 0.06) !important;
    }

    .score-summary-card__indicators span,
    .score-calculation-list span,
    .score-calculation-detail-row span {
        color: var(--dashboard-muted);
        font-size: 0.66rem;
        font-weight: 750;
    }

    .score-summary-card__indicators strong {
        overflow-wrap: anywhere;
        color: var(--indicator-accent);
        font-size: 0.88rem;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    .score-summary-primary-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border: 1px solid var(--dashboard-line);
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.018);
    }

    .score-primary-stat {
        --stat-accent: #b7c2bd;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-width: 0;
        padding: 0.85rem;
        border-left: 1px solid var(--dashboard-line);
    }

    .score-primary-stat:first-child {
        border-left: 0;
    }

    .score-primary-stat > b {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        border: 1px solid color-mix(in srgb, var(--stat-accent) 32%, transparent);
        border-radius: 0.65rem;
        color: var(--stat-accent);
        background: color-mix(in srgb, var(--stat-accent) 8%, transparent);
        font-size: 1rem;
        font-weight: 900;
    }

    .score-primary-stat > div {
        display: grid;
        gap: 0.2rem;
        min-width: 0;
    }

    .score-primary-stat strong {
        color: var(--stat-accent);
        font-size: 0.95rem;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        white-space: nowrap;
    }

    .score-primary-stat strong small {
        margin-left: 0.14rem;
        color: var(--dashboard-muted);
        font-size: 0.68rem;
    }

    .score-primary-stat span {
        overflow: hidden;
        color: var(--dashboard-muted);
        font-size: 0.62rem;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .score-primary-stat--positive {
        --stat-accent: var(--dashboard-green);
    }

    .score-primary-stat--negative {
        --stat-accent: var(--dashboard-red);
    }

    .score-primary-stat--info {
        --stat-accent: var(--dashboard-blue);
    }

    .score-summary-secondary-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.15rem;
        border-top: 1px solid var(--dashboard-line);
        padding-top: 0.8rem;
    }

    .score-summary-secondary-stats > div {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
    }

    .score-summary-secondary-stats i {
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 999px;
        background: #b8c2c8;
    }

    .score-summary-secondary-stats .is-gold { background: #f5c85b; }
    .score-summary-secondary-stats .is-green { background: var(--dashboard-green); }
    .score-summary-secondary-stats .is-blue { background: var(--dashboard-blue); }

    .score-summary-secondary-stats span {
        color: var(--dashboard-muted);
        font-size: 0.63rem;
        font-weight: 750;
    }

    .score-summary-secondary-stats strong {
        color: var(--dashboard-text);
        font-size: 0.7rem;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    .score-overview-card {
        --score-accent: var(--dashboard-green);
        --score-progress: 0%;
        display: grid;
        gap: 1.1rem;
        min-width: 0;
        border-color: color-mix(in srgb, var(--score-accent) 20%, transparent);
        background:
            linear-gradient(145deg, rgba(18, 25, 24, 0.94), rgba(13, 20, 18, 0.94)) padding-box,
            var(--dashboard-edge) border-box;
    }

    .score-overview-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .score-overview-card__score {
        display: flex;
        align-items: baseline;
        gap: 0.45rem;
        margin-top: 0.5rem;
    }

    .score-overview-card__score strong {
        color: var(--score-accent);
        font-size: clamp(2.5rem, 5vw, 3.8rem);
        font-weight: 880;
        font-variant-numeric: tabular-nums;
        line-height: 0.9;
        letter-spacing: -0.055em;
    }

    .score-overview-card__score span {
        color: var(--dashboard-muted);
        font-size: 0.7rem;
        font-weight: 750;
    }

    .score-overview-progress {
        display: grid;
        gap: 0.45rem;
    }

    .score-overview-progress__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        color: var(--dashboard-muted);
        font-size: 0.64rem;
        font-weight: 750;
    }

    .score-overview-progress__meta strong {
        color: var(--dashboard-text);
        font-size: 0.68rem;
        font-variant-numeric: tabular-nums;
    }

    .score-overview-progress__track {
        height: 0.56rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 999px;
        background: rgba(237, 247, 242, 0.11);
    }

    .score-overview-progress__track > div {
        width: var(--score-progress);
        min-width: 0.18rem;
        height: 100%;
        border-radius: inherit;
        background: var(--score-accent);
    }

    .score-overview-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .score-overview-stat {
        --overview-stat-accent: var(--dashboard-blue);
        display: grid;
        gap: 0.32rem;
        min-width: 0;
        min-height: 7.2rem;
        border: 1px solid color-mix(in srgb, var(--overview-stat-accent) 22%, transparent);
        border-left: 0.2rem solid var(--overview-stat-accent);
        border-radius: 0.82rem;
        padding: 0.75rem 0.8rem;
        background: color-mix(in srgb, var(--overview-stat-accent) 4%, rgba(255, 255, 255, 0.018));
    }

    .score-overview-stat:first-child {
        border-left: 0.2rem solid var(--overview-stat-accent);
        padding-left: 0.8rem;
    }

    .score-overview-stat:last-child {
        padding-right: 0.8rem;
    }

    .score-overview-stat > span {
        color: var(--dashboard-muted);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .score-overview-stat > strong {
        overflow-wrap: anywhere;
        color: var(--overview-stat-accent);
        font-size: clamp(1.05rem, 2vw, 1.35rem);
        font-weight: 880;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    .score-overview-stat > strong em {
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-style: normal;
        font-weight: 750;
    }

    .score-overview-stat > small {
        overflow: hidden;
        color: var(--dashboard-muted);
        font-size: 0.62rem;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .score-overview-stat > b {
        align-self: end;
        width: fit-content;
        border-radius: 999px;
        padding: 0.2rem 0.42rem;
        color: #b8c4bf;
        background: rgba(255, 255, 255, 0.045);
        font-size: 0.59rem;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    .score-overview-stat > b.is-positive {
        color: var(--dashboard-green);
        background: var(--dashboard-green-soft);
    }

    .score-overview-stat > b.is-negative {
        color: var(--dashboard-red);
        background: var(--dashboard-red-soft);
    }

    .score-overview-stat--rank {
        --overview-stat-accent: var(--dashboard-green);
    }

    .score-overview-stat--silver {
        --overview-stat-accent: #c9d2d8;
    }

    .score-overview-stat--gold {
        --overview-stat-accent: #e8bd58;
    }

    .score-calculation-details-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.15rem;
        border: 1px solid var(--dashboard-line-strong);
        border-radius: 0.7rem;
        padding: 0.45rem 0.7rem;
        color: var(--dashboard-text);
        background: rgba(255, 255, 255, 0.035);
        font-size: 0.68rem;
        font-weight: 800;
        transition: border-color 140ms ease, background 140ms ease;
    }

    .score-calculation-details-button:hover {
        border-color: rgba(87, 211, 155, 0.32);
        background: rgba(87, 211, 155, 0.07);
    }

    .score-calculation-modal {
        max-height: min(82vh, 48rem);
        overflow-y: auto;
        padding: 1rem;
    }

    .score-calculation-modal__header {
        position: sticky;
        top: -1rem;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--dashboard-line);
        padding: 0 0 0.85rem;
        background: var(--dashboard-panel);
    }

    .score-calculation-modal__content {
        display: grid;
        gap: 1rem;
        padding-top: 0.25rem;
    }

    .score-calculation-modal__content section + section {
        border-top: 1px solid var(--dashboard-line-strong);
        padding-top: 0.25rem;
    }

    .dashboard-score-compact {
        --score-accent: var(--dashboard-green);
        --score-progress: 0%;
        border-color: color-mix(in srgb, var(--score-accent) 24%, transparent);
    }

    .dashboard-score-compact__value {
        margin-top: 0.35rem;
    }

    .dashboard-score-compact__value strong {
        color: var(--score-accent);
        font-size: clamp(1.35rem, 2.4vw, 1.72rem);
        font-weight: 850;
        line-height: 1;
        letter-spacing: -0.038em;
    }

    .dashboard-score-compact__value small {
        margin-left: -0.28rem;
        color: var(--score-accent);
        font-size: 0.92rem;
        font-weight: 850;
    }

    .dashboard-score-compact__footer {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-top: 0.45rem;
    }

    .dashboard-score-compact__footer > strong {
        color: var(--score-accent);
        font-size: 0.65rem;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    .dashboard-score-compact__badges {
        justify-content: flex-start;
    }

    .dashboard-score-compact__progress {
        position: relative;
        z-index: 1;
        margin-top: 0.7rem;
        height: 0.58rem;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(237, 247, 242, 0.12);
    }

    .score-calculation-equation {
        color: var(--dashboard-text);
        font-size: 0.82rem;
        font-weight: 750;
        font-variant-numeric: tabular-nums;
        line-height: 1.5;
    }

    .score-calculation-equation strong {
        color: var(--score-accent, var(--dashboard-green));
        font-size: 1rem;
    }

    .score-calculation-list {
        display: grid;
    }

    .score-calculation-list > div,
    .score-calculation-detail-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        border-top: 1px solid var(--dashboard-line);
        padding: 0.45rem 0;
    }

    .score-calculation-list strong,
    .score-calculation-detail-row strong {
        color: var(--dashboard-text);
        font-size: 0.78rem;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .score-calculation-list .is-positive strong {
        color: var(--dashboard-green);
    }

    .score-calculation-list .is-negative strong,
    .score-calculation-list .is-penalty strong {
        color: var(--dashboard-red);
    }

    .score-calculation-list .is-neutral strong {
        color: #bdc8c4;
    }

    .score-calculation-list .is-subtotal,
    .score-calculation-list .is-total {
        border-top-color: var(--dashboard-line-strong);
    }

    .score-calculation-list .is-total strong {
        color: var(--dashboard-amber);
        font-size: 1rem;
    }

    .score-calculation-details {
        border-top: 1px solid var(--dashboard-line);
        padding-top: 0.65rem;
    }

    .score-calculation-details summary {
        color: var(--dashboard-muted);
        cursor: pointer;
        font-size: 0.7rem;
        font-weight: 800;
    }

    .score-calculation-details__title {
        margin-top: 0.75rem;
        color: var(--dashboard-text);
        font-size: 0.68rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .scores-metric-grid .metric-card__value {
        color: var(--metric-accent);
    }

    .scores-metric-grid .metric-card--historical-record,
    .scores-metric-grid .metric-card--period-record {
        box-shadow: var(--dashboard-glow), 0 12px 26px rgba(0, 0, 0, 0.24);
    }

    @media (max-width: 640px) {
        .dashboard-page {
            padding: 0.75rem;
        }

        .dashboard-shell {
            width: 100%;
        }

        .dashboard-command-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: stretch;
        }

        .dashboard-command-stats .dashboard-stat {
            height: auto;
            min-height: 5.65rem;
        }

        .dashboard-stat--score {
            grid-column: 1 / -1;
        }

        .dashboard-score-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            padding-right: 0;
        }

        .dashboard-score-row form {
            position: static;
            flex: 0 0 auto;
        }

        .dashboard-score-compact__value {
            flex-wrap: wrap;
            gap: 0.28rem;
        }

        .dashboard-score-compact__value strong {
            font-size: clamp(1.8rem, 9vw, 2.45rem);
        }

        .dashboard-score-compact__value small {
            font-size: 1.05rem;
        }

        .dashboard-score-compact__footer {
            align-items: flex-start;
            flex-direction: column;
        }

        .dashboard-score-compact__badges {
            justify-content: flex-start;
        }

        .dashboard-state-orb__circle {
            width: min(4.7rem, 100%);
        }

        .score-summary-card__header,
        .score-overview-card__header,
        .scores-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .score-summary-card__badges {
            justify-content: flex-start;
        }

        .score-summary-primary-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .score-primary-stat:nth-child(3) {
            border-left: 0;
            border-top: 1px solid var(--dashboard-line);
        }

        .score-primary-stat:nth-child(4) {
            border-top: 1px solid var(--dashboard-line);
        }

        .score-overview-stats {
            grid-template-columns: minmax(0, 1fr);
            gap: 0.58rem;
        }

        .score-overview-stat {
            min-height: 0;
            padding: 0.68rem 0.72rem;
        }

        .score-overview-stat:nth-child(3),
        .score-overview-stat:first-child,
        .score-overview-stat:last-child {
            border-left: 0.2rem solid var(--overview-stat-accent);
            padding-inline: 0.72rem;
        }

        .score-overview-progress__meta {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.25rem;
        }

        .score-overview-card__score strong {
            font-size: clamp(2.25rem, 13vw, 3.15rem);
        }
    }

    @media (min-width: 641px) and (max-width: 850px) {
        .score-summary-primary-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .score-primary-stat:nth-child(3) {
            border-left: 0;
            border-top: 1px solid var(--dashboard-line);
        }

        .score-primary-stat:nth-child(4) {
            border-top: 1px solid var(--dashboard-line);
        }
    }

    .dashboard-state-orb {
        --state-percent: 0%;
        position: relative;
        z-index: 1;
        display: grid;
        justify-items: center;
        gap: 0.36rem;
        min-width: 0;
    }

    .dashboard-state-orb__circle {
        position: relative;
        display: grid;
        place-items: center;
        width: min(5.4rem, 100%);
        aspect-ratio: 1;
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 50%, rgba(18, 25, 24, 0.95) 0 58%, transparent 59%),
            conic-gradient(var(--dashboard-green) var(--state-percent), rgba(255, 255, 255, 0.11) 0);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.24);
    }

    .dashboard-state-orb__circle::before {
        position: absolute;
        inset: 0.42rem;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: inherit;
        content: '';
    }

    .dashboard-state-orb__circle strong {
        color: var(--dashboard-text);
        font-size: 1.35rem;
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: -0.05em;
    }

    .dashboard-state-orb__circle span {
        margin-top: -0.85rem;
        color: var(--dashboard-muted);
        font-size: 0.64rem;
        font-weight: 850;
    }

    .dashboard-state-orb p {
        color: var(--dashboard-muted);
        font-size: 0.67rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        line-height: 1;
        text-align: center;
        text-transform: uppercase;
    }

    @media (max-width: 640px) {
        .dashboard-state-orb__circle {
            width: min(4.7rem, 100%);
        }
    }

    .dashboard-metric-grid {
        display: grid;
        gap: 0.85rem;
    }

    .dashboard-check-grid {
        display: grid;
        gap: 0.8rem;
    }

    .dashboard-check-card {
        position: relative;
        overflow: hidden;
        display: grid;
        gap: 0.45rem;
        border: 1px solid transparent;
        border-radius: 0.9rem;
        padding: 0.85rem;
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.045), rgba(237, 247, 242, 0.026)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.026)) border-box;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    }

    a.dashboard-check-card:hover {
        transform: translateY(-1px);
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.06), rgba(237, 247, 242, 0.032)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.036)) border-box;
    }

    .dashboard-check-card span {
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .dashboard-check-card strong {
        color: var(--dashboard-text);
        font-size: 1.05rem;
        font-weight: 850;
        letter-spacing: -0.03em;
    }

    .dashboard-check-card small {
        color: var(--dashboard-muted);
        font-size: 0.78rem;
        font-weight: 650;
        line-height: 1.35;
    }

    .module-command-values {
        display: grid;
        gap: 1rem;
    }

    .module-card-list {
        display: grid;
        gap: 0.72rem;
    }

    .module-card-list--nested {
        gap: 0.55rem;
    }

    .module-category-group {
        border: 1px solid var(--dashboard-line);
        border-radius: 0.95rem;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.025);
    }

    .module-category-group__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        border-bottom: 1px solid var(--dashboard-line);
        padding-bottom: 0.65rem;
    }

    .goal-gallery {
        display: grid;
        gap: 0.75rem;
    }

    .goal-gallery-card {
        position: relative;
        overflow: hidden;
        display: grid;
        gap: 0.75rem;
        border: 1px solid transparent;
        border-radius: 0.95rem 1.15rem 0.95rem 1.15rem;
        padding: 0.9rem;
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.05), rgba(237, 247, 242, 0.025)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)) border-box;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    .goal-gallery-card::after {
        position: absolute;
        top: -2rem;
        right: -1.15rem;
        width: 7.5rem;
        height: 4.2rem;
        border: 1px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.09);
        border-left-color: rgba(255, 255, 255, 0.03);
        border-radius: 0 0 58% 42%;
        pointer-events: none;
        content: '';
        transform: rotate(-13deg);
    }

    .goal-gallery-card > * {
        position: relative;
        z-index: 1;
    }

    .goal-gallery-card__header,
    .goal-gallery-card__tags,
    .goal-gallery-card__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
    }

    .goal-gallery-card__header {
        justify-content: space-between;
    }

    .goal-gallery-card__period,
    .goal-gallery-card__status,
    .goal-gallery-card__tags span {
        display: inline-flex;
        align-items: center;
        min-height: 1.65rem;
        border: 1px solid rgba(237, 247, 242, 0.1);
        border-radius: 999px;
        padding: 0.28rem 0.56rem;
        color: var(--dashboard-muted);
        font-size: 0.7rem;
        font-weight: 850;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        background: rgba(255, 255, 255, 0.035);
    }

    .goal-gallery-card__status--active {
        border-color: rgba(87, 211, 155, 0.22);
        color: var(--dashboard-green);
        background: var(--dashboard-green-soft);
    }

    .goal-gallery-card__name {
        color: var(--dashboard-text);
        font-size: 1rem;
        font-weight: 850;
        line-height: 1.15;
        letter-spacing: -0.025em;
    }

    .goal-gallery-card__target {
        margin-top: 0.22rem;
        color: var(--dashboard-text);
        font-size: 0.9rem;
        font-weight: 700;
    }

    .goal-gallery-card__progress {
        border-top: 1px solid rgba(237, 247, 242, 0.08);
        padding-top: 0.78rem;
    }

    .goal-gallery-card__progress-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.7rem;
    }

    .goal-gallery-card__progress-head span {
        color: var(--dashboard-muted);
        font-size: 0.68rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .goal-gallery-card__progress-head strong {
        color: var(--dashboard-text);
        font-size: 1rem;
        font-weight: 900;
    }

    .goal-gallery-card__actions {
        justify-content: flex-end;
        border-top: 1px solid var(--dashboard-line);
        padding-top: 0.62rem;
    }

    .module-row-card {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        border: 1px solid transparent;
        border-radius: 0.9rem 1.05rem 0.9rem 1.05rem;
        padding: 0.82rem;
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.045), rgba(237, 247, 242, 0.026)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.026)) border-box;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .module-row-card::after {
        position: absolute;
        top: -1.8rem;
        right: -1rem;
        width: 7rem;
        height: 3.8rem;
        border: 1px solid transparent;
        border-bottom-color: rgba(255, 255, 255, 0.085);
        border-left-color: rgba(255, 255, 255, 0.025);
        border-radius: 0 0 58% 42%;
        pointer-events: none;
        content: '';
        transform: rotate(-13deg);
    }

    .module-row-card > * {
        position: relative;
        z-index: 1;
    }

    .calendar-day-list {
        display: grid;
        gap: 0.72rem;
    }

    .calendar-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        gap: 1rem;
        align-items: start;
    }

    .calendar-main {
        min-width: 0;
    }

    .calendar-detail-panel {
        position: sticky;
        top: 1rem;
        overflow: hidden;
        border: 1px solid rgba(237, 247, 242, 0.12);
        border-radius: 0.9rem;
        padding: 1rem;
        color: var(--dashboard-text);
        background:
            linear-gradient(145deg, rgba(19, 31, 28, 0.96), rgba(12, 19, 17, 0.98)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.026)) border-box;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .calendar-detail-panel__header {
        border-bottom: 1px solid var(--dashboard-line);
        padding-bottom: 0.75rem;
    }

    .calendar-detail-panel__title {
        margin-top: 0.22rem;
        font-size: 1.05rem;
        font-weight: 950;
        line-height: 1.15;
    }

    .calendar-detail-panel__rows {
        display: grid;
        gap: 0.55rem;
        margin-top: 0.85rem;
    }

    .calendar-detail-panel__row {
        display: grid;
        grid-template-columns: minmax(5.8rem, 0.42fr) minmax(0, 1fr);
        gap: 0.65rem;
        border-bottom: 1px solid rgba(237, 247, 242, 0.07);
        padding-bottom: 0.58rem;
    }

    .calendar-detail-panel__row dt,
    .calendar-detail-panel__section-title,
    .calendar-detail-panel__metric span {
        color: var(--dashboard-muted);
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .calendar-detail-panel__row dd {
        min-width: 0;
        color: var(--dashboard-text);
        font-size: 0.82rem;
        font-weight: 800;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .calendar-detail-panel__section {
        margin-top: 1rem;
    }

    .calendar-detail-panel__text {
        margin-top: 0.4rem;
        color: var(--dashboard-text);
        font-size: 0.88rem;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .calendar-detail-panel__metrics {
        display: grid;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .calendar-detail-panel__metric {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.7rem;
        border: 1px solid rgba(237, 247, 242, 0.08);
        border-radius: 0.65rem;
        padding: 0.58rem 0.65rem;
        background: rgba(255, 255, 255, 0.035);
    }

    .calendar-detail-panel__metric strong {
        font-size: 0.86rem;
        font-weight: 950;
        text-align: right;
    }

    .calendar-day-agenda {
        display: grid;
        grid-template-columns: 4.2rem minmax(0, 1fr);
        gap: 0.72rem;
    }

    .calendar-day-agenda__labels {
        display: grid;
        grid-template-rows: repeat(24, 4.5rem);
    }

    .calendar-day-agenda__hour-label {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        min-width: 0;
        padding-top: 0.12rem;
        color: rgba(237, 247, 242, 0.52);
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1;
    }

    .calendar-day-agenda__timeline {
        position: relative;
        min-height: 108rem;
        border: 1px solid rgba(237, 247, 242, 0.08);
        border-radius: 0.78rem;
        background: rgba(255, 255, 255, 0.022);
        overflow: hidden;
    }

    .calendar-day-agenda__hour-line {
        height: 4.5rem;
        border-top: 1px solid rgba(237, 247, 242, 0.08);
    }

    .calendar-day-agenda__hour-line:first-child {
        border-top: 0;
    }

    .calendar-day-agenda .calendar-week-event {
        right: 0.45rem;
        left: 0.45rem;
        min-height: 2rem;
    }

    .calendar-event-card {
        position: relative;
        overflow: hidden;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 0.9rem;
        padding: 0.78rem;
        color: var(--calendar-event-text, var(--dashboard-text));
        background: var(--calendar-event-bg, rgba(87, 211, 155, 0.18));
        border-color: var(--calendar-event-border, rgba(87, 211, 155, 0.5));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        cursor: pointer;
        text-align: center;
    }

    .calendar-event-card::before {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0.22rem;
        content: '';
        background: var(--calendar-accent, var(--dashboard-green));
    }

    .calendar-event-card strong {
        display: block;
        font-size: 0.9rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .calendar-event-card--sleep,
    .calendar-event-card--hydration {
        --calendar-accent: var(--dashboard-blue);
        --calendar-event-bg: rgba(116, 183, 230, 0.26);
        --calendar-event-border: rgba(116, 183, 230, 0.72);
    }

    .calendar-event-card--nap {
        --calendar-accent: var(--dashboard-amber);
        --calendar-event-bg: rgba(217, 170, 85, 0.26);
        --calendar-event-border: rgba(217, 170, 85, 0.72);
    }

    .calendar-chip--blue {
        color: var(--dashboard-blue);
        background: var(--dashboard-blue-soft);
    }

    .calendar-chip--green {
        color: var(--dashboard-green);
        background: var(--dashboard-green-soft);
    }

    .calendar-week-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .calendar-week-day {
        min-width: 0;
    }

    .calendar-week-day__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.45rem;
        min-height: 2.4rem;
        border-bottom: 1px solid var(--dashboard-line);
        padding-bottom: 0.48rem;
    }

    .calendar-week-day__timeline {
        position: relative;
        height: 54rem;
        margin-top: 0.65rem;
        border: 1px solid rgba(237, 247, 242, 0.08);
        border-radius: 0.78rem;
        background:
            linear-gradient(to bottom, rgba(237, 247, 242, 0.08) 1px, transparent 1px) 0 0 / 100% 4.166%,
            linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
        overflow: hidden;
    }

    .calendar-hour-marker {
        position: absolute;
        left: 0.3rem;
        z-index: 2;
        color: rgba(237, 247, 242, 0.38);
        font-size: 0.58rem;
        font-weight: 900;
    }

    .calendar-hour-marker--start {
        top: 0.25rem;
    }

    .calendar-hour-marker--mid {
        top: 50%;
        transform: translateY(-50%);
    }

    .calendar-hour-marker--end {
        bottom: 0.25rem;
    }

    .calendar-week-event {
        position: absolute;
        right: 0.25rem;
        left: 1.55rem;
        z-index: 3;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 1.45rem;
        border: 1px solid rgba(87, 211, 155, 0.24);
        border-radius: 0.62rem;
        padding: 0.26rem 0.34rem;
        color: var(--calendar-event-text, var(--dashboard-text));
        background: var(--calendar-event-bg, rgba(87, 211, 155, 0.18));
        border-color: var(--calendar-event-border, rgba(87, 211, 155, 0.5));
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        cursor: pointer;
        text-align: center;
    }

    .calendar-week-event--sleep,
    .calendar-week-event--hydration {
        --calendar-event-bg: rgba(116, 183, 230, 0.26);
        --calendar-event-border: rgba(116, 183, 230, 0.72);
        --calendar-accent: var(--dashboard-blue);
    }

    .calendar-week-event--nap {
        --calendar-event-bg: rgba(217, 170, 85, 0.26);
        --calendar-event-border: rgba(217, 170, 85, 0.72);
        --calendar-accent: var(--dashboard-amber);
    }

    .calendar-week-event strong {
        overflow: hidden;
        display: block;
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-week-event::before {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0.18rem;
        background: var(--calendar-accent, var(--dashboard-green));
        content: '';
    }

    .calendar-week-event:focus-visible,
    .calendar-event-card:focus-visible {
        outline: 2px solid var(--calendar-event-border, var(--dashboard-green));
        outline-offset: 2px;
    }

    .calendar-event-tone--tone-1 {
        --calendar-accent: #57d39b;
        --calendar-event-bg: rgba(31, 156, 104, 0.36);
        --calendar-event-border: rgba(87, 211, 155, 0.82);
    }

    .calendar-event-tone--tone-2 {
        --calendar-accent: #74b7e6;
        --calendar-event-bg: rgba(42, 124, 180, 0.36);
        --calendar-event-border: rgba(116, 183, 230, 0.82);
    }

    .calendar-event-tone--tone-3 {
        --calendar-accent: #d9aa55;
        --calendar-event-bg: rgba(181, 125, 31, 0.36);
        --calendar-event-border: rgba(217, 170, 85, 0.82);
    }

    .calendar-event-tone--tone-4 {
        --calendar-accent: #e7798b;
        --calendar-event-bg: rgba(188, 69, 91, 0.34);
        --calendar-event-border: rgba(231, 121, 139, 0.82);
    }

    .calendar-event-tone--tone-5 {
        --calendar-accent: #b792f0;
        --calendar-event-bg: rgba(123, 86, 192, 0.34);
        --calendar-event-border: rgba(183, 146, 240, 0.82);
    }

    .calendar-event-tone--tone-6 {
        --calendar-accent: #58c9d4;
        --calendar-event-bg: rgba(35, 139, 149, 0.34);
        --calendar-event-border: rgba(88, 201, 212, 0.82);
    }

    .calendar-event-tone--tone-7 {
        --calendar-accent: #a9d86f;
        --calendar-event-bg: rgba(108, 150, 47, 0.34);
        --calendar-event-border: rgba(169, 216, 111, 0.82);
    }

    .calendar-event-tone--tone-8 {
        --calendar-accent: #ef946c;
        --calendar-event-bg: rgba(192, 91, 50, 0.34);
        --calendar-event-border: rgba(239, 148, 108, 0.82);
    }

    .calendar-week-day__empty {
        position: absolute;
        top: 50%;
        left: 50%;
        color: var(--dashboard-muted);
        font-size: 0.76rem;
        font-weight: 800;
        transform: translate(-50%, -50%);
    }

    .calendar-week-day__mobile-list {
        display: none;
    }

    .module-filter-bar {
        display: grid;
        gap: 0.85rem;
        align-items: end;
    }

    .module-management-form,
    .module-edit-context {
        align-self: start;
    }

    .module-form-panel {
        width: 100%;
    }

    @media (min-width: 640px) {
        .module-command-values {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dashboard-command-stats {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .dashboard-stat {
            height: 6.2rem;
        }

        .dashboard-check-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .dashboard-metric-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .module-filter-bar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .dashboard-command-grid,
        .module-command-grid {
            grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 0.75fr);
            align-items: stretch;
        }

        .dashboard-metric-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .dashboard-command-stats {
            grid-template-columns: minmax(9.2rem, 1fr) minmax(10.5rem, 1.08fr) repeat(4, minmax(4.8rem, 0.62fr));
        }

        .dashboard-workspace-grid {
            grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.8fr) minmax(20rem, 0.8fr);
            align-items: start;
        }

        .module-content-grid {
            grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.55fr);
            align-items: start;
        }

        .module-management-grid {
            grid-template-columns: minmax(20rem, 0.56fr) minmax(0, 1.44fr);
            align-items: start;
        }

        .goals-page {
            min-height: calc(100vh - 6.15rem);
            padding-top: 0.7rem;
            padding-bottom: 0.7rem;
        }

        .goals-page__shell {
            width: min(97vw, 108rem);
            max-width: 108rem;
        }

        .goals-management-grid {
            grid-template-columns: minmax(23rem, 0.48fr) minmax(0, 1.52fr);
            gap: 0.8rem;
        }

        .goals-management-grid--modal {
            grid-template-columns: minmax(0, 1fr);
        }

        .goals-page .dashboard-panel {
            padding: 0.75rem 0.82rem;
        }

        .goals-page .dashboard-section-header {
            padding-bottom: 0.55rem;
        }

        .goals-page__intro {
            max-width: 31rem;
            font-size: 0.78rem;
            line-height: 1.35;
        }

        .goals-page__form-wrap {
            margin-top: 0.85rem;
        }

        .goals-page .goal-form-grid {
            gap: 0.5rem 0.6rem;
        }

        .goals-page .module-field {
            gap: 0.25rem;
        }

        .goals-page .module-field > span,
        .goals-page .module-check > span {
            font-size: 0.66rem;
            letter-spacing: 0.075em;
        }

        .goals-page .module-input {
            min-height: 2.35rem;
            border-radius: 0.68rem;
            padding: 0.48rem 0.62rem;
            font-size: 0.86rem;
        }

        .goals-page .module-checkbox-row {
            min-height: 2.05rem;
        }

        .goals-page .module-form-actions {
            gap: 0.5rem;
            padding-top: 0.1rem;
        }

        .goals-page .dashboard-action {
            min-height: 2.1rem;
            border-radius: 0.68rem;
            padding: 0.44rem 0.75rem;
            font-size: 0.78rem;
        }

        .goals-page .goal-gallery {
            margin-top: 0.75rem;
        }

        .goals-page .dashboard-empty {
            padding: 0.75rem 0.85rem;
        }

        .goals-page .goal-gallery {
            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        }

        .goals-page .goal-gallery-card {
            gap: 0.62rem;
            padding: 0.78rem;
        }

        .module-edit-grid {
            grid-template-columns: minmax(18rem, 0.46fr) minmax(0, 1fr);
            align-items: start;
            max-width: 96rem;
            margin: 0 auto;
        }

        .module-filter-bar {
            grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        }
    }

    @media (max-width: 640px) {
        .dashboard-list--columns {
            grid-template-columns: minmax(0, 1fr);
        }

        .goal-card {
            padding: 0.72rem;
        }

        .goal-card > .flex {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.6rem;
        }

        .goal-card .goal-badge {
            align-self: flex-start;
        }

        .goal-gallery-card__header,
        .goal-gallery-card__progress-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .module-row-card {
            align-items: flex-start;
            flex-direction: column;
        }

        .calendar-workspace {
            grid-template-columns: minmax(0, 1fr);
        }

        .calendar-detail-panel {
            position: static;
        }

        .calendar-detail-panel__row {
            grid-template-columns: minmax(0, 1fr);
            gap: 0.24rem;
        }

        .calendar-detail-panel__row dd {
            text-align: left;
        }

        .calendar-day-agenda {
            grid-template-columns: 3.45rem minmax(0, 1fr);
            gap: 0.5rem;
        }

        .calendar-day-agenda__labels {
            grid-template-rows: repeat(24, 4rem);
        }

        .calendar-day-agenda__timeline {
            min-height: 96rem;
        }

        .calendar-day-agenda__hour-line {
            height: 4rem;
        }

        .calendar-day-agenda .calendar-week-event {
            right: 0.3rem;
            left: 0.3rem;
        }

        .calendar-week-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .calendar-week-day__timeline {
            display: none;
        }

        .calendar-week-day__mobile-list {
            display: grid;
            gap: 0.6rem;
            margin-top: 0.65rem;
        }
    }
}

@layer components {
    .dashboard-action--danger {
        color: #fff;
        background: linear-gradient(135deg, #e47668, #b94c43);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .module-label {
        display: block;
        color: var(--dashboard-muted);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .module-error-list {
        display: grid;
        gap: 0.25rem;
        color: var(--dashboard-red);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .module-status-message {
        border: 1px solid rgba(87, 211, 155, 0.18);
        border-radius: 0.85rem;
        padding: 0.75rem 0.85rem;
        color: var(--dashboard-green);
        font-size: 0.86rem;
        font-weight: 800;
        background: var(--dashboard-green-soft);
    }

    .guest-page {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 1.25rem;
        background:
            linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, 0.04) 18.2%, transparent 18.6% 66%, rgba(255, 255, 255, 0.026) 66.2%, transparent 66.7%),
            linear-gradient(180deg, #080d0c 0%, #0d1412 100%);
    }

    .guest-card {
        width: min(100%, 29rem);
        border: 1px solid transparent;
        border-radius: 1.15rem;
        padding: 1.35rem;
        background:
            linear-gradient(145deg, rgba(18, 25, 24, 0.96), rgba(9, 14, 13, 0.96)) padding-box,
            var(--dashboard-edge) border-box;
        box-shadow: var(--dashboard-shadow), var(--dashboard-glow);
    }

    .guest-card .text-gray-600,
    .guest-card .text-gray-700,
    .guest-card .text-gray-800,
    .profile-panel .text-gray-600,
    .profile-panel .text-gray-700,
    .profile-panel .text-gray-800,
    .app-modal-card .text-gray-600,
    .app-modal-card .text-gray-700,
    .app-modal-card .text-gray-800 {
        color: var(--dashboard-muted) !important;
    }

    .guest-card .text-gray-900,
    .profile-panel .text-gray-900,
    .app-modal-card .text-gray-900 {
        color: var(--dashboard-text) !important;
    }

    .guest-card a,
    .profile-panel a,
    .app-modal-card a {
        color: var(--dashboard-green);
        font-weight: 800;
    }

    .guest-card a:hover,
    .profile-panel a:hover,
    .app-modal-card a:hover {
        color: var(--dashboard-text);
    }

    .guest-card input[type='checkbox'] {
        accent-color: var(--dashboard-green);
    }

    .profile-grid {
        display: grid;
        gap: 1rem;
        max-width: 82rem;
        margin: 0 auto;
    }

    .profile-panel {
        min-width: 0;
    }

    .profile-panel--danger {
        border-color: rgba(228, 118, 104, 0.16);
    }

    .profile-panel section > header h2 {
        color: var(--dashboard-text) !important;
        font-size: 1.2rem;
        font-weight: 850;
        letter-spacing: -0.03em;
    }

    .profile-panel section > header p {
        color: var(--dashboard-muted) !important;
        font-size: 0.9rem;
        font-weight: 650;
    }

    @media (min-width: 1024px) {
        .profile-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .profile-panel--danger {
            grid-column: 1 / -1;
        }
    }
}

@layer components {
    .metric-card--list {
        min-height: 7.6rem;
    }

    .dashboard-mini-list {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 0.4rem;
    }

    .dashboard-mini-list span {
        overflow: hidden;
        color: var(--dashboard-text);
        font-size: 0.84rem;
        font-weight: 750;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .module-help {
        color: var(--dashboard-muted);
        font-size: 0.76rem;
        font-weight: 650;
        line-height: 1.35;
    }

    .dashboard-check-card:hover {
        transform: translateY(-1px);
        background:
            linear-gradient(145deg, rgba(237, 247, 242, 0.06), rgba(237, 247, 242, 0.032)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.036)) border-box;
    }
}

@layer components {
    .app-nav__brand {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        min-width: max-content;
        color: var(--dashboard-text);
        font-weight: 900;
        letter-spacing: -0.04em;
    }

    .app-nav__brand-text {
        display: none;
        font-size: 1rem;
    }

    @media (min-width: 768px) {
        .app-nav__brand-text {
            display: inline;
        }
    }

    @media (min-width: 640px) and (max-width: 1279px) {
        .app-nav__brand {
            gap: 0.45rem;
        }

        .app-nav__brand-text {
            display: none;
        }
    }

    .landing-page {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        padding: clamp(1rem, 3vw, 2rem);
        background:
            radial-gradient(circle at 80% 12%, rgba(87, 211, 155, 0.18), transparent 28rem),
            radial-gradient(circle at 10% 80%, rgba(116, 183, 230, 0.12), transparent 24rem),
            linear-gradient(115deg, transparent 0 15%, rgba(255, 255, 255, 0.045) 15.2%, transparent 15.6% 62%, rgba(255, 255, 255, 0.03) 62.2%, transparent 62.7%),
            linear-gradient(180deg, #080d0c 0%, #0d1412 100%);
    }

    .landing-nav {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: min(92vw, 84rem);
        margin: 0 auto;
    }

    .landing-nav__actions,
    .landing-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .landing-hero {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 2rem;
        align-items: center;
        width: min(92vw, 84rem);
        min-height: calc(100vh - 7rem);
        margin: 0 auto;
        padding: clamp(3rem, 8vw, 7rem) 0;
    }

    .landing-hero__content {
        max-width: 42rem;
    }

    .landing-hero__content h1 {
        margin-top: 1rem;
        color: var(--dashboard-text);
        font-size: clamp(2.7rem, 8vw, 6.6rem);
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: -0.075em;
    }

    .landing-hero__content p:not(.dashboard-kicker) {
        margin-top: 1.25rem;
        max-width: 35rem;
        color: var(--dashboard-muted);
        font-size: clamp(1rem, 1.7vw, 1.2rem);
        font-weight: 650;
        line-height: 1.65;
    }

    .landing-hero__actions {
        margin-top: 1.45rem;
    }

    .landing-card-stack {
        display: grid;
        gap: 1rem;
    }

    @media (min-width: 1024px) {
        .landing-hero {
            grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
        }

        .landing-card-stack .metric-card:nth-child(2) {
            transform: translateX(2.25rem);
        }

        .landing-card-stack .metric-card:nth-child(3) {
            transform: translateX(-1.25rem);
        }
    }

    @media (min-width: 1024px) {
        .dashboard-workspace-grid {
            grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.7fr) minmax(22rem, 0.9fr);
            grid-template-areas:
                'daily week history'
                'month month history';
            align-items: stretch;
        }

        .dashboard-workspace-daily {
            grid-area: daily;
        }

        .dashboard-workspace-week {
            grid-area: week;
        }

        .dashboard-workspace-history {
            grid-area: history;
        }

        .dashboard-workspace-month {
            grid-area: month;
        }

        .dashboard-workspace-history .dashboard-list {
            align-content: start;
        }
    }

    .module-management-grid--balanced {
        align-items: stretch;
    }

    .module-row-card,
    .dashboard-list-item {
        align-items: flex-start;
    }

    .module-row-card > div:first-child,
    .dashboard-list-item > div:first-child {
        min-width: 0;
    }

    .module-actions-cell {
        flex-shrink: 0;
        justify-content: flex-end;
        margin-left: auto;
    }

    @media (max-width: 640px) {
        .landing-nav {
            align-items: flex-start;
            flex-direction: column;
        }

        .module-actions-cell {
            justify-content: flex-start;
            margin-left: 0;
        }
    }
}

@layer components {
    .activity-config-grid {
        display: grid;
        gap: 1rem;
        align-items: start;
    }

    @media (min-width: 1024px) {
        .activity-config-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}