/* ── MusicColab Design System — Dark Studio ───────────────────── */
:root {
    --mc-bg:            #080b14;
    --mc-bg2:           #0f1420;
    --mc-bg3:           #161c2e;
    --mc-surface:       #1a2035;
    --mc-border:        rgba(255,255,255,0.07);
    --mc-border-strong: rgba(255,255,255,0.14);
    --mc-text:          #e8ecf4;
    --mc-text2:         #7a86a0;
    --mc-text3:         #4a5468;
    --mc-accent:        oklch(65% 0.25 272);
    --mc-accent2:       oklch(65% 0.22 182);
    --mc-accent-rgb:    120, 80, 240;
    --mc-accent-text:   #fff;
    --mc-avail:         oklch(65% 0.20 142);
    --mc-unavail:       oklch(55% 0.15 25);
    --mc-pill-bg:       rgba(120,80,240,0.15);
    --mc-pill-text:     oklch(65% 0.25 272);
    --mc-nav-bg:        rgba(8,11,20,0.92);
    --mc-card-bg:       #1a2035;
    --mc-input-bg:      #161c2e;
    --mc-radius:        14px;
    --mc-toolbar-h:     72px;
    --font-display:     'Space Grotesk', sans-serif;
    --font-body:        'DM Sans', sans-serif;

    /* legacy aliases kept for admin pages */
    --mc-bg-card:       #1a2035;
    --mc-bg-elevated:   #161c2e;
    --mc-purple:        oklch(65% 0.25 272);
    --mc-purple-dark:   rgba(120,80,240,0.15);
    --mc-teal:          oklch(65% 0.22 182);
    --mc-gold:          #f59e0b;
    --mc-shadow:        0 4px 24px rgba(0,0,0,0.45);
    --mc-header-h:      0px;
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--font-body);
    background-color: var(--mc-bg);
    color: var(--mc-text);
    margin: 0;
    padding: 0;
    height: 100%;
}

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

a:not(.toolbar-item) { color: var(--mc-accent); text-decoration: none; }
a:not(.toolbar-item):hover { opacity: 0.85; }
.text-muted  { color: var(--mc-text2) !important; }
h1, h2, h3, h4, h5 { color: var(--mc-text); font-family: var(--font-display); }

/* ── Page Layout ─────────────────────────────────────────────── */
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--mc-bg);
}

main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.content.px-4 {
    padding: 0 !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 0; height: 0; }

/* ── Bottom Nav ──────────────────────────────────────────────── */
.bottom-toolbar {
    height: var(--mc-toolbar-h);
    background: var(--mc-nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--mc-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.toolbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--mc-text3);
    text-decoration: none !important;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
    position: relative;
    transition: color 0.15s;
}

.toolbar-item:hover { color: var(--mc-text2); }

.toolbar-item.active,
.toolbar-item ::deep.active {
    color: var(--mc-accent);
}

/* Blazor NavLink active class */
.toolbar-item.active .toolbar-label,
a.toolbar-item.active .toolbar-label {
    font-weight: 700;
    color: var(--mc-accent);
}

.toolbar-nav-icon svg {
    display: block;
}

.toolbar-label {
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-body);
    letter-spacing: -0.01em;
}

.toolbar-badge-dot {
    position: absolute;
    top: 4px;
    right: calc(50% - 14px);
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--mc-accent);
    border: 2px solid var(--mc-bg);
}

.toolbar-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--mc-accent);
    border: 2px solid var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--mc-accent-text);
    font-family: var(--font-body);
    padding: 0 3px;
}

/* ── Screen wrapper ──────────────────────────────────────────── */
.mc-screen {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--mc-bg);
    color: var(--mc-text);
}

/* ── Top Bar ─────────────────────────────────────────────────── */
.mc-topbar {
    padding: 10px 20px;
    background: var(--mc-bg);
    border-bottom: 1px solid var(--mc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 8px;
}

.mc-topbar-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--mc-text);
    letter-spacing: -0.01em;
    text-align: center;
    flex: 2;
}

.mc-topbar-title.large {
    font-size: 22px;
    letter-spacing: -0.03em;
    text-align: left;
    flex: unset;
}

.mc-topbar-side {
    flex: 1;
    display: flex;
    align-items: center;
}

.mc-topbar-side.right { justify-content: flex-end; }

/* ── Back Button ─────────────────────────────────────────────── */
.mc-back-btn {
    background: none;
    border: none;
    color: var(--mc-accent);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.mc-back-btn:hover { opacity: 0.8; }

/* ── Feed Header ─────────────────────────────────────────────── */
.mc-feed-header {
    padding: 14px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--mc-bg);
}

.mc-feed-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--mc-text);
    letter-spacing: -0.04em;
}

.mc-feed-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mc-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mc-text2);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: color 0.15s;
}

.mc-icon-btn:hover { color: var(--mc-text); }
.mc-icon-btn a { color: inherit; }

.mc-notif-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--mc-accent);
    border: 2px solid var(--mc-bg);
}

/* ── Search Bar ──────────────────────────────────────────────── */
.mc-search {
    margin: 10px 16px;
    background: var(--mc-input-bg);
    border-radius: 12px;
    border: 1px solid var(--mc-border);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
}

.mc-search svg { color: var(--mc-text3); flex-shrink: 0; }

.mc-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--mc-text);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 0;
    flex: 1;
    width: 100%;
}

.mc-search input::placeholder { color: var(--mc-text3); }

/* ── Filter Chips ────────────────────────────────────────────── */
.mc-filter-row {
    overflow-x: auto;
    padding: 4px 16px 12px;
    flex-shrink: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mc-filter-row::-webkit-scrollbar { display: none; }

.mc-filter-row-inner {
    display: flex;
    gap: 8px;
    width: max-content;
}

.mc-chip {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid var(--mc-border);
    background: var(--mc-surface);
    color: var(--mc-text2);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}

.mc-chip:hover { border-color: var(--mc-border-strong); color: var(--mc-text); }

.mc-chip.active {
    background: var(--mc-accent);
    color: var(--mc-accent-text);
    border-color: transparent;
}

.mc-chip.small {
    padding: 6px 12px;
    font-size: 12px;
}

/* ── Pills / Tags ────────────────────────────────────────────── */
.mc-pill {
    display: inline-block;
    background: var(--mc-pill-bg);
    color: var(--mc-pill-text);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body);
    white-space: nowrap;
}

.mc-pill.small {
    padding: 2px 8px;
    font-size: 10px;
}

.mc-pill.accent {
    background: var(--mc-accent);
    color: var(--mc-accent-text);
}

.mc-pill.urgent {
    background: rgba(var(--mc-accent-rgb),0.15);
    color: var(--mc-accent);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
}

.mc-pill.urgent.large {
    font-size: 11px;
    padding: 4px 10px;
}

/* ── Availability Badge ──────────────────────────────────────── */
.mc-avail-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

.mc-avail-badge.available {
    background: color-mix(in srgb, var(--mc-avail) 15%, transparent);
    color: var(--mc-avail);
}

.mc-avail-badge.busy {
    background: color-mix(in srgb, var(--mc-unavail) 15%, transparent);
    color: var(--mc-unavail);
}

.mc-avail-badge.large {
    font-size: 11px;
    padding: 4px 10px;
}

/* ── Available-Now Banner ────────────────────────────────────── */
.mc-avail-banner {
    margin: 0 16px 12px;
    padding: 10px 14px;
    background: var(--mc-pill-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mc-avail-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--mc-avail);
    flex-shrink: 0;
}

.mc-avail-banner span {
    font-size: 13px;
    color: var(--mc-pill-text);
    font-family: var(--font-body);
    font-weight: 600;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.mc-avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    text-transform: uppercase;
}

.mc-avatar-ring {
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent2));
}

.mc-avatar-ring-inner {
    padding: 2px;
    border-radius: 50%;
    background: var(--mc-bg);
}

/* ── Stars ───────────────────────────────────────────────────── */
.mc-stars {
    font-size: 11px;
    color: var(--mc-accent);
    font-family: var(--font-body);
}

.mc-stars .rating-num { color: var(--mc-text3); }

/* ── Cards ───────────────────────────────────────────────────── */
.mc-card {
    background: var(--mc-card-bg);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
}

.mc-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
}

/* Musician card (compact) */
.mc-musician-card {
    background: var(--mc-card-bg);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
    text-decoration: none !important;
    color: var(--mc-text);
}

.mc-musician-card:hover {
    border-color: var(--mc-border-strong);
    color: var(--mc-text);
}

.mc-musician-card-info { flex: 1; min-width: 0; }

.mc-musician-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--mc-text);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-musician-card-sub {
    font-size: 12px;
    color: var(--mc-text2);
    margin-top: 1px;
}

.mc-musician-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.mc-musician-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Gig Card ────────────────────────────────────────────────── */
.mc-gig-card {
    background: var(--mc-card-bg);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.mc-gig-card:hover { border-color: var(--mc-border-strong); }

.mc-gig-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.mc-gig-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--mc-text);
    letter-spacing: -0.02em;
    flex: 1;
}

.mc-gig-card-pills {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.mc-gig-card-footer {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.mc-gig-poster-name {
    font-size: 12px;
    color: var(--mc-text2);
    font-family: var(--font-body);
}

.mc-gig-pay {
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--mc-accent);
}

.mc-gig-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--mc-text3);
    font-family: var(--font-body);
}

/* ── Jam Card ────────────────────────────────────────────────── */
.mc-jam-card {
    background: var(--mc-card-bg);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.mc-jam-card:hover { border-color: var(--mc-border-strong); }

.mc-jam-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.mc-jam-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--mc-text);
    letter-spacing: -0.02em;
}

.mc-jam-virtual-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
    white-space: nowrap;
    background: var(--mc-pill-bg);
    color: var(--mc-pill-text);
}

.mc-jam-virtual-badge.in-person {
    background: color-mix(in srgb, var(--mc-accent2) 15%, transparent);
    color: var(--mc-accent2);
}

.mc-jam-detail {
    font-size: 12px;
    color: var(--mc-text3);
    font-family: var(--font-body);
    margin-top: 2px;
}

.mc-jam-detail.genre { color: var(--mc-text2); margin-top: 4px; }

.mc-jam-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.mc-jam-host {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-jam-host-name {
    font-size: 12px;
    color: var(--mc-text2);
    font-family: var(--font-body);
}

.mc-jam-spots {
    font-size: 12px;
    color: var(--mc-text3);
    font-family: var(--font-body);
}

/* ── Stats Bar ───────────────────────────────────────────────── */
.mc-stats-bar {
    display: flex;
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    overflow: hidden;
    margin: 16px 0;
}

.mc-stat {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    border-right: 1px solid var(--mc-border);
}

.mc-stat:last-child { border-right: none; }

.mc-stat-val {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--mc-text);
    letter-spacing: -0.03em;
    display: block;
}

.mc-stat-label {
    font-size: 11px;
    color: var(--mc-text3);
    font-family: var(--font-body);
    margin-top: 2px;
    display: block;
}

/* ── Info Card ───────────────────────────────────────────────── */
.mc-info-card {
    padding: 12px 16px;
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-info-row-label {
    font-size: 13px;
    color: var(--mc-text2);
    font-family: var(--font-body);
}

.mc-info-row-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-text);
    font-family: var(--font-body);
}

/* ── Section Label ───────────────────────────────────────────── */
.mc-section-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--mc-text2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

/* ── Bio / About Card ────────────────────────────────────────── */
.mc-bio-card {
    padding: 14px;
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    margin-bottom: 16px;
}

.mc-bio-text {
    margin: 0;
    font-size: 14px;
    color: var(--mc-text);
    line-height: 1.6;
    font-family: var(--font-body);
}

/* ── Media Placeholder ───────────────────────────────────────── */
.mc-media {
    border-radius: 12px;
    background: repeating-linear-gradient(
        45deg,
        var(--mc-bg3) 0px, var(--mc-bg3) 8px,
        var(--mc-surface) 8px, var(--mc-surface) 16px
    );
    border: 1px solid var(--mc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: var(--mc-text3);
    font-size: 11px;
    font-family: monospace;
}

/* ── Action Buttons ──────────────────────────────────────────── */
.mc-btn {
    border-radius: 10px;
    padding: 11px 20px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    letter-spacing: -0.01em;
    transition: opacity 0.15s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.mc-btn:hover { opacity: 0.88; text-decoration: none; }
.mc-btn:disabled { opacity: 0.5; cursor: default; }

.mc-btn.primary {
    background: var(--mc-accent);
    color: var(--mc-accent-text);
}

.mc-btn.ghost {
    background: transparent;
    color: var(--mc-accent);
    border: 1.5px solid var(--mc-accent);
    padding: 9.5px 20px;
}

.mc-btn.secondary {
    background: var(--mc-surface);
    color: var(--mc-text);
    border: 1px solid var(--mc-border);
}

.mc-btn.full { width: 100%; }

.mc-btn.large {
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
}

.mc-btn.small {
    padding: 7px 14px;
    font-size: 13px;
}

.mc-btn.danger {
    background: color-mix(in srgb, var(--mc-unavail) 15%, transparent);
    color: var(--mc-unavail);
    border: 1px solid color-mix(in srgb, var(--mc-unavail) 30%, transparent);
}

/* ── Tab Bar ─────────────────────────────────────────────────── */
.mc-tabs {
    display: flex;
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--mc-text2);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: -1px;
}

.mc-tab.active {
    border-bottom-color: var(--mc-accent);
    color: var(--mc-accent);
}

/* ── Form Fields ─────────────────────────────────────────────── */
.mc-field { margin-bottom: 12px; }

.mc-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--mc-text2);
    font-family: var(--font-body);
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mc-input, .mc-textarea {
    width: 100%;
    background: var(--mc-input-bg);
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--mc-text);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.mc-input:focus, .mc-textarea:focus {
    border-color: var(--mc-border-strong);
}

.mc-input::placeholder, .mc-textarea::placeholder { color: var(--mc-text3); }

.mc-textarea { min-height: 80px; resize: vertical; }

/* ── Toggle ──────────────────────────────────────────────────── */
.mc-toggle-track {
    width: 50px;
    height: 28px;
    border-radius: 99px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.mc-toggle-track.on  { background: var(--mc-accent); }
.mc-toggle-track.off { background: var(--mc-border-strong); }

.mc-toggle-thumb {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    background: #fff;
    position: absolute;
    top: 3px;
    transition: left 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.mc-toggle-track.on  .mc-toggle-thumb { left: 25px; }
.mc-toggle-track.off .mc-toggle-thumb { left: 3px; }

/* ── Availability Toggle Card ────────────────────────────────── */
.mc-avail-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    margin-bottom: 16px;
}

.mc-avail-toggle-text { flex: 1; }

.mc-avail-toggle-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-text);
    font-family: var(--font-body);
}

.mc-avail-toggle-sub {
    font-size: 12px;
    color: var(--mc-text2);
    font-family: var(--font-body);
}

/* ── Post Card (Feed) ────────────────────────────────────────── */
.mc-post {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mc-border);
}

.mc-post-header {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mc-post-user { flex: 1; min-width: 0; }

.mc-post-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mc-post-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--mc-text);
    cursor: pointer;
    letter-spacing: -0.02em;
}

.mc-post-name:hover { color: var(--mc-accent); }

.mc-post-meta {
    font-size: 11px;
    color: var(--mc-text3);
    font-family: var(--font-body);
    margin-top: 1px;
}

.mc-post-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--mc-pill-bg);
    color: var(--mc-pill-text);
    font-family: var(--font-body);
    white-space: nowrap;
}

.mc-post-text {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--mc-text);
    line-height: 1.5;
    font-family: var(--font-body);
}

.mc-post-actions {
    display: flex;
    margin-top: 12px;
}

.mc-post-action {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 0;
    color: var(--mc-text2);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.15s;
}

.mc-post-action:hover { color: var(--mc-text); }
.mc-post-action.liked { color: var(--mc-accent); font-weight: 700; }

.mc-post-action-icon { font-size: 15px; }

/* ── Stories Row ─────────────────────────────────────────────── */
.mc-stories {
    overflow-x: auto;
    flex-shrink: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mc-stories::-webkit-scrollbar { display: none; }

.mc-stories-inner {
    display: flex;
    gap: 12px;
    padding: 4px 20px 12px;
    width: max-content;
}

.mc-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.mc-story-add {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--mc-surface);
    border: 2px dashed var(--mc-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mc-accent);
}

.mc-story-name {
    font-size: 10px;
    color: var(--mc-text2);
    font-family: var(--font-body);
    max-width: 54px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Conversation List ───────────────────────────────────────── */
.mc-convo-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--mc-border);
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    text-decoration: none !important;
    color: var(--mc-text);
    transition: background 0.1s;
}

.mc-convo-item:hover {
    background: rgba(var(--mc-accent-rgb), 0.04);
    color: var(--mc-text);
}

.mc-convo-item.unread {
    background: rgba(var(--mc-accent-rgb), 0.05);
}

.mc-convo-avatar-wrap { position: relative; }

.mc-convo-unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--mc-accent);
    border: 2px solid var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--mc-accent-text);
    font-family: var(--font-body);
}

.mc-convo-info { flex: 1; min-width: 0; }

.mc-convo-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-convo-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--mc-text);
    letter-spacing: -0.02em;
}

.mc-convo-time {
    font-size: 11px;
    color: var(--mc-text3);
    font-family: var(--font-body);
}

.mc-convo-last {
    font-size: 13px;
    color: var(--mc-text2);
    margin-top: 2px;
    font-family: var(--font-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-convo-last.unread { color: var(--mc-text); font-weight: 600; }

/* ── Chat Screen ─────────────────────────────────────────────── */
.mc-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
    background: var(--mc-bg);
}

.mc-chat-peer-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--mc-text);
}

.mc-chat-peer-status {
    font-size: 11px;
    color: var(--mc-avail);
    font-family: var(--font-body);
}

.mc-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mc-chat-bubble-row {
    display: flex;
}

.mc-chat-bubble-row.mine  { justify-content: flex-end; }
.mc-chat-bubble-row.theirs { justify-content: flex-start; }

.mc-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
}

.mc-chat-bubble.mine {
    background: var(--mc-accent);
    border-radius: 16px 16px 4px 16px;
    color: var(--mc-accent-text);
}

.mc-chat-bubble.theirs {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 16px 16px 16px 4px;
    color: var(--mc-text);
}

.mc-chat-bubble-text {
    font-size: 14px;
    line-height: 1.4;
    font-family: var(--font-body);
}

.mc-chat-bubble-time {
    font-size: 10px;
    margin-top: 4px;
    text-align: right;
    font-family: var(--font-body);
}

.mc-chat-bubble.mine  .mc-chat-bubble-time { color: rgba(255,255,255,0.55); }
.mc-chat-bubble.theirs .mc-chat-bubble-time { color: var(--mc-text3); }

.mc-chat-input-row {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--mc-border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    background: var(--mc-bg);
}

.mc-chat-input {
    flex: 1;
    background: var(--mc-input-bg);
    border: 1px solid var(--mc-border);
    border-radius: 24px;
    padding: 10px 16px;
    color: var(--mc-text);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.mc-chat-input:focus { border-color: var(--mc-border-strong); }
.mc-chat-input::placeholder { color: var(--mc-text3); }

.mc-chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 99px;
    background: var(--mc-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
    color: var(--mc-accent-text);
}

.mc-chat-send-btn:hover { opacity: 0.85; }
.mc-chat-send-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Profile Page ────────────────────────────────────────────── */
.mc-profile-page { padding: 20px 20px 0; }

.mc-profile-hero {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.mc-profile-hero-info { flex: 1; }

.mc-profile-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--mc-text);
    letter-spacing: -0.04em;
}

.mc-profile-instrument {
    font-size: 13px;
    color: var(--mc-text2);
    margin-top: 2px;
    font-family: var(--font-body);
}

.mc-profile-location {
    font-size: 12px;
    color: var(--mc-text3);
    margin-top: 1px;
    font-family: var(--font-body);
}

/* ── View Profile (other musician) ──────────────────────────── */
.mc-vprofile-cover {
    position: relative;
    flex-shrink: 0;
}

.mc-vprofile-avatar-wrap {
    position: absolute;
    bottom: -28px;
    left: 20px;
    padding: 3px;
    border-radius: 50%;
    background: var(--mc-bg);
}

.mc-vprofile-body { padding: 38px 20px 0; }

.mc-vprofile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.mc-vprofile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-vprofile-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--mc-text);
    letter-spacing: -0.04em;
}

.mc-vprofile-sub {
    font-size: 13px;
    color: var(--mc-text2);
    margin-top: 2px;
    font-family: var(--font-body);
}

.mc-vprofile-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.mc-vprofile-actions .mc-btn {
    flex: 1;
    padding: 11px;
    font-size: 14px;
}

/* ── Gig Detail ──────────────────────────────────────────────── */
.mc-detail-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mc-detail-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--mc-text);
    letter-spacing: -0.03em;
    flex: 1;
}

.mc-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ── Poster Row ──────────────────────────────────────────────── */
.mc-poster-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
}

.mc-poster-info { flex: 1; }

.mc-poster-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--mc-text);
}

.mc-poster-label {
    font-size: 12px;
    color: var(--mc-text3);
    font-family: var(--font-body);
}

/* ── Bootstrap overrides ─────────────────────────────────────── */
.btn-primary {
    background: var(--mc-accent);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
    font-family: var(--font-body);
}

.btn-primary:hover, .btn-primary:focus {
    background: color-mix(in srgb, var(--mc-accent) 85%, white);
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--mc-accent);
    color: var(--mc-accent);
    border-radius: 10px;
    font-weight: 600;
    font-family: var(--font-body);
}

.btn-outline-primary:hover {
    background: var(--mc-accent);
    border-color: var(--mc-accent);
    color: #fff;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--mc-bg), 0 0 0 0.25rem var(--mc-accent);
}

.card {
    background-color: var(--mc-card-bg);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow);
    color: var(--mc-text);
}

.card-header, .card-footer {
    background-color: transparent;
    border-color: var(--mc-border);
}

.form-control, .form-select, .form-check-input {
    background-color: var(--mc-input-bg);
    border-color: var(--mc-border);
    color: var(--mc-text);
    border-radius: 8px;
    font-family: var(--font-body);
}

.form-control:focus, .form-select:focus {
    background-color: var(--mc-input-bg);
    border-color: var(--mc-border-strong);
    color: var(--mc-text);
}

.form-label {
    color: var(--mc-text2);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-body);
}

.form-control::placeholder { color: var(--mc-text3); }

.alert {
    background-color: var(--mc-card-bg);
    border-color: var(--mc-border);
    color: var(--mc-text);
    border-radius: var(--mc-radius);
}

.badge.bg-primary   { background-color: var(--mc-accent) !important; }
.badge.bg-secondary { background-color: var(--mc-bg-elevated) !important; color: var(--mc-text2); }

.list-group-item {
    background-color: var(--mc-card-bg);
    border-color: var(--mc-border);
    color: var(--mc-text);
}

.list-group-item-action:hover {
    background-color: var(--mc-surface);
    color: var(--mc-text);
}

/* ── Misc ────────────────────────────────────────────────────── */
.divider {
    height: 1px;
    background: var(--mc-border);
    margin: 4px 0;
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: var(--mc-radius);
}

.blazor-error-boundary::after { content: "An error has occurred." }


.mc-post-action.active { color: var(--mc-accent); }

/* -- Comment Panel -- */
.mc-comments-panel {
    padding: 12px 0 4px;
    border-top: 1px solid var(--mc-border);
    margin-top: 4px;
}

.mc-comment {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    padding: 5px 0;
}

.mc-comment-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--mc-text);
    text-decoration: none;
    flex-shrink: 0;
}

.mc-comment-name:hover { color: var(--mc-accent); }

.mc-comment-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--mc-text);
    word-break: break-word;
}

.mc-comment-time {
    font-size: 10px;
    color: var(--mc-text3);
    flex-shrink: 0;
    white-space: nowrap;
}

.mc-comments-empty {
    font-size: 12px;
    color: var(--mc-text3);
    text-align: center;
    margin: 4px 0 8px;
    font-family: var(--font-body);
}

.mc-comment-loading {
    font-size: 12px;
    color: var(--mc-text3);
    text-align: center;
    padding: 8px 0;
    font-family: var(--font-body);
}

.mc-comment-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mc-border);
}

.mc-comment-input {
    flex: 1;
    background: var(--mc-input-bg);
    border: 1px solid var(--mc-border);
    border-radius: 20px;
    color: var(--mc-text);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 7px 14px;
    outline: none;
    transition: border-color 0.15s;
    min-width: 0;
}

.mc-comment-input:focus { border-color: var(--mc-border-strong); }
.mc-comment-input::placeholder { color: var(--mc-text3); }

.mc-comment-submit {
    background: var(--mc-accent);
    color: var(--mc-accent-text);
    border: none;
    border-radius: 99px;
    padding: 7px 14px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.mc-comment-submit:disabled { opacity: 0.35; cursor: not-allowed; }
.mc-comment-submit:not(:disabled):hover { opacity: 0.85; }

.mc-comment-signin {
    font-size: 12px;
    color: var(--mc-text3);
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mc-border);
    font-family: var(--font-body);
}

.mc-comment-signin a { color: var(--mc-accent); }

/* ── Badge chips ────────────────────────────────────────── */
.mc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.badge-emoji { font-size: 14px; line-height: 1; }
.badge-label { font-size: 11px; letter-spacing: 0.01em; }