.m365price-tracker-page {
    display: grid;
    gap: var(--m365price-section-gap, var(--phinit-space-6));
}

.m365price-hero {
    background: var(--m365price-muted-surface-color, var(--phinit-color-surface));
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    box-shadow: var(--phinit-shadow-card);
    display: grid;
    gap: var(--m365price-card-gap, var(--phinit-space-4));
    padding: var(--m365price-card-padding, var(--phinit-space-6));
}

.m365price-hero__content,
.m365price-section-head,
.m365price-result-heading,
.m365price-actions {
    align-items: flex-start;
    display: flex;
    gap: var(--phinit-space-4);
    justify-content: space-between;
}

.m365price-hero__content > section,
.m365price-section-head > section,
.m365price-result-heading > section {
    min-width: 0;
}

.m365price-hero p,
.m365price-section-head p,
.m365price-result-card p,
.m365price-aside p {
    color: var(--phinit-color-ink-secondary);
}

.m365price-layout {
    align-items: start;
    display: grid;
    gap: var(--m365price-section-gap, var(--phinit-space-5));
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.m365price-layout-variant--single .m365price-layout,
.m365price-layout-variant--wide .m365price-layout {
    grid-template-columns: 1fr;
}

.m365price-layout-variant--wide .m365price-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.m365price-aside {
    display: grid;
    gap: var(--m365price-card-gap, var(--phinit-space-4));
    position: sticky;
    top: var(--phinit-space-4);
}

.m365price-form,
.m365price-fieldset,
.m365price-result-card,
.m365price-personal-results,
.m365price-personal-rows {
    display: grid;
    gap: var(--m365price-card-gap, var(--phinit-space-5));
}

.m365price-fieldset {
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    margin: 0;
    padding: var(--m365price-card-padding, var(--phinit-space-5));
}

.m365price-fieldset legend {
    color: var(--phinit-color-ink);
    font-weight: 500;
    padding: 0 var(--phinit-space-2);
}

.m365price-form-grid {
    display: grid;
    gap: var(--phinit-space-4);
}

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

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

.m365price-filter-cols--1 .m365price-form-grid--2,
.m365price-filter-cols--1 .m365price-form-grid--3 {
    grid-template-columns: 1fr;
}

.m365price-filter-cols--2 .m365price-form-grid--2,
.m365price-filter-cols--2 .m365price-form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.m365price-filter-cols--3 .m365price-form-grid--2,
.m365price-filter-cols--3 .m365price-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.m365price-kpi-list {
    display: grid;
    gap: var(--phinit-space-3);
    margin: 0;
}

.m365price-kpi-list div {
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    padding: var(--phinit-space-3);
}

.m365price-kpi-list dt,
.m365price-mini-card span,
.m365price-score span {
    color: var(--phinit-color-ink-secondary);
    font-size: var(--phinit-text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.m365price-kpi-list dd {
    font-size: var(--phinit-text-h3);
    font-weight: 500;
    margin: var(--phinit-space-1) 0 0;
}

.m365price-score {
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    padding: var(--phinit-space-4);
}

.m365price-score strong {
    display: block;
    font-size: var(--phinit-text-h2);
    margin: var(--phinit-space-1) 0;
}

.m365price-score__bar {
    background: var(--phinit-color-bg);
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    height: var(--phinit-space-2);
    overflow: hidden;
}

.m365price-score__bar span {
    background: var(--m365price-primary-color, var(--phinit-color-accent));
    display: block;
    height: 100%;
    width: var(--m365price-score-width, 50%);
}

.m365price-summary-grid,
.m365price-result-grid {
    display: grid;
    gap: var(--phinit-space-4);
}

.m365price-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.m365price-chart-panel {
    background: var(--m365price-muted-surface-color, color-mix(in srgb, var(--phinit-color-surface) 92%, #ffffff 8%));
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    height: var(--m365price-chart-height, 320px);
    max-height: 520px;
    padding: var(--phinit-space-4);
}

.m365price-chart-panel canvas {
    display: block;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
}

.m365price-chart-panel canvas[hidden],
.m365price-personal-empty[hidden],
.m365price-personal-results[hidden] {
    display: none !important;
}

.m365price-chart-fallback {
    height: 100%;
    overflow: auto;
}

.m365price-chart-fallback .phinit-table {
    min-width: 0;
}

.m365price-history-filter {
    max-width: 30rem;
}

.m365price-history-filter select[multiple] {
    min-height: 12rem;
}

.m365price-filter-limit,
.m365price-chart-hint,
.m365price-select-hint {
    color: var(--phinit-color-ink-secondary);
    display: block;
    font-size: var(--phinit-text-xs);
    line-height: 1.4;
    margin-top: var(--phinit-space-1);
}

.m365price-personal-row {
    align-items: end;
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    display: grid;
    gap: var(--phinit-space-3);
    grid-template-columns: minmax(14rem, 1.5fr) minmax(11rem, 1fr) minmax(8rem, .75fr) auto;
    padding: var(--phinit-space-3);
}

.m365price-chart {
    display: grid;
    gap: var(--phinit-space-3);
}

.m365price-chart__row {
    display: grid;
    gap: var(--phinit-space-2);
    grid-template-columns: 8rem minmax(0, 1fr);
}

.m365price-chart__row > span:first-child {
    color: var(--phinit-color-ink-secondary);
    font-size: var(--phinit-text-sm);
    font-weight: 500;
}

.m365price-chart__bar {
    border: 1px solid var(--phinit-color-border);
    border-radius: var(--m365tools-ui-radius);
    color: var(--phinit-color-ink);
    display: block;
    font-size: var(--phinit-text-xs);
    line-height: 1.35;
    max-width: 100%;
    min-height: 1.65rem;
    min-width: 7rem;
    overflow: hidden;
    padding: var(--phinit-space-1) var(--phinit-space-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    width: max(7rem, var(--m365price-chart-width, 0%));
}

.m365price-chart__bar--gain {
    border-left-color: var(--phinit-color-success);
    border-left-width: 3px;
}

.m365price-chart__bar--cost {
    border-left-color: var(--phinit-color-danger);
    border-left-width: 3px;
}

.m365price-note-list {
    display: grid;
    gap: var(--phinit-space-2);
    margin: 0;
    padding-left: var(--phinit-space-5);
}

.m365price-row-remove {
    white-space: nowrap;
}

@media print {
    .site-header,
    .site-footer,
    .m365price-actions,
    .m365price-aside,
    .m365price-layout,
    .m365price-source-card {
        display: none !important;
    }

    .m365price-tracker-page {
        max-width: none;
        padding: 0;
    }
}

@media (max-width: 1024px) {
    .m365price-layout,
    .m365price-summary-grid,
    .m365price-result-grid {
        grid-template-columns: 1fr;
    }

    .m365price-aside {
        position: static;
    }

    .m365price-form-grid--3,
    .m365price-form-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .m365price-hero__content,
    .m365price-section-head,
    .m365price-result-heading,
    .m365price-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .m365price-chart-panel {
        height: 260px;
        padding: var(--phinit-space-3);
    }

    .m365price-history-filter {
        max-width: none;
    }

    .m365price-personal-row,
    .m365price-form-grid--3,
    .m365price-form-grid--2 {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .m365price-chart__row {
        grid-template-columns: 1fr;
    }

    .m365price-personal-table {
        min-width: 760px;
    }
}