body { font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background-color: #1e293b; color: #DAE2FD; }
        .glass { background: rgba(51, 65, 85, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(80, 95, 115, 0.65); border-radius: 8px; }
        :where(#app-topbar .glass.rounded-full, .app-sidebar-link, .workflow-topbar-btn, #sidebar-btn-settings, #btn-clear-all, #btn-history, #btn-lyrics-lang-toggle, #btn-lang-toggle) {
            cursor: pointer;
        }
        button:not(:disabled),
        select:not(:disabled),
        summary,
        [role="button"] {
            cursor: pointer;
        }
        button:not(:disabled) {
            transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
        }
        button:not(:disabled):hover {
            filter: brightness(1.06);
        }
        button:not(:disabled):active {
            transform: translateY(1px);
        }
        button[data-copy] {
            border: 1px solid rgba(71, 85, 105, 0.7);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }
        button[data-copy]:hover,
        button[data-copy]:focus-visible {
            background: rgba(51, 65, 85, 0.92) !important;
            border-color: rgba(96, 165, 250, 0.5) !important;
            box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.16), 0 10px 24px rgba(15, 23, 42, 0.28);
            filter: brightness(1.1);
            transform: translateY(-1px);
            outline: none;
        }
        .interactive-cta-hover:hover,
        .interactive-cta-hover:focus-visible {
            background: rgba(51, 65, 85, 0.92) !important;
            border-color: rgba(96, 165, 250, 0.45) !important;
            box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.14), 0 10px 24px rgba(15, 23, 42, 0.24);
            transform: translateY(-1px);
            outline: none;
        }
        .lyrics-lang-btn {
            transition: all 0.15s ease;
        }
        .lyrics-lang-btn:hover {
            background-color: #475569;
        }
        #app-topbar .glass.rounded-full {
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        #app-topbar .glass.rounded-full:hover {
            color: #ffffff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
            transform: translateY(-1px);
        }
        #app-topbar #btn-history:hover,
        #app-topbar #btn-lang-toggle:hover {
            background: rgba(71, 85, 105, 0.92);
        }
        #app-topbar #btn-lyrics-lang-toggle:hover {
            background: rgba(30, 64, 175, 0.52);
            color: #dbeafe;
        }
        #app-topbar #btn-clear-all:hover {
            background: rgba(185, 28, 28, 0.92);
        }
        #app-topbar .glass.rounded-full:hover i,
        #app-topbar .glass.rounded-full:hover span {
            color: inherit !important;
        }
        .output-box { min-height: 150px; }
        .shimmer { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-left: 8px; }
        .badge-gemini3 { background: linear-gradient(135deg, #22c55e, #3b82f6); color: #fff; box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1e293b; }
        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #64748b; }

        /* Placeholder 스타일 - 아주 연하게! */
        input::placeholder,
        textarea::placeholder {
            color: rgba(148, 163, 184, 0.8) !important;
            opacity: 1 !important;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: rgba(148, 163, 184, 0.8) !important;
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {
            color: rgba(148, 163, 184, 0.8) !important;
            opacity: 1 !important;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: rgba(148, 163, 184, 0.8) !important;
        }

        .floating-copy-bar { position: fixed; bottom: 30px; right: 30px; z-index: 100; animation: slideInRight 0.5s ease-out; }
        @keyframes slideInRight { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .floating-copy-bar.hidden { display: none; }

        .ai-report { background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(59, 130, 246, 0.1)); border: none; }

        .toggle-checkbox:checked { background-color: #10b981; border-color: #10b981; }
        .toggle-checkbox:checked + .toggle-label { color: #10b981; }
        .toggle-checkbox { appearance: none; width: 44px; height: 24px; background: #475569; border-radius: 12px; position: relative; cursor: pointer; transition: all 0.3s; border: 2px solid #475569; }
        .toggle-checkbox:checked::before { transform: translateX(20px); }
        .toggle-checkbox::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: transform 0.3s; }

        /* 편집 모드 */
        .editable-on { outline: none; border: 1px solid rgba(59,130,246,.6) !important; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
        .editable-hint { font-size: 10px; color: #94a3b8; }

        /* 초기 안내 텍스트 - 잘 보이게! */
        .placeholder-text {
            color: rgba(148, 163, 184, 0.75) !important;
        }

        /* 접기/펼치기 애니메이션 */
        .collapsible-section { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
        .collapsible-section.collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
        .collapsible-section.expanded { max-height: 3000px; opacity: 1; }
        .collapse-header { cursor: pointer; transition: all 0.3s; user-select: none; }
        .collapse-header:hover { background: rgba(59, 130, 246, 0.1); }
        .collapse-icon { transition: transform 0.3s; }
        .collapse-icon.rotated { transform: rotate(180deg); }
        #emotion-header {
            background: rgba(91, 33, 182, 0.14);
            border: 1px solid rgba(167, 139, 250, 0.18);
        }
        #emotion-header:hover {
            background: rgba(109, 40, 217, 0.22);
            border-color: rgba(196, 181, 253, 0.26);
        }
        .aux-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.12rem 0.45rem;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: rgba(51, 65, 85, 0.55);
            color: #cbd5e1;
            font-size: 0.625rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.01em;
        }
        #builder-preset-header {
            background: rgba(51, 65, 85, 0.22);
            border: 1px solid rgba(148, 163, 184, 0.16);
        }
        #btn-save-preset,
        #btn-browse-presets,
        #btn-delete-preset {
            transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        }
        #btn-save-preset:hover,
        #btn-save-preset:focus-visible {
            background: rgba(16, 185, 129, 0.38) !important;
            border-color: rgba(167, 243, 208, 0.95) !important;
            color: #ecfdf5 !important;
            box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.26), 0 10px 18px rgba(6, 95, 70, 0.22);
            transform: translateY(-1px);
        }
        #btn-browse-presets:hover,
        #btn-browse-presets:focus-visible {
            background: rgba(6, 182, 212, 0.36) !important;
            border-color: rgba(165, 243, 252, 0.95) !important;
            color: #ecfeff !important;
            box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.26), 0 10px 18px rgba(8, 47, 73, 0.22);
            transform: translateY(-1px);
        }
        #btn-delete-preset:hover,
        #btn-delete-preset:focus-visible {
            background: rgba(239, 68, 68, 0.34) !important;
            border-color: rgba(254, 202, 202, 0.95) !important;
            color: #fef2f2 !important;
            box-shadow: 0 0 0 1px rgba(252, 165, 165, 0.24), 0 10px 18px rgba(127, 29, 29, 0.2);
            transform: translateY(-1px);
        }
        #btn-save-preset:hover i,
        #btn-browse-presets:hover i,
        #btn-delete-preset:hover i,
        #btn-save-preset:focus-visible i,
        #btn-browse-presets:focus-visible i,
        #btn-delete-preset:focus-visible i {
            color: inherit !important;
        }
        #style-keywords-header {
            background: linear-gradient(135deg, rgba(76, 29, 149, 0.30), rgba(30, 64, 175, 0.22));
            border: 1px solid rgba(167, 139, 250, 0.32);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(91, 33, 182, 0.08);
        }
        #style-keywords-header .section-title-icon {
            background: rgba(167, 139, 250, 0.18);
            border-color: rgba(196, 181, 253, 0.28);
            color: #d8b4fe;
        }
        #style-keywords-count-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.2rem;
            height: 1.2rem;
            padding: 0 0.38rem;
            border-radius: 9999px;
            background: rgba(216, 180, 254, 0.18);
            border: 1px solid rgba(216, 180, 254, 0.32);
            color: #f5d0fe;
            font-size: 0.6875rem;
            font-weight: 700;
            line-height: 1;
        }
        #style-keywords-count-badge.hidden {
            display: none !important;
        }
        #style-keywords-header .text-slate-400 {
            color: rgba(221, 214, 254, 0.76) !important;
        }
        #style-keywords-header:hover {
            background: linear-gradient(135deg, rgba(91, 33, 182, 0.42), rgba(37, 99, 235, 0.28));
            border-color: rgba(196, 181, 253, 0.42);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 20px rgba(91, 33, 182, 0.12);
        }
        #custom-structure-header {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.28), rgba(8, 47, 73, 0.22));
            border: 1px solid rgba(96, 165, 250, 0.3);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(30, 64, 175, 0.08);
        }
        #custom-structure-header:hover {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.36), rgba(14, 116, 144, 0.28));
            border-color: rgba(125, 211, 252, 0.38);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 20px rgba(37, 99, 235, 0.12);
        }
        #custom-structure-header .section-title-icon {
            background: rgba(59, 130, 246, 0.16);
            border-color: rgba(125, 211, 252, 0.22);
            color: #93c5fd;
        }
        /* Lyria 하위 섹션: 같은 접는 메뉴임을 바로 알 수 있도록 한 색상으로 통일 */
        #lyria-panel-root .lyria-subsection-toggle {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: linear-gradient(135deg, rgba(8, 145, 178, 0.3), rgba(37, 99, 235, 0.2));
            border-color: rgba(34, 211, 238, 0.34) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(2, 6, 23, 0.16);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
        }
        #lyria-panel-root .lyria-subsection-toggle:hover {
            transform: translateY(-1px);
            filter: saturate(1.08);
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.42), rgba(37, 99, 235, 0.34));
            border-color: rgba(103, 232, 249, 0.54) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 28px rgba(2, 6, 23, 0.24);
        }
        #lyria-panel-root .lyria-subsection-toggle > div > i:first-child {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.7rem;
            height: 1.7rem;
            flex: 0 0 1.7rem;
            border: 1px solid rgba(14, 116, 144, 0.24);
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.78) !important;
            color: #0b6078 !important;
            font-size: 0.8rem;
            box-shadow: 0 2px 6px rgba(14, 116, 144, 0.08);
        }
        #lyria-panel-root .lyria-subsection-toggle:hover > div > i:first-child {
            background: #ffffff !important;
            border-color: rgba(14, 116, 144, 0.38);
            color: #064e63 !important;
        }
        #lyria-panel-root .lyria-subsection-toggle:hover .collapse-icon {
            color: rgba(165, 243, 252, 1) !important;
        }

        /* 탭 스타일 */
        .tab-button {
            background: rgba(51, 65, 85, 0.5);
            color: rgba(148, 163, 184, 0.8);
            border: none;
            cursor: pointer;
        }
        .tab-button:hover {
            background: rgba(71, 85, 105, 0.6);
            color: rgba(203, 213, 225, 1);
        }
        .tab-button.active {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));
            color: rgb(167, 243, 208);
            border: none;
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.3s ease-in-out;
        }
        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 간편/고급 모드 스타일 */
        .mode-toggle {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            padding: 4px;
            background: rgba(30, 41, 59, 0.5);
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }

        .mode-btn {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            background: transparent;
            color: rgba(148, 163, 184, 0.8);
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .mode-btn:hover {
            background: rgba(71, 85, 105, 0.3);
            color: rgba(203, 213, 225, 1);
        }

        .mode-btn.active {
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(251, 191, 36, 0.2));
            color: rgb(253, 224, 71);
            border: none;
            box-shadow: 0 0 20px rgba(250, 204, 21, 0.25);
        }

        .simple-mode, .advanced-mode {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
        }

        .simple-mode.active, .advanced-mode.active {
            display: block;
        }

        /* 간편 모드 - 단계별 UI */
        .step {
            margin-bottom: 32px;
            padding: 24px;
            background: rgba(30, 41, 59, 0.3);
            border-radius: 16px;
            border: 2px solid rgba(59, 130, 246, 0.2);
        }

        .step h3 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 16px;
            color: rgb(167, 243, 208);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .step-desc {
            font-size: 14px;
            color: rgba(148, 163, 184, 0.9);
            margin-bottom: 16px;
        }

        /* 큰 입력창 */
        .big-input {
            width: 100%;
            padding: 20px;
            font-size: 18px;
            line-height: 1.6;
            background: rgba(15, 23, 42, 0.6);
            border: 2px solid rgba(16, 185, 129, 0.3);
            border-radius: 12px;
            color: white;
            outline: none;
            transition: all 0.3s;
            min-height: 120px;
            resize: vertical;
        }

        .big-input:focus {
            border-color: rgba(16, 185, 129, 0.6);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
        }

        .big-input::placeholder {
            color: rgba(148, 163, 184, 0.8) !important;
            font-size: 13px;
        }

        /* 장르 카드 그리드 */
        .genre-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }

        .genre-card {
            padding: 24px;
            background: rgba(30, 41, 59, 0.45);
            border: none;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            text-align: center;
        }

        .genre-card:hover {
            background: rgba(51, 65, 85, 0.55);
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }

        .genre-card.selected {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(59, 130, 246, 0.18));
            box-shadow: 0 0 24px rgba(16, 185, 129, 0.25);
        }

        .genre-card .icon {
            font-size: 48px;
            line-height: 1;
        }

        .genre-card .label {
            font-size: 18px;
            font-weight: bold;
            color: white;
        }

        .genre-card .desc {
            font-size: 13px;
            color: rgba(148, 163, 184, 0.8);
        }

        /* 메가 생성 버튼 */
        .mega-button {
            width: 100%;
            padding: 28px 40px;
            background: linear-gradient(135deg, #10b981, #3b82f6, #8b5cf6);
            background-size: 200% 200%;
            border: none;
            border-radius: 16px;
            font-size: 24px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .mega-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(16, 185, 129, 0.5);
            background-position: 100% 0;
        }

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

        .mega-button .sub {
            font-size: 14px;
            font-weight: normal;
            opacity: 0.9;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .inspirations-container { display: grid; gap: 10px; margin-bottom: 16px; }
        .inspiration-card {
            background: rgba(30, 41, 59, 0.8); border: 2px solid rgba(100, 116, 139, 0.5);
            border-radius: 10px; padding: 12px; cursor: pointer; transition: all 0.3s;
            min-height: 90px; display: flex; flex-direction: column;
        }
        .inspiration-card:hover {
            border-color: rgba(16, 185, 129, 0.8); background: rgba(30, 41, 59, 0.95);
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); transform: translateY(-2px);
        }
        .inspiration-card.selected {
            border-color: rgba(16, 185, 129, 1); background: rgba(16, 185, 129, 0.15);
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
        }
        .inspiration-card input[type="checkbox"] { margin-right: 8px; width: 16px; height: 16px; }
        .inspiration-card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
        .inspiration-card-title { font-weight: 600; color: rgba(248, 250, 252, 0.95); font-size: 13px; flex: 1; }
        .inspiration-card-desc { font-size: 11px; color: rgba(148, 163, 184, 0.8); margin-left: 24px; }
        #inspiration-cards-slot .inspiration-card-title,
        #inspiration-cards-slot .inspiration-card-desc {
            word-break: keep-all;
        }
        body.app-step-lyrics #app-main-inner,
        body.app-step-assets #app-main-inner {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        @media (min-width: 1024px) {
            body.app-step-inspiration {
                overflow: hidden;
            }
            body.app-step-inspiration #app-shell {
                height: 100vh;
                min-height: 100vh;
                overflow: hidden;
            }
            body.app-step-inspiration #app-main-scroll {
                height: 100vh;
                overflow-y: auto;
            }
            body.app-step-inspiration #app-main-inner {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
            body.app-step-inspiration #section-input.workflow-flat {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
            body.app-step-lyrics #app-topbar,
            body.app-step-assets #app-topbar {
                padding-left: 0.25rem !important;
                padding-right: 0.25rem !important;
            }
            body.app-step-lyrics #app-main-inner {
                padding-left: 0 !important;
                padding-right: 1.25rem !important;
            }
            body.app-step-assets #app-main-inner {
                padding-left: 1.25rem !important;
                padding-right: 1.25rem !important;
            }
            /* 빌더 2열 폭/간격은 JS applyBuilderInspirationGridLayout() 단일 소스에서만 제어 */
            #inspiration-cards-slot .inspirations-container {
                gap: 8px;
                margin-bottom: 12px;
            }
            #inspiration-cards-slot .inspiration-card {
                min-height: 82px;
                padding: 10px 12px;
            }
            #inspiration-cards-slot .inspiration-card-title {
                font-size: 14px;
                line-height: 1.4;
            }
            #inspiration-cards-slot .inspiration-card-desc {
                font-size: 12px;
                line-height: 1.45;
                margin-left: 22px;
            }
        }

        /* 옵션 미선택 결과 카드: 헤더만 남기고 접기 */
        .optional-output-collapsed {
            opacity: 0.5;
            padding-bottom: 12px !important;
            transition: all 0.3s ease;
        }
        .optional-output-collapsed:hover {
            opacity: 0.7;
        }
        .optional-output-collapsed .output-box {
            display: none !important;
        }
        .optional-output-collapsed h3 {
            text-decoration: line-through;
            text-decoration-color: rgba(239, 68, 68, 0.5);
        }
        .inspirations-buttons { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
        .inspirations-buttons button {
            padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(100, 116, 139, 0.5);
            background: rgba(51, 65, 85, 0.5); color: rgba(203, 213, 225, 0.9); font-size: 11px;
            cursor: pointer; transition: all 0.3s;
        }
        .inspirations-buttons button:hover {
            background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.8);
            color: rgba(167, 243, 208, 1);
        }
        /* 빌더 주제: 한 칸 textarea — 칸 너비를 넘을 때만 자연 줄바꿈 */
        .keyword-topic-row {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            width: 100%;
            min-width: 0;
        }
        #keyword {
            display: block;
            flex: 1 1 0%;
            width: 100%;
            min-width: 0;
            min-height: 4.5rem;
            height: 4.5rem;
            box-sizing: border-box;
            resize: none;
            line-height: 1.5;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
            overflow-x: hidden;
            overflow-y: auto;
        }
        #lyria-topic-suggestions-box .inspirations-buttons {
            justify-content: flex-end; gap: 5px; margin-top: 6px;
        }
        #lyria-topic-suggestions-box .inspirations-buttons button {
            padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 1.2;
            background: rgba(51, 65, 85, 0.36); color: rgba(226, 232, 240, 0.96);
            border-color: rgba(100, 116, 139, 0.35);
        }
        #lyria-topic-suggestions-box .inspirations-buttons button:hover {
            background: rgba(56, 189, 248, 0.12); color: rgba(186, 230, 253, 0.98);
            border-color: rgba(56, 189, 248, 0.45);
        }
        #lyria-topic-apply-btn {
            background: rgba(16, 185, 129, 0.12) !important; color: rgba(167, 243, 208, 0.95) !important;
            border-color: rgba(16, 185, 129, 0.4) !important;
        }
        #lyria-topic-apply-btn:hover {
            background: rgba(16, 185, 129, 0.18) !important; border-color: rgba(16, 185, 129, 0.55) !important;
        }


        /* Custom Structure Builder - Drag handle + preview */
        .cs-handle { cursor: grab; touch-action: none; user-select: none; }
        .cs-handle:active { cursor: grabbing; }
        .cs-dragging { opacity: 0.6; }
        .cs-drop-target { outline: 2px dashed rgba(59,130,246,.55); outline-offset: 4px; }
        .cs-preview-seg { height: 10px; border-radius: 9999px; background: rgba(100,116,139,.65); }
        .cs-preview-wrap { display: flex; gap: 6px; align-items: center; }
        .cs-preview-labels { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
        .cs-preview-chip { font-size: 10px; padding: 3px 8px; border-radius: 9999px; background: rgba(30,41,59,.7); border: 1px solid rgba(100,116,139,.35); color: rgba(226,232,240,.9); }

        /* App shell (sidebar dashboard) */
        #app-sidebar { box-shadow: 4px 0 24px rgba(0,0,0,0.2); }
        .app-sidebar-link:not(.active) { color: rgb(148, 163, 184); }
        /* 3 스타일·쇼츠 - 기획에서 부가 생성 후 눌러보라는 안내 깜빡임 */
        @keyframes workflow-nav-attn {
            0%, 100% {
                box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4);
                background: rgba(245, 158, 11, 0.1);
                color: #fcd34d;
            }
            50% {
                box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.9), 0 0 16px rgba(251, 191, 36, 0.6);
                background: rgba(245, 158, 11, 0.3);
                color: #fef08a;
            }
        }
        .app-sidebar-link.workflow-nav-attention {
            animation: workflow-nav-attn 1.05s ease-in-out infinite !important;
            border-radius: 0.5rem;
            color: #fcd34d !important;
            font-weight: 700;
        }
        .app-sidebar-link.workflow-nav-attention.active {
            animation: workflow-nav-attn 1.05s ease-in-out infinite !important;
        }
        @keyframes workflow-nav-attn-lyrics {
            0%, 100% {
                box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.38);
                background: rgba(16, 185, 129, 0.1);
                color: #6ee7b7;
            }
            50% {
                box-shadow: inset 0 0 0 2px rgba(45, 212, 191, 0.92), 0 0 18px rgba(45, 212, 191, 0.36);
                background: rgba(20, 184, 166, 0.24);
                color: #ccfbf1;
            }
        }
        .app-sidebar-link.workflow-nav-attention-lyrics,
        .app-sidebar-link.workflow-nav-attention-lyrics.active {
            animation: workflow-nav-attn-lyrics 1.05s ease-in-out infinite !important;
            color: #99f6e4 !important;
        }
        /* Sequential workflow: one main panel at a time */
        body.app-step-inspiration #work-main-split,
        body.app-step-structure #work-main-split { display: none !important; }
        body.app-step-inspiration #workflow-panel-assets,
        body.app-step-inspiration [data-asset="video"],
        body.app-step-inspiration [data-output-panel="video"],
        body.app-step-inspiration #output-toolbar { display: none !important; }
        body.app-step-lyrics #section-input { display: none !important; }
        body.app-step-lyrics #work-main-split {
            padding-top: 0.5rem !important;
            padding-left: 0.25rem !important;
            padding-right: 0.25rem !important;
            box-sizing: border-box !important;
            max-width: 100% !important;
        }
        body.app-step-lyrics #work-col-primary { grid-column: auto !important; }
        body.app-step-lyrics #work-col-secondary { min-width: 0 !important; padding-right: 0.5rem !important; }
        body.app-step-lyrics #workflow-panel-assets {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            gap: 1.25rem !important;
        }
        body.app-step-lyrics #workflow-panel-assets .workflow-card { padding: 1.25rem 1.5rem !important; }
        body.app-step-lyrics #workflow-panel-assets .workflow-card[data-asset="style"],
        body.app-step-lyrics #workflow-panel-assets .workflow-card[data-asset="theory"] {
            width: 100% !important;
            max-width: 1312px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        body.app-step-lyrics #workflow-panel-assets .workflow-card .mb-3,
        body.app-step-lyrics #workflow-panel-assets .workflow-card .mb-4 { margin-bottom: 0.5rem !important; }
        body.app-step-lyrics [data-asset="video"],
        body.app-step-lyrics [data-asset="art"],
        body.app-step-lyrics [data-asset="marketing"],
        body.app-step-lyrics #lyria-panel-root { display: none !important; }

        /* ===== Step Content Filtering ===== */

        body.app-step-inspiration #step-content-structure { display: block !important; }
        body.app-step-inspiration #step-content-style { display: block !important; }

        body.app-step-structure #step-content-inspiration,
        body.app-step-structure #step-content-style,
        body.app-step-structure #step-content-generate,
        body.app-step-structure #emotion-panel,
        body.app-step-structure #advanced-generate-options-grid { display: none !important; }
        body.app-step-structure #step-content-structure { display: block !important; }
        body.app-step-assets #section-input,
        body.app-step-assets #work-col-primary,
        body.app-step-assets #lyria-panel-root { display: none !important; }
        body.app-step-assets #work-main-split {
            grid-template-columns: 1fr !important;
            padding-top: 0.5rem !important;
            padding-left: 0.25rem !important;
            padding-right: 0.25rem !important;
            box-sizing: border-box !important;
        }
        body.app-step-assets #workflow-panel-assets {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column;
            align-items: center;
            gap: 1.25rem;
            padding: 0.25rem 0.25rem 0.5rem !important;
        }
        body.app-step-assets #workflow-panel-assets .workflow-card[data-asset="style"] { display: none !important; }
        body.app-step-assets #workflow-panel-assets > * { margin-top: 0 !important; }
        body.app-step-assets #workflow-panel-assets .workflow-card {
            width: 100% !important;
            max-width: 1312px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        body.app-step-assets #lyria-panel-root {
            width: 100% !important;
            max-width: 1312px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        /* Lyria: 4칸은 2×2 그리드 유지 (4열로 쪼개면 글자·칸이 너무 작아짐) */
        /* 글자: 전부 흰색처럼 보이지 않게 sky / cyan / teal 톤으로 위계 */
        #lyria-panel-root {
            font-size: 16px;
            color: rgb(203 213 225);
        }
        #lyria-panel-root .text-slate-200 {
            color: rgb(186 230 253) !important;
        }
        #lyria-panel-root .text-slate-300 {
            color: rgb(165 243 252) !important;
        }
        #lyria-panel-root .text-slate-400 {
            color: rgb(125 211 252) !important;
        }
        #lyria-panel-root .text-slate-500 {
            color: rgb(94 234 212) !important;
        }
        #lyria-panel-root .text-slate-600 {
            color: rgb(56 189 248) !important;
        }
        #lyria-panel-root h3 {
            color: rgb(103 232 249);
        }
        #lyria-panel-root select,
        #lyria-panel-root textarea,
        #lyria-panel-root input[type="text"],
        #lyria-panel-root input[type="number"] {
            color: rgb(186 230 253);
        }
        /* 보조 문구: 작은 픽셀 글씨 확대 (가독성) */
        #lyria-panel-root p.text-\[9px\],
        #lyria-panel-root p.text-\[10px\],
        #lyria-panel-root p.text-\[11px\] {
            font-size: 0.8125rem !important;
            line-height: 1.5 !important;
        }
        #lyria-panel-root span.text-\[10px\] {
            font-size: 0.8125rem !important;
        }
        .lyria-sec-row label.text-\[10px\] {
            font-size: 0.75rem !important;
        }
        .lyria-sec-row p.text-\[9px\] {
            font-size: 0.75rem !important;
        }
        body.app-step-lyria #lyria-panel-root input[type="text"],
        body.app-step-lyria #lyria-panel-root input[type="number"],
        body.app-step-lyria #lyria-panel-root select {
            min-height: 2.75rem;
        }
        #lyria-basics-content {
            border: 1px solid rgba(56, 189, 248, 0.18);
            border-radius: 0.9rem;
            background: linear-gradient(180deg, rgba(8, 13, 31, 0.28), rgba(15, 23, 42, 0.16));
            padding: 0.75rem;
        }
        #lyria-basics-content > .grid {
            border-radius: 0.85rem;
            background: rgba(2, 6, 23, 0.26);
            padding: 0.75rem;
        }
        #lyria-basics-content select,
        #lyria-basics-content input[type="text"],
        #lyria-basics-content textarea {
            background-color: rgba(2, 6, 23, 0.82) !important;
            border-color: rgba(56, 189, 248, 0.3) !important;
            box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
        }
        #lyria-basics-content select:focus,
        #lyria-basics-content input[type="text"]:focus,
        #lyria-basics-content textarea:focus {
            border-color: rgba(45, 212, 191, 0.82) !important;
            box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.16);
            outline: none;
        }
        #lyria-vocal-panel {
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.9)) !important;
            border-color: rgba(34, 211, 238, 0.5) !important;
            box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.55);
        }
        .lyria-sec-row {
            border-radius: 0.75rem;
            border: 1px solid rgba(71, 85, 105, 0.45);
            background: rgba(15, 23, 42, 0.55);
            padding: 0.75rem 1rem;
        }
        .lyria-sec-row.lyria-sec-card-studio {
            padding: 0.85rem 1rem 1rem;
            position: relative;
        }
        .lyria-sec-grip { touch-action: none; }
        .lyria-sec-row input[type="range"] { accent-color: rgb(34, 211, 238); }
        #emotion-intensity {
            --emotion-intensity-fill: 70%;
            appearance: none;
            -webkit-appearance: none;
            border-radius: 9999px;
            background: transparent;
            box-shadow: none;
        }
        #emotion-intensity::-webkit-slider-runnable-track {
            height: 0.5rem;
            border-radius: 9999px;
            background: linear-gradient(
                90deg,
                rgba(253, 224, 71, 1) 0%,
                rgba(250, 204, 21, 1) var(--emotion-intensity-fill),
                rgba(30, 41, 59, 0.92) var(--emotion-intensity-fill),
                rgba(30, 41, 59, 0.92) 100%
            );
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.16), 0 0 16px rgba(250, 204, 21, 0.32);
        }
        #emotion-intensity::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 1rem;
            height: 1rem;
            margin-top: -0.25rem;
            border: 2px solid rgba(255, 251, 235, 0.95);
            border-radius: 9999px;
            background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
            box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18), 0 0 20px rgba(250, 204, 21, 0.55);
        }
        #emotion-intensity::-moz-range-track {
            height: 0.5rem;
            border-radius: 9999px;
            background: rgba(30, 41, 59, 0.9);
        }
        #emotion-intensity::-moz-range-progress {
            height: 0.5rem;
            border-radius: 9999px;
            background: linear-gradient(90deg, rgba(253, 224, 71, 0.98), rgba(250, 204, 21, 0.98));
            box-shadow: 0 0 14px rgba(250, 204, 21, 0.35);
        }
        #emotion-intensity::-moz-range-thumb {
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(255, 251, 235, 0.95);
            border-radius: 9999px;
            background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
            box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18), 0 0 20px rgba(250, 204, 21, 0.55);
        }
        #korean-ratio {
            --korean-ratio-fill: 100%;
            appearance: none;
            -webkit-appearance: none;
            border-radius: 9999px;
            background: transparent;
            box-shadow: none;
        }
        #korean-ratio::-webkit-slider-runnable-track {
            height: 0.5rem;
            border-radius: 9999px;
            background: linear-gradient(
                90deg,
                rgba(253, 224, 71, 1) 0%,
                rgba(250, 204, 21, 1) var(--korean-ratio-fill),
                rgba(30, 41, 59, 0.92) var(--korean-ratio-fill),
                rgba(30, 41, 59, 0.92) 100%
            );
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.16), 0 0 16px rgba(250, 204, 21, 0.32);
        }
        #korean-ratio::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 1rem;
            height: 1rem;
            margin-top: -0.25rem;
            border: 2px solid rgba(255, 251, 235, 0.95);
            border-radius: 9999px;
            background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
            box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18), 0 0 20px rgba(250, 204, 21, 0.55);
        }
        #korean-ratio::-moz-range-track {
            height: 0.5rem;
            border-radius: 9999px;
            background: rgba(30, 41, 59, 0.9);
        }
        #korean-ratio::-moz-range-progress {
            height: 0.5rem;
            border-radius: 9999px;
            background: linear-gradient(90deg, rgba(253, 224, 71, 0.98), rgba(250, 204, 21, 0.98));
            box-shadow: 0 0 14px rgba(250, 204, 21, 0.35);
        }
        #korean-ratio::-moz-range-thumb {
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(255, 251, 235, 0.95);
            border-radius: 9999px;
            background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
            box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18), 0 0 20px rgba(250, 204, 21, 0.55);
        }
        #lyria-quick-sections button.lyria-quick-add-pill {
            border-radius: 9999px;
            padding: 0.35rem 0.85rem;
            font-weight: 500;
        }
        .lyria-sec-composition-main textarea.lyria-f-hint {
            min-height: 8.5rem;
            font-size: 0.9375rem;
            line-height: 1.55;
        }
        .lyria-dir-section-shell {
            border-radius: 1rem;
            border: 1px solid rgba(71, 85, 105, 0.38);
            background:
                linear-gradient(180deg, rgba(30, 41, 59, 0.42), rgba(15, 23, 42, 0.72));
            box-shadow:
                inset 0 1px 0 rgba(148, 163, 184, 0.08),
                0 8px 24px rgba(2, 6, 23, 0.16);
            padding: 0.9rem;
        }
        .lyria-dir-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 0.8rem;
        }
        @media (min-width: 640px) {
            .lyria-dir-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (min-width: 1024px) {
            .lyria-dir-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }
        .lyria-dir-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-height: 3.1rem;
            border-radius: 0.9rem;
            border: 1px solid rgba(71, 85, 105, 0.32);
            background: rgba(15, 23, 42, 0.72);
            padding: 0.4rem 0.8rem;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
            cursor: pointer;
        }
        .lyria-dir-card:hover {
            border-color: rgba(56, 189, 248, 0.42);
            background: rgba(15, 23, 42, 0.9);
            transform: translateY(-1px);
        }
        .lyria-dir-card-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 9999px;
            background: rgba(30, 41, 59, 0.88);
            color: rgb(196 181 253);
            font-size: 0.85rem;
            flex: 0 0 auto;
        }
        .lyria-dir-card-label {
            min-width: 0;
            flex: 0 1 auto;
            max-width: 42%;
            font-size: 0.8rem;
            font-weight: 700;
            color: rgb(224 242 254);
            letter-spacing: -0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lyria-dir-card-value {
            min-width: 0;
            flex: 1 1 0%;
            margin-left: 0.35rem;
            padding-right: 1.1rem;
            font-size: 0.83rem;
            font-weight: 600;
            color: rgb(226 232 240);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }
        .lyria-dir-card-select {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            appearance: none;
        }
        .lyria-dir-card-select:focus {
            opacity: 0.01;
        }
        .lyria-dir-tip {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            border-top: 1px solid rgba(71, 85, 105, 0.32);
            padding-top: 0.8rem;
            color: rgb(148 163 184);
            font-size: 0.78rem;
            line-height: 1.45;
        }
        .lyria-dir-tip i {
            color: rgb(250 204 21);
            flex: 0 0 auto;
        }
        #lyria-total-sec-label.lyria-over-limit { color: rgb(251, 113, 133) !important; }
        body.app-step-lyria #section-input,
        body.app-step-lyria #work-col-primary,
        body.app-step-lyria #workflow-panel-assets { display: none !important; }
        body.app-step-lyria #work-main-split { grid-template-columns: 1fr !important; }
        body.app-step-lyria #lyria-panel-root {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        /* Flatter panels in workflow mode — 빌더/Lyria 셸만 테두리 제거 */
        body[class*="app-step-"] #section-input.workflow-flat,
        body[class*="app-step-"] #lyria-panel-root.workflow-flat {
            border: none !important;
            border-left: none !important;
            border-top: none !important;
            box-shadow: none !important;
            background: #1e293b !important;
            border-radius: 1rem !important;
        }
        /* 가사/쇼츠 출력 카드: 섹션 구분용 테두리 유지 */
        body[class*="app-step-"] #work-col-primary.workflow-flat,
        body[class*="app-step-"] #workflow-panel-assets .workflow-card {
            box-shadow: none !important;
            background: rgba(51, 65, 85, 0.32) !important;
            border-radius: 1rem !important;
            border: 1px solid rgba(80, 95, 115, 0.55) !important;
            box-sizing: border-box !important;
        }
        body.app-step-lyrics #work-col-primary.workflow-flat,
        body.app-step-assets #work-col-primary.workflow-flat {
            padding: 1.25rem 1.5rem !important;
        }
        body.app-step-assets #workflow-panel-assets .workflow-card {
            padding: 1.25rem 1.5rem !important;
        }
        /* 네모 테두리 제거: 빌더/Lyria 셸·8대원칙 박스만 */
        #section-input,
        #lyria-panel-root,
        #lyrics-eight-principles {
            box-shadow: none !important;
        }
        #app-main-scroll .output-box {
            box-shadow: none !important;
        }
        #output-lyrics-a,
        #output-lyrics-b { border: none !important; }
        #app-topbar { border-bottom: 1px solid rgba(62, 72, 80, 0.4); }
        #app-main-scroll input:not([type="checkbox"]):not([type="radio"]),
        #app-main-scroll textarea,
        #app-main-scroll select {
            border: 1px solid rgba(62, 72, 80, 0.7) !important;
            border-radius: 6px !important;
            background: #1e293b !important;
            color: #DAE2FD !important;
        }
        #app-main-scroll input:focus,
        #app-main-scroll textarea:focus,
        #app-main-scroll select:focus {
            outline: none !important;
            border-color: rgba(137, 206, 255, 0.4) !important;
            box-shadow: 0 0 0 2px rgba(137, 206, 255, 0.1) !important;
        }
        /* 감정/디렉팅: native select 텍스트 대신 카드 face에 표시 (잘림 방지) */
        .dir-select-card {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 2.75rem;
            padding: 0.5rem 1.85rem 0.5rem 0.65rem;
            cursor: pointer;
        }
        .dir-select-card--compact {
            min-height: 2.35rem;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }
        .dir-select-card-display {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 0.875rem;
            line-height: 1.3;
            color: #DAE2FD;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
            user-select: none;
        }
        .dir-select-card--compact .dir-select-card-display {
            font-size: 0.75rem;
        }
        .dir-select-card-chevron {
            position: absolute;
            right: 0.65rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.62rem;
            color: rgb(148 163 184);
            pointer-events: none;
        }
        .dir-select-card-select {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        #generate-extend-btn {
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 26px rgba(91, 33, 182, 0.22);
        }
        #generate-extend-btn:hover {
            background-image: linear-gradient(90deg, rgb(147 51 234), rgb(217 70 239), rgb(99 102 241));
            box-shadow: 0 16px 34px rgba(168, 85, 247, 0.32), 0 0 0 1px rgba(244, 114, 182, 0.14) inset;
            transform: translateY(-1px);
        }
        #generate-extend-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(216, 180, 254, 0.28), 0 14px 32px rgba(168, 85, 247, 0.28);
        }
        /* 감정 4개: 1줄 4칸; KO는 이모지 유지, EN face는 applyUiLang에서 이모지 제거 */
        #mood-select-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.75rem;
        }
        #mood-select-grid select {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            text-align: left !important;
            text-align-last: left !important;
            padding-top: 0.625rem !important;
            padding-bottom: 0.625rem !important;
            padding-left: 0.625rem !important;
            padding-right: 1.55rem !important;
        }
        #app-shell { background: #1e293b; }
        #app-sidebar {
            border-right: 1px solid rgba(80, 95, 115, 0.5);
            background: #1e293b;
            width: var(--sidebar-width, 14rem);
            min-width: var(--sidebar-width, 14rem);
            max-width: min(24rem, 42vw);
        }
        #sidebar-resizer {
            position: relative;
            width: 12px;
            flex: 0 0 12px;
            cursor: col-resize;
            background: transparent;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }
        #sidebar-resizer::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 1px;
            transform: translateX(-50%);
            background: rgba(80, 95, 115, 0.5);
            transition: background-color 0.18s ease, box-shadow 0.18s ease, width 0.18s ease;
        }
        #sidebar-resizer::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 8px;
            transform: translateX(-50%);
            background: transparent;
        }
        #sidebar-resizer:hover::before,
        body.sidebar-resizing #sidebar-resizer::before {
            width: 3px;
            background: rgba(56, 189, 248, 0.9);
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
        }
        body.sidebar-resizing,
        body.sidebar-resizing * {
            cursor: col-resize !important;
            user-select: none !important;
        }
        @media (max-width: 1023px) {
            #app-sidebar {
                width: 14rem !important;
                min-width: 14rem !important;
            }
            #sidebar-resizer {
                display: none !important;
            }
        }
        #app-main-scroll { background:
            radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 26%),
            radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 24%),
            #1e293b; }
        #app-topbar { border-bottom: 1px solid rgba(62, 72, 80, 0.4); background: rgba(15, 23, 42, 0.9); }
        .workflow-topbar-shell {
            padding: 0.95rem 1rem 1rem;
            border-radius: 0 0 1.35rem 1.35rem;
            background:
                linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.9)),
                radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 34%);
            border: 1px solid rgba(51, 65, 85, 0.8);
            border-top: none;
            box-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
        }
        .workflow-topbar-inner {
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
        }
        .workflow-topbar-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .workflow-brand-block {
            min-width: 0;
            flex: 0 1 320px;
        }
        .workflow-brand-mark {
            display: inline-flex;
            flex-direction: column;
            gap: 0.15rem;
            padding: 0.78rem 0.95rem;
            border-radius: 1rem;
            border: 1px solid rgba(16, 185, 129, 0.2);
            background: linear-gradient(135deg, rgba(6, 78, 59, 0.55), rgba(8, 145, 178, 0.22));
        }
        .workflow-brand-note {
            margin-top: 0.7rem;
            font-size: 0.75rem;
            line-height: 1.5;
            color: #94a3b8;
        }
        .workflow-topbar-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.55rem;
            flex-wrap: wrap;
            flex: 1 1 640px;
        }
        .workflow-topbar-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            min-height: 2.25rem;
            padding: 0.3rem 0.35rem;
            border-radius: 0.45rem;
            border: 1px solid transparent;
            background: transparent;
            color: #cbd5e1;
            font-size: 0.75rem;
            font-weight: 700;
            white-space: nowrap;
            box-shadow: none;
            transition: color 0.16s ease;
        }
        .workflow-topbar-btn:hover {
            border-color: transparent;
            background: rgba(51, 65, 85, 0.4);
        }
        .workflow-topbar-btn.workflow-danger-btn:hover {
            border-color: transparent;
            background: rgba(127, 29, 29, 0.28);
        }
        .workflow-toggle-inline {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .workflow-toggle-label-mobile {
            display: none;
        }
        .workflow-toggle-inline .lyrics-lang-btn {
            min-width: 2.1rem;
            text-align: center;
        }
        .ui-lang-menu-wrap {
            position: relative;
            min-width: 0;
        }
        .ui-lang-menu-wrap #btn-lang-toggle {
            width: 100%;
        }
        #ui-lang-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }
        #ui-lang-current {
            min-width: 0;
            padding: 0;
            text-align: center;
        }
        .ui-lang-chevron {
            font-size: 0.62rem;
            transition: transform 0.16s ease;
        }
        .ui-lang-menu-wrap.is-open .ui-lang-chevron {
            transform: rotate(180deg);
        }
        #ui-lang-menu {
            position: absolute;
            top: calc(100% + 0.45rem);
            right: 0;
            z-index: 120;
            width: max-content;
            min-width: 14rem;
            max-width: calc(100vw - 2rem);
            padding: 0.4rem;
            border: 1px solid rgba(71, 85, 105, 0.9);
            border-radius: 0.65rem;
            background: rgba(15, 23, 42, 0.98);
            box-shadow: 0 18px 44px rgba(15, 23, 42, 0.38);
        }
        #ui-lang-menu[hidden] {
            display: none;
        }
        .ui-lang-option {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.55rem 0.65rem;
            border: 0;
            border-radius: 0.45rem;
            background: transparent;
            color: #cbd5e1;
            font-size: 0.78rem;
            font-weight: 700;
            text-align: left;
        }
        .ui-lang-option:hover,
        .ui-lang-option:focus-visible {
            background: rgba(71, 85, 105, 0.72);
            color: #ffffff;
            outline: none;
        }
        .ui-lang-option[aria-selected="true"] {
            background: rgba(37, 99, 235, 0.3);
            color: #ffffff;
        }
        .ui-lang-option-check {
            width: 0.9rem;
            color: #38bdf8;
            opacity: 0;
        }
        .ui-lang-option[aria-selected="true"] .ui-lang-option-check {
            opacity: 1;
        }
        .ui-lang-option-label {
            flex: 1;
        }
        .ui-lang-option-code {
            color: #94a3b8;
            font-size: 0.68rem;
        }
        @media (min-width: 768px) {
            #sidebar-btn-settings { min-width: 5.55rem; }
            #btn-clear-all { min-width: 5.95rem; }
            #btn-history { min-width: 5rem; }
            #btn-lyrics-lang-toggle { min-width: 10rem; }
            #btn-lang-toggle { min-width: 8.9rem; }
            #btn-lyrics-lang-toggle,
            #btn-lang-toggle {
                justify-content: flex-start;
                gap: 0.4rem;
            }
        }
        .workflow-stepbar {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.8rem;
            margin-top: 0.95rem;
            align-items: stretch;
        }
        .workflow-stepbar > [data-app-step] {
            width: 100%;
            min-width: 0;
            min-height: 5.1rem;
            padding: 0.65rem 0.9rem;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-content: start;
            justify-self: stretch;
            text-align: left;
            background: rgba(30, 41, 59, 0.78);
            border: 1px solid rgba(71, 85, 105, 0.72) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        #app-sidebar {
            position: sticky;
            top: 0;
            background:
                linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94)),
                radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 34%);
            border-right: 1px solid rgba(51, 65, 85, 0.8);
        }
        .workflow-sidebar-note {
            margin: 0 0.35rem 0.9rem;
            padding: 0.75rem 0.85rem;
            border-radius: 1rem;
            border: 1px solid rgba(71, 85, 105, 0.75);
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.9));
            color: #94a3b8;
            font-size: 0.72rem;
            line-height: 1.45;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        .app-sidebar-link {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            border-radius: 1rem;
            border: 1px solid transparent !important;
            padding: 0.85rem 0.9rem;
            position: relative;
            background: rgba(15, 23, 42, 0.55);
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .app-sidebar-link:hover {
            transform: translateY(-1px);
            background: rgba(30, 41, 59, 0.92) !important;
            border-color: rgba(71, 85, 105, 0.8) !important;
            box-shadow: 0 10px 22px rgba(2, 6, 23, 0.24);
        }
        .app-sidebar-link.active {
            background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(79, 70, 229, 0.22)) !important;
            color: #DAE2FD !important;
            border-color: rgba(96, 165, 250, 0.45) !important;
            box-shadow: 0 12px 26px rgba(8, 145, 178, 0.12);
        }
        .workflow-nav-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.35rem;
            height: 2.35rem;
            border-radius: 0.95rem;
            background: rgba(30, 41, 59, 0.95);
            border: 1px solid rgba(71, 85, 105, 0.75);
            flex: 0 0 2.35rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .app-sidebar-link.active .workflow-nav-icon {
            background: rgba(15, 23, 42, 0.92);
            border-color: rgba(125, 211, 252, 0.4);
        }
        .workflow-nav-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.18rem;
        }
        .workflow-nav-topline {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            min-width: 0;
            flex-wrap: wrap;
        }
        .workflow-nav-step,
        .workflow-nav-kicker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.15rem;
            padding: 0 0.45rem;
            border-radius: 9999px;
            font-size: 0.66rem;
            line-height: 1;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-weight: 800;
        }
        .workflow-nav-step {
            background: rgba(14, 165, 233, 0.14);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #bae6fd;
        }
        .workflow-nav-kicker {
            background: rgba(51, 65, 85, 0.78);
            border: 1px solid rgba(71, 85, 105, 0.7);
            color: #94a3b8;
        }
        .workflow-nav-label {
            display: block;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.25;
            color: #f8fafc;
            letter-spacing: -0.01em;
        }
        .workflow-nav-caption {
            display: block;
            font-size: 0.8rem;
            line-height: 1.4;
            color: #94a3b8;
            font-weight: 600;
            word-break: keep-all;
        }
        .wf-step-num { font-size: 10px; opacity: 0.55; margin-right: 4px; font-weight: 700; }
        .workflow-stage-hero { display: none !important; }
        .workflow-stage-hero {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem 1.05rem;
            margin-bottom: 1rem;
            border-radius: 1.3rem;
            border: 1px solid rgba(71, 85, 105, 0.7);
            background:
                linear-gradient(135deg, rgba(8, 145, 178, 0.13), rgba(79, 70, 229, 0.14)),
                rgba(15, 23, 42, 0.88);
            box-shadow: 0 16px 34px rgba(2, 6, 23, 0.2);
        }
        .workflow-stage-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.3rem 0.6rem;
            margin-bottom: 0.55rem;
            border-radius: 9999px;
            background: rgba(14, 165, 233, 0.14);
            border: 1px solid rgba(56, 189, 248, 0.35);
            color: #bae6fd;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .workflow-stage-hero-copy {
            min-width: 0;
            flex: 1 1 460px;
        }
        .workflow-stage-hero-copy h2 {
            margin: 0;
            font-size: 1.35rem;
            font-weight: 900;
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: #f8fafc;
        }
        .workflow-stage-hero-copy p {
            margin: 0.5rem 0 0;
            max-width: 52rem;
            font-size: 0.83rem;
            line-height: 1.55;
            color: #a5b4fc;
        }
        .workflow-stage-hero-chips {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-end;
            gap: 0.5rem;
            flex: 1 1 280px;
        }
        .workflow-stage-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.62rem 0.82rem;
            border-radius: 9999px;
            background: rgba(15, 23, 42, 0.82);
            border: 1px solid rgba(71, 85, 105, 0.72);
            color: #cbd5e1;
            font-size: 0.76rem;
            font-weight: 700;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        .workflow-stage-chip i {
            color: #7dd3fc;
            font-size: 0.72rem;
        }
        .workflow-toolbar-shell {
            display: none;
            padding: 0.9rem 1rem;
            border-radius: 1rem;
            border: 1px solid rgba(71, 85, 105, 0.6);
            background:
                linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(79, 70, 229, 0.08)),
                rgba(15, 23, 42, 0.9);
            box-shadow: 0 14px 28px rgba(2, 6, 23, 0.18), inset 0 1px 0 rgba(255,255,255,0.04);
            position: sticky;
            top: 0.75rem;
            z-index: 11;
            backdrop-filter: blur(14px);
        }
        .workflow-toolbar-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.8rem;
            flex-wrap: wrap;
        }
        .workflow-toolbar-title {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            min-width: 0;
        }
        .workflow-toolbar-title h3 {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 800;
            color: #f8fafc;
        }
        .workflow-toolbar-title p {
            margin: 0.2rem 0 0;
            font-size: 0.75rem;
            color: #94a3b8;
            line-height: 1.45;
        }
        .workflow-toolbar-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.15rem 0.5rem;
            border-radius: 9999px;
            border: 1px solid rgba(96, 165, 250, 0.28);
            background: rgba(30, 41, 59, 0.9);
            color: #cbd5e1;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .workflow-tabs {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.65rem;
        }
        .workflow-subtab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            padding: 0.75rem 0.85rem;
            border-radius: 0.95rem;
            border: 1px solid rgba(71, 85, 105, 0.82);
            background: rgba(15, 23, 42, 0.88);
            color: #cbd5e1;
            font-size: 0.8rem;
            font-weight: 700;
            line-height: 1.3;
            text-align: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        .workflow-subtab.active {
            background: linear-gradient(135deg, rgba(8, 145, 178, 0.95), rgba(109, 40, 217, 0.95));
            border-color: rgba(125, 211, 252, 0.38);
            color: #fff;
            box-shadow: 0 8px 20px rgba(14, 165, 233, 0.14);
        }
        .workflow-subtab i {
            font-size: 0.8rem;
        }
        .workflow-panel-hidden {
            display: none !important;
        }
        #section-input {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(71, 85, 105, 0.72) !important;
            background:
                radial-gradient(circle at top left, rgba(14, 165, 233, 0.09), transparent 24%),
                radial-gradient(circle at top right, rgba(129, 140, 248, 0.08), transparent 22%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
            box-shadow: 0 24px 44px rgba(2, 6, 23, 0.18);
        }
        #section-input::before {
            content: '';
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, rgba(56, 189, 248, 0.6), rgba(129, 140, 248, 0.35), transparent);
            pointer-events: none;
        }
        #style-card,
        #emotion-panel,
        #builder-preset-topic-block,
        #advanced-generate-options,
        #tag-palette-section,
        #custom-structure-panel {
            position: relative;
            overflow: hidden;
            border-color: rgba(71, 85, 105, 0.72) !important;
            box-shadow: 0 14px 30px rgba(2, 6, 23, 0.18);
        }
        #style-card,
        #emotion-panel,
        #builder-preset-topic-block,
        #advanced-generate-options {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82)) !important;
        }
        #style-card::after,
        #emotion-panel::after,
        #builder-preset-topic-block::after {
            content: '';
            position: absolute;
            inset: 0 0 auto 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(125, 211, 252, 0.42), transparent);
            pointer-events: none;
        }
        #style-card:hover,
        #emotion-panel:hover,
        #builder-preset-topic-block:hover,
        #advanced-generate-options:hover {
            border-color: rgba(96, 165, 250, 0.32) !important;
        }
        #style-summary-text {
            color: #e2e8f0;
        }
        #builder-preset-topic-block {
            background:
                linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.08)),
                rgba(15, 23, 42, 0.9) !important;
        }
        #generate-actions {
            padding: 0.9rem;
            border-radius: 1.2rem;
            border: 1px solid rgba(71, 85, 105, 0.72);
            background: rgba(15, 23, 42, 0.78);
            box-shadow: 0 18px 32px rgba(2, 6, 23, 0.18);
        }
        @media (min-width: 1024px) {
            body.app-step-inspiration #generate-actions {
                position: sticky;
                bottom: 0.85rem;
                z-index: 10;
                backdrop-filter: blur(14px);
            }
        }
        @media (max-width: 767px) {
            #app-topbar {
                position: static !important;
                top: auto !important;
            }
            .workflow-tabs {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .workflow-topbar-shell {
                padding: 0.75rem 0.8rem 0.8rem;
                border-radius: 0 0 1rem 1rem;
            }
            .workflow-topbar-main {
                gap: 0.7rem;
            }
            .workflow-topbar-actions {
                display: grid;
                grid-template-columns: repeat(4, 2.25rem) minmax(0, 1.1fr) minmax(0, 0.9fr);
                gap: 0.2rem;
                width: 100%;
                flex: 1 1 100%;
            }
            .workflow-topbar-btn {
                width: 100%;
                min-width: 0;
                min-height: 2.25rem;
                padding: 0.2rem;
                justify-content: center;
                gap: 0.2rem;
                border-radius: 0.4rem;
                box-shadow: none !important;
            }
            #btn-lyrics-lang-toggle,
            #btn-lang-toggle {
                justify-content: space-between;
                padding-inline: 0.1rem;
                gap: 0.15rem;
                font-size: 0.68rem;
            }
            #btn-clear-all > span[data-i18n],
            #btn-history > span[data-i18n],
            #sidebar-btn-settings > span[data-i18n] {
                display: none;
            }
            #btn-lyrics-lang-toggle .workflow-toggle-inline i,
            #btn-lang-toggle .workflow-toggle-inline i {
                display: none;
            }
            .workflow-toggle-label-desktop {
                display: none;
            }
            .workflow-toggle-label-mobile {
                display: inline;
            }
            #lyrics-lang-toggle,
            #ui-lang-toggle {
                min-width: 0;
            }
            #lyrics-lang-toggle .lyrics-lang-btn {
                min-width: 1.4rem;
                padding: 0.1rem 0.25rem;
            }
            #ui-lang-current {
                min-width: 0;
                padding: 0;
            }
            .workflow-stepbar {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.4rem;
                margin-top: 0.7rem;
            }
            .workflow-stepbar > [data-app-step] {
                min-height: 5rem;
                padding: 0.55rem 0.35rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.35rem;
                text-align: center;
                border-radius: 0.85rem;
            }
            .workflow-stage-hero {
                padding: 0.9rem;
                border-radius: 1.1rem;
            }
            .workflow-stage-hero-copy h2 {
                font-size: 1.08rem;
            }
            .workflow-stage-hero-copy p {
                font-size: 0.76rem;
            }
            .workflow-stage-hero-chips {
                justify-content: flex-start;
            }
            .app-sidebar-link {
                padding: 0.55rem 0.35rem;
                gap: 0.35rem;
            }
            .workflow-nav-icon,
            .app-sidebar-link.active .workflow-nav-icon {
                width: 1.9rem;
                height: 1.9rem;
                flex-basis: 1.9rem;
                border-radius: 0.65rem;
            }
            .workflow-nav-copy {
                width: 100%;
                align-items: center;
                gap: 0.2rem;
            }
            .workflow-nav-topline {
                justify-content: center;
            }
            .workflow-nav-kicker,
            .workflow-nav-caption {
                display: none;
            }
            .workflow-nav-label {
                font-size: 0.76rem;
                line-height: 1.25;
                word-break: keep-all;
            }
            .workflow-nav-step {
                min-height: 1rem;
                padding: 0 0.35rem;
                font-size: 0.52rem;
            }
        }

        /* Lyria: Master Overview Timeline Bar (AI Studio style) */
        #lyria-master-timeline {
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(71, 85, 105, 0.5);
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 14px;
        }
        #lyria-master-timeline-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        #lyria-master-timeline-label span {
            font-size: 11px;
            font-weight: 600;
            color: rgb(148 163 184);
        }
        #lyria-master-track {
            position: relative;
            height: 28px;
            background: rgba(30, 41, 59, 0.9);
            border-radius: 9999px;
            overflow: hidden;
            border: 1px solid rgba(100, 116, 139, 0.35);
        }
        #lyria-master-segments {
            position: absolute;
            inset: 0;
            display: flex;
            gap: 2px;
            padding: 3px 4px;
        }
        .lyria-master-seg {
            border-radius: 9999px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            color: rgba(0,0,0,0.6);
            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
            min-width: 20px;
            overflow: hidden;
            white-space: nowrap;
            padding: 0 5px;
            transition: transform 0.15s;
        }
        .lyria-master-seg:hover { transform: scaleY(1.1); }
        .lyria-master-seg.s-intro    { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
        .lyria-master-seg.s-verse    { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .lyria-master-seg.s-prechorus { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
        .lyria-master-seg.s-chorus   { background: linear-gradient(135deg, #ec4899, #f472b6); }
        .lyria-master-seg.s-build    { background: linear-gradient(135deg, #f97316, #fb923c); }
        .lyria-master-seg.s-bridge   { background: linear-gradient(135deg, #10b981, #34d399); }
        .lyria-master-seg.s-interlude { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
        .lyria-master-seg.s-finalchorus { background: linear-gradient(135deg, #dc2626, #f87171); }
        .lyria-master-seg.s-outro   { background: linear-gradient(135deg, #6b7280, #9ca3af); }
        #lyria-master-labels {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 8px;
        }
        .lyria-master-legend {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: rgb(148 163 184);
        }
        .lyria-master-legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .l-intro    .lyria-master-legend-dot { background: #f59e0b; }
        .l-verse    .lyria-master-legend-dot { background: #3b82f6; }
        .l-prechorus .lyria-master-legend-dot { background: #8b5cf6; }
        .l-chorus   .lyria-master-legend-dot { background: #ec4899; }
        .l-build    .lyria-master-legend-dot { background: #f97316; }
        .l-bridge   .lyria-master-legend-dot { background: #10b981; }
        .l-interlude .lyria-master-legend-dot { background: #06b6d4; }
        .l-finalchorus .lyria-master-legend-dot { background: #dc2626; }
        .l-outro   .lyria-master-legend-dot { background: #6b7280; }

        /* Per-section bar colors */
        .lyria-sec-card-studio[data-sec-type="intro"]     .lyria-sec-bar-fill { background: linear-gradient(90deg, #f59e0bcc, #fbbf24) !important; }
        .lyria-sec-card-studio[data-sec-type="verse"]     .lyria-sec-bar-fill { background: linear-gradient(90deg, #3b82f6cc, #60a5fa) !important; }
        .lyria-sec-card-studio[data-sec-type="prechorus"]  .lyria-sec-bar-fill { background: linear-gradient(90deg, #8b5cf6cc, #a78bfa) !important; }
        .lyria-sec-card-studio[data-sec-type="chorus"]     .lyria-sec-bar-fill { background: linear-gradient(90deg, #ec4899cc, #f472b6) !important; }
        .lyria-sec-card-studio[data-sec-type="build"]      .lyria-sec-bar-fill { background: linear-gradient(90deg, #f97316cc, #fb923c) !important; }
        .lyria-sec-card-studio[data-sec-type="bridge"]     .lyria-sec-bar-fill { background: linear-gradient(90deg, #10b981cc, #34d399) !important; }
        .lyria-sec-card-studio[data-sec-type="interlude"]  .lyria-sec-bar-fill { background: linear-gradient(90deg, #06b6d4cc, #22d3ee) !important; }
        .lyria-sec-card-studio[data-sec-type="finalchorus"] .lyria-sec-bar-fill { background: linear-gradient(90deg, #dc2626cc, #f87171) !important; }
        .lyria-sec-card-studio[data-sec-type="outro"]      .lyria-sec-bar-fill { background: linear-gradient(90deg, #6b7280cc, #9ca3af) !important; }

        /* ================================================================
           UI POLISH: 통일된 강조색 (sky blue + neutral)로 리디자인
           ================================================================ */

        /* 1. 모든 버튼 그라데이션 제거 → flat sky blue */
        .mode-btn.active {
            background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
            color: #fff !important;
            box-shadow: 0 2px 10px rgba(14, 165, 233, 0.3) !important;
        }
        .tab-button.active {
            background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
            color: #fff !important;
            box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
        }
        .mega-button {
            background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
            box-shadow: 0 4px 20px rgba(14, 165, 233, 0.35) !important;
        }
        .mega-button:hover {
            background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
            box-shadow: 0 6px 28px rgba(14, 165, 233, 0.5) !important;
        }
        #generate-btn {
            background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
            box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25) !important;
        }

        /* 2. input/select 포커스 통일 */
        select:focus, input:not([type="checkbox"]):not([type="radio"]):focus,
        textarea:focus {
            border-color: rgba(14, 165, 233, 0.5) !important;
            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15) !important;
        }

        /* 3. 섹션 헤더/라벨 색상 통일 (Step 1 내에서만) */
        #section-input .text-emerald-300, #section-input .text-fuchsia-300,
        #section-input .text-purple-300, #section-input .text-blue-300,
        #section-input .text-pink-300, #section-input .text-amber-200,
        #section-input .text-violet-300, #section-input .text-indigo-300,
        #section-input .text-cyan-300, #section-input .text-orange-400,
        #section-input .text-sky-400, #section-input .text-blue-400,
        #section-input .text-cyan-400, #section-input .text-emerald-400 {
            color: #89CEFF !important;
        }
        /* Step 1 내의 label */
        #section-input label {
            color: #89CEFF !important;
        }

        /* 4. 섹션 테두리 통일 (Step 1 + Step 3 내에서만) */
        #section-input [class*="border-emerald-"],
        #section-input [class*="border-blue-"],
        #section-input [class*="border-purple-"],
        #section-input [class*="border-pink-"],
        #section-input [class*="border-amber-"],
        #section-input [class*="border-violet-"],
        #section-input [class*="border-indigo-"],
        #section-input [class*="border-cyan-"],
        #section-input [class*="border-fuchsia-"],
        #section-input [class*="border-orange-"],
        #section-input [class*="border-red-"],
        #workflow-panel-assets [class*="border-emerald-"],
        #workflow-panel-assets [class*="border-blue-"],
        #workflow-panel-assets [class*="border-purple-"],
        #workflow-panel-assets [class*="border-pink-"],
        #workflow-panel-assets [class*="border-amber-"],
        #workflow-panel-assets [class*="border-violet-"],
        #workflow-panel-assets [class*="border-indigo-"],
        #workflow-panel-assets [class*="border-cyan-"],
        #workflow-panel-assets [class*="border-fuchsia-"],
        #workflow-panel-assets [class*="border-orange-"],
        #workflow-panel-assets [class*="border-red-"] {
            border-color: rgba(62, 72, 80, 0.5) !important;
        }

        /* 5. toggle 체크박스 통일 */
        .toggle-checkbox:checked {
            background-color: #0ea5e9 !important;
            border-color: #0ea5e9 !important;
        }
        input[type="checkbox"]:checked, input[type="radio"]:checked {
            accent-color: #0ea5e9;
        }

        /* 6. 사이드바 active 색상 */
        .app-sidebar-link.active {
            background: rgba(14, 165, 233, 0.1) !important;
        }

        /* 7. 예외: Clear all 버튼 아이콘만 red 유지 */
        #btn-clear-all i.fas, .text-red-400 i.fas {
            color: #f87171 !important;
        }

        .section-title {
            letter-spacing: -0.01em;
            color: #d8e7ff;
        }
        .section-title-icon {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            background: rgba(137, 206, 255, 0.12);
            border: 1px solid rgba(137, 206, 255, 0.16);
            color: #9fd6ff;
            flex: 0 0 22px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .section-title-icon i {
            font-size: 11px;
        }
        .section-title-indigo .section-title-icon {
            background: rgba(129, 140, 248, 0.12);
            border-color: rgba(129, 140, 248, 0.18);
            color: #b8c3ff;
        }
        .section-title-cyan .section-title-icon {
            background: rgba(34, 211, 238, 0.11);
            border-color: rgba(34, 211, 238, 0.18);
            color: #9fe8ff;
        }
        #style-card .style-control-label,
        #style-card .style-control-label span,
        #style-card .style-control-label i,
        #style-card .vocal-config-heading,
        #style-card .vocal-config-heading span,
        #style-card .vocal-config-heading i,
        #style-card .vocal-config-option,
        #style-card .vocal-config-option span {
            color: #334155 !important;
        }
        #style-card .style-control-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.5);
            background: rgba(226, 232, 240, 0.92);
            color: #475569 !important;
        }
        #style-card .vocal-config-option {
            padding: 4px 10px;
            border-radius: 9999px;
            background: rgba(241, 245, 249, 0.96);
            border: 1px solid rgba(148, 163, 184, 0.55);
            transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        }
        #style-card .vocal-config-option:hover {
            background: rgba(226, 232, 240, 0.98);
            border-color: rgba(100, 116, 139, 0.72);
        }
        #style-card .vocal-config-option span {
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        /* ================================================================
           🎨 태그 팔레트 (Tag Palette) — Phase 4
           ================================================================ */
        .tag-palette-tab {
            padding: 0.42rem 0.9rem;
            border-radius: 9999px;
            font-size: 0.74rem;
            font-weight: 700;
            cursor: pointer;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.24);
            color: #cbd5e1;
            transition: all 0.15s;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        .tag-palette-tab:hover {
            color: #f8fafc;
            border-color: rgba(148, 163, 184, 0.4);
            background: rgba(30, 41, 59, 0.95);
        }
        .tag-palette-tab.active {
            background: rgba(14, 165, 233, 0.22);
            border-color: rgba(56, 189, 248, 0.7);
            color: #f0f9ff;
            box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12) inset;
        }
        .tag-palette-mode-btn {
            padding: 0.34rem 0.72rem;
            border-radius: 9999px;
            font-size: 0.7rem;
            font-weight: 700;
            cursor: pointer;
            background: rgba(15, 23, 42, 0.82);
            border: 1px solid rgba(100, 116, 139, 0.28);
            color: #94a3b8;
            transition: all 0.15s;
        }
        .tag-palette-mode-btn:hover {
            color: #e2e8f0;
            border-color: rgba(148, 163, 184, 0.42);
        }
        .tag-palette-mode-btn.active {
            background: rgba(99, 102, 241, 0.24);
            border-color: rgba(129, 140, 248, 0.62);
            color: #eef2ff;
        }
        .tag-palette-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.24rem 0.58rem;
            border-radius: 9999px;
            font-size: 0.72rem;
            cursor: pointer;
            background: rgba(30, 41, 59, 0.38);
            border: 1px solid rgba(100, 116, 139, 0.24);
            color: #dbe4f0;
            transition: all 0.15s;
            user-select: none;
        }
        .tag-palette-chip:hover {
            background: rgba(51, 65, 85, 0.58);
            border-color: rgba(148, 163, 184, 0.36);
        }
        .tag-palette-chip.selected {
            background: rgba(14, 165, 233, 0.16);
            border-color: rgba(56, 189, 248, 0.52);
            color: #f0f9ff;
        }
        .tag-palette-dot {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .tag-palette-dot[data-reflect="A"] { background: #22c55e; }
        .tag-palette-dot[data-reflect="B"] { background: #eab308; }
        .tag-palette-dot[data-reflect="C"] { background: #94a3b8; }
        .tag-palette-dot[data-reflect="D"] { background: #ef4444; opacity: 0.7; }
        .tag-palette-selected-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.22rem;
            padding: 0.18rem 0.42rem 0.18rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.6875rem;
            line-height: 1.1;
            background: rgba(14, 165, 233, 0.15);
            border-color: rgba(14, 165, 233, 0.4);
            border: 1px solid;
            color: #e0f2fe;
        }
        .tag-palette-remove {
            cursor: pointer;
            opacity: 0.6;
            margin-left: 0.2rem;
            font-weight: 700;
        }
        .tag-palette-remove:hover { opacity: 1; }
        #tag-palette-count.over { color: #ef4444; font-weight: 700; }
        .tag-palette-empty {
            padding: 1rem;
            text-align: center;
            font-size: 0.75rem;
            color: #64748b;
            font-style: italic;
            width: 100%;
        }

        /* ================================================================
           LIGHT STUDIO THEME
           The main product is intentionally light-first. Teal signals primary
           actions, while violet is reserved for structural contrast features.
           ================================================================ */
        :root {
            --studio-canvas: #dde9ec;
            --studio-canvas-tint: #cfe0e4;
            --studio-surface: #f7fbfa;
            --studio-surface-soft: #f0f7f5;
            --studio-line: #ceddd9;
            --studio-line-strong: #bccfca;
            --studio-ink: #152b3d;
            --studio-ink-soft: #40576a;
            --studio-muted: #52677b;
            --studio-teal: #087b74;
            --studio-teal-strong: #06655f;
            --studio-teal-soft: #e0f3ef;
            --studio-sky-soft: #e7f2fb;
            --studio-violet: #6946c6;
            --studio-violet-soft: #f0ebff;
            --studio-step-card: linear-gradient(135deg, #edd6a3, #ddb96c);
            --studio-step-card-hover: linear-gradient(135deg, #edd6a3, #ddb96c);
            --studio-step-card-active: linear-gradient(135deg, #edd6a3, #ddb96c);
            --studio-panel-mint: linear-gradient(135deg, #e7f7f5, #f1faf8);
            --studio-panel-mint-soft: linear-gradient(135deg, #edf7f3, #f5fbf8);
            --studio-panel-violet: linear-gradient(135deg, #f7f2ff, #f2eefc);
            --studio-panel-violet-header: linear-gradient(135deg, #f3edff, #ece7ff);
            --studio-panel-violet-header-hover: linear-gradient(135deg, #ece4ff, #e7dfff);
            --studio-panel-amber: linear-gradient(135deg, #fff7e7, #fffbf2);
            --studio-shadow: 0 16px 36px rgba(25, 56, 70, 0.09);
            --studio-shadow-small: 0 8px 18px rgba(25, 56, 70, 0.07);
        }

        html,
        body {
            background: var(--studio-canvas) !important;
            color: var(--studio-ink) !important;
        }
        ::selection {
            background: #b9e3dc;
            color: #0e302e;
        }
        ::-webkit-scrollbar-track { background: #edf3f1; }
        ::-webkit-scrollbar-thumb { background: #b7c9c5; }
        ::-webkit-scrollbar-thumb:hover { background: #90aaa4; }

        #app-shell {
            background: var(--studio-canvas) !important;
        }
        #app-main-scroll {
            background:
                radial-gradient(circle at 8% 0%, rgba(8, 123, 116, 0.18), transparent 33%),
                radial-gradient(circle at 92% 4%, rgba(105, 70, 198, 0.12), transparent 29%),
                linear-gradient(135deg, #ddebed 0%, #e8f0f2 46%, #eef0f6 100%) !important;
        }
        #app-main-inner {
            max-width: 1480px;
            margin: 0 auto;
        }
        /* Top shell is 1320px, but its visible content track is 1286px after shell padding/borders.
           Match the lower workflow panels to that same visible track so the upper step bar and
           lower builder card read as one aligned column again. */
        .workflow-topbar-inner {
            max-width: 1320px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        #section-input,
        #step-content-structure {
            max-width: 1286px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        /* Keep utility text readable after the dark palette is removed. */
        #app-shell .text-slate-100,
        #app-shell .text-slate-200 { color: var(--studio-ink) !important; }
        #app-shell .text-slate-300 { color: var(--studio-ink-soft) !important; }
        #app-shell .text-slate-400 { color: var(--studio-muted) !important; }
        #app-shell .text-slate-500,
        #app-shell .text-slate-600 { color: #5f7082 !important; }
        #app-shell .text-blue-300,
        #app-shell .text-blue-400,
        #app-shell .text-cyan-300,
        #app-shell .text-cyan-400,
        #app-shell .text-sky-400 { color: #13708b !important; }
        #app-shell .text-emerald-300,
        #app-shell .text-emerald-400 { color: var(--studio-teal) !important; }
        #app-shell .text-violet-300,
        #app-shell .text-violet-400,
        #app-shell .text-purple-300,
        #app-shell .text-purple-400 { color: var(--studio-violet) !important; }
        #app-shell .text-indigo-300,
        #app-shell .text-indigo-400 { color: #4f46a8 !important; }
        #app-shell [class~="text-[10px]"] {
            font-size: 0.75rem !important;
            line-height: 1.4 !important;
        }
        #app-shell [class~="text-[11px]"] {
            font-size: 0.8rem !important;
            line-height: 1.4 !important;
        }
        #app-shell .text-xs.text-slate-500,
        #app-shell .text-xs.text-slate-600 {
            font-size: 0.8rem !important;
            font-weight: 600 !important;
            line-height: 1.45 !important;
        }
        #app-shell [data-i18n="lbl_section_emotion_directing"] {
            color: #4338a0 !important;
            font-size: 0.95rem !important;
        }
        #app-shell .text-amber-200,
        #app-shell .text-amber-300,
        #app-shell .text-amber-400,
        #app-shell .text-yellow-300,
        #app-shell .text-yellow-400 { color: #a16607 !important; }

        /* Neutralize the old slate utility surfaces, then reintroduce hierarchy below. */
        #app-shell [class*="bg-slate-"] {
            background-color: var(--studio-surface) !important;
        }
        #app-shell [class*="border-slate-"] {
            border-color: var(--studio-line) !important;
        }
        #app-shell .glass {
            background: var(--studio-surface) !important;
            border-color: var(--studio-line) !important;
            box-shadow: var(--studio-shadow-small) !important;
            backdrop-filter: none;
        }

        /* App top bar and three-step navigation. */
        #app-topbar {
            border-bottom-color: rgba(191, 209, 204, 0.8) !important;
            background: rgba(249, 251, 251, 0.96) !important;
            backdrop-filter: blur(16px);
        }
        .workflow-topbar-shell {
            background: linear-gradient(180deg, #f8fbfc, #eef4f6) !important;
            border-color: var(--studio-line) !important;
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            box-shadow: 0 18px 28px -24px rgba(25, 56, 70, 0.28) !important;
        }
        .workflow-brand-block {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 0.85rem;
            flex: 0 1 360px;
            padding: 0.7rem 0.8rem;
            border: 1px solid #a6d8ce;
            border-radius: 1rem;
            background: linear-gradient(135deg, #f0fbf8 0%, #edf6fb 100%);
            box-shadow:
                0 12px 26px rgba(8, 123, 116, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        .workflow-brand-mark {
            justify-content: center;
            min-width: 102px;
            min-height: 64px;
            padding: 0.72rem 1rem;
            background: linear-gradient(135deg, #087b74, #104b61) !important;
            border-color: #08736d !important;
            box-shadow:
                0 9px 20px rgba(8, 94, 91, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
        }
        .workflow-brand-mark > p:first-child {
            font-size: 1.25rem !important;
            background: linear-gradient(90deg, #ffffff, #82f3df) !important;
            background-clip: text !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
        }
        #app-topbar .workflow-brand-mark > p:last-child {
            color: #d9fff8 !important;
            font-weight: 800 !important;
            letter-spacing: 0.16em !important;
        }
        .workflow-brand-note {
            margin-top: 0;
            color: #234b5c !important;
            font-size: 0.78rem;
            line-height: 1.55;
            font-weight: 650;
        }
        .workflow-topbar-btn {
            background: transparent !important;
            border-color: transparent !important;
            color: #214e68 !important;
            box-shadow: none !important;
        }
        #app-topbar .workflow-topbar-btn i {
            color: inherit !important;
        }
        .workflow-topbar-btn:hover,
        .workflow-topbar-btn:focus-visible {
            background: transparent !important;
            border-color: transparent !important;
            color: #007f9f !important;
            box-shadow: none !important;
            transform: none;
        }
        .workflow-topbar-btn:focus-visible {
            outline: none;
        }
        #btn-clear-all:hover,
        #btn-clear-all:focus-visible {
            background: transparent !important;
            border-color: transparent !important;
            color: #b4233a !important;
            box-shadow: none !important;
        }
        #lyrics-lang-toggle {
            background: #dbe5ea !important;
            border-color: #c4d2da !important;
            box-shadow: inset 0 1px 2px rgba(24, 63, 90, 0.1) !important;
        }
        .lyrics-lang-btn { color: #526776 !important; }
        .lyrics-lang-btn:hover { background-color: rgba(255, 255, 255, 0.58) !important; }
        .lyrics-lang-btn.bg-blue-600 {
            background: #0797bd !important;
            color: #ffffff !important;
            box-shadow: 0 1px 3px rgba(7, 93, 122, 0.28) !important;
        }
        #ui-lang-menu {
            border-color: #c4d2da;
            background: rgba(247, 251, 252, 0.98);
            box-shadow: 0 18px 44px rgba(24, 63, 90, 0.2);
        }
        .ui-lang-option {
            color: #415b6a;
        }
        .ui-lang-option:hover,
        .ui-lang-option:focus-visible {
            background: rgba(219, 229, 234, 0.72);
            color: #17394b;
        }
        .ui-lang-option[aria-selected="true"] {
            background: rgba(7, 151, 189, 0.14);
            color: #075f79;
        }
        .ui-lang-option-code {
            color: #6d8290;
        }
        .workflow-stepbar > [data-app-step] {
            background: var(--studio-step-card) !important;
            border-color: #976b25 !important;
            box-shadow: 0 18px 32px rgba(25, 56, 70, 0.16) !important;
            color: #453116 !important;
        }
        .workflow-stepbar > [data-app-step]:hover {
            background: var(--studio-step-card-hover) !important;
            border-color: #976b25 !important;
            box-shadow: 0 20px 34px rgba(25, 56, 70, 0.18) !important;
        }
        .app-sidebar-link.active {
            background: var(--studio-step-card-active) !important;
            border-color: #976b25 !important;
            color: #3a2914 !important;
            box-shadow: 0 22px 36px rgba(143, 107, 36, 0.22) !important;
        }
        .workflow-nav-icon,
        .app-sidebar-link.active .workflow-nav-icon {
            background: rgba(255, 255, 255, 0.58) !important;
            border-color: rgba(140, 106, 48, 0.28) !important;
            box-shadow: none !important;
        }
        .workflow-nav-step {
            background: rgba(255, 255, 255, 0.86) !important;
            border-color: rgba(201, 167, 109, 0.85) !important;
            color: #7f5c1c !important;
        }
        .workflow-nav-kicker {
            background: rgba(255, 255, 255, 0.46) !important;
            border-color: rgba(190, 156, 96, 0.45) !important;
            color: #7a6650 !important;
        }
        .workflow-nav-label,
        .workflow-stage-hero-copy h2,
        .workflow-toolbar-title h3 { color: var(--studio-ink) !important; }
        .workflow-nav-caption,
        .workflow-stage-hero-copy p,
        .workflow-toolbar-title p { color: var(--studio-ink-soft) !important; }

        /* Main work surfaces. */
        body[class*="app-step-"] #lyria-panel-root.workflow-flat,
        #section-input,
        #lyria-panel-root {
            background: var(--studio-surface) !important;
            border: 1px solid var(--studio-line) !important;
            border-radius: 1.15rem !important;
            box-shadow: var(--studio-shadow) !important;
        }
        /* This is a layout wrapper, not a visual card. Inner panels carry the color and borders. */
        body[class*="app-step-"] #section-input.workflow-flat {
            background: linear-gradient(180deg, rgba(247, 251, 250, 0.82), rgba(239, 246, 245, 0.92)) !important;
            border: none !important;
            box-shadow: 0 18px 36px rgba(25, 56, 70, 0.06) !important;
            border-radius: 1.5rem !important;
        }
        #section-input::before,
        #style-card::after,
        #emotion-panel::after,
        #builder-preset-topic-block::after {
            background: linear-gradient(90deg, rgba(8, 123, 116, 0.42), rgba(105, 70, 198, 0.22), transparent) !important;
        }
        #app-shell #style-card,
        #app-shell #builder-preset-topic-block,
        #app-shell #advanced-generate-options,
        #app-shell #custom-structure-panel,
        #app-shell #tag-palette-section,
        #app-shell #generate-actions {
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            box-shadow: 0 16px 24px -22px rgba(25, 56, 70, 0.24) !important;
        }
        #app-shell .section-title {
            color: var(--studio-ink) !important;
        }
        #builder-preset-header {
            background: #edf5f3 !important;
            border-color: #d2e3df !important;
        }
        /* Step 1 collapsible controls should read as one family, not three unrelated colors. */
        #tag-palette-section,
        #custom-structure-panel,
        #emotion-panel {
            background: var(--studio-panel-violet) !important;
            border-color: #dfd2f0 !important;
        }
        #app-shell #emotion-panel {
            background: var(--studio-panel-violet) !important;
        }
        #style-keywords-header,
        #custom-structure-header,
        #emotion-header {
            background: var(--studio-panel-violet-header) !important;
            border-color: #cdbbef !important;
            box-shadow: none !important;
        }
        #style-keywords-header:hover,
        #custom-structure-header:hover,
        #emotion-header:hover {
            background: var(--studio-panel-violet-header-hover) !important;
            border-color: #bba2eb !important;
        }
        #style-keywords-header .section-title-icon,
        #custom-structure-header .section-title-icon,
        #emotion-header .section-title-icon,
        #emotion-header i:first-child {
            background: #e9deff !important;
            border-color: #cab6f2 !important;
            color: #6b45ba !important;
        }
        #style-keywords-header .text-violet-200,
        #style-keywords-header .text-violet-300,
        #style-keywords-header .text-slate-400,
        #style-keywords-collapse-icon,
        #custom-structure-header .text-blue-300,
        #custom-structure-header h3,
        #custom-structure-collapse-icon,
        #emotion-header .text-violet-300,
        #emotion-header .text-violet-400,
        #emotion-header h3,
        #emotion-collapse-icon {
            color: #5b3da6 !important;
        }
        #style-keywords-header .section-title-icon i,
        #custom-structure-header .section-title-icon i,
        #emotion-header .section-title-icon i,
        #emotion-header > .flex i:first-child {
            color: #6b45ba !important;
        }
        #style-keywords-header .text-slate-400 { color: #736b8d !important; }
        #style-keywords-count-badge {
            background: #e9deff !important;
            border-color: #cab6f2 !important;
            color: #5f3ead !important;
        }
        #emotion-header .bg-violet-900\/50,
        #emotion-header span.text-\[10px\] {
            background: #e9deff !important;
            color: #5f3ead !important;
            border: 1px solid #cab6f2 !important;
        }
        #style-summary-text { color: var(--studio-ink) !important; }
        body[class*="app-step-"] #work-col-primary.workflow-flat,
        body[class*="app-step-"] #workflow-panel-assets .workflow-card {
            background: var(--studio-surface) !important;
            border-color: var(--studio-line) !important;
            box-shadow: var(--studio-shadow) !important;
        }

        #app-shell .workflow-stepbar > [data-app-step] .workflow-nav-icon i { color: #7d5a1f !important; }
        .workflow-stepbar > [data-app-step].active {
            background: var(--studio-step-card-active) !important;
            border-color: #976b25 !important;
        }
        .workflow-stepbar > [data-app-step].active::before {
            content: "";
            position: absolute;
            left: 0.45rem;
            top: 50%;
            width: 0.25rem;
            height: 64%;
            border-radius: 2px;
            background: #19cdbd;
            box-shadow: 0 0 8px rgba(25, 205, 189, 0.55);
            transform: translateY(-50%);
            pointer-events: none;
        }
        .workflow-stepbar > [data-app-step] .workflow-nav-label { color: #3e2d17 !important; }
        .workflow-stepbar > [data-app-step] .workflow-nav-caption { color: #4b3824 !important; }


        #style-card {
            background: var(--studio-panel-mint) !important;
            border-color: #b8ded9 !important;
        }
        #builder-preset-topic-block {
            background: var(--studio-panel-mint-soft) !important;
            border-color: #bddfc7 !important;
        }
        #advanced-generate-options {
            background: var(--studio-panel-amber) !important;
            border-color: #ead7a8 !important;
        }
        #app-shell #advanced-generate-options label > span {
            color: #385467 !important;
            font-weight: 700 !important;
        }
        #app-shell #advanced-generate-options label > span > span { color: inherit !important; }
        #app-shell #advanced-generate-options label:has(.toggle-checkbox:checked) > span {
            color: #08756f !important;
        }
        #generate-actions {
            background: linear-gradient(135deg, #e3f5f1, #eff8fc) !important;
            border-color: #afd8d0 !important;
        }
        #section-input .grid:has(#emotion-intensity) > .glass:first-child,
        #section-input .grid:has(#korean-ratio) > .glass:last-child {
            background: #fff8e8 !important;
            border-color: #ecd59a !important;
        }
        #section-input .grid:has(#emotion-intensity) > .glass:first-child {
            border-left-color: transparent !important;
        }
        #section-input .grid:has(#korean-ratio) > .glass:last-child {
            border-right-color: transparent !important;
        }
        #section-input .rounded-xl.bg-slate-900\/16 {
            background: #f6faf9 !important;
            border-color: #d3e3df !important;
            border-left-color: transparent !important;
            border-right-color: transparent !important;
        }

        #review-toolbar {
            background: linear-gradient(135deg, #e8f2ff, #f1f7ff) !important;
            border-color: #bdd5ea !important;
        }
        #output-toolbar {
            background: linear-gradient(135deg, #f5efff, #faf5ff) !important;
            border-color: #d7c8ef !important;
        }
        body.app-step-lyrics #work-col-primary.workflow-flat {
            background: linear-gradient(135deg, #edf5ff, #f5f9ff 54%) !important;
            border-color: #bdd7eb !important;
        }
        #workflow-panel-assets .workflow-card[data-asset="style"] {
            background: linear-gradient(135deg, #e8f6f0, #f4faf7 54%) !important;
            border-color: #b8ddcb !important;
        }
        #workflow-panel-assets .workflow-card[data-asset="theory"] {
            background: linear-gradient(135deg, #fff5e6, #fffaf2 54%) !important;
            border-color: #ead2a0 !important;
        }
        #workflow-panel-assets .workflow-card[data-asset="video"] {
            background: linear-gradient(135deg, #fff1f5, #fff8fb 54%) !important;
            border-color: #edc0cb !important;
        }
        #workflow-panel-assets .workflow-card[data-asset="art"] {
            background: linear-gradient(135deg, #fff8e3, #fffbf2 54%) !important;
            border-color: #ead68e !important;
        }
        #workflow-panel-assets .workflow-card[data-asset="marketing"] {
            background: linear-gradient(135deg, #f4efff, #faf6ff 54%) !important;
            border-color: #d8c8f2 !important;
        }
        #lyria-panel-root {
            background: linear-gradient(135deg, #e8f8f3, #f4fbf8 52%) !important;
            border-color: #a9d9cf !important;
        }

        /* Review/asset tab controls. */
        .workflow-toolbar-shell,
        .workflow-stage-hero {
            background: linear-gradient(135deg, #f8fcfb, #f4f8fc) !important;
            border-color: var(--studio-line) !important;
            box-shadow: var(--studio-shadow-small) !important;
        }
        .workflow-stage-pill,
        .workflow-toolbar-badge {
            background: var(--studio-teal-soft) !important;
            border-color: #b4ddd6 !important;
            color: var(--studio-teal-strong) !important;
        }
        .workflow-stage-chip,
        .workflow-subtab {
            background: linear-gradient(135deg, #eff8f6, #f1f5fa) !important;
            border-color: var(--studio-line-strong) !important;
            color: var(--studio-ink-soft) !important;
            box-shadow: none !important;
        }
        .workflow-subtab.active {
            background: linear-gradient(135deg, #0c9890, #0b7798) !important;
            border-color: #0c8880 !important;
            color: #fff !important;
            box-shadow: 0 8px 18px rgba(8, 123, 116, 0.18) !important;
        }

        /* Inputs, editable output, and selectable cards. */
        #app-shell input:not([type="checkbox"]):not([type="radio"]),
        #app-shell textarea,
        #app-shell select,
        #app-shell [contenteditable="true"],
        #app-shell .output-box {
            background: #fafdfc !important;
            color: var(--studio-ink) !important;
            border-color: var(--studio-line-strong) !important;
            box-shadow: inset 0 1px 1px rgba(25, 56, 70, 0.03) !important;
        }
        #app-shell .output-box,
        #custom-structure-preview,
        #lyria-master-timeline,
        .lyria-sec-row,
        .lyria-dir-section-shell,
        .lyria-dir-card,
        #lyria-basics-content,
        #lyria-basics-content > .grid,
        #lyria-vocal-panel,
        #lyria-lyrics-block,
        #lyria-topic-suggestions-box,
        #lyria-sections-list {
            background: #f5faf9 !important;
            border-color: var(--studio-line) !important;
            box-shadow: none !important;
        }
        /* Use a quiet helper-card treatment instead of styling the guide as generated lyrics. */
        #app-shell #output-lyrics.placeholder-text {
            background: linear-gradient(135deg, #f5faf9, #edf5f4) !important;
            color: #8294a1 !important;
            opacity: 1;
            font-style: normal;
            font-weight: 400;
        }
        #app-shell .extend-auto-summary {
            background: #fff5dc !important;
            border-color: #e4bd60 !important;
        }
        #app-shell .extend-auto-summary-copy {
            color: #76560d !important;
            font-weight: 600;
        }
        #app-shell .extend-auto-summary-copy strong { color: #684b08 !important; }
        #app-shell .extend-mode-explainer {
            background: #f2eafe !important;
            border-color: #c9aff1 !important;
        }
        #app-shell .extend-mode-explainer-title {
            color: #5d3d86 !important;
            font-weight: 700;
        }
        #app-shell .extend-mode-explainer-copy {
            color: #704e98 !important;
            font-weight: 500;
        }
        #app-shell .extend-mode-explainer-copy strong { color: #59367f !important; }
        #app-shell input:not([type="checkbox"]):not([type="radio"]):focus,
        #app-shell textarea:focus,
        #app-shell select:focus,
        #app-shell [contenteditable="true"]:focus {
            border-color: #54a99f !important;
            box-shadow: 0 0 0 3px rgba(8, 123, 116, 0.12) !important;
        }
        #app-shell input::placeholder,
        #app-shell textarea::placeholder { color: #9aa9b3 !important; }
        #app-shell option { background: #fff; color: var(--studio-ink); }
        .dir-select-card,
        .dir-select-card-display {
            color: var(--studio-ink) !important;
        }

        /* Lyria had a separate dark layer; bring it into the same light system. */
        #lyria-panel-root,
        #lyria-panel-root .text-slate-200 { color: var(--studio-ink) !important; }
        #lyria-panel-root .text-slate-300 { color: var(--studio-ink-soft) !important; }
        #lyria-panel-root .text-slate-400,
        #lyria-panel-root .text-slate-500,
        #lyria-panel-root .text-slate-600 { color: var(--studio-muted) !important; }
        #lyria-panel-root h3 { color: var(--studio-teal-strong) !important; }
        #lyria-final-prompt-title {
            color: #164d5f !important;
            font-size: 1rem !important;
            font-weight: 800 !important;
            line-height: 1.45;
        }
        #lyria-final-prompt-help {
            color: #4b6677 !important;
            font-size: 0.8125rem !important;
            font-weight: 500;
            line-height: 1.55 !important;
        }
        #lyria-basics-content select,
        #lyria-basics-content input[type="text"],
        #lyria-basics-content textarea,
        body.app-step-lyria #lyria-panel-root input[type="text"],
        body.app-step-lyria #lyria-panel-root input[type="number"],
        body.app-step-lyria #lyria-panel-root select {
            background: #fff !important;
            border-color: var(--studio-line-strong) !important;
            color: var(--studio-ink) !important;
        }
        .lyria-dir-card:hover {
            background: #eff9f7 !important;
            border-color: #9bcfc7 !important;
        }
        .lyria-dir-card-icon {
            background: #e6f4f1 !important;
            color: var(--studio-teal) !important;
        }
        #lyria-master-track {
            background: #e8efee !important;
            border-color: var(--studio-line-strong) !important;
        }
        #lyria-master-timeline-label span,
        .lyria-master-legend { color: var(--studio-muted) !important; }

        /* Palette and sliders retain clear actions without returning to a dark surface. */
        .tag-palette-tab,
        .tag-palette-mode-btn,
        .tag-palette-chip {
            background: #eff7f6 !important;
            border-color: var(--studio-line-strong) !important;
            color: var(--studio-ink-soft) !important;
            box-shadow: none !important;
        }
        .tag-palette-tab:hover,
        .tag-palette-mode-btn:hover,
        .tag-palette-chip:hover { background: #eff8f6 !important; }
        .tag-palette-tab.active,
        .tag-palette-chip.selected {
            background: var(--studio-teal-soft) !important;
            border-color: #62b8ad !important;
            color: var(--studio-teal-strong) !important;
        }
        .tag-palette-mode-btn.active {
            background: var(--studio-violet-soft) !important;
            border-color: #c6b4ff !important;
            color: var(--studio-violet) !important;
        }
        #emotion-intensity::-webkit-slider-runnable-track,
        #korean-ratio::-webkit-slider-runnable-track {
            background: linear-gradient(
                90deg,
                #f9cc55 0%,
                #e6a62e var(--emotion-intensity-fill, var(--korean-ratio-fill)),
                #dce7e4 var(--emotion-intensity-fill, var(--korean-ratio-fill)),
                #dce7e4 100%
            ) !important;
            box-shadow: inset 0 0 0 1px rgba(161, 102, 7, 0.12) !important;
        }
        #emotion-intensity::-moz-range-track,
        #korean-ratio::-moz-range-track { background: #dce7e4 !important; }
        #emotion-intensity::-moz-range-progress,
        #korean-ratio::-moz-range-progress { background: linear-gradient(90deg, #f9cc55, #e6a62e) !important; }
        #emotion-intensity::-webkit-slider-thumb,
        #korean-ratio::-webkit-slider-thumb,
        #emotion-intensity::-moz-range-thumb,
        #korean-ratio::-moz-range-thumb {
            border-color: #fffdf5 !important;
            box-shadow: 0 0 0 4px rgba(230, 166, 46, 0.16), 0 4px 10px rgba(161, 102, 7, 0.18) !important;
        }

        /* Light modals, secondary buttons, and footer. */
        #settings-modal .glass,
        #quick-mode-modal .glass,
        #history-modal .glass,
        #sfx-position-modal .glass,
        #preset-browser-modal > div {
            background: #f8fbfa !important;
            border-color: var(--studio-line) !important;
            color: var(--studio-ink) !important;
            box-shadow: 0 22px 52px rgba(25, 56, 70, 0.18) !important;
        }
        button[data-copy],
        .interactive-cta-hover {
            border-color: var(--studio-line-strong) !important;
            background: #eff6f5 !important;
            box-shadow: none !important;
        }
        #app-shell button.glass:not(.workflow-subtab):not(.tag-palette-tab):not(.tag-palette-mode-btn):not(.tag-palette-chip) {
            background: #eff6f5 !important;
            border-color: var(--studio-line-strong) !important;
        }
        button[data-copy]:hover,
        button[data-copy]:focus-visible,
        .interactive-cta-hover:hover,
        .interactive-cta-hover:focus-visible {
            background: var(--studio-teal-soft) !important;
            border-color: #8bc9bf !important;
            box-shadow: 0 8px 18px rgba(8, 123, 116, 0.10) !important;
        }
        #app-shell #btn-save-preset {
            color: #047857 !important;
        }
        #app-shell #btn-save-preset:hover,
        #app-shell #btn-save-preset:focus-visible {
            color: #064e3b !important;
            background: #bbf7d0 !important;
            border-color: #059669 !important;
            transform: none !important;
        }
        #app-shell #btn-browse-presets {
            color: #087f9c !important;
        }
        #app-shell #btn-browse-presets:hover,
        #app-shell #btn-browse-presets:focus-visible {
            color: #064e5b !important;
            background: #bdebf2 !important;
            border-color: #1594ab !important;
            transform: none !important;
        }
        #app-shell #btn-delete-preset {
            color: #c62828 !important;
        }
        #app-shell #btn-delete-preset:hover,
        #app-shell #btn-delete-preset:focus-visible {
            color: #7f1d1d !important;
            background: #fecaca !important;
            border-color: #dc2626 !important;
            transform: none !important;
        }
        #app-shell #custom-structure-preset-save {
            color: #087f9c !important;
        }
        #app-shell #custom-structure-preset-save:hover,
        #app-shell #custom-structure-preset-save:focus-visible {
            color: #064e5b !important;
            background: #bdebf2 !important;
            border-color: #1594ab !important;
        }
        #app-shell #custom-structure-preset-delete {
            color: #c62828 !important;
        }
        #app-shell #custom-structure-preset-delete:hover,
        #app-shell #custom-structure-preset-delete:focus-visible {
            color: #7f1d1d !important;
            background: #fecaca !important;
            border-color: #dc2626 !important;
        }
        #app-shell #custom-structure-clear svg {
            color: #b45309 !important;
        }
        #app-shell #custom-structure-clear:hover,
        #app-shell #custom-structure-clear:focus-visible {
            background: #fed7aa !important;
            border-color: #d97706 !important;
        }
        #app-shell #custom-structure-clear:hover svg,
        #app-shell #custom-structure-clear:focus-visible svg {
            color: #7c2d12 !important;
        }
        #app-shell #preflight-btn {
            background: #ecfeff !important;
            border-color: #22b8cf !important;
            color: #0e7490 !important;
        }
        #app-shell #preflight-btn:hover,
        #app-shell #preflight-btn:focus-visible {
            background: #cffafe !important;
            border-color: #0891b2 !important;
            color: #155e75 !important;
        }
        #app-shell #handoff-flow-btn {
            background: #ecfdf5 !important;
            border-color: #34d399 !important;
            color: #047857 !important;
        }
        #app-shell #handoff-flow-btn:hover,
        #app-shell #handoff-flow-btn:focus-visible {
            background: #d1fae5 !important;
            border-color: #059669 !important;
            color: #065f46 !important;
        }
        #app-shell #handoff-flow-status {
            background: #ecfeff !important;
            border-color: #67e8f9 !important;
            color: #334155 !important;
        }
        #app-shell #handoff-flow-status > span:first-child,
        #app-shell #handoff-flow-status-value {
            color: #155e75 !important;
        }
        #app-shell #handoff-flow-status[data-status="completed"] #handoff-flow-status-value {
            color: #047857 !important;
        }
        #app-shell #handoff-flow-status[data-status="failed"] #handoff-flow-status-value {
            color: #b91c1c !important;
        }
        #app-shell #handoff-profile-improve-btn {
            background: #d1fae5 !important;
            border-color: #34d399 !important;
            color: #047857 !important;
        }
        #app-shell #handoff-profile-improve-btn:disabled {
            background: #f1f5f4 !important;
            border-color: #cbd5d1 !important;
            color: #64748b !important;
        }
        #app-shell #creation-history-btn {
            background: #e0f2fe !important;
            border-color: #38bdf8 !important;
            color: #0369a1 !important;
        }
        #app-shell #creation-history-modal > div {
            background: #f8fbfb !important;
            border: 1px solid #cbd8d5 !important;
            color: #17324a !important;
        }
        #app-shell #creation-history-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        #app-shell .creation-history-card {
            min-width: 0;
            padding: 14px;
            border: 1px solid #cbd8d5;
            border-radius: 14px;
            background: #ffffff;
        }
        #app-shell .creation-history-card.is-winner {
            border-color: #f59e0b;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.14);
        }
        #app-shell .creation-history-card-head,
        #app-shell .creation-history-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        #app-shell .creation-history-card-head h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 800;
            color: #17324a;
            overflow-wrap: anywhere;
        }
        #app-shell .creation-history-card-head > span {
            flex-shrink: 0;
            color: #0369a1;
            font-size: 11px;
            font-weight: 800;
        }
        #app-shell .creation-history-meta-grid,
        #app-shell .creation-history-notes-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }
        #app-shell .creation-history-meta,
        #app-shell .creation-history-result {
            margin: 0;
            color: #334155;
            font-size: 11px;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }
        #app-shell .creation-history-meta > span:first-child,
        #app-shell .creation-history-result > span:first-child {
            display: block;
            margin-bottom: 2px;
            color: #64748b;
            font-weight: 700;
        }
        #app-shell .creation-history-result {
            margin-top: 10px;
        }
        #app-shell .creation-history-result a {
            color: #0369a1;
            text-decoration: underline;
        }
        #app-shell .creation-history-ratings {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }
        #app-shell .creation-history-field > span {
            display: block;
            margin-bottom: 4px;
            color: #475569;
            font-size: 10px;
            font-weight: 700;
        }
        #app-shell .creation-history-field select,
        #app-shell .creation-history-field textarea {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #ffffff;
            color: #17324a;
            padding: 7px 8px;
            font-size: 11px;
        }
        #app-shell .creation-history-field textarea {
            resize: vertical;
            min-height: 58px;
        }
        #app-shell .creation-history-actions {
            margin-top: 10px;
        }
        #app-shell .creation-history-actions label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #92400e;
            font-size: 11px;
            font-weight: 800;
        }
        #app-shell .creation-history-actions button {
            border: 1px solid #38bdf8;
            border-radius: 8px;
            background: #e0f2fe;
            color: #0369a1;
            padding: 7px 10px;
            font-size: 11px;
            font-weight: 800;
        }
        @media (max-width: 900px) {
            #app-shell #creation-history-list {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 520px) {
            #app-shell .creation-history-meta-grid,
            #app-shell .creation-history-notes-grid,
            #app-shell .creation-history-ratings {
                grid-template-columns: 1fr 1fr;
            }
        }
        #app-shell #release-package-modal > div {
            background: #f8fbfb !important;
            border: 1px solid #cbd8d5 !important;
            color: #17324a !important;
        }
        #app-shell .release-package-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        #app-shell .release-package-field-wrap {
            min-width: 0;
        }
        #app-shell .release-package-field-wrap.is-wide {
            grid-column: 1 / -1;
        }
        #app-shell .release-package-field-wrap > span {
            display: block;
            margin-bottom: 5px;
            color: #475569;
            font-size: 11px;
            font-weight: 800;
        }
        #app-shell .release-package-field {
            width: 100%;
            border: 1px solid #cbd5e1 !important;
            border-radius: 9px !important;
            background: #ffffff !important;
            color: #17324a !important;
            padding: 9px 10px !important;
            font-size: 12px !important;
        }
        #app-shell textarea.release-package-field {
            resize: vertical;
            min-height: 82px;
        }
        #app-shell #release-final-lyrics {
            min-height: 210px;
        }
        #app-shell #release-package-preview {
            max-height: 260px;
            overflow: auto;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            background: #f1f5f9;
            color: #334155;
            padding: 12px;
            font-size: 10px;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }
        #app-shell .release-package-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 16px;
        }
        #app-shell .release-package-actions button {
            border: 1px solid #38bdf8;
            border-radius: 9px;
            background: #e0f2fe;
            color: #0369a1;
            padding: 9px 12px;
            font-size: 12px;
            font-weight: 800;
        }
        #app-shell .release-package-actions button.release-primary {
            border-color: #34d399;
            background: #d1fae5;
            color: #047857;
        }
        @media (max-width: 700px) {
            #app-shell .release-package-grid {
                grid-template-columns: 1fr;
            }
            #app-shell .release-package-field-wrap.is-wide {
                grid-column: auto;
            }
        }
        #app-shell #preflight-modal > div {
            background: #f8fbfb !important;
            border: 1px solid #cbd8d5 !important;
            color: #17324a !important;
        }
        #app-shell #preflight-modal > div > p,
        #app-shell #preflight-brief {
            color: #334155 !important;
        }
        #app-shell #preflight-counts {
            background: #f1f5f4 !important;
            border-color: #cbd5d1 !important;
            color: #334155 !important;
        }
        #app-shell #preflight-empty {
            background: #ecfdf5 !important;
            border-color: #6ee7b7 !important;
            color: #065f46 !important;
        }
        #app-shell #preflight-errors-section {
            background: #fef2f2 !important;
            border-color: #fca5a5 !important;
        }
        #app-shell #preflight-errors-section h3,
        #app-shell #preflight-errors-list {
            color: #991b1b !important;
        }
        #app-shell #preflight-warnings-section {
            background: #fffbeb !important;
            border-color: #fbbf24 !important;
        }
        #app-shell #preflight-warnings-section h3,
        #app-shell #preflight-warnings-list {
            color: #92400e !important;
        }
        #app-shell #preflight-brief-section {
            background: #f0fdfa !important;
            border-color: #67e8f9 !important;
        }
        #app-shell #preflight-brief-section h3 {
            color: #0e7490 !important;
        }
        #app-footer {
            background: rgba(247, 251, 250, 0.92) !important;
            border-top-color: var(--studio-line) !important;
            color: #82909d !important;
        }