.group span { pointer-events: none; }
        ::-webkit-scrollbar { display: none; }
        body { -ms-overflow-style: none; scrollbar-width: none; }
        .panel-scroll { scrollbar-width: none; }
        .panel-scroll.scroll-show { scrollbar-width: thin; }
        .panel-scroll::-webkit-scrollbar { width: 0; }
        .panel-scroll.scroll-show::-webkit-scrollbar { width: 3px; }
        .panel-scroll::-webkit-scrollbar-track { background: transparent; }
        .panel-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
        .scrollbar-thin::-webkit-scrollbar { width: 6px; }
        .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
        .scrollbar-thin::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
        .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
        .edit-scroll::-webkit-scrollbar { width: 6px; }
        .edit-scroll::-webkit-scrollbar-track { background: transparent; }
        .edit-scroll::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 3px; }
        .edit-scroll::-webkit-scrollbar-thumb:hover { background: #a78bfa; }
        @keyframes fadeIn { from { opacity:0; transform:scale(0.95) } to { opacity:1; transform:scale(1) } }
        .animate-fadeIn { animation: fadeIn 0.2s ease-out; }
        @keyframes slideUp { from { transform:translateY(100%) } to { transform:translateY(0) } }
        .animate-slideUp { animation: slideUp 0.3s cubic-bezier(0.32,0.72,0,1); }
        .reflow-trigger { animation: reflow 0.01s; }
        @keyframes reflow { from { opacity:0.99 } to { opacity:1 } }
        :root {
            --p: #9333ea;
            --p1: #f3e8ff;
            --p5: #faf5ff;
            --generate-surface: #ffffff;
            --generate-surface-raised: #ffffff;
            --generate-surface-muted: #f8fafc;
            --generate-border: #dce3ea;
            --generate-text: #1f2937;
            --generate-text-muted: #667085;
            --generate-option-hover: color-mix(in srgb, var(--p1) 18%, #ffffff);
            --generate-option-selected: color-mix(in srgb, var(--p1) 52%, #ffffff);
            --generate-control-bg: #f8fafc;
            --generate-control-border: #d7dee7;
            --generate-disabled-bg: #eef2f6;
            --generate-disabled-text: #7a8493;
        }
        .theme-blue { --p: #0f6cbd; --p1: #dceeff; --p5: #f3f9ff; }
        .theme-green { --p: #059669; --p1: #d1fae5; --p5: #ecfdf5; }
        .theme-orange { --p: #ea580c; --p1: #ffedd5; --p5: #fff7ed; }
        .theme-pink { --p: #db2777; --p1: #fce7f3; --p5: #fdf2f8; }
        .theme-default { --p: #2563eb; --p1: #dbeafe; --p5: #eff6ff; }

        .dark {
            /* The workspace stays neutral in dark mode; the chosen theme is an interaction accent. */
            --generate-surface: #171a1e;
            --generate-surface-raised: #1b1f24;
            --generate-surface-muted: #20242a;
            --generate-border: #343a43;
            --generate-text: #f6f7f9;
            --generate-text-muted: #aab1bb;
            --generate-option-hover: color-mix(in srgb, var(--p) 10%, #20242a);
            --generate-option-selected: color-mix(in srgb, var(--p) 18%, #20242a);
            --generate-control-bg: #1d2127;
            --generate-control-border: #3a414b;
            --generate-disabled-bg: #252a30;
            --generate-disabled-text: #969da6;
        }

        .generate-page {
            background-color: #f6f8fb !important;
        }

        .generate-shell-panel,
        .generate-panel {
            border: 1px solid var(--generate-border) !important;
            background: var(--generate-surface) !important;
            color: var(--generate-text);
        }

        .generate-shell-panel {
            box-shadow: 0 10px 28px rgb(15 23 42 / 0.045) !important;
        }

        .generate-panel--raised { background: var(--generate-surface-raised) !important; }
        .generate-panel__header { border-bottom: 1px solid var(--generate-border); background: var(--generate-surface-muted) !important; }

        .generate-empty-stage {
            border-color: var(--generate-border) !important;
            background: var(--generate-surface) !important;
        }

        .generate-empty-stage__icon,
        .generate-cost { color: var(--p) !important; }

        .generate-empty-example__media {
            background: color-mix(in srgb, var(--p1) 66%, var(--generate-surface)) !important;
            color: var(--p);
        }

        .generate-empty-stage .bg-gradient-to-br {
            background: color-mix(in srgb, var(--p1) 66%, var(--generate-surface)) !important;
            color: var(--p);
        }

        .generate-empty-stage svg path { stroke: var(--p) !important; }

        .generate-action {
            border: 1px solid color-mix(in srgb, var(--p) 42%, transparent) !important;
            background: var(--p) !important;
            color: #ffffff !important;
            box-shadow: 0 8px 18px color-mix(in srgb, var(--p) 20%, transparent);
        }
        .generate-action:hover:not(.generate-action--disabled) { filter: brightness(0.94); }
        .generate-action--disabled {
            border-color: color-mix(in srgb, var(--p) 18%, transparent) !important;
            background: var(--generate-disabled-bg) !important;
            color: var(--generate-disabled-text) !important;
            box-shadow: none;
        }

        .generate-segment-action { background: var(--generate-surface-muted) !important; color: var(--generate-text-muted) !important; }
        .generate-segment-action:hover { background: var(--generate-option-hover) !important; color: var(--generate-text) !important; }
        .generate-segment-action--selected { background: var(--p) !important; color: #ffffff !important; }
        .generate-page .generate-segment-action + .generate-segment-action { border-left-color: var(--generate-control-border) !important; }
        .generate-ratio-option { color: var(--generate-text) !important; }
        .generate-ratio-option:hover { background: var(--generate-option-hover) !important; }
        .generate-ratio-option--selected {
            background: var(--generate-option-selected) !important;
            color: var(--p) !important;
            box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--p) 56%, transparent);
        }

        .generate-form-textarea,
        .generate-select-trigger,
        .generate-ratio-trigger,
        .generate-number-field,
        .generate-field-menu,
        .generate-ratio-menu,
        .generate-reference-dropzone {
            border-color: var(--generate-control-border) !important;
            background: var(--generate-control-bg) !important;
            color: var(--generate-text) !important;
        }
        .generate-form-textarea::placeholder { color: var(--generate-text-muted) !important; opacity: 0.82; }
        .generate-form-textarea:focus,
        .generate-select-trigger:focus-visible,
        .generate-ratio-trigger:focus-visible {
            border-color: var(--p) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 18%, transparent);
        }
        .generate-select-trigger:hover,
        .generate-ratio-trigger:hover,
        .generate-reference-dropzone:hover { border-color: color-mix(in srgb, var(--p) 54%, transparent) !important; }
        .generate-field-menu,
        .generate-ratio-menu { box-shadow: 0 14px 30px color-mix(in srgb, var(--p) 18%, transparent) !important; }
        .generate-model-menu {
            border-color: var(--generate-control-border) !important;
            background: var(--generate-surface-raised) !important;
            color: var(--generate-text) !important;
        }
        .generate-number-step { border-color: var(--generate-control-border) !important; color: var(--generate-text) !important; background: transparent; }
        .generate-number-step:hover:not(:disabled) { background: var(--generate-option-hover) !important; }
        .generate-number-field button { border-color: var(--generate-control-border) !important; color: var(--generate-text) !important; }
        .generate-number-field button:hover { background: var(--generate-option-hover) !important; }
        .generate-reference-dropzone label { color: var(--generate-text-muted) !important; }
        .generate-reference-dropzone .bg-gray-700\/60,
        .generate-reference-dropzone .bg-gray-100 { background: var(--generate-surface-muted) !important; }
        .generate-page [onmousedown*="toggleRatioMenu"] {
            border-color: var(--generate-control-border) !important;
            background: var(--generate-control-bg) !important;
            color: var(--generate-text) !important;
        }
        .generate-page div[style*="width:280px"] {
            border-color: var(--generate-control-border) !important;
            background: var(--generate-surface-raised) !important;
            color: var(--generate-text) !important;
        }

        .model-select-menu { display: flex; max-height: min(360px, calc(100vh - 120px)); overflow: hidden; }
        .model-select-menu__groups { width: 172px; flex: 0 0 172px; overflow-y: auto; border-right: 1px solid var(--generate-border); background: var(--generate-surface-raised); }
        .model-select-menu__heading { padding: 10px 12px 6px; color: var(--generate-text-muted); font-size: 11px; font-weight: 700; }
        .model-select-menu__content { min-width: 0; flex: 1; overflow-y: auto; padding: 8px 10px 7px; }
        .model-select-menu__summary { display: flex; align-items: baseline; justify-content: space-between; margin: 0 1px 6px; }
        .model-select-menu__summary strong { overflow: hidden; color: var(--generate-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
        .model-select-menu__summary span { margin-left: 12px; color: var(--generate-text-muted); font-size: 11px; white-space: nowrap; }
        .model-select-menu__options { overflow: hidden; border-top: 1px solid var(--generate-border); border-bottom: 1px solid var(--generate-border); }
        .model-select__group {
            display: flex; width: 100%; min-height: 48px; align-items: center; gap: 8px; padding: 8px 12px;
            border: 0; border-left: 1px solid transparent; color: var(--generate-text-muted); background: transparent;
            outline: 0; text-align: left; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
        }
        .model-select__group:hover { color: var(--generate-text); background: var(--generate-option-hover); }
        .model-select__group--active { border-left-color: var(--p); color: var(--p); background: var(--generate-option-selected); }
        .model-select__group:focus-visible, .model-select__option:focus-visible { outline: 2px solid var(--p); outline-offset: -2px; }
        .model-select__group-label { min-width: 0; flex: 1; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
        .model-select__group-count { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; color: var(--generate-text-muted); background: var(--generate-surface-muted); font-size: 11px; font-weight: 700; }
        .model-select__group--active .model-select__group-count { color: var(--p); background: color-mix(in srgb, var(--p1) 72%, var(--generate-surface)); }
        .model-select__option {
            display: flex; width: 100%; min-height: 56px; align-items: center; gap: 10px; margin: 0; padding: 7px 9px;
            border: 0; border-top: 1px solid transparent; color: var(--generate-text); background: transparent; text-align: left;
            cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
        }
        .model-select__option:hover { background: var(--generate-option-hover); }
        .model-select__option--selected { border-color: color-mix(in srgb, var(--p) 34%, transparent); background: var(--generate-option-selected); }
        .model-select__option-copy { min-width: 0; flex: 1; }
        .model-select__option-label { display: block; overflow: hidden; color: var(--generate-text); font-size: 14px; font-weight: 700; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }
        .model-select__option--selected .model-select__option-label { color: var(--p); }
        .model-select__option-desc { overflow: hidden; margin-top: 2px; color: var(--generate-text-muted); font-size: 12px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }

        .generate-page--desktop { display: flex; }

        .generate-waiting-card {
            background-color: color-mix(in srgb, var(--p1) 72%, white) !important;
            border-color: color-mix(in srgb, var(--p) 24%, transparent) !important;
        }

        .generate-waiting-card [class*="text-purple-"] {
            color: var(--p) !important;
        }

        .generate-waiting-card .border-purple-200 {
            border-color: color-mix(in srgb, var(--p) 28%, transparent) !important;
        }

        .generate-waiting-card .border-purple-500 {
            border-color: var(--p) !important;
            border-top-color: transparent !important;
        }

        @keyframes generation-spinner-rotate {
            to { transform: rotate(360deg); }
        }

        .generation-spinner {
            animation: generation-spinner-rotate 0.65s linear infinite !important;
            transform-origin: center;
            will-change: transform;
        }

        .generate-waiting-card .generation-spinner {
            border-top-color: transparent !important;
            border-bottom-color: transparent !important;
            border-left-color: transparent !important;
        }

        .dark .generate-waiting-card {
            background-color: color-mix(in srgb, var(--p) 14%, #111827) !important;
            border-color: color-mix(in srgb, var(--p) 38%, transparent) !important;
        }

        /* Gallery accents follow the user-selected theme rather than the original purple palette. */
        .gallery-page .bg-purple-400,
        .gallery-page .bg-purple-500,
        .gallery-page .bg-gradient-to-br.from-purple-400.to-pink-400,
        .gallery-page .bg-gradient-to-br.from-purple-500.to-pink-500,
        .gallery-page .bg-gradient-to-r.from-purple-500.to-pink-500 {
            background: var(--p) !important;
        }

        .gallery-page .text-purple-500,
        .gallery-page .text-purple-600,
        .gallery-page .dark\:text-purple-400 { color: var(--p) !important; }

        .gallery-page .bg-purple-100,
        .gallery-page .dark\:bg-purple-900\/40 { background-color: var(--p1) !important; }

        .gallery-page .border-purple-200,
        .gallery-page .hover\:border-purple-300:hover,
        .gallery-page .dark\:border-purple-800\/30 { border-color: color-mix(in srgb, var(--p) 34%, transparent) !important; }

        .gallery-page .from-purple-50.to-blue-50 {
            background: var(--p5) !important;
            border-color: color-mix(in srgb, var(--p) 22%, transparent) !important;
        }

        .dark .gallery-page .dark\:bg-purple-900\/40 {
            background-color: color-mix(in srgb, var(--p) 22%, #111827) !important;
        }

        /* Keep history status markers and navigation controls on the active theme. */
        .history-page .text-purple-400,
        .history-page .text-purple-600,
        .history-page .dark\:text-purple-400 { color: var(--p) !important; }

        .history-page .bg-purple-100,
        .history-page .dark\:bg-purple-900\/30 { background-color: var(--p1) !important; }

        .history-page .bg-purple-400 { background-color: var(--p) !important; }

        .history-page .hover\:border-purple-200:hover,
        .history-page .dark\:hover\:border-purple-800:hover { border-color: color-mix(in srgb, var(--p) 38%, transparent) !important; }

        .history-page .from-purple-50.to-pink-50 {
            background: var(--p5) !important;
            border-color: color-mix(in srgb, var(--p) 20%, transparent) !important;
        }

        .history-page .from-purple-600\/90.to-pink-600\/90 {
            background: var(--p) !important;
        }

        .dark .history-page .dark\:from-purple-900\/10.dark\:to-pink-900\/10,
        .dark .history-page .dark\:bg-purple-900\/30 {
            background: color-mix(in srgb, var(--p) 18%, #111827) !important;
        }

        .history-page {
            background: color-mix(in srgb, var(--p5) 38%, #f8fafc) !important;
        }

        .history-workspace {
            width: min(100%, 1420px);
            margin: 0 auto;
        }

        .history-workspace__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 6px 0 20px;
            border-bottom: 1px solid color-mix(in srgb, var(--p) 16%, #d9e0e5);
        }

        .history-workspace__title-group,
        .history-workspace__summary,
        .history-retention,
        .history-card__meta,
        .history-card__meta-item,
        .history-pagination,
        .history-pagination__pages {
            display: flex;
            align-items: center;
        }

        .history-workspace__title-group { gap: 12px; min-width: 0; }

        .history-workspace__toolbar {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 12px;
        }

        .history-workspace__icon {
            display: grid;
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid color-mix(in srgb, var(--p) 28%, transparent);
            border-radius: 12px;
            color: var(--p);
            background: var(--p1);
        }

        .history-workspace__title {
            margin: 0;
            font-size: 20px;
            font-weight: 760;
            line-height: 1.25;
            letter-spacing: 0;
        }

        .history-workspace__subtitle { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }

        .history-workspace__summary {
            flex: 0 0 auto;
            gap: 10px;
            min-height: 34px;
            padding: 0 12px;
            border: 1px solid color-mix(in srgb, var(--p) 19%, #d8e0e5);
            border-radius: 10px;
            color: color-mix(in srgb, var(--p) 74%, #52606a);
            background: color-mix(in srgb, var(--p1) 60%, #ffffff);
            font-size: 12px;
            white-space: nowrap;
        }

        .history-workspace__summary strong { color: var(--p); font-size: 14px; }
        .history-workspace__divider { width: 1px; height: 14px; background: color-mix(in srgb, var(--p) 22%, #ccd5da); }

        .history-retention {
            gap: 8px;
            margin: 16px 0 22px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--p) 17%, transparent);
            border-radius: 10px;
            color: color-mix(in srgb, var(--p) 78%, #52606a);
            background: color-mix(in srgb, var(--p5) 84%, #ffffff);
            font-size: 12px;
            line-height: 1.4;
        }

        .history-retention strong { color: var(--p); font-weight: 750; }

        .history-collection {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 14px;
        }

        @media (min-width: 1280px) {
            .history-collection {
                grid-template-columns: repeat(5, minmax(0, 1fr));
                gap: 13px;
            }

            .history-card__body { padding: 10px 11px 11px; }
            .history-card__title { min-height: 17px; font-size: 12px; }
            .history-card__meta { margin-top: 7px; }
        }

        .history-card {
            position: relative;
            display: block;
            overflow: hidden;
            min-width: 0;
            padding: 0;
            border: 1px solid color-mix(in srgb, var(--p) 11%, #d8e0e5);
            border-radius: 12px;
            color: inherit;
            background: color-mix(in srgb, var(--p5) 14%, #ffffff);
            text-align: left;
            cursor: pointer;
            box-shadow: 0 1px 3px rgb(15 23 42 / 0.04);
            transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
        }

        .history-card:hover {
            border-color: color-mix(in srgb, var(--p) 42%, #d8e0e5);
            background: #ffffff;
            box-shadow: 0 10px 22px rgb(15 23 42 / 0.1);
            transform: translateY(-2px);
        }

        .history-card:focus-visible,
        .history-pagination button:focus-visible {
            outline: 3px solid color-mix(in srgb, var(--p) 28%, transparent);
            outline-offset: 2px;
        }

        .history-card:active { transform: translateY(0) scale(0.985); }

        .history-card__media {
            display: block;
            position: relative;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: color-mix(in srgb, var(--p1) 24%, #eef2f4);
        }

        .history-card__media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 240ms ease;
        }

        .history-card:hover .history-card__media img { transform: scale(1.035); }

        .history-card__body { display: block; padding: 10px 11px 11px; }

        .history-card__title {
            display: block;
            overflow: hidden;
            min-height: 18px;
            font-size: 13px;
            font-weight: 670;
            line-height: 1.35;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .history-card__meta {
            justify-content: space-between;
            gap: 8px;
            margin-top: 8px;
            font-size: 10px;
            line-height: 1.2;
        }

        .history-card__model {
            display: block;
            overflow: hidden;
            min-width: 0;
            color: color-mix(in srgb, var(--p) 72%, #687582);
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .history-card__model:not(.history-card__model--empty)::before {
            display: inline-block;
            width: 5px;
            height: 5px;
            margin: 0 5px 1px 0;
            border-radius: 50%;
            background: var(--p);
            content: '';
        }

        .history-card__model--empty { opacity: 0.62; }
        .history-card__meta-item { flex: 0 0 auto; gap: 3px; color: var(--p); font-weight: 750; white-space: nowrap; }

        .history-empty {
            display: flex;
            min-height: 360px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 20px;
            text-align: center;
        }

        .history-empty__icon {
            display: grid;
            width: 58px;
            height: 58px;
            margin-bottom: 15px;
            place-items: center;
            border: 1px solid color-mix(in srgb, var(--p) 20%, transparent);
            border-radius: 14px;
            color: var(--p);
            background: var(--p1);
        }

        .history-empty h3 { margin: 0; font-size: 16px; font-weight: 750; }
        .history-empty p { margin: 7px 0 0; font-size: 13px; }

        .history-pagination {
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
            padding: 12px 0 6px;
            border-top: 1px solid color-mix(in srgb, var(--p) 14%, transparent);
            background: transparent;
        }

        .history-pagination__pages { gap: 4px; }

        .history-pagination--header {
            flex: 0 0 auto;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .history-pagination--header .history-pagination__pages { gap: 2px; }
        .history-pagination--header button { width: 32px; height: 32px; font-size: 12px; }
        .history-pagination--header .history-pagination__ellipsis { width: 17px; height: 32px; }
        .history-pagination:not(.history-pagination--header) { display: none; }

        .history-pagination button {
            display: grid;
            width: 36px;
            height: 36px;
            padding: 0;
            place-items: center;
            border: 1px solid transparent;
            border-radius: 9px;
            color: #5e6870;
            background: transparent;
            font: inherit;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
        }

        .history-pagination button:hover:not(:disabled) {
            border-color: color-mix(in srgb, var(--p) 25%, transparent);
            color: var(--p);
            background: var(--p1);
        }

        .history-pagination button:active:not(:disabled) { transform: scale(0.96); }
        .history-pagination button:disabled { opacity: 0.38; cursor: not-allowed; }
        .history-pagination__page.is-active { border-color: var(--p); color: #ffffff; background: var(--p); box-shadow: 0 5px 12px color-mix(in srgb, var(--p) 24%, transparent); }

        .history-pagination__ellipsis { display: grid; width: 24px; height: 36px; place-items: center; color: #8a969e; font-size: 13px; letter-spacing: 0; }

        .dark .history-page { background: #111318 !important; }
        .dark .history-workspace__header { border-color: color-mix(in srgb, var(--p) 24%, #374151); }
        .dark .history-workspace__summary { border-color: color-mix(in srgb, var(--p) 28%, #374151); color: color-mix(in srgb, var(--p1) 68%, #cbd5e1); background: color-mix(in srgb, var(--p) 14%, #1f2937); }
        .dark .history-workspace__divider { background: color-mix(in srgb, var(--p) 34%, #4b5563); }
        .dark .history-retention { border-color: color-mix(in srgb, var(--p) 24%, #374151); color: color-mix(in srgb, var(--p1) 68%, #cbd5e1); background: color-mix(in srgb, var(--p) 10%, #1f2937); }
        .dark .history-card { border-color: #343a43; background: #171a1e; box-shadow: none; }
        .dark .history-card:hover { border-color: color-mix(in srgb, var(--p) 46%, #343a43); background: #1b1f24; box-shadow: 0 12px 24px rgb(0 0 0 / 0.2); }
        .dark .history-card__media { background: #20242a; }
        .dark .history-card__model { color: color-mix(in srgb, var(--p1) 52%, #b8c1ca); }
        .dark .history-pagination { border-color: color-mix(in srgb, var(--p) 20%, #374151); background: transparent; }
        .dark .history-pagination button { color: #b8c1c9; }
        .dark .history-pagination button:hover:not(:disabled) { color: var(--p1); background: color-mix(in srgb, var(--p) 22%, #1f2937); }
        .dark .history-pagination__ellipsis { color: #84909a; }

        @media (max-width: 640px) {
            .history-workspace__header { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 16px; }
            .history-workspace__toolbar { width: 100%; align-items: stretch; flex-direction: column; gap: 9px; }
            .history-workspace__summary { align-self: stretch; justify-content: center; }
            .history-pagination--header { justify-content: center; }
            .history-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
            .history-card__body { padding: 10px; }
            .history-card__title { font-size: 12px; }
            .history-pagination { gap: 4px; margin-top: 20px; }
            .history-pagination__pages { gap: 2px; }
            .history-pagination button { width: 33px; height: 33px; font-size: 12px; }
            .history-pagination__ellipsis { width: 17px; height: 33px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .history-card, .history-card__media img, .history-pagination button { transition: none; }
        }

        .recharge-layout {
            display: grid;
            grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.72fr);
            gap: 20px;
            max-width: 1120px !important;
        }

        .recharge-heading,
        .recharge-plans { grid-column: 1 / -1; }

        .recharge-heading {
            min-height: 72px;
            margin-bottom: 28px !important;
            padding-bottom: 20px !important;
        }

        .recharge-heading > div:first-child > div:first-child,
        .recharge-redeem > div:first-child {
            background: var(--p) !important;
            box-shadow: 0 8px 18px color-mix(in srgb, var(--p) 24%, transparent) !important;
        }

        .recharge-heading > div:last-child {
            border: 1px solid color-mix(in srgb, var(--p) 35%, transparent);
            background: var(--p1) !important;
            color: var(--p) !important;
            box-shadow: none !important;
        }

        .recharge-heading > div:last-child span:last-child { color: var(--p) !important; opacity: 0.72; }

        .recharge-plans {
            gap: 16px !important;
            margin-bottom: 24px !important;
        }

        .recharge-plan {
            min-height: 188px;
            padding: 24px !important;
            align-items: flex-start !important;
            border: 1px solid color-mix(in srgb, var(--p) 16%, #d1d5db) !important;
            background: color-mix(in srgb, var(--p5) 18%, white) !important;
            box-shadow: 0 2px 8px rgb(15 23 42 / 0.04) !important;
            text-align: left !important;
            transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 180ms ease !important;
        }

        .recharge-plan__label {
            margin-bottom: 12px;
            color: var(--p);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0;
        }

        .recharge-plan:hover {
            transform: translateY(-3px) !important;
            border-color: color-mix(in srgb, var(--p) 55%, white) !important;
            box-shadow: 0 12px 24px color-mix(in srgb, var(--p) 14%, transparent) !important;
        }

        .recharge-plan--featured {
            border: 2px solid var(--p) !important;
            background: var(--p5) !important;
        }

        .recharge-plan .text-2xl,
        .recharge-plan .text-base { color: var(--p) !important; }

        .recharge-plan .border-t {
            width: 100%;
            margin-top: auto !important;
            border-color: color-mix(in srgb, var(--p) 18%, transparent) !important;
        }

        .recharge-plan .text-green-500 { color: #16a34a !important; }

        .recharge-plan > span:first-child {
            background: var(--p) !important;
            box-shadow: 0 6px 14px color-mix(in srgb, var(--p) 26%, transparent) !important;
        }

        .recharge-redeem {
            min-height: 68px;
            align-self: start;
            min-height: 168px;
            margin-bottom: 0 !important;
            padding: 10px 12px !important;
            flex-wrap: wrap;
            align-content: center;
            border-color: color-mix(in srgb, var(--p) 20%, transparent) !important;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--p) 6%, transparent) !important;
        }

        .recharge-redeem input {
            flex: 1 1 calc(100% - 52px);
            min-width: 0;
            border-color: color-mix(in srgb, var(--p) 18%, transparent) !important;
        }

        .recharge-redeem input:focus {
            border-color: var(--p) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 16%, transparent) !important;
        }

        .recharge-redeem button {
            flex: 1 1 100%;
            min-width: 88px;
            min-height: 42px;
            background: var(--p) !important;
            box-shadow: 0 7px 15px color-mix(in srgb, var(--p) 22%, transparent) !important;
        }

        .recharge-ledger {
            min-height: 300px;
            border-color: color-mix(in srgb, var(--p) 16%, #d1d5db) !important;
            border-radius: 16px !important;
            box-shadow: 0 4px 14px rgb(15 23 42 / 0.04) !important;
        }

        .recharge-ledger__header {
            min-height: 68px;
            background: var(--p5) !important;
            border-color: color-mix(in srgb, var(--p) 16%, transparent) !important;
        }

        .recharge-ledger__header .bg-purple-100,
        .recharge-ledger__header .dark\:bg-purple-900\/50 { background: var(--p1) !important; }
        .recharge-ledger__header .text-purple-600,
        .recharge-ledger__header .dark\:text-purple-400 { color: var(--p) !important; }

        .dark .recharge-plan {
            background: color-mix(in srgb, var(--p) 8%, #1f2937) !important;
            border-color: color-mix(in srgb, var(--p) 30%, #374151) !important;
            box-shadow: none !important;
        }

        .dark .recharge-plan--featured { background: color-mix(in srgb, var(--p) 18%, #111827) !important; }
        .dark .recharge-heading > div:last-child,
        .dark .recharge-ledger__header { background: color-mix(in srgb, var(--p) 14%, #111827) !important; }

        @media (max-width: 767px) {
            .recharge-layout { display: block; }
            .recharge-heading { margin-bottom: 20px !important; padding-bottom: 14px !important; }
            .recharge-heading > div:first-child { gap: 12px !important; }
            .recharge-heading > div:first-child > div:first-child { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
            .recharge-plans { gap: 12px !important; }
            .recharge-plan { min-height: 154px; padding: 18px !important; }
            .recharge-redeem { align-items: stretch !important; flex-wrap: wrap; }
            .recharge-redeem input { flex: 1 1 calc(100% - 52px); }
            .recharge-redeem button { flex: 1 1 100%; min-height: 40px; }
            .recharge-ledger__header { padding: 14px 16px !important; }
        }

        @media (prefers-reduced-motion: reduce) {
            .recharge-plan { transition: none !important; }
            .recharge-plan:hover { transform: none !important; }
        }

        /* Recharge page: compact purchase flow, with the accent reserved for the selected offer. */
        .recharge-layout {
            display: block;
            max-width: 1080px !important;
        }

        .recharge-heading {
            min-height: 58px;
            margin-bottom: 22px !important;
            padding-bottom: 14px !important;
        }

        .recharge-heading > div:first-child > div:first-child {
            width: 40px !important;
            height: 40px !important;
            border-radius: 12px !important;
            box-shadow: none !important;
        }

        .recharge-heading > div:last-child {
            padding: 8px 12px !important;
            border-radius: 10px !important;
        }

        .recharge-plans {
            gap: 14px !important;
            margin-bottom: 16px !important;
        }

        .recharge-plan {
            min-height: 174px;
            padding: 20px !important;
            border-color: #e5e7eb !important;
            background: #ffffff !important;
            box-shadow: none !important;
        }

        .recharge-plan:hover {
            transform: translateY(-2px) !important;
            border-color: color-mix(in srgb, var(--p) 48%, white) !important;
            box-shadow: 0 10px 20px color-mix(in srgb, var(--p) 10%, transparent) !important;
        }

        .recharge-plan--featured {
            border-color: var(--p) !important;
            background: color-mix(in srgb, var(--p1) 58%, white) !important;
        }

        .recharge-plan > span:first-child {
            top: 16px !important;
            left: auto !important;
            right: 16px !important;
            transform: none !important;
            border-radius: 7px !important;
            padding: 4px 8px !important;
            font-size: 10px !important;
            box-shadow: none !important;
        }

        .recharge-plan__label {
            margin-bottom: 16px;
            color: #6b7280;
            font-size: 11px;
        }

        .recharge-plan .text-2xl {
            color: #111827 !important;
            font-size: 29px !important;
            line-height: 1 !important;
        }

        .recharge-plan--featured .text-2xl,
        .recharge-plan--featured .text-base { color: var(--p) !important; }

        .recharge-plan .text-base { color: #111827 !important; }
        .recharge-plan .border-t { margin-top: 14px !important; padding-top: 12px !important; }
        .recharge-plan .mt-1 { justify-content: flex-start !important; }

        .recharge-redeem {
            display: grid !important;
            grid-template-columns: 40px minmax(0, 1fr) auto;
            align-items: center !important;
            min-height: 66px;
            margin-bottom: 16px !important;
            padding: 10px 12px !important;
            border-color: #e5e7eb !important;
            border-radius: 14px !important;
            background: #ffffff !important;
            box-shadow: none !important;
        }

        .recharge-redeem > div:first-child {
            width: 32px !important;
            height: 32px !important;
            border-radius: 9px !important;
            box-shadow: none !important;
        }

        .recharge-redeem input {
            width: 100%;
            min-height: 40px;
            padding: 0 12px !important;
            background: #f9fafb !important;
            border-color: #e5e7eb !important;
        }

        .recharge-redeem button {
            min-width: 76px;
            min-height: 40px;
            padding: 0 16px !important;
            border-radius: 9px !important;
            box-shadow: none !important;
        }

        .recharge-ledger {
            min-height: 0;
            border-color: #e5e7eb !important;
            border-radius: 14px !important;
            background: #ffffff !important;
            box-shadow: none !important;
        }

        .recharge-ledger__header {
            min-height: 58px;
            padding: 0 20px !important;
            background: #ffffff !important;
        }

        .recharge-ledger__header > h3 { font-size: 14px; }
        .recharge-ledger > .divide-y > div { min-height: 66px; padding: 14px 20px !important; }

        .dark .recharge-plan,
        .dark .recharge-redeem,
        .dark .recharge-ledger,
        .dark .recharge-ledger__header { background: #111827 !important; border-color: #273244 !important; }
        .dark .recharge-plan--featured { background: color-mix(in srgb, var(--p) 14%, #111827) !important; }
        .dark .recharge-plan .text-2xl,
        .dark .recharge-plan .text-base { color: #f3f4f6 !important; }
        .dark .recharge-plan--featured .text-2xl,
        .dark .recharge-plan--featured .text-base { color: var(--p) !important; }
        .dark .recharge-redeem input { background: #1f2937 !important; border-color: #374151 !important; }

        @media (max-width: 767px) {
            .recharge-redeem { grid-template-columns: 36px minmax(0, 1fr); }
            .recharge-redeem button { grid-column: 1 / -1; width: 100%; }
            .recharge-plan { min-height: 156px; }
            .recharge-ledger__header { padding: 0 16px !important; }
            .recharge-ledger > .divide-y > div { padding: 12px 16px !important; }
        }

        .recharge-plan {
            position: relative;
            min-height: 232px;
            padding: 22px !important;
            border-radius: 12px !important;
            overflow: hidden;
        }

        .recharge-plan::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            background: #d1d5db;
        }

        .recharge-plan--featured::before { background: var(--p); }
        .recharge-plan--enterprise::before { background: color-mix(in srgb, var(--p) 55%, #9ca3af); }

        .recharge-plan--enterprise {
            border-color: color-mix(in srgb, var(--p) 26%, #d1d5db) !important;
            background: color-mix(in srgb, var(--p1) 24%, white) !important;
        }

        .recharge-plan__label {
            margin-top: 2px;
            margin-bottom: 18px;
            font-size: 12px;
            font-weight: 600;
        }

        .recharge-plan .text-2xl {
            font-size: 32px !important;
            font-weight: 700 !important;
            letter-spacing: 0 !important;
        }

        .recharge-plan .text-\[11px\] { margin-top: 5px; }

        .recharge-plan .border-t {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 12px;
            margin-top: auto !important;
            padding-top: 16px !important;
        }

        .recharge-plan .border-t > .text-base {
            font-size: 18px !important;
            font-weight: 700 !important;
        }

        .recharge-plan .border-t > .mt-1 {
            justify-self: end;
            margin: 0 !important;
            color: #6b7280;
        }

        .recharge-plan::after {
            content: "立即充值";
            position: absolute;
            right: 18px;
            bottom: 61px;
            color: var(--p);
            font-size: 12px;
            font-weight: 700;
            opacity: 0;
            transform: translateX(-4px);
            transition: opacity 160ms ease, transform 160ms ease;
        }

        .recharge-plan:hover::after {
            opacity: 1;
            transform: translateX(0);
        }

        .recharge-plan:active { transform: translateY(0) scale(0.99) !important; }

        .dark .recharge-plan--enterprise { background: color-mix(in srgb, var(--p) 10%, #111827) !important; }

        @media (max-width: 767px) {
            .recharge-plan { min-height: 198px; }
            .recharge-plan::after { opacity: 1; transform: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .recharge-plan::after { transition: none; }
        }

        .settings-page { min-height: 100%; }

        .settings-layout {
            display: grid !important;
            grid-template-columns: minmax(272px, 304px) minmax(0, 1fr);
            gap: 20px !important;
            max-width: 1220px;
            margin: 0 auto;
        }

        .settings-account,
        .settings-preferences__panel {
            border: 1px solid rgb(229 231 235 / 0.9);
            border-radius: 16px !important;
            box-shadow: 0 3px 12px rgb(15 23 42 / 0.035);
        }

        .settings-account {
            width: auto !important;
            height: fit-content;
            padding: 20px !important;
        }

        .settings-account > h3,
        .settings-preferences__panel > h3 {
            margin-bottom: 18px !important;
            font-size: 15px;
        }

        .settings-account > .flex.items-center.gap-4 {
            gap: 12px !important;
            padding-bottom: 16px;
            border-bottom: 1px solid rgb(229 231 235 / 0.9);
        }

        .settings-account > .flex.items-center.gap-4 > div:first-child {
            width: 48px !important;
            height: 48px !important;
            font-size: 19px !important;
            background: var(--p) !important;
        }

        .settings-account .space-y-4 { margin-top: 4px; }
        .settings-account .space-y-4 > div {
            min-height: 40px;
            padding-top: 9px !important;
            padding-bottom: 9px !important;
            gap: 12px;
            font-size: 13px;
        }

        .settings-account .space-y-4 > div > span:last-child,
        .settings-account .space-y-4 > div > div { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .settings-account .text-yellow-500 { color: var(--p) !important; }
        .settings-account .text-purple-500,
        .settings-account .hover\:text-purple-600:hover { color: var(--p) !important; }

        .settings-account > .flex.flex-col.gap-3 {
            margin-top: 16px !important;
            flex-direction: row !important;
        }

        .settings-account > .flex.flex-col.gap-3 button:first-child {
            min-height: 38px;
            border-width: 1px !important;
        }

        .settings-account > .flex.flex-col.gap-3 button:last-child { display: none; }

        .settings-preferences { min-width: 0; align-items: start; }
        .settings-preferences__panel { padding: 18px !important; }

        .settings-preferences__panel > .grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 10px !important;
            margin-bottom: 18px !important;
        }

        .settings-preferences__panel > .grid > button {
            min-height: 62px;
            padding: 8px !important;
            border-width: 1px !important;
            border-radius: 10px !important;
        }

        .settings-preferences__panel > .grid > button.border-purple-500 {
            border-color: var(--p) !important;
            background: var(--p5) !important;
        }

        .settings-preferences__panel > .grid > button.border-purple-500 .text-purple-600 { color: var(--p) !important; }
        .settings-preferences__panel > .grid > button > div:first-child { margin-bottom: 6px !important; }
        .settings-preferences__panel > .grid > button > div:last-child { font-size: 12px !important; }

        .settings-preferences__panel > .flex.items-center.justify-between {
            min-height: 54px;
            padding: 10px 0 !important;
            gap: 20px;
        }

        .settings-preferences__panel > .flex.items-center.justify-between > div:first-child { min-width: 0; }
        .settings-preferences__panel .text-purple-600 { color: var(--p) !important; }
        .settings-preferences__panel .bg-purple-600 { background: var(--p) !important; }

        .settings-preferences__panel .flex.bg-gray-100,
        .settings-preferences__panel .flex.bg-gray-100 > button { border-radius: 8px !important; }

        .dark .settings-account,
        .dark .settings-preferences__panel { border-color: color-mix(in srgb, var(--p) 22%, #263244); box-shadow: none; }
        .dark .settings-account > .flex.items-center.gap-4 { border-color: color-mix(in srgb, var(--p) 22%, #263244); }
        .dark .settings-preferences__panel > .grid > button.border-purple-500 { background: color-mix(in srgb, var(--p) 16%, #111827) !important; }

        .settings-api__reference-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 14px;
            padding: 7px 0;
            border: 0;
            color: var(--p);
            background: transparent;
            font: inherit;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }

        .settings-api__reference-toggle:hover { color: color-mix(in srgb, var(--p) 82%, #10242d); }
        .settings-api__reference-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 28%, transparent); outline-offset: 3px; }
        .settings-api:not(.settings-api--expanded) > div > div:last-child { display: none; }
        .settings-api > .p-4 {
            border-color: color-mix(in srgb, var(--p) 20%, #d8e0e8) !important;
            background: color-mix(in srgb, var(--p1) 54%, #ffffff) !important;
        }

        .dark .settings-api > .p-4 {
            border-color: color-mix(in srgb, var(--p) 34%, #344155) !important;
            background: color-mix(in srgb, var(--p) 12%, #151b26) !important;
        }

        .dark .settings-api .text-gray-400 { color: #c0cad8 !important; }
        .dark .settings-api input,
        .dark .settings-api .space-y-2 > code,
        .dark .settings-api .settings-api__parameter-docs > code,
        .dark .settings-api pre {
            border-color: color-mix(in srgb, var(--p) 23%, #344155) !important;
            background: #111823 !important;
            color: #dce4ef !important;
        }

        .dark .settings-api .text-amber-600,
        .dark .settings-api .dark\:text-amber-400 { color: #fbbf24 !important; }
        .dark .settings-api [class*="border-t"] { border-color: color-mix(in srgb, var(--p) 18%, #344155) !important; }

        @media (max-width: 767px) {
            .settings-layout { display: flex !important; flex-direction: column; }
            .settings-preferences { display: contents !important; }
            .settings-overall { order: 1; }
            .settings-account { order: 2; margin-bottom: 0; }
            .settings-api { order: 3; }
            .settings-preferences__panel { padding: 16px !important; }
            .settings-preferences__panel > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            .settings-preferences__panel > .flex.items-center.justify-between { align-items: flex-start !important; }
        }

        @media (min-width: 1024px) {
            .settings-page { padding-top: 14px !important; padding-bottom: 14px !important; }
            .settings-layout {
                grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
                grid-template-areas:
                    "overall api"
                    "account api";
                grid-template-rows: auto 1fr;
                gap: 14px !important;
                align-items: stretch;
            }
            .settings-preferences { display: contents !important; }
            .settings-overall { grid-area: overall !important; }
            .settings-account { grid-area: account !important; }
            .settings-api { grid-area: api !important; align-self: stretch; margin-top: 0 !important; }
            .settings-preferences__panel { padding: 14px !important; }
            .settings-preferences__panel > h3 { margin-bottom: 12px !important; }

            /* 左上整体风格进一步收紧，为左下账号卡留出完整空间。 */
            .settings-overall > .grid { gap: 8px !important; margin-bottom: 10px !important; }
            .settings-overall > .grid > button { min-height: 58px !important; height: 58px; padding: 4px !important; }
            .settings-overall > .grid > button > div:first-child { width: 28px !important; height: 28px !important; margin-bottom: 3px !important; }
            .settings-overall > .grid > button > div:first-child > div { width: 14px !important; height: 14px !important; }
            .settings-overall > .grid > button > div:last-child { font-size: 11px !important; line-height: 1.2; }
            .settings-overall > .flex.items-center.justify-between { min-height: 42px; padding: 6px 0 !important; }
            .settings-overall > .flex.items-center.justify-between.mt-4 { margin-top: 8px !important; }

            /* Keep account values readable in the narrow left column. */
            .settings-account { padding: 16px !important; }
            .settings-account > h3 { margin-bottom: 10px !important; }
            .settings-account .space-y-4 {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
                margin-top: 0;
            }
            .settings-account .space-y-4 > div {
                min-height: 47px;
                padding: 7px 9px !important;
                display: flex !important;
                flex-direction: column;
                align-items: flex-start !important;
                justify-content: center;
                gap: 2px;
                border: 1px solid rgb(226 232 240 / 0.9) !important;
                border-radius: 9px;
                background: rgb(248 250 252 / 0.72);
                font-size: 12px;
            }
            .settings-account .space-y-4 > div:nth-child(7) {
                grid-column: 1 / -1;
                min-height: 36px;
                flex-direction: row;
                align-items: center !important;
                justify-content: space-between;
            }
            .settings-account .space-y-4 > div > span:first-child { font-size: 11px; color: #64748b !important; }
            .settings-account .space-y-4 > div > span:last-child,
            .settings-account .space-y-4 > div > div { width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
            .settings-account .space-y-4 > div:nth-child(7) > span:last-child { width: auto; font-size: 12px; }
            .settings-account > .flex.flex-col.gap-3 { margin-top: 10px !important; }
            .settings-account > .flex.flex-col.gap-3 button:first-child { min-height: 34px; padding-top: 6px !important; padding-bottom: 6px !important; }

            .dark .settings-account .space-y-4 > div { border-color: color-mix(in srgb, var(--p) 16%, #334155) !important; background: rgb(30 41 59 / 0.55); }
            .dark .settings-account .space-y-4 > div > span:first-child { color: color-mix(in srgb, var(--p1) 38%, #94a3b8) !important; }

            /* 右侧 API 区：文生图、图生图示例并排，首屏即可查看完整说明。 */
            .settings-api .p-4 { padding: 12px !important; }
            .settings-api .mt-4 { margin-top: 10px !important; }
            .settings-api .pt-4 { padding-top: 10px !important; }
            .settings-api .space-y-2 {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px !important;
            }
            .settings-api .space-y-2 > code:nth-child(1),
            .settings-api .space-y-2 > code:nth-child(2),
            .settings-api .space-y-2 > .settings-api__parameter-docs,
            .settings-api .space-y-2 > div:nth-last-child(2),
            .settings-api .space-y-2 > code:last-child { grid-column: 1 / -1; }
            .settings-api .space-y-2 > div { min-width: 0; }
            .settings-api__examples { grid-column: 1 / -1; width: 100%; }
            .settings-api__parameter-docs { margin-top: 2px !important; }
            .settings-api pre { padding: 8px !important; font-size: 10px !important; line-height: 1.35 !important; }
        }

        .generated-result-card {
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--p) 14%, transparent);
            border-radius: 16px;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--p) 7%, transparent);
            transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, box-shadow 220ms ease;
        }

        .generated-result-card__media { overflow: hidden; }

        .generated-result-card__image {
            transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), filter 220ms ease;
        }

        .generated-result-card__caption {
            padding: 9px 10px 10px;
            text-align: center;
            border-top: 1px solid color-mix(in srgb, var(--p) 10%, transparent);
        }

        .generated-result-card:hover {
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--p) 45%, white);
            box-shadow: 0 14px 28px color-mix(in srgb, var(--p) 18%, transparent);
        }

        .generated-result-card:hover .generated-result-card__image {
            transform: scale(1.045);
            filter: saturate(1.04);
        }

        .generated-result-card:active { transform: translateY(-1px) scale(0.99); }

        .dark .generated-result-card {
            border-color: color-mix(in srgb, var(--p) 30%, #1f2937);
            box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
        }

        @media (prefers-reduced-motion: reduce) {
            .generated-result-card,
            .generated-result-card__image { transition: none; }
            .generated-result-card:hover,
            .generated-result-card:hover .generated-result-card__image,
            .generated-result-card:active { transform: none; }
        }

        .prompt-example {
            transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 180ms ease;
        }

        .prompt-example__media {
            transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        .prompt-example:hover {
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--p) 55%, white) !important;
            box-shadow: 0 12px 24px color-mix(in srgb, var(--p) 16%, transparent);
        }

        .prompt-example:hover .prompt-example__media { transform: scale(1.025); }

        @media (prefers-reduced-motion: reduce) {
            .prompt-example,
            .prompt-example__media { transition: none; }
            .prompt-example:hover,
            .prompt-example:hover .prompt-example__media { transform: none; }
        }

        @media (max-width: 767px) {
            #advanced-settings-mobile { padding: 12px; }
            #advanced-settings-mobile > div:first-child { margin-bottom: 8px; }
            #advanced-settings-mobile .mb-3 { margin-bottom: 8px; }
            #advanced-settings-mobile .cursor-pointer.flex.flex-col { padding-top: 8px; padding-bottom: 8px; }
        }

        @media (min-width: 768px) {
            #advanced-card > div:nth-child(2) { padding-top: 6px !important; padding-bottom: 8px !important; }
            #advanced-card .mb-3,
            #advanced-card .mt-3 { margin-top: 8px !important; margin-bottom: 8px !important; }
            #advanced-card .cursor-pointer.flex.flex-col { padding-top: 10px !important; padding-bottom: 10px !important; }
            #advanced-card #generate-btn { padding-top: 8px !important; padding-bottom: 8px !important; }
        }

        .dark .generate-page { background-color: #111318 !important; }
        .dark .generate-page .prompt-example {
            border-color: var(--generate-border) !important;
            background: var(--generate-surface-raised) !important;
        }
        .dark .generate-page .prompt-example:hover {
            border-color: color-mix(in srgb, var(--p) 42%, var(--generate-border)) !important;
            background: var(--generate-surface-muted) !important;
        }

        @keyframes generate-page-enter {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: no-preference) {
            .generate-page--enter { animation: generate-page-enter 260ms cubic-bezier(0.16, 1, 0.3, 1); }
        }
        .theme-default .bg-purple-600,
        .theme-default .bg-purple-500 { background-color: var(--p) !important; }
        .theme-default .text-purple-600,
        .theme-default .text-purple-500 { color: var(--p) !important; }
        .theme-default .border-purple-500,
        .theme-default .border-purple-400,
        .theme-default .border-purple-300,
        .theme-default .border-purple-200,
        .theme-default .focus\\:border-purple-500 { border-color: var(--p) !important; }
        .theme-default .ring-purple-500,
        .theme-default .focus\\:ring-purple-500\\/20 { --tw-ring-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-default .bg-purple-100,
        .theme-default .bg-purple-50 { background-color: var(--p1) !important; }
        .theme-default .bg-purple-600\/40 { background-color: color-mix(in srgb, var(--p) 40%, transparent) !important; }
        .theme-default .bg-purple-50\/50 { background-color: color-mix(in srgb, var(--p1) 50%, transparent) !important; }
        .theme-default .border-purple-200\/50 { border-color: color-mix(in srgb, var(--p) 22%, transparent) !important; }
        .theme-default .hover\\:bg-purple-50:hover,
        .theme-default .hover\\:bg-purple-100:hover { background-color: var(--p5) !important; }
        .theme-default .hover\\:bg-purple-100\\/50:hover { background-color: color-mix(in srgb, var(--p1) 75%, transparent) !important; }
        .theme-default .hover\\:border-purple-400:hover { border-color: var(--p) !important; }
        .theme-default .ring-purple-400 { --tw-ring-color: color-mix(in srgb, var(--p) 45%, transparent) !important; }
        /* Keep Tailwind's opacity and state variants on the active site theme. */
        body[class*="theme-"] .bg-purple-600\/40 { background-color: color-mix(in srgb, var(--p) 40%, transparent) !important; }
        body[class*="theme-"] .bg-purple-50\/50 { background-color: color-mix(in srgb, var(--p1) 50%, transparent) !important; }
        body[class*="theme-"] .bg-purple-50\/80 { background-color: color-mix(in srgb, var(--p1) 80%, transparent) !important; }
        body[class*="theme-"] .border-purple-200\/50 { border-color: color-mix(in srgb, var(--p) 22%, transparent) !important; }
        body[class*="theme-"] .border-purple-300 { border-color: color-mix(in srgb, var(--p) 45%, white) !important; }
        body[class*="theme-"] .text-purple-500,
        body[class*="theme-"] .text-purple-600 { color: var(--p) !important; }
        body[class*="theme-"] .hover\:bg-purple-50:hover { background-color: var(--p5) !important; }
        body[class*="theme-"] .hover\:bg-purple-100\/50:hover { background-color: color-mix(in srgb, var(--p1) 75%, transparent) !important; }
        body[class*="theme-"] .hover\:border-purple-400:hover,
        body[class*="theme-"] .hover\:border-purple-300:hover,
        body[class*="theme-"] .focus\:border-purple-500:focus { border-color: var(--p) !important; }
        body[class*="theme-"] .ring-purple-400,
        body[class*="theme-"] .focus\:ring-purple-500\/20:focus { --tw-ring-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-default .hover\\:bg-purple-700:hover,
        .theme-default .hover\\:bg-purple-600 { background-color: var(--p) !important; }
        .theme-default .dark\\:border-purple-600,
        .theme-default .dark\\:text-purple-400 { border-color: var(--p) !important; color: var(--p) !important; }
        .theme-default .dark\\:bg-purple-900\\/20,
        .theme-default .dark\\:bg-purple-900\\/30:hover { background-color: color-mix(in srgb, var(--p) 20%, black) !important; }
        .theme-blue .bg-purple-600 { background-color: var(--p) !important; }
        .theme-blue .text-purple-600 { color: var(--p) !important; }
        .theme-blue .text-purple-500 { color: var(--p) !important; }
        .theme-blue .border-purple-500, .theme-blue .border-purple-400, .theme-blue .border-purple-300, .theme-blue .border-purple-200 { border-color: color-mix(in srgb, var(--p) 30%, transparent) !important; }
        .theme-blue .focus\\:border-purple-500 { border-color: var(--p) !important; }
        .theme-blue .ring-purple-500, .theme-blue .focus\\:ring-purple-500\\/20 { --tw-ring-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-blue .bg-purple-100, .theme-blue .bg-purple-50 { background-color: var(--p1) !important; }
        .theme-blue .hover\\:bg-purple-50:hover { background-color: var(--p5) !important; }
        .theme-blue .hover\\:bg-purple-700:hover { background-color: var(--p) !important; }
        .theme-blue .hover\\:bg-purple-100:hover { background-color: var(--p1) !important; }
        .theme-green .bg-purple-600 { background-color: var(--p) !important; }
        .theme-green .text-purple-600 { color: var(--p) !important; }
        .theme-green .text-purple-500 { color: var(--p) !important; }
        .theme-green .border-purple-500, .theme-green .focus\\:border-purple-500 { border-color: var(--p) !important; }
        .theme-green .ring-purple-500, .theme-green .focus\\:ring-purple-500\\/20 { --tw-ring-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-green .bg-purple-100, .theme-green .bg-purple-50 { background-color: var(--p1) !important; }
        .theme-green .hover\\:bg-purple-50:hover { background-color: var(--p5) !important; }
        .theme-green .hover\\:bg-purple-700:hover { background-color: var(--p) !important; }
        .theme-orange .bg-purple-600 { background-color: var(--p) !important; }
        .theme-orange .text-purple-600 { color: var(--p) !important; }
        .theme-orange .text-purple-500 { color: var(--p) !important; }
        .theme-orange .border-purple-500, .theme-orange .focus\\:border-purple-500 { border-color: var(--p) !important; }
        .theme-orange .ring-purple-500, .theme-orange .focus\\:ring-purple-500\\/20 { --tw-ring-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-orange .bg-purple-100, .theme-orange .bg-purple-50 { background-color: var(--p1) !important; }
        .theme-orange .hover\\:bg-purple-50:hover { background-color: var(--p5) !important; }
        .theme-orange .hover\\:bg-purple-700:hover { background-color: var(--p) !important; }
        .theme-pink .bg-purple-600 { background-color: var(--p) !important; }
        .theme-pink .text-purple-600 { color: var(--p) !important; }
        .theme-pink .text-purple-500 { color: var(--p) !important; }
        .theme-pink .border-purple-500, .theme-pink .focus\\:border-purple-500 { border-color: var(--p) !important; }
        .theme-pink .ring-purple-500, .theme-pink .focus\\:ring-purple-500\\/20 { --tw-ring-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-pink .bg-purple-100, .theme-pink .bg-purple-50 { background-color: var(--p1) !important; }
        .theme-pink .hover\\:bg-purple-50:hover { background-color: var(--p5) !important; }
        .theme-pink .hover\\:bg-purple-700:hover { background-color: var(--p) !important; }
        .theme-blue .dark\\:border-purple-600, .theme-blue .dark\\:text-purple-400 { border-color: var(--p) !important; color: var(--p) !important; }
        .theme-green .dark\\:border-purple-600, .theme-green .dark\\:text-purple-400 { border-color: var(--p) !important; color: var(--p) !important; }
        .theme-orange .dark\\:border-purple-600, .theme-orange .dark\\:text-purple-400 { border-color: var(--p) !important; color: var(--p) !important; }
        .theme-pink .dark\\:border-purple-600, .theme-pink .dark\\:text-purple-400 { border-color: var(--p) !important; color: var(--p) !important; }
        .theme-blue .dark\\:hover\\:bg-purple-900\\/30:hover { background-color: color-mix(in srgb, var(--p) 30%, black) !important; }
        .theme-green .dark\\:hover\\:bg-purple-900\\/30:hover { background-color: color-mix(in srgb, var(--p) 30%, black) !important; }
        .theme-orange .dark\\:hover\\:bg-purple-900\\/30:hover { background-color: color-mix(in srgb, var(--p) 30%, black) !important; }
        .theme-pink .dark\\:hover\\:bg-purple-900\\/30:hover { background-color: color-mix(in srgb, var(--p) 30%, black) !important; }
        .theme-blue .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 20%, black) !important; }
        .theme-green .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 20%, black) !important; }
        .theme-orange .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 20%, black) !important; }
        .theme-pink .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 20%, black) !important; }
        .theme-blue .hover\\:border-purple-500:hover, .theme-blue .hover\\:border-purple-400:hover { border-color: var(--p) !important; }
        .theme-green .hover\\:border-purple-500:hover, .theme-green .hover\\:border-purple-400:hover { border-color: var(--p) !important; }
        .theme-orange .hover\\:border-purple-500:hover, .theme-orange .hover\\:border-purple-400:hover { border-color: var(--p) !important; }
        .theme-pink .hover\\:border-purple-500:hover, .theme-pink .hover\\:border-purple-400:hover { border-color: var(--p) !important; }
        .theme-blue .ring-1.ring-purple-500 { --tw-ring-color: var(--p) !important; }
        .theme-green .ring-1.ring-purple-500 { --tw-ring-color: var(--p) !important; }
        .theme-orange .ring-1.ring-purple-500 { --tw-ring-color: var(--p) !important; }
        .theme-pink .ring-1.ring-purple-500 { --tw-ring-color: var(--p) !important; }
        .theme-blue .shadow-purple-500\\/20, .theme-blue .shadow-purple-500\\/30 { --tw-shadow-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-green .shadow-purple-500\\/20, .theme-green .shadow-purple-500\\/30 { --tw-shadow-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-orange .shadow-purple-500\\/20, .theme-orange .shadow-purple-500\\/30 { --tw-shadow-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-pink .shadow-purple-500\\/20, .theme-pink .shadow-purple-500\\/30 { --tw-shadow-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
        .theme-blue .hover\\:bg-purple-600 { background-color: var(--p) !important; }
        .theme-green .hover\\:bg-purple-600 { background-color: var(--p) !important; }
        .theme-orange .hover\\:bg-purple-600 { background-color: var(--p) !important; }
        .theme-pink .hover\\:bg-purple-600 { background-color: var(--p) !important; }
        .theme-blue .dark\\:bg-purple-900, .theme-blue .dark\\:bg-purple-900\\/50, .theme-blue .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 80%, black) !important; }
        .theme-green .dark\\:bg-purple-900, .theme-green .dark\\:bg-purple-900\\/50, .theme-green .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 80%, black) !important; }
        .theme-orange .dark\\:bg-purple-900, .theme-orange .dark\\:bg-purple-900\\/50, .theme-orange .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 80%, black) !important; }
        .theme-pink .dark\\:bg-purple-900, .theme-pink .dark\\:bg-purple-900\\/50, .theme-pink .dark\\:bg-purple-900\\/20 { background-color: color-mix(in srgb, var(--p) 80%, black) !important; }
        
        body[class*="theme-"] .generate-waiting-card .generation-spinner {
            border-right-color: var(--p) !important;
            border-top-color: transparent !important;
            border-bottom-color: transparent !important;
            border-left-color: transparent !important;
            animation: generation-spinner-rotate 0.65s linear infinite !important;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Home redesign: cool studio surface with one blue accent. */
        .home-redesign {
            --home-bg: #f5f8f9;
            --home-surface: #ffffff;
            --home-surface-soft: #e8f0f2;
            --home-ink: #10242d;
            --home-muted: #667b84;
            --home-line: rgba(16, 36, 45, 0.13);
            --home-accent: var(--p);
            --home-accent-soft: color-mix(in srgb, var(--p) 12%, transparent);
            min-height: 100%;
            overflow: hidden;
            color: var(--home-ink);
            background: var(--home-bg);
            font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        /* Keep the first home view aligned to the space below the top navigation. */
        .home-shell .home-redesign {
            height: 100%;
            min-height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .home-shell .home-hero {
            min-height: min(720px, calc(100dvh - 156px));
            box-sizing: border-box;
            padding-top: 38px;
            padding-bottom: 38px;
        }

        .home-redesign--dark {
            --home-bg: #101518;
            --home-surface: #171e22;
            --home-surface-soft: #202b30;
            --home-ink: #edf3f4;
            --home-muted: #93a5aa;
            --home-line: rgba(237, 243, 244, 0.13);
            --home-accent: #79c4e5;
            --home-accent-soft: rgba(121, 196, 229, 0.14);
        }

        /* The settings palette is applied to the homepage through the body theme class. */
        .theme-blue .home-redesign {
            --home-accent: #2563eb;
            --home-accent-soft: rgba(37, 99, 235, 0.12);
        }

        .theme-default .home-redesign {
            --home-bg: #f5f8f9;
            --home-surface: #ffffff;
            --home-surface-soft: #e8f0f2;
            --home-ink: #10242d;
            --home-muted: #667b84;
            --home-line: rgba(16, 36, 45, 0.13);
            --home-accent: var(--p);
            --home-accent-soft: color-mix(in srgb, var(--p) 12%, transparent);
        }

        .theme-purple .home-redesign {
            --home-bg: #fbf8ff;
            --home-surface: #ffffff;
            --home-surface-soft: #f1e8f8;
            --home-ink: #21142c;
            --home-muted: #74627e;
            --home-line: rgba(33, 20, 44, 0.13);
            --home-accent: #9333ea;
            --home-accent-soft: rgba(147, 51, 234, 0.12);
        }

        .theme-green .home-redesign {
            --home-accent: #059669;
            --home-accent-soft: rgba(5, 150, 105, 0.12);
        }

        .theme-orange .home-redesign {
            --home-accent: #ea580c;
            --home-accent-soft: rgba(234, 88, 12, 0.12);
        }

        .theme-pink .home-redesign {
            --home-accent: #db2777;
            --home-accent-soft: rgba(219, 39, 119, 0.12);
        }

        .dark.theme-blue .home-redesign {
            --home-bg: #101827;
            --home-surface: #172235;
            --home-surface-soft: #20304a;
            --home-ink: #eef5ff;
            --home-muted: #9eb2cc;
            --home-line: rgba(238, 245, 255, 0.14);
            --home-accent: #93c5fd;
            --home-accent-soft: rgba(147, 197, 253, 0.16);
        }

        .dark.theme-default .home-redesign {
            --home-bg: #101518;
            --home-surface: #171e22;
            --home-surface-soft: #202b30;
            --home-ink: #edf3f4;
            --home-muted: #93a5aa;
            --home-line: rgba(237, 243, 244, 0.13);
            --home-accent: color-mix(in srgb, var(--p) 56%, #ffffff);
            --home-accent-soft: color-mix(in srgb, var(--p) 16%, transparent);
        }

        .dark.theme-purple .home-redesign {
            --home-bg: #17121f;
            --home-surface: #211a2b;
            --home-surface-soft: #2b2038;
            --home-ink: #f4effa;
            --home-muted: #b8a9c4;
            --home-line: rgba(244, 239, 250, 0.14);
            --home-accent: #c084fc;
            --home-accent-soft: rgba(192, 132, 252, 0.16);
        }

        .dark.theme-green .home-redesign {
            --home-bg: #101b18;
            --home-surface: #172923;
            --home-surface-soft: #203a31;
            --home-ink: #effcf7;
            --home-muted: #a2c2b5;
            --home-line: rgba(239, 252, 247, 0.14);
            --home-accent: #6ee7b7;
            --home-accent-soft: rgba(110, 231, 183, 0.16);
        }

        .dark.theme-orange .home-redesign {
            --home-bg: #211914;
            --home-surface: #30231b;
            --home-surface-soft: #433024;
            --home-ink: #fff5ed;
            --home-muted: #d2b6a0;
            --home-line: rgba(255, 245, 237, 0.14);
            --home-accent: #fdba74;
            --home-accent-soft: rgba(253, 186, 116, 0.16);
        }

        .dark.theme-pink .home-redesign {
            --home-bg: #21151d;
            --home-surface: #30202b;
            --home-surface-soft: #402737;
            --home-ink: #fff1f7;
            --home-muted: #d2aaba;
            --home-line: rgba(255, 241, 247, 0.14);
            --home-accent: #f9a8d4;
            --home-accent-soft: rgba(249, 168, 212, 0.16);
        }

        .home-shell {
            --home-shell-accent: var(--p);
            --home-shell-accent-soft: color-mix(in srgb, var(--p) 9%, transparent);
            --home-shell-accent-border: color-mix(in srgb, var(--p) 24%, transparent);
            background: #f5f8f9 !important;
        }

        .theme-default .home-shell {
            --home-shell-accent: var(--p);
            --home-shell-accent-soft: color-mix(in srgb, var(--p) 9%, transparent);
            --home-shell-accent-border: color-mix(in srgb, var(--p) 24%, transparent);
            background: #f5f8f9 !important;
        }

        .theme-purple .home-shell {
            --home-shell-accent: #9333ea;
            --home-shell-accent-soft: rgba(147, 51, 234, 0.09);
            --home-shell-accent-border: rgba(147, 51, 234, 0.24);
            background: #fbf8ff !important;
        }

        .theme-blue .home-shell {
            --home-shell-accent: #2563eb;
            --home-shell-accent-soft: rgba(37, 99, 235, 0.09);
            --home-shell-accent-border: rgba(37, 99, 235, 0.24);
            background: #f5f8ff !important;
        }

        .theme-green .home-shell {
            --home-shell-accent: #059669;
            --home-shell-accent-soft: rgba(5, 150, 105, 0.09);
            --home-shell-accent-border: rgba(5, 150, 105, 0.24);
            background: #f4fbf8 !important;
        }

        .theme-orange .home-shell {
            --home-shell-accent: #ea580c;
            --home-shell-accent-soft: rgba(234, 88, 12, 0.09);
            --home-shell-accent-border: rgba(234, 88, 12, 0.24);
            background: #fff8f3 !important;
        }

        .theme-pink .home-shell {
            --home-shell-accent: #db2777;
            --home-shell-accent-soft: rgba(219, 39, 119, 0.09);
            --home-shell-accent-border: rgba(219, 39, 119, 0.24);
            background: #fff7fb !important;
        }

        .home-shell .text-purple-600,
        .home-shell .text-purple-500,
        .home-shell .text-purple-400 {
            color: var(--home-shell-accent) !important;
        }

        .home-shell .bg-purple-600,
        .home-shell .bg-purple-500 {
            background-color: var(--home-shell-accent) !important;
        }

        .home-shell [class*="border-purple-"] {
            border-color: var(--home-shell-accent-border) !important;
        }

        .home-shell [class*="from-purple-"] {
            --tw-gradient-from: var(--home-shell-accent) var(--tw-gradient-from-position) !important;
        }

        .home-shell [class*="to-pink-"] {
            --tw-gradient-to: color-mix(in srgb, var(--home-shell-accent) 72%, white) var(--tw-gradient-to-position) !important;
        }

        .dark .home-shell {
            --home-shell-accent: color-mix(in srgb, var(--p) 56%, #ffffff);
            --home-shell-accent-soft: color-mix(in srgb, var(--p) 12%, transparent);
            --home-shell-accent-border: color-mix(in srgb, var(--p) 28%, transparent);
            background: #101518 !important;
        }

        .dark.theme-default .home-shell {
            --home-shell-accent: color-mix(in srgb, var(--p) 56%, #ffffff);
            --home-shell-accent-soft: color-mix(in srgb, var(--p) 12%, transparent);
            --home-shell-accent-border: color-mix(in srgb, var(--p) 28%, transparent);
            background: #101518 !important;
        }

        .dark.theme-purple .home-shell {
            --home-shell-accent: #c084fc;
            --home-shell-accent-soft: rgba(192, 132, 252, 0.12);
            --home-shell-accent-border: rgba(192, 132, 252, 0.28);
            background: #17121f !important;
        }

        .dark.theme-blue .home-shell {
            --home-shell-accent: #93c5fd;
            --home-shell-accent-soft: rgba(147, 197, 253, 0.12);
            --home-shell-accent-border: rgba(147, 197, 253, 0.28);
            background: #101827 !important;
        }

        .dark.theme-green .home-shell {
            --home-shell-accent: #6ee7b7;
            --home-shell-accent-soft: rgba(110, 231, 183, 0.12);
            --home-shell-accent-border: rgba(110, 231, 183, 0.28);
            background: #101b18 !important;
        }

        .dark.theme-orange .home-shell {
            --home-shell-accent: #fdba74;
            --home-shell-accent-soft: rgba(253, 186, 116, 0.12);
            --home-shell-accent-border: rgba(253, 186, 116, 0.28);
            background: #211914 !important;
        }

        .dark.theme-pink .home-shell {
            --home-shell-accent: #f9a8d4;
            --home-shell-accent-soft: rgba(249, 168, 212, 0.12);
            --home-shell-accent-border: rgba(249, 168, 212, 0.28);
            background: #21151d !important;
        }

        .site-topnav {
            --home-shell-accent: var(--p);
            --home-shell-accent-soft: color-mix(in srgb, var(--p) 9%, transparent);
            --home-shell-accent-border: color-mix(in srgb, var(--p) 24%, transparent);
            height: 64px !important;
            display: none !important;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            column-gap: 20px;
            padding: 0 24px !important;
            color: var(--home-ink, #10242d);
            box-shadow: 0 1px 0 rgba(16, 36, 45, 0.03);
        }

        @media (min-width: 768px) {
            .site-topnav { display: grid !important; }
        }

        .theme-purple .site-topnav {
            --home-shell-accent: #9333ea;
            --home-shell-accent-soft: rgba(147, 51, 234, 0.09);
            --home-shell-accent-border: rgba(147, 51, 234, 0.24);
        }

        .theme-blue .site-topnav {
            --home-shell-accent: #2563eb;
            --home-shell-accent-soft: rgba(37, 99, 235, 0.09);
            --home-shell-accent-border: rgba(37, 99, 235, 0.24);
        }

        .theme-green .site-topnav {
            --home-shell-accent: #059669;
            --home-shell-accent-soft: rgba(5, 150, 105, 0.09);
            --home-shell-accent-border: rgba(5, 150, 105, 0.24);
        }

        .theme-orange .site-topnav {
            --home-shell-accent: #ea580c;
            --home-shell-accent-soft: rgba(234, 88, 12, 0.09);
            --home-shell-accent-border: rgba(234, 88, 12, 0.24);
        }

        .theme-pink .site-topnav {
            --home-shell-accent: #db2777;
            --home-shell-accent-soft: rgba(219, 39, 119, 0.09);
            --home-shell-accent-border: rgba(219, 39, 119, 0.24);
        }

        .dark .site-topnav {
            --home-shell-accent: color-mix(in srgb, var(--p) 56%, #ffffff);
            --home-shell-accent-soft: color-mix(in srgb, var(--p) 12%, transparent);
            --home-shell-accent-border: color-mix(in srgb, var(--p) 28%, transparent);
        }

        .dark.theme-purple .site-topnav {
            --home-shell-accent: #c084fc;
            --home-shell-accent-soft: rgba(192, 132, 252, 0.12);
            --home-shell-accent-border: rgba(192, 132, 252, 0.28);
        }

        .dark.theme-blue .site-topnav {
            --home-shell-accent: #93c5fd;
            --home-shell-accent-soft: rgba(147, 197, 253, 0.12);
            --home-shell-accent-border: rgba(147, 197, 253, 0.28);
        }

        .dark.theme-green .site-topnav {
            --home-shell-accent: #6ee7b7;
            --home-shell-accent-soft: rgba(110, 231, 183, 0.12);
            --home-shell-accent-border: rgba(110, 231, 183, 0.28);
        }

        .dark.theme-orange .site-topnav {
            --home-shell-accent: #fdba74;
            --home-shell-accent-soft: rgba(253, 186, 116, 0.12);
            --home-shell-accent-border: rgba(253, 186, 116, 0.28);
        }

        .dark.theme-pink .site-topnav {
            --home-shell-accent: #f9a8d4;
            --home-shell-accent-soft: rgba(249, 168, 212, 0.12);
            --home-shell-accent-border: rgba(249, 168, 212, 0.28);
        }

        .site-topnav__brand {
            gap: 10px !important;
            justify-self: start;
            min-width: 0;
            border-radius: 9px;
            color: inherit;
        }

        .site-topnav__logo {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            overflow: hidden;
            border: 1px solid var(--home-shell-accent-border);
            border-radius: 11px;
            background: var(--home-shell-accent-soft);
            box-shadow: 0 4px 12px var(--home-shell-accent-soft);
        }

        .site-topnav__name {
            color: #122a35 !important;
            font-size: 15px !important;
            letter-spacing: -0.02em;
        }

        .site-topnav__links {
            gap: 3px !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        .site-topnav__links--compact { display: none !important; }

        .site-topnav__link {
            min-width: 66px;
            padding: 10px 14px !important;
            border: 1px solid transparent !important;
            border-radius: 9px !important;
            color: #718087 !important;
            text-align: center;
        }

        .site-topnav__external-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-left: 4px;
            vertical-align: -1px;
        }

        .site-topnav__link:hover {
            color: var(--home-shell-accent) !important;
            background: var(--home-shell-accent-soft) !important;
        }

        .site-topnav__link:has(.site-topnav__active-line) {
            color: var(--home-shell-accent) !important;
            background: var(--home-shell-accent-soft) !important;
        }

        .site-topnav__active-line {
            position: absolute;
            right: 14px;
            bottom: 4px;
            left: 14px;
            height: 2px;
            border-radius: 2px;
            background: var(--home-shell-accent);
        }

        @media (prefers-reduced-motion: no-preference) {
            .site-topnav__link:has(.site-topnav__active-line) {
                animation: nav-item-select 260ms cubic-bezier(0.16, 1, 0.3, 1);
            }

            .site-topnav__active-line {
                transform-origin: center;
                animation: nav-line-select 280ms cubic-bezier(0.16, 1, 0.3, 1);
            }
        }

        @keyframes nav-item-select {
            from { opacity: 0.72; transform: translateY(2px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes nav-line-select {
            from { opacity: 0; transform: scaleX(0); }
            to { opacity: 1; transform: scaleX(1); }
        }

        .site-topnav__meta {
            gap: 13px !important;
            justify-self: end;
        }

        .site-topnav__points {
            min-height: 32px;
            padding: 0 11px;
            border: 1px solid var(--home-shell-accent-border);
            border-radius: 9px;
            color: var(--home-shell-accent);
            background: var(--home-shell-accent-soft);
        }

        .site-topnav__meta button {
            color: #718087 !important;
        }

        .site-topnav__meta button:hover {
            color: var(--home-shell-accent) !important;
            background: var(--home-shell-accent-soft) !important;
        }

        .dark .site-topnav__name { color: #edf3f4 !important; }
        .dark .site-topnav__logo { background: var(--home-shell-accent-soft); border-color: var(--home-shell-accent-border); }
        .dark .site-topnav__link { color: #9aabb0 !important; }
        .dark .site-topnav__link:hover,
        .dark .site-topnav__link:has(.site-topnav__active-line) { color: var(--home-shell-accent) !important; background: var(--home-shell-accent-soft) !important; }
        .dark .site-topnav__points { color: var(--home-shell-accent); border-color: var(--home-shell-accent-border); background: var(--home-shell-accent-soft); }

        .site-topnav__meta {
            gap: 8px !important;
            align-items: center;
        }

        .site-topnav__points {
            min-height: 34px;
            padding: 0 10px !important;
            border-color: color-mix(in srgb, var(--p) 30%, transparent) !important;
            border-radius: 9px !important;
            background: color-mix(in srgb, var(--p1) 82%, white) !important;
            color: var(--p) !important;
            letter-spacing: 0;
        }

        .site-topnav__points svg { width: 14px; height: 14px; }
        .site-topnav__points .font-bold { font-size: 13px; }

        .site-topnav__theme-toggle {
            width: 34px !important;
            height: 34px !important;
            border: 1px solid transparent;
            border-radius: 9px !important;
            color: #64748b !important;
            background: transparent !important;
        }

        .site-topnav__theme-toggle:hover,
        .site-topnav__theme-toggle:focus-visible {
            border-color: color-mix(in srgb, var(--p) 25%, transparent);
            color: var(--p) !important;
            background: var(--p5) !important;
            outline: none;
        }

        .site-topnav__theme-toggle:active { transform: scale(0.94); }

        .site-topnav__brand:focus-visible,
        .site-topnav__link:focus-visible,
        .site-topnav__more summary:focus-visible,
        .site-topnav__account summary:focus-visible {
            outline: 3px solid color-mix(in srgb, var(--p) 32%, transparent);
            outline-offset: 3px;
        }

        .dark .site-topnav__points {
            border-color: color-mix(in srgb, var(--p) 40%, transparent) !important;
            background: color-mix(in srgb, var(--p) 16%, #111827) !important;
            color: var(--p) !important;
        }

        .dark .site-topnav__theme-toggle { color: #a8b6c2 !important; }
        .dark .site-topnav__theme-toggle:hover,
        .dark .site-topnav__theme-toggle:focus-visible { background: color-mix(in srgb, var(--p) 14%, #111827) !important; }

        .site-topnav__more {
            position: relative;
        }

        .site-topnav__account {
            position: relative;
        }

        .site-topnav__account summary {
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            border: 1px solid transparent;
            border-radius: 9px;
            color: #64748b;
            cursor: pointer;
            list-style: none;
        }

        .site-topnav__account summary::-webkit-details-marker { display: none; }
        .site-topnav__account summary svg { width: 17px; height: 17px; }
        .site-topnav__account[open] summary { border-color: color-mix(in srgb, var(--p) 25%, transparent); color: var(--p); background: var(--p5); }

        .site-topnav__more summary {
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 66px;
            padding: 10px 12px;
            border: 1px solid transparent;
            border-radius: 9px;
            color: #718087;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            list-style: none;
        }

        .site-topnav__more summary::-webkit-details-marker { display: none; }
        .site-topnav__more summary svg { width: 14px; height: 14px; transition: transform 160ms ease; }
        .site-topnav__more[open] summary { color: var(--p); background: var(--p5); }
        .site-topnav__more[open] summary svg { transform: rotate(180deg); }

        .site-topnav__more-menu {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            display: grid;
            min-width: 136px;
            padding: 6px;
            border: 1px solid color-mix(in srgb, var(--p) 20%, #dfe8eb);
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 14px 30px rgba(16, 36, 45, 0.14);
        }

        .site-topnav__more-menu button {
            min-height: 40px;
            padding: 0 10px;
            border-radius: 7px;
            color: #52636b;
            text-align: left;
            font-size: 14px;
            font-weight: 500;
        }

        .site-topnav__more-menu button:hover,
        .site-topnav__more-menu button:focus-visible,
        .site-topnav__more-menu button.is-active {
            color: var(--p);
            background: var(--p5);
            outline: none;
        }

        .site-topnav__account-menu { min-width: 168px; }
        .site-topnav__more-menu .site-topnav__account-logout { color: #c2413a; }
        .site-topnav__more-menu .site-topnav__account-logout:hover,
        .site-topnav__more-menu .site-topnav__account-logout:focus-visible { color: #b42318; background: #fff1f0; }

        .dark .site-topnav__more summary { color: #9aabb0; }
        .dark .site-topnav__more[open] summary { color: var(--p); background: color-mix(in srgb, var(--p) 14%, #111827); }
        .dark .site-topnav__account summary { color: #a8b6c2; }
        .dark .site-topnav__account[open] summary { color: var(--p); background: color-mix(in srgb, var(--p) 14%, #111827); }
        .dark .site-topnav__more-menu { border-color: color-mix(in srgb, var(--p) 28%, #334155); background: #111827; }
        .dark .site-topnav__more-menu button { color: #b8c5cc; }
        .dark .site-topnav__more-menu button:hover,
        .dark .site-topnav__more-menu button:focus-visible,
        .dark .site-topnav__more-menu button.is-active { color: var(--p); background: color-mix(in srgb, var(--p) 14%, #111827); }
        .dark .site-topnav__more-menu .site-topnav__account-logout { color: #f28b82; }
        .dark .site-topnav__more-menu .site-topnav__account-logout:hover,
        .dark .site-topnav__more-menu .site-topnav__account-logout:focus-visible { color: #ffb4ab; background: rgba(127, 29, 29, 0.34); }

        @media (max-width: 1199px) {
            .site-topnav { column-gap: 14px; padding: 0 18px !important; }
            .site-topnav__links--full { display: none !important; }
            .site-topnav__links--compact { display: flex !important; }
            .site-topnav__link { min-width: 54px; padding-right: 9px !important; padding-left: 9px !important; }
            .site-topnav__brand span { display: none; }
        }

        @media (max-width: 899px) {
            .site-topnav { column-gap: 8px; padding: 0 14px !important; }
            .site-topnav__links { gap: 1px !important; }
            .site-topnav__link { min-width: 50px; padding-right: 7px !important; padding-left: 7px !important; }
            .site-topnav__more summary { min-width: 58px; padding-right: 8px; padding-left: 8px; }
            .site-topnav__points span:last-child { display: none; }
        }

        .home-hero,
        .home-workspace,
        .home-works {
            width: min(1180px, calc(100% - 48px));
            margin: 0 auto;
        }

        .home-hero {
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
            align-items: center;
            gap: clamp(48px, 8vw, 112px);
            min-height: 470px;
            padding: 64px 0 72px;
            border-bottom: 1px solid var(--home-line);
        }

        .home-hero__copy {
            max-width: 560px;
        }

        @media (prefers-reduced-motion: no-preference) {
            .home-redesign--intro .home-hero__copy > * {
                opacity: 0;
                animation: home-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            .home-redesign--intro .home-hero__copy > :nth-child(2) { animation-delay: 80ms; }
            .home-redesign--intro .home-hero__copy > :nth-child(3) { animation-delay: 150ms; }
            .home-redesign--intro .home-hero__copy > :nth-child(4) { animation-delay: 220ms; }
            .home-redesign--intro .home-hero__copy > :nth-child(5) { animation-delay: 290ms; }
            .home-redesign--intro .home-hero__visual {
                opacity: 0;
                animation: home-visual-in 760ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
            }
            .home-route-list button,
            .home-work {
                transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms ease, padding 180ms ease;
            }
        }

        @keyframes home-rise {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes home-visual-in {
            from { opacity: 0; transform: translate3d(24px, 10px, 0) scale(0.985); }
            to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
        }

        .home-eyebrow,
        .home-section-kicker {
            color: var(--home-accent);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .home-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 24px;
        }

        .home-eyebrow__mark,
        .home-status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--home-accent);
        }

        .home-hero h1 {
            max-width: 580px;
            margin: 0;
            color: var(--home-ink);
            font-size: clamp(38px, 5vw, 70px);
            font-weight: 760;
            letter-spacing: -0.055em;
            line-height: 0.98;
        }

        .home-hero h1 strong {
            display: block;
            color: var(--home-accent);
            font-weight: 760;
        }

        .home-hero p {
            max-width: 480px;
            margin: 25px 0 0;
            color: var(--home-muted);
            font-size: 16px;
            line-height: 1.75;
        }

        .home-hero__actions {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-top: 32px;
        }

        .home-button {
            min-height: 44px;
            padding: 0 18px;
            border: 1px solid var(--home-line);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 750;
            cursor: pointer;
            transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
        }

        .home-button:active,
        .home-route-list button:active,
        .home-work:active {
            transform: translateY(1px) scale(0.99);
        }

        .home-button--primary {
            border-color: var(--home-accent);
            color: #ffffff;
            background: var(--home-accent);
        }

        .home-button--primary:hover {
            background: color-mix(in srgb, var(--home-accent) 86%, #082b3b);
        }

        .home-button--quiet {
            color: var(--home-ink);
            background: transparent;
        }

        .home-button--quiet:hover {
            border-color: var(--home-accent);
            background: var(--home-accent-soft);
        }

        .home-button span,
        .home-text-link span {
            display: inline-block;
            margin-left: 8px;
            font-size: 18px;
            line-height: 0;
        }

        .home-quick-compose {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: 500px;
            min-height: 48px;
            margin-top: 16px;
            padding: 5px 6px 5px 13px;
            border: 1px solid var(--home-line);
            border-radius: 12px;
            background: var(--home-surface);
            box-shadow: 0 12px 28px rgba(16, 36, 45, 0.06);
            transition: border-color 180ms ease, box-shadow 180ms ease;
        }

        .home-quick-compose:focus-within {
            border-color: var(--home-accent);
            box-shadow: 0 0 0 4px var(--home-accent-soft);
        }

        .home-quick-compose.is-invalid {
            border-color: #c2413a;
            box-shadow: 0 0 0 4px rgba(194, 65, 58, 0.14);
        }

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

        .home-quick-compose__error {
            position: absolute;
            top: calc(100% + 7px);
            left: 0;
            display: none;
            color: #b42318;
            font-size: 12px;
            font-weight: 600;
        }

        .home-quick-compose.is-invalid .home-quick-compose__error { display: block; }

        .home-quick-compose__icon {
            color: var(--home-accent);
            font-size: 18px;
        }

        .home-quick-compose input {
            min-width: 0;
            flex: 1;
            border: 0;
            outline: 0;
            color: var(--home-ink);
            background: transparent;
            font-size: 13px;
        }

        .home-quick-compose input::placeholder {
            color: var(--home-muted);
        }

        .home-quick-compose button {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 9px;
            color: #ffffff;
            background: var(--home-accent);
            font-size: 18px;
            cursor: pointer;
        }

        .home-quick-compose button:hover {
            filter: brightness(0.92);
        }

        .home-hero__note {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 22px;
            color: var(--home-muted);
            font-size: 12px;
        }

        .home-status-dot {
            flex: 0 0 auto;
            box-shadow: 0 0 0 4px var(--home-accent-soft);
        }

        .home-hero__visual {
            position: relative;
            max-width: 640px;
            padding: 0 22px 26px 0;
            justify-self: end;
        }

        .home-visual__frame {
            position: relative;
            overflow: hidden;
            aspect-ratio: 1.23 / 1;
            border: 1px solid var(--home-line);
            border-radius: 16px;
            background: var(--home-surface-soft);
            box-shadow: 0 28px 60px rgba(10, 26, 32, 0.16);
        }

        .home-visual__frame::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(180deg, transparent 65%, rgba(10, 24, 29, 0.28));
            pointer-events: none;
        }

        .home-visual__frame img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .home-visual__thumb {
            position: absolute;
            right: -2px;
            bottom: 0;
            width: 184px;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            border: 7px solid var(--home-bg);
            border-radius: 14px;
            background: var(--home-surface);
            box-shadow: 0 18px 38px rgba(10, 26, 32, 0.22);
            transform: rotate(3deg);
            transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        .home-hero__visual:hover .home-visual__thumb {
            transform: rotate(0deg) translateY(-5px);
        }

        .home-visual__thumb img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .home-visual__caption {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: baseline;
            gap: 14px;
            margin-top: 13px;
            color: var(--home-muted);
            font-size: 12px;
        }

        .home-visual__caption strong {
            color: var(--home-ink);
            font-size: 14px;
        }

        .home-visual__caption em {
            font-style: normal;
            font-variant-numeric: tabular-nums;
        }

        .home-visual__rail {
            position: absolute;
            top: 18px;
            right: -28px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--home-muted);
            font-size: 10px;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.1em;
        }

        .home-visual__rail i {
            display: block;
            width: 42px;
            height: 1px;
            background: var(--home-line);
        }

        .home-visual__stage {
            position: relative;
            overflow: hidden;
            aspect-ratio: 1.23 / 1;
            border: 1px solid var(--home-line);
            border-radius: 16px;
            background: var(--home-surface-soft);
            box-shadow: 0 28px 60px rgba(10, 26, 32, 0.16);
            cursor: pointer;
        }

        .home-visual__stage::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(180deg, transparent 58%, rgba(10, 24, 29, 0.36));
            pointer-events: none;
        }

        .home-visual__stage > img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (prefers-reduced-motion: no-preference) {
            .home-visual__stage--switching > img {
                animation: home-carousel-change 460ms cubic-bezier(0.16, 1, 0.3, 1);
            }
        }

        @keyframes home-carousel-change {
            from { opacity: 0.35; transform: scale(1.025) translateX(14px); }
            to { opacity: 1; transform: scale(1) translateX(0); }
        }

        .home-visual__stage-meta {
            position: absolute;
            right: 16px;
            bottom: 14px;
            left: 16px;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(255, 255, 255, 0.82);
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .home-visual__stage-meta b {
            color: #ffffff;
            font-size: 14px;
            font-weight: 750;
            letter-spacing: 0;
        }

        .home-visual__control {
            position: absolute;
            top: 50%;
            z-index: 2;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            border-radius: 50%;
            color: #ffffff;
            background: rgba(16, 36, 45, 0.34);
            backdrop-filter: blur(10px);
            transform: translateY(-50%);
            cursor: pointer;
            opacity: 0;
            transition: opacity 180ms ease, background 180ms ease, transform 180ms ease;
        }

        .home-visual__control--prev { left: 14px; }
        .home-visual__control--next { right: 14px; }

        .home-visual__stage:hover .home-visual__control,
        .home-visual__control:focus-visible { opacity: 1; }

        .home-visual__control:hover {
            background: var(--home-accent);
            transform: translateY(-50%) scale(1.06);
        }

        .home-visual__thumbs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: 12px;
        }

        .home-visual__thumb-button {
            min-width: 0;
            padding: 0;
            overflow: hidden;
            aspect-ratio: 4 / 3;
            border: 1px solid var(--home-line);
            border-radius: 10px;
            background: var(--home-surface-soft);
            cursor: pointer;
            opacity: 0.62;
            transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 180ms ease;
        }

        .home-visual__thumb-button img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .home-visual__thumb-button:hover,
        .home-visual__thumb-button.is-active {
            border-color: var(--home-accent);
            opacity: 1;
            transform: translateY(-2px);
        }

        .home-visual__thumb-button.is-active {
            box-shadow: 0 0 0 3px var(--home-accent-soft);
        }

        .home-visual__stack {
            position: relative;
        }

        @media (prefers-reduced-motion: no-preference) {
            .home-visual__stack--switching .home-visual__frame img {
                animation: home-stack-main-change 460ms cubic-bezier(0.16, 1, 0.3, 1);
            }

            .home-visual__stack--switching .home-visual__thumb img {
                animation: home-stack-overlay-change 520ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
            }
        }

        @keyframes home-stack-main-change {
            from { opacity: 0.45; transform: scale(1.018) translateX(12px); }
            to { opacity: 1; transform: scale(1) translateX(0); }
        }

        @keyframes home-stack-overlay-change {
            from { opacity: 0.45; transform: translate3d(10px, 8px, 0) rotate(3deg) scale(0.98); }
            to { opacity: 1; transform: translate3d(0, 0, 0) rotate(3deg) scale(1); }
        }

        .home-visual__stack-controls {
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            z-index: 4;
            height: 0;
            pointer-events: none;
        }

        .home-visual__stack-controls button {
            position: absolute;
            top: -18px;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            color: #ffffff;
            background: rgba(16, 36, 45, 0.48);
            box-shadow: 0 8px 18px rgba(10, 26, 32, 0.18);
            backdrop-filter: blur(10px);
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            pointer-events: auto;
            transition: background 180ms ease, transform 180ms ease;
        }

        .home-visual__stack-controls button:first-child { left: 14px; }
        .home-visual__stack-controls button:last-child { right: 14px; }

        .home-visual__stack-controls button:hover,
        .home-visual__stack-controls button:focus-visible {
            background: var(--home-accent);
            transform: scale(1.08);
        }

        .home-visual__stack-controls span {
            position: absolute;
            top: -16px;
            left: 50%;
            min-width: 42px;
            padding: 6px 10px;
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 999px;
            color: rgba(255, 255, 255, 0.88);
            background: rgba(16, 36, 45, 0.42);
            box-shadow: 0 8px 18px rgba(10, 26, 32, 0.14);
            backdrop-filter: blur(10px);
            font-size: 11px;
            font-variant-numeric: tabular-nums;
            text-align: center;
            transform: translateX(-50%);
            pointer-events: none;
        }

        .home-visual__stack-controls span {
            display: none;
        }

        .home-visual__stack-controls button {
            font-size: 0;
        }

        .home-visual__stack-controls button:first-child::before {
            content: "\2190";
            font-size: 18px;
        }

        .home-visual__stack-controls button:last-child::before {
            content: "\2192";
            font-size: 18px;
        }

        .home-workspace,
        .home-works {
            padding: 64px 0 0;
        }

        .home-works {
            padding-bottom: 76px;
        }

        .home-section-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 24px;
        }

        .home-section-heading h2 {
            margin: 8px 0 0;
            color: var(--home-ink);
            font-size: 24px;
            font-weight: 760;
            letter-spacing: -0.035em;
        }

        .home-section-rule {
            flex: 1;
            height: 1px;
            margin-bottom: 7px;
            background: var(--home-line);
        }

        .home-route-list {
            display: grid;
            grid-template-columns: 1.1fr 1fr 1fr;
            border-top: 1px solid var(--home-line);
        }

        .home-route-list button {
            display: grid;
            grid-template-columns: 38px 1fr auto;
            align-items: center;
            gap: 13px;
            min-height: 92px;
            padding: 18px 18px 18px 0;
            border: 0;
            border-bottom: 1px solid var(--home-line);
            color: var(--home-ink);
            background: transparent;
            text-align: left;
            cursor: pointer;
            transition: background 180ms ease, padding 180ms ease;
        }

        .home-route-list button + button {
            padding-left: 22px;
            border-left: 1px solid var(--home-line);
        }

        .home-route-list button:hover {
            padding-left: 10px;
            background: var(--home-accent-soft);
        }

        .home-route-list button + button:hover {
            padding-left: 32px;
        }

        .home-route-icon {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 9px;
            color: #ffffff;
            background: var(--home-accent);
            font-size: 18px;
        }

        .home-route-icon--blue { background: #406d83; }
        .home-route-icon--muted { background: #718083; }

        .home-route-list strong,
        .home-route-list small {
            display: block;
        }

        .home-route-list strong {
            font-size: 14px;
        }

        .home-route-list small {
            margin-top: 5px;
            color: var(--home-muted);
            font-size: 12px;
        }

        .home-route-list b {
            color: var(--home-accent);
            font-size: 18px;
            font-weight: 500;
        }

        .home-route-grid {
            display: grid;
            grid-template-columns: 1.28fr 1fr;
            gap: 18px;
        }

        .home-route-stack {
            display: grid;
            grid-template-rows: 1fr 1fr;
            gap: 18px;
        }

        .home-route {
            display: grid;
            grid-template-columns: 38px 1fr auto;
            align-items: center;
            gap: 14px;
            min-height: 94px;
            padding: 20px 22px;
            border: 1px solid var(--home-line);
            border-radius: 13px;
            color: var(--home-ink);
            background: var(--home-surface);
            text-align: left;
            cursor: pointer;
            transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
        }

        .home-route:hover {
            border-color: var(--home-accent);
            background: var(--home-accent-soft);
            box-shadow: 0 14px 30px color-mix(in srgb, var(--home-accent) 10%, transparent);
            transform: translateY(-2px);
        }

        .home-route--primary {
            display: grid;
            grid-template-rows: auto 1fr auto;
            align-items: start;
            min-height: 206px;
            padding: 22px 24px;
            border-color: color-mix(in srgb, var(--home-accent) 26%, transparent);
            background: var(--home-accent-soft);
        }

        .home-route--primary .home-route__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .home-route--primary .home-route__top b {
            color: var(--home-accent);
            font-size: 24px;
            font-weight: 500;
        }

        .home-route__primary-copy {
            align-self: center;
        }

        .home-route--primary .home-route__primary-copy strong {
            font-size: 22px;
        }

        .home-route--primary .home-route__primary-copy small {
            max-width: 260px;
            margin-top: 7px;
            font-size: 13px;
        }

        .home-route strong,
        .home-route small,
        .home-route em {
            display: block;
        }

        .home-route small {
            margin-top: 5px;
            color: var(--home-muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .home-route em {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
            color: var(--home-accent);
            font-size: 12px;
            font-weight: 700;
            font-style: normal;
        }

        .home-route--primary em b {
            font-size: 17px;
            font-weight: 500;
        }

        .home-route > b {
            color: var(--home-accent);
            font-size: 18px;
            font-weight: 500;
        }

        .home-text-link {
            border: 0;
            color: var(--home-accent);
            background: transparent;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }

        .home-text-link:hover { color: var(--home-ink); }

        .home-works-grid {
            display: grid;
            grid-template-columns: 1.28fr 0.86fr 0.86fr;
            gap: 18px;
        }

        .home-works-empty {
            display: flex;
            grid-column: 1 / -1;
            flex-direction: column;
            align-items: flex-start;
            gap: 7px;
            min-height: 154px;
            padding: 28px;
            border: 1px dashed color-mix(in srgb, var(--home-accent) 34%, var(--home-line));
            border-radius: 12px;
            background: color-mix(in srgb, var(--home-surface-soft) 68%, transparent);
            color: var(--home-ink);
        }

        .home-works-empty strong { font-size: 15px; }
        .home-works-empty span { color: var(--home-muted); font-size: 13px; line-height: 1.6; }
        .home-works-empty button {
            min-height: 40px;
            margin-top: 7px;
            padding: 0 14px;
            border: 1px solid var(--home-accent);
            border-radius: 8px;
            color: #ffffff;
            background: var(--home-accent);
            font-size: 13px;
            font-weight: 700;
        }

        .home-works-empty button:hover { filter: brightness(0.94); }
        .home-works-empty button:focus-visible { outline: 3px solid var(--home-accent-soft); outline-offset: 3px; }

        .home-work {
            min-width: 0;
            padding: 6px;
            border: 1px solid var(--home-line);
            border-radius: 13px;
            color: var(--home-ink);
            background: var(--home-surface);
            text-align: left;
            cursor: pointer;
            transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 180ms ease;
        }

        .home-work:hover {
            border-color: color-mix(in srgb, var(--home-accent) 52%, var(--home-line));
            box-shadow: 0 14px 30px rgba(26, 60, 75, 0.1);
            transform: translateY(-3px);
        }

        .home-work__image {
            display: block;
            overflow: hidden;
            aspect-ratio: 1.25 / 1;
            border-radius: 8px;
            background: var(--home-surface-soft);
        }

        .home-work:first-child .home-work__image {
            aspect-ratio: 1.52 / 1;
        }

        .home-work__image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        .home-work:hover .home-work__image img { transform: scale(1.035); }

        .home-work__meta {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            padding: 11px 6px 5px;
        }

        .home-work__meta strong { font-size: 13px; font-weight: 720; }
        .home-work__meta small { color: var(--home-muted); font-size: 11px; }

        @media (max-width: 900px) {
            .home-hero { grid-template-columns: 1fr; gap: 42px; padding-top: 44px; }
            .home-hero__visual { width: min(100%, 640px); justify-self: start; }
            .home-visual__rail { right: 0; }
        }

        @media (max-width: 680px) {
            .home-hero,
            .home-workspace,
            .home-works { width: min(100% - 32px, 560px); }
            .home-shell .home-redesign { height: auto; min-height: 100%; overflow-y: visible; }
            .home-hero { min-height: 0; padding: 34px 0 46px; }
            .home-hero h1 { font-size: clamp(36px, 12vw, 54px); }
            .home-hero__actions { flex-wrap: wrap; }
            .home-button { flex: 1; }
            .home-hero__visual { padding-right: 8px; }
            .home-visual__thumb { right: -4px; width: 132px; border-width: 5px; }
            .home-visual__caption { grid-template-columns: 1fr auto; gap: 5px 10px; }
            .home-visual__caption span { grid-column: 1 / -1; }
            .home-route-list,
            .home-works-grid { grid-template-columns: 1fr; }
            .home-route-grid { grid-template-columns: 1fr; }
            .home-route-stack { grid-template-rows: auto; }
            .home-route-list button,
            .home-route-list button + button { padding-left: 0; border-left: 0; }
            .home-route-list button:hover,
            .home-route-list button + button:hover { padding-left: 8px; }
            .home-work:first-child .home-work__image,
            .home-work__image { aspect-ratio: 1.38 / 1; }
            .home-section-heading h2 { font-size: 21px; }
            .home-section-rule { display: none; }
            .home-works-empty { min-height: 142px; padding: 22px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .home-button,
            .home-route-list button,
            .home-work__image img { transition: none; }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        @keyframes glow {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        .canvas-body {
            margin: 0;
            min-height: 100vh;
            background: #05070b;
            overflow: hidden;
        }
        .canvas-root-host {
            height: 100vh;
            overflow: hidden;
        }
        .canvas-toast {
            position: fixed;
            top: 24px;
            left: 50%;
            z-index: 99999;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            border-radius: 16px;
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
            pointer-events: none;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .canvas-toast__icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        .canvas-page {
            position: relative;
            height: 100%;
            min-height: 100%;
            background:
                radial-gradient(circle at 18% 78%, rgba(164, 58, 120, 0.18), transparent 26%),
                radial-gradient(circle at 66% 18%, rgba(61, 142, 190, 0.16), transparent 30%),
                linear-gradient(180deg, #0a0b0f 0%, #0b0c10 100%);
        }
        .canvas-page-layout {
            overflow: hidden;
        }
        .canvas-stage {
            position: relative;
            z-index: 20;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 100%;
        }
        .canvas-topbar {
            padding: 16px 16px 12px;
        }
        .canvas-topbar__row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .canvas-topbar__left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            flex: 1;
        }
        .canvas-topbar__right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .canvas-main {
            flex: 1;
            min-height: 0;
            padding: 0 16px 112px;
        }
        .canvas-brand-title {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .canvas-notice-title {
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
        }
        .canvas-notice-copy {
            color: rgba(255, 255, 255, 0.62);
            font-size: 14px;
            line-height: 1.5;
        }
        .canvas-page__grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
            background-size: 28px 28px;
            opacity: 0.55;
            pointer-events: none;
        }
        .canvas-page__glow {
            position: absolute;
            border-radius: 9999px;
            filter: blur(90px);
            pointer-events: none;
        }
        .canvas-page__glow--left {
            left: 8%;
            bottom: 10%;
            width: 320px;
            height: 320px;
            background: rgba(173, 69, 126, 0.12);
        }
        .canvas-page__glow--right {
            right: 14%;
            top: 10%;
            width: 380px;
            height: 380px;
            background: rgba(71, 150, 193, 0.12);
        }
        .canvas-flow-shell {
            position: relative;
            height: 100%;
            min-height: 420px;
            border-radius: 28px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(8, 9, 13, 0.3);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
        }
        .canvas-flow {
            width: 100%;
            height: 100%;
            background: transparent;
        }
        .canvas-flow .vue-flow__container,
        .canvas-flow .vue-flow__pane {
            background: transparent;
        }
        .canvas-flow .vue-flow__node-text {
            background: transparent;
            border: 0;
            box-shadow: none;
            padding: 0;
            border-radius: 0;
        }
        .canvas-flow .vue-flow__node.selected .canvas-text-flow-node {
            border-color: rgba(125, 211, 252, 0.5);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(125, 211, 252, 0.18);
        }
        .canvas-text-flow-node {
            min-width: 140px;
            max-width: 280px;
            padding: 12px 18px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(24, 26, 32, 0.94);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .canvas-text-flow-node__content {
            min-width: 80px;
            min-height: 24px;
            outline: none;
            color: #ffffff;
            font-size: 22px;
            line-height: 1.35;
            font-weight: 600;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .canvas-flow-handle {
            width: 10px;
            height: 10px;
            border: 2px solid rgba(8, 9, 13, 0.92);
            background: #7dd3fc;
            box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.16);
        }
        .canvas-pill {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid rgba(255, 255, 255, 0.09);
            background: rgba(25, 27, 33, 0.84);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-radius: 20px;
        }
        .canvas-brand-pill {
            padding: 14px 18px;
        }
        .canvas-brand-icon {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 18px rgba(99, 102, 241, 0.25);
            flex-shrink: 0;
        }
        .canvas-brand-icon img,
        .canvas-ai-entry__avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .canvas-notice-pill {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            padding: 14px 24px;
            text-align: center;
            flex: 1;
            min-width: 0;
        }
        .canvas-actions-pill {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
            padding: 10px;
        }
        .canvas-action-button {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            padding: 10px 16px;
            border-radius: 14px;
            font-size: 14px;
            line-height: 1;
            font-weight: 600;
            transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        }
        .canvas-action-button:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.16);
            transform: translateY(-1px);
        }
        .canvas-ai-entry {
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            width: 76px;
            height: 76px;
            border-radius: 26px;
            border: 1px solid rgba(169, 214, 255, 0.28);
            background: rgba(32, 35, 43, 0.88);
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease;
            z-index: 20;
        }
        .canvas-ai-entry:hover {
            transform: translateY(-50%) scale(1.03);
            background: rgba(42, 46, 56, 0.94);
        }
        .canvas-ai-entry__avatar {
            width: 46px;
            height: 46px;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 10px 22px rgba(98, 132, 255, 0.3);
        }
        .canvas-ai-entry__badge {
            position: absolute;
            right: -2px;
            bottom: -6px;
            min-width: 30px;
            padding: 3px 8px;
            border-radius: 9999px;
            background: linear-gradient(135deg, #7dd3fc 0%, #f472b6 100%);
            color: #ffffff;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 8px 18px rgba(244, 114, 182, 0.28);
        }
        .canvas-hint-pill {
            position: absolute;
            left: 28px;
            bottom: 28px;
            max-width: min(560px, calc(100% - 140px));
            padding: 15px 18px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(25, 27, 33, 0.88);
            color: rgba(255, 255, 255, 0.72);
            font-size: 15px;
            line-height: 1.5;
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            z-index: 10;
        }
        .canvas-add-button {
            position: absolute;
            left: 50%;
            bottom: 28px;
            width: 74px;
            height: 74px;
            margin-left: -37px;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(26, 28, 35, 0.94);
            color: #ffffff;
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease;
            z-index: 20;
        }
        .canvas-add-button:hover {
            transform: translateY(-2px);
            background: rgba(35, 38, 46, 0.98);
        }
        .canvas-add-button svg {
            width: 36px;
            height: 36px;
        }
        .canvas-context-menu {
            position: absolute;
            min-width: 276px;
            padding: 16px 0 12px;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(31, 32, 37, 0.96);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            z-index: 40;
        }
        .canvas-context-menu.hidden {
            display: none;
        }
        .canvas-context-menu__title {
            padding: 0 22px 12px;
            color: rgba(255, 255, 255, 0.35);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .canvas-context-menu__item {
            width: 100%;
            padding: 14px 22px;
            text-align: left;
            color: #ffffff;
            font-size: 18px;
            font-weight: 500;
            background: transparent;
            border: 0;
            transition: background 0.18s ease, color 0.18s ease;
        }
        .canvas-context-menu__item:hover {
            background: rgba(255, 255, 255, 0.06);
            color: #f8fafc;
        }
        @media (max-width: 1279px) {
            .canvas-topbar__row {
                flex-direction: column;
                align-items: stretch;
            }
            .canvas-topbar__left {
                flex-direction: column;
                align-items: stretch;
            }
            .canvas-actions-pill {
                justify-content: flex-start;
            }
        }
        @media (max-width: 768px) {
            .canvas-topbar {
                padding: 12px 12px 10px;
            }
            .canvas-main {
                padding: 0 12px 112px;
            }
            .canvas-flow-shell {
                min-height: 360px;
                border-radius: 24px;
            }
            .canvas-text-flow-node {
                min-width: 120px;
                max-width: 220px;
            }
            .canvas-text-flow-node__content {
                font-size: 20px;
            }
            .canvas-page__grid {
                background-size: 24px 24px;
            }
            .canvas-ai-entry {
                right: 16px;
                top: auto;
                bottom: 128px;
                transform: none;
                width: 68px;
                height: 68px;
            }
            .canvas-ai-entry:hover {
                transform: scale(1.03);
            }
            .canvas-hint-pill {
                left: 16px;
                right: 16px;
                bottom: 108px;
                max-width: none;
                font-size: 14px;
            }
            .canvas-add-button {
                bottom: 18px;
                width: 68px;
                height: 68px;
                margin-left: -34px;
            }
            .canvas-context-menu {
                min-width: 240px;
                max-width: calc(100vw - 32px);
            }
            .canvas-context-menu__item {
                font-size: 17px;
            }
            .canvas-notice-pill {
                justify-content: flex-start;
                text-align: left;
            }
        }

        /* History image inspector */
        .history-detail-modal {
            width: min(1440px, calc(100vw - 48px));
            max-width: calc(100vw - 48px) !important;
            border-radius: 14px !important;
            border-color: color-mix(in srgb, var(--p) 10%, #d8e0e5) !important;
            box-shadow: 0 26px 68px rgb(15 23 42 / 0.3) !important;
        }

        .history-detail-stage {
            background: #111318 !important;
        }

        .history-detail-stage .detail-main-img {
            max-height: calc(100% - 48px) !important;
        }

        .history-detail-stage > .absolute.inset-0.opacity-10 {
            display: none;
        }

        .history-detail-stage .border-purple-500 {
            border-color: var(--p) !important;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--p) 28%, transparent) !important;
        }

        .history-detail-side {
            background: #ffffff;
        }

        .history-detail-side__head {
            min-height: 84px;
            padding: 18px 20px !important;
            border-color: #e3e9ef !important;
        }

        .history-detail-side__head > div > div:first-child {
            border-radius: 8px !important;
            background: var(--p) !important;
            box-shadow: 0 6px 16px color-mix(in srgb, var(--p) 18%, transparent) !important;
        }

        .history-detail-side__body {
            padding: 16px 20px !important;
            background: #f8fafc;
        }

        .history-detail-side__body > .grid.grid-cols-2.gap-2 {
            gap: 8px !important;
        }

        .history-detail-side__body > .grid.grid-cols-2.gap-2 > div {
            min-height: 68px;
            padding: 10px 12px !important;
            border: 1px solid #e0e7ee !important;
            border-radius: 10px !important;
            background: #ffffff !important;
        }

        .history-detail-side__body > .grid.grid-cols-2.gap-2 > div > span:first-child {
            color: #748292 !important;
            letter-spacing: 0 !important;
        }

        .history-detail-side__body > .grid.grid-cols-2.gap-2 > div > span:last-child {
            color: #27384a !important;
        }

        .history-detail-time {
            border-color: #e0e7ee !important;
            border-radius: 10px !important;
            background: #ffffff !important;
        }

        .history-detail-prompt {
            padding: 14px !important;
            border-color: color-mix(in srgb, var(--p) 18%, #dbe4ec) !important;
            border-radius: 10px !important;
            background: color-mix(in srgb, var(--p1) 40%, #ffffff) !important;
        }

        .history-detail-prompt > div:last-child {
            color: #3d4d5d !important;
            line-height: 1.6 !important;
        }

        .history-detail-actions {
            padding: 16px 20px 18px !important;
            border-color: #e3e9ef !important;
            background: #ffffff;
        }

        .history-detail-actions .grid {
            gap: 10px !important;
        }

        .history-detail-actions .grid button {
            min-height: 44px;
            border: 1px solid #d8e2eb !important;
            border-radius: 9px !important;
            color: #34485a !important;
            background: #ffffff !important;
            box-shadow: none !important;
            font-weight: 650 !important;
        }

        .history-detail-actions .grid button:first-child {
            border-color: var(--p) !important;
            color: #ffffff !important;
            background: var(--p) !important;
        }

        .history-detail-actions .grid button:last-child {
            border-color: #f0cbd0 !important;
            color: #c43a47 !important;
            background: #fff7f7 !important;
        }

        .history-detail-actions .grid button:hover {
            border-color: color-mix(in srgb, var(--p) 50%, #d8e2eb) !important;
            background: color-mix(in srgb, var(--p1) 42%, #ffffff) !important;
            transform: translateY(-1px);
        }

        .history-detail-actions .grid button:first-child:hover {
            background: color-mix(in srgb, var(--p) 88%, #111827) !important;
        }

        .history-detail-actions .grid button:last-child:hover {
            border-color: #d34a56 !important;
            background: #fff0f1 !important;
        }

        .dark .history-detail-modal {
            border-color: #343a43 !important;
        }

        .dark .history-detail-side,
        .dark .history-detail-actions {
            background: #171a1e;
        }

        .dark .history-detail-side__head,
        .dark .history-detail-actions {
            border-color: #343a43 !important;
        }

        .dark .history-detail-side__body {
            background: #15181c;
        }

        .dark .history-detail-side__body > .grid.grid-cols-2.gap-2 > div,
        .dark .history-detail-time {
            border-color: #3a414b !important;
            background: #1d2127 !important;
        }

        .dark .history-detail-side__body > .grid.grid-cols-2.gap-2 > div > span:last-child {
            color: #e5edf4 !important;
        }

        .dark .history-detail-prompt {
            border-color: color-mix(in srgb, var(--p) 24%, #3a414b) !important;
            background: color-mix(in srgb, var(--p) 8%, #1d2127) !important;
        }

        .dark .history-detail-prompt > div:last-child {
            color: #d3d9e0 !important;
        }

        .dark .history-detail-actions .grid button {
            border-color: #3a414b !important;
            color: #d0d6de !important;
            background: #1d2127 !important;
        }

        .dark .history-detail-actions .grid button:first-child {
            border-color: var(--p) !important;
            color: #ffffff !important;
            background: var(--p) !important;
        }

        .dark .history-detail-actions .grid button:last-child {
            border-color: #75404a !important;
            color: #ffb8c0 !important;
            background: #342126 !important;
        }

        .history-detail-modal button:focus-visible {
            outline: 3px solid color-mix(in srgb, var(--p) 30%, transparent);
            outline-offset: 2px;
        }

        .history-detail-stage:fullscreen,
        .history-detail-stage:-webkit-full-screen {
            width: 100vw;
            height: 100dvh;
            padding: 28px 72px;
            background: #0b1219 !important;
        }

        .history-detail-stage:fullscreen .detail-main-img,
        .history-detail-stage:-webkit-full-screen .detail-main-img {
            max-width: calc(100vw - 220px);
            max-height: calc(100dvh - 72px);
        }

        .history-detail-edit-button {
            min-height: 42px;
            border-radius: 7px !important;
            border-color: rgba(185, 205, 225, 0.34) !important;
            background: rgba(12, 23, 34, 0.78) !important;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
        }

        .history-detail-edit-button:hover {
            border-color: rgba(103, 174, 244, 0.84) !important;
            background: #1c5e9d !important;
        }

        /* Advanced image editor workspace */
        .advanced-editor {
            width: min(96vw, 1540px) !important;
            height: min(90dvh, 920px) !important;
            border: 1px solid #dbe4ec;
            border-radius: 12px !important;
            background: #f7fafc;
            box-shadow: 0 30px 88px rgba(8, 19, 31, 0.38) !important;
        }

        .advanced-editor > div:first-child {
            min-height: 68px;
            padding: 0 24px !important;
            border-color: #e3eaf1 !important;
            background: #ffffff;
        }

        .advanced-editor > div:first-child > div > div:first-child {
            border-radius: 8px !important;
            background: #2f80ed !important;
            box-shadow: 0 7px 16px rgba(47, 128, 237, 0.18);
        }

        .advanced-editor > div:first-child h3 {
            font-size: 16px !important;
            letter-spacing: 0;
        }

        .advanced-editor__stage {
            background: #111b26 !important;
        }

        .advanced-editor__viewport {
            padding: 42px 120px;
            box-sizing: border-box;
            background-color: #111b26;
            background-image:
                linear-gradient(rgba(143, 172, 194, 0.075) 1px, transparent 1px),
                linear-gradient(90deg, rgba(143, 172, 194, 0.075) 1px, transparent 1px);
            background-size: 24px 24px;
            scrollbar-color: #50677b #111b26;
        }

        .advanced-editor__viewport canvas {
            border: 1px solid rgba(193, 211, 224, 0.42);
            border-radius: 6px;
            background: #ffffff;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
        }

        .advanced-editor__zoom {
            top: 18px !important;
            right: 18px !important;
            min-height: 40px;
            padding: 4px !important;
            border-radius: 8px !important;
            background: rgba(11, 21, 31, 0.9) !important;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
        }

        .advanced-editor__zoom button {
            border-radius: 6px !important;
        }

        .advanced-editor__toolbar {
            padding: 12px 18px !important;
            border-color: #e3eaf1 !important;
            background: #ffffff !important;
        }

        .advanced-editor__toolbar > div {
            display: grid !important;
            grid-template-columns: auto auto minmax(20px, 1fr) auto;
            min-height: 44px;
            align-items: center;
            gap: 10px !important;
        }

        .advanced-editor__toolbar > div > div:nth-child(1),
        .advanced-editor__toolbar > div > div:nth-child(2) {
            padding: 3px !important;
            border: 1px solid #dce5ed;
            border-radius: 8px !important;
            background: #f3f6f9 !important;
        }

        .advanced-editor__toolbar > div > div:nth-child(1) button,
        .advanced-editor__toolbar > div > div:nth-child(2) button {
            width: 34px !important;
            height: 34px !important;
            border-radius: 6px !important;
        }

        .advanced-editor__toolbar > div > div:last-child {
            gap: 8px !important;
        }

        .advanced-editor__toolbar > div > div:last-child > div:first-child {
            min-height: 38px;
            border-color: #dce5ed !important;
            border-radius: 8px !important;
            background: #ffffff !important;
            box-shadow: none !important;
        }

        .advanced-editor__toolbar > div > div:last-child > button {
            width: 38px !important;
            height: 38px !important;
            border: 1px solid #dce5ed;
            border-radius: 7px !important;
        }

        .advanced-editor__toolbar > div > div:last-child > button:last-child {
            width: auto !important;
            min-width: 94px;
            padding: 0 14px !important;
            border-color: #2f80ed !important;
            background: #2f80ed !important;
            box-shadow: 0 8px 18px rgba(47, 128, 237, 0.2) !important;
        }

        .advanced-editor__toolbar > div > div:last-child > button:last-child:hover {
            background: #1768cf !important;
        }

        .dark .advanced-editor {
            border-color: #2d3d4b;
            background: #15212c;
        }

        .dark .advanced-editor > div:first-child,
        .dark .advanced-editor__toolbar {
            border-color: #2d3d4b !important;
            background: #172532 !important;
        }

        .dark .advanced-editor__toolbar > div > div:nth-child(1),
        .dark .advanced-editor__toolbar > div > div:nth-child(2) {
            border-color: #354958;
            background: #111b25 !important;
        }

        .dark .advanced-editor__toolbar > div > div:last-child > div:first-child,
        .dark .advanced-editor__toolbar > div > div:last-child > button {
            border-color: #354958 !important;
            background: #111b25 !important;
        }

        .dark .advanced-editor__toolbar > div > div:last-child > button:last-child {
            border-color: #3b92f2 !important;
            background: #2f80ed !important;
        }

        @media (max-width: 860px) {
            .advanced-editor {
                width: 100% !important;
                height: 100dvh !important;
                border-radius: 0 !important;
            }

            .advanced-editor__viewport {
                padding: 32px 56px;
            }

            .advanced-editor__toolbar {
                overflow-x: auto;
            }

            .advanced-editor__toolbar > div {
                min-width: 720px;
            }
        }

        .advanced-color-picker {
            position: relative;
            z-index: 30;
        }

        .advanced-color-picker__trigger {
            display: inline-flex;
            min-height: 30px;
            align-items: center;
            gap: 7px;
            padding: 0 2px;
            border: 0;
            color: #65788b;
            background: transparent;
            font-size: 12px;
            font-weight: 650;
            cursor: pointer;
        }

        .advanced-color-picker__trigger:hover {
            color: #2f80ed;
        }

        .advanced-color-picker__trigger svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2;
        }

        .advanced-color-picker__swatch {
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            border: 1px solid rgba(29, 47, 63, 0.2);
            border-radius: 5px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
        }

        .advanced-color-picker__panel {
            position: absolute;
            right: -8px;
            bottom: calc(100% + 14px);
            width: 250px;
            box-sizing: border-box;
            padding: 12px;
            border: 1px solid #dbe5ee;
            border-radius: 9px;
            background: #ffffff;
            box-shadow: 0 16px 38px rgba(18, 37, 53, 0.22);
        }

        .advanced-color-picker__panel.hidden {
            display: none;
        }

        .advanced-color-picker__plane {
            position: relative;
            height: 150px;
            overflow: hidden;
            border-radius: 6px;
            background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, hsl(0, 100%, 50%));
            cursor: crosshair;
        }

        .advanced-color-picker__cursor {
            position: absolute;
            top: 0;
            left: 100%;
            width: 14px;
            height: 14px;
            box-sizing: border-box;
            border: 2px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 0 1px rgba(12, 24, 35, 0.65);
            pointer-events: none;
            transform: translate(-50%, -50%);
        }

        .advanced-color-picker__hue {
            width: 100%;
            height: 12px;
            margin: 12px 0 10px;
            appearance: none;
            border-radius: 999px;
            outline: none;
            background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            cursor: pointer;
        }

        .advanced-color-picker__hue::-webkit-slider-thumb {
            width: 15px;
            height: 15px;
            appearance: none;
            border: 2px solid #ffffff;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 1px 5px rgba(16, 35, 51, 0.42);
        }

        .advanced-color-picker__hue::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 1px 5px rgba(16, 35, 51, 0.42);
        }

        .advanced-color-picker__hex {
            display: flex;
            align-items: center;
            gap: 5px;
            height: 34px;
            padding: 0 9px;
            border: 1px solid #dbe5ee;
            border-radius: 6px;
            color: #7b8b9a;
            background: #f8fafc;
            font-family: Consolas, "SFMono-Regular", monospace;
            font-size: 12px;
        }

        .advanced-color-picker__hex input {
            min-width: 0;
            flex: 1;
            border: 0;
            outline: 0;
            color: #253a4d;
            background: transparent;
            font: inherit;
            text-transform: uppercase;
        }

        .advanced-color-picker__presets {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 7px;
            margin-top: 11px;
        }

        .advanced-color-picker__presets button {
            width: 22px;
            height: 22px;
            padding: 0;
            border: 1px solid rgba(28, 44, 59, 0.22);
            border-radius: 5px !important;
            cursor: pointer;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
        }

        .advanced-color-picker__presets button:hover {
            border-color: #2f80ed !important;
            transform: translateY(-1px);
        }

        .dark .advanced-color-picker__trigger {
            color: #aabccc;
        }

        .dark .advanced-color-picker__panel {
            border-color: #35495a;
            background: #172532;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
        }

        .dark .advanced-color-picker__hex {
            border-color: #35495a;
            color: #9fb1c2;
            background: #101b25;
        }

        .dark .advanced-color-picker__hex input {
            color: #e1ebf4;
        }

        .group-notice-overlay {
            position: fixed;
            z-index: 99999;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(16, 31, 40, 0.64);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .group-notice-dialog {
            width: min(780px, 100%);
            max-height: calc(100dvh - 48px);
            overflow: auto;
            border: 1px solid rgba(210, 222, 227, 0.95);
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 28px 80px rgba(7, 20, 28, 0.32);
        }

        .group-notice-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
            padding: 32px 34px 26px;
            border-bottom: 1px solid #e2ebee;
        }

        .group-notice-header h2 {
            margin: 0;
            color: #10242d;
            font-size: 26px;
            font-weight: 750;
            line-height: 1.2;
            letter-spacing: -0.035em;
        }

        .group-notice-header p {
            max-width: 42ch;
            margin: 9px 0 0;
            color: #60707a;
            font-size: 15px;
            line-height: 1.65;
        }

        .group-notice-close {
            display: grid;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            place-items: center;
            padding: 0 0 3px;
            border: 1px solid #d7e1e5;
            border-radius: 10px;
            color: #60707a;
            background: #ffffff;
            font-family: inherit;
            font-size: 28px;
            font-weight: 300;
            line-height: 1;
            cursor: pointer;
            transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
        }

        .group-notice-close:hover { border-color: #9aafb8; color: #10242d; background: #f5f8f9; }
        .group-notice-close:active { transform: scale(0.96); }
        .group-notice-close:focus-visible, .group-notice-footer button:focus-visible { outline: 3px solid color-mix(in srgb, var(--p) 30%, transparent); outline-offset: 3px; }

        .group-notice-qr-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            padding: 26px 34px 30px;
        }

        .group-notice-qr-card {
            --group-notice-channel: #168b59;
            min-width: 0;
            padding: 18px;
            border: 1px solid color-mix(in srgb, var(--group-notice-channel) 27%, #d7e1e5);
            border-radius: 14px;
            background: color-mix(in srgb, var(--group-notice-channel) 5%, #ffffff);
            text-align: left;
        }

        .group-notice-qr-card--qq { --group-notice-channel: #227fa5; }

        .group-notice-channel {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 16px;
        }

        .group-notice-channel-mark {
            display: grid;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            place-items: center;
            border: 1px solid color-mix(in srgb, var(--group-notice-channel) 27%, #d7e1e5);
            border-radius: 10px;
            background: #ffffff;
            box-shadow: 0 5px 12px rgba(16, 36, 45, 0.07);
        }

        .group-notice-channel-mark img { width: 21px; height: 21px; }

        .group-notice-channel p {
            margin: 0;
            color: #10242d;
            font-size: 15px;
            font-weight: 750;
            line-height: 1.2;
        }

        .group-notice-channel span + div span {
            display: block;
            margin-top: 3px;
            color: #60707a;
            font-size: 13px;
            line-height: 1.2;
        }

        .group-notice-qr-frame {
            display: grid;
            aspect-ratio: 1;
            place-items: center;
            padding: 16px;
            overflow: hidden;
            border-radius: 12px;
            background: color-mix(in srgb, var(--group-notice-channel) 9%, #f5f8f9);
        }

        .group-notice-qr-frame img {
            display: block;
            width: min(100%, 196px);
            aspect-ratio: 1;
            height: auto;
            padding: 10px;
            border: 1px solid rgba(215, 225, 229, 0.78);
            border-radius: 10px;
            background: #ffffff;
            box-shadow: 0 10px 22px rgba(16, 36, 45, 0.1);
            object-fit: cover;
            object-position: center 52%;
        }

        .group-notice-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            min-height: 74px;
            padding: 16px 34px;
            border-top: 1px solid #e2ebee;
        }

        .group-notice-footer button {
            min-height: 40px;
            padding: 8px 14px;
            border: 1px solid transparent;
            border-radius: 10px;
            color: #60707a;
            background: transparent;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
        }

        .group-notice-footer button:hover { color: #10242d; background: #f1f6f7; }
        .group-notice-footer button:active { transform: scale(0.98); }

        .group-notice-footer [data-group-notice-skip] {
            border-color: color-mix(in srgb, var(--p) 32%, #d7e1e5);
            color: color-mix(in srgb, var(--p) 82%, #10242d);
            background: color-mix(in srgb, var(--p) 10%, #ffffff);
        }

        .group-notice-footer [data-group-notice-skip]:hover { border-color: var(--p); color: color-mix(in srgb, var(--p) 88%, #10242d); background: color-mix(in srgb, var(--p) 16%, #ffffff); }

        .dark .group-notice-overlay { background: rgba(4, 12, 17, 0.74); }
        .dark .group-notice-dialog { border-color: #30434b; background: #162126; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42); }
        .dark .group-notice-header, .dark .group-notice-footer { border-color: #30434b; }
        .dark .group-notice-header h2, .dark .group-notice-channel p { color: #edf5f6; }
        .dark .group-notice-header p, .dark .group-notice-channel span + div span { color: #9aabb2; }
        .dark .group-notice-close { border-color: #3a5059; color: #a9bbc1; background: #1b292f; }
        .dark .group-notice-close:hover { border-color: #66808a; color: #edf5f6; background: #24353c; }
        .dark .group-notice-qr-card { border-color: color-mix(in srgb, var(--group-notice-channel) 38%, #30434b); background: color-mix(in srgb, var(--group-notice-channel) 11%, #162126); }
        .dark .group-notice-channel-mark { border-color: color-mix(in srgb, var(--group-notice-channel) 42%, #3a5059); background: #1b292f; box-shadow: none; }
        .dark .group-notice-qr-frame { background: color-mix(in srgb, var(--group-notice-channel) 15%, #101a1f); }
        .dark .group-notice-qr-frame img { border-color: #3a5059; }
        .dark .group-notice-footer button { color: #a9bbc1; }
        .dark .group-notice-footer button:hover { color: #edf5f6; background: #24353c; }
        .dark .group-notice-footer [data-group-notice-skip] { border-color: color-mix(in srgb, var(--p) 48%, #3a5059); color: color-mix(in srgb, var(--p) 68%, #edf5f6); background: color-mix(in srgb, var(--p) 17%, #162126); }
        .dark .group-notice-footer [data-group-notice-skip]:hover { border-color: color-mix(in srgb, var(--p) 74%, #66808a); background: color-mix(in srgb, var(--p) 25%, #162126); }

        @media (max-width: 620px) {
            .group-notice-overlay { align-items: flex-start; overflow: auto; padding: 16px; }
            .group-notice-dialog { max-height: none; margin: auto 0; border-radius: 14px; }
            .group-notice-header { gap: 16px; padding: 24px 22px 20px; }
            .group-notice-header h2 { font-size: 23px; }
            .group-notice-header p { font-size: 14px; }
            .group-notice-qr-list { grid-template-columns: 1fr; gap: 14px; padding: 20px 22px 24px; }
            .group-notice-qr-card { padding: 16px; }
            .group-notice-qr-frame { max-height: 270px; }
            .group-notice-footer { justify-content: stretch; padding: 14px 22px; }
            .group-notice-footer button { flex: 1; padding-right: 8px; padding-left: 8px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .group-notice-close, .group-notice-footer button { transition: none; }
        }
        .reference-dropzone--active {
            border-color: #a855f7 !important;
            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
        }

        /* Recharge page: a compact purchase surface that follows the active theme. */
        .recharge-page { background: color-mix(in srgb, var(--p5) 38%, #f8fafc) !important; }
        .recharge-layout { max-width: 1160px !important; }

        .recharge-heading {
            align-items: center !important;
            min-height: 72px;
            margin-bottom: 20px !important;
            padding-bottom: 18px !important;
            border-color: color-mix(in srgb, var(--p) 16%, #d8e0e5) !important;
        }

        .recharge-heading__copy h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
        .recharge-heading__copy p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }

        .recharge-heading > div:first-child > div:first-child,
        .recharge-redeem > div:first-child {
            border: 1px solid color-mix(in srgb, var(--p) 26%, transparent);
            background: var(--p1) !important;
            color: var(--p) !important;
        }

        .recharge-heading > div:first-child > div:first-child svg,
        .recharge-redeem > div:first-child svg { color: var(--p) !important; }

        .recharge-heading > div:last-child {
            border: 1px solid color-mix(in srgb, var(--p) 28%, transparent) !important;
            border-radius: 10px !important;
            color: var(--p) !important;
            background: var(--p1) !important;
            box-shadow: none !important;
        }

        .recharge-heading > div:last-child .text-white\/80 { color: color-mix(in srgb, var(--p) 78%, #52606a) !important; }
        .recharge-heading > div:last-child svg { color: var(--p) !important; }

        .recharge-plans { gap: 14px !important; margin-bottom: 18px !important; }

        .recharge-plan {
            min-height: 216px;
            padding: 20px !important;
            align-items: stretch !important;
            border-color: color-mix(in srgb, var(--p) 15%, #d8e0e5) !important;
            border-radius: 12px !important;
            text-align: left !important;
            background: color-mix(in srgb, var(--p5) 18%, #ffffff) !important;
            box-shadow: 0 2px 7px rgb(15 23 42 / 0.035) !important;
        }

        .recharge-plan:hover {
            border-color: color-mix(in srgb, var(--p) 48%, #d8e0e5) !important;
            box-shadow: 0 12px 24px color-mix(in srgb, var(--p) 12%, transparent) !important;
        }

        .recharge-plan--featured,
        .recharge-plan--enterprise { background: color-mix(in srgb, var(--p1) 52%, #ffffff) !important; }
        .recharge-plan::before { height: 2px; background: color-mix(in srgb, var(--p) 24%, #d1d5db); }
        .recharge-plan--featured::before, .recharge-plan--enterprise::before { background: var(--p); }
        .recharge-plan::after { display: none; }

        .recharge-plan > span:first-child {
            top: 14px !important;
            right: 14px !important;
            border: 1px solid color-mix(in srgb, var(--p) 24%, transparent);
            color: var(--p) !important;
            background: var(--p1) !important;
        }

        .recharge-plan__label {
            display: block;
            margin: 1px 0 14px;
            color: #65717a;
            font-size: 12px;
            font-weight: 700;
        }

        .recharge-plan__points {
            display: flex;
            align-items: baseline;
            gap: 7px;
            font-size: 31px;
            font-weight: 760;
            letter-spacing: 0;
            line-height: 1;
        }

        .recharge-plan__points small { font-size: 12px; font-weight: 500; }

        .recharge-plan__price {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-top: auto;
            padding-top: 15px;
            border-top: 1px solid color-mix(in srgb, var(--p) 13%, #d8e0e5);
        }

        .recharge-plan__price small { font-size: 12px; }
        .recharge-plan__price strong { font-size: 18px; font-weight: 750; }

        .recharge-plan__benefit {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 9px;
            color: color-mix(in srgb, var(--p) 68%, #65717a) !important;
            font-size: 11px;
            line-height: 1.3;
        }

        .recharge-plan__benefit svg { color: var(--p); }

        .recharge-redeem {
            grid-template-columns: 36px minmax(108px, auto) minmax(0, 1fr) auto !important;
            gap: 11px !important;
            min-height: 68px;
            padding: 10px 13px !important;
            border-color: color-mix(in srgb, var(--p) 16%, #d8e0e5) !important;
            border-radius: 12px !important;
            background: color-mix(in srgb, var(--p5) 24%, #ffffff) !important;
        }

        .recharge-redeem__copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
        .recharge-redeem__copy strong { font-size: 13px; line-height: 1.25; }
        .recharge-redeem__copy span { font-size: 11px; line-height: 1.25; white-space: nowrap; }

        .recharge-redeem input {
            border-color: color-mix(in srgb, var(--p) 14%, #d8e0e5) !important;
            border-radius: 8px !important;
            background: #ffffff !important;
        }

        .recharge-redeem input:focus {
            border-color: var(--p) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 15%, transparent) !important;
        }

        .recharge-redeem button {
            border-radius: 8px !important;
            background: var(--p) !important;
            box-shadow: none !important;
        }

        .recharge-ledger {
            border-color: color-mix(in srgb, var(--p) 16%, #d8e0e5) !important;
            border-radius: 12px !important;
            box-shadow: 0 2px 7px rgb(15 23 42 / 0.035) !important;
        }

        .recharge-ledger__header {
            border-color: color-mix(in srgb, var(--p) 14%, #d8e0e5) !important;
            background: color-mix(in srgb, var(--p5) 45%, #ffffff) !important;
        }

        .dark .recharge-page { background: color-mix(in srgb, var(--p) 7%, #111827) !important; }
        .dark .recharge-heading { border-color: color-mix(in srgb, var(--p) 23%, #374151) !important; }
        .dark .recharge-heading > div:last-child,
        .dark .recharge-redeem { border-color: color-mix(in srgb, var(--p) 26%, #374151) !important; background: color-mix(in srgb, var(--p) 12%, #1f2937) !important; }
        .dark .recharge-plan { border-color: color-mix(in srgb, var(--p) 18%, #374151) !important; background: #111827 !important; box-shadow: none !important; }
        .dark .recharge-plan--featured,
        .dark .recharge-plan--enterprise { background: color-mix(in srgb, var(--p) 14%, #111827) !important; }
        .dark .recharge-plan__label { color: #aab4bd; }
        .dark .recharge-plan__price { border-color: color-mix(in srgb, var(--p) 18%, #374151); }
        .dark .recharge-redeem input { border-color: #374151 !important; background: #111827 !important; }
        .dark .recharge-ledger, .dark .recharge-ledger__header { border-color: color-mix(in srgb, var(--p) 18%, #374151) !important; background: #111827 !important; box-shadow: none !important; }

        @media (max-width: 767px) {
            .recharge-heading { align-items: flex-start !important; flex-direction: column; }
            .recharge-heading > div:last-child { align-self: stretch; justify-content: center; }
            .recharge-plan { min-height: 194px; }
            .recharge-redeem { grid-template-columns: 36px minmax(0, 1fr) !important; }
            .recharge-redeem__copy { display: none; }
            .recharge-redeem button { grid-column: 1 / -1; }
        }