/* * Qiulinyun Gateway design system foundation. * Tailwind handles page layout; this file defines shared product tokens and reusable component classes. * * Theme system: [data-theme="light|warm|dark"] on . * Default (warm) is applied via :root; light and dark override via data-theme. */ /* ── Warm (default, recommended) ─────────────────────────── */ /* 参考 ChatGPT warm：sidebar 暖石色，比主舞台深一阶 */ :root, [data-theme="warm"] { --ui-bg: #F3ECE2; --ui-bg-soft: #ECE1D4; --ui-surface: #FBF7F2; --ui-surface-soft: rgba(251, 247, 242, 0.92); --ui-surface-muted: #F1E8DD; --ui-sidebar-bg: #E7DACE; --ui-sidebar-bg-deep: #DDCEBF; --ui-sidebar-border: #D8C8B8; --ui-border: #DED1C3; --ui-border-strong: #CABAA9; --ui-text: #2F261F; --ui-text-muted: #66584D; --ui-text-soft: #9A8A7A; --ui-accent: #13233E; --ui-accent-hover: #1B2F53; --ui-accent-contrast: #FFFFFF; --ui-accent-soft: #E9EDF7; --ui-accent-border: #C9D2E8; --ui-sidebar-surface: rgba(251, 247, 242, 0.62); --ui-sidebar-text: var(--ui-text); --ui-sidebar-text-muted: var(--ui-text-muted); --ui-sidebar-hover: var(--ui-surface-muted); --ui-sidebar-active-bg: var(--ui-accent); --ui-sidebar-active-text: var(--ui-accent-contrast); --ui-composer-bg: var(--ui-surface); --ui-composer-border: var(--ui-border); --ui-bubble-user-bg: var(--ui-accent); --ui-bubble-user-text: var(--ui-accent-contrast); --ui-bubble-ai-bg: var(--ui-surface-muted); --ui-bubble-ai-text: var(--ui-text); --ui-bubble-ai-border: var(--ui-border); --ui-code-bg: var(--ui-surface-muted); --ui-code-border: var(--ui-border); --ui-quote-bg: var(--ui-surface-muted); --ui-quote-border: var(--ui-border-strong); --ui-success-soft: #dcfce7; --ui-success-text: #166534; --ui-warning-soft: #fef3c7; --ui-warning-text: #92400e; --ui-danger-soft: #ffe4e6; --ui-danger-text: #be123c; --ui-radius-xs: 0.5rem; --ui-radius-sm: 0.625rem; --ui-radius-md: 0.75rem; --ui-radius-lg: 1rem; --ui-shadow-sm: 0 1px 3px rgba(47, 38, 31, 0.08), 0 1px 2px rgba(47, 38, 31, 0.04); --ui-shadow-md: 0 4px 12px rgba(47, 38, 31, 0.1), 0 2px 4px rgba(47, 38, 31, 0.06); --ui-shadow-lg: 0 12px 32px rgba(47, 38, 31, 0.14); } /* ── Light ───────────────────────────────────────────────── */ /* Sidebar 浅灰，只比主舞台深半阶 */ [data-theme="light"] { --ui-bg: #F5F7FA; --ui-bg-soft: #EEF2F6; --ui-surface: #FFFFFF; --ui-surface-soft: rgba(255, 255, 255, 0.9); --ui-surface-muted: #EEF2F6; --ui-sidebar-bg: #E9EDF2; --ui-sidebar-bg-deep: #E1E7EE; --ui-sidebar-border: #DCE3EB; --ui-border: #E2E8F0; --ui-border-strong: #CBD5E1; --ui-text: #111827; --ui-text-muted: #4B5565; --ui-text-soft: #8A94A6; --ui-accent: #13233E; --ui-accent-hover: #1A2F52; --ui-accent-contrast: #FFFFFF; --ui-accent-soft: #EEF3FF; --ui-accent-border: #CBD7FF; --ui-sidebar-surface: rgba(255, 255, 255, 0.74); --ui-sidebar-text: var(--ui-text); --ui-sidebar-text-muted: var(--ui-text-muted); --ui-sidebar-hover: var(--ui-surface-muted); --ui-sidebar-active-bg: var(--ui-accent); --ui-sidebar-active-text: var(--ui-accent-contrast); --ui-composer-bg: var(--ui-surface); --ui-composer-border: var(--ui-border); --ui-bubble-user-bg: var(--ui-accent); --ui-bubble-user-text: var(--ui-accent-contrast); --ui-bubble-ai-bg: var(--ui-surface-muted); --ui-bubble-ai-text: var(--ui-text); --ui-bubble-ai-border: var(--ui-border); --ui-code-bg: var(--ui-bg-soft); --ui-code-border: var(--ui-border); --ui-quote-bg: var(--ui-surface-muted); --ui-quote-border: var(--ui-border-strong); --ui-success-soft: #d3f9d8; --ui-success-text: #2b8a3e; --ui-warning-soft: #fff3bf; --ui-warning-text: #e67700; --ui-danger-soft: #ffe3e3; --ui-danger-text: #c92a2a; --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1); } /* ── Dark ────────────────────────────────────────────────── */ /* 整体暖深色，sidebar 再深一阶，保持和 warm 主题同系 */ [data-theme="dark"] { --ui-bg: #0F1115; --ui-bg-soft: #151922; --ui-surface: #171C24; --ui-surface-soft: rgba(23, 28, 36, 0.92); --ui-surface-muted: #1E2530; --ui-sidebar-bg: #0B0E13; --ui-sidebar-bg-deep: #080B10; --ui-sidebar-border: #1F2631; --ui-border: #2B3441; --ui-border-strong: #3B4658; --ui-text: #F3F5F7; --ui-text-muted: #C1C8D2; --ui-text-soft: #7E8794; --ui-accent: #7C93FF; --ui-accent-hover: #94A8FF; --ui-accent-contrast: #0B1020; --ui-accent-soft: rgba(124, 147, 255, 0.12); --ui-accent-border: rgba(124, 147, 255, 0.32); --ui-sidebar-surface: rgba(23, 28, 36, 0.72); --ui-sidebar-text: var(--ui-text); --ui-sidebar-text-muted: var(--ui-text-muted); --ui-sidebar-hover: var(--ui-surface-muted); --ui-sidebar-active-bg: var(--ui-accent); --ui-sidebar-active-text: var(--ui-accent-contrast); --ui-composer-bg: var(--ui-surface); --ui-composer-border: var(--ui-border); --ui-bubble-user-bg: var(--ui-accent); --ui-bubble-user-text: var(--ui-accent-contrast); --ui-bubble-ai-bg: var(--ui-surface-muted); --ui-bubble-ai-text: var(--ui-text); --ui-bubble-ai-border: var(--ui-border); --ui-code-bg: var(--ui-bg-soft); --ui-code-border: var(--ui-border); --ui-quote-bg: var(--ui-surface-muted); --ui-quote-border: var(--ui-border-strong); --ui-success-soft: rgba(74, 222, 128, 0.14); --ui-success-text: #4ade80; --ui-warning-soft: rgba(251, 191, 36, 0.14); --ui-warning-text: #fbbf24; --ui-danger-soft: rgba(248, 113, 113, 0.14); --ui-danger-text: #f87171; --ui-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.32); --ui-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42); --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52); } *, *::before, *::after { box-sizing: border-box; } html, body { min-height: 100%; } body { background: var(--ui-bg); color: var(--ui-text); } a { color: inherit; text-decoration: none; } summary { list-style: none; } summary::-webkit-details-marker { display: none; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="datetime-local"], select, textarea, .ui-input, .ui-select, .ui-textarea { width: 100%; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-text); padding: 0.55rem 0.75rem; font-size: 0.85rem; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } textarea, .ui-textarea { min-height: 5.5rem; resize: vertical; } .ui-composer-textarea { min-height: 5.5rem; resize: none; } input:focus, select:focus, textarea:focus, .ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: rgba(51, 65, 85, 0.55); box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18); } label, .ui-label { display: inline-block; margin-bottom: 0.3rem; margin-top: 0.2rem; color: var(--ui-text-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; } button, input[type="submit"] { cursor: pointer; } /* 裸 submit（没有额外 class 的 form submit）自动获得按钮样式 */ input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--ui-radius-sm); padding: 0.55rem 1.25rem; font-size: 0.85rem; font-weight: 600; line-height: 1.4; color: #fff; background: var(--ui-text); transition: background-color 0.16s ease, transform 0.1s ease; } input[type="submit"]:hover { opacity: 0.88; } input[type="submit"]:active { transform: scale(0.98); } .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid transparent; border-radius: 999px; padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 700; line-height: 1rem; transition: transform 0.12s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .ui-button:hover { transform: translateY(-1px); } .ui-button--sm { padding: 0.58rem 0.82rem; font-size: 0.75rem; } .ui-button--md { padding: 0.78rem 1.1rem; } .ui-button--block { width: 100%; } .ui-button--primary { background: var(--ui-accent); border-color: var(--ui-accent); box-shadow: var(--ui-shadow-sm); color: #fff; } .ui-button--primary:hover { background: #1e293b; border-color: #1e293b; } .ui-button--secondary { background: rgba(255, 255, 255, 0.96); border-color: var(--ui-border-strong); color: var(--ui-text); } .ui-button--secondary:hover { background: #fff; border-color: rgba(100, 116, 139, 0.35); } .ui-button--soft { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); color: var(--ui-text); } .ui-button--soft:hover { background: var(--ui-surface-muted); } .ui-button--ghost { background: transparent; border-color: transparent; color: var(--ui-text-muted); } .ui-button--ghost:hover { background: rgba(255, 255, 255, 0.72); color: var(--ui-text); } .ui-card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .ui-card--soft { background: var(--ui-surface-soft); backdrop-filter: blur(18px); } .ui-card--panel { border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-md); } .ui-card--muted { background: var(--ui-surface-muted); } .ui-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .ui-page-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-text-soft); } .ui-page-title { margin: 0.25rem 0 0; font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } .ui-page-subtitle { margin-top: 0.4rem; max-width: 46rem; font-size: 0.85rem; line-height: 1.55; color: var(--ui-text-muted); } .ui-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ui-topbar-actions { display: inline-flex; align-items: center; gap: 0.5rem; } .ui-segment { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.25rem; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-sm); } .ui-segment__item { display: inline-flex; min-width: 3rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; padding: 0.5rem 0.7rem; font-size: 0.75rem; font-weight: 700; color: var(--ui-text-muted); transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .ui-segment__item--active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; } .ui-segment__item--inactive:hover { background: rgba(255, 255, 255, 0.92); color: var(--ui-text); } .ui-account-trigger, .ui-menu-link, .ui-nav-link, .ui-tab { transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .ui-account-trigger { display: inline-flex; align-items: center; gap: 0.55rem; max-width: min(24rem, calc(100vw - 7rem)); border: 1px solid var(--ui-border); border-radius: 999px; background: rgba(255, 255, 255, 0.84); box-shadow: var(--ui-shadow-sm); padding: 0.65rem 0.95rem; font-size: 0.75rem; font-weight: 700; color: var(--ui-text); } .ui-account-popover { position: relative; z-index: 50; min-width: 0; } .ui-account-trigger__label { flex: 0 0 auto; } .ui-account-trigger__value { min-width: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-muted); } .ui-account-trigger:hover { background: #fff; } .ui-menu { position: absolute; z-index: 80; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.96); padding: 0.5rem; box-shadow: var(--ui-shadow-lg); backdrop-filter: blur(20px); } .ui-menu__account-email { overflow-wrap: anywhere; word-break: break-word; font-size: 0.9rem; font-weight: 600; color: var(--ui-text); } .ui-menu-link { display: block; border-radius: 0.9rem; padding: 0.7rem 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--ui-text-muted); } .ui-menu-link:hover { background: rgba(248, 250, 252, 0.98); color: var(--ui-text); } .ui-sidebar-shell { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: rgba(255, 255, 255, 0.84); box-shadow: var(--ui-shadow-sm); backdrop-filter: blur(16px); } .ui-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; border-radius: 1rem; border: 1px solid transparent; padding: 0.8rem 0.95rem; font-size: 0.9rem; font-weight: 600; color: var(--ui-text-muted); position: relative; overflow: hidden; } .ui-nav-link__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-nav-link__badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.42rem; border: 1px solid rgba(251, 191, 36, 0.72); border-radius: 999px; background: #fff7ed; color: #92400e; font-size: 0.68rem; font-weight: 800; line-height: 1; } .ui-nav-link__badge--danger { border-color: rgba(251, 113, 133, 0.76); background: #fff1f2; color: #be123c; } .ui-nav-link:hover { background: rgba(255, 255, 255, 0.88); color: var(--ui-text); } .ui-nav-link--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; box-shadow: var(--ui-shadow-sm); } .ui-nav-link--active .ui-nav-link__badge { border-color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.22); color: currentColor; } .ui-nav-link--active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 999px; background: currentColor; opacity: 0; } .ui-tab { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ui-border); border-radius: 999px; padding: 0.6rem 0.95rem; font-size: 0.78rem; font-weight: 700; background: rgba(255, 255, 255, 0.84); color: var(--ui-text-muted); } .ui-tab:hover { background: #fff; color: var(--ui-text); } .ui-tab--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; } .ui-chip { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.72); padding: 0.5rem 0.78rem; font-size: 0.74rem; font-weight: 700; color: var(--ui-text-muted); } .ui-chip--outlined { border-color: var(--ui-border); background: rgba(255, 255, 255, 0.92); } .ui-empty-state { border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.68); padding: 2rem 1.5rem; text-align: center; } .ui-empty-state__title { font-size: 1rem; font-weight: 700; color: var(--ui-text); } .ui-empty-state__description { margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.65; color: var(--ui-text-muted); } .ui-flash { border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); padding: 0.95rem 1rem; font-size: 0.9rem; font-weight: 600; box-shadow: var(--ui-shadow-sm); } .ui-flash--notice { background: rgba(220, 252, 231, 0.86); border-color: rgba(134, 239, 172, 0.8); color: var(--ui-success-text); } .ui-flash--alert, .ui-flash--error { background: rgba(255, 228, 230, 0.9); border-color: rgba(253, 164, 175, 0.8); color: var(--ui-danger-text); } .ui-flash--default { background: rgba(255, 255, 255, 0.92); color: var(--ui-text); } .ui-badge { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid transparent; padding: 0.4rem 0.65rem; font-size: 0.72rem; font-weight: 700; line-height: 1; } .ui-badge--success { background: var(--ui-success-soft); border-color: rgba(134, 239, 172, 0.8); color: var(--ui-success-text); } .ui-badge--warning { background: var(--ui-warning-soft); border-color: rgba(253, 224, 71, 0.75); color: var(--ui-warning-text); } .ui-badge--danger { background: var(--ui-danger-soft); border-color: rgba(253, 164, 175, 0.8); color: var(--ui-danger-text); } .ui-badge--neutral { background: rgba(241, 245, 249, 0.9); border-color: rgba(203, 213, 225, 0.9); color: #475569; } .ui-table-wrap { overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.94); box-shadow: var(--ui-shadow-sm); } .ui-table-wrap--scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.94); box-shadow: var(--ui-shadow-sm); } /* ── Admin form helpers ──────────────────────────────────── */ .ui-field-hint { margin-top: 0.3rem; font-size: 0.72rem; line-height: 1.45; color: var(--ui-text-soft); } .ui-form-section { padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid var(--ui-border); } .ui-form-section__title { font-size: 0.82rem; font-weight: 700; color: var(--ui-text); margin-bottom: 0.2rem; } .ui-form-section__desc { font-size: 0.75rem; color: var(--ui-text-muted); line-height: 1.5; margin-bottom: 0.75rem; } table, .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; } th { background: rgba(248, 250, 252, 0.95); color: var(--ui-text-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; } th, td { border-bottom: 1px solid var(--ui-border); padding: 0.7rem 0.85rem; text-align: left; vertical-align: middle; font-size: 0.83rem; line-height: 1.45; } tbody tr:last-child td { border-bottom: none; } pre, code { border-radius: 0.9rem; } pre { background: rgba(248, 250, 252, 0.98); border: 1px solid var(--ui-border); color: var(--ui-text); font-size: 0.78rem; line-height: 1.45; padding: 0.95rem; overflow-x: auto; } .ui-skeleton { position: relative; overflow: hidden; border-radius: 999px; background: rgba(226, 232, 240, 0.95); } .ui-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: ui-shimmer 1.5s infinite; } @keyframes ui-shimmer { 100% { transform: translateX(100%); } } @media (max-width: 1024px) { .ui-page-title { font-size: 1.9rem; } } /* ── Theme-aware overrides for dark mode ─────────────────── */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="url"], [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .ui-input, [data-theme="dark"] .ui-select, [data-theme="dark"] .ui-textarea { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text); box-shadow: none; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); } [data-theme="dark"] th { background: var(--ui-surface-muted); color: var(--ui-text-muted); } [data-theme="dark"] th, [data-theme="dark"] td { border-color: var(--ui-border); } [data-theme="dark"] pre { background: var(--ui-code-bg); border-color: var(--ui-code-border); color: var(--ui-text); } [data-theme="dark"] .ui-button--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #1e1e2e; } [data-theme="dark"] .ui-button--primary:hover { background: #b4d0fb; border-color: #b4d0fb; } [data-theme="dark"] .ui-button--secondary { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text); } [data-theme="dark"] .ui-button--secondary:hover { background: var(--ui-surface-muted); border-color: var(--ui-text-soft); } [data-theme="dark"] .ui-segment { background: var(--ui-surface); border-color: var(--ui-border); } [data-theme="dark"] .ui-segment__item--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #1e1e2e; } [data-theme="dark"] .ui-segment__item--inactive:hover { background: var(--ui-sidebar-hover); color: var(--ui-text); } [data-theme="dark"] .ui-menu { background: var(--ui-surface); border-color: var(--ui-border); } [data-theme="dark"] .ui-menu-link:hover { background: var(--ui-sidebar-hover); color: var(--ui-text); } [data-theme="dark"] .ui-account-trigger { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); } [data-theme="dark"] .ui-account-trigger:hover { background: var(--ui-surface-muted); } [data-theme="dark"] .ui-empty-state { border-color: var(--ui-border-strong); background: var(--ui-surface-soft); } [data-theme="dark"] .ui-flash--notice { background: var(--ui-success-soft); border-color: rgba(166, 227, 161, 0.3); color: var(--ui-success-text); } [data-theme="dark"] .ui-flash--alert, [data-theme="dark"] .ui-flash--error { background: var(--ui-danger-soft); border-color: rgba(243, 139, 168, 0.3); color: var(--ui-danger-text); } [data-theme="dark"] .ui-badge--neutral { background: var(--ui-surface-muted); border-color: var(--ui-border); color: var(--ui-text-muted); } /* ── Theme switcher ──────────────────────────────────────── */ .ui-theme-switcher { display: inline-flex; align-items: center; gap: 0.2rem; border-radius: 999px; padding: 0.2rem; background: var(--ui-surface-soft); border: 1px solid var(--ui-border); } .ui-theme-switcher__btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 0.75rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .ui-theme-switcher__btn:hover { background: var(--ui-sidebar-hover); transform: scale(1.08); } .ui-theme-switcher__btn--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; box-shadow: var(--ui-shadow-sm); } [data-theme="dark"] .ui-theme-switcher__btn--active { color: #1e1e2e; } /* ── Console shell (logged-in non-workspace pages) ───────── */ .console-shell { background: radial-gradient(circle at top center, color-mix(in srgb, var(--ui-accent) 10%, transparent), transparent 32%), var(--ui-bg); color: var(--ui-text); } .console-topbar { background: color-mix(in srgb, var(--ui-surface) 88%, transparent) !important; border-bottom-color: var(--ui-border) !important; backdrop-filter: blur(18px); } .console-brand__label { color: var(--ui-text) !important; } .console-mobile-nav { background: color-mix(in srgb, var(--ui-surface) 84%, transparent) !important; border-bottom-color: var(--ui-border) !important; } .console-sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--ui-sidebar-bg) 94%, transparent), color-mix(in srgb, var(--ui-sidebar-bg-deep) 90%, transparent)) !important; border-right-color: var(--ui-sidebar-border) !important; position: relative; padding-bottom: 7.25rem; } .console-sidebar-card { background: color-mix(in srgb, var(--ui-surface) 86%, transparent) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow-sm); } .console-sidebar-card__title { color: var(--ui-text) !important; } .console-sidebar-card__body { color: var(--ui-text-muted) !important; } .console-sidebar__upper { flex: 1 1 auto; min-height: 0; } .console-sidebar__footer { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; margin-top: 0; border-top: 1px solid var(--ui-sidebar-border); padding-top: 0.9rem; } .console-sidebar__toolbar { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.55rem; } .console-sidebar__toolbar .ui-theme-switcher, .console-sidebar__toolbar .ui-segment { flex: 0 0 auto; align-self: flex-start; } .console-main { background: transparent; } .console-content { color: var(--ui-text); } .console-dashboard { color: var(--ui-text); } .console-dashboard-hero { box-shadow: var(--ui-shadow-md); } .console-dashboard-section-kicker { color: var(--ui-text-soft); } .console-dashboard-action { background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow-sm); } .console-dashboard-action:hover { transform: translateY(-1px); } .console-dashboard-action__icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .console-dashboard-overview { border-radius: 1rem; } .console-dashboard-overview__title, .console-dashboard-overview__description, .console-dashboard-overview__org-name, .console-dashboard-overview__admin, .console-dashboard-stat__label, .console-dashboard-stat__value, .console-dashboard-action__title, .console-dashboard-action__body, .console-dashboard-action__icon, .console-studio-feature-card__title, .console-studio-feature-card__description, .console-studio-feature-card__arrow, .console-studio-feature-card__badge { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .console-dashboard-stat { border-radius: 0.85rem; } .console-dashboard-stat__label { color: rgba(226, 232, 240, 0.78); } .console-dashboard-stat__value { color: #fff; } .console-dashboard-action__title { color: var(--ui-text); } .console-dashboard-action__body { color: var(--ui-text-muted); } .console-dashboard-action__icon { color: var(--ui-text); border: 1px solid transparent; } .console-studio-feature-card { isolation: isolate; } .console-studio-feature-card__cover { height: 24%; min-height: 5rem; max-height: 6.25rem; pointer-events: none; } .console-studio-feature-card__title { color: var(--ui-text) !important; } .console-studio-feature-card__description { color: var(--ui-text-muted) !important; } .console-studio-feature-card__arrow { color: var(--ui-text-soft) !important; } .console-studio-feature-card:hover .console-studio-feature-card__arrow { color: var(--ui-text) !important; } .console-studio-feature-card__badge { border-color: transparent !important; } .console-studio-feature-card--image .console-studio-feature-card__badge { background: #FFF2D9 !important; color: #B7791F !important; } .console-studio-feature-card--video .console-studio-feature-card__badge { background: #E7EEFF !important; color: #4C63C7 !important; } .console-studio-feature-card--batch .console-studio-feature-card__badge { background: #EDEBFF !important; color: #5B55C7 !important; } .console-studio-feature-card--asset .console-studio-feature-card__badge { background: #E2F5EF !important; color: #2E8C7D !important; } .console-studio-feature-card--template .console-studio-feature-card__badge { background: #F0E8DE !important; color: #7A6654 !important; } .console-studio-feature-card--image .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(231, 187, 99, 0.18) 0%, rgba(255, 255, 255, 0) 100%); } .console-studio-feature-card--video .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(124, 147, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%); } .console-studio-feature-card--batch .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(129, 118, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%); } .console-studio-feature-card--asset .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(113, 210, 195, 0.16) 0%, rgba(255, 255, 255, 0) 100%); } .console-studio-feature-card--template .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(192, 180, 160, 0.14) 0%, rgba(255, 255, 255, 0) 100%); } .console-dashboard-panel { background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow-sm); } .console-dashboard-row:hover { background: color-mix(in srgb, var(--ui-surface-muted) 88%, transparent) !important; } .console-dashboard-subcard { border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface-muted) 92%, transparent); box-shadow: var(--ui-shadow-sm); } .console-dashboard-subcard:hover { border-color: var(--ui-border-strong); background: color-mix(in srgb, var(--ui-surface) 98%, transparent); box-shadow: var(--ui-shadow-md); } .console-dashboard .bg-white, .console-dashboard .bg-white\/60, .console-dashboard .bg-white\/78 { background: color-mix(in srgb, var(--ui-surface) 94%, transparent) !important; } .console-dashboard .bg-slate-50, .console-dashboard .bg-slate-50\/50, .console-dashboard .bg-slate-50\/60, .console-dashboard .bg-slate-100, .console-dashboard .bg-indigo-50, .console-dashboard .bg-amber-50, .console-dashboard .bg-emerald-50, .console-dashboard .bg-rose-50 { background: color-mix(in srgb, var(--ui-surface-muted) 92%, transparent) !important; } .console-dashboard .border-slate-200, .console-dashboard .border-slate-200\/60, .console-dashboard .border-slate-100 { border-color: var(--ui-border) !important; } .console-dashboard .text-slate-900, .console-dashboard .text-slate-800, .console-dashboard .text-slate-700 { color: var(--ui-text) !important; } .console-dashboard .text-slate-600, .console-dashboard .text-slate-500, .console-dashboard .text-slate-400 { color: var(--ui-text-muted) !important; } .console-dashboard .hover\:bg-slate-50\/60:hover { background: color-mix(in srgb, var(--ui-surface-muted) 92%, transparent) !important; } [data-theme="dark"] .console-shell { background: #141210; } [data-theme="dark"] .console-topbar { background: #1a1816 !important; border-bottom-color: #443e3a !important; } [data-theme="dark"] .console-mobile-nav { background: #1a1816 !important; border-bottom-color: #443e3a !important; } [data-theme="dark"] .console-sidebar { background: #0e0c0a !important; border-right-color: #262220 !important; } [data-theme="dark"] .console-sidebar__footer { border-top-color: #262220; } [data-theme="dark"] .console-sidebar-card { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-sidebar .ui-nav-link--active { background: #172132 !important; color: #F4F7FB !important; border-color: #2D3A51 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #7C93FF; } [data-theme="dark"] .console-sidebar .ui-nav-link--active:hover { background: #1A2940 !important; border-color: #31445E !important; } [data-theme="dark"] .console-sidebar .ui-nav-link:not(.ui-nav-link--active):hover { background: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .console-dashboard { color: #e7e5e4; } [data-theme="dark"] .console-dashboard-hero { background: #262220 !important; border: 1px solid #443e3a; } [data-theme="dark"] .console-dashboard-section-kicker { color: #7a7470; } [data-theme="dark"] .console-dashboard-action { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .console-dashboard-action:hover { border-color: #5a5450 !important; } [data-theme="dark"] .console-dashboard-action__icon { background: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action { background: #171C24 !important; border-color: #2B3441 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action:hover { background: #1E2530 !important; border-color: #3B4658 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__title { color: #F3F5F7 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__body { color: #C1C8D2 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__icon { background: #1E2530 !important; border-color: #2B3441 !important; } [data-theme="dark"] .console-dashboard-panel { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .console-dashboard-row:hover { background: #3a3532 !important; } [data-theme="dark"] .console-dashboard-subcard { border-color: #443e3a !important; background: #302b27 !important; } [data-theme="dark"] .console-dashboard-subcard:hover { border-color: #5a5450 !important; background: #3a3532 !important; } [data-theme="dark"] .console-dashboard .bg-white, [data-theme="dark"] .console-dashboard .bg-white\/60, [data-theme="dark"] .console-dashboard .bg-white\/78 { background: #302b27 !important; } [data-theme="dark"] .console-dashboard .bg-slate-50, [data-theme="dark"] .console-dashboard .bg-slate-50\/50, [data-theme="dark"] .console-dashboard .bg-slate-50\/60, [data-theme="dark"] .console-dashboard .bg-slate-100, [data-theme="dark"] .console-dashboard .bg-indigo-50, [data-theme="dark"] .console-dashboard .bg-amber-50, [data-theme="dark"] .console-dashboard .bg-emerald-50, [data-theme="dark"] .console-dashboard .bg-rose-50 { background: #262220 !important; } [data-theme="dark"] .console-dashboard .border-slate-200, [data-theme="dark"] .console-dashboard .border-slate-200\/60, [data-theme="dark"] .console-dashboard .border-slate-100 { border-color: #443e3a !important; } [data-theme="dark"] .console-dashboard .bg-slate-900 { background: #1a1816 !important; border-color: #443e3a !important; } [data-theme="dark"] .console-dashboard .text-slate-900, [data-theme="dark"] .console-dashboard .text-slate-800, [data-theme="dark"] .console-dashboard .text-slate-700 { color: #ebe9e8 !important; } [data-theme="dark"] .console-dashboard .text-slate-600, [data-theme="dark"] .console-dashboard .text-slate-500, [data-theme="dark"] .console-dashboard .text-slate-400 { color: #b0aaa5 !important; } [data-theme="dark"] .console-dashboard .hover\:bg-slate-50\/60:hover { background: #302b27 !important; } .console-page { color: var(--ui-text); } .console-page--home, .console-page--studio, .console-page--artifacts, .console-page--workflows, .console-dashboard { --console-page-surface: var(--ui-surface); --console-page-surface-muted: var(--ui-surface-muted); --console-page-border: var(--ui-border); --console-page-border-strong: var(--ui-border-strong); --console-page-shadow: var(--ui-shadow-sm); } [data-theme="warm"] .console-page--home, [data-theme="warm"] .console-page--studio, [data-theme="warm"] .console-page--artifacts, [data-theme="warm"] .console-page--workflows, [data-theme="warm"] .console-dashboard { --console-page-surface: #ffffff; --console-page-surface-muted: #f7f2ec; --console-page-border: #d5cab9; --console-page-border-strong: #c0b3a1; --console-page-shadow: 0 2px 8px rgba(104, 74, 40, 0.08); } [data-theme="warm"] .console-shell { background: radial-gradient(circle at top center, rgba(189, 138, 72, 0.08), transparent 24%), linear-gradient(180deg, #f4ece3 0%, #f2e8dd 100%); } [data-theme="light"] .console-sidebar .ui-nav-link--active { background: #E6EEF8 !important; border-color: #D5E0EE !important; color: #13233E !important; box-shadow: 0 1px 2px rgba(19, 35, 62, 0.08); } [data-theme="light"] .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #13233E; } [data-theme="light"] .console-sidebar .ui-nav-link--active:hover { background: #EDF3FB !important; border-color: #D5E0EE !important; } [data-theme="light"] .console-dashboard-overview { background: #FFFFFF; border: 1px solid #E2E8F0; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } [data-theme="light"] .console-dashboard-overview__org { background: #EEF2F6 !important; box-shadow: inset 0 0 0 1px #DCE3EB; } [data-theme="light"] .console-dashboard-overview__org-name { color: #4B5565 !important; } [data-theme="light"] .console-dashboard-overview__title { color: #111827 !important; } [data-theme="light"] .console-dashboard-overview__description, [data-theme="light"] .console-dashboard-overview__admin { color: #4B5565 !important; } [data-theme="light"] .console-dashboard-overview__admin { background: #F7F9FC; border-color: #E2E8F0 !important; } [data-theme="light"] .console-dashboard-overview__admin:hover { background: #EEF2F6 !important; color: #13233E !important; } .console-dashboard-overview__recharge { background: var(--ui-accent); color: var(--ui-accent-contrast); border: 1px solid var(--ui-accent); box-shadow: var(--ui-shadow-sm); } .console-dashboard-overview__recharge:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); } .console-dashboard-overview__billing { color: var(--ui-text-muted) !important; background: var(--ui-surface-muted); border-color: var(--ui-border) !important; } .console-dashboard-overview__billing:hover { color: var(--ui-text) !important; background: var(--ui-surface); } [data-theme="light"] .console-dashboard-stat { background: #F7F9FC !important; box-shadow: inset 0 0 0 1px #DFE5EC !important; } [data-theme="light"] .console-dashboard-stat__label { color: #4B5565 !important; } [data-theme="light"] .console-dashboard-stat__value { color: #111827 !important; } [data-theme="warm"] .console-sidebar .ui-nav-link--active { background: #DED1C1 !important; border-color: #CBB8A4 !important; color: #2F261F !important; box-shadow: 0 1px 2px rgba(47, 38, 31, 0.08); } [data-theme="warm"] .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #13233E; } [data-theme="warm"] .console-sidebar .ui-nav-link--active:hover { background: #E4D8CA !important; border-color: #CBB8A4 !important; } [data-theme="warm"] .console-dashboard-overview { background: #FBF7F2; border: 1px solid #DED1C3; box-shadow: 0 12px 28px rgba(47, 38, 31, 0.08); } [data-theme="warm"] .console-dashboard-overview__org { background: #F1E8DD !important; box-shadow: inset 0 0 0 1px #E2D5C7; } [data-theme="warm"] .console-dashboard-overview__org-name { color: #66584D !important; } [data-theme="warm"] .console-dashboard-overview__title { color: #2F261F !important; } [data-theme="warm"] .console-dashboard-overview__description, [data-theme="warm"] .console-dashboard-overview__admin { color: #66584D !important; } [data-theme="warm"] .console-dashboard-overview__admin { background: #F7F1E9; border-color: #DED1C3 !important; } [data-theme="warm"] .console-dashboard-overview__admin:hover { background: #F2E9DE !important; color: #2F261F !important; } [data-theme="warm"] .console-dashboard-stat { background: #F1E8DD !important; box-shadow: inset 0 0 0 1px #E2D5C7 !important; } [data-theme="warm"] .console-dashboard-stat__label { color: #7B6D60 !important; } [data-theme="warm"] .console-dashboard-stat__value { color: #2F261F !important; } [data-theme="warm"] .console-dashboard-stat--revenue .console-dashboard-stat__icon { color: #7C93FF !important; } [data-theme="warm"] .console-dashboard-stat--running .console-dashboard-stat__icon { color: #E7BB63 !important; } [data-theme="warm"] .console-dashboard-stat--completed .console-dashboard-stat__icon { color: #61BFA5 !important; } [data-theme="warm"] .console-dashboard-stat--chats .console-dashboard-stat__icon { color: #8F7AE6 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action { background: #F7F1E9 !important; border-color: #DED1C3 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action:hover { background: #F2E9DE !important; border-color: #DED1C3 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__title { color: #2F261F !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__body { color: #66584D !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon { box-shadow: none; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--create { background: #F6E4D4 !important; color: #9C5B34 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--chat { background: #E7EEFF !important; color: #4C63C7 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--workflow { background: #F0E8DE !important; color: #7A6654 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--runs { background: #FFF1D8 !important; color: #B7791F !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--api { background: #E4F2ED !important; color: #2E8C7D !important; } [data-theme="warm"] .console-topbar { background: color-mix(in srgb, var(--ui-surface) 86%, transparent) !important; } [data-theme="warm"] .console-sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--ui-sidebar-bg) 96%, transparent), color-mix(in srgb, var(--ui-sidebar-bg-deep) 92%, transparent)) !important; } .console-page .ui-page-kicker { color: var(--ui-text-soft); } .console-page .ui-page-title { color: var(--ui-text); } .console-page .ui-page-subtitle { color: var(--ui-text-muted); } .console-page .bg-white, .console-page .bg-white\/60, .console-page .bg-white\/78, .console-page .bg-white\/80, .console-page .bg-white\/86, .console-page .bg-white\/88 { background: var(--console-page-surface) !important; } .console-page .bg-slate-50, .console-page .bg-slate-50\/50, .console-page .bg-slate-50\/60, .console-page .bg-slate-50\/70, .console-page .bg-slate-50\/80, .console-page .bg-slate-50\/90, .console-page .bg-slate-100, .console-page .bg-stone-50, .console-page .bg-stone-50\/70, .console-page .bg-stone-50\/80, .console-page .bg-indigo-50, .console-page .bg-amber-50, .console-page .bg-emerald-50, .console-page .bg-rose-50 { background: var(--console-page-surface-muted) !important; } .console-page .border-white\/70, .console-page .border-slate-100, .console-page .border-slate-200, .console-page .border-slate-200\/60, .console-page .border-slate-200\/70, .console-page .border-slate-200\/80 { border-color: var(--ui-border) !important; } .console-page .text-slate-950, .console-page .text-slate-900, .console-page .text-slate-800, .console-page .text-slate-700 { color: var(--ui-text) !important; } .console-page .text-slate-600, .console-page .text-slate-500, .console-page .text-slate-400 { color: var(--ui-text-muted) !important; } .console-page .shadow-sm { box-shadow: var(--ui-shadow-sm); } [data-theme="dark"] .console-page { color: #ebe9e8; } [data-theme="dark"] .console-page--home, [data-theme="dark"] .console-page--studio, [data-theme="dark"] .console-page--artifacts, [data-theme="dark"] .console-page--workflows, [data-theme="dark"] .console-dashboard { --console-page-surface: #302b27; --console-page-surface-muted: #262220; --console-page-border: #443e3a; --console-page-border-strong: #5a5450; --console-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-page .bg-white, [data-theme="dark"] .console-page .bg-white\/60, [data-theme="dark"] .console-page .bg-white\/78, [data-theme="dark"] .console-page .bg-white\/80, [data-theme="dark"] .console-page .bg-white\/86, [data-theme="dark"] .console-page .bg-white\/88, [data-theme="dark"] .console-page .ui-card--panel { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-page .bg-slate-50, [data-theme="dark"] .console-page .bg-slate-50\/50, [data-theme="dark"] .console-page .bg-slate-50\/60, [data-theme="dark"] .console-page .bg-slate-50\/70, [data-theme="dark"] .console-page .bg-slate-50\/80, [data-theme="dark"] .console-page .bg-slate-50\/90, [data-theme="dark"] .console-page .bg-slate-100, [data-theme="dark"] .console-page .bg-stone-50, [data-theme="dark"] .console-page .bg-stone-50\/70, [data-theme="dark"] .console-page .bg-stone-50\/80, [data-theme="dark"] .console-page .bg-indigo-50, [data-theme="dark"] .console-page .bg-amber-50, [data-theme="dark"] .console-page .bg-emerald-50, [data-theme="dark"] .console-page .bg-rose-50 { background: #262220 !important; } [data-theme="dark"] .console-page .border-white\/70, [data-theme="dark"] .console-page .border-slate-100, [data-theme="dark"] .console-page .border-slate-200, [data-theme="dark"] .console-page .border-slate-200\/60, [data-theme="dark"] .console-page .border-slate-200\/70, [data-theme="dark"] .console-page .border-slate-200\/80 { border-color: #443e3a !important; } [data-theme="dark"] .console-page .text-slate-950, [data-theme="dark"] .console-page .text-slate-900, [data-theme="dark"] .console-page .text-slate-800, [data-theme="dark"] .console-page .text-slate-700 { color: #ebe9e8 !important; } [data-theme="dark"] .console-page .text-slate-600, [data-theme="dark"] .console-page .text-slate-500, [data-theme="dark"] .console-page .text-slate-400 { color: #b0aaa5 !important; } [data-theme="dark"] .console-page .ui-page-kicker { color: #7a7470; } [data-theme="dark"] .console-page .hover\:bg-slate-50\/60:hover { background: #302b27 !important; } .console-home-panel, .console-dashboard-hero, .console-dashboard-action, .console-dashboard-panel, .console-dashboard-subcard, .console-studio-panel, .console-studio-feature-card, .console-home-subpanel, .console-studio-subpanel, .console-studio-mini-panel, .console-artifacts-panel, .console-artifacts-item, .console-artifacts-preview, .console-artifacts-details, .console-workflows-panel, .console-workflows-filter, .console-workflows-item { background: var(--console-page-surface) !important; border-color: var(--console-page-border) !important; box-shadow: var(--console-page-shadow); } .console-studio-subpanel, .console-studio-mini-panel, .console-artifacts-preview, .console-artifacts-details, .console-workflows-filter, .console-dashboard-subcard { background: var(--console-page-surface-muted) !important; } .console-studio-hero { box-shadow: var(--console-page-shadow); } .console-page--studio .console-studio-feature-card { background: var(--console-page-surface) !important; border-color: var(--console-page-border) !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card { background: #FBF7F2 !important; border-color: #DED1C3 !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card__title { color: #2F261F !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card__description { color: #66584D !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__cover { background: linear-gradient(180deg, #F5EAD7 0%, #FBF7F2 100%); } [data-theme="warm"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__cover { background: linear-gradient(180deg, #E7EDF8 0%, #FBF7F2 100%); } [data-theme="warm"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__cover { background: linear-gradient(180deg, #ECEBFA 0%, #FBF7F2 100%); } [data-theme="warm"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__cover { background: linear-gradient(180deg, #E4F2ED 0%, #FBF7F2 100%); } [data-theme="warm"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__cover { background: linear-gradient(180deg, #EFE7DD 0%, #FBF7F2 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card { background: #171C24 !important; border-color: #2B3441 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } [data-theme="dark"] .console-page--studio .console-studio-feature-card__title { color: #F3F5F7 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card__description { color: #C1C8D2 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card__arrow { color: #C1C8D2 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card:hover .console-studio-feature-card__arrow { color: #F3F5F7 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(231, 187, 99, 0.20) 0%, rgba(23, 28, 36, 0) 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(124, 147, 255, 0.20) 0%, rgba(23, 28, 36, 0) 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(129, 118, 255, 0.18) 0%, rgba(23, 28, 36, 0) 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(113, 210, 195, 0.18) 0%, rgba(23, 28, 36, 0) 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(192, 180, 160, 0.16) 0%, rgba(23, 28, 36, 0) 100%); } /* ── Studio Landing Theme Family ────────────────────────── */ .console-page--studio { --studio-landing-canvas: transparent; --studio-landing-card: var(--console-page-surface); --studio-landing-sub-card: var(--console-page-surface-muted); --studio-landing-inset: var(--console-page-surface-muted); --studio-landing-border: var(--console-page-border); --studio-landing-border-strong: var(--console-page-border-strong); --studio-landing-text: var(--ui-text); --studio-landing-text-muted: var(--ui-text-muted); --studio-landing-text-soft: var(--ui-text-soft); --studio-landing-shadow: var(--console-page-shadow); } [data-theme="light"] .console-page--studio { --studio-landing-canvas: #F4F6F9; --studio-landing-card: #FFFFFF; --studio-landing-sub-card: #F7F9FC; --studio-landing-inset: #F7F9FC; --studio-landing-border: #DFE5EC; --studio-landing-border-strong: #CDD6E0; --studio-landing-text: #111827; --studio-landing-text-muted: #4B5565; --studio-landing-text-soft: #8A94A6; --studio-landing-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } [data-theme="warm"] .console-page--studio { --studio-landing-canvas: #F4ECE1; --studio-landing-card: #FBF7F2; --studio-landing-sub-card: #F2E8DC; --studio-landing-inset: #F2E8DC; --studio-landing-border: #DED1C3; --studio-landing-border-strong: #CCBCAA; --studio-landing-text: #2F261F; --studio-landing-text-muted: #66584D; --studio-landing-text-soft: #9A8A7A; --studio-landing-shadow: 0 12px 28px rgba(47, 38, 31, 0.08); } [data-theme="dark"] .console-page--studio { --studio-landing-canvas: #070B12; --studio-landing-card: #121826; --studio-landing-sub-card: #171E2D; --studio-landing-inset: #1C2536; --studio-landing-border: #263143; --studio-landing-border-strong: #324158; --studio-landing-text: #F4F7FB; --studio-landing-text-muted: #BAC4D0; --studio-landing-text-soft: #7F8A99; --studio-landing-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); } html[data-theme="light"]:has(.console-page--studio) .console-shell, html[data-theme="light"]:has(.console-page--studio) .console-content, html[data-theme="warm"]:has(.console-page--studio) .console-shell, html[data-theme="warm"]:has(.console-page--studio) .console-content, html[data-theme="dark"]:has(.console-page--studio) .console-shell, html[data-theme="dark"]:has(.console-page--studio) .console-content { background: var(--studio-landing-canvas) !important; } .console-page--studio .console-studio-panel, .console-page--studio .console-studio-feature-card { background: var(--studio-landing-card) !important; border-color: var(--studio-landing-border) !important; box-shadow: var(--studio-landing-shadow); } .console-page--studio .console-studio-subpanel { background: var(--studio-landing-sub-card) !important; border-color: var(--studio-landing-border) !important; box-shadow: none; } .console-page--studio .console-studio-mini-panel { background: var(--studio-landing-inset) !important; border-color: var(--studio-landing-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .console-page--studio .text-slate-900, .console-page--studio .text-slate-800, .console-page--studio .text-slate-700 { color: var(--studio-landing-text) !important; } .console-page--studio .text-slate-600, .console-page--studio .text-slate-500 { color: var(--studio-landing-text-muted) !important; } .console-page--studio .text-slate-400 { color: var(--studio-landing-text-soft) !important; } .console-page--studio .border-slate-200, .console-page--studio .border-slate-200\/70, .console-page--studio .border-slate-200\/80 { border-color: var(--studio-landing-border) !important; } [data-theme="dark"] .console-page--studio .console-studio-panel, [data-theme="dark"] .console-page--studio .console-studio-feature-card { background: #121826 !important; border-color: #263143 !important; } [data-theme="dark"] .console-page--studio .console-studio-subpanel { background: #171E2D !important; border-color: #263143 !important; } [data-theme="dark"] .console-page--studio .console-studio-mini-panel { background: #1C2536 !important; border-color: #324158 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .console-page--home > section { box-shadow: var(--console-page-shadow); } .console-page--home > .marketing-section--plain { box-shadow: none; } [data-theme="dark"] .console-page--home .bg-slate-950, [data-theme="dark"] .console-page--home .bg-slate-950\/95, [data-theme="dark"] .console-page--home .bg-slate-900, [data-theme="dark"] .console-page--home .bg-slate-900\/95 { background: #1a1816 !important; border-color: #443e3a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-dashboard .border-t, [data-theme="dark"] .console-dashboard .divide-y > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .console-page--studio .border-t, [data-theme="dark"] .console-page--artifacts .border-t, [data-theme="dark"] .console-page--workflows .border-t, [data-theme="dark"] .console-page--workflows .divide-y > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .console-page--artifacts .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #443e3a !important; } [data-theme="dark"] .console-dashboard .text-white { color: #ebe9e8 !important; } [data-theme="dark"] .console-dashboard .text-slate-300, [data-theme="dark"] .console-dashboard .text-slate-400, [data-theme="dark"] .console-dashboard .text-slate-500, [data-theme="dark"] .console-page--studio .text-slate-300, [data-theme="dark"] .console-page--studio .text-slate-400, [data-theme="dark"] .console-page--studio .text-slate-500, [data-theme="dark"] .console-page--artifacts .text-slate-300, [data-theme="dark"] .console-page--artifacts .text-slate-400, [data-theme="dark"] .console-page--artifacts .text-slate-500, [data-theme="dark"] .console-page--workflows .text-slate-300, [data-theme="dark"] .console-page--workflows .text-slate-400, [data-theme="dark"] .console-page--workflows .text-slate-500, [data-theme="dark"] .console-page--workflows .text-slate-600 { color: #b0aaa5 !important; } [data-theme="dark"] .console-page--studio .bg-gradient-to-br.from-slate-950, [data-theme="dark"] .console-page--studio .bg-gradient-to-br.from-slate-900, [data-theme="dark"] .console-page--studio .bg-gradient-to-br.via-slate-900, [data-theme="dark"] .console-page--studio .bg-gradient-to-br.to-slate-900, [data-theme="dark"] .console-dashboard .bg-gradient-to-br.from-slate-900, [data-theme="dark"] .console-dashboard .bg-gradient-to-br.via-slate-800, [data-theme="dark"] .console-dashboard .bg-gradient-to-br.to-slate-900 { background-image: none !important; background-color: #1a1816 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__icon, [data-theme="dark"] .console-dashboard .bg-rose-50, [data-theme="dark"] .console-dashboard .bg-indigo-50, [data-theme="dark"] .console-dashboard .bg-amber-50, [data-theme="dark"] .console-dashboard .bg-emerald-50, [data-theme="dark"] .console-page--studio .bg-amber-50, [data-theme="dark"] .console-page--studio .bg-emerald-50, [data-theme="dark"] .console-page--studio .bg-rose-50, [data-theme="dark"] .console-page--studio .bg-indigo-50, [data-theme="dark"] .console-page--workflows .bg-slate-50, [data-theme="dark"] .console-page--artifacts .bg-slate-50, [data-theme="dark"] .console-page--artifacts .bg-slate-100 { background: #262220 !important; } [data-theme="dark"] .console-page--studio .ui-button--secondary, [data-theme="dark"] .console-page--artifacts .ui-button--secondary, [data-theme="dark"] .console-page--workflows .ui-button--secondary, [data-theme="dark"] .console-dashboard .ui-button--secondary { background: #302b27; border-color: #443e3a; color: #ebe9e8; } [data-theme="dark"] .console-page--studio .ui-button--soft, [data-theme="dark"] .console-page--artifacts .ui-button--soft, [data-theme="dark"] .console-page--workflows .ui-button--soft, [data-theme="dark"] .console-dashboard .ui-button--soft { background: #3a3532; border-color: #5a5450; color: #d6d3d1; } /* ── Account Center Dark Surfaces ───────────────────────── */ html[data-theme="dark"]:has(.account-center), [data-theme="dark"] .account-center { --account-canvas: #070B12; --account-sidebar: #0A0E16; --account-topbar: #0C1017; --account-panel: #121826; --account-panel-2: #171E2D; --account-panel-3: #1C2536; --account-inset: #0D1420; --account-border: #263143; --account-border-strong: #324158; --account-text: #F4F7FB; --account-text-muted: #BAC4D0; --account-text-soft: #7F8A99; --account-accent: #7C93FF; --account-accent-hover: #93A7FF; --account-accent-soft: rgba(124, 147, 255, 0.14); --account-success: #61BFA5; --account-success-soft: rgba(97, 191, 165, 0.14); --account-warning: #E7BB63; --account-warning-soft: rgba(231, 187, 99, 0.14); --account-danger: #E8A39A; --account-danger-soft: rgba(232, 163, 154, 0.14); } html[data-theme="dark"]:has(.account-center) body, html[data-theme="dark"]:has(.account-center) .console-shell, html[data-theme="dark"]:has(.account-center) .console-content { background: var(--account-canvas) !important; } html[data-theme="dark"]:has(.account-center) .console-topbar, html[data-theme="dark"]:has(.account-center) .console-mobile-nav { background: var(--account-topbar) !important; border-color: var(--account-border) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar { background: var(--account-sidebar) !important; border-color: var(--account-border) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar__footer { border-top-color: var(--account-border) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar-card { background: var(--account-panel) !important; border-color: var(--account-border) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link { color: var(--account-text-muted) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link:hover { background: var(--account-panel-2) !important; color: var(--account-text) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link--active { background: #152235 !important; border-color: #28374D !important; color: #F4F7FB !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #7C93FF; } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link--active:hover { background: #1A2940 !important; border-color: #31445E !important; } [data-theme="dark"] .account-center { color: var(--account-text); } [data-theme="dark"] .account-center .ui-page-title, [data-theme="dark"] .account-center .text-slate-950, [data-theme="dark"] .account-center .text-slate-900, [data-theme="dark"] .account-center .text-slate-800, [data-theme="dark"] .account-center .text-slate-700 { color: var(--account-text) !important; } [data-theme="dark"] .account-center .ui-page-subtitle, [data-theme="dark"] .account-center .text-slate-600, [data-theme="dark"] .account-center .text-slate-500 { color: var(--account-text-muted) !important; } [data-theme="dark"] .account-center .ui-page-kicker, [data-theme="dark"] .account-center .text-slate-400, [data-theme="dark"] .account-center .text-slate-300 { color: var(--account-text-soft) !important; } [data-theme="dark"] .account-center .bg-white, [data-theme="dark"] .account-center .bg-white\/80, [data-theme="dark"] .account-center .bg-white\/88, [data-theme="dark"] .account-center .bg-white\/92, [data-theme="dark"] .account-center .ui-card--panel { background: var(--account-panel) !important; } [data-theme="dark"] .account-center .bg-slate-50, [data-theme="dark"] .account-center .bg-slate-50\/70, [data-theme="dark"] .account-center .bg-slate-50\/80, [data-theme="dark"] .account-center .bg-slate-100 { background: var(--account-panel-2) !important; } [data-theme="dark"] .account-center .border-white\/70, [data-theme="dark"] .account-center .border-slate-300, [data-theme="dark"] .account-center .border-slate-200, [data-theme="dark"] .account-center .border-slate-200\/80 { border-color: var(--account-border) !important; } [data-theme="dark"] .account-center .account-center-panel, [data-theme="dark"] .account-center .account-center-usage-record, [data-theme="dark"] .account-center .account-center-summary-card { background: var(--account-panel) !important; border-color: var(--account-border) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); } [data-theme="dark"] .account-center .account-center-stat, [data-theme="dark"] .account-center .account-center-tile, [data-theme="dark"] .account-center .account-center-row, [data-theme="dark"] .account-center .account-center-key-row, [data-theme="dark"] .account-center .account-center-metric, [data-theme="dark"] .account-center .account-center-filter { background: var(--account-panel-2) !important; border-color: var(--account-border) !important; box-shadow: none; } [data-theme="dark"] .account-center .account-center-row:hover, [data-theme="dark"] .account-center .account-center-key-row:hover { background: var(--account-panel-3) !important; border-color: var(--account-border-strong) !important; } [data-theme="dark"] .account-center .account-center-inset-panel, [data-theme="dark"] .account-center .account-center-preview, [data-theme="dark"] .account-center .account-center-loading > section, [data-theme="dark"] .account-center .account-center-empty-wrap .ui-empty-state { background: var(--account-inset) !important; border-color: var(--account-border) !important; box-shadow: none; } [data-theme="dark"] .account-center .account-center-preview__frame { background: var(--account-panel-3) !important; } [data-theme="dark"] .account-center .account-center-subnav__nav { display: inline-flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.35rem; border: 1px solid var(--account-border); border-radius: 999px; background: var(--account-panel-2); } [data-theme="dark"] .account-center .account-center-subnav .ui-tab { background: transparent; border-color: transparent; color: var(--account-text-muted); box-shadow: none; } [data-theme="dark"] .account-center .account-center-subnav .ui-tab:hover { background: var(--account-inset); color: var(--account-text); } [data-theme="dark"] .account-center .account-center-subnav .ui-tab--active { background: var(--account-accent); border-color: var(--account-accent); color: #fff; } [data-theme="dark"] .account-center input[type="text"], [data-theme="dark"] .account-center input[type="email"], [data-theme="dark"] .account-center input[type="password"], [data-theme="dark"] .account-center input[type="number"], [data-theme="dark"] .account-center input[type="url"], [data-theme="dark"] .account-center select, [data-theme="dark"] .account-center textarea, [data-theme="dark"] .account-center .ui-input, [data-theme="dark"] .account-center .ui-select, [data-theme="dark"] .account-center .ui-textarea { background: var(--account-inset); border-color: var(--account-border); color: var(--account-text); box-shadow: none; } [data-theme="dark"] .account-center input::placeholder, [data-theme="dark"] .account-center textarea::placeholder, [data-theme="dark"] .account-center .ui-input::placeholder, [data-theme="dark"] .account-center .ui-textarea::placeholder { color: var(--account-text-soft); } [data-theme="dark"] .account-center input:focus, [data-theme="dark"] .account-center select:focus, [data-theme="dark"] .account-center textarea:focus, [data-theme="dark"] .account-center .ui-input:focus, [data-theme="dark"] .account-center .ui-select:focus, [data-theme="dark"] .account-center .ui-textarea:focus { border-color: var(--account-border-strong); box-shadow: 0 0 0 4px var(--account-accent-soft); } [data-theme="dark"] .account-center .ui-button--primary { background: var(--account-accent); border-color: var(--account-accent); color: #fff; } [data-theme="dark"] .account-center .ui-button--primary:hover { background: var(--account-accent-hover); border-color: var(--account-accent-hover); } [data-theme="dark"] .account-center .ui-button--secondary { background: var(--account-panel-2); border-color: var(--account-border); color: var(--account-text); } [data-theme="dark"] .account-center .ui-button--secondary:hover { background: var(--account-panel-3); border-color: var(--account-border-strong); } [data-theme="dark"] .account-center .ui-button--soft { background: var(--account-accent-soft); border-color: rgba(124, 147, 255, 0.24); color: var(--account-text); } [data-theme="dark"] .account-center .ui-button--soft:hover { background: rgba(124, 147, 255, 0.22); } [data-theme="dark"] .account-center .account-center-inline-action--primary { background: var(--account-accent) !important; color: #fff !important; } [data-theme="dark"] .account-center .account-center-inline-action--primary:hover { background: var(--account-accent-hover) !important; } [data-theme="dark"] .account-center .account-center-inline-action--secondary { background: var(--account-panel-2) !important; border-color: var(--account-border) !important; color: var(--account-text) !important; } [data-theme="dark"] .account-center .account-center-inline-action--secondary:hover { background: var(--account-panel-3) !important; } [data-theme="dark"] .account-center .ui-chip, [data-theme="dark"] .account-center .ui-chip--outlined { background: var(--account-inset) !important; border-color: var(--account-border) !important; color: var(--account-text-muted) !important; } [data-theme="dark"] .account-center .ui-badge--success { background: var(--account-success-soft); border-color: rgba(97, 191, 165, 0.3); color: #8FE0C7; } [data-theme="dark"] .account-center .ui-badge--warning { background: var(--account-warning-soft); border-color: rgba(231, 187, 99, 0.3); color: #F3D38E; } [data-theme="dark"] .account-center .ui-badge--danger { background: var(--account-danger-soft); border-color: rgba(232, 163, 154, 0.3); color: #F2C0B9; } [data-theme="dark"] .account-center .ui-badge--neutral { background: var(--account-inset); border-color: var(--account-border); color: var(--account-text-muted); } [data-theme="dark"] .account-center .account-center-table-shell { overflow: hidden; border: 1px solid var(--account-border); border-radius: 1rem; background: var(--account-panel); } [data-theme="dark"] .account-center .account-center-table-shell th { background: var(--account-panel-3); color: var(--account-text-muted); border-color: var(--account-border); } [data-theme="dark"] .account-center .account-center-table-shell td { background: transparent; color: var(--account-text-muted); border-color: var(--account-border); } [data-theme="dark"] .account-center .account-center-loading .bg-slate-200, [data-theme="dark"] .account-center .account-center-loading .ui-skeleton { background: var(--account-panel-3) !important; } [data-theme="dark"] .account-center .ui-empty-state__title { color: var(--account-text); } [data-theme="dark"] .account-center .ui-empty-state__description { color: var(--account-text-muted); } [data-theme="dark"] .account-center .account-center-issued-token { background: var(--account-panel-2) !important; border-color: rgba(231, 187, 99, 0.35) !important; } [data-theme="dark"] .account-center .account-center-issued-token__value { background: var(--account-inset) !important; border-color: rgba(231, 187, 99, 0.28) !important; color: var(--account-text) !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-amber-200, [data-theme="dark"] .account-center .bg-amber-50 { background: var(--account-warning-soft) !important; border-color: rgba(231, 187, 99, 0.3) !important; color: #F3D38E !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-emerald-200, [data-theme="dark"] .account-center .bg-emerald-50 { background: var(--account-success-soft) !important; border-color: rgba(97, 191, 165, 0.3) !important; color: #8FE0C7 !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-sky-200, [data-theme="dark"] .account-center .bg-sky-50 { background: rgba(124, 147, 255, 0.14) !important; border-color: rgba(124, 147, 255, 0.3) !important; color: #AFC0FF !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-violet-200, [data-theme="dark"] .account-center .bg-violet-50 { background: rgba(143, 122, 230, 0.14) !important; border-color: rgba(143, 122, 230, 0.3) !important; color: #C8BAFF !important; } .account-center-referral-code, .account-center-referral-link { display: block; overflow-wrap: anywhere; word-break: break-word; border-radius: 1rem; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); padding: 0.9rem 1rem; font-size: 0.9rem; line-height: 1.55; } .account-center-referral-code { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.12em; } .account-center--referrals .account-center-table-shell td p + p { margin-top: 0.25rem; } .account-center--referrals .account-center-inset-panel { box-shadow: none; } .account-center--referrals .ui-badge, .account-center--referrals .ui-chip { white-space: nowrap; } [data-theme="dark"] .account-center--referrals .account-center-referral-code, [data-theme="dark"] .account-center--referrals .account-center-referral-link { border-color: var(--account-border); background: var(--account-inset); color: var(--account-text); } /* ── Smooth theme transition ─────────────────────────────── */ html { transition: background-color 0.25s ease, color 0.25s ease; } html * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* ── Viewport shell (锁定高度，禁止布局抖动) ──────────── */ .chat-viewport { position: relative; height: 100dvh; overflow: hidden; background: var(--ui-bg); } .chat-viewport__main { height: 100%; overflow: hidden; } .chat-table-expanded-lock { overflow: hidden; } /* Toast overlay：fixed 定位，不占文档流 */ .chat-toast-layer { position: fixed; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 9999; width: 100%; max-width: 28rem; pointer-events: none; } .chat-toast-layer > * { pointer-events: auto; } /* 5 秒后自动淡出 */ .chat-toast-layer .ui-flash { animation: chat-toast-in 0.25s ease, chat-toast-out 0.3s ease 4.5s forwards; } @keyframes chat-toast-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } @keyframes chat-toast-out { from { opacity: 1; } to { opacity: 0; pointer-events: none; } } .chat-home-shell, .chat-main-shell { min-height: 0; } .chat-home-shell { display: flex; height: 100%; width: 100%; } .chat-main-shell { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: column; background: var(--ui-bg); } .chat-statusbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.25rem; border-bottom: 1px solid var(--ui-border); } .chat-statusbar__meta { min-width: 0; flex: 1 1 auto; } .chat-statusbar__title { margin: 0; color: var(--ui-text); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-statusbar__subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.1rem; color: var(--ui-text-soft); font-size: 0.75rem; line-height: 1.4; } .chat-statusbar__controls { display: inline-flex; align-items: center; gap: 0.65rem; } .chat-statusbar__info-trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); background: var(--ui-surface); color: var(--ui-text-soft); cursor: pointer; } .chat-statusbar__info-trigger:hover { color: var(--ui-text); background: var(--ui-surface-muted); } .chat-statusbar__info-panel { position: absolute; right: 0; z-index: 30; width: 16rem; margin-top: 0.4rem; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); color: var(--ui-text-muted); box-shadow: var(--ui-shadow-lg); } .chat-statusbar__info-panel .font-semibold { color: var(--ui-text); } .chat-statusbar__info-section { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--ui-border); } .chat-statusbar__info-kicker { margin: 0; color: var(--ui-text-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-statusbar__workflow-link { display: block; padding: 0.7rem 0.8rem; border: 1px solid var(--ui-border); border-radius: 0.9rem; background: var(--ui-surface-muted); color: var(--ui-text); font-size: 0.85rem; font-weight: 600; } .chat-statusbar__workflow-link:hover { background: var(--ui-sidebar-hover); } .chat-thread-stage { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 1.2rem clamp(1rem, 4vw, 2.5rem); } .chat-thread-shell { width: 100%; max-width: 64rem; margin: 0 auto; } .chat-viewport--wide .chat-thread-shell, .chat-viewport--wide .chat-composer { max-width: min(96rem, calc(100vw - 4rem)); } .chat-empty-state { display: grid; gap: 1rem; min-height: calc(100vh - 23rem); align-content: center; } .chat-empty-state__hero { padding: 1.65rem; border: 1px solid var(--ui-border); border-radius: 1.7rem; background: linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface-soft) 100%); box-shadow: var(--ui-shadow-md); } .chat-empty-state__title { margin: 0.9rem 0 0; color: var(--ui-text); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; } .chat-empty-state__description { max-width: 46rem; margin-top: 0.8rem; color: var(--ui-text-muted); font-size: 0.98rem; line-height: 1.8; } .chat-empty-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .chat-empty-card { padding: 1rem; border: 1px solid var(--ui-border); border-radius: 1.35rem; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .chat-empty-card__kicker { margin: 0; color: var(--ui-text-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-empty-card__list { margin: 0.9rem 0 0; padding-left: 1rem; color: var(--ui-text-muted); font-size: 0.9rem; line-height: 1.8; } .chat-empty-card__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.9rem; } .chat-empty-card__chip { display: inline-flex; align-items: center; padding: 0.62rem 0.8rem; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface-muted); color: var(--ui-text); font-size: 0.82rem; font-weight: 600; } .chat-empty-card__workflow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid var(--ui-border); border-radius: 1rem; background: var(--ui-surface-muted); color: var(--ui-text); } .chat-empty-card__workflow:hover { background: var(--ui-sidebar-hover); } .chat-message-stack { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; } .chat-message { display: flex; flex-direction: column; gap: 0.45rem; } .chat-message--user { align-items: flex-end; } .chat-message--assistant, .chat-message--system { align-items: flex-start; } .chat-message__meta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.2rem; } .chat-message__status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; } .chat-message__status--failed { color: var(--ui-danger-text); } .chat-message__status--pending { color: var(--ui-text-soft); } .chat-message__status-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 999px; background: rgba(251, 113, 133, 0.14); border: 1px solid rgba(251, 113, 133, 0.28); color: var(--ui-danger-text); font-size: 0.72rem; line-height: 1; } .chat-message__status-icon--pending { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.28); color: var(--ui-text-soft); } .chat-message__role { color: var(--ui-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .chat-message__time { color: var(--ui-text-soft); font-size: 0.72rem; } .chat-message__bubble { width: min(100%, 42rem); padding: 0.8rem 0.95rem; border-radius: var(--ui-radius-md); font-size: 1rem; line-height: 1.65; } .chat-message--user .chat-message__bubble { width: min(100%, 48rem); background: var(--ui-bubble-user-bg); color: var(--ui-bubble-user-text); } .chat-message--failed.chat-message--user .chat-message__bubble { border: 1px solid rgba(251, 113, 133, 0.28); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.08); } .chat-message--assistant .chat-message__bubble { width: min(100%, 64rem); padding: 1.12rem 1.18rem; border: 1px solid var(--ui-bubble-ai-border); background: var(--ui-bubble-ai-bg); color: var(--ui-bubble-ai-text); } .chat-viewport--wide .chat-message--assistant .chat-message__bubble { width: 100%; } .chat-viewport--wide .chat-message--user .chat-message__bubble { width: min(100%, 56rem); } .chat-message--system .chat-message__bubble { border: 1px solid var(--ui-accent-border); background: var(--ui-warning-soft); color: var(--ui-warning-text); } .chat-message__foot { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--ui-border); } .chat-message--user .chat-message__foot { border-top-color: rgba(255, 255, 255, 0.12); } .chat-message__meta-note { opacity: 0.72; font-size: 0.75rem; font-weight: 600; } .chat-message__error-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; } .chat-message__error-text { margin: 0; color: var(--ui-danger-text); font-size: 0.82rem; font-weight: 600; } .chat-message__pending-box { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ui-text-muted); } .chat-message__pending-text { font-size: 0.84rem; font-weight: 600; } .chat-richtext { color: inherit; font-size: 1.05rem; line-height: 1.9; word-break: break-word; } .chat-richtext > :first-child { margin-top: 0; } .chat-richtext > :last-child { margin-bottom: 0; } .chat-richtext h1, .chat-richtext h2, .chat-richtext h3, .chat-richtext h4 { margin: 1.25rem 0 0.65rem; color: inherit; font-weight: 850; line-height: 1.35; } .chat-richtext h1 { font-size: 1.55rem; } .chat-richtext h2 { font-size: 1.35rem; } .chat-richtext h3 { font-size: 1.16rem; } .chat-richtext__paragraph { margin: 0.9rem 0; } .chat-richtext p, .chat-richtext ul, .chat-richtext ol, .chat-richtext pre, .chat-richtext blockquote, .chat-richtext table, .chat-richtext figure { margin: 0.9rem 0; } .chat-richtext ul, .chat-richtext ol { padding-left: 1.45rem; } .chat-richtext li + li { margin-top: 0.24rem; } .chat-richtext code { padding: 0.18rem 0.4rem; border: 1px solid var(--ui-code-border); border-radius: 0.5rem; background: var(--ui-code-bg); color: inherit; font-size: 0.84em; } .chat-richtext pre { padding: 1rem; border: 1px solid var(--ui-code-border); border-radius: 1rem; background: var(--ui-code-bg); color: inherit; overflow-x: auto; } .chat-richtext pre code { padding: 0; border: 0; background: transparent; } .chat-richtext blockquote { padding: 0.9rem 1rem; border-left: 3px solid var(--ui-quote-border); border-radius: 0 1rem 1rem 0; background: var(--ui-quote-bg); color: var(--ui-text-muted); } .chat-richtext__table-card { margin: 0.9rem 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 1rem; background: var(--ui-surface); } .chat-richtext__table-card--expanded { --chat-expanded-table-header-bg: #f4eadc; --chat-expanded-table-row-bg: #fffaf3; --chat-expanded-table-row-alt-bg: #f8f0e5; --chat-expanded-table-toolbar-bg: #fffaf3; position: fixed; inset: 1.25rem; z-index: 10000; display: flex; flex-direction: column; isolation: isolate; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-border-strong) 72%, transparent); border-radius: 1.1rem; background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28); } [data-theme="light"] .chat-richtext__table-card--expanded { --chat-expanded-table-header-bg: #f8fafc; --chat-expanded-table-row-bg: #ffffff; --chat-expanded-table-row-alt-bg: #f8fafc; --chat-expanded-table-toolbar-bg: #ffffff; } [data-theme="dark"] .chat-richtext__table-card--expanded { --chat-expanded-table-header-bg: #1e2530; --chat-expanded-table-row-bg: #171c24; --chat-expanded-table-row-alt-bg: #1b222d; --chat-expanded-table-toolbar-bg: #171c24; } .chat-richtext__table-card--expanded::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(15, 23, 42, 0.42); } .chat-richtext__table-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-muted); } .chat-richtext__table-card--expanded .chat-richtext__table-toolbar { padding: 0.7rem 0.85rem; background: var(--chat-expanded-table-toolbar-bg); } .chat-richtext__table-action { display: inline-flex; align-items: center; justify-content: center; min-height: 1.8rem; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-muted); padding: 0.25rem 0.7rem; font-size: 0.74rem; font-weight: 700; line-height: 1; } .chat-richtext__table-action:hover { color: var(--ui-text); border-color: var(--ui-border-strong); } .chat-richtext__table-scroll { max-width: 100%; overflow-x: auto; } .chat-richtext__table-card--expanded .chat-richtext__table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--ui-surface); } .chat-richtext table { min-width: max(100%, 56rem); overflow: hidden; border-collapse: collapse; font-size: 0.92rem; } .chat-richtext__table-scroll table { margin: 0; border: 0; border-radius: 0; } .chat-richtext__table-card--expanded table { min-width: max(100%, 72rem); font-size: 0.95rem; line-height: 1.65; } .chat-richtext th, .chat-richtext td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--ui-border); vertical-align: top; word-break: normal; overflow-wrap: anywhere; } .chat-richtext th { background: var(--ui-surface-muted); font-weight: 800; color: var(--ui-text); } .chat-richtext td { color: var(--ui-text); background: var(--ui-surface); } .chat-richtext tbody tr:nth-child(even) td { background: var(--ui-surface-muted); } .chat-richtext__table-card--expanded th { position: sticky; top: 0; z-index: 1; background: var(--chat-expanded-table-header-bg); box-shadow: inset 0 -1px 0 var(--ui-border); } .chat-richtext__table-card--expanded td { background: var(--chat-expanded-table-row-bg); } .chat-richtext__table-card--expanded tbody tr:nth-child(even) td { background: var(--chat-expanded-table-row-alt-bg); } .chat-richtext__table-card--expanded th, .chat-richtext__table-card--expanded td { padding: 0.95rem 1rem; } .chat-richtext__table-card--expanded tbody tr:hover td { background: color-mix(in srgb, var(--ui-accent-soft) 36%, var(--chat-expanded-table-row-bg)); } .chat-table-expanded-lock body { overflow: hidden; } .chat-richtext tbody tr:last-child td { border-bottom: 0; } .chat-richtext__cell--center { text-align: center; } .chat-richtext__cell--right { text-align: right; } .chat-richtext img, .chat-richtext video, .chat-richtext canvas { display: block; max-width: 100%; border: 1px solid var(--ui-border); border-radius: 1.1rem; background: var(--ui-media-bg); box-shadow: var(--ui-shadow-sm); } .chat-composer-shell { position: relative; z-index: 10; flex-shrink: 0; padding: 0.75rem 1rem; border-top: 1px solid var(--ui-border); background: var(--ui-bg); } .chat-composer { width: 100%; max-width: 64rem; margin: 0 auto; } .chat-composer__frame { padding: 0.75rem; border: 1px solid var(--ui-composer-border); border-radius: var(--ui-radius-md); background: var(--ui-composer-bg); } .chat-composer__lead, .chat-composer__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; } .chat-composer__eyebrow { margin: 0; color: var(--ui-text-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-composer__hint { margin: 0.25rem 0 0; color: var(--ui-text-muted); font-size: 0.84rem; } .chat-composer__textarea { margin-top: 0; min-height: 4.5rem; padding: 0; border: 0; background: transparent; color: var(--ui-text); font-size: 0.9rem; line-height: 1.7; box-shadow: none; } .chat-composer__textarea:focus { border: 0; box-shadow: none; } .chat-composer__controls { display: flex; align-items: center; gap: 0.7rem; } .chat-composer__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 5rem; min-height: 2.25rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-sidebar-active-text); font-size: 0.82rem; font-weight: 700; } .chat-composer__submit:hover { transform: translateY(-1px); opacity: 0.96; } .chat-composer__submit--grace { background: #92400e; color: #fff7ed; } .chat-composer__submit--abort { background: #9f1239; color: #fff1f2; } .chat-composer__submit:focus-visible, .chat-statusbar__info-trigger:focus-visible, .chat-model-picker__trigger:focus-visible, .chat-model-picker__option:focus-visible, .ui-theme-switcher__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ui-accent-soft); } .chat-composer__submit:disabled { cursor: not-allowed; opacity: 0.5; transform: none; } .chat-composer__submit-label { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; } .chat-composer__submit-label--pending { display: none; } .chat-composer__submit-icon { display: inline-flex; width: 0.8rem; height: 0.8rem; align-items: center; justify-content: center; flex-shrink: 0; } .chat-composer__submit-icon--stop::before { content: ""; display: block; width: 0.58rem; height: 0.58rem; border-radius: 0.12rem; background: currentColor; } .chat-composer__submit-icon--spinner::before { content: ""; display: block; width: 0.7rem; height: 0.7rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: currentColor; animation: ui-spin 0.9s linear infinite; } .chat-composer__foot { margin-top: 0.7rem; opacity: 0.88; } .chat-pending-state { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--ui-accent-border); border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-text-muted); font-size: 0.82rem; } .chat-pending-state__dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: currentColor; animation: ui-shimmer 1s infinite alternate; } /* ── Pending bubble (transcript 里的轻量占位) ───────── */ .chat-pending-bubble { margin-top: 0.25rem; } /* Composer inline pending — 极简一行，不做独立卡片 */ .chat-composer-pending { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; margin-bottom: 0.4rem; color: var(--ui-text-soft); font-size: 0.78rem; font-weight: 600; } .chat-composer-pending--system { border: 1px solid var(--ui-accent-border); border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-text-muted); } .chat-submit-feedback-notice { margin-bottom: 0.45rem; padding: 0.55rem 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); font-size: 0.78rem; font-weight: 600; line-height: 1.5; } .chat-submit-feedback-notice--info { background: var(--ui-surface-muted); color: var(--ui-text-muted); } .chat-submit-feedback-notice--error { border-color: rgba(253, 164, 175, 0.85); background: var(--ui-danger-soft); color: var(--ui-danger-text); } .chat-retry-pending { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.55rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ui-accent-border); border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-text-muted); font-size: 0.76rem; font-weight: 600; } .chat-pending-dots { display: inline-flex; align-items: center; gap: 0.25rem; } .chat-pending-dots span { display: block; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--ui-text-soft); animation: chat-dot-bounce 1.2s ease-in-out infinite; } .chat-pending-dots span:nth-child(2) { animation-delay: 0.15s; } .chat-pending-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes chat-dot-bounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-0.2rem); } } .chat-model-picker { position: relative; } .chat-model-picker__native { display: block; } .studio-ui-lock-overlay { position: absolute; inset: 0; z-index: 45; display: flex; align-items: flex-start; justify-content: center; padding: 5rem 1rem 1.5rem; background: linear-gradient(180deg, rgba(243, 236, 226, 0.76), rgba(243, 236, 226, 0.9)); backdrop-filter: blur(3px); opacity: 1; visibility: visible; transition: opacity 180ms ease, visibility 180ms ease; } .studio-ui-lock-overlay__panel { display: inline-flex; align-items: center; gap: 0.9rem; max-width: min(28rem, calc(100vw - 2rem)); border: 1px solid var(--ui-border); border-radius: 1rem; background: rgba(251, 247, 242, 0.96); padding: 0.9rem 1rem; box-shadow: var(--ui-shadow-md); } .studio-ui-lock-overlay__spinner { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; border: 2px solid rgba(19, 35, 62, 0.16); border-top-color: var(--ui-accent); border-radius: 999px; animation: studio-ui-lock-spin 0.8s linear infinite; } .studio-ui-lock-overlay__title { margin: 0; color: var(--ui-text); font-size: 0.85rem; font-weight: 800; } .studio-ui-lock-overlay__copy { margin: 0.2rem 0 0; color: var(--ui-text-muted); font-size: 0.76rem; line-height: 1.55; } .studio-workbench-stage-title { max-width: min(100%, 24ch); margin-left: auto; margin-right: auto; display: -webkit-box; overflow: hidden; text-wrap: balance; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .studio-workbench-stage-status { position: relative; overflow: hidden; background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.62), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1)), var(--studio-shell-surface-muted); } .studio-workbench-stage-status::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--studio-shell-tint), transparent 48%); } .studio-workbench-stage-status > * { position: relative; z-index: 1; } .studio-workbench-stage-status__inner { width: min(100%, 40rem); padding: 1.5rem 1.6rem; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 1.5rem; background: rgba(255, 255, 255, 0.44); box-shadow: 0 18px 40px rgba(47, 38, 31, 0.08); backdrop-filter: blur(12px); text-align: left; } .studio-workbench-stage-status--processing { background: radial-gradient(circle at top right, rgba(240, 249, 255, 0.9), transparent 34%), linear-gradient(135deg, rgba(255, 247, 242, 0.98), rgba(229, 241, 255, 0.95)), var(--studio-shell-surface); } .studio-workbench-stage-status--failed { background: radial-gradient(circle at top right, rgba(255, 241, 242, 0.92), transparent 34%), linear-gradient(135deg, rgba(255, 245, 241, 0.98), rgba(255, 232, 236, 0.95)), var(--studio-shell-surface); } .studio-workbench-stage-status--warning { background: radial-gradient(circle at top right, rgba(255, 251, 235, 0.94), transparent 34%), linear-gradient(135deg, rgba(255, 247, 233, 0.98), rgba(255, 242, 204, 0.95)), var(--studio-shell-surface); } .studio-workbench-stage-status--idle { background: radial-gradient(circle at top right, rgba(250, 250, 249, 0.88), transparent 34%), linear-gradient(135deg, rgba(250, 246, 241, 0.98), rgba(244, 239, 234, 0.95)), var(--studio-shell-surface); } .studio-workbench-stage-status__badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); } .studio-workbench-stage-status__badge--processing { border-color: rgba(125, 181, 244, 0.5); background: rgba(240, 249, 255, 0.96); color: #1d4ed8; } .studio-workbench-stage-status__badge--failed { border-color: rgba(251, 146, 165, 0.42); background: rgba(255, 241, 242, 0.96); color: #be123c; } .studio-workbench-stage-status__badge--warning { border-color: rgba(251, 191, 36, 0.45); background: rgba(255, 251, 235, 0.96); color: #b45309; } .studio-workbench-stage-status__badge--idle { border-color: rgba(203, 213, 225, 0.76); background: rgba(255, 255, 255, 0.92); color: #475569; } .studio-workbench-stage-status__title { color: var(--studio-shell-text); } .studio-workbench-stage-status__copy { color: var(--studio-shell-text-muted); } .studio-workbench-stage-status__meta { border-color: rgba(202, 186, 169, 0.8); background: rgba(251, 247, 242, 0.82); color: var(--studio-shell-text-muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .studio-workbench-stage-status__track { width: min(100%, 18rem); background: rgba(255, 255, 255, 0.66); box-shadow: inset 0 1px 1px rgba(47, 38, 31, 0.06); } .studio-workbench-stage-status__bar--processing { background: linear-gradient(90deg, #7dd3fc, #3b82f6); } .studio-workbench-stage-status__bar--failed { background: linear-gradient(90deg, #fda4af, #fb7185); } .studio-workbench-stage-status__bar--warning { background: linear-gradient(90deg, #fcd34d, #f59e0b); } .studio-workbench-stage-status__bar--idle { background: linear-gradient(90deg, #cbd5e1, #94a3b8); } [data-studio-interaction-gate] { position: relative; } [data-studio-interaction-gate][data-studio-ui-ready="false"] > :not([data-studio-ui-lock-overlay]) { pointer-events: none; user-select: none; } [data-studio-interaction-gate][data-studio-ui-ready="false"] .studio-workbench-composer-shell { visibility: hidden; opacity: 0; } [data-studio-interaction-gate][data-studio-ui-ready="true"] .studio-workbench-composer-shell { visibility: visible; opacity: 1; transition: opacity 120ms ease; } [data-studio-interaction-gate][data-studio-ui-ready="false"] [data-studio-primary-submit] { cursor: wait; opacity: 0.72; transform: none; } [data-studio-interaction-gate][data-studio-ui-ready="false"] [data-studio-primary-submit] .chat-composer__submit-label--ready { display: none; } [data-studio-interaction-gate][data-studio-ui-ready="false"] [data-studio-primary-submit] .chat-composer__submit-label--pending { display: inline-flex; } [data-studio-interaction-gate][data-studio-ui-ready="true"] > :not([data-studio-ui-lock-overlay]) { pointer-events: auto; } [data-studio-interaction-gate][data-studio-ui-ready="true"] .studio-ui-lock-overlay { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes studio-ui-lock-spin { to { transform: rotate(360deg); } } .chat-model-picker:not([data-model-picker-ready="true"]) .chat-model-picker__trigger, .chat-model-picker:not([data-model-picker-ready="true"]) .chat-model-picker__menu { display: none; } .chat-model-picker[data-model-picker-ready="true"] .chat-model-picker__native { display: none; } .chat-model-picker__trigger { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; padding: 0.4rem 0.65rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); background: var(--ui-surface); color: var(--ui-text); } .chat-model-picker__summary { min-width: 0; text-align: left; } .chat-model-picker__label, .chat-model-picker__menu-kicker { margin: 0; color: var(--ui-text-soft); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-model-picker__title, .chat-model-picker__option-title { margin: 0.2rem 0 0; color: var(--ui-text); font-size: 0.92rem; font-weight: 700; } .chat-model-picker__subtitle, .chat-model-picker__option-subtitle, .chat-model-picker__menu-copy { margin: 0.2rem 0 0; color: var(--ui-text-muted); font-size: 0.76rem; line-height: 1.5; } .chat-model-picker__chevron { color: var(--ui-text-soft); font-size: 0.75rem; } .chat-model-picker__menu { position: absolute; left: 0; bottom: calc(100% + 0.4rem); z-index: 30; width: min(42rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: 0.5rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); } .chat-model-picker__menu-head { padding: 0.4rem 0.45rem 0.7rem; } .chat-model-picker__search { width: 100%; margin-top: 0.55rem; padding: 0.5rem 0.65rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); background: var(--ui-surface-muted); color: var(--ui-text); font-size: 0.82rem; outline: none; } .chat-model-picker__search::placeholder { color: var(--ui-text-soft); } .chat-model-picker__search:focus { border-color: var(--ui-accent-border); box-shadow: 0 0 0 3px var(--ui-accent-soft); } .chat-model-picker__list { max-height: min(30rem, 62vh); overflow-y: auto; padding-right: 0.25rem; } .chat-model-picker__group + .chat-model-picker__group { margin-top: 0.5rem; } .chat-model-picker__group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 0.45rem; } .chat-model-picker__option { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.6rem; border: 1px solid transparent; border-radius: var(--ui-radius-xs); background: transparent; text-align: left; } .chat-model-picker__option:hover { background: var(--ui-sidebar-hover); border-color: var(--ui-border); } .chat-model-picker__option--active { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); } .chat-model-picker__badge { display: inline-flex; align-items: center; padding: 0.28rem 0.55rem; border: 1px solid var(--ui-accent-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-accent); font-size: 0.68rem; font-weight: 700; } .chat-model-picker__channel-line { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; color: var(--ui-text-soft); font-size: 0.68rem; line-height: 1.45; } .chat-model-picker__group-label { padding: 0.5rem 0.75rem 0.25rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ui-text-soft); } .chat-model-picker__empty { margin: 0.4rem 0.35rem 0.1rem; padding: 0.75rem; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-xs); color: var(--ui-text-muted); font-size: 0.8rem; text-align: center; } .chat-model-picker__badge-tag { display: inline-flex; align-items: center; margin-left: 0.35rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--ui-accent-soft, #e0f2fe); color: var(--ui-accent, #0369a1); font-size: 0.65rem; font-weight: 600; line-height: 1.4; } .chat-model-picker__badge-tag--reference { border: 1px solid #bbf7d0; background: #ecfdf5; color: #047857; } .chat-model-picker__badge-tag--muted { border: 1px solid #e5e7eb; background: #f8fafc; color: #64748b; } .chat-model-picker__rec-tag { display: inline-flex; align-items: center; margin-left: 0.25rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--ui-success-soft, #dcfce7); color: var(--ui-success-text, #166534); font-size: 0.65rem; font-weight: 600; line-height: 1.4; } .chat-model-picker__usage-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0; } .chat-model-picker__usage-tags--summary { margin-top: 0.35rem; } .chat-model-picker__usage-tag { display: inline-flex; align-items: center; max-width: 100%; padding: 0.12rem 0.45rem; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 0.66rem; font-weight: 700; line-height: 1.35; white-space: nowrap; } .chat-model-picker__usage-tag--fast { border-color: #fed7aa; background: #fff7ed; color: #9a3412; } .chat-model-picker__usage-tag--document { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } .chat-model-picker__usage-tag--vision { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; } .chat-model-picker__usage-tag--code { border-color: #e9d5ff; background: #faf5ff; color: #7e22ce; } .studio-professional-panel { box-shadow: 0 12px 28px rgba(94, 78, 60, 0.08); } .studio-professional-panel__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; } .studio-professional-panel__summary::-webkit-details-marker { display: none; } .studio-professional-panel__summary-action { flex: 0 0 auto; border: 1px solid #d8c7b7; border-radius: 999px; background: #fffaf5; padding: 0.38rem 0.75rem; color: #5f4f42; font-size: 0.72rem; font-weight: 800; } .studio-professional-panel__summary-meta { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.38rem; min-width: 0; } .studio-professional-panel__summary-meta span { min-height: 1.75rem; border: 1px solid #e5ded6; border-radius: 999px; background: rgba(255, 250, 245, 0.86); padding: 0.35rem 0.7rem; color: #584b40; font-size: 0.76rem; font-weight: 800; line-height: 1.2; } .studio-professional-panel__body { position: relative; z-index: 1; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(222, 209, 195, 0.72); } .studio-professional-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.65rem; } .studio-professional-control { display: flex; min-height: 4.15rem; flex-direction: column; gap: 0.4rem; border: 1px solid #e5ded6; border-radius: 0.85rem; background: rgba(248, 250, 252, 0.74); padding: 0.72rem; opacity: 0.62; transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease; } .studio-professional-control--wide { grid-column: 1 / -1; } .studio-professional-control--inline { flex-direction: row; align-items: center; } .studio-professional-control--supported { border-color: #a7f3d0; background: #f0fdf4; opacity: 1; } .studio-professional-control__label { display: block; color: #1f2937; font-size: 0.78rem; font-weight: 850; line-height: 1.25; } .studio-professional-control__head { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; } .studio-professional-control__value { flex: 0 0 auto; border: 1px solid #d7e7d9; border-radius: 999px; background: rgba(255, 255, 255, 0.84); padding: 0.12rem 0.46rem; color: #047857; font-size: 0.68rem; font-weight: 850; line-height: 1.35; } .studio-professional-control__hint { display: block; margin-top: 0.18rem; color: #64748b; font-size: 0.72rem; line-height: 1.45; } .studio-professional-control__input, .studio-professional-control__textarea { width: 100%; border: 1px solid #ddd2c7; border-radius: 0.65rem; background: rgba(255, 255, 255, 0.9); color: #1f2937; font-size: 0.78rem; line-height: 1.45; outline: none; } .studio-professional-control__input { min-height: 2.15rem; padding: 0.45rem 0.6rem; } .studio-professional-control__textarea { min-height: 4rem; resize: vertical; padding: 0.55rem 0.65rem; } .studio-professional-control__checkbox { width: 1rem; height: 1rem; flex: 0 0 auto; accent-color: #0f172a; } .studio-professional-control__range { width: 100%; accent-color: #0f172a; } .studio-professional-control--disabled, .studio-professional-control:has(:disabled) { filter: grayscale(0.28); } .studio-professional-control :disabled { cursor: not-allowed; background: #f1f5f9; color: #94a3b8; } .studio-reference-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.38rem; } .studio-reference-slot-option { min-width: 0; cursor: pointer; opacity: 0.56; filter: grayscale(0.2); } .studio-reference-slot-option__body { display: flex; min-height: 3.05rem; flex-direction: column; justify-content: center; border: 1px solid #e5ded6; border-radius: 0.72rem; background: rgba(255, 255, 255, 0.78); padding: 0.42rem 0.5rem; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .studio-reference-slot-option__label { color: #1f2937; font-size: 0.72rem; font-weight: 850; line-height: 1.2; } .studio-reference-slot-option__hint { margin-top: 0.16rem; color: #64748b; font-size: 0.62rem; line-height: 1.25; } .studio-reference-slot-option.studio-professional-control--supported { opacity: 1; filter: none; } .studio-reference-slot-option input:disabled + .studio-reference-slot-option__body { cursor: not-allowed; background: #f1f5f9; color: #94a3b8; } .studio-reference-slot-option input:checked + .studio-reference-slot-option__body { border-color: #0f172a; background: #0f172a; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16); } .studio-reference-slot-option input:checked + .studio-reference-slot-option__body .studio-reference-slot-option__label, .studio-reference-slot-option input:checked + .studio-reference-slot-option__body .studio-reference-slot-option__hint { color: #ffffff; } .studio-reference-slot-option input:disabled:checked + .studio-reference-slot-option__body { border-color: #cbd5e1; background: #f1f5f9; box-shadow: none; } .studio-reference-slot-option input:disabled:checked + .studio-reference-slot-option__body .studio-reference-slot-option__label, .studio-reference-slot-option input:disabled:checked + .studio-reference-slot-option__body .studio-reference-slot-option__hint { color: #94a3b8; } .studio-workbench-options--collapsible { overflow: hidden; } .studio-workbench-options__summary { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; } .studio-workbench-options__summary::-webkit-details-marker { display: none; } .studio-workbench-options__summary-meta { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.38rem; min-width: 0; } .studio-workbench-options__summary-meta span { min-height: 1.75rem; border: 1px solid #e5ded6; border-radius: 999px; background: rgba(255, 250, 245, 0.86); padding: 0.35rem 0.7rem; color: #584b40; font-size: 0.76rem; font-weight: 800; line-height: 1.2; } .studio-workbench-options__summary-action { flex: 0 0 auto; border: 1px solid #d8c7b7; border-radius: 999px; background: #fffaf5; padding: 0.38rem 0.75rem; color: #5f4f42; font-size: 0.72rem; font-weight: 800; } .studio-workbench-options__body { position: relative; z-index: 1; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(222, 209, 195, 0.72); } details:not([open]) [data-state-open], details[open] [data-state-closed] { display: none; } @media (min-width: 1600px) and (max-width: 2559px) and (min-height: 900px) and (max-height: 1439px) { [data-testid="studio-image-workspace-shell"] .chat-composer__toolbar, [data-testid="studio-video-workspace-shell"] .chat-composer__toolbar { align-items: center !important; gap: 0.65rem !important; } [data-testid="studio-image-workspace-shell"] .chat-composer, [data-testid="studio-video-workspace-shell"] .chat-composer { display: grid !important; grid-template-columns: minmax(8.25rem, 9.5rem) minmax(0, 1fr); gap: 0.7rem; align-items: start; } [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-top, [data-testid="studio-video-workspace-shell"] .chat-composer > .chat-composer__frame { grid-column: 2; grid-row: 1; min-width: 0; } [data-testid="studio-image-workspace-shell"] .chat-composer__controls, [data-testid="studio-video-workspace-shell"] .chat-composer__controls { flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; } [data-testid="studio-image-workspace-shell"] .chat-model-picker, [data-testid="studio-video-workspace-shell"] .chat-model-picker { position: relative; width: auto; } [data-testid="studio-image-workspace-shell"] .chat-model-picker[data-model-picker-open="true"]::before, [data-testid="studio-video-workspace-shell"] .chat-model-picker[data-model-picker-open="true"]::before { content: none; display: none; } [data-testid="studio-image-workspace-shell"] .chat-model-picker__trigger, [data-testid="studio-video-workspace-shell"] .chat-model-picker__trigger { width: auto !important; min-width: 9.25rem; max-width: 14.5rem; min-height: 2.65rem; padding: 0.58rem 0.78rem; border-radius: 0.75rem; } [data-testid="studio-image-workspace-shell"] .chat-model-picker__summary, [data-testid="studio-video-workspace-shell"] .chat-model-picker__summary { display: flex; min-width: 0; align-items: center; gap: 0.35rem; } [data-testid="studio-image-workspace-shell"] .chat-model-picker__label, [data-testid="studio-image-workspace-shell"] .chat-model-picker__subtitle, [data-testid="studio-image-workspace-shell"] .chat-model-picker__usage-tags--summary, [data-testid="studio-video-workspace-shell"] .chat-model-picker__label, [data-testid="studio-video-workspace-shell"] .chat-model-picker__subtitle, [data-testid="studio-video-workspace-shell"] .chat-model-picker__usage-tags--summary { display: none !important; } [data-testid="studio-image-workspace-shell"] .chat-model-picker__title, [data-testid="studio-video-workspace-shell"] .chat-model-picker__title { max-width: 11rem; margin: 0; overflow: hidden; font-size: 0.82rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } [data-testid="studio-image-workspace-shell"] .chat-model-picker__menu, [data-testid="studio-video-workspace-shell"] .chat-model-picker__menu { position: fixed; top: 50%; bottom: auto; left: 50%; z-index: 950; width: min(44rem, calc(100vw - 2rem)); max-height: min(72vh, 42rem); transform: translate(-50%, -50%); } [data-testid="studio-image-workspace-shell"] .chat-model-picker__list, [data-testid="studio-video-workspace-shell"] .chat-model-picker__list { max-height: min(54vh, 31rem); } .chat-model-picker__portal-backdrop { position: fixed; inset: 0; z-index: 940; background: rgba(28, 25, 23, 0.42); backdrop-filter: blur(8px); } .chat-model-picker__menu.chat-model-picker__menu--portal { position: fixed !important; top: 50% !important; bottom: auto !important; left: 50% !important; z-index: 950 !important; width: min(44rem, calc(100vw - 2rem)) !important; max-height: min(72vh, 42rem) !important; transform: translate(-50%, -50%) !important; } .chat-model-picker__menu.chat-model-picker__menu--portal .chat-model-picker__list { max-height: min(54vh, 31rem); } [data-testid="studio-image-workspace-shell"] .studio-pricing-trigger, [data-testid="studio-video-workspace-shell"] .studio-pricing-trigger { min-height: 2.7rem; padding: 0.58rem 0.75rem; } [data-testid="studio-image-workspace-shell"] .studio-pricing-trigger__hint, [data-testid="studio-video-workspace-shell"] .studio-pricing-trigger__hint { display: none; } [data-testid="studio-image-workspace-shell"] .studio-pricing-trigger__button, [data-testid="studio-video-workspace-shell"] .studio-pricing-trigger__button { padding: 0.4rem 0.65rem; font-size: 0.72rem; } [data-testid="studio-image-workspace-shell"] .chat-composer__foot, [data-testid="studio-video-workspace-shell"] .chat-composer__foot { display: flex; grid-column: 1; grid-row: 1; flex-direction: column; align-items: stretch; gap: 0.52rem; width: 100%; margin-top: 0; } [data-testid="studio-image-workspace-shell"] .studio-workbench-options--collapsible, [data-testid="studio-image-workspace-shell"] .studio-professional-panel, [data-testid="studio-video-workspace-shell"] .studio-workbench-options--collapsible, [data-testid="studio-video-workspace-shell"] .studio-professional-panel { width: auto; margin: 0 !important; padding: 0 !important; overflow: visible; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } [data-testid="studio-image-workspace-shell"] .studio-workbench-options__summary, [data-testid="studio-image-workspace-shell"] .studio-professional-panel__summary, [data-testid="studio-video-workspace-shell"] .studio-workbench-options__summary, [data-testid="studio-video-workspace-shell"] .studio-professional-panel__summary { flex-direction: column; align-items: stretch; min-height: 4.35rem; padding: 0.62rem 0.7rem; border: 1px solid var(--studio-shell-border); border-radius: 0.95rem; background: var(--studio-shell-surface); box-shadow: var(--ui-shadow-sm); } [data-testid="studio-image-workspace-shell"] .studio-workbench-options__summary > .min-w-0 p:not(:first-child), [data-testid="studio-image-workspace-shell"] .studio-professional-panel__summary p:not(:first-child), [data-testid="studio-video-workspace-shell"] .studio-workbench-options__summary > .min-w-0 p:not(:first-child), [data-testid="studio-video-workspace-shell"] .studio-professional-panel__summary p:not(:first-child) { display: none !important; } [data-testid="studio-image-workspace-shell"] .studio-workbench-options__summary > .min-w-0 p:first-child, [data-testid="studio-image-workspace-shell"] .studio-professional-panel__summary p:first-child, [data-testid="studio-video-workspace-shell"] .studio-workbench-options__summary > .min-w-0 p:first-child, [data-testid="studio-video-workspace-shell"] .studio-professional-panel__summary p:first-child { font-size: 0.78rem !important; line-height: 1.2; white-space: normal; } [data-testid="studio-image-workspace-shell"] .studio-workbench-options__summary-meta, [data-testid="studio-image-workspace-shell"] .studio-professional-panel__summary-meta, [data-testid="studio-video-workspace-shell"] .studio-workbench-options__summary-meta, [data-testid="studio-video-workspace-shell"] .studio-professional-panel__summary-meta { flex: 0 1 auto; justify-content: flex-start; gap: 0.22rem; width: 100%; } [data-testid="studio-image-workspace-shell"] .studio-workbench-options__summary-meta span, [data-testid="studio-image-workspace-shell"] .studio-professional-panel__summary-meta span, [data-testid="studio-video-workspace-shell"] .studio-workbench-options__summary-meta span, [data-testid="studio-video-workspace-shell"] .studio-professional-panel__summary-meta span { min-height: 1.45rem; padding: 0.25rem 0.48rem; font-size: 0.68rem; } [data-testid="studio-image-workspace-shell"] .studio-workbench-options__summary-action, [data-testid="studio-image-workspace-shell"] .studio-professional-panel__summary-action, [data-testid="studio-video-workspace-shell"] .studio-workbench-options__summary-action, [data-testid="studio-video-workspace-shell"] .studio-professional-panel__summary-action { align-self: flex-start; padding: 0.28rem 0.55rem; font-size: 0.68rem; } [data-testid="studio-image-workspace-shell"] details[open].studio-workbench-options--collapsible, [data-testid="studio-image-workspace-shell"] details[open].studio-professional-panel, [data-testid="studio-video-workspace-shell"] details[open].studio-workbench-options--collapsible, [data-testid="studio-video-workspace-shell"] details[open].studio-professional-panel { position: fixed; inset: 0; z-index: 980; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem !important; background: rgba(28, 25, 23, 0.42) !important; backdrop-filter: blur(8px) !important; } [data-testid="studio-image-workspace-shell"] details[open].studio-workbench-options--collapsible > summary, [data-testid="studio-image-workspace-shell"] details[open].studio-professional-panel > summary, [data-testid="studio-video-workspace-shell"] details[open].studio-workbench-options--collapsible > summary, [data-testid="studio-video-workspace-shell"] details[open].studio-professional-panel > summary { width: min(56rem, calc(100vw - 2rem)); flex-direction: row; align-items: center; border-radius: 1.1rem 1.1rem 0 0; padding: 0.95rem 1rem; border-color: var(--studio-shell-border); border-bottom: 0; box-shadow: none; } [data-testid="studio-image-workspace-shell"] details[open].studio-workbench-options--collapsible .studio-workbench-options__summary-meta, [data-testid="studio-image-workspace-shell"] details[open].studio-professional-panel .studio-professional-panel__summary-meta, [data-testid="studio-video-workspace-shell"] details[open].studio-workbench-options--collapsible .studio-workbench-options__summary-meta, [data-testid="studio-video-workspace-shell"] details[open].studio-professional-panel .studio-professional-panel__summary-meta { justify-content: flex-end; width: auto; } [data-testid="studio-image-workspace-shell"] details[open].studio-workbench-options--collapsible .studio-workbench-options__summary-action, [data-testid="studio-image-workspace-shell"] details[open].studio-professional-panel .studio-professional-panel__summary-action, [data-testid="studio-video-workspace-shell"] details[open].studio-workbench-options--collapsible .studio-workbench-options__summary-action, [data-testid="studio-video-workspace-shell"] details[open].studio-professional-panel .studio-professional-panel__summary-action { align-self: center; } [data-testid="studio-image-workspace-shell"] details[open].studio-workbench-options--collapsible > summary > .min-w-0 p:not(:first-child), [data-testid="studio-image-workspace-shell"] details[open].studio-professional-panel > summary p:not(:first-child), [data-testid="studio-video-workspace-shell"] details[open].studio-workbench-options--collapsible > summary > .min-w-0 p:not(:first-child), [data-testid="studio-video-workspace-shell"] details[open].studio-professional-panel > summary p:not(:first-child) { display: block !important; } [data-testid="studio-image-workspace-shell"] details[open] .studio-workbench-options__body, [data-testid="studio-video-workspace-shell"] details[open] .studio-workbench-options__body { width: min(56rem, calc(100vw - 2rem)); max-height: min(70vh, 42rem); margin-top: 0; overflow-y: auto; border: 1px solid var(--studio-shell-border); border-top: 0; border-radius: 0 0 1.1rem 1.1rem; background: var(--studio-shell-surface); padding: 1rem; } [data-testid="studio-image-workspace-shell"] details[open].studio-professional-panel .studio-professional-panel__body, [data-testid="studio-video-workspace-shell"] details[open].studio-professional-panel .studio-professional-panel__body { width: min(56rem, calc(100vw - 2rem)); max-height: min(70vh, 42rem); margin-top: 0 !important; overflow-y: auto; border: 1px solid var(--studio-shell-border); border-top: 0; border-radius: 0 0 1.1rem 1.1rem; background: var(--studio-shell-surface); padding: 1rem; } } .studio-capability-card { min-height: 6rem; border: 1px solid #e5ded6; border-radius: 0.75rem; background: rgba(248, 250, 252, 0.74); padding: 0.72rem; opacity: 0.62; transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease, transform 140ms ease; } .studio-capability-card--provider-ready { border-color: #a7f3d0; background: #f0fdf4; opacity: 1; } .studio-capability-card--recorded-only { border-color: #fde68a; background: #fffbeb; opacity: 1; } .studio-capability-card__state { flex: 0 0 auto; border: 1px solid #e5e7eb; border-radius: 999px; background: #f8fafc; padding: 0.12rem 0.46rem; color: #64748b; font-size: 0.65rem; font-weight: 800; line-height: 1.35; white-space: nowrap; } .studio-capability-card--provider-ready .studio-capability-card__state { border-color: #bbf7d0; background: #dcfce7; color: #047857; } .studio-capability-card--recorded-only .studio-capability-card__state { border-color: #fde68a; background: #fef3c7; color: #92400e; } .chat-pricing-current-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .chat-pricing-catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--ui-border); } .chat-pricing-catalog-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.85rem; padding: 0.7rem 0.8rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-muted); color: var(--ui-text); font-size: 0.82rem; font-weight: 750; text-align: left; transition: border-color 0.16s ease, background-color 0.16s ease; } .chat-pricing-catalog-toggle:hover { border-color: var(--ui-border-strong); background: var(--ui-surface); } .chat-pricing-catalog-toggle__meta { margin-left: auto; padding: 0.16rem 0.5rem; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-text-muted); font-size: 0.68rem; font-weight: 700; } .chat-pricing-catalog-title { margin: 0; color: var(--ui-text); font-size: 0.82rem; font-weight: 800; } .chat-pricing-catalog-copy { max-width: 34rem; margin: 0.25rem 0 0; color: var(--ui-text-muted); font-size: 0.72rem; line-height: 1.55; } .chat-pricing-catalog-search { width: min(17rem, 100%); padding: 0.48rem 0.65rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); background: var(--ui-surface-muted); color: var(--ui-text); font-size: 0.78rem; outline: none; } .chat-pricing-catalog-search::placeholder { color: var(--ui-text-soft); } .chat-pricing-catalog-search:focus { border-color: var(--ui-accent-border); box-shadow: 0 0 0 3px var(--ui-accent-soft); } .chat-pricing-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.65rem; max-height: min(25rem, 54vh); margin-top: 0.75rem; padding-right: 0.25rem; overflow-y: auto; } .chat-pricing-model-card { display: flex; flex-direction: column; height: 100%; padding: 0.78rem 0.86rem; border-radius: var(--ui-radius-md); } .chat-pricing-catalog-empty { margin: 0.75rem 0 0; padding: 0.8rem; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-xs); color: var(--ui-text-muted); font-size: 0.8rem; text-align: center; } [data-theme="dark"] .chat-composer__submit, [data-theme="dark"] .ui-theme-switcher__btn--active { color: var(--ui-bg); } [data-theme="dark"] .chat-message--system .chat-message__bubble { border-color: rgba(249, 226, 175, 0.28); } [data-theme="dark"] .chat-richtext code, [data-theme="dark"] .chat-richtext pre, [data-theme="dark"] .chat-richtext table, [data-theme="dark"] .chat-richtext img, [data-theme="dark"] .chat-richtext video { box-shadow: none; } @media (max-width: 1024px) { .chat-empty-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .chat-statusbar, .chat-thread-stage, .chat-composer-shell { padding-left: 0.85rem; padding-right: 0.85rem; } .chat-statusbar__controls, .chat-composer__lead, .chat-composer__toolbar { width: 100%; } .chat-statusbar__controls { justify-content: space-between; } .chat-composer__submit { width: 100%; } .chat-model-picker__trigger, .chat-model-picker__menu { width: 100%; } .chat-model-picker__menu { left: 50%; transform: translateX(-50%); } .chat-model-picker__group-grid { grid-template-columns: 1fr; } .chat-pricing-catalog-head { align-items: stretch; flex-direction: column; } .chat-pricing-catalog-search { width: 100%; } .chat-pricing-catalog { grid-template-columns: 1fr; max-height: 22rem; } } /* ── Sidebar ─────────────────────────────────────────────── */ .chat-sidebar { display: flex; flex-direction: column; width: 15rem; flex: none; height: 100%; min-height: 0; overflow: hidden; background: var(--ui-sidebar-bg); border-right: 1px solid var(--ui-sidebar-border); --studio-history-active-bg: #DED1C1; --studio-history-active-text: #2F261F; --studio-history-active-muted: #66584D; --studio-history-active-border: #CBB8A4; --studio-history-active-indicator: #13233E; } [data-theme="light"] .chat-sidebar { --studio-history-active-bg: #E6EEF8; --studio-history-active-text: #13233E; --studio-history-active-muted: #4B5565; --studio-history-active-border: #D5E0EE; --studio-history-active-indicator: #13233E; } [data-theme="dark"] .chat-sidebar { --studio-history-active-bg: #152235; --studio-history-active-text: #F4F7FB; --studio-history-active-muted: #BAC4D0; --studio-history-active-border: #28374D; --studio-history-active-indicator: #7C93FF; } .chat-sidebar__brand { flex-shrink: 0; padding: 0.85rem 0.75rem 0.75rem; background: var(--ui-sidebar-bg-deep); } .chat-sidebar__brand-top, .studio-workbench-rail-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .chat-sidebar__brand-row { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.15rem; } .chat-sidebar__logo { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 0.45rem; background: var(--ui-accent); color: var(--ui-sidebar-active-text); font-size: 0.7rem; font-weight: 800; } .chat-sidebar__brand-name { font-size: 0.88rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ui-sidebar-text); } .chat-sidebar__new-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; padding: 0.45rem 0.65rem; border-radius: var(--ui-radius-xs); border: 1px solid var(--ui-sidebar-border); background: var(--ui-sidebar-surface); color: var(--ui-sidebar-text); font-size: 0.8rem; font-weight: 600; } .chat-sidebar__new-btn:hover { opacity: 0.9; } .chat-sidebar__new-icon { font-size: 1rem; font-weight: 800; line-height: 1; } .studio-workspace-icon-btn, .studio-workspace-dock-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--ui-border); border-radius: 0.65rem; background: var(--ui-surface-soft); color: var(--ui-text-muted); transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .studio-workspace-icon-btn { width: 1.8rem; height: 1.8rem; border-color: var(--ui-sidebar-border); background: var(--ui-sidebar-surface); color: var(--ui-sidebar-text-muted); } .studio-workspace-icon-btn:hover, .studio-workspace-dock-btn:hover { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text); transform: translateY(-1px); } .studio-workspace-sidebar-dock, .studio-workbench-rail-dock { display: none; flex: 0 0 3.25rem; width: 3.25rem; height: 100%; flex-direction: column; align-items: center; gap: 0.55rem; padding: 0.8rem 0.55rem; border-right: 1px solid var(--ui-sidebar-border); background: var(--ui-sidebar-bg-deep); } .studio-workbench-rail-dock { border-right: 0; border-left: 1px solid var(--studio-shell-border); background: var(--studio-shell-surface-muted); } [data-testid="studio-image-workspace-shell"].studio-workspace--sidebar-collapsed .chat-sidebar, [data-testid="studio-video-workspace-shell"].studio-workspace--sidebar-collapsed .chat-sidebar { display: none; } [data-testid="studio-image-workspace-shell"].studio-workspace--sidebar-collapsed .studio-workspace-sidebar-dock, [data-testid="studio-video-workspace-shell"].studio-workspace--sidebar-collapsed .studio-workspace-sidebar-dock, [data-testid="studio-image-workspace-shell"].studio-workspace--rail-collapsed .studio-workbench-rail-dock, [data-testid="studio-video-workspace-shell"].studio-workspace--rail-collapsed .studio-workbench-rail-dock { display: flex; } [data-testid="studio-image-workspace-shell"].studio-workspace--rail-collapsed .studio-workbench-rail-shell, [data-testid="studio-video-workspace-shell"].studio-workspace--rail-collapsed .studio-workbench-rail-shell { display: none; } html.studio-precollapse-sidebar [data-testid="studio-image-workspace-shell"] .chat-sidebar, html.studio-precollapse-sidebar [data-testid="studio-video-workspace-shell"] .chat-sidebar, html.studio-precollapse-rail [data-testid="studio-image-workspace-shell"] .studio-workbench-rail-shell, html.studio-precollapse-rail [data-testid="studio-video-workspace-shell"] .studio-workbench-rail-shell { display: none !important; } html.studio-precollapse-sidebar [data-testid="studio-image-workspace-shell"] .studio-workspace-sidebar-dock, html.studio-precollapse-sidebar [data-testid="studio-video-workspace-shell"] .studio-workspace-sidebar-dock, html.studio-precollapse-rail [data-testid="studio-image-workspace-shell"] .studio-workbench-rail-dock, html.studio-precollapse-rail [data-testid="studio-video-workspace-shell"] .studio-workbench-rail-dock { display: flex !important; } html.studio-precollapse-sidebar [data-testid="studio-image-workspace-shell"] .studio-workbench-composer, html.studio-precollapse-rail [data-testid="studio-image-workspace-shell"] .studio-workbench-composer, html.studio-precollapse-sidebar [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-shell > .mx-auto, html.studio-precollapse-rail [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-shell > .mx-auto, html.studio-precollapse-sidebar [data-testid="studio-video-workspace-shell"] .chat-composer, html.studio-precollapse-rail [data-testid="studio-video-workspace-shell"] .chat-composer { max-width: min(86rem, calc(100vw - 8rem)) !important; } html.studio-precollapse-sidebar:not(.studio-precollapse-rail) [data-testid="studio-image-workspace-shell"] .studio-workbench-composer, html.studio-precollapse-sidebar:not(.studio-precollapse-rail) [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-shell > .mx-auto, html.studio-precollapse-sidebar:not(.studio-precollapse-rail) [data-testid="studio-video-workspace-shell"] .chat-composer { max-width: min(82rem, calc(100vw - 24rem)) !important; } .chat-sidebar__list-section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0.6rem; background: var(--ui-sidebar-surface); } .chat-sidebar__list-header { flex: 0 0 auto; display: flex; justify-content: space-between; padding: 0 0.45rem 0.45rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-sidebar-text-muted); } .chat-sidebar__empty { margin: 0 0.15rem; padding: 0.6rem 0.55rem; border: 1px dashed var(--ui-sidebar-border); border-radius: var(--ui-radius-xs); color: var(--ui-sidebar-text-muted); } .chat-sidebar__empty-title { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--ui-sidebar-text); } .chat-sidebar__empty-desc { margin: 0.25rem 0 0; font-size: 0.7rem; line-height: 1.5; } .chat-sidebar__list { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; padding-bottom: 0.35rem; } .chat-sidebar__row { position: relative; display: block; } .chat-sidebar__row + .chat-sidebar__row { margin-top: 0.15rem; } .chat-sidebar__row--active .chat-sidebar__trash-btn { color: var(--studio-history-active-muted); border-color: transparent; background: transparent; } .chat-sidebar__item { position: relative; display: block; width: 100%; min-width: 0; padding: 0.45rem 2.35rem 0.45rem 0.65rem; border: 1px solid transparent; border-radius: var(--ui-radius-xs); color: var(--ui-sidebar-text-muted); } .chat-sidebar__item:hover { background: var(--ui-sidebar-hover); } .chat-sidebar__item--active { background: var(--studio-history-active-bg); border-color: var(--studio-history-active-border); color: var(--studio-history-active-text); font-weight: 600; } .chat-sidebar__item--active::before { content: ""; position: absolute; left: 0.3rem; top: 0.55rem; bottom: 0.55rem; width: 3px; border-radius: 999px; background: var(--studio-history-active-indicator); } .chat-sidebar__trash-form { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.16s ease; } .chat-sidebar__row:hover .chat-sidebar__trash-form { opacity: 1; pointer-events: auto; } .chat-sidebar__trash-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ui-sidebar-text-muted); transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .chat-sidebar__trash-btn:hover { color: var(--ui-danger-text); background: var(--ui-sidebar-hover); border-color: color-mix(in srgb, var(--ui-danger-text) 24%, transparent); } .chat-sidebar__item-title { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ui-sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-sidebar__item--active .chat-sidebar__item-title { color: var(--studio-history-active-text); } .chat-sidebar__item-preview { margin: 0.1rem 0 0; font-size: 0.7rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-sidebar__item--active .chat-sidebar__item-preview { color: var(--studio-history-active-muted); } .chat-sidebar__item-time { margin: 0.25rem 0 0; color: var(--ui-sidebar-text-muted); font-size: 0.68rem; line-height: 1.4; } .chat-sidebar__item--active .chat-sidebar__item-time { color: var(--studio-history-active-muted); } .chat-sidebar__foot { flex: 0 0 auto; min-height: 0; padding: 0.5rem 0.6rem 0.6rem; border-top: 1px solid var(--ui-sidebar-border); } .chat-sidebar__nav { display: flex; flex-direction: column; gap: 0.1rem; } .chat-sidebar__nav-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.4rem; border-radius: var(--ui-radius-xs); font-size: 0.76rem; font-weight: 600; color: var(--ui-sidebar-text-muted); } .chat-sidebar__nav-link:hover { background: var(--ui-sidebar-hover); color: var(--ui-sidebar-text); } .chat-sidebar__nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 0.25rem; background: var(--ui-sidebar-surface); color: var(--ui-sidebar-text-muted); font-size: 0.55rem; font-weight: 800; } .chat-sidebar__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ui-sidebar-border); } .chat-sidebar__account { position: relative; margin-top: 0.4rem; } .chat-sidebar__account-trigger { display: flex; align-items: center; gap: 0.4rem; width: 100%; min-height: 2rem; padding: 0.35rem 0.3rem; border-radius: 0.45rem; cursor: pointer; color: var(--ui-sidebar-text); list-style: none; } .chat-sidebar__account-trigger:hover { background: var(--ui-sidebar-hover); } .chat-sidebar__account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--ui-accent); color: var(--ui-sidebar-active-text); font-size: 0.55rem; font-weight: 800; } .chat-sidebar__account-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; font-weight: 600; } /* ── Welcome (空状态居中，不做卡片) ────────────────────── */ .chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; text-align: center; padding: 2rem 1rem; } .chat-welcome__title { margin: 0; color: var(--ui-text); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.04em; } .chat-welcome__desc { max-width: 28rem; margin: 0.6rem 0 0; color: var(--ui-text-muted); font-size: 0.92rem; line-height: 1.7; } .chat-welcome__starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1.4rem; } .chat-welcome__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 1rem; } .chat-welcome__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border: 1px solid var(--ui-border); border-radius: 0.6rem; background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 0.82rem; font-weight: 600; } .chat-welcome__link:hover { background: var(--ui-surface); color: var(--ui-text); } /* ── Studio Workbench Theme Harmonization ───────────────── */ /* * Image/video workbenches intentionally reuse the chat shell. Their markup * still carries a number of Tailwind utility classes such as bg-white and * text-slate-* that look too detached in warm/dark themes. We keep the * structure intact and remap those surfaces to theme tokens only inside the * workbench shells. */ [data-testid="studio-image-workspace-shell"], [data-testid="studio-video-workspace-shell"] { --studio-shell-surface: var(--ui-surface); --studio-shell-surface-soft: var(--ui-surface-soft); --studio-shell-surface-muted: var(--ui-surface-muted); --studio-shell-border: var(--ui-border); --studio-shell-border-strong: var(--ui-border-strong); --studio-shell-text: var(--ui-text); --studio-shell-text-muted: var(--ui-text-muted); --studio-shell-text-soft: var(--ui-text-soft); --studio-shell-tint: rgba(99, 102, 241, 0.06); --studio-shell-glass: linear-gradient(180deg, var(--ui-surface-soft), rgba(255, 255, 255, 0.02)); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"], [data-theme="dark"] [data-testid="studio-video-workspace-shell"] { --studio-shell-surface: #302b27; --studio-shell-surface-soft: rgba(48, 43, 39, 0.94); --studio-shell-surface-muted: #262220; --studio-shell-border: #443e3a; --studio-shell-border-strong: #5a5450; --studio-shell-text: #ebe9e8; --studio-shell-text-muted: #b0aaa5; --studio-shell-text-soft: #7a7470; --studio-shell-tint: rgba(195, 149, 92, 0.05); --studio-shell-glass: #302b27; } [data-testid="studio-image-workspace-shell"] .chat-thread-stage, [data-testid="studio-video-workspace-shell"] .chat-thread-stage { background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.04), transparent 34%), linear-gradient(180deg, transparent, transparent), var(--ui-bg); } [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-shell, [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-shell { padding-top: 0.75rem; padding-bottom: 0.15rem; } [data-testid="studio-image-workspace-shell"] .chat-composer-shell, [data-testid="studio-video-workspace-shell"] .chat-composer-shell { background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--ui-bg-soft) 18%, var(--ui-bg-soft) 100%); } [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-shell, [data-testid="studio-video-workspace-shell"] .studio-workbench-composer-shell { margin-top: -0.3rem; padding-top: 0.3rem; border-top-color: color-mix(in srgb, var(--studio-shell-border) 72%, transparent); } [data-testid="studio-image-workspace-shell"] .studio-workbench-composer { width: 100%; max-width: min(74rem, calc(100vw - 31rem)); } [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-top { display: grid; gap: 1rem; align-items: stretch; } @media (min-width: 1280px) { [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-top { grid-template-columns: minmax(0, 1fr) minmax(20rem, 22rem); } } @media (max-width: 1279px) { [data-testid="studio-image-workspace-shell"] .studio-workbench-composer { max-width: 50rem; } [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-top { grid-template-columns: minmax(0, 1fr) !important; } } [data-testid="studio-image-workspace-shell"] .studio-workbench-main-prompt, [data-testid="studio-image-workspace-shell"] .studio-workbench-reference-palette { min-height: 22.5rem; } [data-testid="studio-image-workspace-shell"] .studio-workbench-main-prompt { display: flex; flex-direction: column; } [data-testid="studio-image-workspace-shell"] .studio-workbench-main-prompt .chat-composer__textarea { flex: 1 1 auto; min-height: 10rem; } [data-testid="studio-image-workspace-shell"] .chat-composer__frame, [data-testid="studio-video-workspace-shell"] .chat-composer__frame { border-color: var(--studio-shell-border); background: var(--studio-shell-glass); box-shadow: var(--ui-shadow-md); backdrop-filter: blur(18px); } [data-testid="studio-image-workspace-shell"] .chat-composer__foot, [data-testid="studio-video-workspace-shell"] .chat-composer__foot { opacity: 1; } [data-testid="studio-image-workspace-shell"] .bg-white, [data-testid="studio-video-workspace-shell"] .bg-white { background: var(--studio-shell-surface) !important; } [data-testid="studio-image-workspace-shell"] .bg-white\/70, [data-testid="studio-image-workspace-shell"] .bg-white\/80, [data-testid="studio-image-workspace-shell"] .bg-white\/88, [data-testid="studio-video-workspace-shell"] .bg-white\/70, [data-testid="studio-video-workspace-shell"] .bg-white\/80, [data-testid="studio-video-workspace-shell"] .bg-white\/88 { background: var(--studio-shell-surface-soft) !important; backdrop-filter: blur(16px); } [data-testid="studio-image-workspace-shell"] .bg-stone-50, [data-testid="studio-image-workspace-shell"] .bg-stone-50\/70, [data-testid="studio-image-workspace-shell"] .bg-slate-50, [data-testid="studio-image-workspace-shell"] .bg-slate-100, [data-testid="studio-video-workspace-shell"] .bg-stone-50, [data-testid="studio-video-workspace-shell"] .bg-stone-50\/70, [data-testid="studio-video-workspace-shell"] .bg-slate-50, [data-testid="studio-video-workspace-shell"] .bg-slate-100 { background: var(--studio-shell-surface-muted) !important; } [data-testid="studio-image-workspace-shell"] .border-slate-200, [data-testid="studio-image-workspace-shell"] .border-slate-200\/80, [data-testid="studio-video-workspace-shell"] .border-slate-200, [data-testid="studio-video-workspace-shell"] .border-slate-200\/80 { border-color: var(--studio-shell-border) !important; } [data-testid="studio-image-workspace-shell"] .text-slate-900, [data-testid="studio-image-workspace-shell"] .text-slate-800, [data-testid="studio-image-workspace-shell"] .text-slate-700, [data-testid="studio-video-workspace-shell"] .text-slate-900, [data-testid="studio-video-workspace-shell"] .text-slate-800, [data-testid="studio-video-workspace-shell"] .text-slate-700 { color: var(--studio-shell-text) !important; } [data-testid="studio-image-workspace-shell"] .text-slate-600, [data-testid="studio-image-workspace-shell"] .text-slate-500, [data-testid="studio-video-workspace-shell"] .text-slate-600, [data-testid="studio-video-workspace-shell"] .text-slate-500 { color: var(--studio-shell-text-muted) !important; } [data-testid="studio-image-workspace-shell"] .text-slate-400, [data-testid="studio-video-workspace-shell"] .text-slate-400 { color: var(--studio-shell-text-soft) !important; } [data-testid="studio-image-workspace-shell"] .hover\:border-slate-300:hover, [data-testid="studio-video-workspace-shell"] .hover\:border-slate-300:hover { border-color: var(--studio-shell-border-strong) !important; } [data-testid="studio-image-workspace-shell"] .hover\:text-slate-700:hover, [data-testid="studio-video-workspace-shell"] .hover\:text-slate-700:hover, [data-testid="studio-image-workspace-shell"] .hover\:text-slate-900:hover, [data-testid="studio-video-workspace-shell"] .hover\:text-slate-900:hover { color: var(--studio-shell-text) !important; } .studio-workbench-stage-card, .studio-workbench-note-card, .studio-workbench-options, .studio-workbench-reference, .studio-workbench-asset-card, .studio-workbench-asset-empty, .studio-workbench-rail-head { border-color: var(--studio-shell-border) !important; box-shadow: var(--ui-shadow-sm); } .studio-workbench-stage-card, .studio-workbench-note-card, .studio-workbench-options, .studio-workbench-asset-card--current, .studio-workbench-asset-empty { background: var(--studio-shell-glass) !important; backdrop-filter: blur(16px); } .studio-workbench-stage-card { box-shadow: var(--ui-shadow-md); } .studio-workbench-stage-empty--compact { min-height: clamp(21rem, 47vh, 31rem); } .studio-workbench-stage-meta, .studio-workbench-asset-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 12%), var(--studio-shell-glass); } .studio-workbench-stage-meta { border-top: 1px solid var(--studio-shell-border); } .studio-workbench-asset-body { border-top: 1px solid rgba(255, 255, 255, 0.04); } .studio-workbench-note-card, .studio-workbench-options { position: relative; } .studio-workbench-note-card::before, .studio-workbench-options::before, .studio-workbench-rail-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--studio-shell-tint), transparent 42%); border-radius: inherit; } .studio-workbench-reference, .studio-workbench-asset-card--history, .studio-workbench-rail, .studio-workbench-tabs { background: var(--studio-shell-surface-muted) !important; } .studio-workbench-reference-palette--disabled { border-color: #cbd5e1 !important; background: #f1f5f9 !important; color: #64748b !important; } .studio-workbench-reference-palette--disabled .studio-workbench-reference, .studio-workbench-reference-palette--disabled .studio-workbench-reference--empty { opacity: 0.72; } .studio-workbench-reference-upload--disabled { cursor: not-allowed !important; border-color: #cbd5e1 !important; background: #f8fafc !important; color: #64748b !important; } .studio-workbench-reference-upload--disabled input[type="file"] { cursor: not-allowed !important; } .studio-workbench-submit--disabled { cursor: not-allowed !important; opacity: 0.55; } .studio-workbench-asset-card--reference-active { position: relative; border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18), var(--ui-shadow-sm) !important; } .studio-workbench-asset-card--reference-active .studio-workbench-asset-body { background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent 32%), var(--studio-shell-glass); } .studio-workbench-reference--empty { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--studio-shell-surface-muted) !important; } .studio-workbench-chip { background: var(--studio-shell-surface) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text-muted) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .studio-workbench-chip:hover { background: var(--studio-shell-surface-soft) !important; border-color: var(--studio-shell-border-strong) !important; color: var(--studio-shell-text) !important; } .studio-workbench-style-option { display: inline-flex; } .studio-workbench-style-option .studio-workbench-chip { align-items: center; justify-content: center; min-height: 2rem; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .studio-workbench-style-option:hover .studio-workbench-chip { transform: translateY(-1px); } .studio-workbench-style-option.is-selected .studio-workbench-chip, .studio-workbench-style-option input:checked + .studio-workbench-chip { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: var(--ui-accent-contrast) !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-accent) 18%, transparent); } .studio-workbench-toggle { background: var(--studio-shell-surface) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text-muted) !important; } .peer:checked + .studio-workbench-toggle { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: #fff !important; box-shadow: var(--ui-shadow-sm); } .studio-workbench-rail { border-color: var(--studio-shell-border) !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--studio-shell-tint) 120%), var(--studio-shell-surface-muted) !important; } .studio-workbench-rail-shell { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.04); } .studio-workbench-rail-head { background: linear-gradient(180deg, var(--studio-shell-surface-soft), rgba(255, 255, 255, 0.02)), var(--studio-shell-surface-muted) !important; } .studio-workbench-rail-titlebar .studio-workspace-icon-btn { border-color: var(--studio-shell-border); background: var(--studio-shell-surface); color: var(--studio-shell-text-muted); } .studio-workbench-tabs { padding: 0.25rem; } .studio-workbench-tab { flex: 1 1 0%; border: 1px solid transparent; border-radius: 0.75rem; padding: 0.55rem 0.75rem; color: var(--studio-shell-text-soft); background: transparent; font-size: 0.75rem; font-weight: 700; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .studio-workbench-tab:hover { color: var(--studio-shell-text); } .studio-workbench-tab--active { color: var(--studio-shell-text); background: var(--studio-shell-surface); border-color: var(--studio-shell-border); box-shadow: var(--ui-shadow-sm); } .studio-pricing-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; border: 1px solid var(--studio-shell-border); border-radius: 1rem; background: var(--studio-shell-surface-soft); padding: 0.75rem 0.85rem; box-shadow: var(--ui-shadow-sm); } .studio-pricing-trigger__title { color: var(--studio-shell-text); font-size: 0.82rem; font-weight: 800; } .studio-pricing-trigger__hint { margin-top: 0.18rem; color: var(--studio-shell-text-muted); font-size: 0.72rem; line-height: 1.45; } .studio-pricing-trigger__button { flex: 0 0 auto; border: 1px solid var(--studio-shell-border-strong); border-radius: 999px; background: var(--studio-shell-surface); color: var(--studio-shell-text); padding: 0.48rem 0.75rem; font-size: 0.75rem; font-weight: 800; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; } .studio-pricing-trigger__button:hover { background: var(--studio-shell-surface-muted); border-color: var(--ui-accent-border); transform: translateY(-1px); } .artifact-download-dialog { width: min(30rem, calc(100vw - 2rem)); max-width: none; border: 0; padding: 0; background: transparent; color: var(--ui-text); } .artifact-download-dialog::backdrop { background: rgba(15, 17, 21, 0.44); backdrop-filter: blur(8px); } .artifact-download-dialog__panel { overflow: hidden; border: 1px solid var(--ui-border); border-radius: 1.1rem; background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); } .artifact-download-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-soft); padding: 1rem 1.05rem; } .artifact-download-dialog__eyebrow { color: var(--ui-text-soft); font-size: 0.72rem; font-weight: 850; line-height: 1.35; } .artifact-download-dialog__title { margin-top: 0.15rem; color: var(--ui-text); font-size: 1.05rem; font-weight: 900; line-height: 1.35; } .artifact-download-dialog__close { flex: 0 0 auto; width: 2rem; height: 2rem; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-muted); font-size: 1.1rem; font-weight: 800; line-height: 1; } .artifact-download-dialog__body { padding: 1rem 1.05rem 0.35rem; } .artifact-download-dialog__format { display: inline-flex; align-items: center; min-height: 2rem; border: 1px solid var(--ui-accent-border); border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); padding: 0.4rem 0.72rem; font-size: 0.82rem; font-weight: 900; line-height: 1.35; } .artifact-download-dialog__message { margin-top: 0.75rem; color: var(--ui-text-muted); font-size: 0.84rem; line-height: 1.65; } .artifact-download-dialog__actions { display: flex; justify-content: flex-end; gap: 0.65rem; padding: 0.9rem 1.05rem 1.05rem; } .artifact-download-dialog__button { min-height: 2.4rem; border-radius: 999px; padding: 0.55rem 1rem; font-size: 0.84rem; font-weight: 850; } .artifact-download-dialog__button--secondary { border: 1px solid var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text-muted); } .artifact-download-dialog__button--primary { border: 1px solid var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-contrast); } .artifact-download-dialog__button:hover, .artifact-download-dialog__close:hover { transform: translateY(-1px); } .studio-pricing-dialog { width: min(44rem, calc(100vw - 2rem)); max-width: none; border: 0; padding: 0; background: transparent; color: var(--ui-text); } .studio-pricing-dialog::backdrop { background: rgba(15, 17, 21, 0.44); backdrop-filter: blur(8px); } .studio-pricing-dialog__panel { overflow: hidden; border: 1px solid var(--ui-border); border-radius: 1.25rem; background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); } .studio-pricing-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-soft); padding: 1rem; } .studio-pricing-dialog__eyebrow { color: var(--ui-text-soft); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; } .studio-pricing-dialog__title { margin-top: 0.15rem; color: var(--ui-text); font-size: 1.05rem; font-weight: 900; } .studio-pricing-dialog__description { margin-top: 0.35rem; max-width: 34rem; color: var(--ui-text-muted); font-size: 0.78rem; line-height: 1.55; } .studio-pricing-dialog__close { border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text); padding: 0.45rem 0.7rem; font-size: 0.75rem; font-weight: 800; } .studio-pricing-dialog__list { max-height: min(64vh, 32rem); overflow-y: auto; padding: 0.5rem 1rem 1rem; } .studio-pricing-dialog__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ui-border); padding: 0.78rem 0; } .studio-pricing-dialog__row:last-child { border-bottom: 0; } .studio-pricing-dialog__model { min-width: 0; } .studio-pricing-dialog__model-name { color: var(--ui-text); font-size: 0.9rem; font-weight: 900; } .studio-pricing-dialog__model-note { margin-top: 0.15rem; color: var(--ui-text-muted); font-size: 0.76rem; line-height: 1.45; } .studio-pricing-dialog__price { flex: 0 0 auto; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-surface-muted); color: var(--ui-text); padding: 0.45rem 0.72rem; font-size: 0.78rem; font-weight: 900; } @media (max-width: 640px) { .studio-pricing-trigger, .studio-pricing-dialog__header, .studio-pricing-dialog__row { align-items: stretch; flex-direction: column; } .studio-pricing-trigger__button, .studio-pricing-dialog__close, .studio-pricing-dialog__price { width: fit-content; } } .studio-workbench-rail .ui-button--secondary { background: var(--studio-shell-surface) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text) !important; } .studio-workbench-rail .ui-button--secondary:hover { background: var(--studio-shell-surface-soft) !important; border-color: var(--studio-shell-border-strong) !important; } .studio-workbench-rail .ui-button--soft { background: var(--studio-shell-tint) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text) !important; } .studio-workbench-rail .ui-button--soft:hover { background: var(--studio-shell-surface) !important; } .studio-workbench-rail .ui-button--ghost { border-color: var(--studio-shell-border) !important; background: transparent !important; color: var(--studio-shell-text-muted) !important; } .studio-workbench-rail .ui-button--ghost:hover { background: var(--studio-shell-surface) !important; color: var(--studio-shell-text) !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-thread-stage, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-thread-stage { background: #141210; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-composer-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-composer-shell { background: linear-gradient(180deg, transparent, #141210 20%); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-shell { padding-bottom: 0; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-composer-shell { margin-top: -0.45rem; padding-top: 0.2rem; background: linear-gradient(180deg, transparent, #141210 20%); border-top-color: #443e3a; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-composer__frame, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-composer__frame { background: #302b27; border-color: #443e3a; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-empty, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tabs, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tabs { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-empty { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-meta, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-meta, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-body, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-body { background: #262220; border-top-color: #443e3a; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-note-card { background: #302b27 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-options { background: #262220 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-card--history, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-card--history { background: #262220 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference--empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference--empty, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-empty { background: #302b27 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail { background: #1c1917 !important; border-color: #302b27 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail-head { background: #262220 !important; border-bottom-color: #443e3a !important; backdrop-filter: none; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tabs, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tabs { background: #1a1816 !important; border-color: #443e3a !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tab, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tab { color: #78716c; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tab--active, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tab--active { background: #302b27; border-color: #443e3a; color: #e7e5e4; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-chip, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-chip { background: #302b27 !important; border-color: #443e3a !important; color: #a8a29e !important; box-shadow: none; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-toggle, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-toggle { background: #262220 !important; border-color: #443e3a !important; color: #a8a29e !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .peer:checked + .studio-workbench-toggle, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .peer:checked + .studio-workbench-toggle { background: #443e3a !important; border-color: #5a5450 !important; color: #fafaf9 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-welcome__title, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-welcome__title { color: #e7e5e4; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-welcome__desc, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-welcome__desc { color: #a8a29e; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--secondary, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--secondary { background: #302b27; border-color: #443e3a; color: #e7e5e4; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--secondary:hover, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--secondary:hover { background: #443e3a; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--soft, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--soft { background: #443e3a; border-color: #5a5450; color: #d6d3d1; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--ghost, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--ghost { color: #a8a29e; border-color: #443e3a; } /* ── AFF admin console surfaces ───────────────────────────── */ .aff-admin { color: var(--ui-text); } .aff-admin-panel, .aff-admin-stat { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); } .aff-admin-inset { background: var(--ui-surface-muted); border-color: var(--ui-border); color: var(--ui-text); } .aff-admin .ui-table-wrap, .aff-admin .ui-table-wrap--scroll { background: var(--ui-surface); border-color: var(--ui-border); } .aff-admin th { background: var(--ui-surface-muted); color: var(--ui-text-muted); } .aff-admin td { color: var(--ui-text); } .aff-admin td, .aff-admin th { border-color: var(--ui-border); } .aff-admin pre { background: var(--ui-surface-muted); border-color: var(--ui-border); color: var(--ui-text); } [data-theme="dark"] .aff-admin-panel, [data-theme="dark"] .aff-admin-stat, [data-theme="dark"] .aff-admin .ui-table-wrap, [data-theme="dark"] .aff-admin .ui-table-wrap--scroll { background: var(--ui-surface); border-color: var(--ui-border); } [data-theme="dark"] .aff-admin-inset, [data-theme="dark"] .aff-admin th { background: var(--ui-surface-muted); border-color: var(--ui-border); } /* ── Admin dark utility bridge ────────────────────────────── */ [data-theme="dark"] .admin-console-shell { --admin-canvas: #0F1115; --admin-panel: #171C24; --admin-panel-soft: #1D2430; --admin-panel-muted: #202936; --admin-border: #2B3441; --admin-border-strong: #3B4658; --admin-text: #F3F5F7; --admin-text-muted: #C4CEDA; --admin-text-soft: #95A1B0; --admin-warn-panel: var(--admin-panel); --admin-warn-border: var(--admin-border); --admin-danger-panel: var(--admin-panel); --admin-danger-border: var(--admin-border); --admin-success-panel: var(--admin-panel); --admin-success-border: var(--admin-border); background: var(--admin-canvas) !important; } [data-theme="dark"] .admin-console-shell .console-main, [data-theme="dark"] .admin-console-shell .console-content { background: var(--admin-canvas) !important; color: var(--admin-text); } [data-theme="dark"] .admin-console-shell .ui-page-title, [data-theme="dark"] .admin-console-shell .ui-page-subtitle, [data-theme="dark"] .admin-console-shell .ui-page-kicker { text-shadow: none; } [data-theme="dark"] .admin-console-shell .bg-white, [data-theme="dark"] .admin-console-shell .bg-white\/50, [data-theme="dark"] .admin-console-shell .bg-white\/60, [data-theme="dark"] .admin-console-shell .bg-white\/70, [data-theme="dark"] .admin-console-shell .bg-white\/80, [data-theme="dark"] .admin-console-shell .bg-white\/90, [data-theme="dark"] .admin-console-shell .bg-white\/95, [data-theme="dark"] .admin-console-shell .bg-white\/96, [data-theme="dark"] .admin-console-shell .ui-card, [data-theme="dark"] .admin-console-shell .ui-table-wrap, [data-theme="dark"] .admin-console-shell .ui-table-wrap--scroll { background: var(--admin-panel) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } [data-theme="dark"] .admin-console-shell .bg-slate-50, [data-theme="dark"] .admin-console-shell .bg-slate-50\/50, [data-theme="dark"] .admin-console-shell .bg-slate-50\/60, [data-theme="dark"] .admin-console-shell .bg-slate-50\/70, [data-theme="dark"] .admin-console-shell .bg-slate-100, [data-theme="dark"] .admin-console-shell .bg-stone-50, [data-theme="dark"] .admin-console-shell .bg-stone-50\/70, [data-theme="dark"] .admin-console-shell .ui-card--muted, [data-theme="dark"] .admin-console-shell .ui-empty-state { background: var(--admin-panel-soft) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } [data-theme="dark"] .admin-console-shell .bg-slate-200, [data-theme="dark"] .admin-console-shell .bg-slate-200\/50, [data-theme="dark"] .admin-console-shell .bg-slate-200\/60, [data-theme="dark"] .admin-console-shell .bg-slate-200\/70 { background: var(--admin-panel-muted) !important; } [data-theme="dark"] .admin-console-shell .hover\:bg-white:hover, [data-theme="dark"] .admin-console-shell .hover\:bg-slate-50:hover, [data-theme="dark"] .admin-console-shell .hover\:bg-slate-100:hover { background: var(--admin-panel-muted) !important; } [data-theme="dark"] .admin-console-shell .bg-amber-50, [data-theme="dark"] .admin-console-shell .bg-amber-50\/60, [data-theme="dark"] .admin-console-shell .bg-amber-50\/70, [data-theme="dark"] .admin-console-shell .bg-amber-50\/80, [data-theme="dark"] .admin-console-shell .bg-amber-100, [data-theme="dark"] .admin-console-shell .bg-yellow-50, [data-theme="dark"] .admin-console-shell .bg-yellow-50\/60, [data-theme="dark"] .admin-console-shell .bg-yellow-50\/70, [data-theme="dark"] .admin-console-shell .bg-yellow-50\/80, [data-theme="dark"] .admin-console-shell .bg-yellow-100, [data-theme="dark"] .admin-console-shell .bg-orange-50, [data-theme="dark"] .admin-console-shell .bg-orange-50\/70, [data-theme="dark"] .admin-console-shell .bg-orange-50\/80, [data-theme="dark"] .admin-console-shell .bg-orange-100 { background: var(--admin-warn-panel) !important; border-color: var(--admin-warn-border) !important; } [data-theme="dark"] .admin-console-shell .bg-rose-50, [data-theme="dark"] .admin-console-shell .bg-rose-50\/60, [data-theme="dark"] .admin-console-shell .bg-rose-50\/70, [data-theme="dark"] .admin-console-shell .bg-rose-50\/80, [data-theme="dark"] .admin-console-shell .bg-rose-100, [data-theme="dark"] .admin-console-shell .bg-red-50, [data-theme="dark"] .admin-console-shell .bg-red-50\/60, [data-theme="dark"] .admin-console-shell .bg-red-50\/70, [data-theme="dark"] .admin-console-shell .bg-red-50\/80, [data-theme="dark"] .admin-console-shell .bg-red-100 { background: var(--admin-danger-panel) !important; border-color: var(--admin-danger-border) !important; } [data-theme="dark"] .admin-console-shell .bg-emerald-50, [data-theme="dark"] .admin-console-shell .bg-emerald-50\/60, [data-theme="dark"] .admin-console-shell .bg-emerald-50\/70, [data-theme="dark"] .admin-console-shell .bg-emerald-50\/80, [data-theme="dark"] .admin-console-shell .bg-emerald-100, [data-theme="dark"] .admin-console-shell .bg-green-50, [data-theme="dark"] .admin-console-shell .bg-green-50\/60, [data-theme="dark"] .admin-console-shell .bg-green-50\/70, [data-theme="dark"] .admin-console-shell .bg-green-50\/80, [data-theme="dark"] .admin-console-shell .bg-green-100 { background: var(--admin-success-panel) !important; border-color: var(--admin-success-border) !important; } [data-theme="dark"] .admin-console-shell .bg-indigo-50, [data-theme="dark"] .admin-console-shell .bg-indigo-50\/60, [data-theme="dark"] .admin-console-shell .bg-indigo-50\/70, [data-theme="dark"] .admin-console-shell .bg-indigo-50\/80, [data-theme="dark"] .admin-console-shell .bg-indigo-100, [data-theme="dark"] .admin-console-shell .bg-blue-50, [data-theme="dark"] .admin-console-shell .bg-blue-50\/60, [data-theme="dark"] .admin-console-shell .bg-blue-50\/70, [data-theme="dark"] .admin-console-shell .bg-blue-50\/80, [data-theme="dark"] .admin-console-shell .bg-blue-100, [data-theme="dark"] .admin-console-shell .bg-violet-50, [data-theme="dark"] .admin-console-shell .bg-violet-50\/70, [data-theme="dark"] .admin-console-shell .bg-violet-50\/80, [data-theme="dark"] .admin-console-shell .bg-violet-100, [data-theme="dark"] .admin-console-shell .bg-purple-50, [data-theme="dark"] .admin-console-shell .bg-purple-50\/70, [data-theme="dark"] .admin-console-shell .bg-purple-50\/80, [data-theme="dark"] .admin-console-shell .bg-purple-100 { background: var(--admin-panel) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } [data-theme="dark"] .admin-console-shell .border-slate-50, [data-theme="dark"] .admin-console-shell .border-slate-100, [data-theme="dark"] .admin-console-shell .border-slate-200, [data-theme="dark"] .admin-console-shell .border-slate-200\/50, [data-theme="dark"] .admin-console-shell .border-slate-200\/60, [data-theme="dark"] .admin-console-shell .border-slate-200\/70, [data-theme="dark"] .admin-console-shell .border-slate-300, [data-theme="dark"] .admin-console-shell .border-stone-200, [data-theme="dark"] .admin-console-shell .divide-slate-100 > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .admin-console-shell .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--admin-border) !important; } [data-theme="dark"] .admin-console-shell .text-slate-950, [data-theme="dark"] .admin-console-shell .text-slate-900, [data-theme="dark"] .admin-console-shell .text-slate-800, [data-theme="dark"] .admin-console-shell .text-slate-700, [data-theme="dark"] .admin-console-shell .text-stone-900, [data-theme="dark"] .admin-console-shell .text-stone-800 { color: var(--admin-text) !important; } [data-theme="dark"] .admin-console-shell .text-slate-600, [data-theme="dark"] .admin-console-shell .text-slate-500, [data-theme="dark"] .admin-console-shell .text-stone-600, [data-theme="dark"] .admin-console-shell .text-stone-500 { color: var(--admin-text-muted) !important; } [data-theme="dark"] .admin-console-shell .text-slate-400, [data-theme="dark"] .admin-console-shell .text-slate-300, [data-theme="dark"] .admin-console-shell .text-stone-400, [data-theme="dark"] .admin-console-shell .text-stone-300 { color: var(--admin-text-soft) !important; } [data-theme="dark"] .admin-console-shell th { background: var(--admin-panel-muted) !important; border-color: var(--admin-border) !important; color: var(--admin-text-muted) !important; } [data-theme="dark"] .admin-console-shell td { border-color: var(--admin-border) !important; color: var(--admin-text) !important; } [data-theme="dark"] .admin-console-shell .ui-table-wrap, [data-theme="dark"] .admin-console-shell .ui-table-wrap--scroll, [data-theme="dark"] .admin-console-shell .shadow-sm, [data-theme="dark"] .admin-console-shell .shadow, [data-theme="dark"] .admin-console-shell .shadow-md, [data-theme="dark"] .admin-console-shell .shadow-lg { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important; } [data-theme="dark"] .admin-console-shell input[type="text"], [data-theme="dark"] .admin-console-shell input[type="email"], [data-theme="dark"] .admin-console-shell input[type="password"], [data-theme="dark"] .admin-console-shell input[type="number"], [data-theme="dark"] .admin-console-shell input[type="url"], [data-theme="dark"] .admin-console-shell input[type="date"], [data-theme="dark"] .admin-console-shell input[type="datetime-local"], [data-theme="dark"] .admin-console-shell select, [data-theme="dark"] .admin-console-shell textarea { background: #111821 !important; border-color: var(--admin-border-strong) !important; color: var(--admin-text) !important; box-shadow: none !important; } [data-theme="dark"] .admin-console-shell input::placeholder, [data-theme="dark"] .admin-console-shell textarea::placeholder { color: #7F8B9B !important; } [data-theme="dark"] .admin-console-shell input:disabled, [data-theme="dark"] .admin-console-shell select:disabled, [data-theme="dark"] .admin-console-shell textarea:disabled, [data-theme="dark"] .admin-console-shell input[type="submit"]:disabled { background: rgba(148, 163, 184, 0.1) !important; color: rgba(203, 213, 225, 0.52) !important; border-color: rgba(148, 163, 184, 0.12) !important; } [data-theme="dark"] .admin-console-shell pre, [data-theme="dark"] .admin-console-shell code { background: #111821 !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } [data-theme="dark"] .admin-console-shell iframe { color-scheme: light; } /* ── Guest and workspace dark theme closure ───────────────── */ [data-theme="dark"] .guest-topbar { background: rgba(15, 17, 21, 0.92) !important; border-bottom-color: var(--ui-border) !important; } [data-theme="dark"] .guest-topbar .text-slate-900, [data-theme="dark"] .guest-main .text-slate-950, [data-theme="dark"] .guest-main .text-slate-900, [data-theme="dark"] .guest-main .text-slate-800, [data-theme="dark"] .guest-main .text-slate-700 { color: var(--ui-text) !important; } [data-theme="dark"] .guest-main .text-slate-600, [data-theme="dark"] .guest-main .text-slate-500, [data-theme="dark"] .guest-main .text-slate-400 { color: var(--ui-text-muted) !important; } [data-theme="dark"] .guest-topbar .bg-white, [data-theme="dark"] .guest-topbar .bg-white\/78, [data-theme="dark"] .guest-main .bg-white, [data-theme="dark"] .guest-main .bg-white\/80, [data-theme="dark"] .guest-main .bg-slate-50, [data-theme="dark"] .guest-main .bg-slate-50\/80, [data-theme="dark"] .guest-main .bg-slate-50\/90, [data-theme="dark"] .guest-main .bg-sky-50 { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; box-shadow: var(--ui-shadow-sm); } [data-theme="dark"] .guest-main .bg-slate-950 { background: #080D19 !important; border-color: var(--ui-border) !important; } [data-theme="dark"] .guest-main .border-slate-100, [data-theme="dark"] .guest-main .border-slate-200, [data-theme="dark"] .guest-main .border-slate-300, [data-theme="dark"] .guest-main .border-sky-200 { border-color: var(--ui-border) !important; } [data-theme="dark"] .guest-main input[type="text"], [data-theme="dark"] .guest-main input[type="email"], [data-theme="dark"] .guest-main input[type="password"] { background: #111821 !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important; } [data-theme="dark"] .guest-main input::placeholder { color: var(--ui-text-soft) !important; } [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] { background: var(--ui-surface-muted) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .bg-white, [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .bg-white\/80, [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .bg-slate-50, [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .bg-slate-50\/70 { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .border-slate-200, [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .border-slate-200\/70, [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .border-slate-300 { border-color: var(--ui-border) !important; } [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .text-slate-700, [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .text-slate-600 { color: var(--ui-text) !important; } [data-theme="dark"] .chat-composer [data-kimi-chat-controls-panel] .text-slate-500 { color: var(--ui-text-muted) !important; } .chat-sidebar__list-section { flex-basis: 0; } .chat-sidebar__foot { padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); } .chat-sidebar__toolbar { flex-wrap: wrap; align-items: flex-start; } .chat-sidebar__account-trigger { min-width: 0; } .chat-sidebar__account-email { display: block; line-height: 1.25; } /* UAT hotfix: light dashboard welcome/KPI contrast only. */ [data-theme="light"] .console-dashboard .console-dashboard-hero { background: transparent !important; box-shadow: none; } [data-theme="light"] .console-dashboard .console-dashboard-overview { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__org { background: #EEF2F6 !important; box-shadow: inset 0 0 0 1px #DCE3EB !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__org-name { color: #4B5565 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__title { color: #111827 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__description { color: #4B5565 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__admin { background: #F7F9FC !important; border-color: #E2E8F0 !important; color: #334155 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__admin:hover { background: #EEF2F6 !important; color: #13233E !important; } [data-theme="light"] .console-dashboard .console-dashboard-stat { background: #F7F9FC !important; box-shadow: inset 0 0 0 1px #DFE5EC !important; } [data-theme="light"] .console-dashboard .console-dashboard-stat__label { color: #4B5565 !important; } [data-theme="light"] .console-dashboard .console-dashboard-stat__value { color: #111827 !important; } /* ── Neutral dark finish: remove warm/brown cast from product workspaces ── */ [data-theme="dark"] { --ui-bg: #0B0F16; --ui-bg-soft: #101722; --ui-surface: #151B24; --ui-surface-soft: rgba(21, 27, 36, 0.94); --ui-surface-muted: #1A2230; --ui-sidebar-bg: #080B10; --ui-sidebar-bg-deep: #070A0F; --ui-sidebar-border: #1F2A3B; --ui-border: #263244; --ui-border-strong: #344257; --ui-text: #F3F7FB; --ui-text-muted: #B9C4D2; --ui-text-soft: #7F8EA3; } [data-theme="dark"] .console-shell { background: #0B0F16 !important; } [data-theme="dark"] .console-topbar, [data-theme="dark"] .console-mobile-nav { background: #101722 !important; border-color: #263244 !important; } [data-theme="dark"] .console-sidebar, [data-theme="dark"] .chat-sidebar { background: #080B10 !important; border-color: #1F2A3B !important; } [data-theme="dark"] .console-sidebar__footer, [data-theme="dark"] .chat-sidebar__foot, [data-theme="dark"] .chat-sidebar__toolbar { border-color: #1F2A3B !important; } [data-theme="dark"] .console-sidebar-card, [data-theme="dark"] .console-dashboard-hero, [data-theme="dark"] .console-dashboard-action, [data-theme="dark"] .console-dashboard-panel, [data-theme="dark"] .console-dashboard-subcard, [data-theme="dark"] .console-page .ui-card--panel { background: #151B24 !important; border-color: #263244 !important; color: #F3F7FB !important; } [data-theme="dark"] .console-dashboard-subcard:hover, [data-theme="dark"] .console-dashboard-action:hover { background: #1A2230 !important; border-color: #344257 !important; } [data-theme="dark"] .console-page--home, [data-theme="dark"] .console-page--studio, [data-theme="dark"] .console-page--artifacts, [data-theme="dark"] .console-page--workflows, [data-theme="dark"] .console-dashboard { --console-page-surface: #151B24; --console-page-surface-muted: #1A2230; --console-page-border: #263244; --console-page-border-strong: #344257; } [data-theme="dark"] .console-page .bg-white, [data-theme="dark"] .console-page .bg-white\/60, [data-theme="dark"] .console-page .bg-white\/70, [data-theme="dark"] .console-page .bg-white\/78, [data-theme="dark"] .console-page .bg-white\/80, [data-theme="dark"] .console-page .bg-white\/88, [data-theme="dark"] .console-page .bg-slate-50, [data-theme="dark"] .console-page .bg-slate-50\/50, [data-theme="dark"] .console-page .bg-slate-50\/60, [data-theme="dark"] .console-page .bg-slate-50\/70, [data-theme="dark"] .console-page .bg-slate-50\/80, [data-theme="dark"] .console-page .bg-slate-100, [data-theme="dark"] .console-page .bg-stone-50, [data-theme="dark"] .console-page .bg-stone-50\/70, [data-theme="dark"] .console-page .bg-stone-50\/80 { background: #151B24 !important; border-color: #263244 !important; } [data-theme="dark"] .console-page .border-slate-100, [data-theme="dark"] .console-page .border-slate-200, [data-theme="dark"] .console-page .border-slate-200\/60, [data-theme="dark"] .console-page .border-slate-200\/70, [data-theme="dark"] .console-page .border-slate-200\/80, [data-theme="dark"] .console-page .border-white\/70, [data-theme="dark"] .console-page--studio .border-t, [data-theme="dark"] .console-page--artifacts .border-t, [data-theme="dark"] .console-page--workflows .border-t, [data-theme="dark"] .console-page--artifacts .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #263244 !important; } [data-theme="dark"] .console-page .ui-button--secondary, [data-theme="dark"] .console-page .ui-button--soft, [data-theme="dark"] .console-dashboard .ui-button--secondary, [data-theme="dark"] .console-dashboard .ui-button--soft { background: #151B24 !important; border-color: #263244 !important; color: #F3F7FB !important; } [data-theme="dark"] .console-page .ui-button--secondary:hover, [data-theme="dark"] .console-page .ui-button--soft:hover, [data-theme="dark"] .console-dashboard .ui-button--secondary:hover, [data-theme="dark"] .console-dashboard .ui-button--soft:hover { background: #1A2230 !important; border-color: #344257 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"], [data-theme="dark"] [data-testid="studio-video-workspace-shell"] { --studio-shell-surface: #151B24; --studio-shell-surface-soft: rgba(21, 27, 36, 0.96); --studio-shell-surface-muted: #101722; --studio-shell-border: #263244; --studio-shell-border-strong: #344257; --studio-shell-text: #F3F7FB; --studio-shell-text-muted: #B9C4D2; --studio-shell-text-soft: #7F8EA3; --studio-shell-tint: rgba(124, 147, 255, 0.08); --studio-shell-glass: #151B24; background: #0B0F16 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-thread-stage, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-thread-stage { background: #0B0F16 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-composer-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-composer-shell, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-composer-shell { background: linear-gradient(180deg, transparent, #0B0F16 20%) !important; border-color: #263244 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-composer__frame, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-composer__frame, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-empty, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference--empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference--empty, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-empty { background: #151B24 !important; border-color: #263244 !important; color: #F3F7FB !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-card--history, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-card--history, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-meta, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-meta, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-body, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-body { background: #101722 !important; border-color: #263244 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail { background: #080B10 !important; border-color: #1F2A3B !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tabs, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tabs { background: #101722 !important; border-color: #263244 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tab, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tab, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-chip, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-chip, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-toggle, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-toggle { color: #B9C4D2 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tab--active, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tab--active, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-chip, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-chip, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .peer:checked + .studio-workbench-toggle, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .peer:checked + .studio-workbench-toggle, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--secondary, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--secondary, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--soft, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--soft { background: #151B24 !important; border-color: #263244 !important; color: #F3F7FB !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--secondary:hover, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--secondary:hover, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--soft:hover, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--soft:hover { background: #1A2230 !important; border-color: #344257 !important; } /* ── Studio batch dark closure ─────────────────────────── */ [data-theme="dark"] .console-page--studio .studio-batch-submit { appearance: none !important; background: #6E83FF !important; border: 1px solid rgba(124, 147, 255, 0.62) !important; color: #FFFFFF !important; box-shadow: 0 16px 34px rgba(58, 82, 214, 0.22) !important; } [data-theme="dark"] .console-page--studio .studio-batch-submit:hover { background: #8192FF !important; border-color: rgba(149, 165, 255, 0.78) !important; } [data-theme="dark"] .console-page--studio .studio-batch-submit:disabled, [data-theme="dark"] .console-page--studio .studio-batch-submit[disabled], [data-theme="dark"] .console-page--studio .studio-batch-submit[aria-disabled="true"] { background: #1A2230 !important; border-color: #263244 !important; color: #7F8EA3 !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important; } [data-theme="dark"] .console-page .billing-flow-card, [data-theme="dark"] .console-page .billing-flow-card__metric, [data-theme="dark"] .console-page .billing-flow-card__step, [data-theme="dark"] .console-page .billing-flow-card__footnote { background: #151B24 !important; border-color: #263244 !important; color: #F3F7FB !important; } [data-theme="dark"] .console-page .billing-flow-card__metric, [data-theme="dark"] .console-page .billing-flow-card__footnote { background: #101722 !important; } [data-theme="dark"] .console-page .billing-flow-card__step.border-emerald-200 { border-color: rgba(52, 211, 153, 0.36) !important; } [data-theme="dark"] .console-page .billing-flow-card__step.border-amber-200 { border-color: rgba(245, 158, 11, 0.36) !important; } [data-theme="dark"] .console-page .billing-flow-card__step.border-rose-200 { border-color: rgba(251, 113, 133, 0.36) !important; } [data-theme="dark"] .console-page .billing-flow-card h2, [data-theme="dark"] .console-page .billing-flow-card h3, [data-theme="dark"] .console-page .billing-flow-card .text-slate-950, [data-theme="dark"] .console-page .billing-flow-card .text-slate-900 { color: #F3F7FB !important; } [data-theme="dark"] .console-page .billing-flow-card .text-slate-600, [data-theme="dark"] .console-page .billing-flow-card .text-slate-500 { color: #B9C4D2 !important; } [data-theme="dark"] .console-page .billing-flow-card .text-slate-400 { color: #7F8EA3 !important; } [data-theme="dark"] .console-page--studio .bg-amber-50\/70, [data-theme="dark"] .console-page--studio .bg-amber-50\/80, [data-theme="dark"] .console-page--studio .bg-indigo-50\/40, [data-theme="dark"] .console-page--studio .bg-sky-50, [data-theme="dark"] .console-page--studio .bg-sky-100, [data-theme="dark"] .console-page--studio .bg-emerald-50, [data-theme="dark"] .console-page--studio .bg-rose-50, [data-theme="dark"] .console-page--studio .hover\:bg-amber-100:hover, [data-theme="dark"] .console-page--studio .hover\:bg-emerald-100:hover, [data-theme="dark"] .console-page--studio .hover\:bg-rose-100:hover, [data-theme="dark"] .console-page--studio .hover\:bg-sky-100:hover { background: #151B24 !important; } /* ── Pure black dark finish: keep dark mode monochrome ───── */ [data-theme="dark"] { --ui-bg: #05070B; --ui-bg-soft: #0A0D12; --ui-surface: #101722; --ui-surface-soft: rgba(16, 23, 34, 0.96); --ui-surface-muted: #151D28; --ui-sidebar-bg: #05070B; --ui-sidebar-bg-deep: #030509; --ui-sidebar-border: #1D2633; --ui-border: #263244; --ui-border-strong: #364458; --ui-text: #F5F7FA; --ui-text-muted: #B8C2D0; --ui-text-soft: #7E899A; --ui-accent: #F5F7FA; --ui-accent-hover: #FFFFFF; --ui-accent-contrast: #05070B; --ui-accent-soft: rgba(245, 247, 250, 0.1); --ui-accent-border: rgba(245, 247, 250, 0.28); } [data-theme="dark"] .account-center { --account-accent: #F5F7FA; --account-accent-hover: #FFFFFF; --account-accent-soft: rgba(245, 247, 250, 0.1); --account-warning: #CBD5E1; --account-warning-soft: rgba(203, 213, 225, 0.1); } [data-theme="dark"] .chat-sidebar { --studio-history-active-bg: #151D28; --studio-history-active-text: #F5F7FA; --studio-history-active-muted: #B8C2D0; --studio-history-active-border: #364458; --studio-history-active-indicator: #F5F7FA; } [data-theme="dark"] .ui-button--primary, [data-theme="dark"] .ui-segment__item--active, [data-theme="dark"] .ui-theme-switcher__btn--active, [data-theme="dark"] .chat-composer__submit, [data-theme="dark"] .chat-composer__submit--grace, [data-theme="dark"] .chat-composer__submit--abort, [data-theme="dark"] input[type="submit"], [data-theme="dark"] .console-page--studio .studio-batch-submit, [data-theme="dark"] .account-center .ui-button--primary, [data-theme="dark"] .account-center .account-center-inline-action--primary, [data-theme="dark"] .bg-indigo-500\/80, [data-theme="dark"] .bg-indigo-600, [data-theme="dark"] .bg-blue-600, [data-theme="dark"] .bg-sky-600, [data-theme="dark"] .bg-amber-700, [data-theme="dark"] .bg-emerald-700 { background: #F5F7FA !important; border-color: #F5F7FA !important; color: #05070B !important; box-shadow: none !important; } [data-theme="dark"] .ui-button--primary:hover, [data-theme="dark"] .chat-composer__submit:hover, [data-theme="dark"] input[type="submit"]:hover, [data-theme="dark"] .console-page--studio .studio-batch-submit:hover, [data-theme="dark"] .account-center .ui-button--primary:hover, [data-theme="dark"] .account-center .account-center-inline-action--primary:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #05070B !important; } [data-theme="dark"] input[type="submit"]:disabled, [data-theme="dark"] input[type="submit"][disabled], [data-theme="dark"] button:disabled, [data-theme="dark"] button[disabled], [data-theme="dark"] .console-page--studio .studio-batch-submit:disabled, [data-theme="dark"] .console-page--studio .studio-batch-submit[disabled], [data-theme="dark"] .console-page--studio .studio-batch-submit[aria-disabled="true"] { background: #151D28 !important; border-color: #263244 !important; color: #7E899A !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important; } [data-theme="dark"] .console-page .bg-gradient-to-br, [data-theme="dark"] .console-page .bg-gradient-to-r, [data-theme="dark"] .console-dashboard .bg-gradient-to-br, [data-theme="dark"] .console-dashboard .bg-gradient-to-r, [data-theme="dark"] .guest-main .bg-gradient-to-br, [data-theme="dark"] .guest-main .bg-gradient-to-r, [data-theme="dark"] .account-center .bg-gradient-to-br, [data-theme="dark"] .account-center .bg-gradient-to-r, [data-theme="dark"] .admin-console-shell .bg-gradient-to-br, [data-theme="dark"] .admin-console-shell .bg-gradient-to-r, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .bg-gradient-to-br, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .bg-gradient-to-r, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .bg-gradient-to-br, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .bg-gradient-to-r { background-image: none !important; background-color: #101722 !important; } [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-50\/40, [data-theme="dark"] .bg-indigo-50\/50, [data-theme="dark"] .bg-indigo-50\/60, [data-theme="dark"] .bg-indigo-50\/70, [data-theme="dark"] .bg-indigo-50\/80, [data-theme="dark"] .bg-indigo-100, [data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-blue-50\/60, [data-theme="dark"] .bg-blue-50\/70, [data-theme="dark"] .bg-blue-50\/80, [data-theme="dark"] .bg-blue-100, [data-theme="dark"] .bg-sky-50, [data-theme="dark"] .bg-sky-50\/50, [data-theme="dark"] .bg-sky-100, [data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-amber-50\/60, [data-theme="dark"] .bg-amber-50\/70, [data-theme="dark"] .bg-amber-50\/80, [data-theme="dark"] .bg-amber-50\/84, [data-theme="dark"] .bg-amber-50\/90, [data-theme="dark"] .bg-amber-100, [data-theme="dark"] .bg-amber-300\/10, [data-theme="dark"] .bg-orange-50, [data-theme="dark"] .bg-orange-50\/60, [data-theme="dark"] .bg-violet-50, [data-theme="dark"] .bg-violet-50\/70, [data-theme="dark"] .bg-violet-100, [data-theme="dark"] .bg-teal-50, [data-theme="dark"] .bg-teal-50\/60, [data-theme="dark"] .bg-teal-100, [data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-emerald-100, [data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-rose-100, [data-theme="dark"] .hover\:bg-indigo-50:hover, [data-theme="dark"] .hover\:bg-indigo-100:hover, [data-theme="dark"] .hover\:bg-blue-50:hover, [data-theme="dark"] .hover\:bg-blue-100:hover, [data-theme="dark"] .hover\:bg-sky-50:hover, [data-theme="dark"] .hover\:bg-sky-100:hover, [data-theme="dark"] .hover\:bg-amber-50:hover, [data-theme="dark"] .hover\:bg-amber-100:hover, [data-theme="dark"] .hover\:bg-orange-50:hover, [data-theme="dark"] .hover\:bg-violet-50:hover, [data-theme="dark"] .hover\:bg-teal-50:hover, [data-theme="dark"] .hover\:bg-emerald-50:hover, [data-theme="dark"] .hover\:bg-emerald-100:hover, [data-theme="dark"] .hover\:bg-rose-50:hover, [data-theme="dark"] .hover\:bg-rose-100:hover { background: #101722 !important; border-color: #263244 !important; } [data-theme="dark"] .border-indigo-100, [data-theme="dark"] .border-indigo-200, [data-theme="dark"] .border-indigo-200\/80, [data-theme="dark"] .border-blue-100, [data-theme="dark"] .border-blue-200, [data-theme="dark"] .border-sky-100, [data-theme="dark"] .border-sky-200, [data-theme="dark"] .border-amber-200, [data-theme="dark"] .border-amber-200\/80, [data-theme="dark"] .border-amber-300, [data-theme="dark"] .border-amber-300\/30, [data-theme="dark"] .border-orange-200, [data-theme="dark"] .border-violet-200, [data-theme="dark"] .border-teal-200, [data-theme="dark"] .border-emerald-200, [data-theme="dark"] .border-rose-200 { border-color: #364458 !important; } [data-theme="dark"] .text-indigo-900, [data-theme="dark"] .text-indigo-800, [data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-600, [data-theme="dark"] .text-indigo-500, [data-theme="dark"] .text-indigo-400, [data-theme="dark"] .text-indigo-400\/80, [data-theme="dark"] .text-indigo-300, [data-theme="dark"] .text-indigo-300\/70, [data-theme="dark"] .text-blue-900, [data-theme="dark"] .text-blue-800, [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-600, [data-theme="dark"] .text-sky-900, [data-theme="dark"] .text-sky-800, [data-theme="dark"] .text-sky-700, [data-theme="dark"] .text-sky-600, [data-theme="dark"] .text-sky-500, [data-theme="dark"] .text-amber-900, [data-theme="dark"] .text-amber-800, [data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-600, [data-theme="dark"] .text-amber-500, [data-theme="dark"] .text-amber-300, [data-theme="dark"] .text-amber-200, [data-theme="dark"] .text-orange-900, [data-theme="dark"] .text-orange-800, [data-theme="dark"] .text-orange-700, [data-theme="dark"] .text-violet-900, [data-theme="dark"] .text-violet-800, [data-theme="dark"] .text-violet-700, [data-theme="dark"] .text-teal-900, [data-theme="dark"] .text-teal-800, [data-theme="dark"] .text-teal-700 { color: #B8C2D0 !important; } [data-theme="dark"] .console-dashboard-overview__org .bg-indigo-500\/80, [data-theme="dark"] .ui-theme-switcher__btn--active, [data-theme="dark"] .ui-segment__item--active { color: #05070B !important; } /* ── Dashboard and Studio landing neutral polish ─────────── */ [data-theme="dark"] .console-dashboard .console-dashboard-hero, [data-theme="dark"] .console-dashboard .console-dashboard-overview { background: #101722 !important; border-color: #263244 !important; box-shadow: none !important; } [data-theme="dark"] .console-dashboard .console-dashboard-hero > .pointer-events-none, [data-theme="dark"] .console-dashboard .console-dashboard-hero > .absolute { background: transparent !important; } [data-theme="dark"] .console-dashboard .console-dashboard-stat { background: #151D28 !important; border: 1px solid #263244 !important; box-shadow: none !important; color: #F5F7FA !important; } [data-theme="dark"] .console-dashboard .console-dashboard-stat--revenue { background: #111827 !important; border-color: #364458 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-overview__org { background: #151D28 !important; box-shadow: inset 0 0 0 1px #263244 !important; } [data-theme="dark"] .console-studio-hero { background: #0F1724 !important; border-color: #263244 !important; box-shadow: none !important; } [data-theme="light"] .console-studio-hero, [data-theme="warm"] .console-studio-hero { background: #101827 !important; border-color: rgba(15, 23, 42, 0.18) !important; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14) !important; } [data-theme="dark"] .console-studio-hero > .absolute, [data-theme="light"] .console-studio-hero > .absolute, [data-theme="warm"] .console-studio-hero > .absolute { background: transparent !important; } [data-theme="dark"] .console-studio-hero .border-amber-300\/30, [data-theme="light"] .console-studio-hero .border-amber-300\/30, [data-theme="warm"] .console-studio-hero .border-amber-300\/30 { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #D8DEE8 !important; } [data-theme="light"] .console-page--studio .console-studio-feature-card, [data-theme="warm"] .console-page--studio .console-studio-feature-card, [data-theme="dark"] .console-page--studio .console-studio-feature-card { background-image: none !important; } [data-theme="light"] .console-page--studio .console-studio-feature-card { background: #FFFFFF !important; border-color: #DDE4ED !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card { background: #FBF7F2 !important; border-color: #DED1C3 !important; box-shadow: 0 12px 28px rgba(47, 38, 31, 0.08) !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card { background: #101722 !important; border-color: #263244 !important; box-shadow: none !important; } [data-theme="light"] .console-page--studio .console-studio-feature-card__cover, [data-theme="warm"] .console-page--studio .console-studio-feature-card__cover, [data-theme="dark"] .console-page--studio .console-studio-feature-card__cover, [data-theme="light"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__cover, [data-theme="light"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__cover, [data-theme="light"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__cover, [data-theme="light"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__cover, [data-theme="light"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__cover, [data-theme="warm"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__cover, [data-theme="warm"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__cover, [data-theme="warm"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__cover, [data-theme="warm"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__cover, [data-theme="warm"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__cover, [data-theme="dark"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__cover, [data-theme="dark"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__cover, [data-theme="dark"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__cover, [data-theme="dark"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__cover, [data-theme="dark"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__cover { background-image: none !important; } [data-theme="light"] .console-page--studio .console-studio-feature-card__cover { background: linear-gradient(180deg, #F8FAFC 0%, rgba(248, 250, 252, 0) 100%) !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card__cover { background: linear-gradient(180deg, #F3ECE2 0%, rgba(251, 247, 242, 0) 100%) !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card__cover { background: #101722 !important; } [data-theme="light"] .console-page--studio .console-studio-feature-card__badge, [data-theme="light"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__badge, [data-theme="light"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__badge, [data-theme="light"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__badge, [data-theme="light"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__badge, [data-theme="light"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__badge { background: #EEF2F6 !important; border-color: #DDE4ED !important; color: #334155 !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card__badge, [data-theme="warm"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__badge, [data-theme="warm"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__badge, [data-theme="warm"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__badge, [data-theme="warm"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__badge, [data-theme="warm"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__badge { background: #F1E8DD !important; border-color: #DED1C3 !important; color: #5E5348 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card__badge, [data-theme="dark"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__badge, [data-theme="dark"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__badge, [data-theme="dark"] .console-page--studio .console-studio-feature-card--batch .console-studio-feature-card__badge, [data-theme="dark"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__badge, [data-theme="dark"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__badge { background: #151D28 !important; border-color: #263244 !important; color: #B8C2D0 !important; } /* ── Studio hero theme realignment ───────────────────────── */ [data-theme="light"] .console-studio-hero { background: #FFFFFF !important; border-color: #DDE4ED !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important; } [data-theme="warm"] .console-studio-hero { background: #FBF7F2 !important; border-color: #DED1C3 !important; box-shadow: 0 12px 28px rgba(47, 38, 31, 0.08) !important; } [data-theme="dark"] .console-studio-hero { background: #05070B !important; border-color: #263244 !important; box-shadow: none !important; } [data-theme="light"] .console-studio-hero > .absolute, [data-theme="warm"] .console-studio-hero > .absolute, [data-theme="dark"] .console-studio-hero > .absolute { background: transparent !important; } [data-theme="light"] .console-studio-hero .text-white { color: #111827 !important; } [data-theme="warm"] .console-studio-hero .text-white { color: #2F261F !important; } [data-theme="dark"] .console-studio-hero .text-white { color: #F5F7FA !important; } [data-theme="light"] .console-studio-hero .text-slate-300, [data-theme="light"] .console-studio-hero .text-slate-400 { color: #4B5565 !important; } [data-theme="warm"] .console-studio-hero .text-slate-300, [data-theme="warm"] .console-studio-hero .text-slate-400 { color: #66584D !important; } [data-theme="dark"] .console-studio-hero .text-slate-300, [data-theme="dark"] .console-studio-hero .text-slate-400 { color: #B8C2D0 !important; } [data-theme="light"] .console-studio-hero .border-amber-300\/30 { background: #EEF2F6 !important; border-color: #DDE4ED !important; color: #334155 !important; } [data-theme="warm"] .console-studio-hero .border-amber-300\/30 { background: #F1E8DD !important; border-color: #DED1C3 !important; color: #5E5348 !important; } [data-theme="dark"] .console-studio-hero .border-amber-300\/30 { background: #101722 !important; border-color: #263244 !important; color: #B8C2D0 !important; } [data-theme="light"] .console-studio-hero .border-white\/10, [data-theme="warm"] .console-studio-hero .border-white\/10, [data-theme="dark"] .console-studio-hero .border-white\/10 { box-shadow: none !important; } [data-theme="light"] .console-studio-hero .border-white\/10, [data-theme="light"] .console-studio-hero .bg-white\/6 { background: #F8FAFC !important; border-color: #DDE4ED !important; } [data-theme="warm"] .console-studio-hero .border-white\/10, [data-theme="warm"] .console-studio-hero .bg-white\/6 { background: #F3ECE2 !important; border-color: #DED1C3 !important; } [data-theme="dark"] .console-studio-hero .border-white\/10, [data-theme="dark"] .console-studio-hero .bg-white\/6 { background: #0B0F16 !important; border-color: #263244 !important; } /* ── Studio hero visual hard stop ────────────────────────── */ [data-theme="light"] .console-page--studio .console-studio-hero, [data-theme="warm"] .console-page--studio .console-studio-hero, [data-theme="dark"] .console-page--studio .console-studio-hero { background-image: none !important; } [data-theme="light"] .console-page--studio .console-studio-hero { background-color: #FFFFFF !important; } [data-theme="warm"] .console-page--studio .console-studio-hero { background-color: #FBF7F2 !important; } [data-theme="dark"] .console-page--studio .console-studio-hero { background-color: #05070B !important; border-color: #263244 !important; } [data-theme="light"] .console-page--studio .console-studio-hero__wash, [data-theme="warm"] .console-page--studio .console-studio-hero__wash, [data-theme="dark"] .console-page--studio .console-studio-hero__wash { background: transparent !important; background-image: none !important; opacity: 0 !important; } /* ── Studio quick-start entry layer ─────────────────────── */ @media (min-width: 1024px) { .console-content:has(.console-page--quick-start) { max-width: 1280px; } } .console-studio-quick-card__arrow { color: currentColor; } .console-studio-quick-card:hover .console-studio-quick-card__arrow { transform: translateX(3px); } [data-theme="light"] .console-page--studio .console-studio-quickstart { background: #FFFFFF !important; border-color: #DDE4ED !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important; } [data-theme="warm"] .console-page--studio .console-studio-quickstart { background: #FBF7F2 !important; border-color: #DED1C3 !important; box-shadow: 0 12px 28px rgba(47, 38, 31, 0.08) !important; } [data-theme="dark"] .console-page--studio .console-studio-quickstart { background: #0B0F16 !important; border-color: #263244 !important; box-shadow: none !important; } [data-theme="light"] .console-page--studio .console-studio-quick-card { background: #F8FAFC !important; border-color: #DDE4ED !important; color: #111827 !important; } [data-theme="warm"] .console-page--studio .console-studio-quick-card { background: #F8F1E8 !important; border-color: #DED1C3 !important; color: #2F261F !important; } [data-theme="dark"] .console-page--studio .console-studio-quick-card { background: #101722 !important; border-color: #263244 !important; color: #F5F7FA !important; } [data-theme="light"] .console-page--studio .console-studio-quick-card:hover { border-color: #CBD5E1 !important; background: #FFFFFF !important; } [data-theme="warm"] .console-page--studio .console-studio-quick-card:hover { border-color: #CCBEAF !important; background: #FFFDF9 !important; } [data-theme="dark"] .console-page--studio .console-studio-quick-card:hover { border-color: #3A485C !important; background: #151D28 !important; } [data-theme="light"] .console-page--studio .console-studio-quick-card__step, [data-theme="light"] .console-page--studio .console-studio-quick-card__cta { background: #E9EEF5 !important; color: #334155 !important; } [data-theme="warm"] .console-page--studio .console-studio-quick-card__step, [data-theme="warm"] .console-page--studio .console-studio-quick-card__cta { background: #EFE5D8 !important; color: #5E5348 !important; } [data-theme="dark"] .console-page--studio .console-studio-quick-card__step, [data-theme="dark"] .console-page--studio .console-studio-quick-card__cta { background: #0B0F16 !important; color: #B8C2D0 !important; border: 1px solid #263244 !important; } [data-theme="light"] .console-page--studio .console-studio-quickstart .text-slate-900 { color: #111827 !important; } [data-theme="warm"] .console-page--studio .console-studio-quickstart .text-slate-900 { color: #2F261F !important; } [data-theme="dark"] .console-page--studio .console-studio-quickstart .text-slate-900 { color: #F5F7FA !important; } [data-theme="dark"] .console-page--studio .console-studio-quickstart .text-slate-500, [data-theme="dark"] .console-page--studio .console-studio-quickstart .text-slate-400 { color: #B8C2D0 !important; }