:root {
    --bg: #150F0D;
    --surface: #1E1613;
    --surface-2: #241A16;

    --border: #3A2A23;

    --red: #E84C3D;
    --amber: #F29D0E;

    --text: #FBEEE4;
    --muted: #C8B3A8;
    --faint: #8A7469;

    --green: #49C878;

    --gradient:
        linear-gradient(
            135deg,
            var(--red),
            var(--amber)
        );

    --shadow:
        0 24px 70px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(232, 76, 61, 0.07),
            transparent 32%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(242, 157, 14, 0.045),
            transparent 34%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1.5;
}

button,
input,
select {
    font-family: inherit;
}

button,
select {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   APP
========================================================= */

.app {
    width: min(
        calc(100% - 48px),
        1250px
    );

    min-height: 100vh;

    margin: 0 auto;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 81px;

    border-bottom:
        1px solid
        var(--border);

    gap: 24px;
}


/* ---------------------------------------------------------
   BRAND
--------------------------------------------------------- */

.brand {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand-logo {
    display: block;

    width: auto;
    height: 52px;

    max-width: 240px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   USER / STATUS AREA
--------------------------------------------------------- */

.topbar-user {
    display: flex;
    align-items: center;

    gap: 18px;

    flex-shrink: 0;
}


.user-info {
    display: flex;
    align-items: center;

    gap: 9px;

    white-space: nowrap;
}


.user-info strong {
    color: var(--text);

    font-size: 11px;
    font-weight: 700;

    line-height: 1;
}


.user-info span {
    display: inline-flex;
    align-items: center;

    height: 20px;

    padding: 0 7px;

    border:
        1px solid
        var(--border);

    border-radius: 5px;

    background:
        var(--surface-2);

    color: var(--amber);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.08em;
    line-height: 1;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   LOGOUT
--------------------------------------------------------- */

.logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 30px;

    padding: 0 11px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    background: transparent;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}

.logout-button:hover {
    border-color:
        rgba(232, 76, 61, 0.45);

    background:
        rgba(232, 76, 61, 0.07);

    color: var(--text);

    transform: translateY(-1px);
}

.logout-button:active {
    transform: translateY(0);
}

.logout-button:disabled {
    opacity: 0.55;

    cursor: wait;

    transform: none;
}


/* ---------------------------------------------------------
   ONLINE STATUS
--------------------------------------------------------- */

.topbar-status {
    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;
}


.status-dot {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(73, 200, 120, 0.08);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        215px;

    align-items: center;

    gap: 50px;

    padding:
        58px 0
        45px;
}


.hero-copy {
    min-width: 0;
}


.eyebrow {
    margin-bottom: 12px;

    color: var(--amber);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.hero h1 {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(
            48px,
            5.1vw,
            70px
        );

    font-weight: 800;

    letter-spacing: -0.055em;

    line-height: 0.96;
}


.hero h1 span {
    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.hero p {
    max-width: 650px;

    margin:
        22px 0 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   HERO CARD
--------------------------------------------------------- */

.hero-card {
    min-height: 142px;

    padding: 27px 26px;

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0)
        ),
        var(--surface);

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.14);
}


.hero-card-label {
    color: var(--faint);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.hero-card-number {
    margin-top: 6px;

    color: var(--text);

    font-size: 42px;
    font-weight: 700;

    letter-spacing: -0.045em;

    line-height: 1;
}


.hero-card-sub {
    margin-top: 7px;

    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   TOOLBAR
========================================================= */

.toolbar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        205px
        168px;

    gap: 10px;

    margin-bottom: 50px;
}


.search-box {
    position: relative;

    min-width: 0;
}


.search-box svg {
    position: absolute;

    left: 15px;
    top: 50%;

    width: 15px;
    height: 15px;

    color: var(--faint);

    transform:
        translateY(-50%);
}


.search-box input {
    display: block;

    width: 100%;
    height: 47px;

    padding:
        0 15px 0 43px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    outline: none;

    background:
        var(--surface);

    color: var(--text);

    font-size: 11px;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.search-box input::placeholder {
    color: var(--faint);
}


.search-box input:focus {
    border-color:
        rgba(232, 76, 61, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(232, 76, 61, 0.06);
}


.toolbar select {
    width: 100%;
    height: 47px;

    padding:
        0 13px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    outline: none;

    background:
        var(--surface);

    color: var(--text);

    font-size: 11px;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.toolbar select:focus {
    border-color:
        rgba(232, 76, 61, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(232, 76, 61, 0.06);
}


.toolbar select option {
    background: var(--surface);

    color: var(--text);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.section-eyebrow {
    margin-bottom: 3px;

    color: var(--amber);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.section-heading h2 {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 700;

    letter-spacing: -0.035em;

    line-height: 1.1;
}


.results-count {
    padding-bottom: 3px;

    color: var(--faint);

    font-size: 10px;
    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   RECORDINGS
========================================================= */

.recordings {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: 13px;

    padding-bottom: 80px;
}


/* ---------------------------------------------------------
   RECORDING CARD
--------------------------------------------------------- */

.recording-card {
    position: relative;

    min-width: 0;

    padding: 21px;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.018),
            rgba(255,255,255,0)
        ),
        var(--surface);

    cursor: pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}


.recording-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(232, 76, 61, 0.32);

    background:
        var(--surface-2);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
   RECORDING TOP
--------------------------------------------------------- */

.recording-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}


.recording-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        rgba(232, 76, 61, 0.12);

    color: var(--red);
}


.recording-icon svg {
    width: 17px;
    height: 17px;
}


/* ---------------------------------------------------------
   STATUS
--------------------------------------------------------- */

.recording-status {
    display: inline-flex;
    align-items: center;

    min-height: 21px;

    padding:
        0 8px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.06em;

    line-height: 1;

    text-transform: uppercase;
}


.recording-status.complete {
    background:
        rgba(73, 200, 120, 0.10);

    color:
        #49C878;
}


.recording-status.recording {
    background:
        rgba(242, 157, 14, 0.12);

    color:
        var(--amber);
}


.recording-status.failed,
.recording-status.error {
    background:
        rgba(232, 76, 61, 0.12);

    color:
        #ff8176;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.recording-title {
    overflow: hidden;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.35;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.recording-presenter {
    overflow: hidden;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   META
--------------------------------------------------------- */

.recording-meta {
    display: flex;
    align-items: center;

    gap: 0;

    margin-top: 19px;
    padding-top: 15px;

    border-top:
        1px solid
        var(--border);

    color: var(--faint);

    font-size: 9px;

    white-space: nowrap;
}


.meta-item {
    overflow: hidden;

    text-overflow: ellipsis;
}


.meta-item:not(:last-child)::after {
    content: "—";

    display: inline-block;

    margin:
        0 9px;

    color:
        rgba(138, 116, 105, 0.5);
}


/* =========================================================
   EMPTY / LOADING
========================================================= */

.empty {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 180px;

    padding: 30px;

    border:
        1px dashed
        var(--border);

    border-radius: 15px;

    color: var(--muted);

    text-align: center;
}


.empty strong {
    color: var(--text);

    font-size: 12px;
}


.empty span {
    margin-top: 5px;

    color: var(--faint);

    font-size: 10px;
}


.loading {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 180px;

    gap: 11px;

    color: var(--muted);

    font-size: 10px;
}


.spinner {
    width: 15px;
    height: 15px;

    border:
        2px solid
        var(--border);

    border-top-color:
        var(--red);

    border-radius: 50%;

    animation:
        spin 700ms linear infinite;
}


@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        0 0 25px;

    color: var(--faint);

    font-size: 9px;

    text-align: center;
}


/* =========================================================
   MODAL
========================================================= */

.modal-backdrop {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background:
        rgba(10, 7, 6, 0.82);

    backdrop-filter:
        blur(8px);
}


.modal-backdrop[hidden] {
    display: none;
}


.modal {
    position: relative;

    width: min(
        100%,
        700px
    );

    max-height:
        calc(100vh - 50px);

    overflow-y: auto;

    padding: 30px;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background:
        var(--surface);

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.5);
}


.modal-close {
    position: absolute;

    top: 18px;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    background:
        var(--surface-2);

    color: var(--muted);

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}


.modal-close:hover {
    color: var(--text);

    border-color:
        rgba(232, 76, 61, 0.4);
}


/* ---------------------------------------------------------
   MODAL HEADER
--------------------------------------------------------- */

.modal-eyebrow {
    margin-bottom: 6px;

    color: var(--amber);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.modal-header h2 {
    margin: 0;

    padding-right: 40px;

    color: var(--text);

    font-size: 24px;
    font-weight: 700;

    letter-spacing: -0.035em;
}


.modal-subtitle {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}


/* ---------------------------------------------------------
   PLAYER
--------------------------------------------------------- */

.modal-player {
    margin-top: 25px;

    padding: 15px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background:
        var(--surface-2);
}


.modal-player audio {
    display: block;

    width: 100%;

    height: 38px;
}


/* ---------------------------------------------------------
   DETAIL GRID
--------------------------------------------------------- */

.modal-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 15px;
}


.detail {
    min-width: 0;

    padding: 13px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background:
        rgba(255,255,255,0.012);
}


.detail span {
    display: block;

    margin-bottom: 4px;

    color: var(--faint);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.detail strong {
    display: block;

    overflow: hidden;

    color: var(--text);

    font-size: 10px;
    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   TRACKLIST
========================================================= */

.tracklist-section {
    margin-top: 25px;
}


.tracklist-heading {
    margin-bottom: 10px;

    color: var(--text);

    font-size: 11px;
    font-weight: 700;
}


.tracklist {
    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 9px;
}


.track {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border-bottom:
        1px solid
        var(--border);
}


.track:last-child {
    border-bottom: 0;
}


.track-number {
    width: 20px;

    flex-shrink: 0;

    color: var(--faint);

    font-size: 9px;

    text-align: center;
}


.track-info {
    min-width: 0;
}


.track-title {
    overflow: hidden;

    color: var(--text);

    font-size: 10px;
    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.track-artist {
    overflow: hidden;

    margin-top: 1px;

    color: var(--muted);

    font-size: 9px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   MODAL ACTIONS
========================================================= */

.modal-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 22px;
}


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding:
        0 16px;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;
}


.button.primary {
    background:
        var(--gradient);

    color: #FFFFFF;

    box-shadow:
        0 8px 24px
        rgba(232, 76, 61, 0.13);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .hero {
        grid-template-columns:
            1fr;

        gap: 30px;
    }

    .hero-card {
        width: 220px;
    }

    .toolbar {
        grid-template-columns:
            minmax(0, 1fr)
            180px;
    }

    .toolbar select:last-child {
        grid-column: 2;
    }
}


@media (max-width: 700px) {

    .app {
        width:
            min(
                calc(100% - 30px),
                1250px
            );
    }

    .topbar {
        min-height: 70px;

        gap: 12px;
    }

    .brand-logo {
        height: 43px;
        max-width: 190px;
    }

    .topbar-user {
        gap: 10px;
    }

    .user-info span {
        display: none;
    }

    .topbar-status {
        display: none;
    }

    .logout-button {
        height: 28px;

        padding:
            0 9px;
    }

    .hero {
        padding:
            45px 0
            35px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .toolbar {
        grid-template-columns:
            1fr;
    }

    .toolbar select:last-child {
        grid-column: auto;
    }

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


@media (max-width: 500px) {

    .app {
        width:
            calc(100% - 24px);
    }

    .topbar {
        min-height: 65px;
    }

    .brand-logo {
        height: 39px;
        max-width: 160px;
    }

    .user-info {
        display: none;
    }

    .hero {
        padding-top: 38px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-card {
        width: 100%;
    }

    .recordings {
        grid-template-columns: 1fr;
    }

    .modal-backdrop {
        padding: 12px;
    }

    .modal {
        padding: 23px 18px;

        max-height:
            calc(100vh - 24px);
    }

    .modal-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .modal-actions {
        justify-content: stretch;
    }

    .button {
        width: 100%;
    }
}


@media (max-width: 360px) {

    .modal-grid {
        grid-template-columns: 1fr;
    }

    .recording-meta {
        font-size: 8px;
    }
}