@media screen {
    :root {
        --surface-glass: rgba(26, 26, 29, 0.82);
        --surface-glass-strong: rgba(31, 31, 36, 0.92);
        --border-soft: rgba(255, 255, 255, 0.08);
        --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
        --shadow-card: 0 16px 38px rgba(0, 0, 0, 0.22);
        --radius-xl: 1.25rem;
    }

    body {
        background:
            radial-gradient(circle at 12% 8%, rgba(16, 185, 129, 0.12), transparent 32rem),
            radial-gradient(circle at 88% 0%, rgba(245, 158, 11, 0.09), transparent 26rem),
            linear-gradient(145deg, #08090a 0%, #101115 48%, #090a0b 100%);
    }

    .navbar {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(14, 14, 17, 0.86);
        border-bottom: 1px solid var(--border-soft);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .navbar-content {
        gap: 0.75rem;
    }

    .logo {
        letter-spacing: 0.02em;
    }

    .nav-links a {
        min-height: 2.75rem;
        align-items: center;
    }

    .main-content {
        width: min(100%, 1440px);
    }

    .card,
    .login-box,
    .preview-box,
    .lyrics-content,
    .chord-section {
        background: var(--surface-glass);
        border-color: var(--border-soft);
        box-shadow: var(--shadow-card);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .card {
        border-radius: var(--radius-xl);
    }

    .card-title {
        letter-spacing: 0.01em;
    }

    .form-input,
    .form-textarea,
    .form-select,
    .key-select,
    textarea,
    input,
    select {
        border-color: var(--border-soft);
        transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus,
    .key-select:focus,
    textarea:focus,
    input:focus,
    select:focus {
        box-shadow: 0 0 0 4px var(--accent-glow);
    }

    .btn {
        min-height: 2.75rem;
        justify-content: center;
        border: 1px solid transparent;
    }

    .btn-primary {
        box-shadow: 0 10px 24px rgba(16, 185, 129, 0.18);
    }

    .btn-secondary,
    .btn-outline {
        border-color: var(--border-soft);
    }

    .table-wrapper {
        border-radius: 1rem;
        background: rgba(0, 0, 0, 0.12);
    }

    .data-table th {
        background: rgba(255, 255, 255, 0.035);
    }

    .data-table td {
        vertical-align: middle;
    }

    .settings-toolbar {
        background: var(--surface-glass-strong);
        border-color: var(--border-soft);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .modal {
        border: 1px solid var(--border-soft);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    }
}

@media screen and (min-width: 768px) {
    .main-content {
        padding-inline: 2rem;
    }

    .card {
        padding: 1.75rem;
    }
}

@media screen {
    .page-song-editor .edit-container {
        align-items: start;
    }

    .page-song-editor .right-panel {
        min-width: 0;
    }

    .page-song-editor .preview-box,
    .page-song-view .lyrics-content {
        overflow-wrap: anywhere;
    }

    .page-song-editor #lyricsInput {
        min-height: 18rem;
        font-size: 1rem;
        line-height: 1.7;
    }

    .page-song-view .view-container {
        width: min(100%, 980px);
    }
}

@media screen and (min-width: 1024px) {
    .page-song-editor .right-panel {
        position: sticky;
        top: 5.25rem;
        max-height: calc(100vh - 6rem);
    }

    .page-song-editor .preview-box {
        max-height: calc(100vh - 14rem);
        overflow: auto;
    }
}