:root {
            --paper: #FAF9F5;
            --paper-deep: #F2F0EB;
            --card: #FFFFFF;
            --ink: #262625;
            --ink-hover: #33322F;
            --muted: #6F6D67;
            --faint: #605D56;
            --line: #E6E3DB;
            --line-soft: #EEECE5;
            --crail: #D97757;
            --crail-deep: #C05E3D;
            --moss: #4F5344;
            --serif: Georgia, "Times New Roman", serif;
            --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --paper: #1C1B1A;
                --paper-deep: #232220;
                --card: #262625;
                --ink: #F5F3ED;
                --ink-hover: #FAF8F1;
                --muted: #A5A199;
                --faint: #B3AFA6;
                --line: #3A3834;
                --line-soft: #2E2D2A;
                --crail: #E08A66;
                --crail-deep: #D97757;
                --moss: #A9C2B1;
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        [hidden] {
            display: none !important;
        }

        body {
            font-family: var(--sans);
            background-color: var(--paper);
            color: var(--ink);
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 24px 20px 40px;
            line-height: 1.6;
        }

        .app-window {
            width: 100%;
            max-width: 600px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .logo-mark {
            flex: none;
            width: 18px;
            height: 18px;
        }

        /* --- stage: the wordmark + input cluster, centered while empty --- */

        .stage {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 26px;
        }

        /* Once results render, stop centering: the cluster docks to the top
           and the tracklist flows below it. */
        .app-window:has(#output-section:not([hidden])) .stage {
            flex: 0;
            justify-content: flex-start;
            padding-top: 56px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .brand .logo-mark {
            color: var(--crail);
        }

        .brand-name {
            font-family: var(--serif);
            font-size: 19px;
            font-weight: 500;
            letter-spacing: -0.01em;
        }

        /* --- input --- */

        .input-box {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 6px;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 16px;
            box-shadow: 0 1px 2px rgba(38, 38, 37, 0.05);
            padding: 6px;
            transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
        }

        .input-box:has(input:focus) {
            border-color: var(--crail);
            box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
        }

        input[type="text"] {
            flex: 1;
            min-width: 0;
            padding: 10px 12px 10px 14px;
            font-size: 15px;
            font-family: var(--sans);
            color: var(--ink);
            background: transparent;
            border: none;
            outline: none;
        }

        input[type="text"]::placeholder {
            color: var(--faint);
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 18px;
            font-size: 14px;
            font-weight: 600;
            font-family: var(--sans);
            color: var(--paper);
            background: var(--ink);
            border: none;
            border-radius: 999px;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s var(--ease), opacity 0.15s var(--ease);
        }

        .btn-primary .logo-mark {
            width: 12px;
            height: 12px;
            color: var(--crail);
        }

        .btn-primary:hover:not(:disabled) {
            background: var(--ink-hover);
        }

        .btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-primary:focus-visible,
        .btn-secondary:focus-visible {
            outline: 2px solid var(--crail);
            outline-offset: 2px;
        }

        /* --- loading / error --- */

        .loading {
            display: none;
            align-items: center;
            gap: 10px;
            color: var(--muted);
            font-size: 14px;
            font-weight: 500;
        }

        .loading.active {
            display: flex;
        }

        .spinner {
            width: 14px;
            height: 14px;
            flex: none;
            color: var(--crail);
            animation: spin 2.6s linear infinite;
        }

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

        .error {
            display: none;
            font-size: 14px;
            font-weight: 500;
            color: var(--crail-deep);
            text-align: center;
        }

        .error.active {
            display: block;
        }

        /* --- results: flat, no cards --- */

        #output-section {
            margin-top: 40px;
            display: grid;
            gap: 36px;
        }

        .section-title {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.01em;
            color: var(--muted);
            margin-bottom: 10px;
        }

        .section-title .selected-source {
            color: var(--moss);
            font-weight: 500;
        }

        .track-line {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin: 0 -8px;
            padding: 9px 8px;
            border-radius: 6px;
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
            transition: background 0.15s var(--ease);
        }

        .track-line + .track-line {
            border-top: 1px solid var(--line-soft);
        }

        .track-line:hover {
            background: var(--paper-deep);
        }

        .track-num {
            flex: none;
            width: 3ch;
            color: var(--faint);
            font-variant-numeric: tabular-nums;
        }

        .track-ts {
            flex: none;
            color: var(--muted);
            font-size: 13px;
            font-variant-numeric: tabular-nums;
        }

        .verified-badge {
            flex: none;
            color: var(--moss);
            font-weight: 600;
        }

        /* --- action buttons --- */

        .button-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 28px;
        }

        .btn-secondary {
            flex: 1;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 500;
            font-family: var(--sans);
            color: var(--ink);
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: 999px;
            cursor: pointer;
            white-space: nowrap;
            transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
        }

        .btn-secondary:hover:not(:disabled) {
            border-color: var(--crail);
            color: var(--crail);
        }

        .btn-secondary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        @media (max-width: 480px) {
            body {
                padding: 20px 16px 40px;
            }

            .app-window:has(#output-section:not([hidden])) .stage {
                padding-top: 40px;
            }

            .btn-primary {
                padding: 9px 14px;
            }

            .button-row {
                flex-wrap: wrap;
            }

            .btn-secondary {
                flex: 1 1 45%;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
            }
        }