/*
 * MusicMaster unified visual language.
 *
 * The scale is derived from phi (1.61803398875) and sqrt(phi) (~1.272):
 * - spacing: .382 / .618 / 1 / 1.618 / 2.618 / 4.236 rem
 * - type:    .764 / .875 / 1 / 1.272 / 1.618 / 2.058 / 2.618 rem
 *
 * Values are intentionally bounded rather than applying phi mechanically.
 * The goal is a dense, readable application UI matching the Archive visual
 * language while preserving responsive behaviour and accessibility.
 */

:root {
    --mm-phi: 1.61803398875;
    --mm-phi-inverse: .61803398875;

    --mm-space-0: .236rem;
    --mm-space-1: .382rem;
    --mm-space-2: .618rem;
    --mm-space-3: 1rem;
    --mm-space-4: 1.618rem;
    --mm-space-5: 2.618rem;
    --mm-space-6: 4.236rem;

    --mm-font-xs: .764rem;
    --mm-font-sm: .875rem;
    --mm-font-md: 1rem;
    --mm-font-lg: 1.272rem;
    --mm-font-xl: 1.618rem;
    --mm-font-2xl: 2.058rem;
    --mm-font-3xl: 2.618rem;

    --mm-bg: #030c19;
    --mm-bg-elevated: #07111f;
    --mm-surface: #0d1929;
    --mm-surface-2: #102236;
    --mm-surface-3: #142b43;
    --mm-surface-4: #19334d;
    --mm-border: #203a55;
    --mm-border-muted: #172c42;
    --mm-border-strong: #2d5275;

    --mm-text: #edf4fb;
    --mm-text-soft: #c7d3df;
    --mm-muted: #8fa0b4;
    --mm-muted-2: #667b90;

    --mm-accent: #1685ff;
    --mm-accent-2: #43a2ff;
    --mm-accent-soft: rgba(22, 133, 255, .14);
    --mm-accent-border: rgba(67, 162, 255, .42);

    --mm-success: #1f9d3a;
    --mm-success-hover: #27b347;
    --mm-success-soft: rgba(31, 157, 58, .14);
    --mm-warning: #f0a24a;
    --mm-danger: #ff4d55;
    --mm-info: #22c3d6;

    --mm-radius-xs: .382rem;
    --mm-radius-sm: .618rem;
    --mm-radius-md: 1rem;
    --mm-radius-lg: 1.272rem;

    --mm-control-height: 2.618rem;
    --mm-control-height-sm: 2.236rem;
    --mm-icon-control: 2.618rem;

    --mm-sidebar-width: 233px;
    --mm-sidebar-collapsed-width: 68px;
    --mm-topbar-height: 55px;

    --mm-shadow-sm: 0 4px 12px rgba(0, 0, 0, .18);
    --mm-shadow-md: 0 10px 28px rgba(0, 0, 0, .26);
    --mm-shadow-lg: 0 18px 48px rgba(0, 0, 0, .34);

    --bs-body-bg: var(--mm-bg);
    --bs-body-color: var(--mm-text);
    --bs-secondary-color: var(--mm-muted);
    --bs-tertiary-color: var(--mm-muted-2);
    --bs-border-color: var(--mm-border);
    --bs-border-color-translucent: rgba(77, 116, 151, .24);
    --bs-primary: var(--mm-accent);
    --bs-primary-rgb: 22, 133, 255;
    --bs-success: var(--mm-success);
    --bs-success-rgb: 31, 157, 58;
    --bs-danger: var(--mm-danger);
    --bs-danger-rgb: 255, 77, 85;
    --bs-info: var(--mm-info);
    --bs-info-rgb: 34, 195, 214;
    --bs-link-color: var(--mm-accent-2);
    --bs-link-hover-color: #75baff;
    --bs-border-radius: var(--mm-radius-sm);
    --bs-border-radius-sm: var(--mm-radius-xs);
    --bs-border-radius-lg: var(--mm-radius-md);
}

html {
    font-size: 15px;
    background: var(--mm-bg);
}

body.mm-body {
    background:
        radial-gradient(circle at 55% -15%, rgba(24, 79, 135, .12), transparent 34rem),
        var(--mm-bg);
    color: var(--mm-text);
    font-size: var(--mm-font-sm);
    line-height: 1.5;
}

body.mm-body,
button,
input,
select,
textarea {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}

::selection {
    color: #fff;
    background: rgba(22, 133, 255, .42);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0;
    color: var(--mm-text);
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -.018em;
}

h1,
.h1 { font-size: clamp(1.618rem, 1.48rem + .45vw, 2.058rem); }
h2,
.h2 { font-size: clamp(1.272rem, 1.2rem + .2vw, 1.618rem); }
h3,
.h3 { font-size: var(--mm-font-lg); }
h4,
.h4,
h5,
.h5 { font-size: var(--mm-font-md); }
h6,
.h6 { font-size: var(--mm-font-sm); }

p,
li,
dd,
dt,
label,
.form-label {
    line-height: 1.5;
}

small,
.small {
    color: var(--mm-muted);
    font-size: var(--mm-font-xs);
}

a {
    color: var(--mm-accent-2);
    text-underline-offset: .18em;
}

a:hover,
a:focus-visible {
    color: #79bdff;
}

.text-muted,
.text-secondary {
    color: var(--mm-muted) !important;
}

/* Application shell */
.mm-app-body {
    padding-left: var(--mm-sidebar-width);
    background: var(--mm-bg);
}

.mm-app-body > .mm-app-sidebar {
    width: var(--mm-sidebar-width);
    background:
        linear-gradient(180deg, rgba(10, 27, 45, .98), rgba(6, 18, 31, .99));
    border-right-color: var(--mm-border);
    box-shadow: 12px 0 36px rgba(0, 0, 0, .12);
}

.mm-app-body .mm-sidebar-brand {
    height: var(--mm-topbar-height);
    padding: var(--mm-space-2) var(--mm-space-3);
    border-bottom: 1px solid var(--mm-border-muted);
}

.mm-app-body .mm-sidebar-nav {
    gap: var(--mm-space-1);
    padding: var(--mm-space-3) var(--mm-space-2);
}

.mm-sidebar-link,
.mm-sidebar-nav .nav-link {
    min-height: var(--mm-control-height);
    gap: var(--mm-space-2);
    padding: var(--mm-space-2) var(--mm-space-3);
    border: 1px solid transparent;
    border-radius: var(--mm-radius-sm);
    color: var(--mm-muted);
    font-size: var(--mm-font-sm);
    transition: color .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.mm-sidebar-link:hover,
.mm-sidebar-link:focus-visible,
.mm-sidebar-link.active,
.mm-sidebar-nav .nav-link:hover,
.mm-sidebar-nav .nav-link:focus-visible,
.mm-sidebar-nav .nav-link.active {
    color: var(--mm-text);
    background: linear-gradient(90deg, rgba(22, 133, 255, .16), rgba(22, 133, 255, .055));
    border-color: rgba(67, 162, 255, .12);
}

.mm-sidebar-link.active,
.mm-sidebar-nav .nav-link.active {
    box-shadow: inset 3px 0 0 var(--mm-accent-2);
}

.mm-sidebar-section-title {
    margin-bottom: var(--mm-space-1);
    padding-inline: var(--mm-space-3);
    color: var(--mm-muted-2);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .095em;
}

.mm-app-body .mm-topbar,
.mm-topbar {
    min-height: var(--mm-topbar-height);
    padding: var(--mm-space-2) var(--mm-space-4);
    background: rgba(3, 12, 25, .9);
    border-bottom: 1px solid var(--mm-border-muted);
    backdrop-filter: blur(18px) saturate(135%);
}

.mm-topbar-title,
.mm-topbar-title strong {
    font-size: var(--mm-font-sm);
}

.mm-page-host {
    padding: var(--mm-space-2) !important;
}

.mm-page-shell {
    width: 100%;
}

/* Shared page header */
.mm-page-header {
    margin-bottom: var(--mm-space-3);
    padding: var(--mm-space-4);
    overflow: hidden;
    border: 1px solid var(--mm-border);
    border-top-color: rgba(67, 162, 255, .62);
    border-radius: var(--mm-radius-lg);
    background:
        radial-gradient(circle at 72% 0%, rgba(22, 133, 255, .09), transparent 36%),
        linear-gradient(145deg, rgba(13, 29, 48, .98), rgba(8, 20, 34, .98));
    box-shadow: var(--mm-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.mm-page-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-space-4);
}

.mm-page-header__content {
    min-width: 0;
}

.mm-page-header__title {
    margin: 0;
    font-size: var(--mm-font-xl);
    line-height: 1.08;
}

.mm-page-header__description {
    max-width: 68ch;
    margin: var(--mm-space-1) 0 0;
    color: var(--mm-muted);
    font-size: var(--mm-font-sm);
}

.mm-page-header__actions,
.mm-page-header__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mm-space-2);
}

/* Surfaces */
.mm-card,
.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.popover,
.toast,
.list-group-item,
.accordion-item {
    color: var(--mm-text);
    border-color: var(--mm-border);
    background: linear-gradient(145deg, rgba(14, 28, 45, .98), rgba(9, 21, 35, .98));
}

.mm-card,
.card,
.modal-content,
.offcanvas,
.toast,
.accordion-item {
    border-radius: var(--mm-radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.mm-card,
.card {
    border: 1px solid var(--mm-border);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.offcanvas-header,
.accordion-button {
    color: var(--mm-text);
    border-color: var(--mm-border-muted);
    background: rgba(10, 24, 40, .84);
}

.card-body,
.modal-body,
.offcanvas-body {
    padding: var(--mm-space-4);
}

.dropdown-menu {
    padding: var(--mm-space-1);
    border-radius: var(--mm-radius-sm);
    box-shadow: var(--mm-shadow-md);
}

.dropdown-item {
    min-height: 2.236rem;
    display: flex;
    align-items: center;
    border-radius: .5rem;
    color: var(--mm-text-soft);
    font-size: var(--mm-font-sm);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    color: var(--mm-text);
    background: var(--mm-accent-soft);
}

.dropdown-divider,
hr {
    border-color: var(--mm-border-muted);
    opacity: 1;
}

/* Controls */
.form-control,
.form-select,
.input-group-text,
.form-control:disabled,
.form-select:disabled {
    min-height: var(--mm-control-height);
    color: var(--mm-text);
    border-color: var(--mm-border);
    border-radius: var(--mm-radius-sm);
    background-color: rgba(4, 16, 29, .88);
    font-size: var(--mm-font-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}

.form-control::placeholder {
    color: var(--mm-muted-2);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--mm-border-strong);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    color: var(--mm-text);
    border-color: var(--mm-accent-2);
    background-color: rgba(5, 18, 32, .98);
    box-shadow: 0 0 0 .2rem rgba(22, 133, 255, .13);
}

.form-check-input {
    border-color: var(--mm-border-strong);
    background-color: #071524;
}

.form-check-input:checked {
    border-color: var(--mm-accent);
    background-color: var(--mm-accent);
}

.form-range::-webkit-slider-runnable-track {
    background: #314050;
}

.form-range::-webkit-slider-thumb {
    background: var(--mm-accent);
}

.form-range::-moz-range-track {
    background: #314050;
}

.form-range::-moz-range-thumb {
    border-color: var(--mm-accent);
    background: var(--mm-accent);
}

/* Buttons */
.btn {
    min-height: var(--mm-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mm-space-1);
    padding: .5rem var(--mm-space-3);
    border-radius: var(--mm-radius-sm);
    font-size: var(--mm-font-sm);
    font-weight: 600;
    line-height: 1.15;
    box-shadow: none;
}

.btn-sm {
    min-height: var(--mm-control-height-sm);
    padding: .382rem .764rem;
    font-size: var(--mm-font-xs);
}

.btn-lg {
    min-height: 3.236rem;
    padding: .618rem 1.272rem;
    font-size: var(--mm-font-md);
}

.btn-accent,
.btn-primary {
    color: #fff;
    border-color: #217ee0;
    background: linear-gradient(180deg, #238cff, #116fdb);
}

.btn-accent:hover,
.btn-accent:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    color: #fff;
    border-color: #48a5ff;
    background: linear-gradient(180deg, #3498ff, #1778e5);
    box-shadow: 0 0 0 .2rem rgba(22, 133, 255, .13);
}

.btn-success {
    color: #fff;
    border-color: #279840;
    background: linear-gradient(180deg, #25a844, #168632);
}

.btn-success:hover,
.btn-success:focus-visible {
    color: #fff;
    border-color: #37bb54;
    background: linear-gradient(180deg, #31b950, #1a9138);
}

.btn-outline-light,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-info {
    color: var(--mm-text-soft);
    border-color: var(--mm-border-strong);
    background: rgba(8, 21, 35, .72);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-info:hover,
.btn-outline-info:focus-visible {
    color: #fff;
    border-color: var(--mm-accent-border);
    background: var(--mm-accent-soft);
}

.btn-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    color: #fff;
}

.mm-icon-button,
.archive-play-button,
.archive-actions-menu > .btn {
    width: var(--mm-icon-control);
    min-width: var(--mm-icon-control);
    height: var(--mm-icon-control);
    min-height: var(--mm-icon-control);
    padding: 0;
    border-radius: var(--mm-radius-sm);
}

/* Badges, alerts, progress */
.badge {
    padding: .382rem .618rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .01em;
}

.alert {
    padding: var(--mm-space-3);
    border-radius: var(--mm-radius-sm);
    font-size: var(--mm-font-sm);
}

.alert-info {
    color: #bceeff;
    border-color: rgba(34, 195, 214, .3);
    background: rgba(34, 195, 214, .09);
}

.alert-success {
    color: #a9efb5;
    border-color: rgba(31, 157, 58, .34);
    background: var(--mm-success-soft);
}

.alert-danger {
    color: #ffc4c7;
    border-color: rgba(255, 77, 85, .34);
    background: rgba(255, 77, 85, .09);
}

.progress {
    height: .618rem;
    overflow: hidden;
    border: 1px solid rgba(79, 108, 136, .22);
    border-radius: 999px;
    background: #273441;
}

.progress-bar {
    background: linear-gradient(90deg, var(--mm-accent), #3ca4ff);
}

/* Tables */
.table {
    --bs-table-color: var(--mm-text-soft);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--mm-border-muted);
    --bs-table-striped-bg: rgba(22, 133, 255, .025);
    --bs-table-hover-bg: rgba(22, 133, 255, .045);
    color: var(--mm-text-soft);
    font-size: var(--mm-font-sm);
}

.table > :not(caption) > * > * {
    padding: .618rem .764rem;
    border-bottom-color: var(--mm-border-muted);
}

.table thead th {
    color: var(--mm-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Navigation */
.nav-tabs {
    gap: var(--mm-space-1);
    border-bottom-color: var(--mm-border);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    min-height: var(--mm-control-height-sm);
    padding: .382rem .764rem;
    border-radius: var(--mm-radius-sm);
    color: var(--mm-muted);
    font-size: var(--mm-font-sm);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--mm-text);
    border-color: var(--mm-accent-border);
    background: var(--mm-accent-soft);
}

/* Archive is the visual reference for the rest of the product. */
.archive-page {
    gap: var(--mm-space-3) !important;
}

.archive-toolbar {
    padding: var(--mm-space-3) !important;
    border-color: var(--mm-border) !important;
    border-radius: var(--mm-radius-md) !important;
    background: linear-gradient(145deg, rgba(13, 28, 46, .98), rgba(8, 20, 34, .98)) !important;
}

.archive-toolbar__stats {
    gap: var(--mm-space-2);
}

.archive-toolbar-stat {
    min-height: var(--mm-control-height);
    padding: .45rem .764rem;
    border-color: var(--mm-border);
    border-radius: var(--mm-radius-sm);
    background: rgba(5, 17, 30, .78);
    color: var(--mm-text-soft);
}

.archive-toolbar-stat:hover,
.archive-toolbar-stat.active {
    border-color: rgba(67, 162, 255, .48);
    background: linear-gradient(145deg, rgba(22, 133, 255, .2), rgba(22, 133, 255, .08));
}

.archive-toolbar-stat__content small {
    color: var(--mm-muted);
    font-size: .67rem;
}

.archive-toolbar-stat__content strong {
    color: var(--mm-text);
    font-size: .9rem;
}

.archive-table-card,
.archive-group,
.archive-card {
    border-color: var(--mm-border) !important;
    background: linear-gradient(145deg, rgba(13, 28, 46, .98), rgba(8, 20, 34, .98)) !important;
}

.archive-table tbody td {
    color: var(--mm-text-soft);
}

.archive-file-title {
    color: var(--mm-text);
    font-weight: 650;
}

.archive-file-meta,
.archive-pagination,
.archive-page-size {
    color: var(--mm-muted);
    font-size: var(--mm-font-xs);
}

.archive-pagination {
    border-top-color: var(--mm-border-muted) !important;
    background: rgba(11, 25, 41, .98) !important;
}

.archive-metrics-ticker,
.archive-metrics-compact {
    border-color: rgba(22, 133, 255, .24) !important;
    background: rgba(4, 17, 31, .92) !important;
}

/* Mastering pages */
.simple-mastering {
    --mastering-accent: var(--mm-accent);
    --mastering-accent-soft: var(--mm-accent-soft);
    --mastering-border: var(--mm-border-muted);
    --mastering-border-strong: var(--mm-border);
    --mastering-panel: rgba(9, 22, 37, .92);
    --mastering-panel-strong: rgba(13, 28, 46, .98);
    --mastering-muted: var(--mm-muted);
    --mastering-text: var(--mm-text);
}

.simple-mastering__workspace {
    grid-template-columns: minmax(144px, .618fr) minmax(0, 3.618fr);
    min-height: 38.2rem;
    border-color: var(--mm-border);
    border-radius: var(--mm-radius-lg);
    background: linear-gradient(145deg, rgba(13, 28, 46, .98), rgba(7, 18, 31, .99));
    box-shadow: var(--mm-shadow-md);
}

.simple-mastering__rail {
    padding: var(--mm-space-5) var(--mm-space-4);
    border-right-color: var(--mm-border-muted);
    background: rgba(5, 17, 30, .54);
}

.simple-mastering__content {
    padding: var(--mm-space-4);
}

.simple-mastering__hero {
    margin-bottom: var(--mm-space-3);
}

.simple-mastering__hero h1 {
    font-size: var(--mm-font-xl);
}

.simple-mastering__hero p,
.simple-mastering__section-heading p {
    color: var(--mm-muted);
    font-size: var(--mm-font-sm);
}

.simple-mastering__panel,
.simple-mastering__selected-source,
.simple-mastering__card,
.simple-mastering__intent-panel,
.simple-mastering__progress-card {
    border-color: var(--mm-border) !important;
    border-radius: var(--mm-radius-md) !important;
    background: linear-gradient(145deg, rgba(14, 29, 47, .98), rgba(8, 20, 34, .98)) !important;
}

.simple-mastering__step.is-active .simple-mastering__step-dot {
    border-color: var(--mm-accent-2);
    color: #bdddff;
    box-shadow: 0 0 0 4px rgba(22, 133, 255, .1), 0 0 20px rgba(22, 133, 255, .16);
}

.simple-mastering__wave,
.simple-mastering__card-icon {
    color: var(--mm-accent-2) !important;
}

/* Song details / analysis / report pages */
[class*="song-detail"] .mm-card,
[class*="analysis"] .mm-card,
[class*="report"] .mm-card {
    border-color: var(--mm-border);
    background: linear-gradient(145deg, rgba(14, 29, 47, .98), rgba(8, 20, 34, .98));
}

.song-detail-summary-grid,
.song-detail-grid,
.analysis-grid,
.report-grid {
    gap: var(--mm-space-3) !important;
}

.song-detail-summary-grid--wide,
.song-detail-summary-grid--console {
    grid-template-columns: minmax(0, 1.618fr) minmax(16rem, 1fr);
}

/* Pricing / plan / billing */
.mm-public-content > h1:first-child,
.mm-main-content h1:first-child {
    margin-bottom: var(--mm-space-4);
}

.mm-public-content .row.g-4,
.mm-main-content .row.g-4 {
    --bs-gutter-x: var(--mm-space-4);
    --bs-gutter-y: var(--mm-space-4);
}

.display-4 {
    font-size: clamp(2.058rem, 1.82rem + 1vw, 2.618rem);
}

.display-5,
.display-6 {
    font-size: clamp(1.618rem, 1.5rem + .45vw, 2.058rem);
}

/* Public pages */
.mm-navbar,
.navbar.mm-navbar {
    min-height: var(--mm-topbar-height);
    height: var(--mm-topbar-height);
    background: rgba(3, 12, 25, .94);
    border-bottom: 1px solid var(--mm-border-muted) !important;
    backdrop-filter: blur(18px) saturate(135%);
}

.mm-public-content {
    width: min(100%, 1180px);
    padding-top: var(--mm-space-5) !important;
    padding-bottom: var(--mm-space-5) !important;
}

.home-release__hero,
.home-release__step,
.home-release__card,
.home-release__note,
.home-release__cta {
    border-color: var(--mm-border) !important;
}

.home-release__step,
.home-release__card,
.home-release__note {
    border-radius: var(--mm-radius-md) !important;
    background: linear-gradient(145deg, rgba(14, 29, 47, .96), rgba(8, 20, 34, .96)) !important;
}

.mm-footer,
.mm-legal-footer {
    color: var(--mm-muted);
    border-top-color: var(--mm-border-muted) !important;
    background: #06111e;
}

/* Global audio player */
.mm-global-player {
    gap: var(--mm-space-2) !important;
    padding: var(--mm-space-2) var(--mm-space-3) !important;
    border-color: var(--mm-border) !important;
    background: rgba(5, 14, 25, .985) !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(18px);
}

.mm-global-player__track strong {
    color: var(--mm-text);
    font-size: var(--mm-font-sm);
}

.mm-global-player__track span,
.mm-global-player__time {
    color: var(--mm-muted);
    font-size: .72rem;
}

/* Focus treatment */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgba(67, 162, 255, .82);
    outline-offset: 2px;
}

/* Responsive rhythm */
@media (max-width: 1199.98px) {
    .mm-page-header {
        padding: var(--mm-space-3);
    }

    .mm-page-header__row {
        gap: var(--mm-space-3);
    }

    .simple-mastering__workspace {
        grid-template-columns: 144px minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    :root {
        --mm-sidebar-width: min(86vw, 280px);
    }

    .mm-page-host {
        padding: var(--mm-space-2) !important;
    }

    .mm-page-header__row {
        align-items: flex-start;
        flex-direction: column;
    }

    .mm-page-header__actions {
        width: 100%;
    }

    .simple-mastering__workspace {
        grid-template-columns: 1fr;
    }

    .simple-mastering__rail {
        padding: var(--mm-space-3);
        border-right: 0;
        border-bottom: 1px solid var(--mm-border-muted);
    }

    .simple-mastering__steps {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .simple-mastering__step-line {
        width: auto;
        height: 1px;
        flex: 1 1 auto;
        margin: 0 var(--mm-space-2);
    }

    .song-detail-summary-grid--wide,
    .song-detail-summary-grid--console {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    html {
        font-size: 14px;
    }

    .mm-page-header {
        border-radius: var(--mm-radius-md);
    }

    .mm-page-header__title {
        font-size: var(--mm-font-lg);
    }

    .mm-public-content {
        padding-inline: var(--mm-space-3);
    }

    .btn:not(.mm-icon-button):not(.archive-play-button) {
        min-height: 2.764rem;
    }

    .simple-mastering__content {
        padding: var(--mm-space-3);
    }

    .simple-mastering__steps {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}