/**
 * MuseBugs Design System
 * Based on DESIGN.md — shadcn/ui monochromatic light theme
 */

/* -------------------------------------------------------------------------- */
/* Design Tokens                                                              */
/* -------------------------------------------------------------------------- */

:root {
    --color-canvas: #f5f5f5;
    --color-paper: #ffffff;
    --color-surface-alt: #fafafa;
    --color-ink: #0a0a0a;
    --color-ink-soft: #171717;
    --color-mid-gray: #737373;
    --color-hairline: #e5e5e5;
    --color-ember: #e7000b;

    --font-geist: 'Geist', 'Pretendard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-caption: 12px;
    --leading-caption: 1.33;
    --tracking-caption: 0.6px;
    --text-body: 14px;
    --leading-body: 1.43;
    --text-body-lg: 16px;
    --leading-body-lg: 1.5;
    --text-subheading: 18px;
    --leading-subheading: 1.56;
    --text-heading-sm: 24px;
    --leading-heading-sm: 1.33;
    --tracking-heading-sm: -0.6px;
    --text-heading: 30px;
    --leading-heading: 1.2;
    --tracking-heading: -0.75px;

    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-48: 48px;

    --page-max-width: 1280px;
    --card-padding: 20px;
    --element-gap: 8px;

    --radius-small: 6px;
    --radius-nested: 10px;
    --radius-buttons: 18px;
    --radius-inputs: 18px;
    --radius-badges: 18px;
    --radius-cards: 24px;

    --shadow-subtle: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

    /* Legacy aliases (view inline styles) */
    --bg-body: var(--color-canvas);
    --bg-sidebar: var(--color-surface-alt);
    --bg-card: var(--color-paper);
    --bg-input: var(--color-canvas);
    --bg-hover: var(--color-canvas);
    --bg-active: #ececec;
    --text-main: var(--color-ink);
    --text-muted: var(--color-mid-gray);
    --text-meta: var(--color-mid-gray);
    --border-main: var(--color-hairline);
    --border-focus: var(--color-ink);
    --btn-primary-bg: var(--color-ink);
    --btn-primary-text: var(--color-surface-alt);
    --btn-primary-hover: var(--color-ink-soft);
    --btn-primary-disabled: #d4d4d4;
    --shadow-sm: var(--shadow-subtle);
}

/* -------------------------------------------------------------------------- */
/* Reset & Base                                                               */
/* -------------------------------------------------------------------------- */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-geist);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-ink);
    background-color: var(--color-canvas);
}

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

img {
    max-width: 100%;
    height: auto;
}

code {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 0.9em;
    background: var(--color-canvas);
    padding: 2px 6px;
    border-radius: var(--radius-small);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline);
}

/* -------------------------------------------------------------------------- */
/* Layout                                                                     */
/* -------------------------------------------------------------------------- */

.app-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--color-canvas);
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-alt);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: var(--spacing-24) var(--spacing-20);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    font-size: var(--text-body-lg);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

.sidebar-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-ink);
    color: var(--color-surface-alt);
    border-radius: var(--radius-nested);
}

.sidebar-nav {
    flex: 1;
    padding: 0 var(--spacing-12) var(--spacing-16);
}

.sidebar-footer {
    padding: var(--spacing-16);
    margin-top: auto;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin-bottom: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: 8px 12px;
    border-radius: var(--radius-buttons);
    color: var(--color-mid-gray);
    font-size: var(--text-body);
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
    background: var(--color-canvas);
    color: var(--color-ink);
}

.nav-link.active {
    background: var(--color-paper);
    color: var(--color-ink);
    font-weight: 600;
    box-shadow: var(--shadow-subtle);
}

.nav-link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

.content {
    flex: 1;
    padding: var(--spacing-24) var(--spacing-48);
    overflow-y: auto;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 260px);
}

.content-inner {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Page Header                                                                */
/* -------------------------------------------------------------------------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-24);
    flex-wrap: wrap;
}

.page-header h1,
.page-header h2 {
    margin: 0 0 var(--spacing-8);
    font-size: var(--text-heading-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-heading-sm);
    line-height: var(--leading-heading-sm);
    color: var(--color-ink);
}

.page-subtitle {
    margin: 0;
    font-size: var(--text-body);
    color: var(--color-mid-gray);
}

/* -------------------------------------------------------------------------- */
/* Cards                                                                      */
/* -------------------------------------------------------------------------- */

.card {
    background: var(--color-paper);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-cards);
    padding: var(--card-padding);
    margin-bottom: var(--spacing-24);
    box-shadow: var(--shadow-subtle);
}

.card-title {
    margin: 0 0 var(--spacing-16);
    font-size: var(--text-subheading);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-24);
}

.widget-detail {
    font-size: var(--text-body);
    color: var(--color-mid-gray);
    margin: var(--spacing-12) 0 0;
}

.widget-status-row {
    margin-bottom: var(--spacing-8);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    padding: 8px 16px;
    min-height: 36px;
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--radius-buttons);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-sm {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 13px;
}

.btn-primary {
    background: var(--color-ink);
    color: var(--color-surface-alt);
    border-color: var(--color-ink);
}

.btn-primary:hover {
    background: var(--color-ink-soft);
    border-color: var(--color-ink-soft);
}

.btn-primary:disabled,
.btn-primary[disabled] {
    background: var(--btn-primary-disabled);
    border-color: var(--btn-primary-disabled);
    color: var(--color-mid-gray);
    cursor: not-allowed;
}

.btn-secondary,
.btn-google {
    background: var(--color-canvas);
    color: var(--color-ink);
    border: none;
}

.btn-secondary:hover,
.btn-google:hover {
    background: #ebebeb;
}

.btn-outline {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-hairline);
}

.btn-outline:hover {
    background: var(--color-canvas);
}

.btn-danger {
    background: transparent;
    color: var(--color-ember);
    border: 1px solid var(--color-hairline);
}

.btn-danger:hover {
    background: rgba(231, 0, 11, 0.06);
    border-color: rgba(231, 0, 11, 0.25);
}

.btn-kakao,
.btn-naver,
.btn-apple {
    background: var(--color-paper);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline);
}

.btn-kakao:hover,
.btn-naver:hover,
.btn-apple:hover {
    background: var(--color-canvas);
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 400;
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 1px solid transparent;
    border-radius: var(--radius-inputs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    background: var(--color-paper);
    border-color: var(--color-hairline);
    box-shadow: 0 0 0 1px var(--color-hairline);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-mid-gray);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-8);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-mid-gray);
}

/* -------------------------------------------------------------------------- */
/* Badges                                                                     */
/* -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-badges);
    font-size: var(--text-caption);
    font-weight: 500;
    line-height: var(--leading-caption);
}

.badge-solid {
    background: var(--color-ink-soft);
    color: var(--color-surface-alt);
}

.badge-soft,
.badge-success {
    background: var(--color-canvas);
    color: var(--color-ink-soft);
}

.badge-outline,
.badge-warning {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-hairline);
}

.badge-danger {
    background: transparent;
    color: var(--color-ember);
    border: 1px solid rgba(231, 0, 11, 0.25);
}

.song-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-badges);
    font-size: var(--text-caption);
    font-weight: 500;
    background: var(--color-canvas);
    color: var(--color-ink-soft);
}

/* -------------------------------------------------------------------------- */
/* Stats                                                                      */
/* -------------------------------------------------------------------------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-20);
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    padding: var(--spacing-4) 0;
}

.stat-box .label {
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--color-mid-gray);
}

.stat-box .value {
    font-size: var(--text-heading);
    font-weight: 600;
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
    color: var(--color-ink);
}

/* -------------------------------------------------------------------------- */
/* Alerts & Text                                                              */
/* -------------------------------------------------------------------------- */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-nested);
    font-size: 13px;
    margin-bottom: var(--spacing-24);
}

.alert-error {
    background: rgba(231, 0, 11, 0.06);
    color: var(--color-ember);
    border: 1px solid rgba(231, 0, 11, 0.15);
}

.alert-info {
    background: var(--color-canvas);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline);
}

.text-error {
    color: var(--color-ember);
    font-size: 13px;
    margin-top: var(--spacing-8);
}

.text-meta {
    font-size: 13px;
    color: var(--color-mid-gray);
    margin-top: var(--spacing-8);
}

.text-accent {
    color: var(--color-ink);
    font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Login                                                                      */
/* -------------------------------------------------------------------------- */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-24);
    background: var(--color-canvas);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-paper);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-cards);
    padding: var(--spacing-48) 40px;
    box-shadow: var(--shadow-subtle);
    text-align: center;
}

.login-logo {
    margin-bottom: var(--spacing-16);
    color: var(--color-ink);
}

.login-title {
    margin: 0 0 var(--spacing-8);
    font-size: var(--text-heading-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-heading-sm);
    color: var(--color-ink);
}

.login-desc {
    margin: 0 0 var(--spacing-32);
    font-size: var(--text-body);
    color: var(--color-mid-gray);
}

.login-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.login-footer {
    margin-top: var(--spacing-32);
    font-size: var(--text-caption);
    color: var(--color-mid-gray);
}

/* -------------------------------------------------------------------------- */
/* Scrollbar                                                                  */
/* -------------------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(115, 115, 115, 0.35);
    border-radius: var(--radius-small);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(115, 115, 115, 0.55);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(115, 115, 115, 0.35) transparent;
}

/* -------------------------------------------------------------------------- */
/* SweetAlert2                                                                */
/* -------------------------------------------------------------------------- */

.swal2-popup {
    background: var(--color-paper) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-cards) !important;
    box-shadow: var(--shadow-subtle) !important;
    font-family: var(--font-geist) !important;
}

.swal2-title {
    color: var(--color-ink) !important;
    font-size: var(--text-heading-sm) !important;
    font-weight: 600 !important;
    letter-spacing: var(--tracking-heading-sm) !important;
}

.swal2-html-container {
    color: var(--color-mid-gray) !important;
    font-size: var(--text-body) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--color-mid-gray) !important;
    color: var(--color-mid-gray) !important;
}

.swal2-icon.swal2-success {
    border-color: var(--color-ink) !important;
    color: var(--color-ink) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--color-ember) !important;
    color: var(--color-ember) !important;
}

.swal2-confirm {
    background-color: var(--color-ink) !important;
    color: var(--color-surface-alt) !important;
    border-radius: var(--radius-buttons) !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    border: none !important;
}

.swal2-confirm:hover {
    background-color: var(--color-ink-soft) !important;
}

.swal2-cancel {
    background: var(--color-canvas) !important;
    color: var(--color-ink) !important;
    border-radius: var(--radius-buttons) !important;
    font-weight: 500 !important;
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */

.spinner-btn,
.thumb-spinner {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.linear-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-canvas);
    overflow: hidden;
    z-index: 10;
    display: none;
}

.linear-progress.is-active {
    display: block;
}

.linear-progress-bar {
    width: 100%;
    height: 100%;
    background: var(--color-ink);
    animation: indeterminateProgress 1.5s infinite ease-in-out;
    transform-origin: 0% 50%;
}

@keyframes indeterminateProgress {
    0% { transform: translateX(-100%) scaleX(0.2); }
    50% { transform: translateX(0%) scaleX(0.5); }
    100% { transform: translateX(100%) scaleX(0.2); }
}

#ui-alert { display: none; }
#ui-alert.is-visible { display: block; }

/* -------------------------------------------------------------------------- */
/* Lyrics Page                                                                */
/* -------------------------------------------------------------------------- */

.lyrics-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 320px) 1fr;
    gap: var(--spacing-24);
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.lyrics-library-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

.lyrics-list-container {
    flex: 1;
    overflow-y: auto;
    margin-top: var(--spacing-16);
}

.lyrics-list-empty {
    text-align: center;
    padding: var(--spacing-32) var(--spacing-16);
    color: var(--color-mid-gray);
    font-size: var(--text-body);
}

.lyrics-list-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    margin-bottom: var(--spacing-8);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-nested);
    background: var(--color-paper);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.lyrics-list-item:hover {
    border-color: var(--color-mid-gray);
    box-shadow: var(--shadow-subtle);
}

.lyrics-list-item .item-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 4px;
}

.lyrics-list-item .item-concept {
    font-size: var(--text-caption);
    color: var(--color-mid-gray);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lyrics-list-item .item-meta {
    font-size: 11px;
    color: var(--color-mid-gray);
    display: flex;
    justify-content: space-between;
}

.lyrics-editor-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--spacing-16);
    min-height: 0;
}

.split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    flex: 1;
    min-height: 0;
}

.lyrics-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lyrics-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-12);
}

.lyrics-panel-header h4 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 600;
}

.lyrics-editor {
    flex: 1;
    min-height: 280px;
    resize: none;
}

.prompt-box-wrapper {
    flex-shrink: 0;
}

.prompt-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: 8px 12px;
    background: var(--color-paper);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-subtle);
}

.prompt-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-body);
    color: var(--color-ink);
    outline: none;
}

.prompt-input::placeholder {
    color: var(--color-mid-gray);
}

.lang-select {
    border: none;
    background: var(--color-canvas);
    border-radius: var(--radius-buttons);
    padding: 6px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-ink);
    cursor: pointer;
}

.btn-send {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* Music Page                                                                 */
/* -------------------------------------------------------------------------- */

.music-workspace {
    display: flex;
    flex: 1;
    gap: var(--spacing-24);
    min-height: 0;
    height: 100%;
    max-height: calc(100vh - 120px);
}

.music-left-panel {
    width: 700px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-paper);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-cards);
    padding: var(--spacing-24);
    box-shadow: var(--shadow-subtle);
}

.music-left-columns {
    display: flex;
    gap: var(--spacing-24);
    flex: 1;
    min-height: 0;
}

.music-col-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    overflow-y: auto;
    padding-right: var(--spacing-12);
    height: 100%;
}

.music-col-2 {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    overflow-y: auto;
    height: 100%;
}

.music-col-3 {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.music-settings-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-16);
    padding-top: var(--spacing-16);
    margin-top: var(--spacing-16);
    border-top: 1px solid var(--color-hairline);
}

.mureka-actions-row {
    display: flex;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-24);
}

.btn-mureka-action {
    background: var(--color-canvas);
    border: none;
    border-radius: var(--radius-buttons);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink);
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
}

.btn-mureka-action:hover {
    background: #ebebeb;
}

.mureka-section {
    background: var(--color-surface-alt);
    border-radius: var(--radius-nested);
    padding: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    border: 1px solid var(--color-hairline);
}

.mureka-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-12);
}

.mureka-section-title {
    font-size: var(--text-body);
    font-weight: 600;
    margin: 0;
}

.mureka-textarea {
    width: 100%;
    background: transparent;
    border: none;
    resize: none;
    outline: none;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    min-height: 120px;
}

.mureka-textarea::placeholder {
    color: var(--color-mid-gray);
}

.mureka-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
}

.mureka-tag-radio {
    display: none;
}

.mureka-tag-label {
    font-size: var(--text-caption);
    padding: 6px 12px;
    background: var(--color-paper);
    color: var(--color-mid-gray);
    border-radius: var(--radius-badges);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
    border: 1px solid var(--color-hairline);
    display: inline-block;
}

.mureka-tag-label:hover {
    border-color: var(--color-mid-gray);
    color: var(--color-ink);
}

.mureka-tag-radio:checked + .mureka-tag-label,
.music-opt-btn.is-active {
    color: var(--color-surface-alt);
    background: var(--color-ink);
    border-color: var(--color-ink);
    font-weight: 600;
}

.music-opt-btn {
    font-size: 11px;
    padding: 5px 10px;
    cursor: pointer;
    font-family: inherit;
}

.music-opt-group {
    margin-bottom: 14px;
}

.music-opt-label {
    display: block;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--spacing-8);
}

.music-opt-hint {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-mid-gray);
    margin-left: 4px;
}

.prompt-preview-box {
    margin-top: var(--spacing-12);
    padding: 10px 12px;
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-nested);
}

.prompt-preview-text {
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-mid-gray);
    word-break: break-word;
}

.style-actions-row {
    display: flex;
    gap: 6px;
}

.mureka-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--color-hairline);
    outline: none;
    margin: var(--spacing-16) 0;
}

.mureka-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-ink);
    cursor: pointer;
}

.mureka-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-16) 0 var(--spacing-8);
    border-top: 1px solid var(--color-hairline);
    margin-top: var(--spacing-12);
}

.library-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    min-height: 0;
}

.library-content {
    flex: 1;
    overflow-y: auto;
}

.library-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-mid-gray);
    text-align: center;
    padding: var(--spacing-48);
}

.generated-song-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-12);
    border-radius: var(--radius-nested);
    transition: background 0.15s ease;
    cursor: pointer;
}

.generated-song-item:hover {
    background: var(--color-canvas);
}

.song-thumbnail {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-nested);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
}

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

.song-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-meta {
    font-size: var(--text-caption);
    color: var(--color-mid-gray);
    margin-top: 2px;
}

.song-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.generated-song-item:hover .song-actions {
    opacity: 1;
}

.song-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-nested);
    color: var(--color-mid-gray);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.song-action-btn:hover {
    background: var(--color-paper);
    color: var(--color-ink);
}

.btn-compose {
    min-width: 140px;
}

/* Playbar */
.player-container {
    position: fixed;
    bottom: 0;
    left: 260px;
    right: 0;
    background: var(--color-paper);
    border-top: 1px solid var(--color-hairline);
    padding: var(--spacing-12) var(--spacing-24);
    display: none;
    align-items: center;
    gap: var(--spacing-16);
    z-index: 100;
    box-shadow: var(--shadow-subtle);
}

.player-container.is-visible {
    display: flex;
}

.playbar-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-ink);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playbar-seek {
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--color-hairline);
    cursor: pointer;
}

/* Modal */
.lyrics-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.4);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-24);
}

.lyrics-modal.is-active {
    display: flex;
}

.lyrics-modal-content {
    background: var(--color-paper);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-subtle);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lyrics-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-20);
    border-bottom: 1px solid var(--color-hairline);
}

.lyrics-modal-body {
    overflow-y: auto;
    padding: var(--spacing-16);
}

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(245, 245, 245, 0.85);
    z-index: 300;
    align-items: center;
    justify-content: center;
}

.loading-overlay.is-active {
    display: flex;
}

/* -------------------------------------------------------------------------- */
/* Album & Video shared accents (monochrome)                                  */
/* -------------------------------------------------------------------------- */

.album-page,
.video-page {
    --page-accent: var(--color-ink);
    --page-accent-soft: var(--color-canvas);
    padding-bottom: 80px;
}

.album-tab.is-active,
.video-tab.is-active {
    background: var(--color-paper) !important;
    color: var(--color-ink) !important;
    box-shadow: var(--shadow-subtle);
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .music-workspace {
        flex-direction: column;
        height: auto;
        max-height: none;
    }

    .music-left-panel {
        width: 100% !important;
        height: auto !important;
    }

    .music-col-3 {
        width: 100% !important;
        height: 600px;
    }

    .player-container {
        left: 0;
    }
}

@media (max-width: 960px) {
    .lyrics-workspace,
    .split-view {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    .content {
        padding: var(--spacing-24) var(--spacing-20);
        max-width: 100%;
        height: auto;
    }

    .page-header h1,
    .page-header h2 {
        font-size: var(--text-subheading);
    }
}