/* Product polish: bottom-right notifications, micro-interactions, and analysis panel refinement */
        @keyframes toastSlideIn { from { opacity: 0; transform: translate(14px, 16px) scale(0.982); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
        @keyframes toastSlideOut { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(10px, 12px) scale(0.982); } }
        @keyframes toastLife { from { transform: scaleX(1); } to { transform: scaleX(0); } }
        @keyframes uploadSweep { 0%, 58% { transform: translateX(-125%) rotate(8deg); opacity: 0; } 68% { opacity: 0.34; } 100% { transform: translateX(125%) rotate(8deg); opacity: 0; } }
        @keyframes calmGlow { 0%, 100% { box-shadow: 0 0 0 rgba(0, 242, 255, 0); } 50% { box-shadow: 0 0 26px rgba(0, 242, 255, 0.18); } }
        @keyframes calcPulse { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-1px); filter: brightness(1.14); } }
        @keyframes calcTextPulse { 0%, 100% { opacity: 0.48; } 50% { opacity: 0.86; } }

        :root {
            --analysis-panel-width: 320px;
            --analysis-panel-right: 24px;
            --analysis-panel-bottom: 76px;
            --analysis-panel-gap: 8px;
        }

        .notification-center {
            position: fixed;
            top: auto !important;
            left: auto !important;
            right: var(--analysis-panel-right);
            bottom: var(--analysis-panel-bottom);
            width: var(--analysis-panel-width);
            max-height: min(48dvh, 440px);
            display: grid;
            align-content: end;
            gap: 10px;
            overflow: hidden;
            z-index: 2450;
            pointer-events: none;
        }

        body:not(.no-image) .notification-center {
            right: calc(var(--analysis-panel-right) + var(--analysis-panel-width) + var(--analysis-panel-gap));
        }

        @media (min-width: 761px) {
            body:not(.no-image) #status-bar { right: var(--analysis-panel-right); width: var(--analysis-panel-width); bottom: max(12px, calc(var(--analysis-panel-bottom) - 42px)); }
        }

        .app-toast {
            grid-template-columns: 10px minmax(0, 1fr) auto;
            gap: 11px;
            padding: 13px 13px 18px 14px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(13, 17, 23, 0.94), rgba(20, 28, 39, 0.88));
            border-color: rgba(255, 255, 255, 0.095);
            box-shadow: 0 18px 48px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.025), inset 0 1px 0 rgba(255,255,255,0.045);
            transform: translate(14px, 16px) scale(0.982);
            transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
        }
        .app-toast.visible { opacity: 1; transform: translate(0, 0) scale(1); animation: toastSlideIn 0.24s cubic-bezier(.2,.9,.25,1) both; }
        .app-toast.removing { opacity: 0; transform: translate(10px, 12px) scale(0.982); animation: toastSlideOut 0.18s ease both; }
        .app-toast-body { min-width: 0; display: grid; gap: 3px; }
        .app-toast-title { font-size: 0.62rem; font-weight: 850; letter-spacing: 0.075em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
        .app-toast-message { font-size: 0.78rem; line-height: 1.45; }
        .app-toast-timer { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-primary), rgba(255,255,255,0.32)); transform-origin: left center; animation: toastLife linear forwards; opacity: 0.62; }
        .app-toast.success .app-toast-timer { background: linear-gradient(90deg, var(--accent-success), rgba(255,255,255,0.32)); }
        .app-toast.warning .app-toast-timer { background: linear-gradient(90deg, #ffaa00, rgba(255,255,255,0.32)); }
        .app-toast.error .app-toast-timer { background: linear-gradient(90deg, #ff4444, rgba(255,255,255,0.32)); }

        .copy-assist-panel {
            position: fixed;
            right: var(--analysis-panel-right);
            bottom: var(--analysis-panel-bottom);
            width: var(--analysis-panel-width);
            max-width: calc(100vw - 24px);
            z-index: 2500;
            display: grid;
            gap: 10px;
            padding: 14px;
            border-radius: 16px;
            border: 1px solid rgba(255, 170, 0, 0.28);
            background: linear-gradient(135deg, rgba(13,17,23,0.96), rgba(26,20,10,0.92));
            box-shadow: 0 22px 58px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04);
            color: var(--text-main);
        }
        .copy-assist-panel strong { font-size: 0.78rem; color: #ffaa00; }
        .copy-assist-panel p { font-size: 0.72rem; line-height: 1.42; color: var(--text-dim); }
        .copy-assist-panel textarea { width: 100%; height: 140px; resize: vertical; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.28); color: var(--text-main); padding: 10px; font: 0.68rem/1.35 'JetBrains Mono', monospace; }
        .copy-assist-actions { display: flex; justify-content: flex-end; gap: 8px; }
        body:not(.no-image) .copy-assist-panel { right: calc(var(--analysis-panel-right) + var(--analysis-panel-width) + var(--analysis-panel-gap)); }

        .export-preflight-panel {
            position: fixed;
            right: var(--analysis-panel-right);
            bottom: var(--analysis-panel-bottom);
            width: var(--analysis-panel-width);
            max-width: calc(100vw - 24px);
            max-height: min(72vh, 520px);
            overflow: auto;
            z-index: 2360;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-radius: 14px;
            border: 1px solid rgba(255, 170, 0, 0.24);
            background: linear-gradient(180deg, rgba(15, 16, 20, 0.94), rgba(8, 10, 14, 0.94));
            box-shadow: 0 22px 58px rgba(0,0,0,0.4);
            color: var(--text-main);
        }
        .export-preflight-panel strong { font-size: 0.82rem; color: #ffaa00; }
        .export-preflight-panel p { margin: 0; font-size: 0.72rem; line-height: 1.42; color: var(--text-dim); }
        .export-preflight-summary { display: grid; gap: 6px; }
        .export-preflight-row {
            padding: 8px 9px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04);
            color: var(--text-dim);
            font-size: 0.72rem;
            line-height: 1.35;
        }
        .export-preflight-row.warning {
            border-color: rgba(255, 170, 0, 0.24);
            background: rgba(255, 170, 0, 0.08);
            color: var(--text-main);
        }
        .export-preflight-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
        .export-preflight-actions .mini-btn.primary {
            background: var(--accent-primary);
            color: #05070a;
            border-color: rgba(0, 242, 255, 0.48);
            font-weight: 800;
        }
        body:not(.no-image) .export-preflight-panel { right: calc(var(--analysis-panel-right) + var(--analysis-panel-width) + var(--analysis-panel-gap)); }

        .app-toast-close { border-radius: 10px; background: rgba(255,255,255,0.055); transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease; }
        .app-toast-close:hover, .app-toast-close:focus-visible { transform: translateY(-1px); background: rgba(255,255,255,0.12); }

        .empty-upload-card {
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            background: linear-gradient(145deg, rgba(13, 17, 23, 0.84), rgba(4, 11, 18, 0.76));
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.04);
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }
        .empty-upload-card::before { content: ''; position: absolute; inset: -35% -18%; background: linear-gradient(90deg, transparent, rgba(0,242,255,0.13), transparent); pointer-events: none; animation: uploadSweep 7s ease-in-out infinite; }
        .empty-upload-card > * { position: relative; z-index: 1; }
        .empty-upload-card:hover { transform: translateY(-2px); border-color: rgba(0,242,255,0.32); box-shadow: 0 28px 76px rgba(0,0,0,0.48), 0 0 34px rgba(0,242,255,0.08); }
        .empty-upload-mark { border-radius: 16px; animation: calmGlow 4.8s ease-in-out infinite; }
        .empty-upload-btn { border-radius: 999px; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
        .empty-upload-btn:hover, .empty-upload-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 12px 32px rgba(0, 242, 255, 0.26); }

        .side-stack {
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(13,17,23,0.86), rgba(6,10,16,0.78));
            border-color: rgba(0,242,255,0.16);
            box-shadow: 0 20px 58px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.02);
            transition: transform 0.24s ease, box-shadow 0.24s ease, max-height 0.25s ease, opacity 0.25s ease;
        }
        .side-stack-header { background: linear-gradient(90deg, rgba(0,242,255,0.08), rgba(255,255,255,0.035)); border-bottom-color: rgba(255,255,255,0.085); }
        .side-stack-content { padding: 14px; gap: 14px; }
        .side-stack .floating-panel {
            border-radius: 16px;
            background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
            border-color: rgba(255,255,255,0.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
        }
        .panel-header { min-height: 42px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); transition: background 0.2s ease, border-color 0.2s ease; }
        .panel-header:hover { background: linear-gradient(90deg, rgba(0,242,255,0.07), rgba(255,255,255,0.025)); }
        .panel-title { color: rgba(255,255,255,0.72); letter-spacing: 0.015em; }
        .panel-title svg { color: var(--accent-primary); filter: drop-shadow(0 0 8px rgba(0,242,255,0.28)); }
        .panel-content { padding: 16px; }
        .btn-collapse { border-radius: 10px; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; }
        .btn-collapse:hover, .btn-collapse:focus-visible { background: rgba(255,255,255,0.08); color: var(--text-main); transform: translateY(-1px); }
        .metric-card, .advanced-metrics-panel, .quality-panel, .canvas-wrapper {
            border-color: rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
        }
        .metric-card { transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
        .metric-card:hover { transform: translateY(-1px); border-color: rgba(0,242,255,0.19); background: linear-gradient(180deg, rgba(0,242,255,0.055), rgba(255,255,255,0.02)); }
        .metric-label { color: rgba(255,255,255,0.48); }
        .metric-value { color: rgba(255,255,255,0.9); }
        .pipeline-preview-grid .canvas-wrapper { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 10px 22px rgba(0,0,0,0.22); }
        .fd-value.busy { animation: calcTextPulse 1.2s ease-in-out infinite; }
        body.is-analysis-busy #calculate-all, body.is-analysis-busy .analysis-state::before { animation: calcPulse 1.25s ease-in-out infinite; }
        body.is-analysis-busy .side-stack { box-shadow: 0 22px 62px rgba(0,0,0,0.45), 0 0 34px rgba(255,138,0,0.08); }
        .image-thumb { transition: transform 0.18s ease, border-color 0.18s ease, filter 0.18s ease; }
        .image-thumb:hover { transform: translateY(-1px); filter: brightness(1.06); }
        .filter-panel.visible, .auto-panel.visible, .alignment-preview-panel.visible { animation: softFloatIn 0.24s ease both; }

        @media (max-width: 1180px) {
            :root { --analysis-panel-width: min(320px, calc(100vw - 32px)); --analysis-panel-right: 16px; --analysis-panel-bottom: 76px; }
        }
        @media (max-width: 980px) {
            :root { --analysis-panel-width: min(330px, calc(100vw - 24px)); --analysis-panel-right: 12px; --analysis-panel-bottom: 84px; }
            .notification-center { top: auto !important; }
        }
        @media (max-width: 760px) {
            .notification-center { left: 12px !important; right: 12px; top: auto !important; bottom: 92px; width: auto; max-height: 34dvh; }
            body:not(.no-image) .notification-center { right: 12px; }
            body.has-multi-images .notification-center { bottom: calc(112px + min(48dvh, 460px)); }
            body:not(.has-multi-images):not(.no-image) .notification-center { bottom: calc(86px + min(48dvh, 460px)); }
            body:not(.no-image) .copy-assist-panel,
            body:not(.no-image) .export-preflight-panel { left: 12px; right: 12px; width: auto; bottom: 92px; }
            .side-stack { border-radius: 18px; }
            .panel-content { padding: 14px; }
        }
        @media (max-width: 430px) {
            .notification-center { left: 12px !important; right: 12px; top: auto !important; bottom: calc(92px + env(safe-area-inset-bottom)); width: auto; max-height: 32dvh; }
            body.has-multi-images .notification-center { bottom: calc(106px + min(52dvh, 430px) + env(safe-area-inset-bottom)); }
            body:not(.has-multi-images):not(.no-image) .notification-center { bottom: calc(86px + min(52dvh, 430px) + env(safe-area-inset-bottom)); }
            body:not(.no-image) .copy-assist-panel,
            body:not(.no-image) .export-preflight-panel { left: 12px; right: 12px; width: auto; bottom: calc(92px + env(safe-area-inset-bottom)); }
            .app-toast { padding: 12px 12px 17px 12px; }
        }



        /* Final mobile header access: keep guide, AllJect and language reachable. */
        @media (max-width: 760px) {
            .header-actions { gap: 6px; }
            .guide-link, .producer-badge { display: inline-flex !important; height: 32px; padding: 0 8px; font-size: 0.68rem; }
            .language-control { min-width: 104px; height: 32px; padding: 0; }
            .language-control select { position: static; opacity: 1; width: 100%; height: 100%; padding: 0 22px 0 9px; color: var(--text-dim); background: transparent; }
            .language-flag, .language-current { display: none; }
        }
        @media (max-width: 520px) {
            .guide-link, .producer-badge { width: 32px; padding: 0; justify-content: center; font-size: 0; }
            .guide-link::after { content: "K"; font-size: 0.72rem; }
            .producer-badge::after { content: "A"; font-size: 0.72rem; }
            .language-control { min-width: 92px; padding: 0; }
        }


        /* Final copy/toast readability polish */
        .app-toast.success {
            border-color: rgba(88, 240, 167, 0.42) !important;
            background: linear-gradient(135deg, rgba(8, 34, 29, 0.98), rgba(7, 20, 34, 0.98)) !important;
            color: #eefbf5 !important;
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(88, 240, 167, 0.08) inset !important;
        }

        .app-toast.success::before {
            background: #58f0a7 !important;
            box-shadow: 0 0 14px rgba(88, 240, 167, 0.42) !important;
        }

        .app-toast.success .app-toast-title {
            color: #c9ffdf !important;
            font-weight: 800 !important;
        }

        .app-toast.success .app-toast-message {
            color: #f4fff8 !important;
            font-weight: 650 !important;
        }

        .app-toast.success .app-toast-timer {
            background: linear-gradient(90deg, #58f0a7, rgba(255, 255, 255, 0.58)) !important;
            opacity: 0.86 !important;
        }

        .copy-action-button.is-copying {
            color: #ffe4a8 !important;
            background: rgba(255, 170, 0, 0.12) !important;
            border-color: rgba(255, 190, 78, 0.38) !important;
        }

        .copy-action-button.copy-done {
            color: #eafff2 !important;
            background: rgba(88, 240, 167, 0.16) !important;
            border-color: rgba(88, 240, 167, 0.46) !important;
            box-shadow: inset 0 0 18px rgba(88, 240, 167, 0.08) !important;
        }

        .copy-done-mark {
            color: #58f0a7 !important;
        }