/* Generated by scripts/build_studio_css_bundle.js. Do not edit by hand. */ /* Source manifest: plugins/public/studio/studio.css */ /* Studio stylesheet manifest. Import order is cascade-sensitive. */ /* begin styles/core/foundation.css */ /* ============================================================ SUPAVECTOR AGENTS LIBRARY — Design System Light + Dark theme via [data-theme="dark"] on ============================================================ */ :root { /* Palette — cool glass light */ --c-bg: #f4f7ff; --c-surface: rgba(255,255,255,0.72); --c-panel: rgba(255,255,255,0.66); --c-panel-strong: rgba(255,255,255,0.86); --c-line: rgba(148,163,184,0.18); --c-line-strong: rgba(99,102,241,0.18); --c-text: #0f172a; --c-muted: #64748b; --c-subtle: #94a3b8; /* Accent family — electric blue to violet */ --c-accent: #2563eb; --c-accent-hi: #7c3aed; --c-accent-soft: rgba(37,99,235,0.11); --c-accent-glow: rgba(59,130,246,0.18); /* Secondary accents */ --c-purple: #8b5cf6; --c-purple-soft: rgba(139,92,246,0.1); --c-indigo: #2563eb; --c-pink: #db2777; --c-orange: #38bdf8; --c-amber: #6366f1; /* Semantic */ --c-good: #0f766e; --c-good-soft: rgba(15,118,110,0.1); --c-warn: #d97706; --c-danger: #e11d48; --c-danger-soft: rgba(225,29,72,0.1); /* Shadows — cool glass */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 4px 10px rgba(15,23,42,0.05); --shadow-md: 0 10px 28px rgba(15,23,42,0.08); --shadow-lg: 0 18px 48px rgba(15,23,42,0.12); --shadow-xl: 0 28px 72px rgba(15,23,42,0.14); /* Radii */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Typography */ --font-body: "Inter", "Avenir Next", "Segoe UI Variable", system-ui, sans-serif; --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-mono: "Geist Mono", "JetBrains Mono", "SFMono-Regular", Menlo, monospace; /* Legacy aliases used by inline portal markup */ --accent: var(--c-accent); --accent-2: var(--c-accent-hi); --surface: var(--c-panel-strong); --card: var(--c-panel-strong); --line: var(--c-line); --text: var(--c-text); --muted: var(--c-muted); --good: var(--c-good); --bad: var(--c-danger); --warn: var(--c-warn); /* Legacy studio aliases used by inline markup */ --studio-text: var(--c-text); --studio-muted: var(--c-muted); --studio-line: var(--c-line); --studio-surface: var(--c-surface); --studio-hover: rgba(37,99,235,0.05); --studio-code: var(--font-mono); --studio-code-bg: rgba(15,23,42,0.05); --studio-good: var(--c-good); --studio-bad: var(--c-danger); /* Avatar surfaces — cool blue / violet / cyan tones */ --av0-bg: linear-gradient(145deg,rgba(37,99,235,0.18),rgba(56,189,248,0.14)); --av0-ring: rgba(37,99,235,0.2); --av0-glow: 0 12px 30px rgba(37,99,235,0.16); --av1-bg: linear-gradient(145deg,rgba(124,58,237,0.18),rgba(99,102,241,0.14)); --av1-ring: rgba(124,58,237,0.2); --av1-glow: 0 12px 30px rgba(124,58,237,0.16); --av2-bg: linear-gradient(145deg,rgba(6,182,212,0.16),rgba(59,130,246,0.14)); --av2-ring: rgba(6,182,212,0.18); --av2-glow: 0 12px 30px rgba(6,182,212,0.14); --av3-bg: linear-gradient(145deg,rgba(79,70,229,0.18),rgba(167,139,250,0.14)); --av3-ring: rgba(79,70,229,0.2); --av3-glow: 0 12px 30px rgba(79,70,229,0.16); --av4-bg: linear-gradient(145deg,rgba(147,51,234,0.16),rgba(219,39,119,0.12)); --av4-ring: rgba(147,51,234,0.18); --av4-glow: 0 12px 30px rgba(147,51,234,0.14); --av5-bg: linear-gradient(145deg,rgba(37,99,235,0.16),rgba(124,58,237,0.14)); --av5-ring: rgba(37,99,235,0.18); --av5-glow: 0 12px 30px rgba(37,99,235,0.14); } /* ── DARK THEME · Rich Slate × Blue-Violet ─────────────── */ [data-theme="dark"] { --c-bg: #0b1220; --c-surface: rgba(15,23,42,0.58); --c-panel: rgba(15,23,42,0.72); --c-panel-strong: rgba(15,23,42,0.86); --c-line: rgba(148,163,184,0.16); --c-line-strong: rgba(96,165,250,0.24); --c-text: #f8fafc; --c-muted: #94a3b8; --c-subtle: #64748b; --c-accent: #60a5fa; --c-accent-hi: #c084fc; --c-accent-soft: rgba(96,165,250,0.15); --c-accent-glow: rgba(96,165,250,0.24); --c-purple: #c084fc; --c-purple-soft: rgba(192,132,252,0.14); --c-indigo: #38bdf8; --c-pink: #f472b6; --c-orange: #22d3ee; --c-amber: #818cf8; --c-good: #34d399; --c-good-soft: rgba(52,211,153,0.14); --c-warn: #f59e0b; --c-danger: #fb7185; --c-danger-soft: rgba(251,113,133,0.14); --studio-hover: rgba(96,165,250,0.08); --studio-code-bg: rgba(10,10,12,0.90); --av0-bg: linear-gradient(145deg,rgba(59,130,246,0.24), rgba(56,189,248,0.18)); --av0-ring: rgba(96,165,250,0.22); --av0-glow: 0 16px 34px rgba(59,130,246,0.22); --av1-bg: linear-gradient(145deg,rgba(124,58,237,0.24), rgba(192,132,252,0.18)); --av1-ring: rgba(192,132,252,0.22); --av1-glow: 0 16px 34px rgba(124,58,237,0.22); --av2-bg: linear-gradient(145deg,rgba(6,182,212,0.22),rgba(96,165,250,0.16)); --av2-ring: rgba(56,189,248,0.2); --av2-glow: 0 16px 34px rgba(56,189,248,0.18); --av3-bg: linear-gradient(145deg,rgba(79,70,229,0.22),rgba(167,139,250,0.18)); --av3-ring: rgba(129,140,248,0.2); --av3-glow: 0 16px 34px rgba(99,102,241,0.18); --av4-bg: linear-gradient(145deg,rgba(147,51,234,0.2),rgba(244,114,182,0.16)); --av4-ring: rgba(192,132,252,0.2); --av4-glow: 0 16px 34px rgba(192,132,252,0.18); --av5-bg: linear-gradient(145deg,rgba(96,165,250,0.2), rgba(124,58,237,0.16)); --av5-ring: rgba(96,165,250,0.2); --av5-glow: 0 16px 34px rgba(96,165,250,0.18); --shadow-sm: 0 2px 8px rgba(2,6,23,0.24), 0 10px 22px rgba(2,6,23,0.16); --shadow-md: 0 14px 38px rgba(2,6,23,0.28); --shadow-lg: 0 24px 56px rgba(2,6,23,0.34); --shadow-xl: 0 34px 90px rgba(2,6,23,0.4); } /* ── BASE ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; font-family: var(--font-body); color: var(--c-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; background: var(--c-bg); scrollbar-gutter: stable; } body, button, input, textarea, select { font: inherit; } a { color: inherit; } button { cursor: pointer; } /* Background */ body { background: radial-gradient(780px 460px at 8% -8%, rgba(37,99,235,0.16), transparent 58%), radial-gradient(760px 420px at 92% 8%, rgba(124,58,237,0.14), transparent 58%), radial-gradient(640px 360px at 60% 100%, rgba(56,189,248,0.08), transparent 62%), linear-gradient(180deg, #ffffff 0%, var(--c-bg) 48%, #eef3fb 100%); } body.studio-playground-page { overflow: hidden; } [data-theme="dark"] body { background: radial-gradient(780px 460px at 8% -8%, rgba(37,99,235,0.24), transparent 58%), radial-gradient(760px 420px at 92% 8%, rgba(192,132,252,0.18), transparent 58%), radial-gradient(640px 360px at 50% 100%, rgba(56,189,248,0.10), transparent 62%), linear-gradient(180deg, #0c1529 0%, #0f172a 44%, var(--c-bg) 100%); } /* Soft lighting veil */ body::before { content: ""; position: fixed; inset: -40px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0) 28%), radial-gradient(820px 420px at 50% -8%, rgba(255,255,255,0.34), transparent 60%); opacity: 0.9; } [data-theme="dark"] body::before { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 32%), radial-gradient(820px 420px at 50% -8%, rgba(148,163,184,0.08), transparent 62%); opacity: 1; } #studioApp { min-height: 100vh; position: relative; } #studioApp.is-playground-route { position: fixed; inset: 0; width: 100%; height: var(--studio-playground-vh, 100vh); min-height: var(--studio-playground-vh, 100vh); overflow: hidden; } @supports (height: 100dvh) { #studioApp.is-playground-route { height: var(--studio-playground-vh, 100dvh); min-height: var(--studio-playground-vh, 100dvh); } } .studio-shell { display: flex; flex-direction: column; min-height: 100vh; } .studio-shell.studio-shell-playground, .studio-shell.studio-shell-public-chat, .studio-shell:has(.studio-playground-shell) { min-height: 0; height: var(--studio-playground-vh, 100vh); overflow: hidden; } @supports (height: 100dvh) { .studio-shell.studio-shell-playground, .studio-shell.studio-shell-public-chat, .studio-shell:has(.studio-playground-shell) { height: var(--studio-playground-vh, 100dvh); min-height: var(--studio-playground-vh, 100dvh); } } /* end styles/core/foundation.css */ /* begin styles/core/shell.css */ /* ── TOPBAR ────────────────────────────────────────────────── */ .studio-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; height: 54px; backdrop-filter: blur(24px) saturate(1.6); background: rgba(255,255,255,0.72); border-bottom: 1px solid rgba(148,163,184,0.18); box-shadow: 0 12px 32px rgba(15,23,42,0.08); flex-shrink: 0; } [data-theme="dark"] .studio-topbar { background: rgba(15,23,42,0.72); border-bottom-color: rgba(148,163,184,0.16); box-shadow: 0 18px 38px rgba(2,6,23,0.28); } .studio-launch-credit-wrap { position: sticky; top: 54px; z-index: 45; padding: 8px 18px 0; pointer-events: none; } .studio-launch-credit-badge { width: min(980px, 100%); min-height: 42px; margin: 0 auto; padding: 7px 9px 7px 10px; border: 1px solid rgba(37,99,235,0.22); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(239,246,255,0.9)), var(--c-panel-strong); box-shadow: 0 14px 32px rgba(15,23,42,0.12); color: var(--c-text); display: flex; align-items: center; gap: 10px; pointer-events: auto; backdrop-filter: blur(18px) saturate(1.35); } [data-theme="dark"] .studio-launch-credit-badge { border-color: rgba(96,165,250,0.28); background: linear-gradient(135deg, rgba(15,23,42,0.94), rgba(30,41,59,0.9)), var(--c-panel-strong); box-shadow: 0 18px 36px rgba(2,6,23,0.34); } .studio-launch-credit-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0; } .studio-launch-credit-copy { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .studio-launch-credit-copy strong { font-size: 13px; font-weight: 760; letter-spacing: -0.02em; } .studio-launch-credit-copy span { min-width: 0; color: var(--c-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; } .studio-launch-credit-status { color: var(--c-good); font-size: 12px; font-weight: 650; white-space: nowrap; } .studio-launch-credit-status.is-error { color: var(--c-bad); } .studio-launch-credit-action { appearance: none; flex: 0 0 auto; min-height: 30px; border: none; border-radius: 999px; padding: 7px 13px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); color: #fff; font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: 0 10px 22px var(--c-accent-glow); } .studio-launch-credit-action:hover:not(:disabled) { transform: translateY(-1px); } .studio-launch-credit-action:disabled { cursor: wait; opacity: 0.72; } .studio-brand { display: flex; align-items: center; gap: 10px; } .studio-brand-copy h1 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .studio-brand-title-short { display: none; } .studio-brand-link { appearance: none; border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit; } .studio-brand-mark { width: 32px; height: 32px; border-radius: 9px; display: block; flex-shrink: 0; box-sizing: border-box; padding: 2px; transition: transform 140ms ease; } .studio-brand-mark:hover { transform: scale(1.06); } .studio-brand-mark-img { width: 100%; height: 100%; display: block; } .studio-topbar-nav { display: flex; align-items: center; gap: 1px; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 3px; } .studio-topbar-menu-wrap { position: relative; } .studio-topbar-link { background: none; border: none; padding: 5px 13px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--c-muted); cursor: pointer; white-space: nowrap; transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px transparent; } .studio-topbar-link:hover { background: var(--c-panel-strong); color: var(--c-text); transform: translateY(-1px); } .studio-topbar-link.active { background: linear-gradient(135deg, var(--c-accent-soft), rgba(37,99,235,0.08)); color: var(--c-accent-hi); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(37,99,235,0.2), 0 10px 22px rgba(37,99,235,0.12); } [data-theme="dark"] .studio-topbar-link.active { color: var(--c-accent); box-shadow: inset 0 0 0 1px rgba(96,165,250,0.22), 0 10px 22px rgba(2,6,23,0.28); } .studio-topbar-menu { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); width: min(1080px, calc(100vw - 40px)); padding: 18px 20px 20px; border-radius: 26px; border: 1px solid var(--c-line-strong); background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,248,255,0.92)), var(--c-panel-strong); box-shadow: var(--shadow-xl); backdrop-filter: blur(24px) saturate(1.45); display: grid; gap: 18px; z-index: 70; } [data-theme="dark"] .studio-topbar-menu { background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(11,18,32,0.94)), var(--c-panel-strong); border-color: rgba(96,165,250,0.22); } .studio-product-menu { grid-template-columns: 1fr; align-items: start; } .studio-solutions-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(1120px, calc(100vw - 40px)); } .studio-product-menu-section { display: grid; gap: 12px; align-content: start; } .studio-product-menu-title { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); } .studio-product-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; } .studio-solutions-menu .studio-product-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-product-menu-grid--capabilities, .studio-product-menu-grid--platform, .studio-product-menu-grid--teams { grid-template-columns: 1fr; } .studio-solutions-menu .studio-product-menu-card { min-height: 96px; padding: 12px; gap: 10px; } .studio-solutions-menu .studio-product-menu-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 13px; } .studio-solutions-menu .studio-product-menu-copy strong { font-size: 14px; } .studio-solutions-menu .studio-product-menu-copy small { max-width: none; font-size: 12px; line-height: 1.38; } .studio-product-menu-card { position: relative; overflow: hidden; appearance: none; width: 100%; min-height: 104px; border: 1px solid transparent; background: linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.34)); border-radius: 18px; padding: 14px; display: flex; align-items: flex-start; gap: 12px; text-align: left; color: var(--c-text); transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .studio-product-menu-card::after { content: ""; position: absolute; right: 14px; bottom: 12px; width: 56px; height: 24px; opacity: 0.14; background: linear-gradient(to top, var(--c-accent) 0 46%, transparent 46%) 0 100% / 7px 100% no-repeat, linear-gradient(to top, var(--c-accent-hi) 0 72%, transparent 72%) 14px 100% / 7px 100% no-repeat, linear-gradient(to top, #14b8a6 0 58%, transparent 58%) 28px 100% / 7px 100% no-repeat, linear-gradient(to top, var(--c-accent) 0 86%, transparent 86%) 42px 100% / 7px 100% no-repeat; pointer-events: none; } [data-theme="dark"] .studio-product-menu-card { background: linear-gradient(180deg, rgba(20,29,49,0.88), rgba(12,20,36,0.84)); } .studio-product-menu-card:hover { transform: translateY(-1px); border-color: var(--c-line-strong); background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(245,248,255,0.52)); box-shadow: var(--shadow-sm); } [data-theme="dark"] .studio-product-menu-card:hover { background: linear-gradient(180deg, rgba(24,36,60,0.96), rgba(15,23,42,0.9)); } .studio-product-menu-icon { width: 42px; height: 42px; border-radius: 14px; flex: 0 0 42px; display: inline-grid; place-items: center; color: var(--c-accent); background: linear-gradient(145deg, rgba(37,99,235,0.12), rgba(124,58,237,0.1)); border: 1px solid rgba(37,99,235,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); } [data-theme="dark"] .studio-product-menu-icon { color: #bfdbfe; background: linear-gradient(145deg, rgba(96,165,250,0.18), rgba(192,132,252,0.14)); border-color: rgba(96,165,250,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .studio-product-menu-icon svg { width: 20px; height: 20px; } .studio-product-menu-copy { display: grid; gap: 4px; min-width: 0; } .studio-product-menu-copy strong { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--c-text); } .studio-product-menu-copy small { font-size: 12.5px; line-height: 1.45; color: var(--c-muted); max-width: 32ch; } .studio-product-menu-grid--capabilities .studio-product-menu-copy small { max-width: 42ch; } .studio-topbar-menu-item { display: grid; gap: 4px; padding: 10px 11px; border-radius: 12px; text-decoration: none; border: 1px solid transparent; color: var(--c-text); background: transparent; transition: background 120ms ease, border-color 120ms ease, transform 120ms ease; } .studio-topbar-menu-item:hover { background: var(--c-panel); border-color: var(--c-line); transform: translateY(-1px); } .studio-topbar-menu-item span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .studio-topbar-menu-item strong { font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--c-text); } .studio-topbar-actions { display: flex; align-items: center; gap: 8px; } .studio-topbar-cta { padding-inline: 14px; } .studio-topbar-cta-short { display: none; } .studio-mobile-menu-toggle, .studio-mobile-nav-panel { display: none; } .studio-mobile-menu-toggle { width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--c-line); color: var(--c-muted); transition: background 130ms ease, color 130ms ease, border-color 130ms ease; } .studio-mobile-menu-toggle:hover { background: var(--c-panel-strong); color: var(--c-text); border-color: var(--c-line-strong); } .studio-mobile-nav-panel { width: 100%; order: 4; padding-top: 8px; } .studio-mobile-nav-primary { display: grid; gap: 8px; padding: 10px; border-radius: 18px; border: 1px solid rgba(148,163,184,0.22); background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,255,0.94)); box-shadow: 0 16px 34px rgba(15,23,42,0.12); backdrop-filter: blur(18px) saturate(1.15); } [data-theme="dark"] .studio-mobile-nav-primary { border-color: rgba(96,165,250,0.18); background: linear-gradient(180deg, rgba(11,18,32,0.96), rgba(8,13,28,0.94)); box-shadow: 0 20px 40px rgba(2,6,23,0.34); } .studio-mobile-nav-link { appearance: none; width: 100%; border: 1px solid transparent; background: transparent; color: var(--c-text); border-radius: 14px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; text-align: left; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .studio-mobile-nav-link:hover { background: var(--c-panel-strong); border-color: var(--c-line); transform: translateY(-1px); } .studio-mobile-nav-link.active { background: linear-gradient(135deg, var(--c-accent-soft), rgba(37,99,235,0.08)); border-color: rgba(37,99,235,0.28); color: var(--c-accent-hi); box-shadow: 0 10px 22px rgba(37,99,235,0.12); } [data-theme="dark"] .studio-mobile-nav-link.active { border-color: rgba(96,165,250,0.32); color: var(--c-accent); box-shadow: 0 10px 22px rgba(2,6,23,0.28); } .studio-mobile-nav-submenu { display: grid; gap: 4px; padding-top: 0; } .studio-mobile-nav-subgroup { display: grid; gap: 6px; } .studio-mobile-nav-subgroup + .studio-mobile-nav-subgroup { padding-top: 4px; border-top: 1px solid var(--c-line); } .studio-mobile-nav-subgroup-title { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); padding-inline: 4px; } .studio-mobile-nav-subgrid { display: grid; gap: 4px; } .studio-mobile-nav-product { appearance: none; width: 100%; border: 1px solid transparent; background: transparent; color: var(--c-text); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; text-align: left; } .studio-mobile-nav-product:hover { background: var(--c-panel-strong); border-color: var(--c-line); } .studio-mobile-nav-product .studio-product-menu-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; } .studio-mobile-nav-product .studio-product-menu-icon svg { width: 16px; height: 16px; } .studio-mobile-nav-product-copy { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .studio-mobile-nav-product-copy strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--c-text); } .studio-mobile-nav-product-copy small { font-size: 11.5px; line-height: 1.45; color: var(--c-muted); } .studio-mobile-nav-subitem { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; text-decoration: none; color: var(--c-text); } .studio-mobile-nav-subitem:hover { background: var(--c-panel-strong); border-color: var(--c-line); } .studio-mobile-nav-subitem span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .studio-mobile-nav-subitem strong { font-size: 12px; line-height: 1.45; font-weight: 600; color: var(--c-text); } /* Theme toggle */ .theme-toggle { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: none; border: 1px solid var(--c-line); color: var(--c-muted); font-size: 16px; transition: background 130ms ease, color 130ms ease, border-color 130ms ease; } .theme-toggle:hover { background: var(--c-panel-strong); color: var(--c-text); border-color: var(--c-line-strong); } /* User avatar */ .studio-user-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); border: none; flex-shrink: 0; box-shadow: 0 2px 8px var(--c-accent-glow); transition: transform 130ms ease, box-shadow 130ms ease; } .studio-user-avatar:hover { transform: scale(1.08); box-shadow: 0 4px 14px var(--c-accent-glow); } .studio-user-avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--c-accent), 0 4px 14px var(--c-accent-glow); } /* ── Profile menu ───────────────────────────────────────────── */ .studio-profile-menu-wrap { position: relative; } .studio-profile-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; padding: 6px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(148,163,184,0.22); background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,247,255,0.95)); box-shadow: 0 18px 40px rgba(15,23,42,0.16); backdrop-filter: blur(18px) saturate(1.18); z-index: 500; } [data-theme="dark"] .studio-profile-menu { border-color: rgba(96,165,250,0.2); background: linear-gradient(180deg, rgba(11,18,32,0.97), rgba(8,13,28,0.95)); box-shadow: 0 24px 46px rgba(2,6,23,0.38); } .studio-profile-menu-header { padding: 10px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--studio-line); } .studio-profile-menu-email { font-size: 11px; font-weight: 600; color: var(--studio-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .studio-profile-menu-subtitle { margin-top: 2px; font-size: 10px; color: var(--studio-muted); } .studio-profile-menu-section { padding: 4px 10px 6px; } .studio-profile-menu-section-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--studio-muted); } .studio-profile-menu-divider { height: 1px; margin: 4px 0; background: var(--studio-line); } .studio-profile-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--studio-text); background: none; border: none; cursor: pointer; text-align: left; transition: background 120ms ease, color 120ms ease; } .studio-profile-menu-item:hover { background: var(--studio-hover, rgba(37,99,235,.06)); } .studio-profile-menu-item svg { flex-shrink: 0; opacity: .7; } [data-theme="dark"] .studio-profile-menu-item:hover { background: rgba(96,165,250,0.1); } @media (max-width: 760px) { .studio-launch-credit-wrap { padding: 7px 10px 0; } .studio-launch-credit-badge { align-items: flex-start; border-radius: 18px; padding: 9px; gap: 9px; } .studio-launch-credit-copy { align-items: flex-start; flex-direction: column; gap: 2px; white-space: normal; } .studio-launch-credit-copy span { line-height: 1.35; overflow: visible; } .studio-launch-credit-status { display: none; } .studio-launch-credit-action { min-height: 32px; padding: 7px 10px; white-space: nowrap; } } /* end styles/core/shell.css */ /* begin styles/pages/dashboard-pricing.css */ /* ══════════════════════════════════════════════════════════ SUPAVECTOR — Premium Pricing & Billing Redesign New visual identity: sv-* namespace ══════════════════════════════════════════════════════════ */ /* ── Animations ───────────────────────────────────────── */ @keyframes sv-drift { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; } 50% { transform: translate(20px, -15px) scale(1.08); opacity: .7; } } @keyframes sv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.3); } 50% { box-shadow: 0 0 0 8px rgba(99,102,241,0); } } /* ══════════════════════════════════════════════════════════ DASHBOARD SURFACES (preserved from base) ══════════════════════════════════════════════════════════ */ .dashboard-hero { position: relative; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, transparent), color-mix(in srgb, var(--c-panel) 92%, transparent)), var(--c-panel-strong); border-color: color-mix(in srgb, var(--c-accent) 10%, var(--c-line)); box-shadow: 0 18px 46px rgba(15,23,42,0.08), var(--shadow-sm); } [data-theme="dark"] .dashboard-hero { background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.82)), var(--c-panel-strong); box-shadow: 0 20px 52px rgba(2,6,23,0.34), var(--shadow-sm); } .dashboard-hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr); gap: 14px; align-items: stretch; position: relative; z-index: 1; } .dashboard-hero-copy { display: grid; gap: 12px; min-width: 0; } .dashboard-hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .dashboard-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 0; } .dashboard-hero-actions > .studio-button, .dashboard-hero-actions > .studio-button-secondary, .dashboard-hero-actions > .studio-button-ghost { min-height: 34px; padding: 7px 12px; font-size: 12px; } .usage-range-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--c-line); border-radius: 999px; background: color-mix(in srgb, var(--c-panel) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .usage-range-toggle-btn { min-height: 24px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--c-muted); font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; cursor: pointer; transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; } .usage-range-toggle-btn:hover { color: var(--c-text); background: var(--studio-hover); } .usage-range-toggle-btn.is-active { color: var(--c-text); background: var(--c-panel); box-shadow: 0 4px 12px rgba(15,23,42,.10); } [data-theme="dark"] .usage-range-toggle { background: rgba(15,23,42,.52); } [data-theme="dark"] .usage-range-toggle-btn.is-active { background: rgba(30,41,59,.94); box-shadow: 0 6px 14px rgba(2,6,23,.28); } .dashboard-hero-grid-single { grid-template-columns: 1fr; } .dashboard-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 0; } .dashboard-kpi-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 112px; padding: 15px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-accent) 8%, var(--c-line)); background: color-mix(in srgb, var(--c-panel-strong) 92%, var(--c-surface)); box-shadow: 0 8px 24px rgba(15,23,42,0.05); } .dashboard-kpi-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hi)); opacity: 0.35; } [data-theme="dark"] .dashboard-kpi-card { background: rgba(15,23,42,0.84); box-shadow: 0 14px 30px rgba(2,6,23,0.26); } .dashboard-kpi-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); } .dashboard-kpi-card strong { display: block; margin-top: 12px; font-size: clamp(26px, 2.5vw, 34px); font-weight: 620; line-height: 1; letter-spacing: -.04em; } .dashboard-kpi-card p { margin: 8px 0 0; font-size: 12px; color: var(--c-muted); line-height: 1.45; } .dashboard-pulse-grid { display: grid; gap: 10px; } .dashboard-pulse-card { padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06)); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); } [data-theme="dark"] .dashboard-pulse-card { background: linear-gradient(180deg, rgba(30,30,34,.86), rgba(20,20,24,.82)); } .dashboard-pulse-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .dashboard-pulse-card strong { display: block; margin-top: 8px; font-size: 27px; font-weight: 560; line-height: 1; letter-spacing: -.04em; } .dashboard-pulse-card p { margin: 7px 0 0; font-size: 12.5px; color: var(--c-muted); line-height: 1.55; } .dashboard-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .dashboard-module-card { display: flex; flex-direction: column; min-height: 220px; } .dashboard-module-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .dashboard-module-metric { margin-top: 10px; font-size: 30px; font-weight: 560; line-height: 1; letter-spacing: -.05em; color: var(--c-text); } .dashboard-module-title { margin: 12px 0 0; font-size: 18px; letter-spacing: -.03em; } .dashboard-module-copy { margin: 8px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.6; } .dashboard-module-chips { margin-top: 14px; } .dashboard-module-actions { margin-top: auto; padding-top: 16px; } .dashboard-body-grid { align-items: start; gap: 16px; } .dashboard-section-head { padding-top: 0; } .dashboard-summary-list { margin-top: 6px; } .dashboard-summary-attention { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); } .dashboard-summary-caption { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px; } .dashboard-summary-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 12.5px; line-height: 1.55; } .dashboard-summary-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); } .dashboard-project-grid { display: grid; gap: 12px; } .dashboard-project-card { padding: 16px 18px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 94%, transparent), color-mix(in srgb, var(--c-panel) 92%, transparent)), var(--c-panel-strong); border-color: color-mix(in srgb, var(--c-accent) 8%, var(--c-line)); transition: border-color 160ms ease, box-shadow 160ms ease; } .dashboard-project-card:hover { border-color: color-mix(in srgb, var(--c-accent) 22%, var(--c-line)); box-shadow: 0 14px 34px rgba(15,23,42,0.08); } [data-theme="dark"] .dashboard-project-card:hover { box-shadow: 0 18px 42px rgba(2,6,23,0.34); } .dashboard-project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .dashboard-project-copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; } .dashboard-project-avatar { width: 40px; height: 40px; min-width: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; background: var(--studio-avatar-bg, var(--av0-bg)); box-shadow: inset 0 0 0 1px var(--studio-avatar-ring, var(--av0-ring)), var(--studio-avatar-shadow, var(--av0-glow)); overflow: hidden; } .dashboard-project-copy-body { min-width: 0; flex: 1; } .dashboard-project-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dashboard-project-title-row h3 { margin: 0; font-size: 16.5px; font-weight: 680; letter-spacing: -.02em; } .dashboard-project-copy-body p { margin: 4px 0 0; color: var(--c-muted); font-size: 12.5px; line-height: 1.5; } .dashboard-project-copy-body > .studio-chip { margin-top: 7px; } .dashboard-project-meta { margin-top: 8px; font-size: 11px; color: var(--c-muted); font-family: var(--font-mono); overflow-wrap: anywhere; } .dashboard-project-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; } .dashboard-project-actions > .studio-button, .dashboard-project-actions > .studio-button-secondary, .dashboard-project-actions > .studio-button-ghost { min-height: 32px; padding: 7px 12px; font-size: 12px; } .dashboard-project-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .dashboard-project-stat { padding: 10px 11px; border-radius: 12px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 86%, transparent); } .dashboard-project-stat span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); } .dashboard-project-stat strong { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; } .dashboard-project-memory-block { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 13px; background: color-mix(in srgb, var(--c-panel) 88%, transparent); } .dashboard-project-memory-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .dashboard-project-memory-head span { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); } .dashboard-project-memory-head .studio-button-ghost { min-height: 28px; padding: 6px 10px; font-size: 11px; } .dashboard-project-brains { margin-top: 0; } .dashboard-project-brain-chip { border: none; cursor: pointer; } .dashboard-project-summary { margin-top: 12px; padding: 11px 12px; border-radius: 13px; border: 1px dashed var(--c-line-strong); background: color-mix(in srgb, var(--c-panel) 88%, transparent); color: var(--c-muted); font-size: 12.5px; line-height: 1.5; } .dashboard-project-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .dashboard-activity-list { display: grid; } .dashboard-activity-row { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; padding: 11px 2px; border-bottom: 1px solid var(--c-line); cursor: pointer; text-align: left; } .dashboard-activity-row:last-child { border-bottom: none; padding-bottom: 2px; } .dashboard-activity-avatar { width: 28px; height: 28px; min-width: 28px; display: grid; place-items: center; border-radius: 10px; background: var(--c-panel); border: 1px solid var(--c-line); overflow: hidden; } .dashboard-activity-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .dashboard-activity-title { font-size: 13px; font-weight: 600; color: var(--c-text); } .dashboard-activity-meta { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-activity-arrow { color: var(--c-muted); flex-shrink: 0; } .playground-launch-card .dashboard-project-summary { margin-top: 12px; } .dashboard-account-identity { display: flex; align-items: center; gap: 14px; } .dashboard-account-avatar { width: 52px; height: 52px; min-width: 52px; display: grid; place-items: center; border-radius: 16px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); box-shadow: 0 8px 22px var(--c-accent-glow); } .dashboard-account-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .dashboard-account-email { margin-top: 4px; color: var(--c-muted); font-size: 13px; } .dashboard-account-list { display: grid; gap: 10px; margin-top: 18px; } .dashboard-account-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--c-line); } .dashboard-account-row:last-child { border-bottom: none; padding-bottom: 0; } .dashboard-account-row span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); } .dashboard-account-row strong { font-size: 13px; font-weight: 600; color: var(--c-text); text-align: right; overflow-wrap: anywhere; } .dashboard-shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dashboard-shortcut-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; padding: 13px; border-radius: 13px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 88%, transparent); cursor: pointer; text-align: left; } .dashboard-shortcut-card span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .dashboard-shortcut-card strong { font-size: 14px; line-height: 1.4; color: var(--c-text); } .dashboard-sidebar-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dashboard-sidebar-tab { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 88%, transparent); color: var(--c-text); text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .dashboard-sidebar-tab::before, .billing-surface-tab::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, var(--c-accent), var(--c-accent-hi)); opacity: 0; transition: opacity .18s ease; } .dashboard-sidebar-tab span { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; } .dashboard-sidebar-tab small { font-size: 11.5px; line-height: 1.4; color: var(--c-muted); } .dashboard-sidebar-tab.is-active { border-color: rgba(37,99,235,.28); background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.025)), var(--c-panel-strong); box-shadow: 0 12px 28px rgba(37,99,235,.10); } .dashboard-sidebar-tab.is-active::before { opacity: 1; } .dashboard-sidebar-tab.is-active span { color: var(--c-accent-hi); } [data-theme="dark"] .dashboard-sidebar-tab.is-active span { color: var(--c-accent); } .dashboard-plan-card { position: relative; } .dashboard-plan-card.compact .dashboard-plan-meter-grid { grid-template-columns: 1fr; } .dashboard-plan-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dashboard-plan-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; } .dashboard-plan-highlight { min-width: 0; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); } .dashboard-plan-highlight span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); } .dashboard-plan-highlight strong { display: block; max-width: 100%; margin-top: 7px; font-size: 17px; font-weight: 560; letter-spacing: -.03em; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .dashboard-plan-meter-grid, .billing-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .dashboard-plan-meter-grid > * { min-width: 0; } .dashboard-plan-meter { min-width: 0; overflow: hidden; } .dashboard-plan-meter .studio-progress-head { flex-direction: column; align-items: flex-start; gap: 4px; } .dashboard-plan-meter .studio-progress-title { flex: 0 0 auto; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.3; } .dashboard-plan-meter .studio-progress-value { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; font-size: 10px; letter-spacing: .03em; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: left; line-height: 1.28; } .studio-progress-card.is-over-limit { border-color: rgba(225,29,72,.24); background: linear-gradient(180deg, rgba(225,29,72,.08), rgba(225,29,72,.02)), var(--c-panel-strong); } /* ══════════════════════════════════════════════════════════ NEW PREMIUM SURFACES — sv-* namespace ══════════════════════════════════════════════════════════ */ /* ── Page Hero ────────────────────────────────────────── */ .sv-page-hero { position: relative; overflow: hidden; padding: 56px 40px 48px; border-radius: 28px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); color: #fff; text-align: center; } [data-theme="light"] .sv-page-hero { background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%); } .sv-page-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: sv-drift 18s ease-in-out infinite; } .sv-page-hero-orb--1 { top: -20%; right: -5%; width: 400px; height: 400px; background: rgba(99, 102, 241, 0.35); } .sv-page-hero-orb--2 { bottom: -25%; left: -8%; width: 350px; height: 350px; background: rgba(16, 185, 129, 0.25); animation-delay: -8s; animation-duration: 22s; } .sv-page-hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .sv-page-hero-badge { display: inline-block; padding: 5px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.80); backdrop-filter: blur(8px); } .sv-page-hero-title { margin: 20px 0 0; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.06em; line-height: .95; background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.65)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sv-page-hero-sub { margin: 16px auto 0; max-width: 48ch; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.60); font-weight: 400; } .sv-page-hero-stats { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 32px; padding: 16px 24px; border-radius: 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(12px); } .sv-page-hero-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 16px; } .sv-page-hero-stat-value { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: #fff; } .sv-page-hero-stat-label { font-size: 11px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .sv-page-hero-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,0.10); flex-shrink: 0; } .sv-page-hero-actions { margin-top: 24px; } /* ── Tab bar ──────────────────────────────────────────── */ .sv-tab-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 24px 0; flex-wrap: wrap; } .sv-tab-toggle { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--c-panel); border: 1px solid var(--c-line); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } [data-theme="dark"] .sv-tab-toggle { background: rgba(15,23,42,0.6); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } .sv-tab { padding: 10px 24px; border-radius: 11px; border: none; background: transparent; color: var(--c-muted); font-size: 13px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; transition: all .2s ease; white-space: nowrap; } .sv-tab:hover:not(.sv-tab--active) { color: #111827; background: rgba(37,99,235,0.08); } [data-theme="dark"] .sv-tab:hover:not(.sv-tab--active) { color: #f8fafc; background: rgba(96,165,250,0.12); } .sv-tab--active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff !important; box-shadow: 0 4px 14px rgba(99,102,241,0.30); } .sv-tab-bar-badge { font-size: 12px; color: var(--c-muted); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-panel); } .sv-tab-bar-badge strong { color: var(--c-text); } /* ── Pricing content wrapper ──────────────────────────── */ .sv-pricing-content, .sv-billing-content { animation: sv-fade-in .3s ease; } @keyframes sv-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Benefits strip ───────────────────────────────────── */ .sv-benefits-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; } .sv-benefit-item { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--c-line); background: var(--c-panel); transition: transform .2s ease, border-color .2s ease; } .sv-benefit-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #6366f1 20%, var(--c-line)); } .sv-benefit-icon { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08)); color: #6366f1; } [data-theme="dark"] .sv-benefit-icon { background: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(139,92,246,0.14)); color: #a5b4fc; } .sv-benefit-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; line-height: 1.3; } .sv-benefit-text span { display: block; margin-top: 4px; font-size: 12px; color: var(--c-muted); line-height: 1.45; } /* ── Plan grid (shared pricing + billing) ─────────────── */ .sv-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; grid-auto-rows: 1fr; } /* Reuse hosted-plan-card / pricing-hosted-plan-card styling */ .sv-plan-grid .studio-card.hosted-plan-card, .sv-plan-grid .studio-card.pricing-hosted-plan-card { position: relative; overflow: hidden; padding: 24px 20px; border-radius: 18px; border: 1px solid var(--c-line); background: var(--c-panel); box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, border-color .28s ease; } .sv-plan-grid .studio-card.hosted-plan-card:hover, .sv-plan-grid .studio-card.pricing-hosted-plan-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.10); border-color: color-mix(in srgb, #6366f1 30%, var(--c-line)); } [data-theme="dark"] .sv-plan-grid .studio-card.hosted-plan-card, [data-theme="dark"] .sv-plan-grid .studio-card.pricing-hosted-plan-card { background: rgba(15,23,42,0.80); } .sv-plan-grid .hosted-plan-card.is-current, .sv-plan-grid .pricing-hosted-plan-card.is-current { border-color: #6366f1; box-shadow: 0 0 0 1px rgba(99,102,241,0.15), 0 20px 60px rgba(99,102,241,0.12); } .sv-plan-grid .hosted-plan-card.is-current::before, .sv-plan-grid .pricing-hosted-plan-card.is-current::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa); } /* Plan card inner elements */ .hosted-plan-card, .pricing-hosted-plan-card { display: flex; flex-direction: column; min-width: 0; min-height: 100%; } .hosted-plan-card-head, .pricing-hosted-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 92px; } .hosted-plan-card-head > div, .pricing-hosted-plan-head > div { min-width: 0; } .pricing-rate-eyebrow { display: inline-flex; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6366f1; } [data-theme="dark"] .pricing-rate-eyebrow { color: #a5b4fc; } .hosted-plan-card-price, .pricing-hosted-plan-price { margin-top: 8px; max-width: 100%; font-size: clamp(1.2rem, 1.45vw, 1.52rem); line-height: 1.14; letter-spacing: 0; font-weight: 620; color: var(--c-text); overflow-wrap: anywhere; } .hosted-plan-card-sub, .pricing-hosted-plan-price-sub { margin-top: 6px; font-size: 12.5px; color: var(--c-muted); } .hosted-plan-card-copy, .pricing-hosted-plan-copy { margin: 14px 0 0; font-size: 13px; line-height: 1.58; color: var(--c-muted); } .pricing-hosted-plan-copy { min-height: 82px; } .hosted-plan-card-list, .pricing-hosted-plan-list { display: grid; gap: 6px; margin-top: 16px; } .hosted-plan-card-list div, .pricing-hosted-plan-list-item { display: flex; align-items: flex-start; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c-panel) 70%, var(--c-surface) 30%); font-size: 12.5px; line-height: 1.4; color: var(--c-text); } [data-theme="dark"] .hosted-plan-card-list div, [data-theme="dark"] .pricing-hosted-plan-list-item { background: rgba(15,23,42,0.5); } .pricing-list-check { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; width: 16px; height: 16px; min-width: 16px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); } .pricing-list-check::before { content: ""; width: 6px; height: 3.5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); margin-top: -1px; } .hosted-plan-card-actions, .pricing-hosted-plan-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: auto; padding-top: 18px; } .hosted-plan-card-actions > *, .pricing-hosted-plan-actions > * { width: 100%; min-width: 0; justify-content: center; white-space: normal; line-height: 1.2; text-align: center; } .hosted-plan-card-capabilities, .pricing-hosted-plan-capabilities { margin-top: 12px; align-content: flex-start; } .pricing-hosted-plan-capabilities { min-height: 68px; } .pricing-hosted-plan-label-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pricing-hosted-plan-audience, .pricing-hosted-plan-capabilities { margin-top: 12px; } .pricing-hosted-plan-audience { min-height: 58px; align-content: flex-start; } .hosted-plan-card.compact .hosted-plan-card-price { font-size: clamp(1.18rem, 1.45vw, 1.42rem); } .hosted-plan-card.compact .hosted-plan-card-head { min-height: 82px; } .hosted-plan-card.compact .hosted-plan-card-list { grid-template-columns: minmax(0, 1fr); margin-top: 10px; } .hosted-plan-card.compact .hosted-plan-card-actions { padding-top: 14px; } /* ── Rate hero cards (developer pricing) ──────────────── */ .sv-rate-hero-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; } .sv-rate-hero-card { position: relative; overflow: hidden; padding: 28px 24px; border-radius: 22px; border: 1px solid var(--c-line); background: var(--c-panel); box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: transform .24s ease, box-shadow .24s ease; } .sv-rate-hero-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); } [data-theme="dark"] .sv-rate-hero-card { background: rgba(15,23,42,0.80); } .sv-rate-hero-card--accent { border-color: rgba(245,158,11,0.30); background: linear-gradient(160deg, var(--c-panel), color-mix(in srgb, #f59e0b 3%, var(--c-panel))); } .sv-rate-hero-card--accent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #f59e0b, #d97706); } .sv-rate-hero-badge { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .sv-rate-hero-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6366f1; margin-bottom: 8px; } [data-theme="dark"] .sv-rate-hero-label { color: #a5b4fc; } .sv-rate-hero-value { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--c-text); } .sv-rate-hero-unit { margin-top: 6px; font-size: 13px; color: var(--c-muted); font-weight: 500; } .sv-rate-hero-desc { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--c-muted); } .sv-rate-hero-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-muted); } /* ── Section blocks ───────────────────────────────────── */ .sv-section-block { padding: 28px; border-radius: 22px; border: 1px solid var(--c-line); background: var(--c-panel); margin-bottom: 20px; } [data-theme="dark"] .sv-section-block { background: rgba(15,23,42,0.60); } .sv-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .sv-section-header h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); } .sv-section-header p { margin: 4px 0 0; font-size: 13px; color: var(--c-muted); } /* ── Tables (sv-table) ────────────────────────────────── */ .sv-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--c-line); } .sv-table { width: 100%; border-collapse: collapse; font-size: 13px; } .sv-table thead tr { background: color-mix(in srgb, var(--c-panel) 80%, var(--c-surface) 20%); border-bottom: 1px solid var(--c-line); } [data-theme="dark"] .sv-table thead tr { background: rgba(15,23,42,0.50); } .sv-table th { text-align: left; padding: 12px 16px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .sv-table td { padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--c-line) 50%, transparent); vertical-align: middle; } .sv-table tbody tr { transition: background .12s ease; } .sv-table tbody tr:hover { background: color-mix(in srgb, #6366f1 3%, transparent); } .sv-table tbody tr:last-child td { border-bottom: none; } .sv-table-muted { font-size: 11px; color: var(--c-muted); } .sv-table-model-text { display: inline; color: var(--c-text); font-size: 12.5px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; } .sv-table-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #6366f1 10%, var(--c-panel)); border: 1px solid color-mix(in srgb, #6366f1 15%, var(--c-line)); font-size: 11px; font-weight: 700; color: var(--c-text); } .sv-table-badge--good { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.20); color: #16a34a; } [data-theme="dark"] .sv-table-badge--good { color: #86efac; } .sv-table-badge--warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.20); color: #d97706; } [data-theme="dark"] .sv-table-badge--warn { color: #fde68a; } /* ── Info columns ─────────────────────────────────────── */ .sv-info-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .sv-info-col { padding: 24px; border-radius: 18px; border: 1px solid var(--c-line); background: var(--c-panel); } [data-theme="dark"] .sv-info-col { background: rgba(15,23,42,0.60); } .sv-info-col h4 { margin: 0 0 12px; font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); } .sv-info-col ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; } .sv-info-col li { font-size: 12.5px; line-height: 1.55; color: var(--c-muted); } /* ── Empty state ──────────────────────────────────────── */ .sv-empty-state { padding: 36px; text-align: center; font-size: 13px; color: var(--c-muted); border-radius: 16px; border: 1px dashed var(--c-line); background: color-mix(in srgb, var(--c-panel) 50%, transparent); } /* ══════════════════════════════════════════════════════════ BILLING PAGE — sv-billing-page ══════════════════════════════════════════════════════════ */ /* ── KPI strip ────────────────────────────────────────── */ .sv-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; } .sv-kpi-strip--compact { margin-bottom: 0; } .sv-kpi-item { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--c-line); background: var(--c-panel); transition: transform .18s ease; } .sv-kpi-item:hover { transform: translateY(-1px); } [data-theme="dark"] .sv-kpi-item { background: rgba(15,23,42,0.60); } .sv-kpi-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .sv-kpi-value { display: block; margin-top: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); line-height: 1.15; } .sv-developer-balance-card .sv-kpi-item { padding: 14px 15px; border-radius: 13px; background: rgba(248,250,252,0.66); } [data-theme="dark"] .sv-developer-balance-card .sv-kpi-item { background: rgba(15,23,42,0.44); } .sv-developer-balance-card .sv-kpi-label { font-size: 9.5px; font-weight: 650; letter-spacing: .08em; } .sv-developer-balance-card .sv-kpi-value { font-size: 15px; font-weight: 680; letter-spacing: -.01em; } /* ── Usage meters grid ────────────────────────────────── */ .sv-meter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* ── Creator grid ─────────────────────────────────────── */ .sv-creator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; } .sv-creator-card { padding: 28px; border-radius: 22px; border: 1px solid color-mix(in srgb, #ec4899 12%, var(--c-line)); background: radial-gradient(ellipse at 90% 10%, rgba(244,114,182,0.06), transparent 50%), var(--c-panel); } [data-theme="dark"] .sv-creator-card { background: radial-gradient(ellipse at 90% 10%, rgba(244,114,182,0.04), transparent 50%), rgba(15,23,42,0.70); } .sv-creator-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .sv-creator-card-header h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); } .sv-creator-card-header p { margin: 4px 0 0; font-size: 13px; color: var(--c-muted); } .sv-creator-badges { display: flex; gap: 6px; flex-shrink: 0; } .sv-creator-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } /* ── Developer grid ───────────────────────────────────── */ .sv-developer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: 16px; margin-bottom: 24px; } .sv-developer-balance-card { padding: 24px; border-radius: 18px; border: 1px solid rgba(148,163,184,0.22); background: linear-gradient(180deg, rgba(255,255,255,0.92), var(--c-panel)); } [data-theme="dark"] .sv-developer-balance-card { border-color: rgba(148,163,184,0.18); background: rgba(15,23,42,0.58); } .sv-developer-balance-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .sv-developer-balance-header h3 { margin: 0; font-size: 15px; font-weight: 680; letter-spacing: 0; color: var(--c-text); } .sv-balance-display { display: flex; flex-direction: column; gap: 8px; } .sv-balance-amount { font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 700; letter-spacing: -.025em; line-height: 1; } .sv-balance-label { font-size: 12.5px; line-height: 1.45; color: var(--c-muted); } /* ── Top-up card ──────────────────────────────────────── */ .sv-topup-card { padding: 22px; border-radius: 18px; border: 1px solid rgba(148,163,184,0.22); background: var(--c-panel); } [data-theme="dark"] .sv-topup-card { border-color: rgba(148,163,184,0.18); background: rgba(15,23,42,0.58); } .sv-topup-card > h3 { margin: 0 0 14px; font-size: 15px; font-weight: 680; letter-spacing: 0; color: var(--c-text); } .sv-topup-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .sv-topup-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 8px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.24); background: rgba(248,250,252,0.72); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; } [data-theme="dark"] .sv-topup-btn { border-color: rgba(148,163,184,0.18); background: rgba(15,23,42,0.42); } .sv-topup-btn:hover { border-color: rgba(99,102,241,0.42); background: rgba(99,102,241,0.055); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,0.06); } .sv-topup-btn.active { border-color: rgba(99,102,241,0.48); background: rgba(99,102,241,0.085); box-shadow: inset 0 0 0 1px rgba(99,102,241,0.10); animation: none; } .sv-topup-btn strong { font-size: 15px; font-weight: 680; color: var(--c-text); letter-spacing: 0; } .sv-topup-btn span { font-size: 10.5px; color: var(--c-muted); } .sv-topup-custom { display: flex; gap: 8px; align-items: stretch; } .sv-topup-custom .studio-input { flex: 1; } .sv-topup-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line); font-size: 11.5px; line-height: 1.55; color: var(--c-muted); } .sv-credit-side-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .sv-autopay-card { position: relative; overflow: hidden; } .sv-autopay-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #22c55e, #38bdf8, #6366f1); } .sv-autopay-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sv-autopay-title-row h3 { margin: 0; font-size: 15px; font-weight: 680; letter-spacing: 0; color: var(--c-text); } .sv-autopay-copy { margin: 0 0 14px; font-size: 12px; line-height: 1.55; color: var(--c-muted); } .sv-topup-presets--compact { margin-bottom: 14px; } .sv-topup-presets--compact .sv-topup-btn { padding: 10px 8px; border-radius: 12px; } .sv-topup-presets--compact .sv-topup-btn strong { font-size: 14px; } /* ── Creator finance statuses (kept for compatibility) ── */ .creator-finance-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-panel); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--c-text); } .creator-finance-status--paid, .creator-finance-status--completed { border-color: rgba(34,197,94,.24); background: rgba(34,197,94,.10); color: #166534; } [data-theme="dark"] .creator-finance-status--paid, [data-theme="dark"] .creator-finance-status--completed { color: #bbf7d0; } .creator-finance-status--processing { border-color: rgba(59,130,246,.26); background: rgba(59,130,246,.10); color: #1d4ed8; } [data-theme="dark"] .creator-finance-status--processing { color: #bfdbfe; } .creator-finance-status--pending, .creator-finance-status--open { border-color: rgba(245,158,11,.24); background: rgba(245,158,11,.10); color: #9a3412; } [data-theme="dark"] .creator-finance-status--pending, [data-theme="dark"] .creator-finance-status--open { color: #fde68a; } .creator-finance-reference { display: inline-block; max-width: 100%; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); font-size: 11px; overflow-wrap: anywhere; } /* ── Transaction table (reuse from billing txn render) ── */ .billing-transaction-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--c-line); } .billing-transaction-table { width: 100%; border-collapse: collapse; font-size: 13px; } .billing-transaction-table thead tr { background: color-mix(in srgb, var(--c-panel) 80%, var(--c-surface) 20%); border-bottom: 1px solid var(--c-line); } [data-theme="dark"] .billing-transaction-table thead tr { background: rgba(15,23,42,.50); } .billing-transaction-table th { text-align: left; padding: 12px 16px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .billing-transaction-table th:first-child, .billing-transaction-table td:first-child { padding-left: 16px; } .billing-transaction-table td { padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--c-line) 50%, transparent); vertical-align: middle; } .billing-transaction-table tbody tr { transition: background .12s ease; } .billing-transaction-table tbody tr:hover { background: color-mix(in srgb, #6366f1 3%, transparent); } .billing-transaction-table tbody tr:last-child td { border-bottom: none; } .billing-transaction-date, .billing-transaction-details { font-size: 12.5px; color: var(--c-muted); } .billing-transaction-date, .billing-transaction-amount, .billing-transaction-balance { white-space: nowrap; } .billing-transaction-amount, .billing-transaction-balance { font-family: var(--font-mono); font-size: 12.5px; } .billing-transaction-amount { font-weight: 700; } .billing-transaction-details { max-width: 320px; overflow: hidden; text-overflow: ellipsis; } .billing-transaction-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); } .billing-transaction-pagination { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .billing-transaction-meta { font-size: 12px; color: var(--c-muted); } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 1280px) { .sv-benefits-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .sv-rate-hero-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sv-developer-grid { grid-template-columns: 1fr; } .sv-info-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sv-page-hero { padding: 44px 32px 40px; } .dashboard-plan-meter-grid, .billing-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dashboard-plan-highlights { grid-template-columns: 1fr; } } @media (max-width: 980px) { .sv-benefits-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-plan-grid, .sv-rate-hero-row, .sv-info-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-creator-grid { grid-template-columns: 1fr; } .sv-page-hero { padding: 36px 24px 32px; } .sv-page-hero-title { font-size: clamp(1.8rem, 6vw, 2.6rem); } .sv-page-hero-stats { flex-wrap: wrap; gap: 8px; } .sv-page-hero-stat-sep { display: none; } .sv-page-hero-stat { min-width: 80px; } .sv-section-block { padding: 20px; } .sv-topup-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-plan-meter-grid, .billing-plan-grid, .sv-meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-plan-highlight strong { font-size: 15px; line-height: 1.22; } .dashboard-plan-meter .studio-progress-value { font-size: 10px; text-align: left; } } @media (max-width: 720px) { .sv-benefits-strip, .sv-plan-grid, .sv-rate-hero-row, .sv-info-columns, .sv-kpi-strip, .sv-developer-grid, .sv-creator-grid, .sv-topup-presets, .dashboard-plan-meter-grid, .billing-plan-grid, .sv-meter-grid { grid-template-columns: 1fr; } .sv-page-hero { padding: 28px 18px 24px; border-radius: 20px; } .sv-page-hero-title { font-size: clamp(1.5rem, 8vw, 2rem); } .sv-page-hero-stats { padding: 12px 16px; } .sv-tab { padding: 8px 16px; font-size: 12px; } .sv-topup-custom { flex-direction: column; } .sv-section-block { padding: 18px; border-radius: 18px; } } /* end styles/pages/dashboard-pricing.css */ /* begin styles/core/ui.css */ /* ── LAYOUT ────────────────────────────────────────────────── */ .studio-main { max-width: 1440px; margin: 0 auto; padding: 20px; flex: 1; } .studio-section { margin-top: 14px; } .studio-grid { display: grid; gap: 14px; } .studio-grid.two { grid-template-columns: minmax(0,1.5fr) minmax(300px,0.85fr); } .studio-grid.two > * { min-width: 0; } .studio-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); } /* ── SURFACES ──────────────────────────────────────────────── */ .studio-surface { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); backdrop-filter: blur(20px); } .studio-card, .studio-panel { background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden; } .studio-sidebar-card { padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-panel-strong); box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden; } .studio-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-width: 0; } .studio-card-title > * { min-width: 0; } .studio-card-title h3, .studio-card-title h4 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .studio-card-title p { max-width: 72ch; margin: 3px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.45; } .studio-card-title .studio-inline-actions { flex-shrink: 0; justify-content: flex-end; } /* ── BUTTONS ───────────────────────────────────────────────── */ .studio-button, .studio-button-secondary, .studio-button-ghost, .studio-button-danger { appearance: none; border: none; border-radius: var(--r-pill); padding: 9px 16px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease, opacity 130ms ease; white-space: nowrap; text-decoration: none; } .studio-button { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); color: #fff; box-shadow: 0 4px 14px var(--c-accent-glow); } .studio-button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--c-accent-glow); } .studio-button:active { transform: translateY(0); } .studio-button-secondary { background: var(--c-accent-soft); color: var(--c-accent-hi); border: 1px solid rgba(37,99,235,0.22); } [data-theme="dark"] .studio-button-secondary { color: var(--c-accent); border-color: rgba(96,165,250,0.26); background: rgba(96,165,250,0.1); } .studio-button-secondary:hover { background: rgba(37,99,235,0.12); transform: translateY(-1px); } .studio-button-ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-line-strong); } .studio-button-ghost:hover { background: var(--c-panel); transform: translateY(-1px); } .studio-button-danger { background: var(--c-danger-soft); color: var(--c-danger); border: 1px solid rgba(220,38,38,0.18); } .studio-button-link-inline { appearance: none; border: none; background: transparent; padding: 0; margin: 0 0 0 4px; color: var(--c-accent-hi); font: inherit; font-weight: 600; cursor: pointer; } .studio-button-link-inline:hover { text-decoration: underline; } .studio-inline-actions, .studio-topbar-actions, .studio-chip-row, .studio-code-tab-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ── CHIPS ─────────────────────────────────────────────────── */ .studio-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 4px 9px; background: var(--c-panel); border: 1px solid var(--c-line); color: var(--c-muted); font-size: 11px; font-weight: 500; white-space: nowrap; } .studio-chip.accent { color: var(--c-accent-hi); background: var(--c-accent-soft); border-color: rgba(37,99,235,0.2); } .studio-chip.purple { color: var(--c-purple); background: var(--c-purple-soft); border-color: rgba(124,58,237,0.18); } .studio-chip.good { color: var(--c-good); background: var(--c-good-soft); border-color: rgba(5,150,105,0.2); } .studio-chip.bad { color: var(--c-danger); background: var(--c-danger-soft); border-color: rgba(220,38,38,0.2); } [data-theme="dark"] .studio-chip.accent { color: var(--c-accent); } [data-theme="dark"] .studio-chip.good { color: var(--c-good); } [data-theme="dark"] .studio-chip.bad { color: var(--c-danger); } .studio-sync-state-chip { max-width: 100%; min-width: 0; } .studio-sync-progress-note { min-width: 0; color: var(--c-accent-hi); font-size: 10px; font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="dark"] .studio-sync-progress-note { color: var(--c-accent); } /* ── FORMS ─────────────────────────────────────────────────── */ .studio-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .studio-form-field { display: grid; gap: 7px; } .studio-form-field label { font-size: 11.5px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; } .conversation-memory-style-field { margin-top: 2px; padding: 12px; border-radius: var(--r-sm); background: var(--c-panel-strong); border: 1px solid var(--c-line); gap: 8px; } .conversation-memory-style-help { font-size: 12.5px; line-height: 1.55; color: var(--c-muted); } .studio-input, .studio-select, .studio-textarea { width: 100%; border-radius: var(--r-md); border: 1.5px solid var(--c-line-strong); background: var(--c-panel-strong); color: var(--c-text); padding: 10px 13px; font-size: 13.5px; transition: border-color 140ms ease, box-shadow 140ms ease; } .studio-input:focus, .studio-select:focus, .studio-textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } .studio-textarea { min-height: 88px; resize: vertical; line-height: 1.6; } .studio-banner { padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid var(--c-line); background: var(--c-panel); font-size: 13px; line-height: 1.5; } .studio-banner.compact { padding: 10px 12px; min-height: 42px; display: flex; align-items: center; } .studio-banner.error { background: var(--c-danger-soft); border-color: rgba(220,38,38,0.25); color: var(--c-danger); } .studio-banner.success { background: var(--c-good-soft); border-color: rgba(5,150,105,0.2); color: var(--c-good); } .studio-progress-card { padding: 12px 13px; border-radius: 14px; border: 1px solid rgba(37,99,235,0.18); background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(37,99,235,0.03)), var(--c-panel-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); } [data-theme="dark"] .studio-progress-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .studio-progress-card.compact { padding: 11px 12px; } .studio-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .studio-progress-title { min-width: 0; color: var(--c-text); font-weight: 600; } .studio-progress-value { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-hi); } [data-theme="dark"] .studio-progress-value { color: var(--c-accent); } .studio-progress-detail { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-muted); } .studio-progress-bar { position: relative; margin-top: 10px; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(148,163,184,0.2); } .studio-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-accent), rgba(59,130,246,0.65)); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; } .studio-progress-card.is-indeterminate .studio-progress-bar > span { width: 42%; animation: studioIndeterminate 1.25s ease-in-out infinite; } .studio-progress-meta { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--c-muted); } .studio-progress-file { max-width: min(100%, 420px); padding: 3px 7px; border-radius: 999px; border: 1px solid var(--c-line); background: rgba(15,23,42,0.04); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="dark"] .studio-progress-file { background: rgba(255,255,255,0.04); } @keyframes studioIndeterminate { 0% { transform: translateX(-105%); } 60% { transform: translateX(120%); } 100% { transform: translateX(120%); } } .studio-divider { height: 1px; background: var(--c-line); margin: 16px 0; } .studio-stack, .studio-list { display: grid; gap: 8px; } .studio-empty { padding: 20px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--c-line-strong) 72%, transparent); text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 92%, transparent), color-mix(in srgb, var(--c-panel) 96%, transparent)); color: var(--c-muted); font-size: 13px; line-height: 1.55; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); } .studio-empty p { margin: 0; } [data-theme="dark"] .studio-empty { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } /* ── MODAL ─────────────────────────────────────────────────── */ .studio-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,0.5); backdrop-filter: blur(12px); z-index: 90; } [data-theme="dark"] .studio-modal { background: rgba(0,0,2,0.80); } .studio-modal.open { display: flex; } .studio-modal-card { width: min(520px, calc(100vw - 28px)); background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-xl); padding: 28px; } /* ── AVATAR SYSTEM ─────────────────────────────────────────── */ .studio-avatar { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; background: var(--studio-avatar-bg, var(--av0-bg)); box-shadow: inset 0 0 0 1.5px var(--studio-avatar-ring, var(--av0-ring)), var(--studio-avatar-shadow, var(--av0-glow)); overflow: hidden; } .studio-avatar.large { width: 68px; height: 68px; font-size: 30px; border-radius: 22px; } .studio-avatar.small { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; } .studio-avatar.tiny { width: 20px; height: 20px; font-size: 11px; border-radius: 7px; } .studio-avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; } .studio-avatar-glyph { display: block; line-height: 1; } /* ── LOADING ───────────────────────────────────────────────── */ .studio-loading { display: inline-flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: 13.5px; } .studio-loading::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); animation: studioPulse 1s ease-in-out infinite; } @keyframes studioPulse { 0%,100% { opacity:.4; transform:scale(.88); } 50% { opacity:1; transform:scale(1.1); } } /* ── STAT ELEMENTS ─────────────────────────────────────────── */ .studio-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } .studio-stat { padding: 14px; border-radius: var(--r-md); background: var(--c-panel-strong); border: 1px solid var(--c-line); } .studio-stat-label { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing:.07em; } .studio-stat-value { margin-top: 5px; font-size: 22px; font-weight: 560; letter-spacing: -.03em; } .studio-kicker { font-size: 10.5px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em; } .studio-title { margin: 4px 0 0; font-family: var(--font-display); font-size: 28px; letter-spacing: -.04em; } .studio-subtitle { margin: 5px 0 0; color: var(--c-muted); font-size: 13.5px; } /* ── CODE BLOCKS ───────────────────────────────────────────── */ .studio-code-tab { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-muted); font-size: 11.5px; font-weight: 500; transition: background 120ms ease, color 120ms ease; } .studio-code-tab.active { background: var(--c-accent-soft); color: var(--c-accent-hi); border-color: rgba(37,99,235,0.28); } [data-theme="dark"] .studio-code-tab.active { color: var(--c-accent); border-color: rgba(96,165,250,0.28); } .studio-code-block { position: relative; border-radius: var(--r-md); background: #0d1117; color: #c9d1d9; padding: 14px 14px 42px; font-family: var(--font-mono); font-size: 11px; line-height: 1.7; overflow: auto; white-space: pre-wrap; } [data-theme="dark"] .studio-code-block { background: #0a0a0c; } .studio-code-block pre { margin: 0; white-space: inherit; overflow-wrap: normal; word-break: normal; } .studio-code-block code { display: block; max-width: 100%; padding-right: 88px; } .studio-code-block button { position: absolute; right: 10px; bottom: 10px; } .studio-code-reveal { position: relative; } .studio-code-reveal .studio-code-block { padding: 14px; } .studio-code-reveal .studio-code-block code { padding-right: 0; } .studio-code-reveal-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .studio-code-reveal-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; } .studio-code-reveal-control { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-panel); color: var(--c-muted); cursor: pointer; font-size: 11px; font-weight: 650; line-height: 1; transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .studio-code-reveal-control:hover { color: var(--c-accent-hi); border-color: rgba(37,99,235,0.28); box-shadow: 0 8px 20px rgba(37,99,235,0.1); } .studio-code-reveal-toggle:focus-visible ~ .studio-code-reveal-actions .studio-code-reveal-control { outline: 2px solid var(--c-accent); outline-offset: 2px; } .studio-code-reveal-hide { display: none; } .studio-code-reveal-toggle:checked ~ .studio-code-reveal-actions .studio-code-reveal-show { display: none; } .studio-code-reveal-toggle:checked ~ .studio-code-reveal-actions .studio-code-reveal-hide { display: inline; } .studio-code-block--bounded { max-height: min(38vh, 320px); } .studio-code-reveal-toggle:checked ~ .studio-code-block--bounded { max-height: none; } .studio-code-copy-button { appearance: none; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-panel); color: var(--c-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; line-height: 1; transition: transform 140ms ease, color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .studio-code-copy-button:hover { transform: translateY(-1px); color: var(--c-accent-hi); border-color: rgba(37,99,235,0.28); box-shadow: 0 8px 20px rgba(37,99,235,0.12); } .studio-code-copy-button.copied { color: var(--c-good); border-color: rgba(22,163,74,0.28); background: rgba(22,163,74,0.08); box-shadow: 0 8px 20px rgba(22,163,74,0.14); } .studio-code-copy-button svg { width: 15px; height: 15px; } @media (max-width: 720px) { .studio-code-block--bounded { max-height: 280px; } } /* ── TOPBAR BRAND COPY (for compat) ────────────────────────── */ .studio-brand-copy h1, .studio-brand-copy h2, .studio-brand-copy h3 { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: -.04em; line-height:1; } .studio-brand-copy p { display: none; } /* end styles/core/ui.css */ /* begin styles/pages/home.css */ /* ============================================================ HOME — Legacy card classes kept for safety ============================================================ */ .home-main { max-width: 1360px; } .home-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,0.9fr); gap:18px; padding:20px; } .home-hero-copy .studio-title { max-width:18ch; } .home-hero-copy .studio-subtitle { max-width:64ch; line-height:1.65; } .home-hero-actions { margin-top:16px; } .home-hero-rail { display:grid; gap:12px; } .home-stat-strip { padding:0; border-top:none; background:var(--c-panel); border:1px solid var(--c-line); border-radius:16px; } .home-stat-strip .usage-stat-cell { padding:13px 16px; } .home-context-card { padding:15px 16px; border-radius:16px; border:1px solid var(--c-line); background:linear-gradient(145deg,rgba(37,99,235,.08),rgba(124,58,237,.08)); display:grid; gap:8px; } .home-context-card strong { font-size:16px; letter-spacing:-.02em; color:var(--c-text); } .home-context-card p { margin:0; color:var(--c-muted); font-size:12.5px; line-height:1.55; } .home-section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap; } .home-surface-grid, .home-self-hosted-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; } .home-surface-card, .home-self-hosted-card { width:100%; display:grid; gap:6px; padding:15px; border-radius:16px; border:1px solid var(--c-line); background:var(--c-panel-strong); text-align:left; color:var(--c-text); text-decoration:none; transition:transform 120ms ease,border-color 120ms ease,box-shadow 120ms ease,background 120ms ease; } .home-surface-card:hover, .home-self-hosted-card:hover { transform:translateY(-2px); border-color:var(--c-line-strong); box-shadow:var(--shadow-sm); background:var(--c-panel); } .home-surface-card span, .home-self-hosted-card span { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); } .home-surface-card strong, .home-self-hosted-card strong { font-size:13px; line-height:1.5; font-weight:600; color:var(--c-text); } /* end styles/pages/home.css */ /* begin styles/pages/landing.css */ /* ============================================================ LANDING PAGE — lp-* ============================================================ */ @keyframes lp-fade-up { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } @keyframes lp-orb-drift { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(32px,-22px) scale(1.07); } 66% { transform:translate(-18px,16px) scale(.96); } } @keyframes lp-pulse-dot { 0%,100% { opacity:.65; transform:scale(1); } 50% { opacity:1; transform:scale(1.4); } } @keyframes lp-step-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } @keyframes lp-path-flow { to { stroke-dashoffset: -160; } } @keyframes lp-stage-float { 0%,100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } } @keyframes lp-stage-signal { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--lp-stage-travel, 320px), 0, 0) scale(1.05); } } :root { --lp-scroll-ratio: 0; --lp-line-hue: 208; --lp-grid-shift-x: 0px; --lp-grid-shift-y: 0px; --lp-grid-shift-x-alt: 0px; --lp-grid-shift-y-alt: 0px; } /* Shell wrapper — direct flex child of .studio-shell */ .lp-shell { position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 1; width: 100%; overflow-x: hidden; min-width: 0; background: linear-gradient(180deg, rgba(37,99,235,0.02) 0%, transparent 18%, transparent 72%, rgba(6,182,212,0.018) 100%); } .lp-shell::before, .lp-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .lp-shell::before { background: radial-gradient(520px 320px at 12% 8%, hsla(var(--lp-line-hue), 88%, 66%, 0.08), transparent 72%), radial-gradient(460px 280px at 88% 16%, hsla(calc(var(--lp-line-hue) + 32), 86%, 70%, 0.07), transparent 74%), linear-gradient(132deg, transparent 0%, transparent 39%, hsla(var(--lp-line-hue), 86%, 68%, 0.03) 48%, transparent 58%), linear-gradient(-142deg, transparent 0%, transparent 58%, hsla(calc(var(--lp-line-hue) + 28), 84%, 72%, 0.028) 68%, transparent 76%), repeating-linear-gradient( 90deg, transparent 0, transparent 144px, hsla(var(--lp-line-hue), 84%, 68%, 0.02) 144px, hsla(var(--lp-line-hue), 84%, 68%, 0.02) 145px, transparent 145px, transparent 288px ); opacity: 0.68; } .lp-shell::after { background: radial-gradient(640px 220px at 50% 28%, hsla(calc(var(--lp-line-hue) + 18), 84%, 70%, 0.05), transparent 72%), linear-gradient( 118deg, transparent 0%, transparent 30%, hsla(calc(var(--lp-line-hue) + 18), 90%, 72%, 0.03) 44%, transparent 58% ), repeating-linear-gradient( -52deg, transparent 0px, transparent 240px, hsla(calc(var(--lp-line-hue) + 22), 86%, 70%, 0.014) 240px, hsla(calc(var(--lp-line-hue) + 22), 86%, 70%, 0.014) 241px, transparent 241px, transparent 480px ); background-repeat: no-repeat; opacity: 0.52; } .lp-shell > * { position: relative; z-index: 1; } /* ── HERO ──────────────────────────────────────────────────── */ .lp-hero { position: relative; overflow: hidden; padding: 80px 40px 72px; text-align: center; border-bottom: 1px solid var(--c-line); background: radial-gradient(560px 320px at 10% -2%, hsla(var(--lp-line-hue), 90%, 62%, 0.12), transparent 68%), radial-gradient(420px 280px at 90% 0%, hsla(calc(var(--lp-line-hue) + 34), 86%, 66%, 0.09), transparent 70%), linear-gradient(136deg, transparent 0%, transparent 41%, hsla(var(--lp-line-hue), 88%, 70%, 0.035) 50%, transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.08)), var(--c-bg); } [data-theme="dark"] .lp-hero { background: linear-gradient(180deg, rgba(8,13,28,0.98) 0%, rgba(10,20,40,0.96) 48%, rgba(11,18,32,0.99) 100%); } .lp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 112deg, transparent 8%, transparent 36%, hsla(calc(var(--lp-line-hue) + 18), 90%, 72%, 0.04) 47%, transparent 59% ); opacity: 0.68; } .lp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 90deg, transparent 0%, transparent 22%, hsla(calc(var(--lp-line-hue) + 6), 92%, 72%, 0.03) 34%, transparent 46%, transparent 100% ); opacity: 0.6; } [data-theme="dark"] .lp-orb-1 { background: radial-gradient(circle, rgba(96,165,250,.28), transparent 68%); } [data-theme="dark"] .lp-orb-2 { background: radial-gradient(circle, rgba(192,132,252,.22), transparent 68%); } [data-theme="dark"] .lp-orb-3 { background: radial-gradient(circle, rgba(34,211,238,.18), transparent 68%); } /* Animated ambient orbs */ .lp-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(44px); animation: none; } .lp-orb-1 { width:500px; height:500px; top:-160px; left:-100px; background: radial-gradient(circle, rgba(37,99,235,.24), transparent 68%); animation-duration: 18s; } .lp-orb-2 { width:420px; height:420px; top:30px; right:-80px; background: radial-gradient(circle, rgba(124,58,237,.18), transparent 68%); animation: lp-orb-drift 20s ease-in-out infinite; } .lp-orb-3 { width:340px; height:340px; bottom:-120px; left:38%; background: radial-gradient(circle, rgba(6,182,212,.14), transparent 68%); } /* Subtle grid overlay */ .lp-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(hsla(var(--lp-line-hue), 88%, 64%, 0.06) 1px, transparent 1px), linear-gradient(90deg, hsla(calc(var(--lp-line-hue) + 34), 90%, 68%, 0.05) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,0.08), transparent 50%); background-size: 64px 64px, 64px 64px, 100% 100%; background-position: 0 0, 0 0, center; opacity: .48; pointer-events: none; } [data-theme="light"] .lp-grid-lines { opacity: .56; } [data-theme="dark"] .lp-grid-lines { opacity: .24; } [data-theme="dark"] .lp-shell::before { opacity: 0.72; } [data-theme="dark"] .lp-shell::after { opacity: 0.46; } /* Hero inner */ .lp-hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; animation: lp-fade-up .6s cubic-bezier(.22,.68,0,1.1) both; } .lp-hero-copy { max-width: 780px; margin: 0 auto; } /* Badge */ .lp-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px 5px 10px; border-radius: 999px; background: var(--c-accent-soft); border: 1px solid var(--c-accent-glow); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 28px; } .lp-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); animation: lp-pulse-dot 2.2s ease-in-out infinite; flex-shrink: 0; } /* Headline */ .lp-headline { font-family: var(--font-display); font-size: clamp(40px, 6.5vw, 72px); font-weight: 700; letter-spacing: -.045em; line-height: .98; color: var(--c-text); margin: 0 0 22px; } [data-theme="dark"] .lp-headline { background: linear-gradient(135deg, #f0e2c8 20%, var(--c-accent-hi) 70%, var(--c-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Subline */ .lp-subline { font-size: clamp(15px, 2vw, 18px); color: var(--c-muted); line-height: 1.7; max-width: 56ch; margin: 0 auto 36px; } /* Hero CTAs */ .lp-hero-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; } .lp-cta-primary { font-size: 14.5px !important; padding: 11px 28px !important; border-radius: 10px !important; box-shadow: 0 4px 20px var(--c-accent-glow) !important; } .lp-cta-primary:hover { box-shadow: 0 6px 28px var(--c-accent-glow) !important; transform: translateY(-1px); } .lp-cta-secondary { font-size:14.5px !important; padding:11px 22px !important; border-radius:10px !important; } .lp-cta-ghost { font-size:14px !important; } /* Stat row */ .lp-stat-row { display: inline-flex; align-items: center; background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: 999px; padding: 0 6px; box-shadow: var(--shadow-sm); } .lp-stat-pill { display: flex; flex-direction: column; align-items: center; padding: 10px 22px; gap: 2px; } .lp-stat-n { font-size: 18px; font-weight: 560; letter-spacing: -.04em; color: var(--c-text); line-height: 1; } .lp-stat-l { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--c-muted); white-space: nowrap; } .lp-stat-sep { width:1px; height:32px; background:var(--c-line); flex-shrink:0; } /* Hero stage */ .lp-hero-stage { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.16fr) minmax(0, 0.9fr); align-items: center; gap: 22px; width: min(100%, 1080px); margin: 52px auto 0; padding: 28px; border-radius: 30px; border: 1px solid var(--c-line); background: repeating-linear-gradient( 90deg, transparent 0px, transparent 96px, hsla(var(--lp-line-hue), 82%, 70%, 0.025) 96px, hsla(var(--lp-line-hue), 82%, 70%, 0.025) 97px, transparent 97px, transparent 192px ), linear-gradient(120deg, transparent 0%, transparent 24%, hsla(calc(var(--lp-line-hue) + 26), 82%, 72%, 0.055) 50%, transparent 72%), linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)), radial-gradient(420px 240px at 50% 44%, hsla(var(--lp-line-hue), 80%, 68%, 0.10), transparent 74%), var(--c-panel); box-shadow: 0 28px 80px rgba(7, 13, 26, 0.12); overflow: hidden; isolation: isolate; } [data-theme="dark"] .lp-hero-stage { background: repeating-linear-gradient( 90deg, transparent 0px, transparent 96px, hsla(var(--lp-line-hue), 82%, 70%, 0.04) 96px, hsla(var(--lp-line-hue), 82%, 70%, 0.04) 97px, transparent 97px, transparent 192px ), linear-gradient(120deg, transparent 0%, transparent 20%, hsla(calc(var(--lp-line-hue) + 26), 84%, 72%, 0.08) 48%, transparent 72%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), radial-gradient(420px 240px at 50% 44%, hsla(var(--lp-line-hue), 80%, 68%, 0.14), transparent 74%), linear-gradient(180deg, rgba(10,18,34,0.95), rgba(9,16,30,0.90)); box-shadow: 0 34px 96px rgba(2, 8, 22, 0.42); } .lp-hero-stage::before { content: ""; position: absolute; inset: 14px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.08); opacity: 0.85; pointer-events: none; } .lp-hero-stage::after { content: ""; position: absolute; inset: 16% 18% 46%; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, hsla(var(--lp-line-hue), 84%, 68%, 0.12) 50%, transparent 100%); pointer-events: none; } .lp-hero-stage-glow { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.28; } .lp-hero-stage-glow-a { width: 260px; height: 260px; left: 26%; top: 8%; background: radial-gradient(circle, rgba(37,99,235,0.18), transparent 68%); } .lp-hero-stage-glow-b { width: 220px; height: 220px; right: 12%; bottom: -10%; background: radial-gradient(circle, rgba(124,58,237,0.14), transparent 68%); } .lp-hero-stage-line { position: absolute; left: 14%; right: 14%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, hsla(var(--lp-line-hue), 84%, 68%, 0.28) 22%, hsla(calc(var(--lp-line-hue) + 34), 82%, 70%, 0.24) 78%, transparent 100%); pointer-events: none; } .lp-hero-stage-line-a { top: 40%; } .lp-hero-stage-line-b { top: 67%; opacity: 0.88; } .lp-hero-stage-signal { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: hsla(var(--lp-line-hue), 88%, 72%, 0.92); box-shadow: 0 0 0 5px hsla(var(--lp-line-hue), 88%, 72%, 0.08), 0 0 12px hsla(var(--lp-line-hue), 88%, 72%, 0.22); animation: lp-stage-signal 9.5s linear infinite; pointer-events: none; } .lp-hero-stage-signal-a { left: 18%; top: calc(40% - 4px); --lp-stage-travel: 660px; } .lp-hero-stage-signal-b { left: 34%; top: calc(67% - 4px); background: hsla(calc(var(--lp-line-hue) + 34), 86%, 72%, 0.90); box-shadow: 0 0 0 5px hsla(calc(var(--lp-line-hue) + 34), 86%, 72%, 0.08), 0 0 12px hsla(calc(var(--lp-line-hue) + 34), 86%, 72%, 0.2); --lp-stage-travel: 430px; animation: lp-stage-signal 13s linear infinite; animation-delay: -3.1s; display: block; opacity: 0.82; } .lp-hero-source-stack, .lp-hero-core-card, .lp-hero-output-stack { position: relative; z-index: 1; } .lp-hero-source-stack { display: grid; gap: 12px; } .lp-hero-source-card, .lp-hero-output-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--c-line); background: linear-gradient(128deg, rgba(255,255,255,0.18), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12)); box-shadow: var(--shadow-sm); } [data-theme="dark"] .lp-hero-source-card, [data-theme="dark"] .lp-hero-output-card { background: linear-gradient(128deg, rgba(255,255,255,0.035), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); } .lp-hero-source-card { animation: none; } .lp-hero-source-card strong, .lp-hero-output-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); } .lp-hero-source-card span, .lp-hero-output-card p { font-size: 13px; line-height: 1.55; color: var(--c-text); } .lp-hero-core-card { min-height: 252px; padding: 24px 24px 22px; border-radius: 28px; border: 1px solid rgba(122, 167, 255, 0.18); background: repeating-linear-gradient( 90deg, transparent 0px, transparent 58px, hsla(var(--lp-line-hue), 82%, 70%, 0.035) 58px, hsla(var(--lp-line-hue), 82%, 70%, 0.035) 59px ), linear-gradient(142deg, transparent 0%, transparent 34%, hsla(calc(var(--lp-line-hue) + 32), 84%, 72%, 0.08) 54%, transparent 74%), linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16)), radial-gradient(280px 180px at 50% 12%, hsla(var(--lp-line-hue), 86%, 72%, 0.18), transparent 72%); box-shadow: 0 18px 42px rgba(7, 13, 26, 0.14), inset 0 1px 0 rgba(255,255,255,0.06); overflow: hidden; } [data-theme="dark"] .lp-hero-core-card { background: repeating-linear-gradient( 90deg, transparent 0px, transparent 58px, hsla(var(--lp-line-hue), 82%, 70%, 0.05) 58px, hsla(var(--lp-line-hue), 82%, 70%, 0.05) 59px ), linear-gradient(142deg, transparent 0%, transparent 34%, hsla(calc(var(--lp-line-hue) + 32), 84%, 72%, 0.10) 54%, transparent 74%), linear-gradient(180deg, rgba(14,24,46,0.92), rgba(10,18,36,0.90)), radial-gradient(280px 180px at 50% 12%, hsla(var(--lp-line-hue), 86%, 72%, 0.22), transparent 72%); } .lp-hero-core-ring { position: absolute; border-radius: 50%; border: 1px solid hsla(var(--lp-line-hue), 84%, 72%, 0.16); pointer-events: none; } .lp-hero-core-ring-a { width: 240px; height: 240px; top: -78px; left: 50%; transform: translateX(-50%); } .lp-hero-core-ring-b { width: 178px; height: 178px; top: -48px; left: 50%; transform: translateX(-50%); border-color: hsla(calc(var(--lp-line-hue) + 34), 84%, 72%, 0.14); } .lp-hero-core-chip { display: inline-flex; align-items: center; align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: var(--c-accent-soft); border: 1px solid var(--c-accent-glow); color: var(--c-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .lp-hero-core-card h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1.04; letter-spacing: -0.04em; margin: 0 0 12px; color: var(--c-text); } .lp-hero-core-card p { position: relative; z-index: 1; margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.7; max-width: 34ch; } .lp-hero-core-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .lp-hero-core-tags span, .lp-hero-destination-list span { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--c-line); background: rgba(255,255,255,0.52); color: var(--c-text); font-size: 12px; line-height: 1; } [data-theme="dark"] .lp-hero-core-tags span, [data-theme="dark"] .lp-hero-destination-list span { background: rgba(255,255,255,0.04); } .lp-hero-output-stack { display: grid; gap: 14px; } .lp-hero-output-card { animation: lp-stage-float 12s ease-in-out infinite; animation-delay: -2.4s; } .lp-hero-destination-list { display: flex; flex-wrap: wrap; gap: 10px; } /* ── SECTIONS ──────────────────────────────────────────────── */ .lp-section { padding: 72px 40px; width: 100%; box-sizing: border-box; max-width: 1200px; margin: 0 auto; background: radial-gradient(520px 220px at 10% 0%, hsla(var(--lp-line-hue), 84%, 68%, 0.042), transparent 72%), radial-gradient(460px 240px at 92% 100%, hsla(calc(var(--lp-line-hue) + 34), 84%, 72%, 0.03), transparent 74%); } .lp-section--alt { max-width: 100%; padding: 0; background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06)), var(--c-panel); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin: 0; } [data-theme="dark"] .lp-section--alt { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--c-panel); } .lp-section--alt .lp-section-inner { max-width: 1200px; margin: 0 auto; padding: 72px 40px; } .lp-section--resume { max-width: 1200px; margin: 0 auto; } .lp-section--selfhosted { max-width: 100%; padding: 0; margin: 0; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(124,58,237,.06) 60%, rgba(6,182,212,.05) 100%); border-top: 1px solid var(--c-line); } [data-theme="dark"] .lp-section--selfhosted { background: linear-gradient(135deg, rgba(96,165,250,.12) 0%, rgba(192,132,252,.1) 60%, rgba(34,211,238,.08) 100%); } .lp-section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 10px; } .lp-section-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; color: var(--c-text); margin: 0 0 36px; } .lp-section-intro { max-width: 58ch; margin: -14px 0 28px; font-size: 14.5px; line-height: 1.74; color: var(--c-muted); } /* Shared app logo pills */ .lp-app-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .lp-app-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)), var(--c-panel-strong); box-shadow: var(--shadow-sm); } [data-theme="dark"] .lp-app-pill { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--c-panel-strong); } .lp-app-pill--compact { gap: 6px; padding: 6px 10px; } .lp-app-pill-mark { width: 22px; height: 22px; border-radius: 9px; display: inline-grid; place-items: center; flex-shrink: 0; background: rgba(255,255,255,0.92); border: 1px solid rgba(148,163,184,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } [data-theme="dark"] .lp-app-pill-mark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); } .lp-app-pill--compact .lp-app-pill-mark { width: 20px; height: 20px; border-radius: 8px; } .lp-app-pill-logo { width: 12px; height: 12px; object-fit: contain; } .lp-app-pill-label { font-size: 12px; font-weight: 600; line-height: 1; color: var(--c-text); white-space: nowrap; } .lp-app-pill--compact .lp-app-pill-label { font-size: 11.5px; } /* ── FEATURE CARDS ─────────────────────────────────────────── */ .lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .lp-feature-card { position: relative; padding: 28px 26px; border-radius: 22px; border: 1px solid var(--c-line); background: var(--c-panel-strong); overflow: hidden; transition: transform 180ms cubic-bezier(.22,.68,0,1.1), box-shadow 180ms ease, border-color 180ms ease; cursor: default; } .lp-feature-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 240ms ease; pointer-events: none; } .lp-feature-card:hover { transform: translateY(-5px); } .lp-feature-card:hover::after { opacity: 1; } .lp-feature-card--teal { border-color: rgba(37,99,235,.25); } .lp-feature-card--indigo { border-color: rgba(6,182,212,.25); } .lp-feature-card--purple { border-color: rgba(124,58,237,.25); } .lp-feature-card--amber { border-color: rgba(219,39,119,.25); } .lp-feature-card--teal::after { background: linear-gradient(140deg, rgba(37,99,235,.09), transparent 65%); } .lp-feature-card--indigo::after { background: linear-gradient(140deg, rgba(6,182,212,.09), transparent 65%); } .lp-feature-card--purple::after { background: linear-gradient(140deg, rgba(124,58,237,.09), transparent 65%); } .lp-feature-card--amber::after { background: linear-gradient(140deg, rgba(219,39,119,.09), transparent 65%); } .lp-feature-card--teal:hover { border-color:rgba(37,99,235,.55); box-shadow:var(--shadow-md), 0 0 0 1px rgba(37,99,235,.14), 0 0 40px rgba(37,99,235,.08); } .lp-feature-card--indigo:hover { border-color:rgba(6,182,212,.55); box-shadow:var(--shadow-md), 0 0 0 1px rgba(6,182,212,.14), 0 0 40px rgba(6,182,212,.08); } .lp-feature-card--purple:hover { border-color:rgba(124,58,237,.55); box-shadow:var(--shadow-md), 0 0 0 1px rgba(124,58,237,.14), 0 0 40px rgba(124,58,237,.08); } .lp-feature-card--amber:hover { border-color:rgba(219,39,119,.55); box-shadow:var(--shadow-md), 0 0 0 1px rgba(219,39,119,.14), 0 0 40px rgba(219,39,119,.08); } /* Color-accented top bar on each card */ .lp-feature-card--teal::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, rgba(37,99,235,.7), rgba(37,99,235,.2)); border-radius:22px 22px 0 0; } .lp-feature-card--indigo::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, rgba(6,182,212,.7), rgba(6,182,212,.2)); border-radius:22px 22px 0 0; } .lp-feature-card--purple::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, rgba(124,58,237,.7), rgba(124,58,237,.2)); border-radius:22px 22px 0 0; } .lp-feature-card--amber::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, rgba(219,39,119,.7), rgba(219,39,119,.2)); border-radius:22px 22px 0 0; } .lp-feature-icon { font-size: 34px; margin-bottom: 16px; display: block; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)); } .lp-feature-title { font-size: 17px; font-weight: 700; letter-spacing: -.025em; color: var(--c-text); margin: 0 0 9px; } .lp-feature-desc { font-size: 13.5px; line-height: 1.65; color: var(--c-muted); margin: 0; } /* ── STEPS ─────────────────────────────────────────────────── */ .lp-steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: 0; } .lp-step { flex: 1; display: flex; align-items: flex-start; gap: 0; animation: lp-step-enter .5s ease both; } .lp-step:nth-child(2) { animation-delay:.08s; } .lp-step:nth-child(3) { animation-delay:.16s; } .lp-step-num { width: 52px; height: 52px; border-radius: 50%; background: var(--c-accent-soft); border: 2px solid var(--c-accent-glow); color: var(--c-accent); font-size: 13px; font-weight: 800; letter-spacing: -.02em; display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--c-bg), 0 0 24px var(--c-accent-soft); transition: box-shadow 200ms ease, background 200ms ease; } .lp-step:hover .lp-step-num { background: var(--c-accent-glow); box-shadow: 0 0 0 6px var(--c-bg), 0 0 32px var(--c-accent-glow); } [data-theme="dark"] .lp-step-num { box-shadow: 0 0 0 6px rgba(13,13,15,1), 0 0 24px var(--c-accent-soft); } .lp-step-connector { flex-shrink: 0; color: var(--c-accent); opacity: .45; margin-top: 14px; padding: 0 4px; } .lp-step-body { padding: 4px 20px 0; flex: 1; } .lp-step-title { font-size: 16px; font-weight: 700; letter-spacing: -.025em; color: var(--c-text); margin: 0 0 7px; } .lp-step-desc { font-size: 13.5px; line-height: 1.65; color: var(--c-muted); margin: 0; max-width: 28ch; } .lp-steps-cta { display: flex; align-items: center; gap: 10px; margin-top: 44px; } /* ── PROJECT RESUME ────────────────────────────────────────── */ .lp-project-resume { max-width: 720px; } .lp-project-resume--loading { max-width: 480px; } .lp-project-resume-inner { display: flex; align-items: center; gap: 20px; padding: 24px 26px; border-radius: 22px; border: 1px solid var(--c-line); background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.07) 70%); box-shadow: var(--shadow-sm); transition: box-shadow 180ms ease, border-color 180ms ease; } .lp-project-resume-inner:hover { box-shadow: var(--shadow-md); border-color: var(--c-accent-glow); } .lp-project-avatar { font-size: 30px; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--c-accent-soft); border: 1px solid var(--c-accent-glow); box-shadow: 0 0 20px var(--c-accent-soft); flex-shrink: 0; } .lp-project-info { flex:1; min-width:0; } .lp-project-name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-project-desc { font-size: 13px; color: var(--c-muted); line-height: 1.5; margin-top: 4px; } .lp-project-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } /* ── SELF-HOSTED GATEWAY ───────────────────────────────────── */ .lp-sh-shell { max-width: 1200px; margin: 0 auto; padding: 72px 40px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; } .lp-section--selfhosted { scroll-margin-top: 92px; } .lp-sh-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 48px; align-items: center; } .lp-sh-copy { position: relative; } .lp-sh-orb { position: absolute; width: 300px; height: 300px; top: -80px; left: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.14), transparent 70%); filter: blur(60px); pointer-events: none; } .lp-sh-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; color: var(--c-text); margin: 0 0 16px; } .lp-sh-desc { font-size: 14.5px; line-height: 1.75; color: var(--c-muted); margin: 0 0 28px; max-width: 44ch; } .lp-sh-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .lp-sh-pill { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: rgba(255,255,255,0.05); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .lp-sh-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lp-sh-starter { padding: 18px 18px 16px; border-radius: 20px; border: 1px solid var(--c-line-strong); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)), var(--c-panel-strong); box-shadow: var(--shadow-sm); } .lp-sh-starter-head strong { display: block; margin: 0; font-size: 15px; letter-spacing: -0.02em; color: var(--c-text); } .lp-sh-starter-head p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--c-muted); } .lp-sh-step-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .lp-sh-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--c-line); border-radius: 16px; background: rgba(255,255,255,0.03); min-height: 100%; } .lp-sh-step-num { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.24); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--c-accent); } .lp-sh-step-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lp-sh-step-title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); } .lp-sh-step-code-wrap { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .lp-sh-step-code { display: inline-flex; align-items: center; max-width: 100%; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: rgba(12,17,29,0.58); font-family: var(--studio-code); font-size: 11.5px; line-height: 1.45; color: #fff; white-space: normal; overflow-wrap: anywhere; } .lp-sh-step-code.is-label { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.18); color: var(--c-accent-hi); } [data-theme="dark"] .lp-sh-step-code.is-label { color: #f8fafc; } .lp-sh-step-copy { width: 28px; height: 28px; min-width: 28px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(12,17,29,0.72); color: #fff; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease; } .lp-sh-step-copy:hover { background: rgba(12,17,29,0.9); border-color: rgba(255,255,255,.2); } .lp-sh-step-copy:active { transform: translateY(1px); } .lp-sh-step-copy.copied { color: #86efac; border-color: rgba(134,239,172,.34); background: rgba(22,101,52,.82); } .lp-sh-step-copy svg { width: 14px; height: 14px; } .lp-sh-step-note { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); } .lp-sh-footnote { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); } .lp-sh-footnote a { color: var(--c-accent); text-decoration: none; } .lp-sh-footnote a:hover { text-decoration: underline; } .studio-site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px 6px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 12.5px; } .studio-shell-footer { width: min(1200px, calc(100% - 40px)); margin: 0 auto 28px; } .studio-site-footer-copy { line-height: 1.6; } .studio-site-footer-links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; } .studio-site-footer a { color: var(--c-muted); text-decoration: none; font-weight: 600; } .studio-site-footer a:hover { color: var(--c-text); } .studio-site-footer--expanded { display: block; padding: 30px 4px 6px; } .studio-site-footer-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; padding-bottom: 24px; } .studio-site-footer-brand { display: flex; flex-direction: column; gap: 14px; } .studio-site-footer-brand-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.04em; color: var(--c-text); } .studio-site-footer-brand-tagline { margin: 0; max-width: 28ch; font-size: 13px; line-height: 1.7; color: var(--c-muted); } .studio-site-footer-social { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .studio-site-footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 14px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12)), var(--c-panel-strong); text-decoration: none; color: var(--footer-social-color, var(--c-text)); box-shadow: 0 10px 24px rgba(15,23,42,0.05); transition: border-color 160ms ease, transform 160ms ease, color 160ms ease, box-shadow 160ms ease; } [data-theme="dark"] .studio-site-footer-social-link { color: var(--footer-social-color-dark, var(--footer-social-color, var(--c-text))); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)), rgba(15,23,42,0.5); border-color: rgba(148,163,184,0.2); box-shadow: none; } .studio-site-footer-social-link:hover { transform: translateY(-1px); border-color: var(--c-accent-glow); box-shadow: 0 14px 30px rgba(15,23,42,0.09); } .studio-site-footer-social-icon { width: 18px; height: 18px; display: inline-grid; place-items: center; } .studio-site-footer-social-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; } .studio-site-footer-prompt-panel { display: flex; flex-direction: column; gap: 14px; padding: 14px 12px; border-radius: 20px; border: 1px solid var(--c-line); background: linear-gradient(140deg, rgba(37,99,235,0.08), rgba(124,58,237,0.06) 58%, rgba(6,182,212,0.05) 100%), var(--c-panel-strong); box-shadow: var(--shadow-sm); } .studio-site-footer-prompt-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); } .studio-site-footer-prompt-copy { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--c-muted); } .studio-site-footer-model-grid { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: nowrap; padding: 2px 0 4px; } .studio-site-footer-model-link { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 14px; border: 1px solid rgba(148,163,184,0.2); background: rgba(255,255,255,0.68); color: var(--c-text); text-decoration: none; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } [data-theme="dark"] .studio-site-footer-model-link { background: rgba(15,23,42,0.42); } .studio-site-footer-model-link:hover { transform: translateY(-1px); border-color: var(--c-accent-glow); box-shadow: 0 12px 28px rgba(15,23,42,0.08); } .studio-site-footer-model-link.copied { border-color: rgba(34,197,94,0.42); box-shadow: 0 0 0 1px rgba(34,197,94,0.14); } .studio-site-footer-model-logo { width: 24px; height: 24px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.92); border: 1px solid rgba(148,163,184,0.18); color: #111827; overflow: hidden; } [data-theme="dark"] .studio-site-footer-model-logo { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #f8fafc; } .studio-site-footer-model-logo img, .studio-site-footer-model-logo svg { width: 14px; height: 14px; object-fit: contain; display: block; } .studio-site-footer-model-name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .studio-site-footer-prompt-status { min-height: 18px; font-size: 11.5px; line-height: 1.5; color: var(--c-muted); } .studio-site-footer-column { display: flex; flex-direction: column; gap: 20px; } .studio-site-footer-group { display: flex; flex-direction: column; gap: 10px; } .studio-site-footer-heading { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); } .studio-site-footer-menu { display: flex; flex-direction: column; gap: 8px; } .studio-site-footer-menu-link { font-size: 13px; line-height: 1.5; color: var(--c-muted); text-decoration: none; font-weight: 600; } .studio-site-footer-menu-link:hover { color: var(--c-text); } .studio-site-footer-menu-link.is-placeholder { color: color-mix(in srgb, var(--c-muted) 54%, var(--c-bg)); cursor: not-allowed; opacity: 0.5; pointer-events: none; } .studio-site-footer-menu-link.is-placeholder:hover { color: color-mix(in srgb, var(--c-muted) 54%, var(--c-bg)); } .studio-site-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--c-line); } .lp-sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .lp-sh-grid .home-self-hosted-card { background: var(--c-panel-strong); border-color: var(--c-line-strong); border-radius: 16px; } .lp-sh-grid .home-self-hosted-card:hover { background: var(--c-surface); border-color: var(--c-accent-glow); box-shadow: var(--shadow-md), 0 0 0 1px var(--c-accent-soft); } .lp-sh-grid .home-self-hosted-card span { color: var(--c-accent); } .lp-sh-grid .home-self-hosted-card strong { font-size: 13px; color: var(--c-text); } /* ── PROBLEM SECTION ──────────────────────────────────────── */ .lp-problem-section { position: relative; overflow: hidden; background: var(--c-panel); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .lp-problem-section::before { content: ""; position: absolute; width: 640px; height: 480px; top: -120px; right: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(239,68,68,.09), transparent 70%); filter: blur(80px); pointer-events: none; z-index: 0; } [data-theme="dark"] .lp-problem-section { background: linear-gradient(160deg, rgba(28,4,4,.98) 0%, rgba(18,4,4,.99) 100%); } .lp-problem-inner { max-width: 1200px; margin: 0 auto; padding: 80px 40px; position: relative; z-index: 1; } .lp-problem-title { color: var(--c-text) !important; } [data-theme="dark"] .lp-problem-title { background: linear-gradient(135deg, #fff 15%, rgba(248,113,113,.95) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .lp-problem-list { list-style: none; padding: 0; margin: 0 0 40px; display: flex; flex-direction: column; gap: 10px; max-width: 460px; } .lp-problem-item { display: flex; align-items: center; gap: 14px; font-size: clamp(14px, 1.8vw, 17px); font-weight: 600; letter-spacing: -.02em; color: var(--c-text); padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(239,68,68,.18); background: rgba(239,68,68,.04); transition: border-color 180ms ease, background 180ms ease; } .lp-problem-item:hover { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.07); } .lp-problem-x { width: 20px; height: 20px; border-radius: 50%; background: rgba(239,68,68,.10); border: 1.5px solid rgba(239,68,68,.38); flex-shrink: 0; position: relative; transition: background 180ms ease; } .lp-problem-item:hover .lp-problem-x { background: rgba(239,68,68,.18); } .lp-problem-x::before, .lp-problem-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; background: rgba(239,68,68,.85); border-radius: 2px; } .lp-problem-x::before { transform: translate(-50%,-50%) rotate(45deg); } .lp-problem-x::after { transform: translate(-50%,-50%) rotate(-45deg); } .lp-problem-punchline { font-size: clamp(15px, 2.2vw, 20px); font-weight: 600; letter-spacing: -.025em; line-height: 1.5; color: var(--c-muted); max-width: 52ch; margin: 0; padding-top: 28px; border-top: 1px solid rgba(239,68,68,.15); } /* ── SHIFT SECTION ────────────────────────────────────────── */ .lp-shift-section { position: relative; overflow: hidden; padding: 0; border-bottom: 1px solid var(--c-line); } .lp-shift-section::before { content: ""; position: absolute; width: 600px; height: 500px; top: -160px; left: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.10), transparent 70%); filter: blur(90px); pointer-events: none; } .lp-shift-inner { max-width: 1200px; margin: 0 auto; padding: 96px 40px; position: relative; z-index: 1; } .lp-shift-headline { font-family: var(--font-display); font-size: clamp(42px, 7vw, 84px); font-weight: 800; letter-spacing: -.05em; line-height: .96; color: var(--c-text); margin: 0 0 32px; } [data-theme="dark"] .lp-shift-headline { background: linear-gradient(135deg, #f8f8f8 20%, var(--c-accent-hi) 65%, var(--c-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-shift-copy { font-size: clamp(15px, 2vw, 18px); line-height: 1.8; color: var(--c-muted); max-width: 46ch; margin: 0; } /* ── SOLUTION SECTION ─────────────────────────────────────── */ .lp-solution-sub { font-size: clamp(15px, 2vw, 18px); color: var(--c-muted); line-height: 1.7; max-width: 52ch; margin: 0 0 32px; } .lp-solution-bullets { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 12px; max-width: 380px; } .lp-solution-bullet { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--c-text); } .lp-solution-bullet-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent-soft); border: 1.5px solid var(--c-accent-glow); flex-shrink: 0; display: grid; place-items: center; } .lp-solution-bullet-icon::after { content: ""; display: block; width: 5px; height: 9px; border: 1.5px solid var(--c-accent); border-top: 0; border-left: 0; transform: rotate(45deg) translateY(-1px); } .lp-outcome { font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -.04em; color: var(--c-text); margin: 0; padding-top: 28px; border-top: 1px solid var(--c-line); max-width: 480px; } [data-theme="dark"] .lp-outcome { background: linear-gradient(90deg, var(--c-accent-hi) 0%, var(--c-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── HOW IT WORKS ─────────────────────────────────────────── */ .lp-how-steps { display: flex; flex-direction: column; gap: 0; max-width: 560px; margin-bottom: 44px; } .lp-how-step { display: grid; grid-template-columns: 56px 1fr; gap: 0; } .lp-how-step-left { display: flex; flex-direction: column; align-items: center; } .lp-how-step-num { width: 48px; height: 48px; border-radius: 12px; background: var(--c-accent-soft); border: 1.5px solid var(--c-accent-glow); color: var(--c-accent); font-size: 12px; font-weight: 800; letter-spacing: .04em; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 24px var(--c-accent-soft); transition: box-shadow 200ms ease, background 200ms ease; } .lp-how-step:hover .lp-how-step-num { background: var(--c-accent-glow); box-shadow: 0 0 32px var(--c-accent-glow); } .lp-how-step-connector { width: 2px; flex: 1; min-height: 28px; background: linear-gradient(to bottom, var(--c-accent-glow), transparent); margin: 4px 0; border-radius: 2px; } .lp-how-step-body { padding: 6px 0 36px 24px; } .lp-how-step:last-child .lp-how-step-body { padding-bottom: 0; } /* ── USE CASES ───────────────────────────────────────────── */ .lp-use-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .lp-use-case-card { padding: 28px 24px; } .lp-use-case-icon { font-size: 30px; display: block; margin-bottom: 14px; line-height: 1; } .lp-use-case-title { font-size: 18px; font-weight: 700; letter-spacing: -.025em; color: var(--c-text); margin: 0 0 8px; } .lp-use-case-desc { font-size: 14px; color: var(--c-muted); margin: 0; line-height: 1.6; } .lp-use-case-arrow { color: var(--c-accent); margin-right: 4px; } /* ── WHY NOW ─────────────────────────────────────────────── */ .lp-why-section { position: relative; overflow: hidden; padding: 0; background: var(--c-panel); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .lp-why-section::before { content: ""; position: absolute; width: 600px; height: 500px; bottom: -160px; right: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.10), transparent 70%); filter: blur(90px); pointer-events: none; } [data-theme="dark"] .lp-why-section { background: linear-gradient(160deg, rgba(5,8,22,.99) 0%, rgba(10,14,35,.98) 100%); } .lp-why-inner { max-width: 1200px; margin: 0 auto; padding: 96px 40px; position: relative; z-index: 1; } .lp-why-headline { font-family: var(--font-display); font-size: clamp(42px, 7vw, 84px); font-weight: 800; letter-spacing: -.05em; line-height: .96; color: var(--c-text); margin: 0 0 32px; } [data-theme="dark"] .lp-why-headline { background: linear-gradient(135deg, #f8f8f8 20%, var(--c-accent-hi) 65%, var(--c-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-why-copy { font-size: clamp(15px, 2vw, 18px); line-height: 1.8; color: var(--c-muted); max-width: 46ch; margin: 0; } /* ── DEVELOPERS (secondary) ──────────────────────────────── */ .lp-dev-secondary { border-top: 1px solid var(--c-line); } .lp-dev-inner { max-width: 640px; } .lp-dev-title { font-family: var(--font-display); font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -.04em; color: var(--c-text); margin: 0 0 10px; } .lp-dev-copy { font-size: 15px; line-height: 1.7; color: var(--c-muted); margin: 0 0 22px; } /* ── FINAL CTA ───────────────────────────────────────────── */ .lp-final-cta-section { position: relative; overflow: hidden; padding: 0; text-align: center; background: var(--c-bg); border-top: 1px solid var(--c-line); } [data-theme="dark"] .lp-final-cta-section { background: linear-gradient(180deg, rgba(8,13,28,.99) 0%, rgba(10,20,40,.97) 48%, rgba(11,18,32,.99) 100% ); } .lp-final-cta-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 100px 40px 108px; animation: lp-fade-up .6s cubic-bezier(.22,.68,0,1.1) both; } .lp-final-cta-headline { font-family: var(--font-display); font-size: clamp(38px, 6.5vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: .97; color: var(--c-text); margin: 0 0 20px; } [data-theme="dark"] .lp-final-cta-headline { background: linear-gradient(135deg, #f0e2c8 20%, var(--c-accent-hi) 70%, var(--c-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-final-cta-sub { font-size: clamp(16px, 2vw, 20px); color: var(--c-muted); margin: 0 0 40px; line-height: 1.7; } .lp-final-cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } /* ============================================================ BACKGROUND DEPTH LAYER (lp-bg-travel) Travels with the page (position:absolute) to contrast with the fixed shell::before/after, creating layered depth. ============================================================ */ .lp-bg-travel { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .lp-bg-travel::before, .lp-bg-travel::after { content: ""; position: absolute; inset: 0; } .lp-bg-travel::before { background: radial-gradient(720px 420px at 50% 6%, hsla(var(--lp-line-hue), 84%, 68%, 0.08), transparent 70%), linear-gradient(132deg, transparent 0%, transparent 18%, hsla(calc(var(--lp-line-hue) + 22), 84%, 70%, 0.028) 42%, transparent 64%), repeating-linear-gradient( -48deg, transparent 0px, transparent 220px, hsla(var(--lp-line-hue), 84%, 68%, 0.016) 220px, hsla(var(--lp-line-hue), 84%, 68%, 0.016) 221px, transparent 221px, transparent 440px ); opacity: 0.58; } .lp-bg-travel::after { background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.018) 18%, transparent 40%, rgba(96,165,250,0.035) 58%, transparent 84%), linear-gradient(90deg, transparent 0%, transparent 16%, hsla(calc(var(--lp-line-hue) + 34), 82%, 72%, 0.06) 48%, transparent 84%), repeating-linear-gradient( 135deg, transparent 0px, transparent 180px, hsla(calc(var(--lp-line-hue) + 28), 82%, 72%, 0.015) 180px, hsla(calc(var(--lp-line-hue) + 28), 82%, 72%, 0.015) 181px, transparent 181px, transparent 360px ); opacity: 0.46; } [data-theme="light"] .lp-bg-travel::before { opacity: 0.5; } [data-theme="light"] .lp-bg-travel::after { opacity: 0.34; } /* ============================================================ HERO VECTOR NETWORK (lp-vector-net + lp-vp-* + lp-nd-*) ============================================================ */ .lp-vector-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.58; } [data-theme="light"] .lp-vector-net { opacity: 0.38; } /* Base path structure — tiny dashes forming the circuit skeleton */ .lp-vp-base { fill: none; stroke: hsla(var(--lp-line-hue), 80%, 68%, 0.16); stroke-width: 1; stroke-dasharray: 5 13; } .lp-vp-base-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 80%, 70%, 0.14); } .lp-vp-base-c { stroke: hsla(calc(var(--lp-line-hue) + 60), 82%, 68%, 0.12); } /* Animated flow segment — a moving lit segment travelling the path */ .lp-vp-flow { fill: none; stroke: hsla(var(--lp-line-hue), 85%, 70%, 0.40); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 72 1700; animation: lp-path-flow 14s linear infinite; } .lp-vp-flow-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 82%, 72%, 0.35); stroke-dasharray: none; animation: none; } .lp-vp-flow-c { stroke: hsla(calc(var(--lp-line-hue) + 60), 84%, 70%, 0.30); stroke-dasharray: none; animation: none; } /* Connector paths — thin dotted verticals between lanes */ .lp-vp-conn { fill: none; stroke: hsla(var(--lp-line-hue), 78%, 68%, 0.20); stroke-width: 0.95; stroke-dasharray: 4 8; } .lp-vp-conn-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 78%, 70%, 0.18); } /* Node halos — soft radial glow that pulses */ .lp-nd-halo { animation: none; transform-origin: center; } /* Node rings — crisp circle outlines */ .lp-nd-ring { fill: none; stroke: hsla(var(--lp-line-hue), 82%, 70%, 0.54); stroke-width: 1.15; } .lp-nd-ring-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 80%, 72%, 0.40); } .lp-nd-ring-c { stroke: hsla(calc(var(--lp-line-hue) + 60), 82%, 70%, 0.36); } /* Node cores — solid bright center dot */ .lp-nd-core { fill: hsla(var(--lp-line-hue), 88%, 72%, 0.88); } .lp-nd-core-b { fill: hsla(calc(var(--lp-line-hue) + 34), 84%, 74%, 0.75); } .lp-nd-core-c { fill: hsla(calc(var(--lp-line-hue) + 60), 86%, 72%, 0.65); } [data-theme="light"] .lp-vp-base { stroke: hsla(var(--lp-line-hue), 70%, 44%, 0.24); stroke-width: 1.1; } [data-theme="light"] .lp-vp-base-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 66%, 46%, 0.21); } [data-theme="light"] .lp-vp-base-c { stroke: hsla(calc(var(--lp-line-hue) + 60), 64%, 44%, 0.18); } [data-theme="light"] .lp-vp-flow { stroke: hsla(var(--lp-line-hue), 74%, 46%, 0.42); stroke-width: 1.42; } [data-theme="light"] .lp-vp-flow-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 70%, 48%, 0.37); } [data-theme="light"] .lp-vp-flow-c { stroke: hsla(calc(var(--lp-line-hue) + 60), 68%, 46%, 0.31); } [data-theme="light"] .lp-vp-conn { stroke: hsla(var(--lp-line-hue), 70%, 42%, 0.28); stroke-width: 1.05; } [data-theme="light"] .lp-vp-conn-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 66%, 44%, 0.24); } [data-theme="light"] .lp-nd-ring { stroke: hsla(var(--lp-line-hue), 72%, 42%, 0.56); } [data-theme="light"] .lp-nd-ring-b { stroke: hsla(calc(var(--lp-line-hue) + 34), 68%, 44%, 0.48); } [data-theme="light"] .lp-nd-ring-c { stroke: hsla(calc(var(--lp-line-hue) + 60), 66%, 42%, 0.42); } [data-theme="light"] .lp-nd-core { fill: hsla(var(--lp-line-hue), 76%, 44%, 0.90); } [data-theme="light"] .lp-nd-core-b { fill: hsla(calc(var(--lp-line-hue) + 34), 72%, 46%, 0.82); } [data-theme="light"] .lp-nd-core-c { fill: hsla(calc(var(--lp-line-hue) + 60), 70%, 44%, 0.74); } /* ============================================================ SECTION ATMOSPHERE ENHANCEMENTS Multi-layer backgrounds that add directional flow lines and a second parallax grid to non-hero sections. ============================================================ */ /* Alt sections (panel bg) — add faint diagonal accent lines */ .lp-section--alt { background: repeating-linear-gradient( -52deg, transparent 0px, transparent 70px, hsla(var(--lp-line-hue), 80%, 68%, 0.028) 70px, hsla(var(--lp-line-hue), 80%, 68%, 0.028) 71px ), repeating-linear-gradient( 38deg, transparent 0px, transparent 110px, hsla(calc(var(--lp-line-hue) + 34), 80%, 70%, 0.018) 110px, hsla(calc(var(--lp-line-hue) + 34), 80%, 70%, 0.018) 111px ), var(--c-panel); } [data-theme="light"] .lp-section--alt { background: repeating-linear-gradient( -52deg, transparent 0px, transparent 70px, hsla(var(--lp-line-hue), 60%, 50%, 0.08) 70px, hsla(var(--lp-line-hue), 60%, 50%, 0.08) 72px ), repeating-linear-gradient( 38deg, transparent 0px, transparent 110px, hsla(calc(var(--lp-line-hue) + 34), 58%, 48%, 0.05) 110px, hsla(calc(var(--lp-line-hue) + 34), 58%, 48%, 0.05) 112px ), var(--c-panel); } /* Pub/access sections — enhance the existing gradient base */ .lp-section--pub { background: repeating-linear-gradient( -52deg, transparent 0px, transparent 68px, hsla(var(--lp-line-hue), 82%, 68%, 0.030) 68px, hsla(var(--lp-line-hue), 82%, 68%, 0.030) 69px ), repeating-linear-gradient( 42deg, transparent 0px, transparent 108px, hsla(calc(var(--lp-line-hue) + 44), 80%, 70%, 0.020) 108px, hsla(calc(var(--lp-line-hue) + 44), 80%, 70%, 0.020) 109px ), linear-gradient(160deg, rgba(37,99,235,0.05) 0%, transparent 60%); } [data-theme="light"] .lp-section--pub { background: repeating-linear-gradient( -52deg, transparent 0px, transparent 68px, hsla(var(--lp-line-hue), 60%, 48%, 0.08) 68px, hsla(var(--lp-line-hue), 60%, 48%, 0.08) 70px ), repeating-linear-gradient( 42deg, transparent 0px, transparent 108px, hsla(calc(var(--lp-line-hue) + 44), 58%, 48%, 0.05) 108px, hsla(calc(var(--lp-line-hue) + 44), 58%, 48%, 0.05) 110px ), linear-gradient(160deg, rgba(37,99,235,0.10) 0%, rgba(124,58,237,0.05) 42%, transparent 76%); } .lp-section, .lp-section--alt .lp-section-inner, .lp-sh-shell { position: relative; } .lp-section::before, .lp-section--alt .lp-section-inner::before, .lp-sh-shell::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, hsla(var(--lp-line-hue), 82%, 70%, 0.22) 28%, hsla(calc(var(--lp-line-hue) + 34), 82%, 72%, 0.18) 72%, transparent 100%); pointer-events: none; } .lp-section::after, .lp-section--alt .lp-section-inner::after, .lp-sh-shell::after { content: ""; position: absolute; top: -4px; right: 8%; width: 12px; height: 12px; border-top: 2px solid hsla(calc(var(--lp-line-hue) + 28), 84%, 72%, 0.28); border-right: 2px solid hsla(calc(var(--lp-line-hue) + 28), 84%, 72%, 0.28); transform: rotate(45deg); pointer-events: none; } [data-theme="light"] .lp-section::before, [data-theme="light"] .lp-section--alt .lp-section-inner::before, [data-theme="light"] .lp-sh-shell::before { background: linear-gradient(90deg, transparent 0%, hsla(var(--lp-line-hue), 68%, 44%, 0.28) 26%, hsla(calc(var(--lp-line-hue) + 34), 64%, 46%, 0.24) 74%, transparent 100%); } [data-theme="light"] .lp-section::after, [data-theme="light"] .lp-section--alt .lp-section-inner::after, [data-theme="light"] .lp-sh-shell::after { border-top-color: hsla(calc(var(--lp-line-hue) + 28), 66%, 44%, 0.36); border-right-color: hsla(calc(var(--lp-line-hue) + 28), 66%, 44%, 0.36); } .lp-section:first-of-type::before, .lp-section:first-of-type::after { display: none; } /* Self-hosted section — cool blue-teal flow lines */ .lp-section--selfhosted { background-image: repeating-linear-gradient( -52deg, transparent 0px, transparent 72px, hsla(calc(var(--lp-line-hue) + 18), 80%, 68%, 0.025) 72px, hsla(calc(var(--lp-line-hue) + 18), 80%, 68%, 0.025) 73px ), linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(124,58,237,.06) 60%, rgba(6,182,212,.05) 100%); } [data-theme="light"] .lp-section--selfhosted { background-image: repeating-linear-gradient( -52deg, transparent 0px, transparent 72px, hsla(calc(var(--lp-line-hue) + 18), 60%, 48%, 0.08) 72px, hsla(calc(var(--lp-line-hue) + 18), 60%, 48%, 0.08) 74px ), linear-gradient(135deg, rgba(37,99,235,.10) 0%, rgba(124,58,237,.08) 60%, rgba(6,182,212,.06) 100%); } [data-theme="dark"] .lp-section--selfhosted { background-image: repeating-linear-gradient( -52deg, transparent 0px, transparent 72px, hsla(calc(var(--lp-line-hue) + 18), 82%, 68%, 0.035) 72px, hsla(calc(var(--lp-line-hue) + 18), 82%, 68%, 0.035) 73px ), linear-gradient(135deg, rgba(96,165,250,.12) 0%, rgba(192,132,252,.10) 60%, rgba(34,211,238,.08) 100%); } /* Step connector — pulse so it reads as "live flow" */ .lp-step-connector { animation: none; } /* ============================================================ REDUCED MOTION — disable decorative animations ============================================================ */ @media (prefers-reduced-motion: reduce) { .lp-shell::before, .lp-vp-flow, .lp-vp-flow-b, .lp-vp-flow-c, .lp-nd-halo, .lp-nd-halo-b, .lp-nd-halo-c, .lp-hero::after, .lp-hero::before, .lp-hero-stage::after, .lp-hero-source-card, .lp-hero-output-card, .lp-hero-core-card, .lp-orb, .lp-step, .lp-step-connector, .lp-hero-stage-signal, .lp-bg-travel::before { animation: none; } .lp-shell::before, .lp-shell::after, .lp-hero::after, .lp-hero::before, .lp-hero-stage::after, .lp-hero-source-card, .lp-hero-output-card, .lp-hero-core-card, .lp-orb, .lp-step, .lp-bg-travel::before, .lp-bg-travel::after { transform: none !important; } .lp-hero-stage-signal { display: none; } } /* ============================================================ ROTATING HEADLINE TEXT (lp-rotate) ============================================================ */ @keyframes lp-word-cycle { 0% { opacity:0; transform:translateY(24px); } 5% { opacity:1; transform:translateY(0); } 20% { opacity:1; transform:translateY(0); } 25% { opacity:0; transform:translateY(-24px); } 100% { opacity:0; } } .lp-rotate { position: relative; display: inline-block; min-width: 10.5ch; height: 1.05em; vertical-align: bottom; overflow: hidden; } .lp-rotate-word { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; color: var(--c-accent); animation: lp-word-cycle 10s ease-in-out infinite; } [data-theme="dark"] .lp-rotate-word { color: var(--c-accent-hi); } .lp-rotate-word:nth-child(1) { animation-delay: 0s; } .lp-rotate-word:nth-child(2) { animation-delay: 2.5s; } .lp-rotate-word:nth-child(3) { animation-delay: 5s; } .lp-rotate-word:nth-child(4) { animation-delay: 7.5s; } /* ============================================================ HERO LOGO CLOUD (lp-hero-logos) ============================================================ */ .lp-hero-logos { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; } .lp-hero-logos-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .lp-hero-logo-chip { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.78)); border: 1px solid rgba(148,163,184,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 16px rgba(15,23,42,0.06); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .lp-hero-logo-chip:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 28px rgba(15,23,42,0.10); border-color: var(--c-accent-glow); } .lp-hero-logo-chip img { width: 26px; height: 26px; object-fit: contain; } [data-theme="dark"] .lp-hero-logo-chip { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); border-color: rgba(255,255,255,0.10); box-shadow: 0 6px 18px rgba(2,6,23,0.22); } .lp-hero-logos-note { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--c-muted); } /* ============================================================ PRODUCT PILLARS (lp-pillar) ============================================================ */ .lp-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .lp-pillar { position: relative; padding: 28px 24px; border-radius: 22px; border: 1px solid var(--c-line); background: var(--c-panel-strong); overflow: hidden; text-align: center; transition: transform 200ms cubic-bezier(.22,.68,0,1.1), box-shadow 200ms ease, border-color 200ms ease; } .lp-pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 22px 22px 0 0; } .lp-pillar:hover { transform: translateY(-5px); } .lp-pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px; } .lp-pillar-title { font-size: 18px; font-weight: 700; letter-spacing: -.025em; color: var(--c-text); margin: 0 0 8px; } .lp-pillar-desc { font-size: 13.5px; line-height: 1.6; color: var(--c-muted); margin: 0; } /* Color variants */ .lp-pillar--blue::before { background: linear-gradient(90deg, rgba(37,99,235,.8), rgba(37,99,235,.25)); } .lp-pillar--blue .lp-pillar-icon { background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.2); color: #2563eb; } .lp-pillar--blue:hover { border-color: rgba(37,99,235,.5); box-shadow: var(--shadow-md), 0 0 40px rgba(37,99,235,.08); } .lp-pillar--violet::before { background: linear-gradient(90deg, rgba(124,58,237,.8), rgba(124,58,237,.25)); } .lp-pillar--violet .lp-pillar-icon { background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.2); color: #7c3aed; } .lp-pillar--violet:hover { border-color: rgba(124,58,237,.5); box-shadow: var(--shadow-md), 0 0 40px rgba(124,58,237,.08); } .lp-pillar--cyan::before { background: linear-gradient(90deg, rgba(6,182,212,.8), rgba(6,182,212,.25)); } .lp-pillar--cyan .lp-pillar-icon { background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.2); color: #06b6d4; } .lp-pillar--cyan:hover { border-color: rgba(6,182,212,.5); box-shadow: var(--shadow-md), 0 0 40px rgba(6,182,212,.08); } .lp-pillar--amber::before { background: linear-gradient(90deg, rgba(245,158,11,.8), rgba(245,158,11,.25)); } .lp-pillar--amber .lp-pillar-icon { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2); color: #f59e0b; } .lp-pillar--amber:hover { border-color: rgba(245,158,11,.5); box-shadow: var(--shadow-md), 0 0 40px rgba(245,158,11,.08); } /* ============================================================ USE CASE TABS (lp-uc-*) ============================================================ */ .lp-uc-input { display: none; } .lp-uc-shell { position: relative; } .lp-uc-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lp-uc-tabs::-webkit-scrollbar { display: none; } .lp-uc-tab { padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--c-muted); cursor: pointer; white-space: nowrap; transition: color 150ms ease, background 150ms ease; user-select: none; } .lp-uc-tab:hover { color: var(--c-text); background: rgba(255,255,255,0.06); } /* Tab active states via :has() */ .lp-uc-shell:has(#lp-uc-support:checked) label[for="lp-uc-support"], .lp-uc-shell:has(#lp-uc-knowledge:checked) label[for="lp-uc-knowledge"], .lp-uc-shell:has(#lp-uc-devdocs:checked) label[for="lp-uc-devdocs"], .lp-uc-shell:has(#lp-uc-onboarding:checked) label[for="lp-uc-onboarding"], .lp-uc-shell:has(#lp-uc-sales:checked) label[for="lp-uc-sales"] { color: var(--c-accent); background: var(--c-accent-soft); } .lp-uc-panels { position: relative; } .lp-uc-panel { display: none; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; animation: lp-fade-up .35s ease both; } .lp-uc-shell:has(#lp-uc-support:checked) .lp-uc-panel[data-uc="support"], .lp-uc-shell:has(#lp-uc-knowledge:checked) .lp-uc-panel[data-uc="knowledge"], .lp-uc-shell:has(#lp-uc-devdocs:checked) .lp-uc-panel[data-uc="devdocs"], .lp-uc-shell:has(#lp-uc-onboarding:checked) .lp-uc-panel[data-uc="onboarding"], .lp-uc-shell:has(#lp-uc-sales:checked) .lp-uc-panel[data-uc="sales"] { display: grid; } .lp-uc-panel-copy { padding: 18px 0; } .lp-uc-panel-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.04em; color: var(--c-text); margin: 0 0 10px; } .lp-uc-panel-desc { font-size: 14px; line-height: 1.7; color: var(--c-muted); margin: 0; } .lp-uc-panel-copy .lp-app-pill-row { max-width: 32rem; } /* Chat mockup */ .lp-uc-chat { border-radius: 20px; border: 1px solid var(--c-line); background: var(--c-panel-strong); overflow: hidden; box-shadow: 0 16px 48px rgba(7,13,26,0.10); } [data-theme="dark"] .lp-uc-chat { box-shadow: 0 20px 56px rgba(2,6,23,0.32); } .lp-uc-chat-header { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); background: rgba(255,255,255,0.03); } .lp-uc-chat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line-strong); } .lp-uc-chat-dot:nth-child(1) { background: #ef4444; } .lp-uc-chat-dot:nth-child(2) { background: #f59e0b; } .lp-uc-chat-dot:nth-child(3) { background: #22c55e; } .lp-uc-chat-name { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--c-muted); letter-spacing: 0.02em; } .lp-uc-chat-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .lp-uc-msg { max-width: 88%; padding: 12px 16px; border-radius: 18px; font-size: 13.5px; line-height: 1.6; } .lp-uc-msg p { margin: 0; } .lp-uc-msg--user { align-self: flex-end; background: var(--c-accent); color: #fff; border-bottom-right-radius: 6px; } .lp-uc-msg--ai { align-self: flex-start; border: 1px solid var(--c-line); background: rgba(255,255,255,0.04); color: var(--c-text); border-bottom-left-radius: 6px; } .lp-uc-msg-source { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; } /* ============================================================ PLATFORM HUB (lp-hub-*) ============================================================ */ .lp-section--hub { text-align: center; } .lp-hub-sub { font-size: clamp(15px, 2vw, 18px); color: var(--c-muted); line-height: 1.7; max-width: 50ch; margin: 0 auto 44px; } .lp-hub-visual { display: flex; flex-direction: column; align-items: center; max-width: 820px; margin: 0 auto 40px; } .lp-hub-center { display: flex; flex-direction: column; align-items: center; gap: 10px; } .lp-hub-logo-ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(124,58,237,0.14)), var(--c-panel-strong); border: 2px solid var(--c-accent-glow); box-shadow: 0 0 0 8px var(--c-accent-soft), 0 0 48px rgba(37,99,235,0.18); color: var(--c-accent); } [data-theme="dark"] .lp-hub-logo-ring { box-shadow: 0 0 0 8px rgba(37,99,235,0.12), 0 0 56px rgba(37,99,235,0.22); } .lp-hub-label { font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); } .lp-hub-connector { width: 2px; height: 36px; background: linear-gradient(180deg, var(--c-accent-glow), var(--c-line)); position: relative; } .lp-hub-connector::after { content: ""; position: absolute; bottom: -3px; left: 50%; width: 8px; height: 8px; border-bottom: 2px solid var(--c-accent-glow); border-right: 2px solid var(--c-accent-glow); transform: translateX(-50%) rotate(45deg); } .lp-hub-nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; position: relative; padding-top: 16px; } .lp-hub-nodes::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--c-accent-glow) 30%, var(--c-accent-glow) 70%, transparent); } .lp-hub-node { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; border-radius: 20px; border: 1px solid var(--c-line); background: var(--c-panel-strong); position: relative; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .lp-hub-node:hover { transform: translateY(-4px); border-color: var(--c-accent-glow); box-shadow: var(--shadow-md), 0 0 0 1px var(--c-accent-soft); } .lp-hub-node::before { content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px; background: var(--c-accent-glow); transform: translateX(-50%); } .lp-hub-node-icon { font-size: 28px; line-height: 1; } .lp-hub-node strong { font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); } .lp-hub-node small { font-size: 12px; line-height: 1.4; color: var(--c-muted); } .lp-hub-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } /* ============================================================ TIME SAVINGS (lp-time-*) ============================================================ */ .lp-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .lp-time-stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 18px; border-radius: 22px; border: 1px solid var(--c-line); background: var(--c-panel-strong); overflow: hidden; transition: transform 200ms ease, border-color 200ms ease; } .lp-time-stat:hover { transform: translateY(-4px); border-color: var(--c-accent-glow); } .lp-time-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hi)); } .lp-time-value { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--c-accent); margin-bottom: 8px; white-space: nowrap; } [data-theme="dark"] .lp-time-value { background: linear-gradient(135deg, var(--c-accent-hi) 0%, var(--c-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-time-label { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); margin-bottom: 6px; } .lp-time-detail { font-size: 12.5px; line-height: 1.55; color: var(--c-muted); } /* ============================================================ INTEGRATION MARQUEE WRAPPER (lp-int-marquee-wrap) ============================================================ */ .lp-int-marquee-wrap { border-radius: 24px; border: 1px solid rgba(148,163,184,0.14); padding: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--c-panel-strong); box-shadow: 0 16px 48px rgba(15,23,42,0.06); } .lp-int-marquee-wrap .lp-int-marquee { border-radius: 18px; } .lp-int-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .lp-int-group-card { padding: 22px 20px; border-radius: 20px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)), var(--c-panel-strong); box-shadow: var(--shadow-sm); } [data-theme="dark"] .lp-int-group-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--c-panel-strong); } .lp-int-group-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); } .lp-int-group-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--c-muted); } .lp-int-group-card .lp-app-pill-row { margin-top: 16px; } /* end styles/pages/landing.css */ /* begin styles/pages/public-agent-section.css */ /* ============================================================ PUBLIC AGENT SECTION ============================================================ */ @keyframes lp-int-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes lp-int-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes lp-int-panel-glow { 0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: 0.8; transform: translate3d(8px, -10px, 0) scale(1.04); } } @keyframes lp-access-node-pulse { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.18); opacity: 1; } } .lp-section--pub { background: linear-gradient(160deg, rgba(37,99,235,0.05) 0%, transparent 60%); border-top: 1px solid var(--c-line); } .lp-pub-intro { max-width: 60ch; margin: 0 auto 32px; text-align: center; color: var(--c-muted); font-size: 15px; line-height: 1.65; } .lp-pub-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; } .lp-pub-highlight { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)), var(--c-panel-strong); text-align: left; } .lp-pub-highlight h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.02em; color: var(--c-text); } .lp-pub-highlight p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--c-muted); } .lp-pub-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 20px; margin-bottom: 40px; } .lp-pub-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .lp-pub-step { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 0; } .lp-pub-steps--four .lp-pub-step { padding: 18px; border-radius: 18px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--c-panel-strong); box-shadow: var(--shadow-sm); } .lp-pub-step-n { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--c-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .lp-pub-step-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.03em; color: var(--c-text); } .lp-pub-step-desc { margin: 0; font-size: 14px; line-height: 1.7; color: var(--c-muted); max-width: 32ch; } .lp-pub-steps--four .lp-pub-step-desc { max-width: none; } .lp-pub-step-divider { align-self: center; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(37,99,235,0.06), rgba(37,99,235,0.28), rgba(37,99,235,0.06)); position: relative; } .lp-pub-step-divider::after { content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid rgba(37,99,235,0.3); border-right: 1.5px solid rgba(37,99,235,0.3); transform: translateY(-50%) rotate(45deg); } .lp-pub-steps--four .lp-pub-step-divider { display: none; } .lp-pub-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; } .lp-pub-case { display: flex; gap: 14px; padding: 20px; border-radius: 18px; border: 1px solid var(--c-line); background: var(--c-panel-strong); transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; } .lp-pub-case:hover { border-color: var(--c-accent); box-shadow: var(--shadow-md), 0 0 0 1px var(--c-accent-soft); transform: translateY(-2px); } .lp-pub-case-icon { font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .lp-pub-case-kicker { display: inline-flex; align-items: center; margin: 0 0 8px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: rgba(255,255,255,0.04); color: var(--c-subtle); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .lp-pub-case-body h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.02em; color: var(--c-text); } .lp-pub-case-body p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--c-muted); } .lp-pub-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; } .lp-pub-cta-note { font-size: 12.5px; color: var(--c-subtle); width: 100%; text-align: center; margin-top: 4px; } .lp-pub-intro--compact { max-width: 54ch; margin-bottom: 24px; } .lp-int-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 18px; align-items: stretch; } .lp-int-panel { position: relative; overflow: hidden; padding: 20px; border-radius: 28px; border: 1px solid rgba(148,163,184,0.16); background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)), linear-gradient(135deg, rgba(37,99,235,0.05), rgba(6,182,212,0.04)), var(--c-panel-strong); box-shadow: 0 20px 60px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(12px); } .lp-int-panel::before { content: ""; position: absolute; width: 340px; height: 220px; top: -70px; right: -80px; border-radius: 999px; background: radial-gradient(circle, rgba(37,99,235,0.18), transparent 70%); filter: blur(24px); pointer-events: none; animation: lp-int-panel-glow 12s ease-in-out infinite; } .lp-int-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,0.05); pointer-events: none; } .lp-int-panel-head, .lp-int-marquee, .lp-int-status { position: relative; z-index: 1; } .lp-int-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .lp-int-panel-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px; } .lp-int-panel-title { margin: 0; max-width: 15ch; font-size: clamp(26px, 3vw, 36px); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.045em; line-height: 1; color: var(--c-text); } .lp-int-panel-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .lp-int-panel-pill { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--c-subtle); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .lp-int-marquee { position: relative; overflow: hidden; padding: 18px; border-radius: 22px; border: 1px solid rgba(148,163,184,0.16); background: radial-gradient(420px 200px at 0% 0%, rgba(37,99,235,0.12), transparent 62%), radial-gradient(320px 180px at 100% 100%, rgba(6,182,212,0.10), transparent 64%), linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,250,252,0.62)), linear-gradient(135deg, rgba(37,99,235,0.04), rgba(6,182,212,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 16px 32px rgba(15,23,42,0.07); backdrop-filter: blur(16px); } .lp-int-marquee::before, .lp-int-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 2; } .lp-int-marquee::before { left: 0; background: linear-gradient(90deg, rgba(248,250,252,0.98), rgba(248,250,252,0)); } .lp-int-marquee::after { right: 0; background: linear-gradient(270deg, rgba(248,250,252,0.98), rgba(248,250,252,0)); } .lp-int-track { display: flex; align-items: center; gap: 12px; width: max-content; } .lp-int-track + .lp-int-track { margin-top: 12px; } .lp-int-track--left { animation: lp-int-scroll-left 28s linear infinite; } .lp-int-track--right { animation: lp-int-scroll-right 34s linear infinite; } .lp-int-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.16); background: rgba(255,255,255,0.055); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(15,23,42,0.06); } .lp-int-chip-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.94)); border: 1px solid rgba(203,213,225,0.92); box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 8px 18px rgba(15,23,42,0.08); overflow: hidden; } .lp-int-chip-logo { width: 18px; height: 18px; object-fit: contain; display: block; } .lp-int-chip-label { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); } .lp-int-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .lp-int-status-item { padding: 14px 15px; border-radius: 18px; border: 1px solid rgba(148,163,184,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)), rgba(255,255,255,0.015); } .lp-int-status-item strong { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); } .lp-int-status-item span { display: block; font-size: 12.5px; line-height: 1.58; color: var(--c-muted); } .lp-int-highlights { display: grid; grid-template-columns: 1fr; gap: 12px; } .lp-int-highlight { position: relative; overflow: hidden; padding: 18px 18px 18px 20px; border-radius: 22px; border: 1px solid rgba(148,163,184,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)), var(--c-panel-strong); box-shadow: 0 18px 44px rgba(15,23,42,0.05); } .lp-int-highlight::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, rgba(37,99,235,0.82), rgba(6,182,212,0.28)); } .lp-int-highlight h3 { margin: 0 0 7px; font-size: 15px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.02em; color: var(--c-text); } .lp-int-highlight p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--c-muted); } .lp-home-access-shell { position: relative; display: grid; gap: 16px; padding: 18px; border-radius: 30px; border: 1px solid rgba(148,163,184,0.14); background: radial-gradient(420px 220px at 0% 0%, rgba(37,99,235,0.08), transparent 64%), radial-gradient(340px 180px at 100% 100%, rgba(124,58,237,0.07), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--c-panel-strong); box-shadow: 0 22px 56px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.05); } .lp-home-access-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; align-items: stretch; } .lp-home-access-lead { position: relative; overflow: hidden; padding: 22px; border-radius: 26px; border: 1px solid rgba(148,163,184,0.14); background: radial-gradient(360px 180px at 0% 0%, rgba(37,99,235,0.1), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)), var(--c-panel-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 44px rgba(15,23,42,0.06); } .lp-home-access-lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 18%, rgba(255,255,255,0.06) 34%, transparent 48%); transform: translateX(calc(var(--lp-scroll-ratio) * 26px)); pointer-events: none; } .lp-home-access-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 12px; } .lp-home-access-lead h3 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.04em; line-height: 1.02; color: var(--c-text); } .lp-home-access-lead p { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.7; color: var(--c-muted); } .lp-home-access-spectrum { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding: 14px; border-radius: 20px; border: 1px solid rgba(148,163,184,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,250,252,0.56)), linear-gradient(135deg, rgba(37,99,235,0.03), rgba(124,58,237,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.56), 0 14px 28px rgba(15,23,42,0.05); backdrop-filter: blur(16px); } .lp-home-access-spectrum::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; height: 1px; background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0.34), rgba(124,58,237,0.28), rgba(6,182,212,0.24)); } .lp-home-access-node { position: relative; z-index: 1; display: grid; gap: 4px; justify-items: start; min-height: 100%; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid rgba(148,163,184,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.48)), rgba(255,255,255,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.54), 0 10px 20px rgba(15,23,42,0.04); } .lp-home-access-node strong { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); } .lp-home-access-node small { font-size: 11.5px; line-height: 1.45; color: var(--c-subtle); } .lp-home-access-node-dot { width: 12px; height: 12px; border-radius: 999px; box-shadow: 0 0 0 6px rgba(255,255,255,0.32); animation: lp-access-node-pulse 4.2s ease-in-out infinite; } .lp-home-access-node.is-internal .lp-home-access-node-dot { background: #2563eb; } .lp-home-access-node.is-restricted .lp-home-access-node-dot { background: #7c3aed; animation-delay: .4s; } .lp-home-access-node.is-shared .lp-home-access-node-dot { background: #0891b2; animation-delay: .8s; } [data-theme="dark"] .lp-int-marquee { background: radial-gradient(420px 200px at 0% 0%, rgba(96,165,250,0.18), transparent 62%), radial-gradient(320px 180px at 100% 100%, rgba(34,211,238,0.16), transparent 64%), linear-gradient(180deg, rgba(15,23,42,0.88), rgba(8,15,28,0.72)), linear-gradient(135deg, rgba(37,99,235,0.08), rgba(6,182,212,0.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 36px rgba(2,6,23,0.28); } [data-theme="dark"] .lp-int-marquee::before { background: linear-gradient(90deg, rgba(15,23,42,0.98), rgba(15,23,42,0)); } [data-theme="dark"] .lp-int-marquee::after { background: linear-gradient(270deg, rgba(15,23,42,0.98), rgba(15,23,42,0)); } [data-theme="dark"] .lp-home-access-spectrum { background: linear-gradient(180deg, rgba(15,23,42,0.82), rgba(8,15,28,0.64)), linear-gradient(135deg, rgba(37,99,235,0.06), rgba(124,58,237,0.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 34px rgba(2,6,23,0.24); } [data-theme="dark"] .lp-home-access-node { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)), rgba(15,23,42,0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 24px rgba(2,6,23,0.18); } [data-theme="dark"] .lp-home-access-node-dot { box-shadow: 0 0 0 6px rgba(255,255,255,0.05); } .lp-home-access-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .lp-home-access-chip { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: rgba(255,255,255,0.035); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-subtle); } .lp-home-access-lead .lp-pub-cta { justify-content: flex-start; margin-top: 18px; } .lp-home-access-lead .lp-pub-cta-note { text-align: left; } .lp-home-access-highlights { display: grid; gap: 12px; } .lp-home-access-highlight { position: relative; overflow: hidden; padding: 16px 18px 16px 20px; border-radius: 20px; border: 1px solid rgba(148,163,184,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)), var(--c-panel-strong); } .lp-home-access-highlight::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, rgba(124,58,237,0.72), rgba(6,182,212,0.24)); } .lp-home-access-highlight h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.02em; color: var(--c-text); } .lp-home-access-highlight p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--c-muted); } .lp-home-access-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lp-home-access-case { display: flex; gap: 12px; padding: 16px; border-radius: 20px; border: 1px solid rgba(148,163,184,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)), rgba(255,255,255,0.02); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .lp-home-access-case:hover { transform: translateY(-3px); border-color: var(--c-accent-glow); background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)), rgba(255,255,255,0.025); box-shadow: 0 18px 44px rgba(15,23,42,0.08); } .lp-home-access-case-icon { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 14px; background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.16); font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .lp-home-access-case-kicker { display: inline-flex; align-items: center; margin: 0 0 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: rgba(255,255,255,0.04); color: var(--c-subtle); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .lp-home-access-case-body h4 { margin: 0 0 5px; font-size: 15px; font-weight: 650; font-family: var(--font-display); letter-spacing: -0.02em; color: var(--c-text); } .lp-home-access-case-body p { margin: 0; font-size: 12.75px; line-height: 1.58; color: var(--c-muted); } /* Responsive */ @media (max-width: 1000px) { .lp-int-shell { grid-template-columns: 1fr; } .lp-int-panel-head { flex-direction: column; } .lp-int-panel-pills { justify-content: flex-start; } .lp-int-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-home-access-layout { grid-template-columns: 1fr; } .lp-home-access-cases { grid-template-columns: repeat(2, 1fr); } .lp-home-access-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-pub-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-pub-cases { grid-template-columns: repeat(2, 1fr); } .lp-pub-steps { grid-template-columns: 1fr; } .lp-pub-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-pub-step-divider { width: 1px; height: 22px; justify-self: center; background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(37,99,235,0.42), rgba(37,99,235,0.08)); } .lp-pub-step-divider::after { right: auto; left: 50%; top: auto; bottom: 1px; transform: translateX(-50%) rotate(135deg); } } @media (max-width: 640px) { .lp-pub-intro { max-width: none; margin-bottom: 24px; text-align: left; } .lp-int-shell { gap: 14px; } .lp-int-panel { padding: 16px; border-radius: 22px; } .lp-int-panel-head { gap: 12px; margin-bottom: 14px; } .lp-int-panel-title { max-width: none; font-size: clamp(24px, 7vw, 32px); } .lp-int-panel-pills { display: grid; grid-template-columns: repeat(2, max-content); } .lp-int-marquee { padding: 14px; border-radius: 20px; } .lp-int-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-int-track { gap: 10px; } .lp-int-chip { padding: 9px 12px; } .lp-int-chip-label { font-size: 12px; } .lp-int-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-int-highlight { min-height: 100%; padding: 16px 16px 16px 18px; border-radius: 18px; } .lp-home-access-lead { padding: 18px; border-radius: 20px; } .lp-home-access-shell { padding: 14px; border-radius: 24px; } .lp-home-access-spectrum { grid-template-columns: 1fr; gap: 10px; padding: 14px 14px 14px 18px; } .lp-home-access-spectrum::before { display: block; left: 24px; right: auto; top: 18px; bottom: 18px; width: 1.5px; height: auto; background: linear-gradient(180deg, rgba(37,99,235,0.16), rgba(37,99,235,0.38), rgba(124,58,237,0.24), rgba(6,182,212,0.2)); } .lp-home-access-node { grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start; padding: 12px 12px 12px 10px; } .lp-home-access-node strong, .lp-home-access-node small { grid-column: 2; } .lp-home-access-node-dot { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 2px; } .lp-home-access-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-home-access-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-home-access-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-pub-cases { grid-template-columns: 1fr; } .lp-pub-steps--four { grid-template-columns: 1fr; } .lp-pub-step-title { font-size: 18px; } .lp-pub-step-desc { max-width: none; } } @media (max-width: 480px) { .lp-int-status, .lp-int-highlights, .lp-home-access-highlights, .lp-home-access-cases, .lp-pub-highlights { grid-template-columns: 1fr; } .lp-int-panel-pills { grid-template-columns: 1fr; justify-content: stretch; } .lp-home-access-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .lp-int-track--left, .lp-int-track--right, .lp-int-panel::before, .lp-home-access-node-dot { animation: none; } } /* end styles/pages/public-agent-section.css */ /* begin styles/pages/list-detail.css */ /* ============================================================ LIST VIEW — page header + colorful brain grid ============================================================ */ .list-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0 8px; flex-wrap: wrap; } .list-header-title { margin: 0; font-family: var(--font-display); font-size: 30px; letter-spacing: -.04em; line-height: 1.1; } .list-header-sub { margin: 4px 0 0; color: var(--c-muted); font-size: 13.5px; } .list-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .studio-button-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; min-width: 14px; line-height: 1; } .studio-button-icon svg { display: block; width: 100%; height: 100%; } .studio-label-full.studio-label-full { display: inline; } .studio-label-short.studio-label-short { display: none; } .list-stats { display: flex; align-items: center; background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 0 4px; box-shadow: var(--shadow-sm); } .list-stat { display: flex; flex-direction: column; align-items: center; padding: 7px 15px; } .list-stat-n { font-size: 16px; font-weight: 560; letter-spacing: -.03em; } .list-stat-l { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-top:1px; } .list-stat-divider { width:1px; height:28px; background: var(--c-line); } /* Grid */ .brain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: 12px; } /* Individual card */ .brain-grid-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-panel-strong); cursor: pointer; overflow: hidden; transition: transform 150ms ease, box-shadow 160ms ease, border-color 150ms ease; box-shadow: var(--shadow-sm); user-select: none; } .brain-grid-card:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: var(--shadow-md), 0 0 0 1px var(--c-accent-soft); } .brain-grid-card:active { transform: translateY(-1px); } /* Colourful header band (uses the brain's surface vars) */ .brain-grid-card-band { width: 100%; height: 44px; margin-bottom: -22px; background: var(--studio-avatar-bg, var(--av0-bg)); flex-shrink: 0; } .brain-grid-avatar { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--studio-avatar-bg, var(--av0-bg)); box-shadow: inset 0 0 0 2px var(--studio-avatar-ring, var(--av0-ring)), var(--studio-avatar-shadow, var(--av0-glow)), 0 0 0 3px var(--c-panel-strong); margin-bottom: 10px; overflow: hidden; } .brain-grid-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -.02em; color: var(--c-text); line-height: 1.25; margin-bottom: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:100%; } .brain-grid-project { font-size: 10.5px; color: var(--c-muted); text-transform: uppercase; letter-spacing:.1em; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:100%; } .brain-grid-meta { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } /* Status dot */ .brain-grid-status-dot { position: absolute; top: 11px; right: 11px; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--c-subtle); border: 2px solid var(--c-panel-strong); } .brain-grid-status-dot.healthy { background: var(--c-good); } /* Projects bar */ .projects-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .projects-bar-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing:.1em; color: var(--c-muted); flex-shrink:0; padding-right: 10px; border-right: 1px solid var(--c-line); margin-right: 2px; } .memory-summary-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .memory-summary-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--c-line); background: linear-gradient(180deg, var(--c-panel-strong), var(--c-panel)); box-shadow: var(--shadow-sm); } .memory-summary-value { font-size: 18px; font-weight: 560; letter-spacing: -.04em; color: var(--c-text); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .memory-summary-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-integration-guide-row { display: grid; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--c-line); background: linear-gradient(140deg, rgba(37,99,235,0.08), rgba(6,182,212,0.05)), var(--c-panel); } .ai-integration-guide-copy { display: grid; gap: 3px; min-width: 0; } .ai-integration-guide-copy strong { font-size: 13px; line-height: 1.25; color: var(--c-text); } .ai-integration-guide-copy small, .ai-integration-guide-status { font-size: 11.5px; line-height: 1.45; color: var(--c-muted); } .ai-integration-guide-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ai-integration-guide-link { width: 36px; min-width: 36px; min-height: 36px; border-radius: 12px; } .ai-integration-guide-link .studio-site-footer-model-logo { width: 22px; height: 22px; } /* ============================================================ DETAIL VIEW ============================================================ */ .detail-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; flex-wrap: wrap; } .detail-back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 5px 0; font-size: 13px; color: var(--c-muted); cursor: pointer; transition: color 120ms ease; } .detail-back-btn:hover { color: var(--c-text); } .detail-action-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .detail-hero-inline-action { min-height: 40px; font-size: 12.5px; } .detail-hero-action-menu { position: relative; } .detail-hero-action-menu--desktop { display: inline-flex; align-items: center; } .detail-hero-more-toggle { gap: 6px; } .detail-hero-more-toggle svg { transition: transform 160ms ease; } .detail-hero-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .public-settings-hero { position: relative; overflow: hidden; padding: 12px 16px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 36%), var(--c-surface); box-shadow: none; } .public-settings-hero::before { display: none; } .public-settings-hero > * { position: relative; z-index: 1; } [data-theme="dark"] .public-settings-hero { border-color: var(--c-line); background: var(--c-surface); box-shadow: none; } .public-settings-hero .studio-card-title h2 { font-size: 14px; font-weight: 600; font-family: inherit; letter-spacing: 0; line-height: 1.3; } /* Hide the verbose description in the compact hero */ .public-settings-hero .studio-card-title p { display: none; } /* Hide the kicker in the compact hero */ .public-settings-hero .detail-hero-kicker { display: none; } .public-settings-hero-chips { gap: 6px; align-items: center; margin-top: 8px !important; flex-wrap: wrap; } .public-settings-hero-chips .studio-chip { padding: 6px 11px; border-radius: 4px; font-size: 11px; background: var(--c-panel-strong); border-color: var(--c-line); color: var(--c-muted); box-shadow: none; } [data-theme="dark"] .public-settings-hero-chips .studio-chip, [data-theme="dark"] .public-settings-content-head-chips .studio-chip { background: rgba(15, 23, 42, 0.72); border-color: rgba(96, 165, 250, 0.14); color: color-mix(in srgb, var(--c-text) 90%, var(--c-muted)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .public-settings-layout { align-items: start; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr); } .public-settings-shell { position: relative; display: grid; grid-template-columns: 288px minmax(0, 980px); gap: 14px; align-items: start; width: min(100%, 1282px); max-width: 1282px; justify-content: start; } .public-settings-sidebar-backdrop { display: none; } .public-settings-sidebar { position: sticky; top: 92px; max-height: calc(100vh - 112px); padding: 0; overflow-y: auto; scrollbar-gutter: stable both-edges; } .public-settings-sidebar-mobile-head { display: none; } .public-settings-sidebar-close { display: none; width: 38px; height: 38px; min-width: 38px; padding: 0; justify-content: center; border-radius: 12px; } .public-settings-sidebar-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; } .public-settings-sidebar-card { display: grid; gap: 10px; } .public-settings-sidebar-summary-toggle { list-style: none; display: grid; gap: 4px; cursor: pointer; } .public-settings-sidebar-summary-toggle::-webkit-details-marker { display: none; } .public-settings-sidebar-summary-toggle strong { font-size: 12px; font-weight: 650; color: var(--c-text); } .public-settings-sidebar-card--summary strong { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--c-text); } /* Hide verbose description in compact sidebar */ .public-settings-sidebar-card--summary p { display: none; } .public-settings-sidebar-card p { margin: 0; color: var(--c-muted); font-size: 12px; line-height: 1.5; } .public-settings-sidebar-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--c-muted); } .public-settings-nav { display: grid; gap: 4px; } .public-settings-nav-button { appearance: none; position: relative; overflow: hidden; width: 100%; border: 1px solid var(--c-line); border-radius: 8px; padding: 8px 10px 8px 14px; background: color-mix(in srgb, var(--c-panel-strong) 86%, transparent); display: grid; gap: 3px; text-align: left; color: var(--c-text); cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease; } .public-settings-nav-button::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, var(--c-accent), var(--c-accent-hi)); opacity: 0; transition: opacity 140ms ease; } .public-settings-nav-button:hover { transform: translateY(-1px); border-color: rgba(96,165,250,0.24); box-shadow: 0 12px 26px rgba(15,23,42,0.08); } .public-settings-nav-button.is-active { border-color: rgba(37,99,235,0.36); background: radial-gradient(circle at top right, rgba(96,165,250,0.2), transparent 50%), linear-gradient(180deg, rgba(251,253,255,0.99), rgba(236,244,255,0.97)); box-shadow: 0 16px 34px rgba(37,99,235,0.14), inset 0 0 0 1px rgba(255,255,255,0.4); color: var(--c-accent-hi); } .public-settings-nav-button.is-active::before { opacity: 1; } [data-theme="dark"] .public-settings-nav-button.is-active { border-color: rgba(96,165,250,0.34); background: radial-gradient(circle at top right, rgba(96,165,250,0.24), transparent 50%), linear-gradient(180deg, rgba(12,20,36,0.98), rgba(9,15,28,0.96)); box-shadow: 0 16px 34px rgba(2,6,23,0.32), inset 0 0 0 1px rgba(96,165,250,0.12); color: var(--c-accent); } .public-settings-nav-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0; } .public-settings-nav-tone { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--c-muted); } .public-settings-nav-button.is-active .public-settings-nav-tone { color: var(--c-accent-hi); } [data-theme="dark"] .public-settings-nav-button.is-active .public-settings-nav-tone { color: var(--c-accent); } .public-settings-sidebar-stats { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-settings-sidebar-stats--summary { gap: 0; grid-template-columns: 1fr; } .public-settings-sidebar-stat { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 82%, transparent); } .public-settings-sidebar-stat span { color: var(--c-muted); font-size: 11px; line-height: 1.4; } .public-settings-sidebar-stat strong { font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--c-text); text-align: right; } .public-settings-sidebar-stats--summary .public-settings-sidebar-stat { padding: 10px 0; border: none; border-radius: 0; background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--c-line) 72%, transparent); } .public-settings-sidebar-stats--summary .public-settings-sidebar-stat:first-child { border-top: 1px solid color-mix(in srgb, var(--c-line) 72%, transparent); } .public-settings-sidebar-stats--summary .public-settings-sidebar-stat strong { max-width: 52%; } .public-settings-content { min-width: 0; display: grid; gap: 14px; align-content: start; width: min(100%, 980px); max-width: 980px; } .public-settings-content > * { width: 100%; box-sizing: border-box; } .public-settings-content-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: none; } [data-theme="dark"] .public-settings-content-head { border-color: var(--c-line); background: var(--c-surface); box-shadow: none; } .public-settings-content-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .public-settings-content-head-copy { min-width: 0; } .public-settings-content-head-copy h3 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--c-text); } /* Hide verbose description in compact head */ .public-settings-content-head-copy p { display: none; } .public-settings-content-head-chips { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .public-settings-content-head-chips .studio-chip { padding: 5px 10px; background: color-mix(in srgb, var(--c-panel) 88%, transparent); border-color: color-mix(in srgb, var(--c-accent) 8%, var(--c-line)); } .public-settings-menu-btn { display: none; width: 40px; height: 40px; min-width: 40px; padding: 0; justify-content: center; border-radius: 12px; } .public-settings-panel-stack { display: grid; gap: 14px; width: 100%; } .public-settings-panel-card { min-width: 0; width: 100%; box-sizing: border-box; } .public-settings-panel-card--finance { background: radial-gradient(circle at top right, rgba(244, 114, 182, 0.11), transparent 34%), radial-gradient(circle at left center, rgba(59, 130, 246, 0.08), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, white 4%), color-mix(in srgb, var(--c-surface) 92%, transparent)); border-color: color-mix(in srgb, var(--c-accent) 10%, var(--c-line)); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.56); } .public-settings-panel-card .studio-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .public-settings-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .public-settings-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .public-settings-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .public-settings-span-2 { grid-column: span 2; } .public-settings-span-3 { grid-column: span 3; } .public-settings-span-4 { grid-column: 1 / -1; } .public-settings-section-head .detail-hero-kicker { margin-bottom: 6px; } .public-settings-section-head p:empty { display: none; } /* Hide kicker in compact content head */ .public-settings-content-head-copy .detail-hero-kicker { display: none; } .public-settings-link-card { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(96,165,250,0.1), transparent 46%), color-mix(in srgb, var(--c-panel) 84%, transparent); display: grid; gap: 12px; } .public-settings-link-card--finance { border-color: color-mix(in srgb, var(--c-accent) 12%, var(--c-line)); background: radial-gradient(circle at top right, rgba(96,165,250,0.12), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 90%, white 10%), color-mix(in srgb, var(--c-surface) 92%, transparent)); } .public-access-catalog-card { position: relative; overflow: hidden; } .public-access-catalog-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,0.26), rgba(14,165,233,0)); pointer-events: none; } .public-access-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .public-access-catalog-preview { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-accent) 10%, var(--c-line)); background: radial-gradient(circle at top right, rgba(96,165,250,0.08), transparent 42%), color-mix(in srgb, var(--c-panel) 90%, transparent); } .public-access-catalog-preview-group { display: grid; gap: 8px; } .public-access-catalog-preview-chips, .public-access-contact-meta, .public-access-contact-preview { display: flex; flex-wrap: wrap; gap: 8px; } .public-access-contact-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; } .public-access-contact-card { display: grid; gap: 10px; min-width: 0; padding: 14px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, white 4%), color-mix(in srgb, var(--c-surface) 92%, transparent)); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.58); } .public-access-contact-card-head { display: grid; gap: 4px; } .public-access-contact-card strong { font-size: 12.5px; color: var(--c-text); overflow-wrap: anywhere; } .public-access-contact-card-label { color: var(--c-muted); font-size: 11px; line-height: 1.45; } .public-access-contact-card .studio-chip { padding: 4px 8px; font-size: 10px; line-height: 1.2; } [data-theme="dark"] .public-access-contact-card { background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%), linear-gradient(180deg, rgba(16, 24, 39, 0.94), rgba(10, 18, 32, 0.9)); box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .access-editor-list { display: grid; gap: 12px; } .access-editor-row { display: grid; gap: 12px; min-width: 0; padding: 16px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, white 4%), color-mix(in srgb, var(--c-surface) 92%, transparent)); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.56); } .access-editor-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .access-editor-row-head strong { font-size: 13px; color: var(--c-text); } .access-editor-selection-block { display: grid; gap: 8px; } .access-editor-empty { margin: 0; } .access-catalog-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .access-catalog-chip { position: relative; display: block; cursor: pointer; } .access-catalog-chip input { position: absolute; opacity: 0; pointer-events: none; } .access-catalog-chip-copy { display: grid; gap: 4px; min-height: 100%; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 90%, white 10%), color-mix(in srgb, var(--c-panel) 96%, transparent)); transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .access-catalog-chip:hover .access-catalog-chip-copy { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07); } .access-catalog-chip-copy strong { font-size: 13px; color: var(--c-text); } .access-catalog-chip-copy span { font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--c-muted); overflow-wrap: anywhere; } .access-catalog-chip input:checked + .access-catalog-chip-copy { border-color: rgba(37, 99, 235, 0.34); background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 40%), linear-gradient(180deg, rgba(219, 234, 254, 0.88), rgba(255, 255, 255, 0.98)); box-shadow: 0 16px 28px rgba(37, 99, 235, 0.12); } [data-theme="dark"] .access-editor-row { background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%), linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(10, 18, 32, 0.9)); box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="dark"] .access-catalog-chip-copy { border-color: rgba(148, 163, 184, 0.18); background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.86)); } [data-theme="dark"] .access-catalog-chip:hover .access-catalog-chip-copy { border-color: rgba(96, 165, 250, 0.26); box-shadow: 0 18px 30px rgba(2, 6, 23, 0.32); } [data-theme="dark"] .access-catalog-chip input:checked + .access-catalog-chip-copy { border-color: rgba(96, 165, 250, 0.3); background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 42%), linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.9)); box-shadow: 0 16px 28px rgba(15, 23, 42, 0.28); } .public-domain-card { position: relative; overflow: hidden; gap: 14px; padding: 18px; border-radius: 20px; border-color: color-mix(in srgb, var(--c-accent) 10%, var(--c-line)); background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-surface) 90%, transparent)); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.78); } .public-domain-layout-card { padding: 16px; } .public-domain-layout-card .pg-toggle-row { gap: 18px; } .public-domain-layout-card .pg-toggle-copy strong { font-size: 14px; } .public-domain-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--c-accent), #38bdf8 52%, var(--c-accent-hi)); opacity: 0.92; } .public-domain-card::after { content: ""; position: absolute; right: -52px; top: -64px; width: 168px; height: 168px; border-radius: 999px; background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); opacity: 0.28; pointer-events: none; } .public-domain-card > * { position: relative; z-index: 1; } .public-settings-link-meta { display: grid; gap: 4px; } .public-settings-link-meta strong { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--c-text); } .public-settings-link-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .public-settings-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .public-settings-link-field { min-width: 0; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-surface) 88%, transparent); color: var(--c-text); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .public-settings-link-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .public-domain-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .public-domain-summary-copy { flex: 1 1 280px; min-width: 0; display: grid; gap: 6px; } .public-domain-summary-copy strong { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; overflow-wrap: anywhere; } .public-domain-summary-copy .studio-subtitle { max-width: 52ch; font-size: 12.5px; line-height: 1.55; } .public-domain-status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 8px 13px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 700; letter-spacing: 0; } .public-domain-status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 14%, transparent); } .public-domain-status-badge--verified { color: #166534; border-color: rgba(22, 101, 52, 0.16); background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(187, 247, 208, 0.88)); } .public-domain-status-badge--warning { color: #92400e; border-color: rgba(146, 64, 14, 0.16); background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(254, 215, 170, 0.88)); } .public-domain-status-badge--draft { color: #1d4ed8; border-color: rgba(29, 78, 216, 0.16); background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(191, 219, 254, 0.88)); } .public-domain-status-badge--muted { color: #475569; border-color: rgba(71, 85, 105, 0.14); background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.88)); } .public-domain-status-badge--pending { color: var(--c-text); border-color: color-mix(in srgb, var(--c-line) 86%, transparent); background: linear-gradient(180deg, color-mix(in srgb, white 86%, transparent), color-mix(in srgb, var(--c-surface) 92%, transparent)); } .public-domain-process-note { padding: 11px 13px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--c-accent) 28%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-soft) 70%, white 18%), color-mix(in srgb, var(--c-panel) 86%, transparent)); color: color-mix(in srgb, var(--c-text) 78%, var(--c-muted)); font-size: 12px; font-weight: 500; line-height: 1.6; } .public-domain-flash { padding: 9px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: color-mix(in srgb, var(--c-panel) 88%, transparent); color: var(--c-text); font-size: 11.5px; font-weight: 600; line-height: 1.45; animation: public-domain-flash-fade 5s ease forwards; } .public-domain-flash--success { border-color: rgba(22, 101, 52, 0.16); background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(220, 252, 231, 0.88)); color: #166534; } .public-domain-flash--warning { border-color: rgba(146, 64, 14, 0.16); background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(254, 215, 170, 0.86)); color: #9a3412; } .public-domain-flash--info { border-color: rgba(29, 78, 216, 0.16); background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.88)); color: #1d4ed8; } @keyframes public-domain-flash-fade { 0%, 72% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2px); } } .public-domain-dns-card { gap: 12px; padding: 16px; border-radius: 18px; border-color: color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.1), transparent 42%), linear-gradient(180deg, color-mix(in srgb, white 88%, transparent), color-mix(in srgb, var(--c-panel) 90%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 24px rgba(15, 23, 42, 0.05); } .public-domain-dns-head { display: grid; gap: 4px; } .public-domain-dns-head strong { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; color: var(--c-text); } .public-domain-dns-head .studio-subtitle { font-size: 12px; line-height: 1.5; } .public-domain-dns-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .public-domain-card .public-settings-link-field { border-radius: 14px; border-color: color-mix(in srgb, var(--c-accent) 10%, var(--c-line)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58)), color-mix(in srgb, var(--c-surface) 90%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .public-domain-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--c-accent) 8%, var(--c-line)); } .public-domain-actions .studio-button, .public-domain-actions .studio-button-secondary, .public-domain-actions .studio-button-ghost { min-height: 42px; padding-inline: 18px; } .public-domain-actions .studio-button { box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22); } .public-domain-actions .studio-button-secondary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(191, 219, 254, 0.68)), var(--c-accent-soft); } .public-domain-actions .studio-button-ghost { background: color-mix(in srgb, var(--c-surface) 82%, transparent); } [data-theme="dark"] .public-domain-layout-card { border-color: color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 48%), linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.74)); } [data-theme="dark"] .public-access-catalog-preview { border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: radial-gradient(circle at top right, rgba(56,189,248,0.14), transparent 42%), linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.82)); } [data-theme="dark"] .public-access-contact-card { border-color: color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.84)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } [data-theme="dark"] .public-domain-card { border-color: color-mix(in srgb, var(--c-accent) 20%, var(--c-line)); background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.22), transparent 34%), linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.78)); box-shadow: 0 22px 44px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .public-domain-card::after { opacity: 0.18; } [data-theme="dark"] .public-domain-summary-copy .studio-subtitle, [data-theme="dark"] .public-domain-dns-head .studio-subtitle { color: color-mix(in srgb, var(--c-text) 68%, var(--c-muted)); } [data-theme="dark"] .public-domain-status-badge--verified { color: #86efac; border-color: rgba(34, 197, 94, 0.26); background: linear-gradient(180deg, rgba(20, 83, 45, 0.92), rgba(22, 101, 52, 0.76)); } [data-theme="dark"] .public-domain-status-badge--warning { color: #fdba74; border-color: rgba(251, 146, 60, 0.28); background: linear-gradient(180deg, rgba(124, 45, 18, 0.9), rgba(154, 52, 18, 0.74)); } [data-theme="dark"] .public-domain-status-badge--draft { color: #93c5fd; border-color: rgba(96, 165, 250, 0.28); background: linear-gradient(180deg, rgba(30, 64, 175, 0.88), rgba(29, 78, 216, 0.74)); } [data-theme="dark"] .public-domain-status-badge--muted { color: #cbd5e1; border-color: rgba(148, 163, 184, 0.2); background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(51, 65, 85, 0.8)); } [data-theme="dark"] .public-domain-status-badge--pending { color: #e2e8f0; border-color: rgba(96, 165, 250, 0.2); background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.84)); } [data-theme="dark"] .public-domain-process-note { border-color: rgba(96, 165, 250, 0.24); background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.84)); color: color-mix(in srgb, var(--c-text) 78%, var(--c-accent)); } [data-theme="dark"] .public-domain-process-note, [data-theme="dark"] .public-domain-flash, [data-theme="dark"] .public-domain-card .public-settings-link-field, [data-theme="dark"] .public-domain-dns-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .public-domain-flash { border-color: rgba(96, 165, 250, 0.18); background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.86)); color: var(--c-text); } [data-theme="dark"] .public-domain-flash--success { border-color: rgba(34, 197, 94, 0.24); background: linear-gradient(180deg, rgba(20, 83, 45, 0.92), rgba(21, 128, 61, 0.72)); color: #bbf7d0; } [data-theme="dark"] .public-domain-flash--warning { border-color: rgba(251, 146, 60, 0.26); background: linear-gradient(180deg, rgba(124, 45, 18, 0.9), rgba(154, 52, 18, 0.72)); color: #fed7aa; } [data-theme="dark"] .public-domain-flash--info { border-color: rgba(96, 165, 250, 0.24); background: linear-gradient(180deg, rgba(30, 64, 175, 0.88), rgba(30, 41, 59, 0.76)); color: #bfdbfe; } [data-theme="dark"] .public-domain-card .public-settings-link-field { border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.82)), color-mix(in srgb, var(--c-surface) 82%, transparent); color: color-mix(in srgb, var(--c-text) 96%, white 4%); } [data-theme="dark"] .public-domain-dns-card { border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 42%), linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.8)); } [data-theme="dark"] .public-domain-actions { border-top-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); } [data-theme="dark"] .public-domain-actions .studio-button { box-shadow: 0 16px 30px rgba(37, 99, 235, 0.2); } [data-theme="dark"] .public-domain-actions .studio-button-secondary { color: #bfdbfe; border-color: rgba(96, 165, 250, 0.34); background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(29, 78, 216, 0.24)); } [data-theme="dark"] .public-domain-actions .studio-button-ghost { color: color-mix(in srgb, var(--c-text) 92%, white 8%); border-color: rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.68); } .public-settings-actions { margin-top: 2px; flex-wrap: wrap; } .public-settings-card { min-width: 0; } .public-settings-about-input { min-height: 112px; resize: vertical; } .public-settings-reference-list { display: flex; flex-direction: column; gap: 12px; } .public-settings-reference-row { display: grid; grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.65fr); gap: 12px; padding: 14px; border: 1px solid var(--c-border); border-radius: 16px; background: var(--surface-2); } .public-settings-verification-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(96,165,250,0.1), transparent 44%), color-mix(in srgb, var(--c-panel) 86%, transparent); } .public-settings-verification-status-copy { display: grid; gap: 4px; } .public-settings-verification-status-copy strong { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--c-text); } .public-settings-verification-input { min-height: 160px; } .public-settings-verification-upload-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .public-settings-verification-doc-list { display: grid; gap: 8px; margin-top: 12px; } .public-settings-verification-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 84%, transparent); } .public-settings-verification-doc strong { font-size: 12px; font-weight: 650; color: var(--c-text); word-break: break-word; } .public-settings-verification-doc span { font-size: 11px; color: var(--c-muted); white-space: nowrap; } .public-embed-toggle-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-embed-code-block { overflow: auto; } .public-settings-inline-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; } .public-settings-inline-copy-field { min-width: 0; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-surface) 88%, transparent); } .public-settings-inline-copy-field code { display: block; overflow: hidden; color: var(--c-text); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; } .public-settings-guide-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .public-settings-dns-card { display: grid; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(37,99,235,0.09), transparent 42%), color-mix(in srgb, var(--c-panel) 84%, transparent); } .public-settings-guide-step { display: grid; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 82%, transparent); } .public-settings-guide-step strong { font-size: 13px; font-weight: 650; color: var(--c-text); } .public-settings-guide-step span:last-child { color: var(--c-muted); font-size: 12px; line-height: 1.55; } .public-settings-guide-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .public-settings-guide-note { display: grid; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-surface) 86%, transparent); } .public-settings-guide-note strong { font-size: 12px; font-weight: 650; color: var(--c-text); } .public-settings-guide-note span { color: var(--c-muted); font-size: 12px; line-height: 1.55; } .studio-prose { color: var(--c-text); line-height: 1.72; opacity: 0.88; } .conversation-wiki-panel { display: grid; gap: 12px; } .conversation-wiki-heading { margin-bottom: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .conversation-wiki-heading-actions { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--c-line); border-radius: 999px; background: color-mix(in srgb, var(--c-panel) 72%, transparent); flex-shrink: 0; } .conversation-wiki-toolbar-button { font-size: 11px; padding: 6px 10px; min-height: 32px; } .conversation-wiki-input-field { margin-bottom: 0; } .conversation-wiki-input-row { gap: 8px; align-items: stretch; } .conversation-wiki-input-row input { flex: 1 1 auto; } .conversation-wiki-summary { gap: 8px; } .conversation-wiki-actions { margin-top: 2px; gap: 8px; flex-wrap: wrap; } .conversation-wiki-pages { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--c-line); display: grid; gap: 22px; } .conversation-wiki-page { display: grid; gap: 10px; padding: 0 0 24px; border-bottom: 1px solid var(--c-line); scroll-margin-top: 110px; } .conversation-wiki-page:last-child { padding-bottom: 0; border-bottom: none; } .conversation-wiki-page-head { display: grid; gap: 6px; } .conversation-wiki-page-copy { display: grid; gap: 2px; min-width: 0; } .conversation-wiki-page-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); } .conversation-wiki-page-title { margin: 0; font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 21px); font-weight: 500; color: var(--c-text); letter-spacing: -0.025em; line-height: 1.06; } .conversation-wiki-page-meta { margin: 0; color: var(--c-muted); font-family: var(--font-display); font-size: 11.5px; line-height: 1.35; font-style: italic; } .conversation-wiki-page-body { display: grid; gap: 16px; width: 100%; max-width: min(76ch, 100%); margin: 0 auto; } .conversation-wiki-page-body--article { padding-top: 2px; } .conversation-wiki-prose { display: grid; gap: 18px; } .conversation-wiki-paragraph { display: grid; gap: 12px; } .conversation-wiki-prose p { margin: 0; color: var(--c-text); font-family: var(--font-display); font-size: 16.5px; line-height: 1.72; letter-spacing: -0.008em; } .conversation-wiki-prose .pg-md { gap: 12px; } .conversation-wiki-prose .pg-md-p, .conversation-wiki-prose .pg-md-list li, .conversation-wiki-prose .pg-md-blockquote { font-family: var(--font-display); font-size: 16.5px; line-height: 1.72; letter-spacing: -0.008em; } .conversation-wiki-prose .pg-md-h { margin: 8px 0 2px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; } .conversation-wiki-prose .pg-md-blockquote { padding: 8px 14px; border-left-width: 2px; background: color-mix(in srgb, var(--c-accent-soft) 72%, transparent); font-style: italic; } .conversation-wiki-prose .pg-inline-code { font-size: 0.92em; } .conversation-wiki-empty-note { margin: 0; color: var(--c-muted); font-family: var(--font-display); font-size: 12.5px; line-height: 1.6; font-style: italic; } .conversation-wiki-header { padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 16px; background: var(--c-panel-strong); box-shadow: none; } .conversation-wiki-header--disabled { align-items: center; } .conversation-wiki-header-copy { display: grid; gap: 2px; max-width: 76ch; } .conversation-wiki-header-copy h2 { margin: 0; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.025em; line-height: 1.1; } .conversation-wiki-header-copy p { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.45; } .conversation-wiki-header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0; justify-content: flex-end; color: var(--c-muted); font-size: 11px; line-height: 1.4; } .conversation-wiki-header-meta span { display: inline-flex; align-items: center; } .conversation-wiki-header-meta span + span::before { content: "·"; margin: 0 8px; color: var(--c-muted); } .conversation-wiki-mobile-trigger, .conversation-wiki-mobile-backdrop, .conversation-wiki-index-drawer-head, .conversation-wiki-index-drawer-close { display: none; } .conversation-wiki-layout { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 18px; align-items: start; } .conversation-wiki-index { min-height: 0; padding: 16px; border: 1px solid var(--c-line); border-radius: 22px; background: radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 44%), linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,249,255,0.88)); box-shadow: 0 14px 34px rgba(15,23,42,0.06); display: grid; grid-template-rows: auto auto auto auto auto; gap: 12px; position: sticky; top: calc(74px + env(safe-area-inset-top, 0px)); max-height: min(76vh, 860px); backdrop-filter: blur(18px); } [data-theme="dark"] .conversation-wiki-index { background: radial-gradient(circle at top right, rgba(96,165,250,0.12), transparent 44%), linear-gradient(180deg, rgba(15,23,42,0.94), rgba(11,18,32,0.92)); box-shadow: 0 20px 44px rgba(2,6,23,0.24); } .conversation-wiki-index.is-compact { align-content: start; } .conversation-wiki-article { min-height: 540px; padding: 22px 24px 26px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251,252,255,0.96)), var(--c-panel-strong); box-shadow: none; } .conversation-wiki-search { gap: 8px; } .conversation-wiki-search span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .conversation-wiki-search input { width: 100%; } .conversation-wiki-index-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--c-line); border-radius: 14px; background: color-mix(in srgb, var(--c-panel) 72%, transparent); color: var(--c-muted); font-size: 11px; line-height: 1.4; } .conversation-wiki-index-list { display: grid; gap: 10px; align-content: start; min-height: 0; max-height: min(52vh, 640px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-gutter: stable; } .conversation-wiki-index-list.is-compact { max-height: none; overflow: visible; padding-right: 0; } .conversation-wiki-index-item { position: relative; width: 100%; text-align: left; padding: 12px 12px 12px 14px; border: 1px solid var(--c-line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(244,247,255,0.68)), var(--c-panel); display: grid; gap: 6px; box-shadow: 0 8px 24px rgba(15,23,42,0.04); transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } [data-theme="dark"] .conversation-wiki-index-item { background: linear-gradient(180deg, rgba(20,29,49,0.82), rgba(12,20,36,0.74)), var(--c-panel); box-shadow: 0 12px 24px rgba(0,0,0,0.18); } .conversation-wiki-index-item::before { content: ""; position: absolute; left: 8px; top: 11px; bottom: 11px; width: 2px; border-radius: 999px; background: transparent; transition: background 160ms ease, transform 160ms ease, opacity 160ms ease; } .conversation-wiki-index-item:last-child { padding-bottom: 12px; } .conversation-wiki-index-item:hover { border-color: rgba(37,99,235,0.24); background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,247,255,0.8)), var(--c-panel-strong); box-shadow: 0 14px 28px rgba(15,23,42,0.08); opacity: 1; transform: translateY(-1px); } [data-theme="dark"] .conversation-wiki-index-item:hover { background: linear-gradient(180deg, rgba(24,36,60,0.94), rgba(15,23,42,0.88)), var(--c-panel-strong); } .conversation-wiki-index-item.is-active { border-color: rgba(37,99,235,0.22); background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(255,255,255,0.92)), var(--c-panel-strong); box-shadow: 0 16px 28px rgba(37,99,235,0.12); } [data-theme="dark"] .conversation-wiki-index-item.is-active { background: linear-gradient(180deg, rgba(30,64,175,0.22), rgba(15,23,42,0.92)), var(--c-panel-strong); } .conversation-wiki-index-item.is-active::before { background: var(--c-accent); transform: scaleY(1.02); } .conversation-wiki-index-name { font-size: 13px; font-weight: 600; letter-spacing: -0.012em; color: var(--c-text); line-height: 1.3; padding-left: 6px; } .conversation-wiki-index-id { font-family: var(--studio-code); font-size: 10px; color: var(--c-muted); letter-spacing: 0.02em; } .conversation-wiki-index-preview { color: var(--c-text); opacity: 0.78; font-size: 11.5px; line-height: 1.46; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: 6px; } .conversation-wiki-index-preview.is-empty { color: var(--c-muted); font-style: italic; } .conversation-wiki-index-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; color: var(--c-muted); font-size: 10.5px; line-height: 1.45; padding-left: 6px; } .conversation-wiki-index-meta span { display: inline-flex; align-items: center; } .conversation-wiki-index-item.is-active .conversation-wiki-index-name { color: var(--c-accent-hi); } .conversation-wiki-index-item.is-active .conversation-wiki-index-preview { opacity: 0.92; } .conversation-wiki-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px 0; border-top: 1px solid var(--c-line); } .conversation-wiki-pagination-page { color: var(--c-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .conversation-wiki-pagination-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .conversation-wiki-article { display: grid; gap: 20px; } .conversation-wiki-article-kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-accent-hi); } .conversation-wiki-article-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); } .conversation-wiki-article-meta { color: var(--c-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; } .conversation-wiki-article-actions { display: inline-flex; align-items: center; gap: 6px; justify-self: end; } .conversation-wiki-pages { display: grid; gap: 24px; } [data-theme="dark"] .conversation-wiki-article { background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(11,18,32,0.96)), var(--c-panel-strong); } .conversation-wiki-icon-action { appearance: none; width: 30px; height: 30px; padding: 0; border: none; background: transparent; color: var(--c-muted); display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; transition: color 140ms ease, background 140ms ease, transform 140ms ease, opacity 140ms ease; } .conversation-wiki-icon-action:hover { color: var(--c-text); background: color-mix(in srgb, var(--c-panel) 72%, transparent); transform: translateY(-1px); } .conversation-wiki-icon-action:disabled { opacity: 0.36; cursor: default; transform: none; background: transparent; } .conversation-wiki-icon-action--danger:hover { color: var(--c-danger, #b42318); } .conversation-wiki-toc { display: grid; gap: 10px; max-width: 32rem; padding: 0 0 14px; border-bottom: 1px solid var(--c-line); } .conversation-wiki-toc-title { color: var(--c-text); font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.02em; } .conversation-wiki-toc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .conversation-wiki-toc-link { appearance: none; width: 100%; padding: 3px 0; border: none; background: transparent; color: var(--c-text); display: inline-flex; align-items: baseline; gap: 10px; text-align: left; font-family: var(--font-display); font-size: 14px; line-height: 1.35; cursor: pointer; } .conversation-wiki-toc-link:hover { color: var(--c-accent-hi); } .conversation-wiki-toc-number { flex: 0 0 auto; min-width: 18px; color: var(--c-muted); font-size: 11px; font-family: var(--font-body); } .conversation-wiki-summary-code { font-family: var(--studio-code); font-size: 11px; word-break: break-all; } .conversation-wiki-empty-article { min-height: 260px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--c-line); border-radius: 16px; background: rgba(255,255,255,0.28); } [data-theme="dark"] .conversation-wiki-empty-article { background: rgba(15,23,42,0.24); } /* Hero */ .detail-hero { position: relative; padding: 0; overflow: hidden; } .detail-hero-band { height: 6px; width:100%; background: var(--studio-avatar-bg, var(--av0-bg)); opacity:.8; } .detail-hero-body { padding: 22px 26px 20px; display: flex; gap: 20px; align-items: flex-start; } .detail-hero-mobile-menu { display: none; position: absolute; top: 16px; right: 16px; z-index: 3; } .detail-hero-menu-toggle { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.82); border: 1px solid var(--c-line); color: var(--c-text); box-shadow: var(--shadow-sm); backdrop-filter: blur(18px); } .detail-hero-menu-panel { margin-top: 8px; width: min(228px, calc(100vw - 36px)); padding: 8px; display: grid; gap: 6px; border-radius: 16px; border: 1px solid var(--c-line); background: var(--c-panel-strong); box-shadow: var(--shadow-md); } .detail-hero-menu-panel--desktop { position: absolute; top: calc(100% + 8px); right: 0; margin-top: 0; width: min(248px, calc(100vw - 40px)); z-index: 8; } .detail-hero-menu-section { display: grid; gap: 6px; } .detail-hero-menu-label { padding: 4px 10px 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .detail-hero-menu-divider { height: 1px; margin: 2px 4px; background: color-mix(in srgb, var(--c-line) 88%, transparent); } .detail-hero-menu-item { appearance: none; width: 100%; border: 1px solid transparent; background: transparent; color: var(--c-text); border-radius: 12px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; font-size: 13px; font-weight: 600; line-height: 1.35; } .detail-hero-menu-item:hover { background: var(--c-panel); border-color: var(--c-line); } .detail-hero-menu-item--danger { color: var(--c-danger); } .detail-hero-menu-item--primary { background: var(--c-accent-soft); border-color: rgba(37,99,235,0.18); color: var(--c-accent-hi); } .detail-hero-menu-item--soft { background: color-mix(in srgb, var(--c-surface) 82%, transparent); border-color: color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); } .detail-hero-menu-item--primary:hover { background: rgba(37,99,235,0.14); border-color: rgba(37,99,235,0.24); } [data-theme="dark"] .detail-hero-menu-toggle { background: rgba(19,22,27,0.86); } [data-theme="dark"] .detail-hero-menu-item--primary { color: var(--c-accent); } [data-theme="dark"] .detail-hero-menu-item--soft { background: rgba(15, 23, 42, 0.9); border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); } .detail-hero-avatar { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; flex-shrink:0; background: var(--studio-avatar-bg, var(--av0-bg)); box-shadow: inset 0 0 0 1.5px var(--studio-avatar-ring, var(--av0-ring)), var(--studio-avatar-shadow, var(--av0-glow)); overflow: hidden; } .detail-hero-info { flex:1; min-width:0; } .detail-hero-kicker { font-size:10.5px; color:var(--c-muted); text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; } .detail-hero-name { margin:0 0 4px; font-family:var(--font-display); font-size:clamp(22px,3vw,32px); letter-spacing:-.04em; line-height:1.05; } .detail-hero-role { margin:0 0 8px; color:var(--c-muted); font-size:13.5px; } .detail-hero-desc { margin:0 0 14px; font-size:13.5px; line-height:1.65; max-width:68ch; opacity:.85; } .detail-hero-chips { display:flex; flex-wrap:wrap; gap:6px; } .detail-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; flex-shrink: 0; align-self: flex-start; min-width: 200px; } .detail-hero-stat-cell { display: flex; flex-direction: column; gap: 5px; padding: 14px 18px; background: var(--c-panel-strong); } .detail-hero-stat-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); } .detail-hero-stat-val { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--c-text); } .detail-hero-stat-val--date { font-size: 13px; font-weight: 600; letter-spacing: -.01em; } /* Stat bar */ .detail-stat-bar { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px !important; align-items: stretch; } .detail-stat-item { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px; min-height: 108px; border-radius: 18px; border: 1px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, transparent), var(--c-panel)); box-shadow: var(--shadow-sm); overflow: hidden; } .detail-stat-item::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hi)); } .detail-stat-item::after { content: none; } .detail-stat-val { position: relative; z-index: 1; font-size: clamp(21px, 2vw, 29px); font-weight: 560; letter-spacing: -.04em; color: var(--c-text); line-height: 1.05; white-space: normal; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; } .detail-stat-lbl { position: relative; z-index: 1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); white-space: normal; overflow-wrap: anywhere; } .detail-stat-sep { display: none; } /* ── Usage stat strip (compact, inside project cards) ──────── */ .usage-stat-strip { display: flex; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--c-line); gap: 0; } .usage-stat-cell { display: flex; flex-direction: column; gap: 3px; padding: 4px 16px; min-width: 0; } .usage-stat-cell:first-child { padding-left: 0; } .usage-stat-val { font-size: 13px; font-weight: 560; letter-spacing: -.01em; color: var(--c-text); line-height: 1; white-space: nowrap; } .usage-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); white-space: nowrap; } .usage-stat-sep { width: 1px; height: 26px; background: var(--c-line); flex-shrink: 0; } @media (max-width: 640px) { .usage-stat-strip { gap: 8px 0; } .usage-stat-cell { min-width: 50%; padding: 4px 0; } .usage-stat-sep { display: none; } .conversation-wiki-mobile-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; } .conversation-wiki-mobile-backdrop { display: block; position: fixed; inset: 0; z-index: 74; border: none; background: rgba(15,23,42,0.44); backdrop-filter: blur(2px); } .conversation-wiki-index { position: fixed; top: 8px; left: 8px; bottom: 8px; z-index: 75; width: min(360px, calc(100vw - 16px)); min-height: auto; max-height: none; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, var(--c-panel-strong), var(--c-panel)); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: 24px 0 48px rgba(15,23,42,0.16); transform: translateX(-104%); transition: transform 180ms ease; } [data-theme="dark"] .conversation-wiki-index { box-shadow: 28px 0 54px rgba(2,6,23,0.42); } .conversation-wiki-index.is-open { transform: translateX(0); } .conversation-wiki-index-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .conversation-wiki-index-drawer-copy { display: grid; gap: 4px; } .conversation-wiki-index-drawer-copy strong { color: var(--c-text); line-height: 1.2; } .conversation-wiki-index-drawer-close { display: inline-flex; align-items: center; justify-content: center; padding: 8px; } .conversation-wiki-header { padding: 10px 12px; grid-template-columns: 1fr; align-items: start; } .conversation-wiki-heading { flex-direction: column; align-items: stretch; } .conversation-wiki-heading-actions { align-self: flex-start; } .conversation-wiki-header-meta { justify-content: flex-start; } .conversation-wiki-layout { grid-template-columns: 1fr; } .conversation-wiki-index, .conversation-wiki-article { padding: 14px; } .conversation-wiki-index-list { max-height: none; padding-right: 2px; } .conversation-wiki-editor-grid { grid-template-columns: 1fr; } .conversation-wiki-page { gap: 12px; padding-bottom: 18px; } .conversation-wiki-page-body { gap: 12px; } .conversation-wiki-index-status, .conversation-wiki-pagination { align-items: flex-start; flex-direction: column; } .conversation-wiki-article-head { grid-template-columns: 1fr; gap: 6px; } .conversation-wiki-article-actions { justify-self: start; } .conversation-wiki-toc { max-width: none; } } @media (max-width: 380px) { .conversation-wiki-prose p { font-size: 15px; } } /* Source cards */ .src-card { padding:13px; border-radius:var(--r-sm); border:1px solid var(--c-line); background:var(--c-panel); transition: border-color 130ms ease; min-width:0; overflow:hidden; } .src-card:hover { border-color: rgba(37,99,235,0.3); } .src-card-top { display:flex; align-items:flex-start; gap:10px; min-width:0; } .src-type-badge { flex-shrink:0; padding:3px 8px; border-radius:var(--r-xs); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--c-accent-soft); color:var(--c-accent-hi); border:1px solid rgba(37,99,235,0.18); white-space:nowrap; } [data-theme="dark"] .src-type-badge { color:var(--c-accent); } .src-card-info { flex:1; min-width:0; overflow:hidden; } .src-card-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .src-card-target { font-size:11px; color:var(--c-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); } .src-card-meta { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .src-card-meta .studio-sync-state-chip { max-width: 260px; } .src-card-btns { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; } .src-btn { font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--r-xs); background:transparent; border:1px solid var(--c-line-strong); color:var(--c-muted); cursor:pointer; white-space:nowrap; transition:background 130ms ease, color 130ms ease, border-color 130ms ease; } .src-btn:hover { background:var(--c-panel-strong); color:var(--c-text); } .src-btn:disabled { opacity:.45; cursor:not-allowed; } .src-btn.danger:hover { background:var(--c-danger-soft); color:var(--c-danger); border-color:rgba(220,38,38,0.25); } .src-btn.confirming { background:var(--c-danger-soft); color:var(--c-danger); border-color:rgba(220,38,38,0.3); } .src-card-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; padding-top:9px; border-top:1px solid var(--c-line); } /* Integration rows */ .integ-row { display:flex; align-items:baseline; gap:10px; padding:9px 11px; border-radius:var(--r-xs); background:var(--c-panel); border:1px solid var(--c-line); overflow:hidden; min-width:0; } .integ-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted); flex-shrink:0; min-width:52px; } .integ-val { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; } .detail-sidebar-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .detail-sidebar-tab { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 14px 15px; border-radius: 16px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .detail-sidebar-tab::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, var(--c-accent), var(--c-accent-hi)); opacity: 0; transition: opacity .18s ease; } .detail-sidebar-tab span { font-size: 13px; font-weight: 700; letter-spacing: -.02em; } .detail-sidebar-tab small { font-size: 12px; line-height: 1.45; color: var(--c-muted); } .detail-sidebar-tab.is-active { border-color: rgba(37,99,235,0.34); background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(37,99,235,0.03)), var(--c-panel-strong); box-shadow: 0 16px 34px rgba(37,99,235,0.12); transform: translateY(-1px); } .detail-sidebar-tab.is-active::before { opacity: 1; } .detail-sidebar-tab.is-active span { color: var(--c-accent-hi); } [data-theme="dark"] .detail-sidebar-tab.is-active span { color: var(--c-accent); } /* Run rows */ .run-row { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--c-line); } .run-row:last-child { border-bottom:none; padding-bottom:0; } .run-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--c-subtle); } .run-status-dot.good { background:var(--c-good); } .run-status-dot.bad { background:var(--c-danger); } .run-info { flex:1; min-width:0; } .run-label { font-size:13px; font-weight:500; } .run-label .studio-sync-progress-note { display: inline-block; max-width: 240px; vertical-align: -1px; } .run-meta { font-size:11.5px; color:var(--c-muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Project workspace */ .project-workspace-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding-bottom: 2px; } .project-workspace-link { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; background: transparent; color: var(--c-muted); border-radius: var(--r-pill); padding: 7px 11px; font-size: 11.5px; font-weight: 650; transition: background 130ms ease, color 130ms ease, border-color 130ms ease, transform 130ms ease, box-shadow 130ms ease; } .project-workspace-link:hover { color: var(--c-text); background: var(--c-panel); } .project-workspace-link.active { color: var(--c-accent-hi); background: color-mix(in srgb, var(--c-accent-soft) 82%, transparent); border-color: rgba(37,99,235,0.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); } [data-theme="dark"] .project-workspace-link.active { color: var(--c-accent); border-color: rgba(96,165,250,0.22); box-shadow: inset 0 0 0 1px rgba(96,165,250,0.08); } .project-section-header { margin-bottom: 10px; } .project-workspace-main { width: 100%; max-width: 1280px; min-width: 0; } .project-workspace-main > .list-header, .project-workspace-main > .studio-section, .project-workspace-main > .project-workspace-nav { min-width: 0; } .project-overview-header { align-items: flex-end; padding-bottom: 2px; } .project-overview-meta { max-width: 72ch; } .project-overview-actions { align-items: center; } .studio-main-workspace .list-header { padding: 8px 0 4px; gap: 14px; } .studio-main-workspace .list-header-title { font-size: clamp(24px, 3vw, 28px); } .studio-main-workspace .list-header-sub { font-size: 12.5px; max-width: 72ch; } .studio-main-workspace .list-header-right { gap: 8px; } .workspace-compact-card { padding: 14px 16px; } .workspace-compact-card .studio-card-title { margin-bottom: 10px; } .workspace-compact-card .studio-card-title h3, .workspace-compact-card .studio-card-title h4 { font-size: 14px; } .workspace-compact-card .studio-card-title p { font-size: 11.5px; } .workspace-stat-strip { padding: 6px 0 0; border-top: none; } .workspace-stat-strip .usage-stat-cell { gap: 2px; padding: 3px 14px; } .workspace-stat-strip .usage-stat-val { font-size: 12.5px; } .workspace-stat-strip .usage-stat-lbl { font-size: 9.5px; } .workspace-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .workspace-action-card { min-width: 0; padding: 12px 13px; gap: 4px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 96%, white 4%), color-mix(in srgb, var(--c-surface) 94%, transparent)); transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .workspace-action-card:hover { border-color: color-mix(in srgb, var(--c-accent) 24%, var(--c-line)); background: linear-gradient(180deg, var(--c-panel-strong), color-mix(in srgb, var(--c-surface) 94%, transparent)); box-shadow: 0 10px 24px rgba(15,23,42,0.07); } .workspace-action-card span { font-size: 9.5px; font-weight: 560; } .workspace-action-card > span:first-child { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .workspace-action-card .workspace-action-meta { color: var(--c-muted); font-size: 12px; font-weight: 480; letter-spacing: 0; line-height: 1.35; text-transform: none; } @media (max-width: 900px) { .workspace-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .workspace-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 11.5px; line-height: 1.45; } .workspace-identity-readiness { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; } .workspace-identity-callout { display: grid; gap: 6px; min-width: 0; padding: 14px 15px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 48%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 92%, white 8%), var(--c-panel)); box-shadow: var(--shadow-sm); } .workspace-identity-callout span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .workspace-identity-callout strong { font-size: 14px; line-height: 1.3; letter-spacing: -.02em; color: var(--c-text); } .workspace-identity-callout small { font-size: 11.5px; line-height: 1.55; color: var(--c-muted); min-width: 0; overflow-wrap: anywhere; } .workspace-identity-callout.is-good { border-color: rgba(15,118,110,0.22); background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 44%), linear-gradient(180deg, rgba(236, 253, 245, 0.94), rgba(255,255,255,0.9)); } .workspace-identity-callout.is-warn { border-color: rgba(217,119,6,0.2); background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 42%), linear-gradient(180deg, rgba(255, 251, 235, 0.94), rgba(255,255,255,0.9)); } .workspace-identity-callout.is-bad { border-color: rgba(225,29,72,0.2); background: radial-gradient(circle at top right, rgba(244, 63, 94, 0.16), transparent 42%), linear-gradient(180deg, rgba(255, 241, 242, 0.95), rgba(255,255,255,0.9)); } .workspace-identity-callout.is-neutral { border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); } .workspace-identity-warning { display: grid; gap: 4px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(225,29,72,0.18); background: linear-gradient(180deg, rgba(255, 241, 242, 0.96), rgba(255,255,255,0.92)); box-shadow: var(--shadow-sm); } .workspace-identity-warning strong { font-size: 12px; color: var(--c-danger); } .workspace-identity-warning span { font-size: 11.5px; line-height: 1.55; color: color-mix(in srgb, var(--c-text) 72%, var(--c-danger)); min-width: 0; overflow-wrap: anywhere; } .workspace-identity-field-note { display: grid; gap: 6px; margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--c-muted); min-width: 0; overflow-wrap: anywhere; } .workspace-identity-readonly { display: grid; gap: 4px; min-height: 44px; min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 88%, white 12%), var(--c-panel)); } .workspace-identity-readonly strong { font-size: 12.5px; color: var(--c-text); } .workspace-identity-readonly span { font-size: 11.5px; line-height: 1.5; color: var(--c-muted); overflow-wrap: anywhere; } .workspace-identity-advanced { margin-top: 14px; min-width: 0; padding: 14px 15px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 92%, white 8%), var(--c-panel)); box-shadow: var(--shadow-sm); } .workspace-identity-advanced summary { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text); } .workspace-identity-advanced[open] summary { margin-bottom: 10px; } .workspace-identity-advanced-copy { margin-bottom: 12px; font-size: 11.5px; line-height: 1.55; color: var(--c-muted); overflow-wrap: anywhere; } .workspace-runtime-validation { display: grid; gap: 12px; margin-bottom: 12px; padding: 14px 15px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 92%, white 8%), var(--c-panel)); box-shadow: var(--shadow-sm); } .workspace-runtime-validation.is-passing { border-color: rgba(15,118,110,0.22); } .workspace-runtime-validation.is-blocked { border-color: rgba(225,29,72,0.18); } .workspace-runtime-validation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .workspace-runtime-validation-head strong { font-size: 13px; letter-spacing: -.02em; color: var(--c-text); } .workspace-runtime-validation-blockers { display: flex; flex-wrap: wrap; gap: 8px; } .workspace-runtime-validation-blocker { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(225,29,72,0.08); border: 1px solid rgba(225,29,72,0.14); color: var(--c-danger); font-size: 11px; font-weight: 650; } .workspace-runtime-validation-warnings { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 88%, white 12%), var(--c-panel)); font-size: 11.5px; line-height: 1.55; color: var(--c-muted); } .workspace-runtime-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .workspace-runtime-check { display: grid; gap: 4px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); } .workspace-runtime-check span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .workspace-runtime-check strong { font-size: 12px; line-height: 1.45; color: var(--c-text); } .workspace-runtime-check.is-ok { border-color: rgba(15,118,110,0.18); } .workspace-runtime-check.is-failed { border-color: rgba(225,29,72,0.14); } .workspace-setup-panel { display: grid; gap: 14px; margin-bottom: 14px; min-width: 0; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 94%, white 6%), var(--c-panel)); box-shadow: var(--shadow-sm); } .workspace-setup-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; flex-wrap: wrap; } .workspace-setup-panel-head strong { display: block; font-size: 15px; letter-spacing: -.02em; color: var(--c-text); } .workspace-setup-panel-head p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--c-muted); overflow-wrap: anywhere; } .workspace-setup-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .workspace-setup-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .workspace-setup-fact { display: grid; gap: 4px; min-width: 0; padding: 12px 13px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 90%, white 10%), var(--c-panel)); } .workspace-setup-fact span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .workspace-setup-fact strong { font-size: 12.5px; line-height: 1.5; color: var(--c-text); word-break: break-word; } .workspace-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .workspace-setup-grid--compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .workspace-setup-card { display: grid; gap: 12px; min-width: 0; padding: 14px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(148, 163, 184, 0.08), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 92%, white 8%), color-mix(in srgb, var(--c-panel-strong) 88%, white 12%)); } .workspace-setup-card-head { display: grid; gap: 3px; } .workspace-setup-card-head strong { font-size: 13px; color: var(--c-text); } .workspace-setup-card-head span { font-size: 11px; line-height: 1.5; color: var(--c-muted); overflow-wrap: anywhere; } .workspace-setup-list, .workspace-setup-bullet-list { display: grid; gap: 8px; min-width: 0; } .workspace-setup-list-item, .workspace-setup-bullet-item { display: grid; gap: 10px; min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); } .workspace-setup-list-item { grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; } .workspace-setup-bullet-item { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .workspace-setup-list-item.is-ready { border-color: rgba(15,118,110,0.18); } .workspace-setup-list-item.is-pending { border-color: rgba(217,119,6,0.18); } .workspace-setup-list-copy { display: grid; gap: 3px; min-width: 0; } .workspace-setup-list-copy strong, .workspace-setup-bullet-item { font-size: 12px; line-height: 1.5; color: var(--c-text); overflow-wrap: anywhere; } .workspace-setup-list-copy span { font-size: 11px; line-height: 1.55; color: var(--c-muted); overflow-wrap: anywhere; } .workspace-setup-list-chip { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; flex: 0 0 auto; justify-self: end; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 10%, white); color: var(--c-text); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .workspace-setup-empty { min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); color: var(--c-muted); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; } .workspace-setup-bullet-item::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-good) 80%, white 20%)); flex: 0 0 auto; } .workspace-setup-code-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .workspace-setup-code { overflow: hidden; min-width: 0; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94)), linear-gradient(180deg, var(--c-panel), var(--c-panel)); box-shadow: var(--shadow-sm); } .workspace-setup-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.82); } .workspace-setup-code-head span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(226, 232, 240, 0.78); min-width: 0; overflow-wrap: anywhere; } .workspace-setup-code pre { margin: 0; padding: 12px; overflow-x: auto; color: #dbeafe; font-size: 11px; line-height: 1.6; font-family: var(--font-mono); } .workspace-identity-callout code, .workspace-identity-warning code, .workspace-identity-field-note code, .workspace-identity-readonly code, .workspace-setup-fact code, .workspace-setup-list-copy code, .workspace-setup-empty code, .workspace-ops-list-item code, .workspace-ops-signal strong code { display: inline; padding: 2px 6px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: color-mix(in srgb, var(--c-accent-soft) 42%, white 58%); color: color-mix(in srgb, var(--c-accent-hi) 86%, var(--c-text)); white-space: normal; overflow-wrap: anywhere; word-break: break-word; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .workspace-setup-fact strong, .workspace-setup-list-copy strong, .workspace-setup-list-copy span, .workspace-setup-bullet-item, .workspace-ops-list-item, .workspace-ops-panel-head p, .workspace-ops-signal strong { min-width: 0; overflow-wrap: anywhere; } .workspace-ops-panel { display: grid; gap: 14px; margin-bottom: 14px; min-width: 0; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c-accent) 20%, var(--c-line)); background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 38%), radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.08), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 94%, white 6%), var(--c-panel)); box-shadow: var(--shadow-sm); } .workspace-ops-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; flex-wrap: wrap; } .workspace-ops-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .workspace-ops-panel-head strong { display: block; font-size: 15px; letter-spacing: -.02em; color: var(--c-text); } .workspace-ops-panel-head p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--c-muted); } .workspace-ops-signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .workspace-ops-signal { display: grid; gap: 4px; min-width: 0; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 92%, white 8%), color-mix(in srgb, var(--c-panel-strong) 88%, white 12%)); } .workspace-ops-signal.is-good { border-color: rgba(15,118,110,0.18); } .workspace-ops-signal.is-warn { border-color: rgba(217,119,6,0.18); } .workspace-ops-signal.is-bad { border-color: rgba(225,29,72,0.18); } .workspace-ops-signal span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .workspace-ops-signal strong { font-size: 12.5px; line-height: 1.5; color: var(--c-text); } .workspace-ops-list { display: grid; gap: 8px; } .workspace-ops-list-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); font-size: 11.5px; line-height: 1.6; color: var(--c-text); } .workspace-ops-list-item::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: linear-gradient(135deg, var(--c-good), var(--c-accent)); flex: 0 0 auto; } .workspace-ops-support { display: grid; gap: 10px; } .workspace-ops-support-links { display: flex; flex-wrap: wrap; gap: 8px; } .workspace-ops-support-links a { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: color-mix(in srgb, var(--c-panel) 92%, white 8%); color: var(--c-text); font-size: 11px; font-weight: 650; text-decoration: none; } [data-theme="dark"] .workspace-ops-panel, [data-theme="dark"] .workspace-ops-signal, [data-theme="dark"] .workspace-ops-list-item { background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 40%), linear-gradient(180deg, rgba(24, 34, 55, 0.96), rgba(10, 16, 30, 0.98)); border-color: rgba(94, 234, 212, 0.12); box-shadow: 0 20px 42px rgba(2, 6, 23, 0.4); } [data-theme="dark"] .workspace-ops-support-links a { background: linear-gradient(180deg, rgba(19, 28, 46, 0.96), rgba(10, 16, 30, 0.98)); border-color: rgba(96, 165, 250, 0.16); } [data-theme="dark"] .workspace-identity-callout, [data-theme="dark"] .workspace-identity-readonly, [data-theme="dark"] .workspace-identity-advanced, [data-theme="dark"] .workspace-runtime-validation, [data-theme="dark"] .workspace-setup-panel, [data-theme="dark"] .workspace-setup-card, [data-theme="dark"] .workspace-setup-fact, [data-theme="dark"] .workspace-setup-list-item, [data-theme="dark"] .workspace-setup-bullet-item, [data-theme="dark"] .workspace-setup-empty { background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%), linear-gradient(180deg, rgba(24, 34, 55, 0.96), rgba(10, 16, 30, 0.98)); border-color: rgba(96, 165, 250, 0.14); box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42); } [data-theme="dark"] .workspace-identity-callout.is-good { background: radial-gradient(circle at top right, rgba(45, 212, 191, 0.2), transparent 42%), linear-gradient(180deg, rgba(6, 78, 59, 0.52), rgba(10, 16, 30, 0.98)); border-color: rgba(45, 212, 191, 0.22); } [data-theme="dark"] .workspace-identity-callout.is-warn { background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 42%), linear-gradient(180deg, rgba(120, 53, 15, 0.46), rgba(10, 16, 30, 0.98)); border-color: rgba(251, 191, 36, 0.2); } [data-theme="dark"] .workspace-identity-callout.is-bad, [data-theme="dark"] .workspace-identity-warning { background: radial-gradient(circle at top right, rgba(251, 113, 133, 0.2), transparent 42%), linear-gradient(180deg, rgba(127, 29, 29, 0.48), rgba(10, 16, 30, 0.98)); border-color: rgba(251, 113, 133, 0.18); } [data-theme="dark"] .workspace-runtime-validation-warnings { background: linear-gradient(180deg, rgba(24, 34, 55, 0.96), rgba(10, 16, 30, 0.98)); } [data-theme="dark"] .workspace-setup-code { border-color: rgba(96, 165, 250, 0.18); box-shadow: 0 22px 46px rgba(2, 6, 23, 0.42); } .workspace-identity-warning code, .workspace-identity-callout code, .workspace-identity-field-note code { font-size: 10.5px; } [data-theme="dark"] .workspace-identity-callout code, [data-theme="dark"] .workspace-identity-warning code, [data-theme="dark"] .workspace-identity-field-note code, [data-theme="dark"] .workspace-identity-readonly code, [data-theme="dark"] .workspace-setup-fact code, [data-theme="dark"] .workspace-setup-list-copy code, [data-theme="dark"] .workspace-setup-empty code, [data-theme="dark"] .workspace-ops-list-item code, [data-theme="dark"] .workspace-ops-signal strong code { background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.18); color: #dbeafe; } [data-theme="dark"] .workspace-setup-list-chip { background: rgba(96, 165, 250, 0.14); border: 1px solid rgba(96, 165, 250, 0.16); color: #dbeafe; } [data-theme="dark"] .workspace-setup-panel-head strong, [data-theme="dark"] .workspace-ops-panel-head strong, [data-theme="dark"] .workspace-identity-callout strong, [data-theme="dark"] .workspace-setup-card-head strong, [data-theme="dark"] .workspace-setup-fact strong, [data-theme="dark"] .workspace-ops-signal strong { color: rgba(241, 245, 249, 0.98); } [data-theme="dark"] .workspace-setup-panel-head p, [data-theme="dark"] .workspace-setup-card-head span, [data-theme="dark"] .workspace-identity-callout small, [data-theme="dark"] .workspace-identity-field-note, [data-theme="dark"] .workspace-identity-readonly span, [data-theme="dark"] .workspace-identity-advanced-copy, [data-theme="dark"] .workspace-ops-panel-head p, [data-theme="dark"] .workspace-setup-list-copy span, [data-theme="dark"] .workspace-setup-empty, [data-theme="dark"] .workspace-ops-list-item { color: rgba(191, 219, 254, 0.82); } @media (max-width: 900px) { .workspace-setup-list-item { grid-template-columns: minmax(0, 1fr); } .workspace-setup-list-chip { justify-self: start; } } @media (max-width: 720px) { .workspace-identity-readiness, .workspace-setup-facts, .workspace-setup-grid, .workspace-setup-code-grid, .workspace-ops-signal-grid { grid-template-columns: minmax(0, 1fr); } .workspace-setup-panel, .workspace-ops-panel, .workspace-runtime-validation, .workspace-identity-advanced { padding: 14px; border-radius: 18px; } .workspace-setup-panel-head, .workspace-ops-panel-head, .workspace-runtime-validation-head { flex-direction: column; } } .account-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) 340px; gap: 16px; align-items: start; } .account-main, .account-sidebar { display: grid; gap: 16px; min-width: 0; } .account-sidebar { position: sticky; top: 84px; align-self: start; } .account-preferences-card { min-height: 0; } .account-shortcuts-card { min-height: 0; } .account-shortcut-list { display: grid; gap: 10px; } .account-shortcut-item { display: grid; gap: 6px; width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); text-align: left; transition: transform 130ms ease, border-color 130ms ease, background 130ms ease; } .account-shortcut-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-accent) 28%, var(--c-line)); background: var(--c-panel-strong); } .account-shortcut-item span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .account-shortcut-item strong { font-size: 14px; line-height: 1.4; color: var(--c-text); } .access-management-layout { position: relative; display: grid; grid-template-columns: 304px minmax(0, 1004px); gap: 16px; align-items: start; width: min(100%, 1324px); max-width: 1324px; justify-content: start; } .access-management-sidebar-backdrop { display: none; } .access-management-sidebar { position: sticky; top: 84px; display: grid; gap: 16px; align-self: start; max-height: calc(100vh - 108px); overflow-y: auto; scrollbar-gutter: stable both-edges; z-index: 2; } .access-management-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .access-management-sidebar-head h3 { margin: 6px 0 0; font-size: 18px; letter-spacing: -.02em; } .access-management-sidebar-head p { margin: 6px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; } .access-management-sidebar-close { display: none; appearance: none; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 700; } .access-management-sidebar-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .access-management-sidebar-stat { padding: 12px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); } .access-management-sidebar-stat strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.03em; } .access-management-sidebar-stat span { display: block; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .access-management-sidebar-section { display: grid; gap: 10px; } .access-management-sidebar-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .access-management-sidebar-nav { display: grid; gap: 8px; } .access-management-sidebar-nav--views { grid-template-columns: repeat(2, minmax(0, 1fr)); } .access-management-sidebar-nav--scopes { grid-template-columns: minmax(0, 1fr); } .access-management-sidebar-item { appearance: none; position: relative; display: grid; gap: 4px; width: 100%; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); text-align: left; cursor: pointer; pointer-events: auto; transition: transform 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease; } .access-management-sidebar-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-accent) 28%, var(--c-line)); } .access-management-sidebar-item.active { border-color: rgba(37,99,235,0.32); background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent-soft) 92%, white 8%), rgba(37,99,235,0.1)); box-shadow: 0 10px 24px rgba(37,99,235,0.12); } [data-theme="dark"] .access-management-sidebar-item.active { border-color: rgba(96,165,250,0.34); background: linear-gradient(180deg, rgba(37,99,235,0.2), rgba(15,23,42,0.9)); box-shadow: 0 12px 26px rgba(2,6,23,0.35); } .access-management-sidebar-item span { font-size: 13px; font-weight: 650; line-height: 1.35; } .access-management-sidebar-item small { color: var(--c-muted); font-size: 11px; line-height: 1.45; } .access-management-main { display: grid; gap: 14px; min-width: 0; } .access-management-header { padding: 18px 20px; } .access-management-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .access-management-title-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .access-management-title-copy { display: grid; gap: 2px; min-width: 0; } .access-management-title-row h3 { margin: 4px 0 0; font-size: clamp(24px, 2.5vw, 28px); letter-spacing: -.03em; } .access-management-title-row p { margin: 6px 0 0; color: var(--c-muted); font-size: 12.5px; line-height: 1.55; max-width: 72ch; } .access-management-header-badges { gap: 8px; } .access-management-chip-short { display: none; } .access-management-header-badges .studio-chip { padding: 5px 10px; border-radius: 12px; background: var(--c-panel-strong); border-color: color-mix(in srgb, var(--c-line) 88%, white 12%); color: var(--c-text); } [data-theme="dark"] .access-management-header-badges .studio-chip { background: color-mix(in srgb, var(--c-panel-strong) 92%, rgba(2,6,23,0.32)); border-color: rgba(96,165,250,0.14); } .access-management-header-actions { gap: 8px; flex-wrap: nowrap; } .access-management-header-action { display: inline-flex; align-items: center; gap: 8px; } .access-management-header-action svg { flex: 0 0 auto; } .access-management-sidebar-toggle { display: none; } .access-management-compact-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .access-management-compact-stat { padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-panel); } .access-management-compact-stat span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .access-management-compact-stat strong { display: block; margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; } .access-management-compact-stat small { display: block; margin-top: 4px; color: var(--c-muted); font-size: 11px; line-height: 1.35; } .access-management-content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } .access-management-content-grid-wide { grid-template-columns: minmax(0, 1fr); } .access-management-members-nav { display: inline-flex; flex-wrap: wrap; gap: 8px; } .access-management-members-nav--section { margin-bottom: 14px; } .access-management-members-nav-item { appearance: none; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 650; line-height: 1.2; cursor: pointer; transition: border-color 130ms ease, background 130ms ease, color 130ms ease, box-shadow 130ms ease; } .access-management-members-nav-item:hover { border-color: color-mix(in srgb, var(--c-accent) 32%, var(--c-line)); } .access-management-members-nav-item.active { border-color: rgba(37,99,235,0.3); background: color-mix(in srgb, var(--c-accent-soft) 88%, white 12%); color: var(--c-accent-hi); box-shadow: 0 8px 18px rgba(37,99,235,0.12); } [data-theme="dark"] .access-management-members-nav-item.active { border-color: rgba(96,165,250,0.36); background: rgba(30,64,175,0.24); box-shadow: 0 10px 20px rgba(2, 6, 23, 0.34); } .access-management-panel { min-width: 0; } .access-management-toolbar { display: grid; gap: 8px; margin-bottom: 14px; } .access-management-filter { width: 100%; max-width: none; } .access-management-subhead { margin: 18px 0 10px; } .access-management-result-meta { margin: 0; } .access-management-pagination { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); } .access-management-pagination-controls { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .access-management-page-size { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: 11.5px; font-weight: 600; } .access-management-page-size .studio-select { width: auto; min-width: 74px; } .access-management-page-status { color: var(--c-muted); font-size: 12px; } .access-management-list { margin-top: 0; } .access-management-table-wrap { border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-panel); overflow-x: visible; } .access-management-table { min-width: 100%; table-layout: fixed; } .access-management-table th { white-space: normal; overflow-wrap: anywhere; } .access-management-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; } .access-management-table td .studio-chip-row { gap: 6px; flex-wrap: wrap; } .access-management-table td .studio-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .access-management-cell-copy { display: grid; gap: 4px; } .access-management-cell-copy strong { font-size: 13px; font-weight: 600; } .access-management-cell-copy small { color: var(--c-muted); font-size: 11.5px; } .access-management-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; } .access-management-bulk-upload-shell { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--c-accent) 28%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-soft) 34%, var(--c-panel)), var(--c-panel)); } .access-management-bulk-upload-shell strong { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: var(--c-text); } .access-management-bulk-upload-shell span { color: var(--c-muted); font-size: 12px; line-height: 1.55; } [data-theme="dark"] .access-management-bulk-upload-shell { border-color: rgba(96,165,250,0.28); background: linear-gradient(180deg, rgba(30,64,175,0.18), rgba(15,23,42,0.94)); } .workspace-access-shell { display: grid; gap: 18px; } .workspace-access-switcher { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .workspace-access-switcher-btn { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px 15px; border-radius: 18px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06)); color: var(--c-text); transition: transform 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease; } [data-theme="dark"] .workspace-access-switcher-btn { background: linear-gradient(180deg, rgba(30,30,34,0.9), rgba(20,20,24,0.84)); } .workspace-access-switcher-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-line)); } .workspace-access-switcher-btn.active { border-color: color-mix(in srgb, var(--c-accent) 48%, var(--c-line)); box-shadow: 0 14px 28px rgba(37,99,235,0.12); background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-soft) 92%, white 8%), rgba(37,99,235,0.08)); } [data-theme="dark"] .workspace-access-switcher-btn.active { box-shadow: 0 16px 30px rgba(2,6,23,0.35); background: linear-gradient(180deg, rgba(37,99,235,0.22), rgba(15,23,42,0.92)); } .workspace-access-switcher-btn span, .workspace-access-switcher-btn strong, .workspace-access-switcher-btn small { display: block; } .workspace-access-switcher-btn span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .workspace-access-switcher-btn strong { font-size: 14px; font-weight: 600; letter-spacing: -.02em; } .workspace-access-switcher-btn small { color: var(--c-muted); font-size: 11px; } .workspace-access-tenant-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: 18px 20px; border-radius: 22px; border: 1px solid var(--c-line); background: linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.08)); } [data-theme="dark"] .workspace-access-tenant-head { background: linear-gradient(135deg, rgba(30,41,59,0.78), rgba(15,23,42,0.92)); } .workspace-access-tenant-head h4 { margin: 4px 0 0; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -.03em; } .workspace-access-metric-grid { margin-top: 0; } .workspace-access-tab-row { display: flex; flex-wrap: wrap; gap: 8px; } .workspace-access-tab { appearance: none; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-muted); border-radius: 999px; padding: 9px 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background 130ms ease, color 130ms ease, border-color 130ms ease, transform 130ms ease; } .workspace-access-tab:hover { color: var(--c-text); background: var(--c-panel-strong); transform: translateY(-1px); } .workspace-access-tab.active { color: var(--c-accent-hi); background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent-soft) 92%, white 8%), rgba(37,99,235,0.12)); border-color: rgba(37,99,235,0.36); box-shadow: 0 10px 24px rgba(37,99,235,0.12), inset 0 0 0 1px rgba(255,255,255,0.26); } [data-theme="dark"] .workspace-access-tab.active { color: var(--c-accent); border-color: rgba(96,165,250,0.34); box-shadow: 0 10px 24px rgba(2,6,23,0.34), inset 0 0 0 1px rgba(96,165,250,0.12); } .workspace-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .workspace-access-panel { padding: 18px; border-radius: 20px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08)); box-shadow: var(--shadow-sm); } [data-theme="dark"] .workspace-access-panel { background: linear-gradient(180deg, rgba(30,30,34,0.88), rgba(20,20,24,0.84)); } .workspace-access-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .workspace-access-collection { display: grid; gap: 10px; } .workspace-access-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--c-line); background: var(--c-panel); } .workspace-access-item strong { font-size: 12.5px; line-height: 1.4; } .workspace-access-empty { padding: 14px 15px; border-radius: 16px; border: 1px dashed var(--c-line); background: color-mix(in srgb, var(--c-panel) 78%, transparent 22%); color: var(--c-muted); font-size: 12px; line-height: 1.55; } .project-memory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 9px; } .project-memory-card { display: grid; gap: 9px; padding: 12px 13px; border-radius: 13px; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .project-memory-card:hover { border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); box-shadow: 0 10px 24px rgba(15,23,42,0.06); } .project-memory-head { display: flex; align-items: center; gap: 10px; } .project-memory-copy { min-width: 0; flex: 1; } .project-memory-copy p { max-width: 100%; margin: 3px 0 0; overflow: hidden; color: var(--c-muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .project-memory-stats { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--c-muted); font-size: 11.5px; line-height: 1.35; } .project-memory-stat { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; } .project-memory-stat span { color: var(--c-muted); font-size: 11.5px; text-transform: none; letter-spacing: 0; } .project-memory-stat strong { font-size: 11.5px; font-weight: 600; color: var(--c-text); } .project-memory-card .dashboard-project-avatar { width: 34px; height: 34px; min-width: 34px; font-size: 16px; border-radius: 11px; } .project-memory-card .dashboard-project-title-row h3 { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .project-memory-card .studio-chip { padding: 3px 6px; font-size: 10px; font-weight: 600; } .project-memory-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } .project-memory-icon-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--c-line-strong); border-radius: 10px; background: color-mix(in srgb, var(--c-panel) 88%, transparent); color: var(--c-text); cursor: pointer; transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease; } .project-memory-icon-btn:hover { border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-line-strong)); background: var(--c-panel-strong); color: var(--c-accent-hi); transform: translateY(-1px); } .project-memory-icon-btn--primary { border-color: rgba(37,99,235,0.22); background: var(--c-accent-soft); color: var(--c-accent-hi); } [data-theme="dark"] .project-memory-icon-btn--primary { border-color: rgba(96,165,250,0.24); color: var(--c-accent); } .project-memory-icon-btn .studio-button-icon { width: 13px; height: 13px; min-width: 13px; } .project-activity-list { display: grid; gap: 8px; } .project-activity-row { appearance: none; width: 100%; border: 1px solid var(--c-line); background: var(--c-panel); border-radius: var(--r-lg); padding: 11px 13px; display: flex; align-items: flex-start; gap: 10px; text-align: left; color: var(--c-text); transition: border-color 130ms ease, background 130ms ease, transform 130ms ease, box-shadow 130ms ease; } .project-activity-row:hover { transform: translateY(-1px); background: var(--c-panel-strong); border-color: var(--c-line-strong); box-shadow: var(--shadow-sm); } .project-activity-row .run-status-dot { margin-top: 5px; } .project-activity-kind { flex-shrink: 0; min-width: 66px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); } .project-activity-copy { min-width: 0; flex: 1; display: grid; gap: 1px; } .project-activity-title { font-size: 12.5px; font-weight: 700; color: var(--c-text); } .project-activity-meta { color: var(--c-muted); font-size: 11px; } .project-activity-preview { color: var(--c-subtle); font-size: 11.5px; line-height: 1.45; } .project-activity-arrow { flex-shrink: 0; color: var(--c-muted); font-size: 14px; line-height: 1; padding-top: 2px; } .workspace-token-list { display: grid; } .workspace-token-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-line); } .workspace-token-row:first-child { padding-top: 0; } .workspace-token-row:last-child { border-bottom: none; padding-bottom: 0; } .workspace-token-copy { min-width: 0; flex: 1; } .workspace-token-title-row { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .workspace-token-title-row .run-label { min-width: 0; font-weight: 650; } .workspace-token-prefix { max-width: min(260px, 52vw); display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--r-pill); background: var(--studio-code-bg); color: var(--c-muted); font-size: 10.5px; font-family: var(--studio-code); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-token-meta { margin-top: 4px; color: var(--c-muted); font-size: 11px; } /* end styles/pages/list-detail.css */ /* begin styles/pages/wizard.css */ /* ============================================================ WIZARD — beautiful 3-step creation flow ============================================================ */ .wiz-page { max-width: 1100px; margin: 0 auto; padding: 20px 20px 60px; } .wiz-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; } .wiz-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-size: 13px; color: var(--c-muted); cursor: pointer; padding: 5px 0; transition: color 120ms ease; } .wiz-back:hover { color: var(--c-text); } .wiz-draft-label { font-size: 11.5px; color: var(--c-muted); background: var(--c-panel); border: 1px solid var(--c-line); padding: 5px 12px; border-radius: var(--r-pill); } /* Hero header */ .wiz-header { text-align: center; padding: 24px 0 32px; } .wiz-header h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(26px,4vw,38px); letter-spacing: -.04em; line-height: 1.05; } .wiz-header p { margin: 0; color: var(--c-muted); font-size: 14px; } /* Step progress */ .wiz-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 36px; } .wiz-step-item { display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1; max-width: 220px; } .wiz-step-meta { display: flex; flex-direction: column; gap: 1px; } .wiz-step-meta strong { font-size: 12.5px; font-weight: 700; color: var(--c-muted); } .wiz-step-meta span { font-size: 11px; color: var(--c-muted); opacity: .65; } .wiz-step-item.active .wiz-step-meta strong { color: var(--c-text); } .wiz-step-item.done .wiz-step-meta strong { color: var(--c-good); } .wiz-step-circle { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid var(--c-line-strong); background: var(--c-panel-strong); color: var(--c-muted); transition: all 220ms ease; } .wiz-step-item.active .wiz-step-circle { border-color: var(--c-accent); background: var(--c-accent); color: #fff; box-shadow: 0 4px 16px var(--c-accent-glow); } .wiz-step-item.done .wiz-step-circle { border-color: var(--c-good); background: var(--c-good); color: #fff; } .wiz-step-label { font-size: 11.5px; font-weight: 600; color: var(--c-muted); letter-spacing:.02em; } .wiz-step-item.active .wiz-step-label { color: var(--c-text); } .wiz-step-item.done .wiz-step-label { color: var(--c-good); } .wiz-step-line { flex: 1; max-width: 80px; height: 2px; margin-bottom: 26px; background: var(--c-line-strong); border-radius: 2px; transition: background 220ms ease; } .wiz-step-line.done { background: var(--c-good); } /* Two-column layout */ .wiz-body { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,0.9fr); gap: 16px; align-items: start; } .wiz-main-card { background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-md); } .wiz-main-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -.02em; } .wiz-main-card > p { margin: 0 0 20px; color: var(--c-muted); font-size: 13px; } /* Action bar inside wiz-main-card */ .wiz-actions { display: flex; align-items: center; gap: 10px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--c-line); } .wiz-actions-right { margin-left: auto; display: flex; gap: 10px; } /* Sidebar */ .wiz-sidebar { display: grid; gap: 14px; align-content: start; } /* Live preview card inside sidebar */ .wiz-preview-card { padding: 18px; border-radius: var(--r-lg); background: var(--c-panel-strong); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); overflow: hidden; position: relative; } .wiz-preview-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 44px; background: var(--studio-avatar-bg, var(--av0-bg)); opacity:.7; pointer-events:none; } .wiz-preview-inner { position: relative; z-index:1; } .wiz-preview-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--studio-avatar-bg, var(--av0-bg)); box-shadow: inset 0 0 0 2px var(--studio-avatar-ring, var(--av0-ring)), var(--studio-avatar-shadow, var(--av0-glow)), 0 0 0 3px var(--c-panel-strong); margin: 14px 0 10px; } .wiz-preview-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 2px; } .wiz-preview-sub { font-size: 12px; color: var(--c-muted); margin-bottom: 10px; } .wiz-preview-desc { font-size: 12.5px; color: var(--c-muted); line-height:1.55; margin-bottom: 12px; } .wiz-preview-chips { display: flex; flex-wrap: wrap; gap: 5px; } /* Sidebar info card */ .wiz-info-card { padding: 14px 16px; border-radius: var(--r-lg); background: var(--c-panel-strong); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); } .wiz-info-card h4 { margin: 0 0 10px; font-size: 13px; font-weight: 650; } .studio-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .memory-settings-card { background: radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 36%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 98%, transparent)); } .memory-settings-shell { display: grid; gap: 12px; } .memory-settings-panel { padding: 16px 18px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c-accent) 12%, var(--c-line)); background: radial-gradient(circle at top right, rgba(37,99,235,0.06), transparent 36%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 14px 28px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.55); } .memory-settings-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .memory-settings-kicker { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .memory-settings-panel-head h4 { margin: 5px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -.02em; } .memory-settings-panel-head p { margin: 6px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; max-width: 62ch; } .memory-settings-head-chips { justify-content: flex-end; } .memory-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .memory-settings-stack { display: grid; gap: 12px; } .memory-settings-field-note { font-size: 11.5px; line-height: 1.45; color: var(--c-muted); } .memory-settings-textarea { min-height: 112px; } .memory-settings-textarea--personality { min-height: 78px; } .conversation-memory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .conversation-memory-card { display: grid; gap: 8px; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, white 4%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 10px 20px rgba(15,23,42,0.05); cursor: pointer; } .conversation-memory-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .conversation-memory-card-head strong { font-size: 13px; line-height: 1.25; color: var(--c-text); } .conversation-memory-card-copy { font-size: 12px; line-height: 1.5; color: var(--c-muted); } .conversation-memory-grid.compact .conversation-memory-card-copy { font-size: 11.5px; } .assistant-builder-shell { display: grid; gap: 18px; margin-top: 20px; } .assistant-builder-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--c-line) 74%, var(--c-accent) 26%); background: radial-gradient(circle at top right, color-mix(in srgb, var(--c-accent-soft) 84%, transparent) 0, transparent 42%), radial-gradient(circle at bottom left, rgba(14,165,233,0.08) 0, transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 26px 48px rgba(15, 23, 42, 0.08); } .assistant-builder-kicker { font-size: 11px; font-weight: 650; letter-spacing: .03em; color: var(--c-muted); margin-bottom: 6px; } .assistant-builder-hero h4 { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.03em; line-height: 1.08; } .assistant-builder-hero p { margin: 8px 0 0; max-width: 760px; color: var(--c-muted); font-size: 13px; line-height: 1.6; } .assistant-builder-hero-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .assistant-builder-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-line) 74%, var(--c-accent) 26%); background: color-mix(in srgb, var(--c-panel-strong) 82%, white 18%); color: var(--c-text); font-size: 12px; font-weight: 600; } .assistant-builder-runtime-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .assistant-runtime-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 98%, white 2%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 14px 26px rgba(15, 23, 42, 0.05); } .assistant-runtime-step { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--c-accent-soft) 62%, var(--c-panel) 38%); color: var(--c-accent-hi); font-size: 12px; font-weight: 700; } .assistant-runtime-card strong { display: block; font-size: 13px; line-height: 1.3; } .assistant-runtime-card p { margin: 4px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; } .assistant-builder-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .assistant-builder-setting-card, .assistant-builder-workflows, .assistant-builder-json-pane { border-radius: 24px; border: 1px solid color-mix(in srgb, var(--c-line) 80%, var(--c-accent) 20%); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.055); } .assistant-builder-setting-card { display: grid; gap: 8px; padding: 16px; } .assistant-builder-setting-head, .assistant-builder-section-head, .assistant-intent-card-head, .assistant-step-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .assistant-builder-setting-head h5, .assistant-builder-section-head h5, .assistant-intent-card-head h6 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.015em; } .assistant-builder-setting-head p, .assistant-builder-section-head p, .assistant-intent-card-head p { margin: 4px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.5; } .assistant-builder-setting-card small, .assistant-json-footer small { color: var(--c-muted); line-height: 1.55; } .assistant-builder-setting-card--toggle { cursor: pointer; } .assistant-builder-select { min-width: 180px; max-width: 220px; } .assistant-builder-action-bank, .assistant-builder-workflows, .assistant-builder-json-pane { padding: 18px; } .assistant-builder-note { color: var(--c-muted); font-size: 11.5px; line-height: 1.45; } .assistant-builder-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; } .assistant-action-chip { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 82px; padding: 14px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 95%, white 5%), color-mix(in srgb, var(--c-panel-strong) 92%, transparent)); cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .assistant-action-chip:hover { transform: translateY(-1px); border-color: var(--c-line-strong); box-shadow: 0 12px 22px rgba(15, 23, 42, 0.06); } .assistant-action-chip input { margin-top: 3px; accent-color: var(--c-accent); } .assistant-action-chip-copy { display: grid; gap: 4px; } .assistant-action-chip-copy strong { font-size: 12.5px; line-height: 1.35; } .assistant-action-chip-copy code { font-size: 11px; color: var(--c-muted); white-space: normal; word-break: break-word; } .assistant-action-chip:has(input:checked) { border-color: color-mix(in srgb, var(--c-accent) 66%, var(--c-line) 34%); background: color-mix(in srgb, var(--c-accent-soft) 58%, var(--c-panel-strong) 42%); box-shadow: 0 16px 28px var(--c-accent-glow); } .assistant-builder-layout { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; } .assistant-builder-canvas { overflow: hidden; } .assistant-flow-canvas { display: grid; gap: 14px; margin-top: 14px; } .assistant-builder-drag-note { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--c-line) 68%, var(--c-accent) 32%); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); color: var(--c-muted); font-size: 12px; line-height: 1.6; } .assistant-empty-state { display: grid; justify-items: flex-start; gap: 10px; padding: 22px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--c-line) 72%, var(--c-accent) 28%); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); color: var(--c-muted); } .assistant-empty-state strong { color: var(--c-text); font-size: 14px; } .assistant-empty-state p { margin: 0; font-size: 12.5px; line-height: 1.6; } .assistant-empty-state.compact { padding: 16px; } .assistant-intent-card { display: grid; gap: 16px; padding: 18px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c-line) 72%, var(--c-accent) 28%); background: radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 99%, transparent)); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.055); transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, opacity 150ms ease; } .assistant-intent-card + .assistant-intent-card { margin-top: 12px; } .assistant-intent-card-head-main, .assistant-step-card-head-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .assistant-drag-handle { flex: 0 0 auto; width: 34px; min-height: 34px; display: grid; place-items: center; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c-line) 76%, var(--c-accent) 24%); background: color-mix(in srgb, var(--c-panel) 90%, white 10%); color: var(--c-muted); font-size: 15px; font-weight: 700; letter-spacing: -0.08em; cursor: grab; user-select: none; transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease; } .assistant-drag-handle:hover { border-color: color-mix(in srgb, var(--c-accent) 58%, var(--c-line) 42%); color: var(--c-accent-hi); box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06); } .assistant-drag-handle:active { cursor: grabbing; } .assistant-field-card .assistant-drag-handle { align-self: end; } .assistant-intent-index { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent-soft) 64%, var(--c-panel) 36%); color: var(--c-accent-hi); font-size: 11px; font-weight: 650; letter-spacing: .03em; margin-bottom: 8px; } .assistant-intent-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .assistant-intent-meta-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-line) 80%, var(--c-accent) 20%); background: color-mix(in srgb, var(--c-panel) 92%, white 8%); color: var(--c-text); font-size: 11.5px; font-weight: 600; } .assistant-intent-grid, .assistant-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .assistant-intent-span-2 { grid-column: span 2; } .assistant-flow-section { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--c-line); } .assistant-flow-note { padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); background: color-mix(in srgb, var(--c-accent-soft) 42%, var(--c-panel) 58%); color: var(--c-muted); font-size: 12px; line-height: 1.55; } .assistant-field-list, .assistant-step-list { display: grid; gap: 12px; } .assistant-field-card, .assistant-step-card { border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-line) 80%, var(--c-accent) 20%); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 96%, white 4%), color-mix(in srgb, var(--c-panel-strong) 93%, transparent)); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, opacity 140ms ease; } .assistant-field-card { padding: 14px; display: grid; gap: 10px; } .assistant-field-grid { display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)) auto auto; gap: 10px; align-items: end; } .assistant-field-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .assistant-inline-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--c-text); font-size: 12.5px; font-weight: 600; } .assistant-inline-remove { align-self: center; } .assistant-step-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0; overflow: hidden; } .assistant-step-rail { position: relative; display: flex; justify-content: center; padding-top: 16px; } .assistant-step-rail::after { content: ""; position: absolute; top: 44px; bottom: -18px; width: 2px; background: color-mix(in srgb, var(--c-line-strong) 78%, var(--c-accent) 22%); border-radius: 999px; } .assistant-step-card:last-child .assistant-step-rail::after { display: none; } .assistant-step-node { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 10px 20px var(--c-accent-glow); } .assistant-step-body { display: grid; gap: 10px; padding: 16px 16px 16px 0; } .assistant-step-card-head strong { display: block; font-size: 13px; } .assistant-step-card-head span { display: block; margin-top: 3px; color: var(--c-muted); font-size: 11.5px; } .assistant-step-input-field { margin-top: 2px; } .assistant-inline-textarea { min-height: 92px; } .assistant-step-input { min-height: 148px; font-family: var(--font-mono); } .assistant-builder-json-pane { display: grid; gap: 12px; position: static; } .assistant-builder-json-drawer { border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, white 4%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05); overflow: hidden; } .assistant-builder-json-drawer summary { list-style: none; } .assistant-builder-json-drawer summary::-webkit-details-marker { display: none; } .assistant-builder-json-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; } .assistant-builder-json-summary strong { display: block; font-size: 13px; } .assistant-builder-json-summary span { display: block; margin-top: 3px; color: var(--c-muted); font-size: 12px; line-height: 1.5; } .assistant-builder-json-summary-caret { width: 11px; height: 11px; border-right: 1.75px solid color-mix(in srgb, var(--c-text) 76%, transparent); border-bottom: 1.75px solid color-mix(in srgb, var(--c-text) 76%, transparent); transform: rotate(45deg); transition: transform 160ms ease; } .assistant-builder-json-drawer[open] .assistant-builder-json-summary-caret { transform: rotate(225deg); } .assistant-builder-json-drawer .assistant-builder-json-pane { padding-top: 0; border-top: 1px solid color-mix(in srgb, var(--c-line) 78%, transparent); } .assistant-builder-json-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .assistant-json-textarea { min-height: 520px; font-family: var(--font-mono); } .assistant-json-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .assistant-json-footer small[data-tone="good"] { color: var(--c-good); } .assistant-json-footer small[data-tone="accent"] { color: var(--c-accent-hi); } .assistant-json-footer small[data-tone="bad"] { color: var(--c-danger); } .assistant-intent-card.is-drop-target, .assistant-field-card.is-drop-target, .assistant-step-card.is-drop-target { border-color: color-mix(in srgb, var(--c-accent) 68%, var(--c-line) 32%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent-soft) 72%, transparent); } .assistant-intent-card.is-dragging, .assistant-field-card.is-dragging, .assistant-step-card.is-dragging { opacity: 0.55; transform: scale(0.992); } /* Avatar picker */ .memory-avatar-section, .memory-avatar-picker { display: grid; gap: 10px; } .memory-avatar-current { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-accent) 12%, var(--c-line)); background: radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 98%, transparent)); } .memory-avatar-current-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; } .memory-avatar-current-preview { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; } .memory-avatar-current-preview .studio-avatar { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; } .memory-avatar-current-preview .studio-avatar-image { width: 46px; height: 46px; border-radius: 14px; } .memory-avatar-current-preview .studio-avatar, .memory-avatar-current-preview .studio-avatar-glyph { font-size: 21px; } .memory-avatar-current-preview .studio-avatar-glyph { display: grid; place-items: center; width: 100%; height: 100%; text-align: center; } .memory-avatar-current-copy { display: grid; gap: 3px; min-width: 0; } .memory-avatar-current-copy strong { font-size: 14px; letter-spacing: -.02em; color: var(--c-text); } .memory-avatar-current-copy span { color: var(--c-muted); font-size: 12px; line-height: 1.5; } .memory-avatar-current-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .memory-avatar-upload-btn { min-height: 38px; } .memory-avatar-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .memory-avatar-section-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .62; } .memory-avatar-section-head p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--c-muted); } .memory-avatar-reset-btn { flex-shrink: 0; } .memory-avatar-gallery { border-radius: 16px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 92%, transparent); overflow: hidden; } .memory-avatar-gallery-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; color: var(--c-text); font-size: 12.5px; font-weight: 600; } .memory-avatar-gallery-summary::-webkit-details-marker { display: none; } .memory-avatar-gallery-meta { color: var(--c-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .memory-avatar-gallery-body { display: grid; gap: 10px; padding: 0 0 14px; } .memory-avatar-gallery-tools { padding: 0 14px; } .memory-avatar-search-input { min-height: 38px; } .memory-avatar-gallery-empty { padding: 0 14px; font-size: 12px; color: var(--c-muted); } .wiz-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(64px,1fr)); gap: 8px; padding: 0 14px; } .wiz-avatar-btn { position: relative; width:100%; min-height:62px; padding:8px 5px; border-radius:12px; border:1.5px solid var(--c-line); background:var(--c-panel); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:transform 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease; overflow: hidden; } .wiz-avatar-btn:hover { transform:translateY(-2px); border-color:var(--c-line-strong); } .wiz-avatar-btn.active { background:var(--c-accent-soft); border-color:var(--c-accent); box-shadow:0 4px 12px var(--c-accent-glow); } .wiz-avatar-icon { font-size:20px; line-height:1; } .wiz-avatar-icon .studio-avatar-image, .wiz-avatar-icon .studio-avatar-glyph { width: 22px; height: 22px; display: block; } .wiz-avatar-icon .studio-avatar-image { border-radius: 7px; object-fit: cover; } .wiz-avatar-label { font-size:9.5px; font-weight:600; color:var(--c-muted); letter-spacing:.04em; text-transform:uppercase; } .wiz-avatar-btn.active .wiz-avatar-label { color:var(--c-accent-hi); } [data-theme="dark"] .wiz-avatar-btn.active .wiz-avatar-label { color:var(--c-accent); } .wiz-avatar-btn--upload { background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 92%, white 8%), color-mix(in srgb, var(--c-surface) 88%, transparent)); } .wiz-avatar-icon--upload { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; } .wiz-avatar-upload-plus { font-size: 22px; font-weight: 500; line-height: 1; color: var(--c-accent-hi); } .wiz-avatar-upload-badge { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 4px 10px var(--c-accent-glow); } .wiz-avatar-btn--upload .studio-avatar { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; } .memory-avatar-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11.5px; color: var(--c-muted); } /* Source type grid in wizard step 2 */ .wiz-source-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 8px; margin-bottom: 18px; } .wiz-source-type-btn { padding:14px 12px; border-radius:var(--r-md); border:1.5px solid var(--c-line); background:var(--c-panel); cursor:pointer; text-align:left; transition:transform 130ms ease, border-color 130ms ease, background 130ms ease; } .wiz-source-type-btn:hover { transform:translateY(-1px); border-color:var(--c-line-strong); } .wiz-source-type-btn.active { border-color:var(--c-accent); background:var(--c-accent-soft); } .wiz-source-type-icon { font-size:22px; display:block; margin-bottom:6px; } .wiz-source-type-label { font-size:12.5px; font-weight:600; display:block; } .wiz-source-type-copy { font-size:11px; color:var(--c-muted); display:block; margin-top:2px; line-height:1.4; } .wiz-source-type-btn.active .wiz-source-type-copy { color:var(--c-accent-hi); } [data-theme="dark"] .wiz-source-type-btn.active .wiz-source-type-copy { color:var(--c-accent); } /* Review step */ .wiz-review-hero { padding: 20px; border-radius: var(--r-lg); background: var(--c-panel); border: 1px solid var(--c-line); position:relative; overflow:hidden; margin-bottom:18px; } .wiz-review-hero::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg, var(--c-accent), var(--c-accent-hi)); opacity:.8; pointer-events:none; } .wiz-review-inner { padding-top:10px; } .wiz-review-head { display:flex; gap:14px; align-items:flex-start; } .wiz-review-avatar { width:56px; height:56px; border-radius:18px; flex-shrink:0; display:grid; place-items:center; font-size:26px; background:var(--studio-avatar-bg, var(--av0-bg)); box-shadow:inset 0 0 0 1.5px var(--studio-avatar-ring, var(--av0-ring)); overflow: hidden; } .wiz-review-name { font-family:var(--font-display); font-size:22px; letter-spacing:-.04em; margin:0 0 3px; } .wiz-review-role { color:var(--c-muted); font-size:13px; margin:0 0 10px; } .wiz-review-desc { font-size:13px; line-height:1.6; color:var(--c-muted); margin:12px 0; } .wiz-review-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; } .wiz-review-stat { padding:10px 12px; border-radius:var(--r-sm); background:var(--c-panel-strong); border:1px solid var(--c-line); } .wiz-review-stat span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--c-muted); margin-bottom:4px; } .wiz-review-stat strong { font-size:16px; letter-spacing:-.02em; } /* Stepper (legacy compat) */ .studio-stepper { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .studio-step { min-width:0; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--c-line); background:var(--c-panel); } .studio-step.active { background:var(--c-accent-soft); border-color:rgba(37,99,235,.22); } .studio-step.done { background:var(--c-good-soft); border-color:rgba(5,150,105,.22); } .studio-step strong { display:block; margin-top:6px; font-size:13px; } .studio-step span { display:block; margin-top:3px; color:var(--c-muted); font-size:11px; line-height:1.4; } .studio-step-dot { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--c-panel); border:1px solid var(--c-line); font-size:11px; font-weight:700; } /* Source draft card */ .studio-source-type-card { padding:12px; border-radius:var(--r-sm); border:1px solid var(--c-line); background:var(--c-panel); color:var(--c-text); cursor:pointer; transition:transform 130ms ease, border-color 130ms ease; } .studio-source-type-card.active { border-color:var(--c-accent); background:var(--c-accent-soft); } .studio-source-type-card:hover { transform:translateY(-1px); } .studio-source-type-card h4, .studio-source-card h4, .studio-run-card h4 { margin:0; font-size:14px; color:var(--c-text); } .studio-source-type-card p, .studio-source-card p, .studio-run-card p { margin:6px 0 0; font-size:12px; color:var(--c-muted); line-height:1.5; } .studio-source-grid, .studio-template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:8px; } .studio-source-card, .studio-run-card, .studio-connection-card { padding:13px; border-radius:var(--r-md); border:1px solid var(--c-line); background:var(--c-panel-strong); box-shadow:var(--shadow-sm); } .studio-row-between, .studio-form-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .source-composer-card { position: relative; overflow: visible; } .source-composer-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,0.26), rgba(14,165,233,0)); pointer-events: none; } .source-composer-stack { display: grid; gap: 12px; margin-top: 14px; } .source-composer-stack--add { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .source-composer-stack--detail { margin-top: 0; } .source-composer-picker, .source-composer-summary-card, .source-composer-stage { border: 1px solid color-mix(in srgb, var(--c-accent) 10%, var(--c-line)); border-radius: 20px; background: radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 36%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 96%, white 4%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 18px 36px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.7); } .source-composer-picker, .source-composer-summary-card, .source-composer-stage { padding: 12px; max-width: 100%; min-width: 0; overflow: visible; } .source-composer-picker { position: static; } .source-composer-title-row { display: inline-flex; align-items: center; gap: 8px; } .source-composer-picker-head, .source-composer-stage-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .source-composer-rail-kicker { font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .source-composer-picker-head strong, .source-composer-stage-head strong { font-size: 14px; letter-spacing: -0.02em; color: var(--c-text); } .source-composer-picker-head p, .source-composer-stage-head p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--c-muted); } .source-composer-picker-controls { display: grid; grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr); gap: 10px; margin-top: 12px; align-items: end; } .source-composer-provider-inline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--c-accent) 10%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 97%, white 3%), color-mix(in srgb, var(--c-surface) 94%, transparent)); } .source-composer-provider-inline > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .source-composer-provider-inline strong { font-size: 12.5px; letter-spacing: -.02em; color: var(--c-text); } .source-composer-provider-inline p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-muted); max-width: 58ch; } .source-composer-group-block { display: grid; gap: 8px; margin-top: 10px; } .source-composer-provider-head--inline { gap: 4px; padding: 0 2px; } .source-composer-source-grid { margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; } .source-composer-provider-section { margin-top: 16px; border: 1px solid color-mix(in srgb, var(--c-line) 82%, transparent); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 97%, white 3%), color-mix(in srgb, var(--c-surface) 94%, transparent)); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05); overflow: hidden; } .source-composer-provider-section:first-of-type { margin-top: 14px; } .source-composer-provider-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; cursor: pointer; } .source-composer-provider-summary::-webkit-details-marker { display: none; } .source-composer-provider-section[open] .source-composer-provider-summary { border-bottom: 1px solid color-mix(in srgb, var(--c-line) 78%, transparent); } .source-composer-provider-head { display: grid; gap: 3px; min-width: 0; } .source-composer-provider-head strong { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); } .source-composer-provider-head p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--c-muted); } .source-composer-provider-meta { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .source-composer-provider-caret { width: 10px; height: 10px; border-right: 1.75px solid color-mix(in srgb, var(--c-text) 78%, transparent); border-bottom: 1.75px solid color-mix(in srgb, var(--c-text) 78%, transparent); transform: rotate(45deg); transition: transform 160ms ease; } .source-composer-provider-section[open] .source-composer-provider-caret { transform: rotate(225deg); } .studio-source-type-card.compact { min-height: 54px; padding: 8px 10px; border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 94%, white 6%), color-mix(in srgb, var(--c-surface) 88%, transparent)); box-shadow: 0 8px 16px rgba(15,23,42,0.05); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; } .source-composer-source-copy { display: grid; gap: 2px; justify-items: start; min-width: 0; text-align: left; } .source-composer-provider-section .source-composer-source-grid { margin-top: 0; padding: 14px; } .source-composer-source-copy h4 { margin: 0; max-width: 100%; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; } .source-composer-source-copy p { margin: 0; font-size: 10.5px; line-height: 1.35; } .source-composer-summary-card { display: grid; gap: 12px; } .source-composer-summary-head { display: flex; gap: 12px; align-items: flex-start; } .source-composer-summary-copy { min-width: 0; display: grid; gap: 3px; } .source-composer-summary-copy span { font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .source-composer-summary-copy strong { font-size: 15px; line-height: 1.2; color: var(--c-text); } .source-composer-summary-copy p { margin: 0; font-size: 12.5px; line-height: 1.58; color: var(--c-muted); } .source-composer-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; } .source-composer-stage { min-width: 0; position: relative; } .source-composer-stage-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; } .source-composer-stage-tabs { margin-top: 8px; } .source-composer-stage-tabs .studio-chip-row { margin-top: 0 !important; gap: 6px; } .source-composer-stage-tabs .studio-code-tab { min-height: 30px; padding: 6px 10px; font-size: 11px; } .source-composer-stage-body { margin-top: 8px; } .source-composer-stage-body > .studio-banner:first-child { margin-top: 0 !important; } .source-form-section { padding: 10px; border: 1px solid var(--studio-line); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0)); max-width: 100%; min-width: 0; overflow: visible; } .source-form-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .source-form-section-head strong { font-size: 11.5px; letter-spacing: 0.02em; color: var(--c-text); } .source-form-section-body { margin-top: 8px; } .source-form-section .studio-form-grid { gap: 8px !important; } .source-form-section .studio-form-field, .source-form-section .studio-input, .source-form-section .studio-select { min-width: 0; max-width: 100%; } .source-form-section .studio-banner { padding: 9px 10px; border-radius: 12px; font-size: 11.5px; line-height: 1.45; } .source-form-section .hint { font-size: 11px; line-height: 1.4; } .source-inline-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-accent) 12%, var(--c-line)); background: color-mix(in srgb, var(--c-accent) 5%, var(--c-panel)); color: var(--c-muted); font-size: 11px; font-weight: 650; } .source-resource-picker-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .source-resource-picker-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; max-width: 100%; min-width: 0; flex-wrap: wrap; } .source-resource-picker-head > .studio-button-secondary { flex: 0 0 auto; } .source-resource-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; margin-top: 10px; max-height: 220px; max-width: 100%; overflow: auto; padding-right: 4px; } .source-resource-option { display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-text); cursor: pointer; font-weight: 500; letter-spacing: 0; text-transform: none; } .source-resource-option input { flex: 0 0 auto; margin-top: 2px; } .source-resource-option-copy { display: grid; gap: 4px; min-width: 0; max-width: 100%; } .source-resource-option-title { min-width: 0; color: var(--c-text); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; } .source-resource-option-meta { min-width: 0; color: var(--c-muted); font-family: var(--studio-code); font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; } .source-select2-native { min-height: 34px; } .source-select2-fallback { border-radius: 12px; font-size: 12px; } .select2-container--studio-source { display: block; margin-top: 10px; font-size: 12px; max-width: 100%; min-width: 0; } .select2-container--studio-source .select2-selection--single { min-height: 34px; height: 34px; display: flex; align-items: center; border: 1px solid color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 96%, white 4%), color-mix(in srgb, var(--c-surface) 92%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.62); } .select2-container--studio-source.select2-container--open .select2-selection--single, .select2-container--studio-source .select2-selection--single:focus { border-color: color-mix(in srgb, var(--c-accent) 44%, var(--c-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,0.62); outline: none; } .select2-container--studio-source .select2-selection__rendered { width: 100%; padding: 0 34px 0 11px; color: var(--c-text); line-height: 32px; font-size: 12px; font-weight: 600; } .select2-container--studio-source .select2-selection__placeholder { color: var(--c-muted); font-weight: 600; } .select2-container--studio-source .select2-selection__arrow { height: 32px; right: 8px; top: 1px; } .select2-container--studio-source .select2-selection__arrow b { border-color: color-mix(in srgb, var(--c-text) 70%, transparent) transparent transparent transparent; border-width: 4px 4px 0 4px; } .source-select2-dropdown.select2-dropdown { z-index: 1200; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); border-radius: 14px; background: var(--c-panel-strong); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); } .source-select2-dropdown .select2-search--dropdown { padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--c-line) 82%, transparent); } .source-select2-dropdown .select2-search__field { min-height: 30px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font-size: 12px; outline: none; } .source-select2-dropdown .select2-search__field:focus { border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 12%, transparent); } .source-select2-dropdown .select2-results__options { max-height: 230px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; scrollbar-width: thin; } .source-select2-dropdown .select2-results__option { margin: 2px 0; padding: 7px 9px; border-radius: 10px; color: var(--c-text); font-size: 12px; line-height: 1.35; } .source-select2-dropdown .select2-results__option--highlighted[aria-selected], .source-select2-dropdown .select2-results__option--selected { background: color-mix(in srgb, var(--c-accent) 13%, var(--c-panel)); color: var(--c-text); } .source-help-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-accent) 28%, var(--c-line)); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-panel)); color: var(--c-accent); font-size: 10px; font-weight: 800; line-height: 1; cursor: help; outline: none; z-index: 25; } .source-help-dot:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 16%, transparent); } .source-help-panel { position: absolute; left: 0; top: calc(100% + 8px); transform: translateY(-4px); width: min(300px, calc(100vw - 36px)); padding: 10px 11px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: var(--c-panel-strong); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16); color: var(--c-text); font-size: 11.5px; font-weight: 500; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease; } .source-help-dot--right .source-help-panel { left: auto; right: 0; } .source-help-dot:hover .source-help-panel, .source-help-dot:focus .source-help-panel, .source-help-dot:focus-within .source-help-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .manual-setup-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .manual-setup-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-accent) 34%, var(--c-line)); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-panel)); color: var(--c-accent); font-size: 11px; font-weight: 800; line-height: 1; cursor: help; outline: none; z-index: 20; } .manual-setup-help:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); } .manual-setup-help-panel { position: absolute; left: 0; top: calc(100% + 10px); transform: translateY(-4px); width: min(360px, calc(100vw - 44px)); padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: var(--c-panel-strong); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18); color: var(--c-text); font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease; } .manual-setup-help:hover .manual-setup-help-panel, .manual-setup-help:focus .manual-setup-help-panel, .manual-setup-help:focus-within .manual-setup-help-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .manual-setup-help-panel strong { display: block; margin-bottom: 8px; font-size: 12px; color: var(--c-text); } .manual-setup-help-panel ol { margin: 0; padding-left: 18px; } .manual-setup-help-panel li + li { margin-top: 6px; } .manual-setup-help-fields { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--c-line) 82%, transparent); color: var(--c-muted); } .manual-setup-help-fields b { color: var(--c-text); } .source-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .source-access-chip { position: relative; display: block; cursor: pointer; } .source-access-chip input { position: absolute; opacity: 0; pointer-events: none; } .source-access-chip-copy { display: grid; gap: 4px; min-height: 100%; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 90%, white 10%), color-mix(in srgb, var(--c-panel) 96%, transparent)); transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .source-access-chip:hover .source-access-chip-copy { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); box-shadow: 0 14px 28px rgba(15,23,42,0.07); } .source-access-chip-copy strong { font-size: 13px; color: var(--c-text); } .source-access-chip-copy span { font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--c-muted); overflow-wrap: anywhere; } .source-access-chip input:checked + .source-access-chip-copy { border-color: rgba(37,99,235,0.34); background: radial-gradient(circle at top right, rgba(56,189,248,0.14), transparent 40%), linear-gradient(180deg, rgba(219,234,254,0.88), rgba(255,255,255,0.98)); box-shadow: 0 16px 28px rgba(37,99,235,0.12); } [data-theme="dark"] .conversation-memory-card { background: radial-gradient(circle at top right, rgba(56,189,248,0.12), transparent 38%), linear-gradient(180deg, rgba(15,23,42,0.96), rgba(11,18,32,0.92)); border-color: rgba(96,165,250,0.14); box-shadow: 0 18px 32px rgba(2,6,23,0.28); } [data-theme="dark"] .source-composer-picker, [data-theme="dark"] .source-composer-summary-card, [data-theme="dark"] .source-composer-stage { border-color: rgba(96,165,250,0.16); background: radial-gradient(circle at top right, rgba(56,189,248,0.14), transparent 34%), linear-gradient(180deg, rgba(15,23,42,0.94), rgba(11,18,32,0.92)); box-shadow: 0 24px 46px rgba(2,6,23,0.34), inset 0 1px 0 rgba(255,255,255,0.04); } [data-theme="dark"] .memory-settings-card, [data-theme="dark"] .memory-settings-panel, [data-theme="dark"] .memory-avatar-current { border-color: rgba(96,165,250,0.16); background: radial-gradient(circle at top right, rgba(56,189,248,0.14), transparent 34%), linear-gradient(180deg, rgba(15,23,42,0.94), rgba(11,18,32,0.92)); box-shadow: 0 24px 46px rgba(2,6,23,0.28), inset 0 1px 0 rgba(255,255,255,0.04); } [data-theme="dark"] .memory-avatar-gallery, [data-theme="dark"] .source-composer-provider-inline, [data-theme="dark"] .source-form-section, [data-theme="dark"] .source-inline-note, [data-theme="dark"] .source-help-panel, [data-theme="dark"] .select2-container--studio-source .select2-selection--single, [data-theme="dark"] .source-select2-dropdown.select2-dropdown, [data-theme="dark"] .source-select2-dropdown .select2-search__field { border-color: rgba(96,165,250,0.14); background: linear-gradient(180deg, rgba(15,23,42,0.94), rgba(11,18,32,0.9)); } [data-theme="dark"] .select2-container--studio-source .select2-selection--single { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } [data-theme="dark"] .source-select2-dropdown .select2-results__option--highlighted[aria-selected], [data-theme="dark"] .source-select2-dropdown .select2-results__option--selected { background: rgba(96,165,250,0.16); } [data-theme="dark"] .studio-source-type-card.compact { background: radial-gradient(circle at top right, rgba(56,189,248,0.1), transparent 42%), linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.84)); box-shadow: 0 18px 30px rgba(2,6,23,0.26); } [data-theme="dark"] .wiz-avatar-btn--upload { background: radial-gradient(circle at top right, rgba(56,189,248,0.12), transparent 38%), linear-gradient(180deg, rgba(15,23,42,0.96), rgba(11,18,32,0.9)); } [data-theme="dark"] .source-access-chip-copy { border-color: rgba(148,163,184,0.18); background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.86)); } [data-theme="dark"] .source-access-chip:hover .source-access-chip-copy { border-color: rgba(96,165,250,0.26); box-shadow: 0 18px 30px rgba(2,6,23,0.32); } [data-theme="dark"] .source-access-chip input:checked + .source-access-chip-copy { border-color: rgba(96,165,250,0.3); background: radial-gradient(circle at top right, rgba(56,189,248,0.18), transparent 42%), linear-gradient(180deg, rgba(30,41,59,0.98), rgba(30,64,175,0.28)); box-shadow: 0 18px 34px rgba(30,64,175,0.16); } .integration-provider-grid { width: 100%; max-width: 100%; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .integration-provider-app { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 6px 4px 8px; border: none; border-radius: 10px; background: transparent; color: var(--c-text); transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .integration-provider-app:hover:not(:disabled) { background: var(--studio-hover); } .integration-provider-app:focus-visible { outline: none; background: var(--studio-hover); box-shadow: 0 0 0 3px var(--c-accent-soft); } .integration-provider-app:disabled { cursor: not-allowed; opacity: 1; } .integration-provider-app-logo { display: inline-flex; align-items: center; justify-content: center; filter: saturate(1.02) contrast(1.02); } .integration-provider-app--rich { overflow: visible; grid-template-columns: 32px minmax(0, 1fr) 20px; justify-items: stretch; align-items: center; gap: 8px; min-height: 60px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--c-accent) 8%, var(--c-line)); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 96%, white 4%), color-mix(in srgb, var(--c-surface) 94%, transparent)); text-align: left; } .integration-provider-app--rich:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c-accent) 20%, var(--c-line)); box-shadow: 0 10px 26px rgba(15,23,42,0.07); } .integration-provider-app--rich .integration-provider-app-logo { margin-top: 0; } .integration-provider-app-copy { min-width: 0; display: grid; gap: 2px; } .integration-provider-app-name { display: block; margin: 0; overflow: visible; color: var(--c-text); font-size: 12.5px; font-weight: 540; line-height: 1.28; text-align: left; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .integration-provider-app-mark { position: absolute; top: 6px; left: 6px; z-index: 1; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(148,163,184,0.22); background: rgba(255,255,255,0.98); color: var(--c-muted); font-size: 10px; font-weight: 700; box-shadow: 0 4px 8px rgba(15,23,42,0.08); } .integration-provider-app-mark::before { content: none; } .integration-provider-app-info { position: relative; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; justify-self: end; border-radius: 999px; border: 1px solid rgba(148,163,184,0.18); background: color-mix(in srgb, var(--c-panel) 88%, transparent); color: var(--c-muted); font-size: 11px; font-weight: 650; line-height: 1; } .integration-provider-app--rich .integration-provider-app-info { position: static; } .integration-provider-info-panel { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(260px, 70vw); display: none; padding: 10px 11px; border: 1px solid rgba(148,163,184,0.24); border-radius: 10px; background: #fff; box-shadow: 0 18px 38px rgba(15,23,42,0.14); color: var(--c-text); font-size: 11.5px; font-weight: 500; line-height: 1.45; text-align: left; } .integration-provider-app--rich .integration-provider-info-panel { right: 10px; width: min(236px, calc(100% - 20px)); } .integration-provider-info-panel span { display: block; } .integration-provider-info-panel span + span { margin-top: 6px; color: var(--c-muted); } .integration-provider-app-info:hover .integration-provider-info-panel, .integration-provider-app:focus-visible .integration-provider-info-panel { display: block; } .integration-provider-app-mark.is-connected { border-color: rgba(5,150,105,0.28); background: rgba(5,150,105,0.12); color: #047857; } .integration-provider-app-mark.is-ready { border-color: rgba(124,58,237,0.24); background: rgba(124,58,237,0.10); color: #6d28d9; } .integration-provider-app-mark.is-attention { border-color: rgba(245,158,11,0.28); background: rgba(245,158,11,0.12); color: #b45309; } .integration-provider-app-mark.is-inactive { border-color: rgba(148,163,184,0.18); background: rgba(148,163,184,0.12); color: #475569; } .integration-connection-actions { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .integration-connection-card { padding: 10px 12px; border-radius: 12px; } .integration-connection-row { gap: 12px; align-items: center; } .integration-connection-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; } .integration-connection-copy { min-width: 0; flex: 1; display: grid; gap: 3px; } .integration-connection-title-row { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .integration-connection-name { min-width: 0; overflow: visible; color: var(--c-text); font-size: 13px; font-weight: 560; line-height: 1.25; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .integration-connection-status { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); font-size: 11px; font-weight: 650; line-height: 1.2; } .integration-connection-status span { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .integration-connection-status.good { color: var(--c-good); } .integration-connection-meta { min-width: 0; overflow: hidden; color: var(--c-muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .integration-connection-info .integration-provider-info-panel { font-family: var(--studio-code); word-break: break-all; } .integration-connection-update-btn { width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; } .integration-connection-update-btn svg { width: 15px; height: 15px; stroke-width: 2; } .integration-connection-update-btn:disabled { opacity: 0.55; } @media (max-width: 640px) { .integration-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .integration-provider-info-panel { right: -4px; width: min(236px, 76vw); } .integration-connection-row { align-items: flex-start; } .integration-connection-actions { width: 100%; justify-content: flex-start; padding-left: 44px; } .integration-connection-actions .studio-button-danger { flex: 1 1 148px; max-width: 190px; } } [data-theme="dark"] .integration-provider-app:hover:not(:disabled), [data-theme="dark"] .integration-provider-app:focus-visible { background: rgba(96,165,250,0.08); } [data-theme="dark"] .integration-provider-app--rich { border-color: rgba(96,165,250,0.14); background: linear-gradient(180deg, rgba(15,23,42,0.94), rgba(15,23,42,0.86)); } [data-theme="dark"] .integration-provider-app-mark { border-color: rgba(148,163,184,0.2); background: rgba(15,23,42,0.92); color: #cbd5e1; } [data-theme="dark"] .integration-provider-app-mark.is-connected { border-color: rgba(52,211,153,0.26); background: rgba(52,211,153,0.16); color: #bff3de; } [data-theme="dark"] .integration-provider-app-mark.is-ready { border-color: rgba(192,132,252,0.28); background: rgba(124,58,237,0.18); color: #ddd6fe; } [data-theme="dark"] .integration-provider-app-mark.is-attention { border-color: rgba(245,158,11,0.28); background: rgba(245,158,11,0.18); color: #f5c266; } [data-theme="dark"] .integration-provider-app-mark.is-inactive { border-color: rgba(71,85,105,0.24); background: rgba(15,23,42,0.42); color: #cbd5e1; } [data-theme="dark"] .integration-provider-app-info { border-color: rgba(148,163,184,0.2); background: rgba(15,23,42,0.7); color: #cbd5e1; } [data-theme="dark"] .integration-provider-info-panel { border-color: rgba(96,165,250,0.18); background: #0b1220; box-shadow: 0 20px 42px rgba(2,6,23,0.48); } .integration-layout { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(204px, 244px) minmax(0, 1fr); gap: 12px; align-items: start; } .integration-sidebar { position: sticky; top: 72px; align-self: start; } .integration-sidebar-card { display: grid; gap: 10px; padding: 12px; background: color-mix(in srgb, var(--c-panel) 94%, var(--c-surface)); } .integration-sidebar-head { display: grid; gap: 4px; } .integration-sidebar-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-hi); } .integration-sidebar-title { margin: 0; font-size: 16px; line-height: 1.15; color: var(--c-text); } .integration-project-nav { display: grid; gap: 6px; } .integration-project-nav-item { min-width: 0; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(15,23,42,0.08); border-radius: 12px; background: rgba(255,255,255,0.86); text-align: left; transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease; box-shadow: 0 8px 24px rgba(15,23,42,0.05); } .integration-project-nav-item:hover { border-color: rgba(37,99,235,0.2); box-shadow: 0 14px 28px rgba(15,23,42,0.08), 0 0 0 1px rgba(37,99,235,0.06); } .integration-project-nav-item.is-active { border-color: rgba(37,99,235,0.28); background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(124,58,237,0.06)); box-shadow: 0 18px 34px rgba(15,23,42,0.1), 0 0 0 1px rgba(37,99,235,0.1); } .integration-project-nav-avatar { width: 34px; height: 34px; min-width: 34px; border-radius: 11px; font-size: 16px; } .integration-project-nav-copy { min-width: 0; flex: 1; display: grid; gap: 3px; } .integration-project-nav-name { font-size: 13px; font-weight: 560; line-height: 1.25; color: var(--c-text); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .integration-project-nav-meta { font-size: 11px; line-height: 1.4; color: var(--c-muted); } .integration-project-nav-badge { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.18); color: var(--c-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; } .integration-project-nav-badge.good { background: rgba(5,150,105,0.12); border-color: rgba(5,150,105,0.22); color: var(--c-good); } .integration-project-nav-badge.attention { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.2); color: var(--c-warn); } .integration-project-stack { gap: 10px; min-width: 0; } .integration-project-section { min-width: 0; overflow: visible; scroll-margin-top: 74px; transition: border-color 140ms ease, box-shadow 160ms ease; } .integration-project-section.is-active { border-color: rgba(37,99,235,0.22); box-shadow: 0 20px 42px rgba(15,23,42,0.1), 0 0 0 1px rgba(37,99,235,0.07); } .integration-project-count { color: var(--c-muted); font-size: 11.5px; font-weight: 500; line-height: 1.35; } .integration-divider { margin: 14px 0; } [data-theme="dark"] .integration-sidebar-card { background: rgba(11,18,32,0.95); box-shadow: 0 18px 36px rgba(2,6,23,0.38), inset 0 1px 0 rgba(255,255,255,0.04); } [data-theme="dark"] .integration-sidebar-eyebrow { color: #93c5fd; } [data-theme="dark"] .integration-project-nav-item { border-color: rgba(96,165,250,0.13); background: rgba(11,18,32,0.9); box-shadow: 0 16px 30px rgba(2,6,23,0.34), inset 0 1px 0 rgba(255,255,255,0.03); } [data-theme="dark"] .integration-project-nav-item:hover { border-color: rgba(96,165,250,0.26); box-shadow: 0 20px 38px rgba(2,6,23,0.42), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(96,165,250,0.07); } [data-theme="dark"] .integration-project-nav-item.is-active { border-color: rgba(96,165,250,0.36); background: linear-gradient(135deg, rgba(96,165,250,0.16), rgba(124,58,237,0.1)); box-shadow: 0 24px 42px rgba(2,6,23,0.46), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(96,165,250,0.11); } [data-theme="dark"] .integration-project-nav-badge { background: rgba(15,23,42,0.56); border-color: rgba(96,165,250,0.18); color: #cbd5e1; } [data-theme="dark"] .integration-project-nav-badge.good { background: rgba(100,160,70,0.18); border-color: rgba(144,200,120,0.22); color: #c4e8a8; } [data-theme="dark"] .integration-project-nav-badge.attention { background: rgba(200,140,30,0.18); border-color: rgba(220,160,50,0.24); color: #f4d080; } [data-theme="dark"] .integration-project-section.is-active { border-color: rgba(96,165,250,0.28); box-shadow: 0 24px 46px rgba(2,6,23,0.44), 0 0 0 1px rgba(96,165,250,0.11); } /* Identity shell (wizard step 1 legacy) */ .studio-identity-shell { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr); gap:14px; align-items:start; } .studio-identity-fields { display:grid; gap:0; } .studio-identity-preview { display:grid; gap:10px; align-content:start; } .studio-hero-panel, .studio-preview-card, .studio-avatar-panel { padding:14px; border-radius:calc(var(--r-lg) - 2px); border:1px solid var(--c-line); background:var(--c-panel-strong); box-shadow:var(--shadow-sm); } .studio-preview-card-head { display:flex; gap:12px; align-items:flex-start; } .studio-preview-card p { margin:10px 0 0; font-size:12.5px; line-height:1.6; color:var(--c-muted); } .studio-mini-stat-grid, .studio-review-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .studio-mini-stat { padding:10px; border-radius:12px; border:1px solid var(--c-line); background:var(--c-panel); } .studio-mini-stat span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted); } .studio-mini-stat strong { display:block; margin-top:4px; font-size:16px; letter-spacing:-.02em; } .studio-icon-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:8px; } .studio-icon-button { width:100%; min-height:74px; padding:8px 8px; border-radius:12px; border:1.5px solid var(--c-line); background:var(--c-panel); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:5px; font-size:20px; text-align:left; transition:transform 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease; } .studio-icon-button:hover { transform:translateY(-1px); } .studio-icon-button.active { background:var(--c-accent-soft); border-color:var(--c-accent); box-shadow:0 4px 12px var(--c-accent-glow); } .studio-icon-glyph { font-size:20px; line-height:1; } .studio-icon-label { font-size:10px; color:var(--c-muted); font-weight:600; letter-spacing:.03em; } .studio-icon-button.active .studio-icon-label { color:var(--c-accent-hi); } [data-theme="dark"] .studio-icon-button.active .studio-icon-label { color:var(--c-accent); } /* end styles/pages/wizard.css */ /* begin styles/pages/auth.css */ /* ============================================================ AUTH GATE + MODAL ============================================================ */ .auth-gate { min-height: calc(100vh - 54px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-gate-card { max-width: 560px; width:100%; text-align:center; } .auth-gate-logo { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 24px; display: block; box-sizing: border-box; padding: 4px; box-shadow: none; } .auth-gate-logo .studio-brand-mark-img { width: 100%; height: 100%; } .auth-gate-heading { font-family: var(--font-display); font-size: clamp(28px,5vw,44px); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 12px; } .auth-gate-sub { color: var(--c-muted); font-size: 15px; line-height:1.6; margin: 0 0 32px; max-width:44ch; margin-left:auto; margin-right:auto; } .auth-gate-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .auth-gate-features { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 32px; } .auth-gate-feat { padding: 6px 14px; border-radius: var(--r-pill); background: var(--c-panel-strong); border: 1px solid var(--c-line); font-size: 12px; color: var(--c-muted); } /* end styles/pages/auth.css */ /* begin styles/pages/enterprise-viewer.css */ /* ============================================================ ENTERPRISE MEMORY VIEWER — compact workspace ============================================================ */ /* Pin the shell to viewport height (like playground) so the flex chain can fill down to the grid columns — without this the grid has no defined height and overflow:hidden on the sidebar clips content. */ .studio-shell.studio-shell-enterprise-viewer { min-height: 0; height: var(--studio-playground-vh, 100vh); overflow: hidden; overscroll-behavior: none; } @supports (height: 100dvh) { .studio-shell.studio-shell-enterprise-viewer { height: var(--studio-playground-vh, 100dvh); min-height: var(--studio-playground-vh, 100dvh); } } /* Override studio-main's max-width / padding / margin for full-bleed layout */ .enterprise-viewer-shell { max-width: none; margin: 0; padding: 0; flex: 1; min-height: 0; background: var(--c-bg); overflow: hidden; overscroll-behavior: none; display: flex; flex-direction: column; } .enterprise-viewer-page { width: 100%; flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .enterprise-viewer-section-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--c-muted); } /* Layout */ .enterprise-viewer-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: stretch; gap: 0; } .enterprise-viewer-sidebar-backdrop { display: none; } /* ── Sidebar ─────────────────────────────────────────────── */ .enterprise-viewer-sidebar { min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; background: var(--c-surface); border-right: 1px solid var(--c-line); border-radius: 0; } [data-theme="dark"] .enterprise-viewer-sidebar { background: var(--c-surface); } .enterprise-viewer-sidebar::before { display: none; } .enterprise-viewer-sidebar-mobile-head { display: none; } .enterprise-viewer-sidebar-head, .enterprise-viewer-memory-list { position: relative; z-index: 1; } .enterprise-viewer-sidebar-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--c-line); flex-shrink: 0; } /* Hide the decorative brand block on desktop */ .enterprise-viewer-sidebar-brand { display: none; } .enterprise-viewer-search { margin-top: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 32px; border-radius: 4px; border: 1px solid var(--c-line); background: var(--c-bg); box-shadow: none; color: var(--c-muted); } [data-theme="dark"] .enterprise-viewer-search { background: var(--c-bg); border-color: var(--c-line); } .enterprise-viewer-search input { width: 100%; min-width: 0; border: none; background: transparent; color: var(--c-text); font: inherit; font-size: 13px; } .enterprise-viewer-search input:focus { outline: none; } .enterprise-viewer-sidebar-summary { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } /* ── Memory list items ───────────────────────────────────── */ .enterprise-viewer-memory-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; padding: 4px 0; } .enterprise-viewer-memory-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 12px; border: none; border-radius: 0; background: transparent; color: var(--c-text); text-align: left; cursor: pointer; transition: background 100ms ease; } [data-theme="dark"] .enterprise-viewer-memory-item { background: transparent; } .enterprise-viewer-memory-item:hover { transform: none; border-color: transparent; box-shadow: none; background: rgba(0,0,0,0.04); } .enterprise-viewer-memory-item.is-active { transform: none; border-color: transparent; box-shadow: none; background: rgba(37,99,235,0.08); } [data-theme="dark"] .enterprise-viewer-memory-item:hover { background: rgba(255,255,255,0.05); box-shadow: none; } [data-theme="dark"] .enterprise-viewer-memory-item.is-active { background: rgba(59,130,246,0.12); box-shadow: none; } .enterprise-viewer-memory-avatar { width: 28px; height: 28px; font-size: 13px; border-radius: 6px; overflow: hidden; box-shadow: none; } .enterprise-viewer-memory-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .enterprise-viewer-memory-item-name { min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enterprise-viewer-memory-item-id { font-size: 11px; font-style: italic; font-weight: 400; text-transform: none; color: var(--c-muted); opacity: 0.72; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Empty / loading states ──────────────────────────────── */ .enterprise-viewer-empty-list, .enterprise-viewer-chat-empty, .enterprise-viewer-chat-empty-state, .enterprise-viewer-error, .enterprise-viewer-loading { display: grid; place-items: center; text-align: center; min-height: 200px; padding: 24px; } .enterprise-viewer-empty-list { border: 1px dashed var(--c-line); border-radius: 6px; margin: 8px; } .enterprise-viewer-empty-list-icon, .enterprise-viewer-chat-empty-mark { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; background: rgba(37,99,235,0.08); color: var(--c-text); margin-bottom: 10px; } /* ── Chat panel ──────────────────────────────────────────── */ .enterprise-viewer-chat { min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 0; overscroll-behavior: none; } /* Compact single-row header like Teams */ .enterprise-viewer-chat-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 16px; height: 56px; min-height: 56px; flex-shrink: 0; border-bottom: 1px solid var(--c-line); background: var(--c-surface); } [data-theme="dark"] .enterprise-viewer-chat-head { background: var(--c-surface); } .enterprise-viewer-chat-head-main, .enterprise-viewer-chat-title-row, .enterprise-viewer-chat-head-actions { display: flex; gap: 10px; } .enterprise-viewer-chat-head-main { min-width: 0; flex: 1; align-items: center; } .enterprise-viewer-sidebar-toggle, .enterprise-viewer-sidebar-close { display: none; width: 32px; height: 32px; min-width: 32px; padding: 0; justify-content: center; border-radius: 6px; } .enterprise-viewer-chat-title-row { min-width: 0; flex: 1; align-items: center; } .enterprise-viewer-chat-avatar { width: 32px; height: 32px; font-size: 14px; border-radius: 6px; overflow: hidden; box-shadow: none; flex-shrink: 0; } .enterprise-viewer-chat-title-copy { min-width: 0; display: flex; flex-direction: column; } /* Hide workspace kicker in compact header */ .enterprise-viewer-chat-title-copy .enterprise-viewer-section-kicker { display: none; } .enterprise-viewer-chat-title-copy h2 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; } .enterprise-viewer-chat-title-copy p { margin: 0; max-width: none; font-size: 12px; line-height: 1.3; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enterprise-viewer-chat-head-actions { align-items: center; justify-content: flex-end; flex-wrap: nowrap; flex-shrink: 0; gap: 8px; } .enterprise-viewer-clear-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; justify-content: center; border-radius: 999px; flex-shrink: 0; color: var(--c-muted); } .enterprise-viewer-clear-btn:hover:not(:disabled) { color: var(--c-danger); } .enterprise-viewer-clear-btn:disabled { opacity: 0.42; cursor: not-allowed; } /* Starter prompts */ .enterprise-viewer-starters { padding: 10px 16px 0; } .enterprise-viewer-starters .enterprise-viewer-section-kicker { display: none; } .enterprise-viewer-starters-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0; } /* Chat log */ .enterprise-viewer-chat-log { flex: 1; min-height: 0; padding: 14px 16px; overscroll-behavior: contain; } /* Composer */ .enterprise-viewer-composer { border-top: 1px solid var(--c-line); background: var(--c-surface); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); overflow-anchor: none; } [data-theme="dark"] .enterprise-viewer-composer { background: var(--c-surface); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 1180px) { .enterprise-viewer-layout { grid-template-columns: 260px minmax(0, 1fr); } } @media (max-width: 900px) { .studio-shell.studio-shell-enterprise-viewer > .studio-topbar { display: none; } .enterprise-viewer-layout { grid-template-columns: 1fr; } .enterprise-viewer-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 84; border: none; background: rgba(15,23,42,0.44); backdrop-filter: blur(3px); } .enterprise-viewer-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 85; width: min(320px, 92vw); max-width: none; transform: translateX(-100%); transition: transform 180ms ease; box-shadow: 4px 0 20px rgba(15,23,42,0.12); } [data-theme="dark"] .enterprise-viewer-sidebar { box-shadow: 4px 0 24px rgba(2,6,23,0.4); } .enterprise-viewer-sidebar.is-open { transform: translateX(0); } .enterprise-viewer-sidebar-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 10px; border-bottom: 1px solid var(--c-line); flex-shrink: 0; position: relative; z-index: 1; } .enterprise-viewer-sidebar-toggle, .enterprise-viewer-sidebar-close { display: inline-flex; } .enterprise-viewer-chat { border-radius: 0; } .enterprise-viewer-chat-head { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(18px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); min-height: calc(56px + env(safe-area-inset-top, 0px)); } .enterprise-viewer-chat-log { padding-bottom: 10px; } .enterprise-viewer-composer { padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px)); border-top-color: rgba(148,163,184,0.16); background: rgba(255,255,255,0.96); } [data-theme="dark"] .enterprise-viewer-composer { background: rgba(8,13,28,0.96); } .enterprise-viewer-composer .pg-textarea { font-size: 16px; } } @media (max-width: 640px) { .enterprise-viewer-chat-head { height: auto; min-height: 48px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; } .enterprise-viewer-chat-head-actions { flex-wrap: wrap; gap: 6px; } .enterprise-viewer-starters, .enterprise-viewer-chat-log { padding-left: 12px; padding-right: 12px; } .enterprise-viewer-chat-title-copy p { display: none; } .enterprise-viewer-memory-item { padding: 7px 12px; } } /* end styles/pages/enterprise-viewer.css */ /* begin styles/pages/public-chat.css */ /* ============================================================ PUBLIC AGENT CHAT ============================================================ */ .public-agent-shell { flex: 1; min-height: 0; overflow: hidden; padding: clamp(16px, 2.2vw, 24px); background: radial-gradient(680px 360px at 8% 0%, rgba(37,99,235,0.12), transparent 58%), radial-gradient(620px 340px at 96% 6%, rgba(124,58,237,0.1), transparent 58%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,255,0.86)); } [data-theme="dark"] .public-agent-shell { background: radial-gradient(700px 380px at 10% 0%, rgba(96,165,250,0.14), transparent 58%), radial-gradient(640px 360px at 94% 8%, rgba(192,132,252,0.12), transparent 56%), linear-gradient(180deg, rgba(8,13,28,0.98), rgba(11,18,32,0.92)); } .public-agent-page { width: min(1480px, 100%); height: 100%; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .public-agent-page-mark { width: 42px; height: 42px; border-radius: 14px; padding: 4px; background: linear-gradient(180deg, rgba(11,18,32,0.94), rgba(15,23,42,0.86)); border: 1px solid rgba(96,165,250,0.14); box-shadow: var(--shadow-sm); } [data-theme="dark"] .public-agent-page-mark { background: linear-gradient(180deg, rgba(8,13,28,0.96), rgba(11,18,32,0.88)); } .public-agent-topbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; } .public-agent-topbar-brand { min-width: 0; display: inline-flex; align-items: center; gap: 12px; padding: 0; border: none; background: transparent; color: var(--c-text); text-align: left; font: inherit; cursor: pointer; } .public-agent-topbar-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .public-agent-topbar-copy strong { font-size: 15px; line-height: 1.2; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .public-agent-topbar-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); } .public-agent-topbar-actions { min-width: 0; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .public-agent-theme-toggle { flex-shrink: 0; } .public-agent-menu-btn, .public-agent-sidebar-close { display: none; width: 38px; height: 38px; min-width: 38px; padding: 0; justify-content: center; border-radius: 12px; } .public-agent-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 16px; align-items: stretch; } .public-agent-sidebar-backdrop { display: none; } .public-agent-sidebar { min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 0; overflow-y: auto; scrollbar-gutter: stable; } .public-agent-sidebar-mobile-head { display: none; } .public-agent-sidebar-card { padding: 18px; border-top: 1px solid var(--c-line); } .public-agent-sidebar-card:first-child { border-top: none; } .public-agent-sidebar-card--hero { position: relative; overflow: hidden; padding: 0; } .public-agent-sidebar-band { position: absolute; inset: 0 0 auto 0; height: 140px; opacity: 0.5; background: radial-gradient(circle at top left, rgba(96,165,250,0.22), transparent 42%), radial-gradient(circle at top right, rgba(192,132,252,0.18), transparent 46%), radial-gradient(circle at top left, rgba(255,255,255,0.34), transparent 42%), linear-gradient(135deg, rgba(255,255,255,0.08), transparent 58%); } .public-agent-sidebar-hero { position: relative; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; } .public-agent-sidebar-brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: var(--c-text); text-decoration: none; } .public-agent-sidebar-brand-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); } .public-agent-sidebar-avatar { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 28px; font-weight: 700; box-shadow: 0 18px 30px rgba(15,23,42,0.14), inset 0 1px 0 rgba(255,255,255,0.2); overflow: hidden; } .public-agent-sidebar-copy { display: flex; flex-direction: column; gap: 8px; } .public-agent-sidebar-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); } .public-agent-sidebar-title { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); line-height: 0.98; letter-spacing: -0.05em; color: var(--c-text); } .public-agent-sidebar-role { margin: 0; font-size: 14px; color: var(--c-text); font-weight: 600; } .public-agent-sidebar-desc { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--c-muted); } .public-agent-sidebar-chips { position: relative; padding: 0 20px 20px; display: flex; flex-wrap: wrap; gap: 8px; } .public-agent-sidebar-grid { display: grid; gap: 0; } .public-agent-sidebar-label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); } .public-agent-sidebar-value { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 560; letter-spacing: -0.02em; color: var(--c-text); } .public-agent-sidebar-card p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--c-muted); } .public-agent-chat-shell { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; } .public-agent-chat-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 12px; border-bottom: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 42%), linear-gradient(180deg, rgba(255,255,255,0.82), rgba(244,247,255,0.52)); backdrop-filter: blur(16px); } [data-theme="dark"] .public-agent-chat-head { background: radial-gradient(circle at top right, rgba(96,165,250,0.08), transparent 44%), linear-gradient(180deg, rgba(15,23,42,0.9), rgba(11,18,32,0.72)); } .public-agent-chat-head-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .public-agent-chat-head-copy { min-width: 0; } .public-agent-chat-kicker { display: inline-block; margin-bottom: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); } .public-agent-chat-title { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 28px); line-height: 1; letter-spacing: -0.04em; color: var(--c-text); } .public-agent-chat-subtitle { margin: 0; max-width: 72ch; font-size: 12.5px; line-height: 1.55; color: var(--c-muted); } .public-agent-link-row { display: flex; flex-wrap: wrap; gap: 8px; } .public-agent-link-row-compact { gap: 6px; } .public-agent-link { max-width: 100%; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-panel-strong); color: var(--c-text); text-decoration: none; font-size: 11.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; } .public-agent-link:hover { border-color: var(--c-line-strong); color: var(--c-text); } .public-agent-chat-head-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .public-agent-starters { padding: 14px 20px 0; } .public-agent-starters-label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-muted); } .public-agent-starters-row { display: flex; flex-wrap: wrap; gap: 8px; } .public-agent-prompt-chip { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: var(--c-panel-strong); color: var(--c-text); font-size: 12px; line-height: 1.25; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .public-agent-prompt-chip:hover { transform: translateY(-1px); border-color: rgba(37,99,235,0.34); background: var(--c-accent-soft); box-shadow: 0 10px 24px rgba(15,23,42,0.08); } [data-theme="dark"] .public-agent-prompt-chip:hover { box-shadow: 0 12px 26px rgba(0,0,0,0.26); } .public-agent-chat-log { padding: 22px clamp(16px, 2.8vw, 42px) 24px; background: radial-gradient(circle at top right, rgba(37,99,235,0.05), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.16), transparent 20%); } [data-theme="dark"] .public-agent-chat-log { background: radial-gradient(circle at top right, rgba(96,165,250,0.05), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.02), transparent 24%); } .public-agent-chat-log .pg-msg { gap: 10px; } .public-agent-chat-log .pg-msg-body { max-width: min(980px, 90%); } .public-agent-chat-log .pg-msg-user .pg-msg-body { max-width: min(820px, 84%); } .public-agent-msg-avatar { width: 32px; height: 32px; border-radius: 11px; font-size: 13px; overflow: hidden; } .public-agent-chat-log .pg-bubble { padding: 11px 14px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; } .public-agent-chat-log .pg-msg-user .pg-bubble { border-radius: 18px 18px 6px 18px; } .public-agent-chat-log .pg-msg-edit-btn { left: -38px; } .public-agent-chat-log .pg-msg-user-tools { padding: 0 2px; } .public-agent-chat-log .pg-msg-user-badge { color: var(--c-accent-hi); } .public-agent-chat-log .pg-msg-assistant .pg-bubble { border-radius: 18px 18px 18px 6px; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,247,255,0.84)); } [data-theme="dark"] .public-agent-chat-log .pg-msg-assistant .pg-bubble { background: linear-gradient(180deg, rgba(15,23,42,0.94), rgba(11,18,32,0.88)); } .public-agent-chat-log .pg-meta { padding: 0 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--c-muted); } .public-agent-msg-meta { margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--c-muted); } .public-assistant-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .public-assistant-stack.is-guide-compact { gap: 6px; margin-top: 6px; } .public-assistant-status { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 1px 2px 0; color: color-mix(in srgb, var(--c-muted) 90%, var(--c-text)); font-size: 11px; line-height: 1.4; font-style: italic; letter-spacing: 0.01em; } .public-assistant-status.is-accent { color: var(--c-accent-hi); } .public-assistant-status.is-warning { color: #b45309; } .public-assistant-status.is-danger { color: #b91c1c; } .public-assistant-status-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .public-assistant-status-dots { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; } .public-assistant-status-dots span { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.22; animation: publicAssistantStatusPulse 1.1s ease-in-out infinite; } .public-assistant-status-dots span:nth-child(2) { animation-delay: 0.16s; } .public-assistant-status-dots span:nth-child(3) { animation-delay: 0.32s; } @keyframes publicAssistantStatusPulse { 0%, 80%, 100% { opacity: 0.22; transform: translateY(0); } 40% { opacity: 0.92; transform: translateY(-1px); } } .public-guide-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 1px 0 0; } .public-guide-rail-actions { display: inline-flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; flex: 0 0 auto; } .public-guide-rail .public-assistant-btn { min-height: 25px; padding: 0 9px; font-size: 10px; box-shadow: none; } .public-guide-status-copy { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; line-height: 1.35; font-style: italic; letter-spacing: 0.01em; } .public-guide-status-copy.is-muted { color: color-mix(in srgb, var(--c-muted) 90%, var(--c-text)); } .public-guide-status-copy.is-accent { color: var(--c-accent-hi); } .public-guide-status-copy.is-warning { color: #b45309; } .public-guide-status-copy.is-good { color: #047857; } .public-guide-status-copy.is-danger { color: #b91c1c; } .public-assistant-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-radius: 20px; border: 1px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 94%, white 6%), color-mix(in srgb, var(--c-panel) 88%, var(--c-line))), color-mix(in srgb, var(--c-panel) 88%, var(--c-line)); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08); } .public-assistant-card.is-accent { background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-soft) 74%, white 12%), color-mix(in srgb, var(--c-accent-soft) 66%, var(--c-panel))); border-color: color-mix(in srgb, var(--c-accent) 24%, var(--c-line)); } .public-assistant-card.is-warning { background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 16%, white 12%), color-mix(in srgb, #f59e0b 10%, var(--c-panel))); border-color: color-mix(in srgb, #f59e0b 22%, var(--c-line)); } .public-assistant-card.is-good { background: linear-gradient(180deg, color-mix(in srgb, #10b981 16%, white 10%), color-mix(in srgb, #10b981 10%, var(--c-panel))); border-color: color-mix(in srgb, #10b981 18%, var(--c-line)); } .public-assistant-card.is-danger { background: linear-gradient(180deg, color-mix(in srgb, #ef4444 16%, white 10%), color-mix(in srgb, #ef4444 10%, var(--c-panel))); border-color: color-mix(in srgb, #ef4444 18%, var(--c-line)); } .public-assistant-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; } .public-assistant-card-head { display: flex; align-items: center; gap: 8px; } .public-assistant-card-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-panel) 84%, white 16%); border: 1px solid color-mix(in srgb, var(--c-line) 78%, transparent); color: var(--c-text); font-size: 10.5px; line-height: 1; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .public-assistant-card-text { color: var(--c-muted); font-size: 12px; line-height: 1.55; } .public-assistant-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; } .public-assistant-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 92%, white 8%); color: var(--c-text); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .public-assistant-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-line)); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08); } .public-assistant-btn.is-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-soft) 88%, white 12%), color-mix(in srgb, var(--c-accent-soft) 74%, var(--c-panel))); border-color: color-mix(in srgb, var(--c-accent) 28%, var(--c-line)); color: var(--c-accent-hi); } .public-assistant-evidence { border: 1px solid var(--c-line); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 94%, white 6%), color-mix(in srgb, var(--c-panel) 92%, var(--c-line))); overflow: hidden; } .public-assistant-evidence summary { padding: 11px 13px; cursor: pointer; list-style: none; color: var(--c-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .public-assistant-evidence summary::-webkit-details-marker { display: none; } .public-assistant-evidence-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 13px 13px; } .public-assistant-evidence-chip { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; padding: 0 10px; border-radius: 999px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 90%, white 10%); color: var(--c-text); font-family: var(--studio-code, monospace); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .public-assistant-card.is-accent .public-assistant-card-badge { border-color: color-mix(in srgb, var(--c-accent) 26%, var(--c-line)); color: var(--c-accent-hi); } .public-assistant-card.is-warning .public-assistant-card-badge { border-color: color-mix(in srgb, #f59e0b 28%, var(--c-line)); } .public-assistant-card.is-good .public-assistant-card-badge { border-color: color-mix(in srgb, #10b981 28%, var(--c-line)); } .public-assistant-card.is-danger .public-assistant-card-badge { border-color: color-mix(in srgb, #ef4444 28%, var(--c-line)); } [data-theme="dark"] .public-assistant-card { box-shadow: 0 18px 34px rgba(2, 6, 23, 0.34); } [data-theme="dark"] .public-assistant-card-badge, [data-theme="dark"] .public-assistant-btn, [data-theme="dark"] .public-assistant-evidence-chip { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .public-assistant-card.is-guide-compact { align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 14px; box-shadow: none; } .public-assistant-card.is-guide-compact .public-assistant-card-copy { gap: 5px; } .public-assistant-card.is-guide-compact .public-assistant-card-head { gap: 6px; } .public-assistant-card.is-guide-compact .public-assistant-card-badge { min-height: 20px; padding: 0 8px; font-size: 10px; letter-spacing: 0.06em; } .public-assistant-card.is-guide-compact .public-assistant-card-text { font-size: 11px; line-height: 1.4; } .public-assistant-card.is-guide-compact .public-assistant-actions { align-self: center; justify-content: flex-start; gap: 6px; } .public-assistant-card.is-guide-compact .public-assistant-btn { min-height: 28px; padding: 0 10px; font-size: 10.5px; box-shadow: none; } .assistant-result-list { display: grid; gap: 10px; } .assistant-result-card { display: grid; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 92%, white 8%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); } [data-theme="dark"] .assistant-result-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .assistant-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .assistant-result-heading { min-width: 0; display: grid; gap: 4px; } .assistant-result-kicker { color: var(--c-muted); font-size: 10.5px; line-height: 1.2; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .assistant-result-title { color: var(--c-text); font-size: 13.5px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; word-break: break-word; } .assistant-result-summary, .assistant-result-detail { margin: 0; color: var(--c-muted); font-size: 12px; line-height: 1.58; overflow-wrap: anywhere; word-break: break-word; } .assistant-result-rows { display: grid; gap: 6px; } .assistant-result-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; } .assistant-result-label { color: var(--c-muted); font-size: 10.5px; line-height: 1.25; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .assistant-result-value { color: var(--c-text); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; } .assistant-result-body { padding: 10px 11px; border-radius: 12px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 88%, white 12%); color: var(--c-text); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; } .assistant-result-verification { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 90%, white 10%); color: var(--c-text); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .assistant-result-verification.is-good { color: #059669; border-color: color-mix(in srgb, #10b981 24%, var(--c-line)); background: color-mix(in srgb, #10b981 16%, var(--c-panel)); } .assistant-result-verification.is-warning { color: #b45309; border-color: color-mix(in srgb, #f59e0b 26%, var(--c-line)); background: color-mix(in srgb, #f59e0b 16%, var(--c-panel)); } .assistant-result-verification.is-danger { color: #dc2626; border-color: color-mix(in srgb, #ef4444 26%, var(--c-line)); background: color-mix(in srgb, #ef4444 14%, var(--c-panel)); } .assistant-result-verification.is-accent { color: var(--c-accent-hi); border-color: color-mix(in srgb, var(--c-accent) 24%, var(--c-line)); background: color-mix(in srgb, var(--c-accent-soft) 56%, var(--c-panel)); } .assistant-result-ref-list, .assistant-result-actions { display: flex; flex-wrap: wrap; gap: 8px; } .assistant-result-ref, .assistant-result-action { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; padding: 0 10px; border-radius: 999px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 88%, white 12%); color: var(--c-text); font-size: 11px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; word-break: break-word; } .assistant-result-action { color: var(--c-accent-hi); } .assistant-result-action:hover, .assistant-result-ref:hover { text-decoration: underline; } .public-agent-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 32px 18px; } .public-agent-empty-badge { padding: 6px 10px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-hi); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } [data-theme="dark"] .public-agent-empty-badge { color: var(--c-accent); } .public-agent-empty h3 { margin: 0; font-size: 22px; line-height: 1.05; letter-spacing: -0.03em; color: var(--c-text); } .public-agent-empty p { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.7; color: var(--c-muted); } .public-agent-composer { flex-shrink: 0; border-top: 1px solid var(--c-line); } .studio-shell.studio-shell-public-chat .public-agent-composer { position: relative; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); overflow-anchor: none; } .public-agent-chat-error { margin-bottom: 10px; font-size: 12px; } .public-agent-composer .pg-edit-state { margin-bottom: 12px; } .public-agent-composer-box { border-radius: 16px; } .public-agent-composer .pg-textarea { font-size: 13px; line-height: 1.5; } .public-agent-composer-foot { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .public-agent-lock-shell { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vw, 32px); } .public-agent-lock-card { width: min(560px, 100%); padding: clamp(20px, 4vw, 30px); border-radius: 24px; border: 1px solid var(--c-line); background: var(--c-panel-strong); box-shadow: 0 24px 52px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.18); display: flex; flex-direction: column; gap: 18px; } [data-theme="dark"] .public-agent-lock-card { box-shadow: 0 24px 52px rgba(2,6,23,0.28), inset 0 1px 0 rgba(255,255,255,0.04); } .public-agent-lock-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--c-accent-soft); } .public-agent-lock-copy h3 { margin: 0 0 8px; font-size: 28px; line-height: 1; letter-spacing: -0.04em; color: var(--c-text); } .public-agent-lock-copy p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--c-muted); } .public-agent-lock-field { margin: 0; } .public-agent-lock-error { margin: 0; } .public-agent-lock-actions { display: flex; justify-content: flex-start; } @media (max-width:900px) { .studio-shell.studio-shell-public-chat .public-agent-shell { padding: 0; background: linear-gradient(180deg, rgba(248,250,255,0.98), rgba(244,247,255,0.94)); } [data-theme="dark"] .studio-shell.studio-shell-public-chat .public-agent-shell { background: linear-gradient(180deg, rgba(8,13,28,0.98), rgba(11,18,32,0.96)); } .studio-shell.studio-shell-public-chat .public-agent-page { width: 100%; gap: 0; } .studio-shell.studio-shell-public-chat .public-agent-topbar { position: sticky; top: 0; z-index: 40; padding: 12px 14px; border-radius: 0; backdrop-filter: blur(18px); } .studio-shell.studio-shell-public-chat .public-agent-topbar-actions .studio-chip { display: none; } .public-agent-menu-btn { display: inline-flex; } .studio-shell.studio-shell-public-chat .public-agent-layout { display: block; min-height: 0; } .public-agent-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 64; border: none; background: rgba(15,23,42,0.44); backdrop-filter: blur(2px); } .studio-shell.studio-shell-public-chat .public-agent-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 65; width: min(380px, 90vw); padding: calc(16px + env(safe-area-inset-top, 0px)) 0 calc(18px + env(safe-area-inset-bottom, 0px)); gap: 0; overflow-y: auto; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,255,0.96)); border-right: 1px solid var(--c-line); box-shadow: 24px 0 54px rgba(15,23,42,0.18); transform: translateX(-100%); transition: transform 180ms ease; } [data-theme="dark"] .studio-shell.studio-shell-public-chat .public-agent-sidebar { background: linear-gradient(180deg, rgba(11,18,32,0.98), rgba(8,13,28,0.96)); border-right-color: rgba(96,165,250,0.16); box-shadow: 28px 0 56px rgba(2,6,23,0.42); } .studio-shell.studio-shell-public-chat .public-agent-sidebar.is-open { transform: translateX(0); } .public-agent-sidebar-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 16px; border-bottom: 1px solid var(--c-line); } .public-agent-sidebar-mobile-head strong { display: block; font-size: 16px; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-text); } .public-agent-sidebar-close { display: inline-flex; } .studio-shell.studio-shell-public-chat .public-agent-chat-shell { border-radius: 0; } .studio-shell.studio-shell-public-chat .public-agent-chat-head { display: none; } .studio-shell.studio-shell-public-chat .public-agent-starters { padding: 12px 12px 0; } .studio-shell.studio-shell-public-chat .public-agent-chat-log { padding: 16px 12px 10px; background: transparent; } .studio-shell.studio-shell-public-chat .public-agent-chat-log .pg-msg { gap: 8px; } .studio-shell.studio-shell-public-chat .public-agent-msg-avatar { display: none; } .studio-shell.studio-shell-public-chat .public-agent-chat-log .pg-msg-body { max-width: 86%; } .studio-shell.studio-shell-public-chat .public-agent-chat-log .pg-msg-user .pg-msg-body { max-width: 78%; } .studio-shell.studio-shell-public-chat .public-agent-chat-log .pg-bubble { padding: 11px 14px; font-size: 14px; line-height: 1.56; } .studio-shell.studio-shell-public-chat .public-agent-chat-log .pg-msg-user .pg-bubble { border-radius: 20px 20px 6px 20px; } .studio-shell.studio-shell-public-chat .public-agent-chat-log .pg-msg-assistant .pg-bubble { border-radius: 20px 20px 20px 6px; } .studio-shell.studio-shell-public-chat .public-agent-composer { padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px)); border-top-color: rgba(148,163,184,0.16); background: rgba(255,255,255,0.96); } [data-theme="dark"] .studio-shell.studio-shell-public-chat .public-agent-composer { background: rgba(8,13,28,0.96); } .studio-shell.studio-shell-public-chat .public-agent-composer .pg-textarea, .studio-shell.studio-shell-public-chat .public-agent-lock-field .studio-input { font-size: 16px; } .studio-shell.studio-shell-public-chat .public-agent-composer-foot .pg-hint { display: none; } .studio-shell.studio-shell-public-chat .public-agent-lock-shell { padding: 12px; } } /* end styles/pages/public-chat.css */ /* begin styles/pages/playground.css */ /* ============================================================ PLAYGROUND — ChatGPT / Claude-style ============================================================ */ .studio-playground-shell { flex:1; min-height:0; height:100%; display:flex; overflow:hidden; } .studio-playground-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--c-line); overflow-anchor: none; } .studio-playground-header { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--c-line); background:rgba(255,255,255,0.88); backdrop-filter:blur(14px); flex-shrink:0; } [data-theme="dark"] .studio-playground-header { background:rgba(16,16,20,0.93); } .studio-playground-header-nav { display:flex; align-items:center; gap:8px; min-width:0; } .studio-playground-nav-btn { padding:6px 11px; font-size:12px; flex-shrink:0; } .studio-playground-header-identity { display:flex; align-items:center; gap:10px; min-width:0; } .studio-playground-header-identity > div:last-child { min-width:0; } .studio-playground-header-name { font-weight:600; font-size:14px; letter-spacing:-.01em; } .studio-playground-header-meta { font-size:11.5px; color:var(--c-muted); } .studio-playground-header-chips { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; } .studio-playground-mobile-header-actions { display:none; margin-left:auto; } .studio-playground-menu-btn, .studio-playground-mobile-drawer-close { width:38px; height:38px; min-width:38px; padding:0; justify-content:center; border-radius:12px; } .studio-playground-mobile-toolbar, .studio-playground-mobile-panel { display:none; } .studio-playground-mobile-backdrop, .studio-playground-mobile-drawer { display:none; } .studio-playground-mobile-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .studio-playground-mobile-drawer-copy { min-width:0; display:flex; flex-direction:column; gap:4px; } .studio-playground-mobile-drawer-copy strong { font-size:16px; line-height:1.1; letter-spacing:-.02em; color:var(--c-text); } .studio-playground-mobile-toggle { min-height:36px; justify-content:center; font-size:12px; } .studio-playground-mobile-toggle.active { border-color: rgba(37,99,235,0.28); background: var(--c-accent-soft); color: var(--c-accent-hi); } .pg-notice { margin:12px 32px 0; padding:10px 14px; border-radius:var(--r-sm); font-size:12.5px; line-height:1.5; } .pg-notice a { color:inherit; text-decoration:underline; cursor:pointer; } .pg-notice-warn { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.28); color:var(--c-text); } .studio-chat-log { flex:1; min-height:0; overflow-y:auto; padding:28px 32px; display:flex; flex-direction:column; gap:22px; scroll-behavior:smooth; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-anchor: none; scroll-padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } .studio-chat-log::-webkit-scrollbar { width:5px; } .studio-chat-log::-webkit-scrollbar-thumb { background:var(--c-line-strong); border-radius:999px; } .pg-msg { display:flex; gap:10px; align-items:flex-start; } .pg-msg-user { flex-direction:row-reverse; } .pg-msg-avatar { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex-shrink:0; background:var(--c-accent-soft); border:1px solid rgba(37,99,235,.18); overflow: hidden; } .pg-msg-body { display:flex; flex-direction:column; gap:6px; max-width:74%; } .pg-msg-assistant .pg-msg-body { max-width:min(880px, 86%); } .pg-msg-user .pg-msg-body { align-items:flex-end; } .pg-msg-bubble-wrap { position:relative; display:inline-flex; align-items:center; max-width:100%; } .pg-msg-user-tools { display:flex; align-items:center; justify-content:flex-end; padding:0 4px; } .pg-msg-user-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--c-accent-hi); } .pg-msg-edit-btn { position:absolute; top:50%; left:-42px; width:32px; height:32px; min-width:32px; padding:0; align-items:center; justify-content:center; border-radius:11px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.92); color:var(--c-muted); line-height:1; opacity:0; pointer-events:none; transform:translateY(-50%) scale(.92); transition:border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease; box-shadow:0 8px 18px rgba(15,23,42,.06); } .pg-msg-edit-btn svg { width:14px; height:14px; } .pg-msg-user.is-editable:hover .pg-msg-edit-btn, .pg-msg-user.is-editable:focus-within .pg-msg-edit-btn, .pg-msg-user.is-editing .pg-msg-edit-btn { opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); } .pg-msg-edit-btn:hover:not(:disabled) { border-color:rgba(37,99,235,.24); background:var(--c-accent-soft); color:var(--c-accent-hi); box-shadow:0 12px 24px rgba(15,23,42,.10); } .pg-msg-edit-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; } .pg-msg-edit-btn.active { border-color:rgba(37,99,235,.22); background:var(--c-accent-soft); color:var(--c-accent-hi); } [data-theme="dark"] .pg-msg-edit-btn { border-color:rgba(148,163,184,.18); background:rgba(15,23,42,.82); color:#cbd5e1; box-shadow:0 12px 24px rgba(0,0,0,.22); } [data-theme="dark"] .pg-msg-edit-btn:hover:not(:disabled), [data-theme="dark"] .pg-msg-edit-btn.active { border-color:rgba(96,165,250,.28); background:rgba(30,41,59,.96); color:#bfdbfe; } @media (hover:none), (pointer:coarse) { .pg-msg-edit-btn { display:none; } } .pg-bubble { padding:11px 16px; border-radius:16px; font-size:14px; line-height:1.65; white-space:pre-wrap; word-break:break-word; } .pg-bubble-rich { white-space: normal; } .pg-msg-user .pg-bubble { background:linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); color:#fff; border-radius:16px 16px 4px 16px; box-shadow:0 4px 14px var(--c-accent-glow); } .pg-msg-user.is-editing .pg-bubble { box-shadow:0 0 0 1px rgba(255,255,255,.34), 0 12px 30px var(--c-accent-glow); } .pg-msg-assistant .pg-bubble { background:var(--c-panel-strong); border:1px solid var(--c-line); border-radius:16px 16px 16px 4px; box-shadow:var(--shadow-sm); } .pg-meta { display:flex; flex-wrap:wrap; gap:5px; padding:0 4px; } .pg-loading-bubble { padding:13px 16px; border-radius:16px 16px 16px 4px; background:var(--c-panel-strong); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:5px; } .pg-rich-text { white-space: normal; } .pg-rich-text + .pg-rich-text, .pg-rich-text + .pg-code-block, .pg-code-block + .pg-rich-text, .pg-code-block + .pg-code-block { margin-top: 10px; } .pg-inline-code { display: inline-block; padding: 1px 6px; border-radius: 8px; background: var(--studio-code-bg, rgba(15,23,42,.06)); border: 1px solid var(--c-line); color: var(--c-text); font-family: var(--studio-code); font-size: .92em; line-height: 1.45; } .pg-code-block { border-radius: 14px; overflow: hidden; border: 1px solid rgba(15,23,42,.08); background: #0f172a; color: #e2e8f0; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(15,23,42,.14); } [data-theme="dark"] .pg-code-block { border-color: rgba(96,165,250,0.15); background: #090f1d; color: #dbe6f7; } .pg-code-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; background: rgba(148,163,184,.12); border-bottom: 1px solid rgba(255,255,255,.08); } .pg-code-lang { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(226,232,240,.78); } .pg-code-copy { width: 28px; height: 28px; min-width: 28px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.06); color: #e2e8f0; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; } .pg-code-copy:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); } .pg-code-copy:active { transform: translateY(1px); } .pg-code-copy.copied { color: #86efac; border-color: rgba(134,239,172,.36); background: rgba(34,197,94,.12); } .pg-code-copy svg { width: 14px; height: 14px; } .pg-code-block pre { margin: 0; padding: 16px 18px 18px; overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 12.5px; line-height: 1.72; tab-size: 2; font-family: var(--studio-code); } .pg-code-block code { display: block; font-family: inherit; color: inherit; white-space: inherit; } .pg-code-block pre::-webkit-scrollbar { height: 8px; } .pg-code-block pre::-webkit-scrollbar-thumb { background: rgba(148,163,184,.36); border-radius: 999px; } /* ── WELCOME BANNER (first-time users) ─────────────────────────── */ .studio-welcome-banner { margin-bottom: 18px; padding: 18px 20px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--c-accent-soft), rgba(124,58,237,0.08)); border: 1px solid var(--c-accent); box-shadow: 0 4px 18px var(--c-accent-glow); display: flex; flex-direction: column; gap: 14px; } .studio-welcome-banner-body { display: flex; align-items: flex-start; gap: 12px; } .studio-welcome-banner-icon { font-size: 26px; line-height: 1; flex-shrink: 0; } .studio-welcome-banner-text { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.5; } .studio-welcome-banner-text strong { color: var(--c-text); font-size: 14px; } .studio-welcome-banner-text span { color: var(--c-muted); } .studio-welcome-token-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .studio-welcome-token { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--c-panel-strong); border: 1px solid var(--c-line-strong); color: var(--c-text); user-select: all; } .studio-welcome-banner-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .studio-welcome-link { font-size: 13px; font-weight: 600; color: var(--c-accent-hi); text-decoration: none; } .studio-welcome-link:hover { text-decoration: underline; text-underline-offset: 2px; } [data-theme="dark"] .studio-welcome-link { color: var(--c-accent); } /* Syntax token colours (inside dark code blocks) */ .tok-kw { color: #93c5fd; font-weight: 600; } /* blue — keywords */ .tok-str { color: #86efac; } /* green — strings */ .tok-cmt { color: #94a3b8; font-style: italic; } /* slate — comments */ .tok-num { color: #fda4af; } /* rose — numbers */ /* Markdown rendered in assistant messages */ .pg-md { display: flex; flex-direction: column; gap: 8px; } .pg-md-h { margin: 4px 0 2px; font-weight: 700; color: var(--c-text); line-height: 1.3; } h3.pg-md-h { font-size: 1.05em; } h4.pg-md-h { font-size: .97em; } h5.pg-md-h { font-size: .92em; } .pg-md-p { margin: 0; line-height: 1.7; } .pg-md-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; } .pg-md-list li { line-height: 1.65; } .pg-md-blockquote { margin: 0; padding: 6px 12px; border-left: 3px solid var(--c-accent); background: var(--c-accent-soft); border-radius: 0 8px 8px 0; color: var(--c-text); font-style: italic; } .pg-md-hr { border: none; border-top: 1px solid var(--c-line); margin: 4px 0; } .pg-md-link { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; overflow-wrap: anywhere; word-break: break-word; } .pg-md-link:hover { opacity: .78; } .pg-md-tone { font-weight: 600; } .pg-md-tone--accent { color: var(--c-accent-hi); } .pg-md-tone--muted { color: var(--c-muted); } .pg-md-tone--success { color: #0f8c7a; } .pg-md-tone--warning { color: #b25b00; } .pg-md-tone--danger { color: var(--c-danger); } [data-theme="dark"] .pg-md-tone--success { color: #4dd4bf; } [data-theme="dark"] .pg-md-tone--warning { color: #ffb347; } /* File chips in code response meta */ .pg-file-chip { font-family: var(--studio-code, monospace); font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Answer confidence indicators */ .pg-confidence-low { background: rgba(239,68,68,.12); color: #ef4444; border-color: rgba(239,68,68,.28); font-weight: 600; } .pg-confidence-med { background: rgba(234,179,8,.1); color: #ca8a04; border-color: rgba(234,179,8,.28); } .pg-dot { width:7px; height:7px; border-radius:50%; background:var(--c-accent); animation:pgDotBounce 1.3s ease-in-out infinite; } .pg-dot:nth-child(2) { animation-delay:.18s; } .pg-dot:nth-child(3) { animation-delay:.36s; } @keyframes pgDotBounce { 0%,80%,100%{opacity:.3;transform:scale(.82);} 40%{opacity:1;transform:scale(1.14);} } .studio-composer { flex-shrink:0; padding:14px 20px 18px; background:rgba(255,255,255,0.92); border-top:1px solid var(--c-line); backdrop-filter:blur(14px); } .studio-shell.studio-shell-playground .studio-composer { position: relative; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); overflow-anchor: none; } [data-theme="dark"] .studio-composer { background:rgba(16,16,20,0.93); } .pg-edit-state { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:14px; border:1px solid rgba(37,99,235,.16); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,247,255,.9)), radial-gradient(circle at top right, rgba(37,99,235,.1), transparent 46%); box-shadow:0 12px 26px rgba(15,23,42,.06); } [data-theme="dark"] .pg-edit-state { border-color:rgba(96,165,250,.16); background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,18,32,.88)), radial-gradient(circle at top right, rgba(96,165,250,.12), transparent 48%); box-shadow:0 18px 28px rgba(0,0,0,.24); } .pg-edit-state-copy { min-width:0; display:flex; flex-direction:column; gap:4px; } .pg-edit-state-kicker { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--c-accent-hi); } .pg-edit-state-copy strong { font-size:12.5px; line-height:1.45; color:var(--c-text); font-weight:600; } .pg-edit-state-cancel { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--c-line); background:var(--c-panel-strong); color:var(--c-text); font-size:12px; font-weight:600; line-height:1; white-space:nowrap; transition:border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease; } .pg-edit-state-cancel:hover { transform:translateY(-1px); border-color:var(--c-line-strong); } .pg-composer-box { display:flex; align-items:flex-end; gap:8px; background:var(--c-panel-strong); border:1.5px solid var(--c-line-strong); border-radius:14px; padding:8px 8px 8px 15px; box-shadow:var(--shadow-sm); transition:border-color 150ms ease, box-shadow 150ms ease; } .pg-composer-box:focus-within { border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); } .pg-composer-box.is-editing { border-color:rgba(37,99,235,.32); box-shadow:0 0 0 3px rgba(37,99,235,.08), var(--shadow-sm); } .pg-textarea { flex:1; border:none; outline:none; background:none; resize:none; font-size:14px; line-height:1.6; color:var(--c-text); min-height:24px; max-height:180px; overflow-y:auto; padding:4px 0; font-family:var(--font-body); } .pg-textarea::placeholder { color:var(--c-muted); } .pg-send-btn { width:34px; height:34px; min-width:34px; border-radius:10px; border:none; background:linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 4px 12px var(--c-accent-glow); transition:transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } .pg-voice-btn, .pg-attachment-btn { width:34px; height:34px; min-width:34px; border-radius:10px; border:1px solid var(--c-line); background:var(--c-panel); color:var(--c-muted); display:grid; place-items:center; flex-shrink:0; transition:transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease, opacity 120ms ease; } .pg-voice-btn:hover:not(:disabled), .pg-attachment-btn:hover:not(:disabled) { transform:scale(1.05); border-color:rgba(37,99,235,.28); background:var(--c-accent-soft); color:var(--c-accent-hi); } .pg-voice-btn:active:not(:disabled), .pg-attachment-btn:active:not(:disabled) { transform:scale(.97); } .pg-voice-btn:disabled, .pg-attachment-btn:disabled { opacity:.38; cursor:not-allowed; } .pg-voice-btn.is-recording { border-color:rgba(239,68,68,.34); background:rgba(239,68,68,.12); color:#ef4444; animation:pgVoicePulse 1.2s ease-in-out infinite; } .pg-voice-btn.is-unsupported { border-color:rgba(245,158,11,.36); background:rgba(245,158,11,.12); color:#b45309; } .pg-voice-btn svg, .pg-attachment-btn svg { width:15px; height:15px; } .pg-attachment-menu-wrap { position:relative; flex-shrink:0; } .pg-attachment-menu { position:absolute; right:0; bottom:calc(100% + 8px); z-index:20; min-width:132px; padding:6px; border:1px solid var(--c-line); border-radius:12px; background:var(--c-panel-strong); box-shadow:var(--shadow-lg); } .pg-attachment-menu::after { content:""; position:absolute; right:13px; bottom:-5px; width:9px; height:9px; border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); background:var(--c-panel-strong); transform:rotate(45deg); } .pg-attachment-menu button { position:relative; z-index:1; width:100%; min-height:34px; display:flex; align-items:center; gap:8px; border:0; border-radius:9px; padding:0 9px; background:transparent; color:var(--c-text); font-size:12px; font-weight:650; text-align:left; } .pg-attachment-menu button:hover { background:var(--c-accent-soft); color:var(--c-accent-hi); } .pg-attachment-menu button svg { width:15px; height:15px; color:var(--c-muted); } .pg-attachment-link-popover { position:absolute; right:0; bottom:calc(100% + 8px); z-index:21; width:min(360px, calc(100vw - 32px)); display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--c-line); border-radius:14px; background:var(--c-panel-strong); box-shadow:var(--shadow-lg); } .pg-attachment-link-popover::after { content:""; position:absolute; right:13px; bottom:-5px; width:9px; height:9px; border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); background:var(--c-panel-strong); transform:rotate(45deg); } .pg-attachment-link-popover .studio-input { position:relative; z-index:1; min-width:0; flex:1; } .pg-attachment-link-action { position:relative; z-index:1; width:34px; height:34px; min-width:34px; border:1px solid rgba(37,99,235,.26); border-radius:10px; display:grid; place-items:center; background:var(--c-accent-soft); color:var(--c-accent-hi); } .pg-attachment-link-action:hover { border-color:rgba(37,99,235,.38); background:rgba(37,99,235,.14); } .pg-attachment-link-action svg { width:15px; height:15px; } @keyframes pgVoicePulse { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.22); } 50% { box-shadow:0 0 0 5px rgba(239,68,68,0); } } .pg-attachment-tray { display:flex; flex-direction:column; gap:8px; margin-top:8px; } .pg-attachment-chip-row, .pg-msg-attachments { display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .pg-attachment-chip { max-width:100%; min-width:0; display:inline-flex; align-items:center; gap:8px; padding:6px 7px 6px 8px; border-radius:12px; border:1px solid var(--c-line); background:var(--c-panel-strong); color:var(--c-text); box-shadow:var(--shadow-sm); } .pg-attachment-chip.is-extracting { border-color:rgba(37,99,235,.24); background:var(--c-accent-soft); } .pg-attachment-chip.is-error { border-color:rgba(239,68,68,.28); background:rgba(239,68,68,.08); } .pg-attachment-icon { width:24px; height:24px; min-width:24px; border-radius:8px; display:grid; place-items:center; background:var(--c-panel); color:var(--c-muted); } .pg-attachment-icon svg { width:13px; height:13px; } .pg-attachment-copy { min-width:0; display:flex; flex-direction:column; gap:1px; } .pg-attachment-copy strong { max-width:min(260px, 52vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; color:var(--c-text); } .pg-attachment-copy small { max-width:min(260px, 52vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; color:var(--c-muted); } .pg-attachment-chip.is-error .pg-attachment-copy small { color:var(--c-danger); } .pg-attachment-chip > button { width:24px; height:24px; min-width:24px; padding:0; border:none; border-radius:8px; display:grid; place-items:center; background:transparent; color:var(--c-muted); } .pg-attachment-chip > button:hover { background:var(--c-panel); color:var(--c-danger); } .pg-attachment-chip > button svg { width:13px; height:13px; } .pg-msg-attachments { justify-content:flex-end; padding:0 4px; } .pg-msg-attachment-chip { max-width:220px; display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; background:var(--c-panel); border:1px solid var(--c-line); color:var(--c-muted); font-size:11px; } .pg-msg-attachment-chip span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pg-msg-attachment-chip svg { width:12px; height:12px; min-width:12px; } .pg-send-btn:hover:not(:disabled) { transform:scale(1.07); box-shadow:0 6px 16px var(--c-accent-glow); } .pg-send-btn:active:not(:disabled) { transform:scale(.97); } .pg-send-btn:disabled { opacity:.35; cursor:not-allowed; } .pg-send-btn.is-editing { background:linear-gradient(135deg, #0f766e, #14b8a6); box-shadow:0 4px 16px rgba(20,184,166,.24); } .pg-send-btn.is-editing:hover:not(:disabled) { box-shadow:0 8px 22px rgba(20,184,166,.28); } .pg-composer-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding:0 3px; } .pg-hint { font-size:10.5px; color:var(--c-subtle); } .pg-clear-btn { font-size:11.5px; color:var(--c-muted); background:none; border:none; cursor:pointer; transition:color 120ms ease; font-family:var(--font-body); } .pg-clear-btn:hover { color:var(--c-danger); } .pg-mode-tab-row { margin-bottom:10px; } .pg-context-textarea { min-height:88px; margin-top:8px; } .pg-context-textarea-sm { min-height:68px; } .studio-playground-sidebar { width:clamp(304px, 26vw, 360px); min-width:0; min-height:0; max-height:100%; flex-shrink:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; padding:18px; display:flex; flex-direction:column; gap:12px; font-family:var(--font-body); font-size:13px; line-height:1.5; } .studio-playground-sidebar > * { min-width:0; } .pg-sidebar-section { display:flex; flex-direction:column; gap:7px; min-width:0; } .pg-sidebar-section > * { min-width:0; } .pg-sidebar-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-muted); padding:0 2px; } /* ── Chat session list ─────────────────────────────────────── */ .pg-chat-section { gap:0; } .pg-chat-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .pg-new-chat-btn { width:24px; height:24px; border-radius:var(--r-xs); border:1px solid var(--c-line-strong); background:transparent; color:var(--c-accent); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background 130ms ease, border-color 130ms ease; } .pg-new-chat-btn:hover { background:var(--c-accent-soft); border-color:rgba(37,99,235,0.35); } .pg-chat-list { display:flex; flex-direction:column; gap:2px; max-height:190px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--c-line) transparent; } .pg-chat-item { display:flex; align-items:center; gap:3px; width:100%; border-radius:var(--r-xs); border:1px solid transparent; background:transparent; transition:background 130ms ease, border-color 130ms ease; position:relative; } .pg-chat-item:hover { background:var(--c-panel); } .pg-chat-item.active { background:var(--c-accent-soft); border-color:rgba(37,99,235,0.2); } .pg-chat-item-btn { display:flex; align-items:center; gap:6px; flex:1; min-width:0; padding:7px 9px; background:transparent; border:none; cursor:pointer; text-align:left; } .pg-chat-item-name { font-size:12px; font-weight:500; color:var(--c-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } .pg-chat-item.active .pg-chat-item-name { color:var(--c-accent-hi); font-weight:600; } .pg-chat-item-count { font-size:10px; font-weight:500; color:var(--c-subtle); flex-shrink:0; background:var(--c-panel); border:1px solid var(--c-line); border-radius:var(--r-pill); padding:1px 6px; white-space:nowrap; } .pg-chat-item.active .pg-chat-item-count { background:rgba(37,99,235,0.1); border-color:rgba(37,99,235,0.2); color:var(--c-accent); } .pg-chat-item-del { flex-shrink:0; width:22px; height:22px; margin-right:5px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:var(--r-xs); color:var(--c-subtle); cursor:pointer; opacity:0; transition:opacity 130ms ease, background 130ms ease, color 130ms ease; } .pg-chat-item:hover .pg-chat-item-del { opacity:1; } .pg-chat-item-del:hover { background:var(--c-danger-soft); color:var(--c-danger); } .pg-info-row { padding:9px 12px; border-radius:var(--r-sm); background:var(--c-panel-strong); border:1px solid var(--c-line); font-size:13px; line-height:1.5; } .pg-info-row strong { display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-muted); margin-bottom:3px; } .pg-toggle-row { padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-panel-strong); border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; } .pg-toggle-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pg-toggle-copy strong { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); } .pg-toggle-sub { font-size: 12px; line-height: 1.45; color: var(--c-subtle); } .pg-toggle-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .pg-toggle-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .pg-toggle-slider { width: 42px; height: 24px; border-radius: 999px; background: rgba(148,163,184,.3); border: 1px solid rgba(148,163,184,.26); position: relative; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .pg-toggle-slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(15,23,42,.18); transition: transform 140ms ease; } .pg-toggle-switch input:checked + .pg-toggle-slider { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); border-color: transparent; box-shadow: 0 0 0 3px var(--c-accent-soft); } .pg-toggle-switch input:checked + .pg-toggle-slider::after { transform: translateX(18px); } .pg-toggle-switch input:focus-visible + .pg-toggle-slider { box-shadow: 0 0 0 3px var(--c-accent-soft); } .pg-source-item { padding:10px 12px; border-radius:var(--r-sm); background:var(--c-panel-strong); border:1px solid var(--c-line); } .pg-source-item-name { font-size:13px; font-weight:500; } .pg-source-item-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; } .assistant-task-pane { display:grid; gap:12px; width:100%; min-width:0; overflow:hidden; padding:14px; border-radius:18px; border:1px solid var(--c-line); background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,255,0.86)); box-shadow:var(--shadow-sm); font-family:var(--font-body); font-size:13px; line-height:1.5; } [data-theme="dark"] .assistant-task-pane { background:linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.78)); } .assistant-task-pane > * { min-width:0; } .assistant-task-pane.is-compact { padding:16px; } .assistant-task-pane-head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px; } .assistant-task-pane-head > div { flex:1 1 180px; min-width:0; display:grid; gap:4px; } .assistant-task-pane-head strong { display:block; font-size:14px; line-height:1.35; letter-spacing:-.02em; color:var(--c-text); overflow-wrap:anywhere; word-break:break-word; } .assistant-task-pane-kicker, .assistant-task-label { display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-muted); } .assistant-task-pane-copy, .assistant-task-inline-copy { margin:0; font-size:12.5px; line-height:1.55; color:var(--c-subtle); overflow-wrap:anywhere; word-break:break-word; } .assistant-task-empty { display:grid; gap:6px; } .assistant-task-empty strong { font-size:14px; color:var(--c-text); overflow-wrap:anywhere; } .assistant-task-empty p { margin:0; font-size:12.5px; line-height:1.55; color:var(--c-subtle); overflow-wrap:anywhere; word-break:break-word; } .assistant-task-badge { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--c-line); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; line-height:1.35; max-width:100%; flex-shrink:1; text-align:center; white-space:normal; overflow-wrap:anywhere; word-break:break-word; } .assistant-task-badge.is-muted { color:var(--c-muted); background:var(--c-panel); } .assistant-task-badge.is-accent { color:var(--c-accent-hi); background:var(--c-accent-soft); border-color:rgba(37,99,235,.18); } .assistant-task-badge.is-warning { color:#92400e; background:rgba(251,191,36,.18); border-color:rgba(245,158,11,.24); } .assistant-task-badge.is-danger { color:var(--c-danger); background:var(--c-danger-soft); border-color:rgba(220,38,38,.18); } .assistant-task-badge.is-good { color:var(--c-good); background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.18); } .assistant-task-chip-row { display:flex; flex-wrap:wrap; gap:6px; min-width:0; } .assistant-task-chip { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; padding:5px 9px; border-radius:999px; background:var(--c-panel-strong); border:1px solid var(--c-line); font-size:10.5px; font-weight:600; line-height:1.35; color:var(--c-text); white-space:normal; overflow-wrap:anywhere; word-break:break-word; } .assistant-task-section { display:grid; gap:8px; min-width:0; } .assistant-task-progress, .assistant-task-step, .assistant-task-event, .assistant-task-artifact, .assistant-task-note-list p { display:grid; gap:4px; min-width:0; overflow:hidden; padding:10px 11px; border-radius:14px; border:1px solid var(--c-line); background:var(--c-panel-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,0.24); } [data-theme="dark"] .assistant-task-progress, [data-theme="dark"] .assistant-task-step, [data-theme="dark"] .assistant-task-event, [data-theme="dark"] .assistant-task-artifact, [data-theme="dark"] .assistant-task-note-list p { box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); } .assistant-task-step.is-current { border-color:rgba(37,99,235,.24); background:linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.04)); } .assistant-task-step.is-complete { border-style:dashed; } .assistant-task-progress strong, .assistant-task-step strong, .assistant-task-event strong, .assistant-task-artifact strong { font-size:12.5px; line-height:1.45; color:var(--c-text); overflow-wrap:anywhere; word-break:break-word; } .assistant-task-progress span, .assistant-task-step span, .assistant-task-event span, .assistant-task-artifact span { font-size:11px; line-height:1.5; color:var(--c-muted); overflow-wrap:anywhere; word-break:break-word; } .assistant-task-step p, .assistant-task-event p, .assistant-task-note-list p { margin:0; font-size:12px; line-height:1.5; color:var(--c-subtle); overflow-wrap:anywhere; word-break:break-word; } .assistant-task-step-list, .assistant-task-event-list, .assistant-task-artifact-list, .assistant-task-note-list { display:grid; gap:8px; min-width:0; } .assistant-task-artifact a { display:inline-flex; align-items:center; width:fit-content; max-width:100%; font-size:11px; font-weight:600; color:var(--c-accent-hi); text-decoration:none; overflow-wrap:anywhere; word-break:break-word; } .assistant-task-artifact a:hover { text-decoration:underline; } .assistant-result-list { display:grid; gap:10px; min-width:0; } .assistant-result-card { display:grid; gap:10px; min-width:0; padding:12px; border-radius:16px; border:1px solid var(--c-line); background:linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 90%, white 10%), color-mix(in srgb, var(--c-panel-strong) 92%, var(--c-line))); box-shadow:inset 0 1px 0 rgba(255,255,255,0.22); } [data-theme="dark"] .assistant-result-card { box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); } .assistant-result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; min-width:0; } .assistant-result-heading { display:grid; gap:4px; min-width:0; } .assistant-result-kicker { font-size:10px; line-height:1.2; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); } .assistant-result-title { font-size:13px; line-height:1.45; color:var(--c-text); overflow-wrap:anywhere; word-break:break-word; } .assistant-result-summary, .assistant-result-detail { margin:0; font-size:11.5px; line-height:1.55; color:var(--c-subtle); overflow-wrap:anywhere; word-break:break-word; } .assistant-result-rows { display:grid; gap:6px; } .assistant-result-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:flex-start; } .assistant-result-label { font-size:10.5px; line-height:1.4; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-muted); } .assistant-result-value { min-width:0; font-size:11.5px; line-height:1.55; color:var(--c-text); overflow-wrap:anywhere; word-break:break-word; } .assistant-result-body { padding:10px 11px; border-radius:12px; background:var(--c-panel-strong); border:1px solid var(--c-line); font-size:11.5px; line-height:1.6; color:var(--c-text); overflow-wrap:anywhere; word-break:break-word; } .assistant-result-verification { display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; border:1px solid var(--c-line); background:var(--c-panel-strong); color:var(--c-text); font-size:10px; line-height:1; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .assistant-result-verification.is-good { color:var(--c-good); border-color:rgba(34,197,94,.2); background:rgba(34,197,94,.1); } .assistant-result-verification.is-warning { color:var(--c-warning); border-color:rgba(245,158,11,.22); background:rgba(245,158,11,.12); } .assistant-result-verification.is-danger { color:var(--c-danger); border-color:rgba(220,38,38,.18); background:var(--c-danger-soft); } .assistant-result-verification.is-accent { color:var(--c-accent-hi); border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.1); } .assistant-result-ref-list, .assistant-result-actions { display:flex; flex-wrap:wrap; gap:8px; } .assistant-result-ref, .assistant-result-action { display:inline-flex; align-items:center; min-height:28px; max-width:100%; padding:0 10px; border-radius:999px; border:1px solid var(--c-line); background:var(--c-panel-strong); color:var(--c-text); font-size:11px; font-weight:600; text-decoration:none; overflow-wrap:anywhere; word-break:break-word; } .assistant-result-action { color:var(--c-accent-hi); } .assistant-result-action:hover, .assistant-result-ref:hover { text-decoration:underline; } @media (max-width:900px) { .studio-playground-shell { position: relative; } .studio-playground-main { border-right: none; } .studio-playground-sidebar { display: none; } .studio-playground-header { display:grid; grid-template-columns: minmax(0, 1fr) auto; align-items:center; gap:12px; padding:12px 14px; } .studio-playground-header-nav, .studio-playground-header-chips { display:none; } .studio-playground-header-identity { min-width:0; } .studio-playground-mobile-header-actions { display:flex; align-items:center; justify-content:flex-end; } .studio-playground-mobile-backdrop { display:block; position:fixed; inset:0; z-index:74; border:none; background:rgba(15,23,42,0.44); backdrop-filter:blur(2px); } .studio-playground-mobile-drawer { position:fixed; top:0; right:0; bottom:0; z-index:75; width:min(380px, 92vw); padding:calc(16px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,255,0.96)); border-left:1px solid var(--c-line); box-shadow:-24px 0 48px rgba(15,23,42,0.16); transform:translateX(100%); transition:transform 180ms ease; display:flex; flex-direction:column; gap:14px; } [data-theme="dark"] .studio-playground-mobile-drawer { background:linear-gradient(180deg, rgba(11,18,32,0.98), rgba(8,13,28,0.96)); border-left-color:rgba(96,165,250,0.16); box-shadow:-28px 0 54px rgba(2,6,23,0.42); } .studio-playground-mobile-drawer.is-open { transform:translateX(0); } .studio-playground-mobile-toolbar { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; padding:0; flex-shrink:0; } .studio-playground-mobile-panel { display:flex; flex-direction:column; gap:12px; padding:0; min-height:0; overflow-y:auto; } .pg-notice { margin:10px 12px 0; } .studio-chat-log { padding:18px 12px 8px; gap:14px; background: linear-gradient(180deg, rgba(248,250,255,0.92), rgba(244,247,255,0.44)), radial-gradient(circle at top, rgba(37,99,235,0.04), transparent 44%); } [data-theme="dark"] .studio-chat-log { background: linear-gradient(180deg, rgba(12,18,32,0.78), rgba(8,13,28,0.24)), radial-gradient(circle at top, rgba(96,165,250,0.05), transparent 46%); } .pg-msg { gap:8px; } .pg-msg-avatar { display:none; } .pg-msg-body, .pg-msg-assistant .pg-msg-body { max-width:86%; } .pg-msg-user .pg-msg-body { max-width:78%; } .pg-bubble { padding:11px 14px; font-size:14px; line-height:1.56; } .pg-msg-user .pg-bubble { border-radius:20px 20px 6px 20px; } .pg-msg-assistant .pg-bubble, .pg-loading-bubble { border-radius:20px 20px 20px 6px; background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,255,0.88)); } [data-theme="dark"] .pg-msg-assistant .pg-bubble, [data-theme="dark"] .pg-loading-bubble { background:linear-gradient(180deg, rgba(20,29,49,0.96), rgba(11,18,32,0.92)); } .studio-composer { padding:10px 10px 12px; background:rgba(255,255,255,0.96); border-top-color:rgba(148,163,184,0.16); } [data-theme="dark"] .studio-composer { background:rgba(8,13,28,0.96); } .studio-shell.studio-shell-playground .studio-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .pg-composer-box { border-radius:18px; padding:8px 8px 8px 12px; } .pg-textarea { font-size:16px; line-height:1.5; } .pg-composer-footer { margin-top:8px; align-items:center; } .pg-hint { display:none; } .pg-chat-list { max-height:none; } .pg-chat-item-del { opacity:1; } .pg-info-row, .pg-toggle-row, .pg-source-item { padding:10px 11px; } .pg-toggle-row { align-items:flex-start; } } /* end styles/pages/playground.css */ /* begin styles/pages/onboarding.css */ .onboarding-main { --onboarding-ink: #16171f; --onboarding-muted: #687084; --onboarding-line: rgba(28,33,48,.12); --onboarding-panel: #ffffff; --onboarding-soft: #f6f8fb; --onboarding-green: #0f766e; --onboarding-blue: #2563eb; --onboarding-amber: #b45309; --onboarding-violet: #6d28d9; min-height:calc(100vh - 72px); padding:32px 28px 40px; background: linear-gradient(180deg, rgba(248,250,252,.94), rgba(239,244,251,.98)), var(--studio-bg); color:var(--onboarding-ink); } [data-theme="dark"] .onboarding-main { --onboarding-ink: #f7f8fb; --onboarding-muted: #a5adbd; --onboarding-line: rgba(226,232,240,.14); --onboarding-panel: #151821; --onboarding-soft: #10131b; background: linear-gradient(180deg, rgba(17,20,29,.96), rgba(11,13,19,.98)), var(--studio-bg); } .onboarding-hero-band { position:relative; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 380px); gap:28px; align-items:center; padding:34px 0 32px; border-bottom:1px solid var(--onboarding-line); } .onboarding-hero-copy { min-width:0; padding:6px 48px 6px 0; } .onboarding-kicker-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .onboarding-kicker { display:inline-flex; align-items:center; color:var(--onboarding-green); font-size:12px; font-weight:800; letter-spacing:0; text-transform:uppercase; } .onboarding-hero-copy h1 { max-width:760px; margin:0; color:var(--onboarding-ink); font-size:62px; line-height:.98; letter-spacing:0; } .onboarding-hero-copy p { max-width:680px; margin:20px 0 0; color:var(--onboarding-muted); font-size:16px; line-height:1.65; } .onboarding-hero-actions, .onboarding-next-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:22px; } .onboarding-hero-actions { margin-top:16px; } .onboarding-skip-link { min-height:32px; padding:6px 0; border-color:transparent; color:var(--onboarding-muted); background:transparent; } .onboarding-skip-link:hover { color:var(--onboarding-ink); background:transparent; border-color:transparent; } .onboarding-project-panel { min-width:0; padding:18px; border:1px solid var(--onboarding-line); border-radius:8px; background:var(--onboarding-panel); box-shadow:0 18px 54px rgba(15,23,42,.08); } [data-theme="dark"] .onboarding-project-panel { box-shadow:0 18px 54px rgba(0,0,0,.24); } .onboarding-project-top { min-width:0; } .onboarding-project-label { display:block; color:var(--onboarding-muted); font-size:11px; font-weight:800; letter-spacing:0; text-transform:uppercase; } .onboarding-project-top strong { display:block; margin-top:8px; color:var(--onboarding-ink); font-size:22px; line-height:1.15; } .onboarding-project-top small { display:block; margin-top:8px; color:var(--onboarding-muted); font-size:13px; line-height:1.5; } .onboarding-metric-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; margin-top:20px; padding-top:16px; border-top:1px solid var(--onboarding-line); } .onboarding-metric { min-width:0; padding:0 12px; border-left:1px solid var(--onboarding-line); } .onboarding-metric:first-child { padding-left:0; border-left:0; } .onboarding-metric span, .onboarding-metric small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--onboarding-muted); font-size:11px; } .onboarding-metric strong { display:block; margin:6px 0 3px; color:var(--onboarding-ink); font-size:24px; line-height:1; } .onboarding-dismiss { position:absolute; top:18px; right:14px; width:34px; height:34px; border:1px solid var(--onboarding-line); border-radius:8px; display:grid; place-items:center; background:var(--onboarding-panel); color:var(--onboarding-muted); } .onboarding-dismiss:hover { color:var(--onboarding-ink); border-color:rgba(37,99,235,.26); } .onboarding-dismiss svg { width:16px; height:16px; } .onboarding-status-pill { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 10px; border:1px solid var(--onboarding-line); border-radius:999px; color:var(--onboarding-muted); background:var(--onboarding-panel); font-size:12px; font-weight:700; } .onboarding-status-pill.is-done { color:var(--onboarding-green); background:rgba(15,118,110,.08); border-color:rgba(15,118,110,.22); } .onboarding-status-pill svg, .onboarding-progress-mark svg, .onboarding-choice-icon svg { width:15px; height:15px; } .onboarding-layout { max-width:1180px; margin:26px auto 0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 360px); gap:28px; align-items:start; } .onboarding-path-panel, .onboarding-progress-panel { min-width:0; } .onboarding-next-band { border:1px solid var(--onboarding-line); border-radius:8px; background:var(--onboarding-panel); box-shadow:0 16px 48px rgba(15,23,42,.06); } [data-theme="dark"] .onboarding-next-band { box-shadow:0 16px 48px rgba(0,0,0,.22); } .onboarding-section-head { margin-bottom:16px; } .onboarding-section-head span { color:var(--onboarding-blue); font-size:11px; font-weight:800; letter-spacing:0; text-transform:uppercase; } .onboarding-section-head h2 { margin:6px 0 0; color:var(--onboarding-ink); font-size:22px; line-height:1.15; letter-spacing:0; } .onboarding-section-head p { max-width:640px; margin:8px 0 0; color:var(--onboarding-muted); font-size:13px; line-height:1.55; } .onboarding-choice-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; } .onboarding-choice { min-width:0; min-height:178px; display:grid; grid-template-rows:auto 1fr auto; gap:14px; padding:16px; border:1px solid var(--onboarding-line); border-radius:8px; background:rgba(255,255,255,.46); color:var(--onboarding-ink); text-align:left; transition:transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } [data-theme="dark"] .onboarding-choice { background:rgba(255,255,255,.025); } .onboarding-choice:hover { transform:translateY(-2px); border-color:rgba(37,99,235,.30); background:var(--onboarding-panel); box-shadow:0 14px 34px rgba(15,23,42,.08); } .onboarding-choice.is-selected { border-color:rgba(37,99,235,.42); background:var(--onboarding-panel); box-shadow:0 16px 38px rgba(37,99,235,.12); } .onboarding-choice.is-selected .onboarding-choice-meta { color:var(--onboarding-blue); border-color:rgba(37,99,235,.28); background:rgba(37,99,235,.08); } .onboarding-choice-icon { width:42px; height:42px; border-radius:8px; display:grid; place-items:center; background:rgba(37,99,235,.10); color:var(--onboarding-blue); } .onboarding-choice.is-portal .onboarding-choice-icon { background:rgba(15,118,110,.10); color:var(--onboarding-green); } .onboarding-choice.is-developer .onboarding-choice-icon { background:rgba(180,83,9,.12); color:var(--onboarding-amber); } .onboarding-choice.is-both .onboarding-choice-icon { background:rgba(109,40,217,.11); color:var(--onboarding-violet); } .onboarding-choice-copy { min-width:0; display:flex; flex-direction:column; gap:7px; } .onboarding-choice-copy small { color:var(--onboarding-muted); font-size:11px; font-weight:800; letter-spacing:0; text-transform:uppercase; } .onboarding-choice-copy strong { color:var(--onboarding-ink); font-size:17px; line-height:1.18; } .onboarding-choice-copy span { color:var(--onboarding-muted); font-size:13px; line-height:1.5; } .onboarding-choice-meta { min-height:28px; display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:0 10px; border:1px solid var(--onboarding-line); border-radius:999px; color:var(--onboarding-muted); background:var(--onboarding-panel); font-size:11px; font-weight:800; } .onboarding-progress-list { position:relative; display:flex; flex-direction:column; gap:0; padding-top:2px; } .onboarding-progress-step { position:relative; display:grid; grid-template-columns:34px minmax(0, 1fr); gap:12px; align-items:start; padding:0 0 20px; } .onboarding-progress-step::after { content:""; position:absolute; left:16px; top:40px; bottom:4px; width:1px; background:var(--onboarding-line); } .onboarding-progress-step:last-child { padding-bottom:0; } .onboarding-progress-step:last-child::after { display:none; } .onboarding-progress-step.is-active strong { color:var(--onboarding-blue); } .onboarding-progress-step.is-done strong { color:var(--onboarding-green); } .onboarding-progress-mark { position:relative; z-index:1; width:34px; height:34px; border:1px solid var(--onboarding-line); border-radius:8px; display:grid; place-items:center; color:var(--onboarding-muted); background:var(--onboarding-panel); } .onboarding-progress-step.is-active .onboarding-progress-mark { color:var(--onboarding-blue); border-color:rgba(37,99,235,.28); background:rgba(37,99,235,.08); } .onboarding-progress-step.is-done .onboarding-progress-mark { color:var(--onboarding-green); border-color:rgba(15,118,110,.22); background:rgba(15,118,110,.08); } .onboarding-progress-step strong { display:block; color:var(--onboarding-ink); font-size:13px; line-height:1.25; } .onboarding-progress-step small { display:block; margin-top:4px; color:var(--onboarding-muted); font-size:12px; line-height:1.45; } .onboarding-next-band { max-width:1180px; margin:30px auto 0; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:20px; align-items:center; padding:20px; } .onboarding-next-band h2 { max-width:780px; margin:7px 0 0; color:var(--onboarding-ink); font-size:22px; line-height:1.25; letter-spacing:0; } .onboarding-next-actions { justify-content:flex-end; margin-top:0; } @media (max-width: 1020px) { .onboarding-hero-band, .onboarding-layout, .onboarding-next-band { grid-template-columns:1fr; } .onboarding-next-actions { justify-content:flex-start; } } @media (max-width: 820px) { .onboarding-choice-grid { grid-template-columns:1fr; } .onboarding-choice { min-height:0; grid-template-columns:42px minmax(0, 1fr); grid-template-rows:auto auto; } .onboarding-choice-icon { grid-row:1 / span 2; } .onboarding-choice-meta { grid-column:2; } } @media (max-width: 760px) { .onboarding-main { padding:16px; } .onboarding-hero-band { padding:52px 0 18px; gap:18px; } .onboarding-hero-copy { padding-right:0; } .onboarding-dismiss { top:0; right:0; width:40px; height:40px; } .onboarding-hero-copy h1 { font-size:40px; line-height:1; } .onboarding-next-actions { display:grid; grid-template-columns:1fr; align-items:stretch; width:100%; } .onboarding-next-actions > .studio-button, .onboarding-next-actions > .studio-button-secondary, .onboarding-next-actions > .studio-button-ghost { width:100%; justify-content:center; min-width:0; } .onboarding-metric-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } } @media (max-width: 380px) { .onboarding-main { padding:12px; } .onboarding-hero-copy h1 { font-size:34px; } .onboarding-project-panel, .onboarding-next-band { padding:14px; } .onboarding-choice { grid-template-columns:1fr; } .onboarding-choice-icon, .onboarding-choice-meta { grid-column:auto; grid-row:auto; } .onboarding-progress-step { grid-template-columns:30px minmax(0, 1fr); } .onboarding-progress-step::after { left:14px; } .onboarding-progress-mark { width:30px; height:30px; } } /* end styles/pages/onboarding.css */ /* begin styles/pages/product-pages.css */ /* ============================================================ HERO (list/wizard legacy) ============================================================ */ .studio-hero { padding:24px; position:relative; overflow:hidden; } .studio-hero::before { content:""; position:absolute; inset:-40% auto auto -10%; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(79,70,229,.1),transparent 72%); pointer-events:none; } .studio-hero::after { content:""; position:absolute; inset:auto -70px -140px auto; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,.14),transparent 72%); } .studio-hero h2, .studio-hero h3 { margin:0; font-family:var(--font-display); letter-spacing:-.04em; } .studio-hero h2 { font-size:clamp(28px,4vw,46px); max-width:12ch; line-height:.95; } .studio-hero p { margin:10px 0 0; max-width:700px; color:var(--c-muted); font-size:14px; line-height:1.6; } .studio-hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.92fr); gap:16px; align-items:stretch; } .studio-hero-copy, .studio-hero-aside { position:relative; z-index:1; } .studio-hero-aside { display:grid; gap:10px; align-content:start; } /* ── PRODUCT PAGES ────────────────────────────────────────── */ .product-page-main { display: grid; gap: 18px; } .product-landing-shell { min-height: auto; --product-accent-a: #2563eb; --product-accent-b: #14b8a6; --product-accent-c: #7c3aed; } .product-landing-hero .lp-headline { max-width: min(980px, 15ch); margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; } .product-landing-hero .lp-subline { max-width: 760px; } .product-landing-chip-row { justify-content: center; margin-top: 18px; } .product-landing-hero .lp-hero-actions { margin-top: 26px; } .product-landing-stat-row { max-width: min(920px, 100%); white-space: normal; background: linear-gradient(90deg, rgba(255,255,255,0.86), rgba(255,255,255,0.68)), linear-gradient(135deg, rgba(37,99,235,0.1), rgba(20,184,166,0.08)); } [data-theme="dark"] .product-landing-stat-row { background: linear-gradient(90deg, rgba(15,23,42,0.92), rgba(15,23,42,0.78)), linear-gradient(135deg, rgba(96,165,250,0.16), rgba(45,212,191,0.1)); } .product-landing-stat-pill { min-width: 0; flex: 1 1 0; } .product-landing-stat-pill .lp-stat-n { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-landing-stat-pill .lp-stat-l { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-landing-usecases .lp-pub-highlight p { min-height: 0; } .product-landing-usecases .lp-pub-highlight { position: relative; overflow: hidden; } .product-landing-usecases .lp-pub-highlight::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--product-accent-a), var(--product-accent-b), var(--product-accent-c)); } .product-landing-usecases .lp-pub-highlight::after { content: ""; position: absolute; right: 18px; bottom: 16px; width: 64px; height: 26px; opacity: 0.16; background: linear-gradient(to top, var(--product-accent-a) 0 50%, transparent 50%) 0 100% / 8px 100% no-repeat, linear-gradient(to top, var(--product-accent-b) 0 76%, transparent 76%) 16px 100% / 8px 100% no-repeat, linear-gradient(to top, var(--product-accent-c) 0 62%, transparent 62%) 32px 100% / 8px 100% no-repeat, linear-gradient(to top, var(--product-accent-a) 0 88%, transparent 88%) 48px 100% / 8px 100% no-repeat; } .product-landing-final { margin-top: 0; } .legal-page-main { display: grid; gap: 18px; } .product-page-hero { padding: 28px; position: relative; overflow: hidden; background: radial-gradient(440px 220px at 0% 0%, rgba(37,99,235,0.12), transparent 62%), radial-gradient(360px 220px at 100% 0%, rgba(124,58,237,0.12), transparent 62%), var(--c-surface); } [data-theme="dark"] .product-page-hero { background: radial-gradient(440px 220px at 0% 0%, rgba(96,165,250,0.14), transparent 62%), radial-gradient(360px 220px at 100% 0%, rgba(192,132,252,0.14), transparent 62%), var(--c-surface); } .legal-page-hero { padding: 28px; position: relative; overflow: hidden; background: radial-gradient(420px 220px at 0% 0%, rgba(37,99,235,0.1), transparent 60%), radial-gradient(320px 220px at 100% 0%, rgba(124,58,237,0.1), transparent 60%), var(--c-surface); } [data-theme="dark"] .legal-page-hero { background: radial-gradient(420px 220px at 0% 0%, rgba(96,165,250,0.14), transparent 60%), radial-gradient(320px 220px at 100% 0%, rgba(192,132,252,0.14), transparent 60%), var(--c-surface); } .product-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(300px, 0.84fr); gap: 22px; align-items: stretch; } .product-page-hero-copy, .product-page-hero-aside { position: relative; z-index: 1; } .product-page-hero-copy { max-width: 860px; } .product-page-hero h2 { max-width: 17ch; } .product-page-hero p { max-width: 64ch; } .product-page-intro-note { margin-top: 12px; max-width: 56ch; font-size: 13px; line-height: 1.6; color: var(--c-muted); } .product-page-kicker, .product-page-section-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); } .product-page-kicker { margin-bottom: 12px; } .product-page-kicker::before, .product-page-section-label::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); box-shadow: 0 0 0 4px var(--c-accent-soft); } .product-page-chip-row { margin-top: 14px; } .product-page-actions { margin-top: 24px; flex-wrap: wrap; } .product-page-hero-aside { display: grid; gap: 12px; align-content: start; justify-self: end; width: 100%; max-width: 360px; } .product-page-hero-card { padding: 18px; border-radius: 20px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.44)); box-shadow: var(--shadow-sm); } [data-theme="dark"] .product-page-hero-card { background: linear-gradient(180deg, rgba(20,29,49,0.88), rgba(13,20,35,0.84)); } .product-page-hero-card span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); } .product-page-hero-card strong { display: block; margin-top: 10px; font-size: 22px; line-height: 1.04; letter-spacing: -0.04em; color: var(--c-text); } .product-page-hero-card p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--c-muted); } .product-page-section { display: grid; } .product-page-section-compact { margin-top: -2px; } .product-page-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.1fr); gap: 16px; align-items: start; } .legal-page-section { display: grid; } .legal-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .legal-page-card { padding: 22px; } .legal-page-hero h2 { max-width: 16ch; } .legal-page-hero p { max-width: 72ch; } .legal-page-chip-row { margin-top: 14px; } .legal-page-section-summary, .legal-page-section-footnote { margin-top: -2px; } .legal-page-summary { padding: 22px; display: grid; gap: 18px; } .legal-page-summary-copy { display: grid; gap: 10px; max-width: 72ch; } .legal-page-summary-copy h3 { margin: 0; font-family: var(--font-display); font-size: clamp(25px, 3vw, 34px); line-height: 0.98; letter-spacing: -0.05em; } .legal-page-summary-copy p { margin: 0; color: var(--c-muted); line-height: 1.7; } .legal-page-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .legal-page-summary-card { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--c-line); background: var(--c-panel-strong); box-shadow: var(--shadow-sm); } .legal-page-summary-card p, .legal-page-footnote p { margin: 0; color: var(--c-muted); line-height: 1.65; } .legal-page-footnote { padding: 18px 20px; display: grid; gap: 10px; } .legal-page-card h3 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); line-height: 0.98; letter-spacing: -0.05em; } .product-page-story { padding: 22px; } .product-page-story h3, .product-page-usecases h3, .product-page-cta h3 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(25px, 3vw, 34px); line-height: 0.98; letter-spacing: -0.05em; } .product-page-story p, .product-page-feature p, .product-page-cta p { margin: 12px 0 0; color: var(--c-muted); line-height: 1.7; } .product-page-list { margin: 16px 0 0; padding-left: 18px; display: grid; gap: 10px; color: var(--c-muted); } .product-page-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .product-page-feature { position: relative; overflow: hidden; padding: 18px; } .product-page-feature::after { content: ""; position: absolute; right: 16px; bottom: 14px; width: 58px; height: 22px; opacity: 0.14; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hi)); clip-path: polygon(0 72%, 24% 48%, 42% 62%, 66% 22%, 100% 34%, 100% 100%, 0 100%); } .product-page-feature h4 { margin: 12px 0 0; font-size: 18px; line-height: 1.15; letter-spacing: -0.03em; color: var(--c-text); } .product-page-usecases { padding: 22px; } .product-page-usecases-head { display: grid; gap: 2px; } .product-page-usecase-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .product-page-usecase-pill { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 9px 14px 9px 34px; border-radius: 999px; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.5)), linear-gradient(135deg, rgba(37,99,235,0.08), rgba(20,184,166,0.07)); color: var(--c-text); box-shadow: var(--shadow-sm); } .product-page-usecase-pill::before { content: ""; position: absolute; left: 14px; width: 10px; height: 10px; border-radius: 4px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); transform: rotate(45deg); } .product-page-cta { padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: radial-gradient(320px 180px at 0% 0%, rgba(37,99,235,0.12), transparent 62%), radial-gradient(280px 180px at 100% 100%, rgba(124,58,237,0.12), transparent 62%), var(--c-surface); } [data-theme="dark"] .product-page-cta { background: radial-gradient(320px 180px at 0% 0%, rgba(96,165,250,0.12), transparent 62%), radial-gradient(280px 180px at 100% 100%, rgba(192,132,252,0.12), transparent 62%), var(--c-surface); } .product-page-cta-copy { max-width: 760px; } /* end styles/pages/product-pages.css */ /* begin styles/pages/use-cases.css */ /* ============================================================ USE CASE PAGES ============================================================ */ .use-case-page { min-height: auto; --use-case-a: #2563eb; --use-case-b: #14b8a6; --use-case-c: #db2777; --use-case-soft: rgba(37,99,235,0.1); } .use-case-hero { position: relative; overflow: hidden; padding-bottom: 86px; } .use-case-healthcare-page { --use-case-a: #059669; --use-case-b: #0ea5e9; --use-case-c: #db2777; --use-case-soft: rgba(5,150,105,0.1); } .use-case-education-page { --use-case-a: #2563eb; --use-case-b: #f59e0b; --use-case-c: #7c3aed; --use-case-soft: rgba(37,99,235,0.1); } .use-case-government-page { --use-case-a: #1d4ed8; --use-case-b: #0f766e; --use-case-c: #dc2626; --use-case-soft: rgba(29,78,216,0.1); } .use-case-legal-page { --use-case-a: #7c3aed; --use-case-b: #2563eb; --use-case-c: #db2777; --use-case-soft: rgba(124,58,237,0.1); } .use-case-support-page { --use-case-a: #0d9488; --use-case-b: #ea580c; --use-case-c: #2563eb; --use-case-soft: rgba(13,148,136,0.1); } .use-case-sales-marketing-page { --use-case-a: #db2777; --use-case-b: #f59e0b; --use-case-c: #2563eb; --use-case-soft: rgba(219,39,119,0.1); } .use-case-operations-page { --use-case-a: #475569; --use-case-b: #0d9488; --use-case-c: #2563eb; --use-case-soft: rgba(71,85,105,0.1); } .use-case-research-page { --use-case-a: #7c3aed; --use-case-b: #06b6d4; --use-case-c: #2563eb; --use-case-soft: rgba(124,58,237,0.1); } .use-case-manufacturing-page { --use-case-a: #ea580c; --use-case-b: #2563eb; --use-case-c: #16a34a; --use-case-soft: rgba(234,88,12,0.1); } .use-case-asset-management-page { --use-case-a: #047857; --use-case-b: #2563eb; --use-case-c: #9333ea; --use-case-soft: rgba(4,120,87,0.1); } .use-case-real-estate-page { --use-case-a: #0f766e; --use-case-b: #2563eb; --use-case-c: #d97706; --use-case-soft: rgba(15,118,110,0.1); } .use-case-brands-creators-page { --use-case-a: #db2777; --use-case-b: #f59e0b; --use-case-c: #2563eb; --use-case-soft: rgba(219,39,119,0.1); } .use-case-hero-inner { max-width: 1060px; margin: 0 auto; text-align: center; } .use-case-hero .lp-headline { max-width: min(1040px, 24ch); margin-left: auto; margin-right: auto; margin-bottom: 18px; font-size: clamp(36px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.035em; text-align: center; text-wrap: balance; } .use-case-hero .lp-subline { max-width: 820px; } .use-case-hero-chips { justify-content: center; margin-top: 18px; } .use-case-hero .lp-hero-actions { margin-top: 26px; } .use-case-stat-row { max-width: min(980px, 100%); white-space: normal; background: linear-gradient(90deg, rgba(255,255,255,0.86), rgba(255,255,255,0.7)), linear-gradient(135deg, var(--use-case-soft), rgba(255,255,255,0)); } [data-theme="dark"] .use-case-stat-row { background: linear-gradient(90deg, rgba(15,23,42,0.92), rgba(15,23,42,0.78)), linear-gradient(135deg, color-mix(in srgb, var(--use-case-a) 18%, transparent), rgba(15,23,42,0)); } .use-case-section .lp-section-title { max-width: 820px; text-wrap: balance; } .use-case-section .lp-section-intro { max-width: 760px; } .use-case-split-grid, .use-case-journey-grid, .use-case-app-grid { margin-top: 34px; } .use-case-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .use-case-panel, .use-case-journey-card { position: relative; min-width: 0; border: 1px solid var(--c-line); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.58)), linear-gradient(135deg, var(--use-case-soft), rgba(255,255,255,0)); box-shadow: var(--shadow-sm); } [data-theme="dark"] .use-case-panel, [data-theme="dark"] .use-case-journey-card { background: linear-gradient(180deg, rgba(16,24,40,0.94), rgba(10,18,31,0.86)), linear-gradient(135deg, color-mix(in srgb, var(--use-case-a) 16%, transparent), rgba(10,18,31,0)); } .use-case-panel { overflow: hidden; padding: 30px 92px 30px 30px; } .use-case-panel--knowledge { border-top: 3px solid color-mix(in srgb, var(--use-case-a) 74%, transparent); } .use-case-panel--systems { border-top: 3px solid color-mix(in srgb, var(--use-case-b) 74%, transparent); } .use-case-panel::before { content: ""; position: absolute; top: 26px; right: 26px; width: 46px; height: 46px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--use-case-a) 24%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--use-case-a) 18%, white), color-mix(in srgb, var(--use-case-b) 16%, white)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 18px 36px color-mix(in srgb, var(--use-case-a) 15%, transparent); } .use-case-panel::after { content: ""; position: absolute; top: 40px; right: 40px; width: 18px; height: 18px; border: 2px solid var(--use-case-a); border-top-color: transparent; border-radius: 6px; box-shadow: 10px 8px 0 -5px var(--use-case-b), -8px 10px 0 -5px var(--use-case-c); } .use-case-panel--systems::after { border-radius: 999px; border-top-color: var(--use-case-a); box-shadow: 0 -8px 0 -5px var(--use-case-b), 9px 7px 0 -5px var(--use-case-c), -9px 7px 0 -5px var(--use-case-a); } .use-case-panel-kicker { display: inline-flex; margin-bottom: 14px; color: var(--c-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .use-case-panel h3, .use-case-journey-card h3 { margin: 0; color: var(--c-text); font-family: var(--font-display); font-size: 22px; line-height: 1.08; letter-spacing: -0.03em; } .use-case-list, .use-case-compact-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; } .use-case-list li, .use-case-compact-list li { position: relative; padding-left: 18px; color: var(--c-muted); font-size: 13px; line-height: 1.5; } .use-case-list li::before, .use-case-compact-list li::before { content: ""; position: absolute; top: 0.64em; left: 0; width: 7px; height: 7px; border-radius: 999px; background: linear-gradient(135deg, var(--use-case-a), var(--use-case-b)); } .use-case-journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .use-case-journey-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .use-case-journey-card { overflow: hidden; padding: 24px; } .use-case-journey-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--use-case-a), var(--use-case-b), var(--use-case-c)); } .use-case-journey-card::after { content: ""; position: absolute; top: 24px; right: 22px; width: 54px; height: 34px; opacity: 0.72; background: linear-gradient(to top, color-mix(in srgb, var(--use-case-a) 84%, transparent) 0 58%, transparent 58%) 0 100% / 8px 100% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--use-case-b) 84%, transparent) 0 76%, transparent 76%) 15px 100% / 8px 100% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--use-case-c) 84%, transparent) 0 44%, transparent 44%) 30px 100% / 8px 100% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--use-case-a) 84%, transparent) 0 88%, transparent 88%) 45px 100% / 8px 100% no-repeat; } .use-case-card-index { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--use-case-a) 24%, transparent); background: color-mix(in srgb, var(--use-case-a) 11%, transparent); color: var(--use-case-a); font-size: 12px; font-weight: 800; } .use-case-journey-card p { margin: 12px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.58; } .use-case-pill-grid, .use-case-surface-list, .use-case-governance-grid { display: grid; gap: 10px; } .use-case-pill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; } .use-case-pill-grid span, .use-case-surface-list span { position: relative; min-width: 0; border: 1px solid var(--c-line); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.5)), linear-gradient(135deg, var(--use-case-soft), rgba(255,255,255,0)); color: var(--c-text); font-size: 13px; font-weight: 650; line-height: 1.3; box-shadow: var(--shadow-sm); } [data-theme="dark"] .use-case-pill-grid span, [data-theme="dark"] .use-case-surface-list span { background: linear-gradient(180deg, rgba(20,29,49,0.86), rgba(13,20,35,0.78)), linear-gradient(135deg, color-mix(in srgb, var(--use-case-a) 12%, transparent), rgba(13,20,35,0)); } .use-case-pill-grid span { padding: 16px 16px 16px 42px; } .use-case-pill-grid span::before, .use-case-surface-list span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--use-case-a), var(--use-case-b)); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--use-case-a) 10%, transparent); } .use-case-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .use-case-app-card { position: relative; overflow: hidden; border-radius: 8px; } .use-case-app-card::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 66px; height: 24px; opacity: 0.18; background: linear-gradient(135deg, transparent 45%, var(--use-case-a) 46% 54%, transparent 55%), linear-gradient(90deg, var(--use-case-b), var(--use-case-c)); clip-path: polygon(0 62%, 22% 44%, 42% 56%, 64% 18%, 100% 30%, 100% 100%, 0 100%); } .use-case-app-card .lp-feature-icon { color: var(--use-case-a); background: color-mix(in srgb, var(--use-case-a) 10%, transparent); border: 1px solid color-mix(in srgb, var(--use-case-a) 18%, transparent); } .use-case-developer-layout, .use-case-governance-inner { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 28px; align-items: center; } .use-case-surface-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .use-case-surface-list span { padding: 15px 16px 15px 42px; } .use-case-governance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .use-case-governance-item { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: start; min-width: 0; padding: 17px; border: 1px solid var(--c-line); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.52)), linear-gradient(135deg, var(--use-case-soft), rgba(255,255,255,0)); } [data-theme="dark"] .use-case-governance-item { background: linear-gradient(180deg, rgba(15,23,42,0.74), rgba(15,23,42,0.58)), linear-gradient(135deg, color-mix(in srgb, var(--use-case-a) 12%, transparent), rgba(15,23,42,0)); } .use-case-governance-item span { width: 10px; height: 10px; margin-top: 3px; border-radius: 999px; background: linear-gradient(135deg, var(--use-case-a), var(--use-case-c)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--use-case-a) 10%, transparent); } .use-case-governance-item strong { color: var(--c-text); font-size: 13px; line-height: 1.45; } .use-case-final { margin-top: 0; } @media (max-width: 980px) { .use-case-split-grid, .use-case-developer-layout, .use-case-governance-inner { grid-template-columns: 1fr; } .use-case-journey-grid, .use-case-app-grid, .use-case-pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1120px) { .use-case-journey-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .use-case-hero { padding-bottom: 58px; } .use-case-hero .lp-headline { max-width: 100%; font-size: clamp(30px, 9vw, 40px); line-height: 1.06; } .use-case-stat-row { width: min(100%, 360px); } .use-case-split-grid, .use-case-journey-grid, .use-case-app-grid, .use-case-pill-grid, .use-case-surface-list, .use-case-governance-grid { grid-template-columns: 1fr; } .use-case-panel, .use-case-journey-card { padding: 20px; } .use-case-panel::before, .use-case-panel::after, .use-case-journey-card::after { display: none; } .use-case-pill-grid span, .use-case-surface-list span { padding-left: 40px; } } /* end styles/pages/use-cases.css */ /* begin styles/pages/responsive.css */ /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px) { .studio-grid.two, .studio-hero-grid, .studio-identity-shell, .wiz-body, .dashboard-hero-grid, .home-hero { grid-template-columns:1fr; } .studio-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .studio-stepper { grid-template-columns:1fr; } .studio-playground-sidebar { width:280px; } .pricing-rate-grid, .pricing-analysis-grid, .pricing-scenario-grid { grid-template-columns:1fr 1fr; } .pricing-note-grid { grid-template-columns:1fr; } .integration-layout { grid-template-columns: 1fr; } .integration-sidebar { position: static; top: auto; } .integration-project-nav { grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; } .integration-project-nav-item { scroll-snap-align: start; } .public-settings-content-head { flex-direction: column; } .public-settings-content-head-chips { justify-content: flex-start; } } @media (max-width:960px) { .brain-grid { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); } .detail-hero-body { flex-wrap:wrap; } .detail-hero-stats { min-width:0; width:100%; grid-template-columns:1fr 1fr; } } @media (max-width:900px) { .studio-playground-sidebar { display:none; } .studio-playground-main { border-right:none; } .studio-playground-header { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px; padding:12px 14px; } .pg-notice { margin:10px 12px 0; } .studio-shell.studio-shell-playground .studio-chat-log { padding:18px 14px 16px; gap:16px; } .studio-shell.studio-shell-playground .pg-msg { gap:8px; } .studio-shell.studio-shell-playground .pg-msg-avatar { width:26px; height:26px; border-radius:8px; font-size:12px; } .studio-shell.studio-shell-playground .pg-msg-body, .studio-shell.studio-shell-playground .pg-msg-assistant .pg-msg-body { max-width:86%; } .studio-shell.studio-shell-playground .pg-bubble { padding:10px 13px; font-size:13px; line-height:1.58; } .studio-shell.studio-shell-playground .pg-code-block-head { padding:8px 9px 8px 10px; } .studio-shell.studio-shell-playground .pg-code-block pre { padding:14px 14px 16px; font-size:12px; line-height:1.62; } .studio-shell.studio-shell-playground .studio-composer { padding:10px 12px 12px; } .studio-shell.studio-shell-playground .studio-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .studio-shell.studio-shell-playground .pg-composer-box { padding:7px 7px 7px 11px; } .studio-shell.studio-shell-playground .pg-composer-footer { flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:7px; } .studio-shell.studio-shell-playground .pg-hint { flex:1 1 180px; line-height:1.4; } .studio-shell.studio-shell-playground .pg-chat-list { max-height:220px; } .studio-shell.studio-shell-playground .pg-chat-item-del { opacity:1; } .studio-shell.studio-shell-playground .pg-info-row, .studio-shell.studio-shell-playground .pg-toggle-row, .studio-shell.studio-shell-playground .pg-source-item { padding:10px 11px; } .studio-shell.studio-shell-playground .pg-toggle-row { align-items:flex-start; } .wiz-source-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); } .public-settings-shell { grid-template-columns: 1fr; } .public-settings-menu-btn { display: inline-flex; } .public-settings-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 74; border: none; background: rgba(15,23,42,0.44); backdrop-filter: blur(2px); } .public-settings-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 75; width: min(388px, 92vw); max-height: none; transform: translateX(-100%); transition: transform 180ms ease; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,255,0.96)); border-right: 1px solid var(--c-line); box-shadow: 24px 0 54px rgba(15,23,42,0.18); } [data-theme="dark"] .public-settings-sidebar { background: linear-gradient(180deg, rgba(11,18,32,0.98), rgba(8,13,28,0.96)); border-right-color: rgba(96,165,250,0.16); box-shadow: 28px 0 56px rgba(2,6,23,0.42); } .public-settings-sidebar.is-open { transform: translateX(0); } .public-settings-sidebar-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 12px; } .public-settings-sidebar-close { display: inline-flex; } .public-settings-sidebar-body { max-height: none; padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px)); } .public-settings-content-head { padding: 16px 18px; } .public-settings-hero { padding: 20px 20px 18px; } .public-settings-hero-chips, .public-settings-content-head-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .public-settings-hero-chips::-webkit-scrollbar, .public-settings-content-head-chips::-webkit-scrollbar { display: none; } .public-settings-hero-chips .studio-chip, .public-settings-content-head-chips .studio-chip { flex: 0 0 auto; white-space: nowrap; } } @media (max-width:640px) { .assistant-builder-action-grid { grid-template-columns: 1fr; } .assistant-field-grid { grid-template-columns: 34px minmax(0, 1fr) !important; } .assistant-builder-json-summary { align-items: flex-start; } .studio-shell.studio-shell-playground .studio-playground-nav-btn { padding:5px 9px; font-size:11px; } .studio-shell.studio-shell-playground .studio-playground-header-name { font-size:13px; } .studio-shell.studio-shell-playground .studio-playground-header-meta { font-size:11px; } .studio-shell.studio-shell-playground .studio-chat-log { padding:14px 12px 14px; } .studio-shell.studio-shell-playground .pg-msg-assistant .pg-msg-body { max-width:86%; } .studio-shell.studio-shell-playground .pg-msg-user .pg-msg-body { max-width:78%; } .studio-shell.studio-shell-playground .studio-composer { padding:9px 10px 10px; } .studio-shell.studio-shell-playground .studio-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .studio-shell.studio-shell-playground .pg-send-btn { width:36px; height:36px; min-width:36px; } .studio-shell.studio-shell-playground .pg-clear-btn { padding:0; } } @media (max-width:960px) { .studio-grid.two { grid-template-columns: 1fr; } .studio-form-grid--3, .memory-settings-grid, .conversation-memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .assistant-builder-settings, .assistant-builder-runtime-strip, .assistant-builder-layout, .assistant-intent-grid, .assistant-step-grid, .assistant-field-grid, .assistant-field-grid--wide { grid-template-columns: 1fr !important; } .assistant-builder-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .assistant-field-grid { grid-template-columns: 34px repeat(2, minmax(0, 1fr)) auto auto !important; } .assistant-intent-span-2 { grid-column: auto; } .assistant-builder-hero, .assistant-builder-section-head, .assistant-intent-card-head, .assistant-step-card-head { flex-direction: column; } .assistant-intent-card-head-main, .assistant-step-card-head-main { width: 100%; } .assistant-runtime-card { grid-template-columns: 24px minmax(0, 1fr); } .assistant-builder-json-pane { position: static; } .source-composer-source-grid, .source-composer-picker-controls, .public-access-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-settings-panel-card .studio-form-grid, .public-settings-grid--4, .public-settings-grid--3, .public-settings-grid--2, .public-settings-guide-list, .public-settings-guide-notes, .public-embed-toggle-grid, .public-settings-sidebar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .public-settings-sidebar-stats--summary { grid-template-columns: 1fr !important; } .public-domain-summary { flex-direction: column; align-items: flex-start; } .public-settings-span-2, .public-settings-span-3 { grid-column: span 2; } .detail-action-group { flex-wrap: wrap; max-width: 100%; } .studio-product-menu { width: min(760px, calc(100vw - 32px)); grid-template-columns: 1fr; } .studio-product-menu-grid, .product-page-feature-grid, .product-page-hero-grid, .product-page-grid, .legal-page-summary-grid, .legal-page-grid { grid-template-columns: 1fr; } .product-page-cta { flex-direction: column; align-items: flex-start; } .studio-shell-footer { width: min(760px, calc(100% - 32px)); } } @media (max-width:760px) { .studio-topbar { height: auto; min-height: 52px; padding: 8px 12px; align-items: center; flex-wrap: wrap; gap: 8px; } .studio-brand { min-width: 0; gap: 8px; } .studio-brand-mark { width: 28px; height: 28px; } .studio-brand-copy { min-width: 0; } .studio-brand-copy h1 { font-size: 15px; } .studio-brand-title-full { display: none; } .studio-brand-title-short { display: inline; } .studio-topbar-nav { display: none; } .studio-topbar-menu { left: 50%; top: 62px; width: min(320px, calc(100vw - 24px)); } .studio-topbar-actions { margin-left: auto; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; } .studio-topbar-cta { padding: 7px 10px; min-height: 34px; } .studio-topbar-cta-full { display: none; } .studio-topbar-cta-short { display: inline; } .studio-topbar-actions > .studio-button, .studio-topbar-actions > .studio-button-secondary, .studio-topbar-actions > .studio-button-ghost { padding: 7px 10px; font-size: 12px; min-height: 34px; } .theme-toggle, .studio-user-avatar, .studio-mobile-menu-toggle { width: 34px; height: 34px; } .studio-mobile-menu-toggle, .studio-mobile-nav-panel { display: inline-flex; } .studio-mobile-nav-panel { display: block; } .studio-main, .wiz-page { padding-left:14px; padding-right:14px; } .product-page-hero, .product-page-usecases, .product-page-cta, .product-page-story, .product-page-feature, .product-page-hero-card { padding: 18px; } .product-page-story h3, .product-page-usecases h3, .product-page-cta h3, .legal-page-card h3 { font-size: 28px; } .studio-site-footer { flex-direction: column; align-items: flex-start; gap: 10px; } .studio-form-grid, .studio-stat-grid, .studio-mini-stat-grid, .studio-review-metrics { grid-template-columns:1fr; } .memory-settings-grid, .source-composer-stack--add, .source-composer-picker-controls { grid-template-columns: 1fr; } .source-composer-stage-head { align-items: center; } .memory-settings-panel-head, .memory-avatar-current, .source-composer-provider-inline { flex-direction: column; align-items: center; } .source-composer-provider-inline { align-items: stretch; } .memory-avatar-current-main { width: 100%; flex-direction: column; justify-content: center; align-items: center; } .memory-avatar-current-copy { justify-items: center; text-align: center; } .memory-avatar-current-actions { width: 100%; justify-content: center; } .studio-hero h2 { font-size:34px; } .list-header { flex-direction:column; align-items:flex-start; } .list-header-right { width: 100%; justify-content: space-between; } .list-stats { width: 100%; justify-content: center; } .projects-bar { justify-content: flex-start; } .projects-bar-label { width: 100%; margin-right: 0; padding-right: 0; border-right: none; } .detail-nav-bar { flex-direction:column; align-items:flex-start; } .detail-action-group { width:100%; } .detail-action-group--hero { display:none; } .detail-hero-mobile-menu { display:block; } .detail-action-group > .studio-button, .detail-action-group > .studio-button-secondary, .detail-action-group > .studio-button-ghost, .detail-action-group > .studio-button-danger { flex: 1 1 180px; justify-content: center; } .detail-hero-body { flex-direction:column; padding:14px 14px 12px; padding-right:58px; gap:12px; } .detail-hero-stats { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-settings-hero { padding: 18px; } .public-settings-layout { grid-template-columns: 1fr; } .public-settings-reference-row { grid-template-columns: 1fr; padding: 12px; } .memory-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .memory-summary-item { padding: 9px 10px; border-radius: 12px; gap: 2px; } .memory-summary-value { font-size: 16px; } .memory-summary-label { font-size: 9px; letter-spacing: .07em; } .detail-stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; } .dashboard-project-stats, .dashboard-kpi-grid, .dashboard-shortcut-grid, .pricing-rate-grid, .pricing-analysis-grid, .pricing-scenario-grid { grid-template-columns: 1fr 1fr; } .home-hero { padding: 16px; } .home-hero-copy .studio-title { max-width: none; } .project-memory-stats { gap: 5px 9px; } .project-activity-row { flex-wrap: wrap; } .project-activity-kind, .project-activity-arrow { min-width: 0; } .dashboard-project-head { flex-direction: column; } .dashboard-project-actions { width: 100%; justify-content: flex-start; } .dashboard-hero-topline { align-items: flex-start; } .dashboard-hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; justify-content: stretch; } .detail-stat-item { min-height: 84px; padding: 12px 13px; gap: 8px; } .studio-card-title { flex-direction: column; align-items: flex-start; } .brain-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; } .studio-shell.studio-shell-playground .studio-chat-log { padding:16px; } .studio-shell.studio-shell-playground .pg-msg-body { max-width:86%; } .studio-shell.studio-shell-playground .pg-msg-assistant .pg-msg-body { max-width:86%; } .studio-shell.studio-shell-playground .pg-msg-user .pg-msg-body { max-width:78%; } .studio-shell.studio-shell-playground .studio-composer { padding:10px 14px 14px; } .studio-shell.studio-shell-playground .studio-composer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .wiz-progress { gap:0; } .wiz-step-line { max-width:44px; } .wiz-review-stats { grid-template-columns:repeat(2,1fr); } .integration-sidebar-card { padding: 14px; } .integration-project-nav { grid-auto-columns: minmax(196px, 82vw); } .integration-project-nav-item { padding: 9px; } .home-surface-grid, .home-self-hosted-grid { grid-template-columns: 1fr; } .list-header { gap: 12px; padding: 10px 0 6px; } .list-header-title { font-size: clamp(24px, 8vw, 28px); } .list-header-sub { font-size: 12.5px; line-height: 1.55; } .list-header-right { flex-direction: column; align-items: stretch; gap: 8px; } .list-header-right > .studio-button, .list-header-right > .studio-button-secondary, .list-header-right > .studio-button-ghost, .list-header-right > .studio-button-danger { width: 100%; justify-content: center; } .list-stats { width: 100%; justify-content: space-between; } .list-stat { flex: 1 1 0; min-width: 0; padding: 8px 10px; } .studio-card, .studio-panel, .studio-sidebar-card { padding: 14px; border-radius: 14px; } .studio-card-title { gap: 10px; margin-bottom: 12px; } .studio-card-title h3, .studio-card-title h4 { font-size: 14px; } .studio-card-title p { font-size: 11.5px; line-height: 1.45; } .dashboard-hero { padding: 20px 18px; } .dashboard-hero-actions { gap: 8px; } .dashboard-hero-actions > .studio-button, .dashboard-hero-actions > .studio-button-secondary, .dashboard-hero-actions > .studio-button-ghost { flex: none; width: 100%; min-width: 0; justify-content: center; padding: 7px 8px; font-size: 11.5px; line-height: 1.2; white-space: normal; } .detail-sidebar-tabs { grid-template-columns: 1fr; } .dashboard-kpi-card { min-height: 108px; padding: 13px; } .dashboard-kpi-card strong { font-size: 26px; } .dashboard-kpi-card p { font-size: 11.5px; line-height: 1.45; } .dashboard-project-card { padding: 14px; } .dashboard-project-copy { gap: 10px; } .dashboard-project-avatar { width: 36px; height: 36px; min-width: 36px; border-radius: 12px; font-size: 17px; } .dashboard-project-title-row h3 { font-size: 16px; } .dashboard-project-copy-body p { font-size: 12px; line-height: 1.5; } .dashboard-project-stat { padding: 10px 11px; } .dashboard-project-stat strong { font-size: 15px; } .dashboard-project-summary { padding: 10px 12px; font-size: 11.5px; line-height: 1.5; } .dashboard-activity-row { align-items: flex-start; padding: 10px 0; } .dashboard-activity-title { font-size: 12.5px; } .dashboard-activity-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; } .pricing-rate-card { padding: 14px; } .pricing-rate-value, .pricing-analysis-value, .pricing-scenario-stat { font-size: 24px; } .pricing-rate-card p, .pricing-analysis-card p, .pricing-scenario-card p { font-size: 12px; line-height: 1.5; } .project-workspace-nav { gap: 6px; margin-bottom: 14px; } .project-workspace-link { padding: 8px 12px; font-size: 11.5px; } .workspace-compact-card { padding: 12px 13px; } .usage-stat-strip { padding: 7px 0 0; } .usage-stat-cell { padding: 3px 10px; } .usage-stat-val { font-size: 12px; } .usage-stat-lbl { font-size: 9px; } .usage-stat-sep { height: 22px; } .workspace-action-grid { grid-template-columns: 1fr; } .workspace-action-card { padding: 10px 11px; } .workspace-note { font-size: 11px; } .account-layout, .access-management-compact-stats, .access-management-content-grid, .access-management-content-grid-wide { grid-template-columns: 1fr; } .account-sidebar { position: static; top: auto; } .access-management-layout { grid-template-columns: 1fr; } .access-management-sidebar-toggle { display: inline-flex; } .access-management-sidebar-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(2, 6, 23, 0.45); z-index: 109; } .access-management-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); max-height: none; border-radius: 0 20px 20px 0; transform: translateX(-105%); transition: transform 180ms ease; z-index: 110; } .access-management-sidebar.is-open { transform: translateX(0); } .access-management-sidebar-close { display: inline-flex; } .access-management-header { padding: 14px; } .access-management-header-row { align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: nowrap; margin-bottom: 12px; } .access-management-title-row { align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; } .access-management-sidebar-toggle { width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; border-radius: 10px; flex: 0 0 auto; } .access-management-sidebar-toggle span { display: none; } .access-management-title-copy { gap: 0; } .access-management-title-row .detail-hero-kicker { font-size: 9px; letter-spacing: .14em; line-height: 1.2; } .access-management-title-row h3 { margin-top: 2px; font-size: 18px; line-height: 1.1; } .access-management-title-row p { display: none; } .access-management-header-actions { gap: 6px; flex: 0 0 auto; align-items: center; margin-bottom: 12px; } .access-management-header-action { width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; border-radius: 10px; } .access-management-header-action-label { display: none; } .access-management-toolbar { flex-direction: column; align-items: flex-start; } .dashboard-plan-badges, .hosted-plan-card-capabilities, .dashboard-module-chips, .detail-hero-chips { gap: 6px; } .studio-chip { padding: 3px 8px; font-size: 10px; line-height: 1.2; } .access-management-header-badges { gap: 5px; margin-top: 10px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .access-management-header-badges::-webkit-scrollbar { display: none; } .access-management-header-badges .studio-chip { flex: 0 0 auto; padding: 4px 8px; font-size: 10px; line-height: 1.15; white-space: nowrap; } .access-management-chip-full { display: none; } .access-management-chip-short { display: inline; } .access-management-filter { max-width: none; width: 100%; } .access-management-sidebar { width: min(344px, 88vw); padding: 14px 12px 18px; } .access-management-sidebar-head { gap: 10px; align-items: center; } .access-management-sidebar-head p { display: none; } .access-management-sidebar-metrics { gap: 6px; } .access-management-sidebar-stat { padding: 10px 8px; border-radius: 12px; } .access-management-sidebar-stat strong { font-size: 15px; } .access-management-sidebar-stat span { font-size: 8px; } .access-management-sidebar-nav { gap: 6px; } .access-management-sidebar-nav--views .access-management-sidebar-item { padding: 10px; min-height: 56px; align-content: center; } .access-management-sidebar-nav--views .access-management-sidebar-item small { display: none; } .access-management-sidebar-nav--views .access-management-sidebar-item span { font-size: 12px; line-height: 1.2; } .access-management-sidebar-nav--scopes .access-management-sidebar-item { padding: 10px 11px; } .access-management-sidebar-nav--scopes .access-management-sidebar-item small { font-size: 10px; line-height: 1.3; } .access-management-members-nav { width: 100%; gap: 6px; } .access-management-members-nav-item { flex: 1 1 auto; text-align: center; padding: 7px 10px; font-size: 11.5px; } .access-management-pagination { align-items: flex-start; flex-direction: column; } .access-management-pagination-controls { width: 100%; justify-content: space-between; } .access-management-project-grid { grid-template-columns: 1fr; } .access-management-bulk-upload-shell { padding: 12px 13px; gap: 7px; } .access-management-bulk-upload-shell .studio-inline-actions { width: 100%; } .access-management-bulk-upload-shell .studio-inline-actions > * { flex: 1 1 auto; justify-content: center; } .workspace-access-switcher { grid-template-columns: 1fr; } .workspace-access-grid, .workspace-access-subgrid { grid-template-columns: 1fr; } .workspace-access-item { flex-direction: column; align-items: flex-start; } .project-memory-grid { grid-template-columns: 1fr; } .project-memory-card { gap: 10px; padding: 12px 13px; } .project-memory-stat { padding: 9px 10px; gap: 3px; } .project-memory-stat span { font-size: 9px; } .project-memory-stat strong { font-size: 12px; } .workspace-token-row { align-items: center; gap: 6px; } .workspace-token-prefix { max-width: 100%; } .project-activity-row { padding: 10px 11px; gap: 8px; } .project-activity-kind { min-width: 0; font-size: 8.5px; } .project-activity-arrow { display: none; } .detail-nav-bar { gap: 10px; padding: 10px 0 8px; } .detail-action-group { gap: 6px; } .detail-hero-body { gap: 14px; } .detail-hero-avatar { width: 60px; height: 60px; border-radius: 18px; font-size: 26px; } .detail-hero-name { font-size: clamp(21px, 8vw, 28px); } .detail-hero-menu-panel { width: min(220px, calc(100vw - 30px)); } .detail-hero-role, .detail-hero-desc { font-size: 12.5px; } .detail-hero-stat-val { font-size: 20px; } .detail-stat-item { border-radius: 16px; } .src-card { padding: 11px; } .run-row { gap: 8px; } .brain-grid-card { padding: 0 10px 12px; } .brain-grid-avatar { width: 56px; height: 56px; font-size: 23px; } .brain-grid-name { font-size: 13px; } .projects-bar { padding: 10px 12px; gap: 8px; } .docs-layout { padding: 20px 14px 52px; } .docs-section { padding-bottom: 40px; margin-bottom: 34px; } .docs-lead, .docs-content p, .docs-ul, .docs-ol { font-size: 13px; line-height: 1.65; } .docs-callout { padding: 12px 13px; gap: 10px; } .docs-step { gap: 12px; padding: 16px 0; } .docs-code-block pre { padding: 14px; font-size: 12px; line-height: 1.58; } .docs-tab-bar { overflow-x: auto; scrollbar-width: none; } .docs-tab-bar::-webkit-scrollbar { display:none; } .docs-tab-btn { white-space: nowrap; padding: 7px 12px; } } @media (max-width:640px) { .pricing-rate-grid, .pricing-analysis-grid, .pricing-scenario-grid, .pricing-note-grid { grid-template-columns: 1fr; } .dashboard-project-stats, .dashboard-kpi-grid, .dashboard-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-workspace-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .project-workspace-link { white-space: nowrap; } .dashboard-hero { padding: 16px 14px; } .dashboard-project-footer, .dashboard-project-actions, .detail-action-group, .lp-project-actions, .lp-steps-cta { flex-direction: column; align-items: stretch; } .dashboard-project-footer > .studio-button, .dashboard-project-footer > .studio-button-secondary, .dashboard-project-footer > .studio-button-ghost, .dashboard-project-actions > .studio-button, .dashboard-project-actions > .studio-button-secondary, .dashboard-project-actions > .studio-button-ghost, .detail-action-group > .studio-button, .detail-action-group > .studio-button-secondary, .detail-action-group > .studio-button-ghost, .detail-action-group > .studio-button-danger, .lp-project-actions > .studio-button, .lp-project-actions > .studio-button-secondary, .lp-project-actions > .studio-button-ghost, .lp-steps-cta > .studio-button, .lp-steps-cta > .studio-button-secondary, .lp-steps-cta > .studio-button-ghost { width: 100%; justify-content: center; } .detail-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .memory-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .detail-hero-stat-cell { padding: 11px 12px; } .detail-stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; } .detail-hero-body { padding: 12px; } .detail-hero-chips { gap: 5px; } .detail-hero-stat-cell { gap: 4px; } .workspace-stat-strip .usage-stat-cell { min-width: 33.333%; padding: 4px 0; } .workspace-stat-strip .usage-stat-sep { display: none; } .public-agent-layout { grid-template-columns: 1fr; } .public-agent-page { gap: 14px; } .public-agent-sidebar { overflow: visible; } .public-agent-chat-shell { min-height: 60vh; } .public-agent-topbar { flex-direction: column; align-items: stretch; } .public-agent-topbar-actions { justify-content: flex-start; } .public-agent-chat-head { flex-direction: column; align-items: stretch; } .public-agent-chat-head-chips { justify-content: flex-start; } .public-agent-chat-log .pg-msg-body, .public-agent-chat-log .pg-msg-user .pg-msg-body { max-width: 100%; } .src-card-top, .integ-row { flex-wrap: wrap; } .src-card-meta { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; } .src-card-name, .src-card-target, .integ-val, .run-meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .integ-label { min-width: 0; } .docs-layout { padding: 18px 12px 48px; } .docs-sidebar { margin-bottom: 18px; padding-bottom: 12px; } .docs-content p, .docs-ul, .docs-ol { font-size: 12.5px; } .docs-step-num { width: 24px; height: 24px; font-size: 11px; } .docs-code-header { padding: 8px 10px; } .docs-copy-btn { padding: 3px 8px; } .docs-table th, .docs-table td { padding: 8px 10px; } } @media (max-width:640px) { .dashboard-project-stat strong { font-size: 14px; } .dashboard-project-stat span, .project-memory-stat span, .detail-hero-stat-lbl, .detail-stat-item strong, .memory-summary-label { letter-spacing: .06em; } .dashboard-project-stat, .project-memory-stat, .detail-stat-item, .memory-summary-item { border-radius: 12px; } } @media (max-width:480px) { .studio-topbar-actions { margin-left: auto; width: auto; max-width: calc(100% - 112px); justify-content: flex-end; gap: 5px; } .studio-brand-copy h1 { font-size: 13px; } .studio-topbar-cta { padding-inline: 8px; } .studio-topbar-actions > .studio-button, .studio-topbar-actions > .studio-button-secondary, .studio-topbar-actions > .studio-button-ghost { padding: 7px 8px; font-size: 11.5px; } .list-header-right { gap: 8px; } .dashboard-hero-actions, .dashboard-project-footer, .dashboard-project-actions, .projects-bar { gap: 6px; } .list-stats { flex-wrap: wrap; border-radius: 18px; padding: 8px; } .list-stat { flex: 1 1 50%; min-width: 0; padding: 8px 10px; } .list-stat-divider { display: none; } .detail-action-group > .studio-button, .detail-action-group > .studio-button-secondary, .detail-action-group > .studio-button-ghost, .detail-action-group > .studio-button-danger { flex-basis: 100%; } .detail-hero-mobile-menu { top: 12px; right: 12px; } .detail-hero-menu-toggle { width: 34px; height: 34px; border-radius: 11px; } .detail-hero-menu-panel { width: min(212px, calc(100vw - 24px)); } .public-agent-shell { padding: 12px; } .public-agent-topbar, .public-agent-sidebar-card, .public-agent-sidebar-hero, .public-agent-starters, .public-agent-chat-head, .public-agent-chat-log, .public-agent-lock-card { padding-left: 14px; padding-right: 14px; } .public-agent-sidebar-chips { padding: 0 14px 14px; } .public-agent-sidebar-title { font-size: 26px; } .public-agent-chat-title { font-size: 23px; } .public-agent-starters-row { gap: 8px; } .public-agent-prompt-chip { width: 100%; justify-content: flex-start; text-align: left; } .studio-shell.studio-shell-public-chat .public-agent-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .brain-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .brain-grid-card { padding: 0 8px 10px; } .brain-grid-avatar { width: 50px; height: 50px; font-size: 20px; } .brain-grid-name { font-size: 12px; } .brain-grid-project { font-size: 9.5px; margin-bottom: 8px; } .dashboard-project-card, .workspace-compact-card, .project-memory-card, .pricing-rate-card, .studio-card, .studio-sidebar-card { padding: 10px; } .public-agent-lock-copy h3 { font-size: 24px; } .dashboard-project-stat, .project-memory-stat, .detail-stat-item { padding: 8px 9px; } .memory-summary-strip, .detail-hero-stats, .detail-stat-bar, .dashboard-project-stats, .project-memory-stats { gap: 6px; } .memory-summary-item { padding: 8px 9px; } .memory-summary-value, .detail-hero-stat-val { font-size: 15px; } .dashboard-project-stat strong { font-size: 13px; margin-top: 4px; } .detail-hero-stat-cell { padding: 9px 10px; } .project-workspace-link { padding: 7px 11px; font-size: 11px; } .docs-callout { flex-direction: column; gap: 8px; } .docs-code-block pre { padding: 12px; font-size: 11.5px; } .memory-avatar-section-head { align-items: flex-start; } .wiz-avatar-grid { grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); } } @media (max-width:380px) { .memory-summary-strip, .detail-hero-stats, .detail-stat-bar, .dashboard-project-stats, .dashboard-kpi-grid, .dashboard-shortcut-grid { grid-template-columns: 1fr; } .project-memory-head { align-items: center; } .project-memory-stats { flex-direction: column; gap: 4px; } .workspace-stat-strip .usage-stat-cell { min-width: 50%; } .dashboard-hero-actions { grid-template-columns: 1fr; } } @media (max-width:640px) { .source-composer-stage, .source-composer-picker, .source-composer-summary-card { padding: 14px; border-radius: 18px; } .studio-form-grid--3, .conversation-memory-grid, .public-access-catalog-grid, .source-access-grid { grid-template-columns: 1fr; } .source-composer-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-source-type-card.compact { min-height: 50px; padding: 7px 8px; } .source-resource-picker-head > .studio-button-secondary { width: 100%; justify-content: center; } .assistant-builder-action-grid { grid-template-columns: 1fr; } .assistant-intent-meta { gap: 6px; } .assistant-step-card { grid-template-columns: 1fr; } .assistant-step-rail { justify-content: flex-start; padding: 12px 0 0 14px; } .assistant-step-rail::after { display: none; } .assistant-step-body { padding: 0 12px 12px; } .source-composer-summary-head { flex-direction: column; } .public-settings-link-row { grid-template-columns: 1fr; } .public-settings-inline-copy { grid-template-columns: 1fr; } .public-settings-panel-card .studio-form-grid, .public-settings-grid--4, .public-settings-grid--3, .public-settings-grid--2, .public-settings-guide-list, .public-settings-guide-notes, .public-embed-toggle-grid, .public-settings-sidebar-stats, .public-settings-reference-row { grid-template-columns: 1fr !important; } .public-settings-span-2, .public-settings-span-3, .public-settings-span-4 { grid-column: 1 / -1; } .public-settings-link-actions { justify-content: flex-start; } .public-settings-link-actions > *, .public-settings-actions > * { flex: 1 1 100%; justify-content: center; } .public-settings-link-field { font-size: 10.5px; } .public-domain-card { padding: 14px; } .public-domain-summary-copy strong { font-size: clamp(18px, 7vw, 24px); } .public-domain-actions > * { width: 100%; justify-content: center; } .public-settings-inline-copy-field code { font-size: 10.5px; } .public-settings-nav-button { padding: 12px 13px; } .public-settings-content-head { padding: 14px 16px; } .public-access-contact-preview { grid-template-columns: 1fr; } } @media (max-width:640px) { .studio-label-full.studio-label-full { display: none; } .studio-label-short.studio-label-short { display: inline; } .studio-mobile-icon-only { width: 34px !important; min-width: 34px; flex: 0 0 34px !important; padding-left: 0 !important; padding-right: 0 !important; justify-content: center; } .studio-mobile-icon-only .studio-label-full, .studio-mobile-icon-only .studio-label-short { display: none; } .list-header-right.list-header-right--compact { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; } .list-header-right.list-header-right--compact::-webkit-scrollbar { display: none; } .list-header-right.list-header-right--compact > .studio-button, .list-header-right.list-header-right--compact > .studio-button-secondary, .list-header-right.list-header-right--compact > .studio-button-ghost, .list-header-right.list-header-right--compact > .studio-button-danger { width: auto; min-width: 0; flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; } .list-header-right.list-header-right--compact > .studio-mobile-icon-only { flex-grow: 0; } .list-header-right.list-header-right--compact .usage-range-toggle { flex: 0 0 auto; } .dashboard-project-actions, .dashboard-project-footer { flex-direction: row; align-items: center; } .dashboard-project-actions > .studio-button, .dashboard-project-actions > .studio-button-secondary, .dashboard-project-actions > .studio-button-ghost, .dashboard-project-footer > .studio-button, .dashboard-project-footer > .studio-button-secondary, .dashboard-project-footer > .studio-button-ghost { width: auto; min-width: 0; flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; } .project-workspace-link { gap: 4px; padding-left: 10px; padding-right: 10px; } .workspace-action-card > span:first-child { gap: 4px; } } /* end styles/pages/responsive.css */ /* begin styles/pages/assistant-builder.css */ /* ────────────────────────────────────────────── Assistant Canvas Builder Node-based workflow editor ────────────────────────────────────────────── */ /* Wizard-page overrides (shared with parent layout) */ .wiz-page--assistant { max-width: min(1540px, calc(100vw - 18px)); padding-inline: 12px; } .wiz-body--assistant { grid-template-columns: minmax(0, 1fr); gap: 20px; } .wiz-main-card--assistant { padding: 22px; border-radius: 22px; } /* ── Control Bar ──────────────────────────────── */ .assistant-canvas-control-bar { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 0.9fr); gap: 12px; } .assistant-canvas-control-cluster { display: grid; gap: 12px; padding: 16px 18px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c-line) 74%, var(--c-accent) 26%); background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--c-accent) 6%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 98%, transparent)); } .assistant-canvas-control-cluster--runtime { align-content: start; } .assistant-canvas-control-copy { display: grid; gap: 3px; } .assistant-canvas-control-copy strong { font-size: 14px; letter-spacing: -.02em; } .assistant-canvas-control-copy > span:last-child { color: var(--c-muted); font-size: 12px; line-height: 1.5; } .assistant-canvas-control-kicker { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .assistant-canvas-control-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .assistant-canvas-control-select { display: grid; gap: 6px; flex: 1 1 320px; } .assistant-canvas-control-select label { color: var(--c-muted); font-size: 12px; } .assistant-canvas-template-setup { display: grid; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-line) 80%, var(--c-accent) 20%); background: color-mix(in srgb, var(--c-panel-strong) 96%, white 4%); } .assistant-canvas-template-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .assistant-canvas-template-field { display: grid; gap: 6px; } .assistant-canvas-template-field label { font-size: 12px; color: var(--c-muted); } .assistant-canvas-template-field small { color: var(--c-muted); font-size: 11px; line-height: 1.45; } .assistant-canvas-starter-select { min-width: min(320px, 100%); } .assistant-canvas-template-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 92px; min-height: 42px; } .assistant-canvas-control-summary { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); background: color-mix(in srgb, var(--c-panel-strong) 96%, white 4%); } .assistant-canvas-control-summary.is-empty { border-style: dashed; color: var(--c-muted); font-size: 12px; line-height: 1.55; } .assistant-canvas-control-summary-copy { display: grid; gap: 3px; } .assistant-canvas-control-summary-copy strong { font-size: 13px; letter-spacing: -.01em; } .assistant-canvas-control-summary-copy span { color: var(--c-muted); font-size: 12px; line-height: 1.5; } .assistant-canvas-control-summary-meta { display: flex; flex-wrap: wrap; gap: 8px; } .assistant-canvas-control-warning { padding: 8px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c-warning, #f59e0b) 34%, var(--c-line) 66%); background: color-mix(in srgb, var(--c-warning, #f59e0b) 12%, var(--c-panel) 88%); color: var(--c-text); font-size: 11.5px; line-height: 1.45; } .assistant-builder-shell--compact .assistant-canvas-control-cluster { padding: 14px 16px; } .assistant-builder-shell--compact .assistant-canvas-control-copy strong { font-size: 13px; } /* ── Global Settings Strip ───────────────────── */ .assistant-canvas-global-strip { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; padding: 0; border: none; background: transparent; } .assistant-canvas-global-item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%); background: color-mix(in srgb, var(--c-panel-strong) 96%, white 4%); font-size: 12.5px; font-weight: 600; white-space: nowrap; } .assistant-canvas-global-item > label, .assistant-canvas-global-item > span:first-child { color: var(--c-muted); font-size: 12px; } .assistant-canvas-global-item--toggle { cursor: pointer; } .assistant-canvas-toolshelf-details { position: relative; } .assistant-canvas-toolshelf-summary { cursor: pointer; font-size: 12.5px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); } .assistant-canvas-toolshelf-summary::-webkit-details-marker { display: none; } .assistant-canvas-toolshelf-count { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent-soft) 60%, var(--c-panel) 40%); font-size: 11px; font-weight: 700; } .assistant-canvas-toolshelf-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 8; width: min(340px, calc(100vw - 48px)); padding: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-line) 74%, var(--c-accent) 26%); background: color-mix(in srgb, var(--c-panel-strong) 97%, white 3%); box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14); white-space: normal; } .assistant-canvas-toolshelf-head { margin-bottom: 10px; } .assistant-canvas-toolshelf-head strong { display: block; font-size: 12.5px; } .assistant-canvas-toolshelf-head small { display: block; margin-top: 4px; color: var(--c-muted); font-size: 11.5px; line-height: 1.45; } .assistant-canvas-toolshelf-sources { margin: 0 0 10px; flex-wrap: wrap; } .assistant-canvas-toolshelf-warning { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c-warning, #f59e0b) 32%, var(--c-line) 68%); background: color-mix(in srgb, var(--c-warning, #f59e0b) 12%, var(--c-panel) 88%); color: var(--c-text); font-size: 11.5px; line-height: 1.45; } .assistant-canvas-toolshelf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); gap: 6px; } .assistant-canvas-toolshelf-check { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 6px 10px; border-radius: 10px; font-size: 12px; cursor: pointer; transition: background 120ms ease; } .assistant-canvas-toolshelf-check:hover { background: color-mix(in srgb, var(--c-accent-soft) 30%, transparent); } .assistant-canvas-toolshelf-check input { flex-shrink: 0; accent-color: var(--c-accent); } .assistant-canvas-toolshelf-check span { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; } /* ── Workflow Tabs ────────────────────────────── */ .assistant-canvas-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; } .assistant-canvas-tab { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 12px 12px 0 0; border: 1px solid var(--c-line); border-bottom: none; background: color-mix(in srgb, var(--c-panel) 92%, transparent); color: var(--c-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .assistant-canvas-tab:hover { color: var(--c-text); background: var(--c-panel); } .assistant-canvas-tab.is-active { color: var(--c-text); background: color-mix(in srgb, var(--c-panel-strong) 97%, white 3%); border-color: color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); } .assistant-canvas-tab--add { min-width: 36px; justify-content: center; padding: 0; font-size: 16px; font-weight: 700; color: var(--c-muted); } /* ── 3-Pane Canvas Layout ────────────────────── */ .assistant-builder-shell--canvas { display: grid; gap: 16px; margin-top: 20px; } .assistant-builder-shell--legacy { display: grid; gap: 14px; margin-top: 20px; } .assistant-canvas-layout { display: grid; grid-template-columns: 108px minmax(0, 1fr) 0; min-height: 520px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); overflow: hidden; background: color-mix(in srgb, var(--c-panel-strong) 97%, white 3%); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.055); transition: grid-template-columns 220ms ease; } .assistant-canvas-layout.has-inspector { grid-template-columns: 108px minmax(0, 1fr) 320px; } /* ── Left: Node Shelf ────────────────────────── */ .assistant-canvas-shelf { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; border-right: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel-strong) 98%, white 2%); overflow-y: auto; } .assistant-canvas-shelf-label { padding: 0 6px 6px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--c-muted); } .assistant-shelf-node { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 72px; padding: 10px 8px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); font-size: 11px; font-weight: 600; cursor: grab; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; user-select: none; text-align: center; } .assistant-shelf-node:hover { transform: translateY(-1px); border-color: var(--c-line-strong); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06); } .assistant-shelf-node:active { cursor: grabbing; } .assistant-shelf-node-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; font-weight: 700; flex-shrink: 0; } .assistant-shelf-divider { height: 1px; margin: 6px 0; background: var(--c-line); } .assistant-shelf-hint { padding: 2px 4px; color: var(--c-muted); font-size: 11px; line-height: 1.5; text-align: center; } .assistant-shelf-action { display: flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px dashed var(--c-line); background: transparent; color: var(--c-text); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .assistant-shelf-action:hover { background: color-mix(in srgb, var(--c-accent-soft) 32%, transparent); border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-line) 58%); } .assistant-shelf-action--danger:hover { border-color: color-mix(in srgb, #ef4444 32%, var(--c-line) 68%); background: color-mix(in srgb, #ef4444 6%, transparent); } /* ── Center: Canvas Viewport ─────────────────── */ .assistant-canvas-viewport { position: relative; padding: 24px 20px; overflow: auto; background: linear-gradient(color-mix(in srgb, var(--c-line) 34%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-line) 34%, transparent) 1px, transparent 1px), radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--c-accent) 3%, transparent), transparent 40%), color-mix(in srgb, var(--c-bg) 96%, var(--c-panel) 4%); background-size: 28px 28px, 28px 28px, auto, auto; transition: background 160ms ease; } .assistant-canvas-viewport.is-drop-active { background: linear-gradient(color-mix(in srgb, var(--c-line) 42%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-line) 42%, transparent) 1px, transparent 1px), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-accent) 6%, transparent), transparent 50%), color-mix(in srgb, var(--c-bg) 96%, var(--c-panel) 4%); background-size: 28px 28px, 28px 28px, auto, auto; } .assistant-canvas-flow { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 380px; margin: 0 auto; } .assistant-canvas-viewport-toolbar { position: sticky; top: 10px; z-index: 4; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px auto; padding: 6px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); background: color-mix(in srgb, var(--c-panel-strong) 92%, white 8%); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .assistant-canvas-stage { position: relative; min-width: 740px; min-height: 400px; margin: 0 auto; } .assistant-graph-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .assistant-graph-edge-path { fill: none; stroke: color-mix(in srgb, var(--c-line-strong) 62%, var(--c-accent) 38%); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.08)); } .assistant-graph-edge-label { fill: var(--c-muted); font-size: 12px; font-weight: 700; text-anchor: middle; } .assistant-canvas-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px; text-align: center; color: var(--c-muted); font-size: 13px; line-height: 1.55; } /* ── Canvas Node ─────────────────────────────── */ .assistant-canvas-node-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; } .assistant-canvas-node { display: flex; align-items: flex-start; gap: 12px; width: 248px; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 98%, white 2%), var(--c-panel)); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease; position: relative; } .assistant-graph-node { position: absolute; width: 248px; min-height: 112px; cursor: grab; user-select: none; } .assistant-graph-node:active { cursor: grabbing; } .assistant-canvas-node:hover { border-color: color-mix(in srgb, var(--c-line-strong) 72%, var(--c-accent) 28%); box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .assistant-canvas-node.is-selected { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent-soft) 72%, transparent), 0 18px 28px rgba(15, 23, 42, 0.12); } .assistant-canvas-node.is-dragging { opacity: 0.5; transform: scale(0.96); } /* Node type accent (left bar) */ .assistant-canvas-node--trigger { border-left: 4px solid #3B82F6; } .assistant-canvas-node--ask { border-left: 4px solid #10B981; } .assistant-canvas-node--decision { border-left: 4px solid #F59E0B; } .assistant-canvas-node--tool { border-left: 4px solid #8B5CF6; } .assistant-canvas-node--message { border-left: 4px solid #14B8A6; } .assistant-canvas-node--end { border-left: 4px solid #64748B; } /* Node badge */ .assistant-canvas-node-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; font-weight: 700; flex-shrink: 0; line-height: 1; } .assistant-canvas-node-badge--blue { background: color-mix(in srgb, #3B82F6 14%, var(--c-panel)); color: #3B82F6; } .assistant-canvas-node-badge--green { background: color-mix(in srgb, #10B981 14%, var(--c-panel)); color: #10B981; } .assistant-canvas-node-badge--amber { background: color-mix(in srgb, #F59E0B 14%, var(--c-panel)); color: #F59E0B; } .assistant-canvas-node-badge--violet { background: color-mix(in srgb, #8B5CF6 14%, var(--c-panel)); color: #8B5CF6; } .assistant-canvas-node-badge--teal { background: color-mix(in srgb, #14B8A6 14%, var(--c-panel)); color: #14B8A6; } .assistant-canvas-node-badge--slate { background: color-mix(in srgb, #64748B 14%, var(--c-panel)); color: #64748B; } .assistant-canvas-node-copy { display: grid; gap: 3px; min-width: 0; flex: 1; } .assistant-canvas-node-copy strong { font-size: 12.5px; line-height: 1.3; } .assistant-canvas-node-copy span { color: var(--c-muted); font-size: 11.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .assistant-canvas-node-remove { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: none; background: transparent; color: var(--c-muted); font-size: 16px; cursor: pointer; opacity: 0; transition: opacity 120ms ease, background 120ms ease, color 120ms ease; } .assistant-canvas-node:hover .assistant-canvas-node-remove { opacity: 1; } .assistant-canvas-node-remove:hover { background: color-mix(in srgb, #ef4444 10%, transparent); color: #ef4444; } .assistant-graph-port { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-line) 70%, var(--c-accent) 30%); background: color-mix(in srgb, var(--c-panel-strong) 94%, white 6%); color: var(--c-text); font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08); } .assistant-graph-port--input { left: -13px; top: 42px; width: 24px; min-width: 24px; padding: 0; pointer-events: none; } .assistant-graph-port--next, .assistant-graph-port--true, .assistant-graph-port--false { right: -13px; cursor: pointer; transition: transform 120ms ease, border-color 120ms ease, background 120ms ease; } .assistant-graph-port--next { top: 42px; min-width: 28px; padding: 0; font-size: 14px; } .assistant-graph-port--true { top: 20px; color: #0f766e; } .assistant-graph-port--false { top: 62px; color: #b45309; } .assistant-graph-port--next:hover, .assistant-graph-port--true:hover, .assistant-graph-port--false:hover, .assistant-graph-port.is-active { border-color: color-mix(in srgb, var(--c-accent) 58%, var(--c-line) 42%); background: color-mix(in srgb, var(--c-accent-soft) 72%, white 28%); transform: scale(1.04); } /* ── Connector Lines ─────────────────────────── */ .assistant-canvas-connector { display: flex; justify-content: center; height: 28px; flex-shrink: 0; } .assistant-canvas-connector-line { width: 2px; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--c-line-strong) 78%, var(--c-accent) 22%); } /* ── Drop Indicators ─────────────────────────── */ .assistant-canvas-node-wrap.drop-above::before { content: ""; display: block; width: 100%; height: 3px; margin-bottom: 6px; border-radius: 999px; background: var(--c-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--c-accent) 50%, transparent); } .assistant-canvas-node-wrap.drop-below::after { content: ""; display: block; width: 100%; height: 3px; margin-top: 6px; border-radius: 999px; background: var(--c-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--c-accent) 50%, transparent); } /* ── Right: Inspector Panel ──────────────────── */ .assistant-canvas-inspector { display: flex; flex-direction: column; border-left: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel-strong) 98%, white 2%); overflow-y: auto; overflow-x: hidden; } .assistant-inspector-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--c-line); flex-shrink: 0; } .assistant-inspector-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .assistant-inspector-close { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--c-line) 72%, var(--c-accent) 28%); border-radius: 10px; background: var(--c-panel); color: var(--c-muted); font-size: 18px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; } .assistant-inspector-close:hover { color: var(--c-text); border-color: color-mix(in srgb, var(--c-accent) 52%, var(--c-line) 48%); background: color-mix(in srgb, var(--c-accent-soft) 42%, white 58%); } .assistant-inspector-header h5 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.015em; } .assistant-inspector-header small { display: block; margin-top: 2px; color: var(--c-muted); font-size: 11.5px; } .assistant-inspector-body { display: grid; gap: 14px; padding: 18px 20px 28px; } .assistant-inspector-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 24px; text-align: center; color: var(--c-muted); height: 100%; } .assistant-inspector-empty-icon { font-size: 28px; opacity: 0.3; } .assistant-inspector-empty p { margin: 0; font-size: 13px; line-height: 1.5; } .assistant-inspector-empty small { font-size: 11.5px; line-height: 1.5; } .assistant-inspector-optional { opacity: 0.5; font-weight: 400; } .assistant-inspector-note { margin: 0; padding: 16px; border-radius: 14px; border: 1px dashed var(--c-line); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); color: var(--c-muted); font-size: 12.5px; line-height: 1.55; } .assistant-inspector-payload-section { padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--c-line) 78%, transparent); } .assistant-inspector-payload-head { margin-bottom: 12px; } .assistant-inspector-payload-head strong { display: block; font-size: 12.5px; } .assistant-inspector-payload-head small { display: block; margin-top: 4px; color: var(--c-muted); font-size: 11.5px; line-height: 1.5; } .assistant-inspector-advanced-grid { display: grid; gap: 12px; margin-top: 12px; } /* ── Reused form styles (inline check, payload grid, etc.) ── */ .assistant-inline-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--c-text); font-size: 12.5px; font-weight: 600; cursor: pointer; } .assistant-inline-check input { accent-color: var(--c-accent); } .assistant-step-payload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .assistant-payload-field--wide, .assistant-payload-field--array { grid-column: 1 / -1; } .assistant-payload-input { font-family: var(--font-mono); } .assistant-step-payload-empty { padding: 12px 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--c-line) 70%, var(--c-accent) 30%); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); color: var(--c-muted); font-size: 12px; line-height: 1.55; } .assistant-step-input { min-height: 140px; font-family: var(--font-mono); } .assistant-node-advanced { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--c-line) 78%, transparent); } .assistant-node-advanced summary { list-style: none; cursor: pointer; color: var(--c-text); font-size: 12px; font-weight: 650; } .assistant-node-advanced summary::-webkit-details-marker { display: none; } .assistant-node-advanced[open] summary { color: var(--c-accent-hi); } /* ── JSON Drawer ─────────────────────────────── */ .assistant-builder-json-drawer { border-radius: 24px; border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 97%, white 3%), color-mix(in srgb, var(--c-panel) 98%, transparent)); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.055); } .assistant-builder-json-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; } .assistant-builder-json-summary::-webkit-details-marker { display: none; } .assistant-builder-json-summary strong { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.015em; } .assistant-builder-json-summary span { display: block; margin-top: 3px; color: var(--c-muted); font-size: 12px; line-height: 1.55; } .assistant-builder-json-summary-caret { display: block; width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: var(--c-panel); position: relative; } .assistant-builder-json-summary-caret::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted); transform: translate(-50%, -60%) rotate(45deg); transition: transform 160ms ease; } .assistant-builder-json-drawer[open] .assistant-builder-json-summary-caret::after { transform: translate(-50%, -30%) rotate(-135deg); } .assistant-builder-json-pane { display: grid; gap: 14px; padding: 0 22px 22px; } .assistant-builder-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .assistant-builder-section-head h5 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.015em; } .assistant-builder-section-head p { margin: 4px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.55; } .assistant-builder-json-actions { display: flex; gap: 8px; flex-shrink: 0; } .assistant-json-textarea { min-height: 200px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; } .assistant-json-footer small { color: var(--c-muted); font-size: 12px; line-height: 1.55; } .assistant-json-footer small[data-tone="bad"] { color: var(--c-danger, #ef4444); } .assistant-json-footer small[data-tone="good"] { color: var(--c-success, #10B981); } .assistant-json-footer small[data-tone="accent"] { color: var(--c-accent-hi); } .assistant-builder-note { color: var(--c-muted); font-size: 12px; line-height: 1.55; } /* ── Responsive ──────────────────────────────── */ @media (max-width: 1480px) { .assistant-canvas-control-bar { grid-template-columns: 1fr; } .assistant-canvas-layout.has-inspector { grid-template-columns: 100px minmax(0, 1fr) 296px; } } @media (max-width: 1240px) { .wiz-page--assistant { max-width: none; padding-inline: 12px; } .wiz-body--assistant { grid-template-columns: 1fr; } .assistant-canvas-layout { grid-template-columns: 96px minmax(0, 1fr) 0; min-height: 440px; } .assistant-canvas-layout.has-inspector { grid-template-columns: 96px minmax(0, 1fr) 272px; } } @media (max-width: 960px) { .assistant-canvas-layout, .assistant-canvas-layout.has-inspector { grid-template-columns: 1fr; min-height: auto; } .assistant-canvas-shelf { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--c-line); padding: 12px; } .assistant-canvas-shelf-label { width: 100%; padding: 0 0 4px; } .assistant-shelf-node { flex: 1 1 88px; min-height: 64px; } .assistant-canvas-viewport { min-height: 300px; } .assistant-canvas-viewport-toolbar { position: static; margin-left: 0; } .assistant-canvas-stage { min-width: 680px; } .assistant-canvas-inspector { border-left: none; border-top: 1px solid var(--c-line); } .assistant-step-payload-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .assistant-canvas-control-row { flex-direction: column; align-items: stretch; } .assistant-canvas-starter-select { min-width: 0; } .assistant-canvas-global-strip { flex-direction: column; align-items: stretch; } .assistant-canvas-toolshelf-panel { width: 100%; left: 0; right: auto; } .assistant-canvas-toolshelf-grid { grid-template-columns: 1fr; } } /* end styles/pages/assistant-builder.css */ /* begin styles/pages/docs.css */ /* ============================================================ DOCS PAGE ============================================================ */ /* Two-column layout: sidebar + content */ .docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: start; max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; } /* Sticky sidebar */ .docs-sidebar { position: sticky; top: 72px; align-self: start; padding-right: 24px; } .docs-sidebar-inner { padding: 12px 0; } .docs-toc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--studio-muted); margin-bottom: 10px; padding: 0 8px; } .docs-toc { display: flex; flex-direction: column; gap: 1px; } .docs-toc-item { display: block; padding: 6px 8px; font-size: 13px; color: var(--studio-muted); text-decoration: none; border-radius: 6px; border-left: 2px solid transparent; transition: color .15s, background .15s, border-color .15s; line-height: 1.35; } .docs-toc-item:hover { color: var(--studio-text); background: var(--studio-hover, rgba(37,99,235,.04)); } .docs-toc-item.active { color: var(--c-accent); border-left-color: var(--c-accent); background: var(--c-accent-soft); font-weight: 600; } .docs-toc-sub { padding-left: 20px; font-size: 12px; } /* Content area */ .docs-content { min-width: 0; } .docs-section { padding-bottom: 56px; border-bottom: 1px solid var(--studio-line); margin-bottom: 48px; } .docs-section:last-child { border-bottom: none; margin-bottom: 0; } /* Badges */ .docs-section-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent); background: var(--c-accent-soft); border-radius: 4px; padding: 3px 8px; margin-bottom: 12px; } /* Headings */ .docs-h1 { font-size: 32px; font-weight: 800; color: var(--studio-text); margin: 0 0 14px; line-height: 1.15; letter-spacing: -.02em; } .docs-h2 { font-size: 22px; font-weight: 700; color: var(--studio-text); margin: 0 0 12px; letter-spacing: -.01em; } .docs-h3 { font-size: 16px; font-weight: 700; color: var(--studio-text); margin: 0 0 10px; } .docs-lead { font-size: 17px; color: var(--studio-muted); line-height: 1.65; margin: 0 0 20px; } .docs-content p { font-size: 14px; line-height: 1.7; color: var(--studio-text); margin: 0 0 14px; } /* Lists */ .docs-ul, .docs-ol { font-size: 14px; line-height: 1.7; color: var(--studio-text); padding-left: 22px; margin: 0 0 14px; } .docs-ul li, .docs-ol li { margin-bottom: 5px; } /* Inline code */ .docs-code { font-family: var(--studio-code); font-size: 12px; background: var(--studio-code-bg, rgba(15,23,42,.06)); color: var(--c-accent); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--studio-line); white-space: nowrap; } [data-theme="dark"] .docs-code { background: rgba(96,165,250,0.09); color: var(--c-accent); } .workspace-identity-callout .docs-code, .workspace-identity-warning .docs-code, .workspace-identity-field-note .docs-code, .workspace-identity-readonly .docs-code, .workspace-setup-fact .docs-code, .workspace-setup-list-copy .docs-code, .workspace-setup-empty .docs-code, .workspace-ops-list-item .docs-code, .workspace-ops-signal strong .docs-code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Links */ .docs-link { color: var(--c-accent); text-decoration: underline; text-decoration-color: var(--c-accent-soft); text-underline-offset: 2px; transition: text-decoration-color .15s; } .docs-link:hover { text-decoration-color: var(--c-accent); } /* Callouts */ .docs-callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.6; margin: 16px 0; border: 1px solid transparent; } .docs-callout-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; } .docs-callout-info { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.18); color: var(--studio-text); } .docs-callout-tip { background: rgba(34,197,94,.07); border-color: rgba(34,197,94,.18); color: var(--studio-text); } .docs-callout-warning { background: rgba(234,179,8,.09); border-color: rgba(234,179,8,.22); color: var(--studio-text); } [data-theme="dark"] .docs-callout-info { background: rgba(96,165,250,.13); border-color: rgba(96,165,250,.28); } [data-theme="dark"] .docs-callout-tip { background: rgba(144,200,120,.11); border-color: rgba(144,200,120,.24); } [data-theme="dark"] .docs-callout-warning { background: rgba(220,140,50,.13); border-color: rgba(220,140,50,.28); } /* Feature grid */ .docs-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; } .docs-feature-card { display: flex; gap: 12px; padding: 14px 16px; background: var(--studio-surface); border: 1px solid var(--studio-line); border-radius: 10px; font-size: 13px; line-height: 1.5; } .docs-feature-card p { margin: 4px 0 0; font-size: 12px; color: var(--studio-muted); } .docs-feature-icon { font-size: 18px; flex-shrink: 0; } /* Enterprise docs */ .docs-enterprise-hero { display: grid; gap: 18px; margin: 24px 0; padding: 20px 22px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--studio-line)); background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 38%), radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.1), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--studio-surface) 94%, white 6%), color-mix(in srgb, var(--studio-bg, #fff) 92%, white 8%)); box-shadow: 0 24px 54px rgba(15, 23, 42, 0.08); } .docs-enterprise-hero-copy { display: grid; gap: 8px; min-width: 0; } .docs-enterprise-eyebrow, .docs-enterprise-card-kicker { display: inline-flex; align-items: center; width: fit-content; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); background: color-mix(in srgb, var(--c-accent-soft) 72%, white 28%); border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--studio-line)); border-radius: 999px; padding: 5px 9px; } .docs-enterprise-hero-copy strong { font-size: 24px; line-height: 1.2; letter-spacing: -.03em; color: var(--studio-text); } .docs-enterprise-hero-copy p { margin: 0; max-width: 74ch; } .docs-enterprise-pillar-grid, .docs-enterprise-card-grid, .docs-enterprise-decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .docs-enterprise-pillar, .docs-enterprise-card, .docs-enterprise-decision { display: grid; gap: 8px; min-width: 0; padding: 16px; border-radius: 16px; border: 1px solid var(--studio-line); background: linear-gradient(180deg, color-mix(in srgb, var(--studio-surface) 94%, white 6%), color-mix(in srgb, var(--studio-bg, #fff) 90%, white 10%)); } .docs-enterprise-card-featured { border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 18px 38px rgba(37, 99, 235, 0.1); } .docs-enterprise-pillar span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--studio-muted); } .docs-enterprise-pillar strong, .docs-enterprise-card h4, .docs-enterprise-decision h4 { margin: 0; font-size: 16px; line-height: 1.3; letter-spacing: -.02em; color: var(--studio-text); } .docs-enterprise-pillar p, .docs-enterprise-card p, .docs-enterprise-decision p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--studio-muted); } .docs-enterprise-list { margin: 0; padding-left: 18px; font-size: 13px; } .docs-enterprise-list li { margin-bottom: 6px; } .docs-enterprise-steps { margin: 18px 0 22px; padding: 14px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-accent) 14%, var(--studio-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--studio-surface) 96%, white 4%), color-mix(in srgb, var(--studio-bg, #fff) 92%, white 8%)); } .docs-enterprise-steps .docs-step { padding: 18px 0; } [data-theme="dark"] .docs-enterprise-hero, [data-theme="dark"] .docs-enterprise-pillar, [data-theme="dark"] .docs-enterprise-card, [data-theme="dark"] .docs-enterprise-decision, [data-theme="dark"] .docs-enterprise-steps { background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 42%), linear-gradient(180deg, rgba(24, 34, 55, 0.96), rgba(10, 16, 30, 0.98)); border-color: rgba(96, 165, 250, 0.14); box-shadow: 0 24px 54px rgba(2, 6, 23, 0.4); } [data-theme="dark"] .docs-enterprise-card-featured { border-color: rgba(96, 165, 250, 0.24); box-shadow: 0 24px 52px rgba(30, 64, 175, 0.16); } [data-theme="dark"] .docs-enterprise-eyebrow, [data-theme="dark"] .docs-enterprise-card-kicker { background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.18); color: #dbeafe; } [data-theme="dark"] .docs-enterprise-hero-copy strong, [data-theme="dark"] .docs-enterprise-pillar strong, [data-theme="dark"] .docs-enterprise-card h4, [data-theme="dark"] .docs-enterprise-decision h4 { color: rgba(241, 245, 249, 0.98); } [data-theme="dark"] .docs-enterprise-pillar p, [data-theme="dark"] .docs-enterprise-card p, [data-theme="dark"] .docs-enterprise-decision p, [data-theme="dark"] .docs-enterprise-list, [data-theme="dark"] .docs-enterprise-pillar span { color: rgba(191, 219, 254, 0.82); } /* Numbered steps */ .docs-steps { display: flex; flex-direction: column; gap: 0; } .docs-step { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--studio-line); } .docs-step:last-child { border-bottom: none; } .docs-step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .docs-step-body { flex: 1; min-width: 0; } .docs-step-body h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--studio-text); } /* Code blocks */ .docs-code-block { background: var(--studio-code-bg, rgba(15,23,42,.04)); border: 1px solid var(--studio-line); border-radius: 10px; overflow: hidden; margin: 12px 0; } [data-theme="dark"] .docs-code-block { background: rgba(6,18,23,.72); } .docs-code-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--studio-hover, rgba(37,99,235,.03)); border-bottom: 1px solid var(--studio-line); font-size: 11px; font-weight: 600; color: var(--studio-muted); text-transform: uppercase; letter-spacing: .06em; } .docs-copy-btn { font-size: 11px; font-weight: 600; color: var(--c-accent); background: none; border: 1px solid var(--studio-line); border-radius: 5px; padding: 3px 10px; cursor: pointer; transition: background .15s, color .15s; } .docs-copy-btn:hover { background: var(--c-accent-soft); } .docs-code-block pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.65; font-family: var(--studio-code); color: var(--studio-text); scrollbar-width: thin; } .docs-code-block code { font-family: inherit; } /* Tabs */ .docs-tabs { margin: 12px 0; } .docs-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--studio-line); margin-bottom: -1px; } .docs-tab-btn { font-size: 12px; font-weight: 600; color: var(--studio-muted); background: none; border: 1px solid transparent; border-bottom: none; padding: 7px 14px; border-radius: 8px 8px 0 0; cursor: pointer; transition: color .15s, background .15s; } .docs-tab-btn:hover { color: var(--studio-text); background: var(--studio-hover, rgba(37,99,235,.03)); } .docs-tab-btn.active { color: var(--studio-text); background: var(--studio-surface); border-color: var(--studio-line); border-bottom-color: var(--studio-surface); position: relative; z-index: 1; } .docs-tab-panel { display: none; } .docs-tab-panel.active { display: block; } /* Tables */ .docs-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--studio-line); margin: 12px 0; } .docs-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--studio-text); } .docs-table th { padding: 9px 14px; background: var(--studio-hover, rgba(37,99,235,.03)); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--studio-muted); text-align: left; border-bottom: 1px solid var(--studio-line); white-space: nowrap; } .docs-table td { padding: 9px 14px; border-bottom: 1px solid var(--studio-line); line-height: 1.5; } .docs-table tr:last-child td { border-bottom: none; } .docs-table tr:hover td { background: var(--studio-hover, rgba(37,99,235,.02)); } /* HTTP method badges */ .docs-method { display: inline-block; font-size: 10px; font-weight: 700; font-family: var(--studio-code); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; } .docs-method-get { background: rgba(34,197,94,.12); color: #16a34a; } .docs-method-post { background: rgba(59,130,246,.12); color: #2563eb; } .docs-method-put { background: rgba(14,165,233,.12); color: #0284c7; } .docs-method-patch { background: rgba(245,158,11,.12); color: #d97706; } .docs-method-delete { background: rgba(239,68,68,.12); color: #dc2626; } [data-theme="dark"] .docs-method-get { background: rgba(34,197,94,.18); color: #4ade80; } [data-theme="dark"] .docs-method-post { background: rgba(59,130,246,.18); color: #60a5fa; } [data-theme="dark"] .docs-method-put { background: rgba(14,165,233,.2); color: #38bdf8; } [data-theme="dark"] .docs-method-patch { background: rgba(245,158,11,.2); color: #fbbf24; } [data-theme="dark"] .docs-method-delete { background: rgba(239,68,68,.18); color: #f87171; } /* Responsive docs */ @media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; padding: 20px 16px 60px; } .docs-sidebar { position: static; padding-right: 0; margin-bottom: 24px; border-bottom: 1px solid var(--studio-line); padding-bottom: 16px; } .docs-toc { flex-direction: row; flex-wrap: wrap; gap: 4px; } .docs-toc-item, .docs-toc-sub { padding: 4px 8px; border-left: none; border-radius: 6px; } .docs-toc-item.active { border-left: none; } .docs-feature-grid { grid-template-columns: 1fr 1fr; } .docs-enterprise-hero { padding: 18px; } } @media (max-width: 560px) { .docs-h1 { font-size: 24px; } .docs-h2 { font-size: 18px; } .docs-feature-grid { grid-template-columns: 1fr; } .docs-enterprise-pillar-grid, .docs-enterprise-card-grid, .docs-enterprise-decision-grid { grid-template-columns: 1fr; } .docs-enterprise-hero-copy strong { font-size: 20px; } .docs-feature-card { padding: 12px 13px; } .docs-tab-btn { font-size: 11px; } } /* end styles/pages/docs.css */ /* begin styles/pages/resources.css */ html.studio-resources-page, body.studio-resources-page { overflow-y: scroll; scrollbar-gutter: stable both-edges; } .resources-main { padding: 32px 0 80px; min-height: calc(100vh - 84px); } .resources-subnav-wrap { width: 100%; max-width: 1120px; margin: 0 auto 24px; padding: 0 20px; } .resources-subnav { display: flex; align-items: center; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--studio-line); overflow-x: auto; scrollbar-width: none; } .resources-subnav::-webkit-scrollbar { display: none; } .resources-subnav-link { border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--studio-muted); padding: 8px 0; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .resources-subnav-link:hover { color: var(--studio-text); } .resources-subnav-link.is-active { color: var(--studio-text); border-bottom-color: var(--c-accent); } .resources-frame { display: grid; grid-template-columns: 272px minmax(0, 808px); gap: 0; align-items: start; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; justify-content: center; } .resources-sidebar { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; overflow-x: hidden; padding-right: 16px; scrollbar-gutter: stable; } .resources-sidebar-inner { display: grid; gap: 12px; min-width: 0; padding: 8px 0 16px; } .resources-sidebar-label, .resources-sidebar-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--studio-muted); } .resources-sidebar-label { margin-bottom: 12px; padding: 0 2px; } .resources-sidebar-nav { display: grid; gap: 16px; min-width: 0; } .resources-sidebar-links { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; } .resources-sidebar-group-label { padding-left: 2px; } .resources-sidebar-link { display: block; width: 100%; border: none; border-left: 2px solid transparent; border-radius: 6px; background: transparent; color: var(--studio-muted); padding: 6px 8px 6px 2px; text-align: left; font: inherit; font-size: 13px; line-height: 1.35; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .resources-sidebar, .resources-sidebar-link, .resources-sidebar-label, .resources-sidebar-group-label { box-sizing: border-box; } .resources-sidebar-link:hover { color: var(--studio-text); background: var(--studio-hover, rgba(37, 99, 235, 0.04)); } .resources-sidebar-link.is-active { color: var(--c-accent); border-left-color: var(--c-accent); background: var(--c-accent-soft, rgba(37, 99, 235, 0.08)); font-weight: 600; } .resources-content { min-width: 0; width: 100%; padding-left: 32px; border-left: 1px solid var(--studio-line); } .resources-guide-section { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .resources-guide { min-height: 720px; width: 100%; } .resources-guide-section { margin-bottom: 12px; color: var(--c-accent); } .resources-guide-title { margin: 0 0 18px; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--studio-text); } .resources-guide-summary { margin: 0 0 20px; max-width: 60ch; font-size: 15px; line-height: 1.68; color: var(--studio-muted); } .resources-guide-steps { margin: 0; padding-left: 22px; max-width: 70ch; color: var(--studio-text); } .resources-guide-steps li { margin-bottom: 12px; font-size: 14px; line-height: 1.72; } .resources-guide-steps li:last-child { margin-bottom: 0; } .resources-guide-steps strong { font-weight: 700; } .resources-guide-example { margin-top: 24px; width: 100%; max-width: min(100%, 760px); } .resources-guide-example-label { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--studio-muted); } .resources-guide-tabs { margin: 0; } .resources-guide-tab-bar { gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .resources-guide-tab-bar::-webkit-scrollbar { display: none; } .resources-guide-tab-btn { white-space: nowrap; } .resources-guide-code-block { margin: 0; border-radius: 16px; background: color-mix(in srgb, var(--studio-surface, #fff) 94%, var(--studio-text) 6%); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05); } [data-theme="dark"] .resources-guide-code-block { background: rgba(6, 18, 23, 0.82); box-shadow: none; } .resources-guide-code-block pre { min-height: 208px; } .resources-guide-code-block code { font: inherit; } @media (max-width: 1040px) { .resources-main { min-height: auto; padding-bottom: 56px; } .resources-subnav-wrap { max-width: 780px; } .resources-frame { grid-template-columns: 1fr; max-width: 780px; gap: 20px; } .resources-sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; scrollbar-gutter: auto; } .resources-sidebar-nav { max-height: none; padding-bottom: 14px; border-bottom: 1px solid var(--studio-line); } .resources-content { padding-left: 0; border-left: none; } .resources-guide { min-height: 0; } .resources-guide-code-block pre { min-height: 0; } } @media (max-width: 720px) { .resources-main { padding: 22px 0 42px; } .resources-subnav-wrap { padding: 0 18px; } .resources-frame { padding: 0 18px; } .resources-guide-title { font-size: 24px; } } /* end styles/pages/resources.css */ /* begin styles/pages/landing-responsive.css */ /* ============================================================ LANDING PAGE — responsive ============================================================ */ @media (max-width: 1100px) { .lp-hero-inner { max-width: 980px; } .studio-site-footer--expanded .studio-site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 26px; } .studio-site-footer--expanded .studio-site-footer-brand { grid-column: 1 / -1; max-width: 620px; } .lp-hero-stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .lp-hero-output-stack { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; } .lp-hero-stage-line-b { top: 74%; } .lp-hero-stage-signal-b { left: 22%; top: calc(74% - 4px); --lp-stage-travel: 340px; } .lp-sh-shell { padding: 56px 32px; gap: 22px; } .lp-sh-inner { grid-template-columns: 1fr; gap: 32px; } .lp-sh-desc { max-width: none; } .lp-sh-step-list { grid-template-columns: 1fr; } } @media (max-width: 860px) { .lp-hero { padding: 60px 24px 56px; } .lp-hero-stage { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 22px; margin-top: 40px; } .lp-hero-stage::after { inset: 8% 12% 62%; } .lp-hero-source-stack { position: relative; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 18px; } .lp-hero-source-stack::after, .lp-hero-core-card::after { content: ""; position: absolute; left: 50%; width: 1.5px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(37,99,235,0.16), rgba(37,99,235,0.52), rgba(124,58,237,0.12)); pointer-events: none; } .lp-hero-source-stack::after { bottom: 0; height: 16px; } .lp-hero-core-card { grid-column: 1 / -1; min-height: 0; position: relative; } .lp-hero-core-card::after { bottom: -18px; height: 18px; } .lp-hero-output-stack { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: stretch; } .lp-hero-output-card, .lp-hero-destination-list { min-height: 100%; } .lp-hero-destination-list { align-content: flex-start; padding: 14px; border-radius: 18px; border: 1px solid var(--c-line); background: linear-gradient(128deg, rgba(255,255,255,0.16), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1)); box-shadow: var(--shadow-sm); } [data-theme="dark"] .lp-hero-destination-list { background: linear-gradient(128deg, rgba(255,255,255,0.03), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); } .lp-hero-stage-line, .lp-hero-stage-signal { display: none; } .lp-section { padding: 56px 24px; } .lp-section--alt .lp-section-inner { padding: 56px 24px; } .lp-sh-shell { padding: 56px 24px; } .lp-features { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .lp-steps { flex-direction: column; gap: 24px; } .lp-step { width: 100%; } .lp-step-connector { display: none; } .lp-step-desc { max-width: none; } .lp-stat-row { flex-wrap: wrap; border-radius: 18px; padding: 4px; } .lp-stat-sep { display: none; } .lp-stat-pill { padding: 10px 18px; } .studio-site-footer--expanded .studio-site-footer-meta { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .lp-hero { padding: 48px 20px 48px; } .lp-hero-copy { max-width: none; } .lp-hero-stage { margin-top: 34px; padding: 18px; border-radius: 24px; gap: 12px; } .lp-hero-source-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px; } .lp-hero-source-card:nth-child(3) { grid-column: 1 / -1; } .lp-hero-source-card, .lp-hero-output-card { padding: 12px 14px; } .lp-hero-core-card { padding: 20px 18px 18px; border-radius: 22px; } .lp-hero-core-card h3 { font-size: 26px; } .lp-hero-core-card p { max-width: none; font-size: 13px; } .lp-hero-core-tags span, .lp-hero-destination-list span { padding: 7px 10px; font-size: 11px; } .lp-headline { font-size: clamp(34px, 11vw, 46px); margin-bottom: 18px; } .lp-subline { font-size: 14px; line-height: 1.62; margin-bottom: 28px; } .lp-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; align-items: stretch; width: min(100%, 380px); margin-left: auto; margin-right: auto; gap: 8px; } .lp-hero-actions > .lp-cta-primary { grid-column: 1 / -1; } .lp-hero-actions > .studio-button, .lp-hero-actions > .studio-button-secondary, .lp-hero-actions > .studio-button-ghost { width: 100%; max-width: none; justify-content: center; text-align: center; } .lp-cta-primary, .lp-cta-secondary { text-align: center; width: auto; } .lp-cta-ghost { width: auto; text-align: center; } .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-feature-card { padding: 20px 18px; border-radius: 18px; } .lp-feature-icon { font-size: 28px; margin-bottom: 12px; } .lp-feature-title { font-size: 15px; } .lp-feature-desc { font-size: 12.5px; line-height: 1.58; } .lp-section { padding: 48px 20px; } .lp-section--alt .lp-section-inner { padding: 48px 20px; } .lp-section-title { margin-bottom: 26px; } .lp-sh-shell { padding: 48px 20px; } .lp-sh-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .lp-sh-actions > .studio-button, .lp-sh-actions > .studio-button-secondary, .lp-sh-actions > .studio-button-ghost { width: 100%; justify-content: center; } .lp-sh-step-line { flex-direction: column; align-items: flex-start; gap: 6px; } .lp-sh-step-code-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; width: 100%; min-width: 0; } .lp-sh-step-code { min-width: 0; max-width: 100%; padding: 5px 8px; border-radius: 14px; font-size: 10px; line-height: 1.35; } .lp-sh-step-copy { width: 24px; height: 24px; min-width: 24px; } .lp-sh-step-copy svg { width: 12px; height: 12px; } .lp-sh-grid { grid-template-columns: 1fr; } .lp-project-resume-inner { flex-direction: column; align-items: flex-start; gap: 16px; } .lp-project-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .lp-project-actions > .studio-button, .lp-project-actions > .studio-button-secondary, .lp-project-actions > .studio-button-ghost { width: 100%; justify-content: center; } .lp-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 360px); border-radius: 18px; margin: 0 auto; } .lp-stat-pill { padding: 12px 14px; min-width: 0; } .lp-steps-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: min(100%, 360px); } .lp-steps-cta > .studio-button, .lp-steps-cta > .studio-button-secondary, .lp-steps-cta > .studio-button-ghost { width: 100%; justify-content: center; } } @media (max-width: 480px) { .lp-hero { padding: 42px 16px 42px; } .lp-hero-stage { margin-top: 28px; padding: 16px; border-radius: 20px; } .lp-hero-stage::before { inset: 10px; border-radius: 16px; } .lp-hero-source-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-hero-core-card h3 { font-size: 24px; } .lp-hero-core-card::after { display: none; } .lp-hero-output-stack { grid-template-columns: 1fr; } .lp-section, .lp-section--alt .lp-section-inner, .lp-sh-shell { padding-left: 16px; padding-right: 16px; } .lp-badge { margin-bottom: 20px; padding: 4px 12px 4px 8px; font-size: 10px; } .lp-hero-actions { width: min(100%, 320px); } .lp-hero-actions > .studio-button, .lp-hero-actions > .studio-button-secondary, .lp-hero-actions > .studio-button-ghost { max-width: none; font-size: 13px !important; padding: 10px 14px !important; } .lp-features { grid-template-columns: 1fr; } .lp-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 320px); } .lp-stat-pill { padding: 10px 10px; } .lp-stat-n { font-size: 16px; } .lp-stat-l { font-size: 9px; letter-spacing: .07em; } .lp-step-num { width: 44px; height: 44px; font-size: 12px; } .lp-step-body { padding: 2px 0 0 14px; } .lp-project-resume-inner, .lp-sh-starter { padding: 16px; border-radius: 18px; } .lp-sh-actions, .lp-project-actions, .lp-steps-cta { grid-template-columns: 1fr; } .lp-sh-step { grid-template-columns: 1fr; gap: 10px; padding: 12px; } .lp-sh-step-code { font-size: 9.5px; line-height: 1.3; padding: 4px 7px; } .lp-sh-step-copy { width: 22px; height: 22px; min-width: 22px; border-radius: 8px; } .lp-sh-step-copy svg { width: 11px; height: 11px; } } /* ── BACKGROUND ELEMENTS — RESPONSIVE ──────────────────────── */ @media (min-width: 1101px) { .lp-shell > section:not(.lp-hero) { content-visibility: auto; contain-intrinsic-size: 900px; } .lp-shell::before { opacity: 0.54; } .lp-shell::after { opacity: 0.4; } .lp-bg-travel::before { opacity: 0.34; } .lp-bg-travel::after { opacity: 0.24; } .lp-vector-net { opacity: 0.34; } .lp-vp-flow, .lp-vp-flow-b, .lp-vp-flow-c, .lp-hero-output-card, .lp-orb, .lp-hero-stage-signal { animation: none; } .lp-vp-flow, .lp-vp-flow-b, .lp-vp-flow-c { stroke-dasharray: none; } .lp-orb { filter: blur(28px); opacity: 0.58; } .lp-hero-stage { box-shadow: 0 18px 56px rgba(7, 13, 26, 0.1); } [data-theme="dark"] .lp-hero-stage { box-shadow: 0 24px 72px rgba(2, 8, 22, 0.28); } .lp-hero-stage-glow, .lp-hero-stage-signal { display: none; } .lp-sh-orb { filter: blur(36px); } .lp-problem-section::before, .lp-shift-section::before, .lp-why-section::before { filter: blur(52px); } } /* Reduce vector network opacity on tablets */ @media (max-width: 1024px) { .lp-vector-net { opacity: 0.46; } .lp-bg-travel::before { opacity: 0.4; } .lp-bg-travel::after { opacity: 0.3; } } /* Simplify on mobile — the shell gradients are enough ambience */ @media (max-width: 640px) { .lp-vector-net { opacity: 0.28; } .lp-bg-travel::before { opacity: 0.22; } .lp-bg-travel::after { opacity: 0.16; } /* Reduce line density on small screens */ .lp-section--alt { background: repeating-linear-gradient( -52deg, transparent 0px, transparent 90px, hsla(var(--lp-line-hue), 80%, 68%, 0.022) 90px, hsla(var(--lp-line-hue), 80%, 68%, 0.022) 91px ), var(--c-panel); } } @media (max-width: 480px) { .lp-vector-net { opacity: 0.2; } .lp-bg-travel { display: none; } /* Hide connectors on very small screens */ .lp-vp-conn, .lp-vp-conn-b { display: none; } .lp-section::before, .lp-section::after, .lp-section--alt .lp-section-inner::before, .lp-section--alt .lp-section-inner::after, .lp-sh-shell::before, .lp-sh-shell::after { display: none; } } /* ── REDESIGNED SECTIONS — RESPONSIVE ─────────────────────────── */ /* ── 1100px: Simplify hero stage removed, keep logos tight ─── */ @media (max-width: 1100px) { .lp-hub-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── 860px: Stack pillars, tabs panels, hub nodes ─────────── */ @media (max-width: 860px) { .lp-final-cta-inner { padding: 80px 24px 88px; } /* Pillars → 2-column */ .lp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Use-case tabs panel → stack vertically */ .lp-uc-panel { grid-template-columns: 1fr; gap: 18px; } .lp-uc-panel-copy { padding: 0; } /* Hub nodes → 2x2 */ .lp-hub-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lp-hub-nodes::before { left: 6%; right: 6%; } .lp-hub-node::before { height: 12px; top: -12px; } /* Time stats → 2x2 */ .lp-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Integration groups */ .lp-int-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── 640px: Single columns, smaller hero logos ────────────── */ @media (max-width: 640px) { .lp-final-cta-inner { padding: 72px 20px 80px; } .lp-final-cta-actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); margin: 0 auto; } .lp-final-cta-actions > .studio-button, .lp-final-cta-actions > .studio-button-secondary { width: 100%; justify-content: center; text-align: center; } /* Hero logos */ .lp-hero-logos { margin-top: 36px; } .lp-hero-logo-chip { width: 42px; height: 42px; border-radius: 12px; } .lp-hero-logo-chip img { width: 22px; height: 22px; } .lp-hero-logos-row { gap: 8px; } /* Pillars → single column */ .lp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-pillar { padding: 22px 18px; } .lp-pillar-icon { width: 48px; height: 48px; margin-bottom: 12px; } .lp-pillar-title { font-size: 16px; } .lp-pillar-desc { font-size: 12.5px; } /* Use case tabs */ .lp-uc-tabs { gap: 2px; padding: 3px; } .lp-uc-tab { padding: 8px 14px; font-size: 12px; } .lp-uc-chat-body { padding: 16px; } .lp-uc-msg { max-width: 94%; font-size: 13px; } .lp-app-pill-label { font-size: 11.5px; } .lp-app-pill--compact .lp-app-pill-label { font-size: 11px; } /* Hub */ .lp-hub-sub { max-width: none; } .lp-hub-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-hub-node { padding: 16px 12px; border-radius: 16px; } .lp-hub-node-icon { font-size: 24px; } /* Time stats */ .lp-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-time-stat { padding: 24px 14px; } .lp-time-value { font-size: clamp(24px, 6.8vw, 32px); } .studio-site-footer--expanded .studio-site-footer-grid { grid-template-columns: 1fr; gap: 22px; } .studio-site-footer--expanded .studio-site-footer-brand { max-width: none; } .studio-site-footer-model-grid { gap: 6px; } .studio-site-footer-social { gap: 8px; } .studio-site-footer-social-link { width: 36px; min-width: 36px; min-height: 36px; } .studio-site-footer-social-icon { width: 16px; height: 16px; } .studio-site-footer--expanded .studio-site-footer-links { gap: 12px; } /* Integration marquee wrapper */ .lp-int-marquee-wrap { padding: 6px; border-radius: 20px; } .lp-int-groups { grid-template-columns: 1fr; } /* Rotating headline */ .lp-rotate { min-width: 9.6ch; } } /* ── 480px: Tightest layout ──────────────────────────────── */ @media (max-width: 480px) { .lp-final-cta-inner { padding: 64px 16px 72px; } .lp-final-cta-headline { font-size: clamp(32px, 10.5vw, 48px); } /* Pillars → single column */ .lp-pillars { grid-template-columns: 1fr; } /* Hub → single column */ .lp-hub-nodes { grid-template-columns: 1fr; gap: 10px; } .lp-hub-nodes::before { display: none; } .lp-hub-node::before { display: none; } .lp-hub-node { flex-direction: row; gap: 12px; padding: 14px 16px; text-align: left; } .lp-hub-node-icon { font-size: 22px; } .lp-hub-connector { height: 24px; } .lp-hub-logo-ring { width: 60px; height: 60px; } /* Time stats → single column */ .lp-time-grid { grid-template-columns: 1fr; } .lp-time-stat { padding: 20px 12px; } .lp-time-value { font-size: clamp(24px, 8vw, 30px); } /* Hero logos */ .lp-hero-logo-chip { width: 38px; height: 38px; border-radius: 10px; } .lp-hero-logo-chip img { width: 20px; height: 20px; } .lp-hero-logos-row { gap: 6px; } .studio-site-footer-model-link { width: 42px; min-width: 42px; min-height: 42px; border-radius: 12px; } .studio-site-footer-model-logo { width: 22px; height: 22px; } .studio-site-footer-model-logo img, .studio-site-footer-model-logo svg { width: 13px; height: 13px; } .lp-hero-logos-note { font-size: 11px; } .lp-app-pill { padding: 6px 10px; } .lp-app-pill-mark, .lp-app-pill--compact .lp-app-pill-mark { width: 18px; height: 18px; border-radius: 7px; } .lp-app-pill-logo { width: 11px; height: 11px; } .lp-app-pill-label { font-size: 10.5px; } .lp-section-intro { max-width: none; } } /* ── Reduced motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lp-rotate-word { animation: none; } .lp-rotate-word:first-child { opacity: 1; position: relative; } } /* end styles/pages/landing-responsive.css */ /* begin styles/pages/admin.css */ /* ============================================================ ADMIN CONSOLE STYLES ============================================================ */ /* ── Shell layout ─────────────────────────────────────────── */ .admin-shell { --admin-shell-block-margin: 16px; --admin-shell-block-gutter: 32px; display: flex; height: calc(100vh - 56px - var(--admin-shell-block-gutter)); /* fallback below topbar */ height: calc(100dvh - 56px - var(--admin-shell-block-gutter)); min-height: 0; margin: var(--admin-shell-block-margin) clamp(14px, 2vw, 24px); overflow: hidden; position: relative; background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--shadow-sm); } /* ── Sidebar ──────────────────────────────────────────────── */ .admin-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--c-panel-strong); border-right: 1px solid var(--c-line); overflow: hidden; z-index: 100; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); } .admin-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90; backdrop-filter: blur(2px); } .admin-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 12px; border-bottom: 1px solid var(--c-line); flex-shrink: 0; } .admin-sidebar-brand { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--c-accent-hi); letter-spacing: -0.01em; } .admin-sidebar-brand svg { width: 16px; height: 16px; flex-shrink: 0; } .admin-sidebar-close { display: none; appearance: none; border: none; background: transparent; color: var(--c-muted); cursor: pointer; padding: 4px; border-radius: var(--r-xs); } .admin-sidebar-close:hover { color: var(--c-text); background: var(--c-panel); } .admin-nav { flex: 1; min-height: 0; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; } .admin-nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--c-muted); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; transition: background 120ms ease, color 120ms ease; white-space: nowrap; } .admin-nav-item:hover { background: var(--c-accent-soft); color: var(--c-text); } .admin-nav-item.active { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 650; } [data-theme="dark"] .admin-nav-item.active { color: var(--c-accent); background: rgba(96,165,250,0.12); } .admin-nav-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; } .admin-nav-icon svg { width: 15px; height: 15px; } .admin-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .admin-sidebar-footer { margin-top: auto; padding: 8px; border-top: 1px solid var(--c-line); flex-shrink: 0; } /* ── Content area ─────────────────────────────────────────── */ .admin-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .admin-topbar { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 52px; border-bottom: 1px solid var(--c-line); background: var(--c-panel-strong); flex-shrink: 0; } .admin-burger { display: none; appearance: none; border: none; background: transparent; color: var(--c-text); cursor: pointer; padding: 6px; border-radius: var(--r-xs); flex-shrink: 0; } .admin-burger:hover { background: var(--c-panel); } .admin-breadcrumb { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--c-text); min-width: 0; } .admin-breadcrumb-link { appearance: none; border: none; background: transparent; color: var(--c-muted); font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; white-space: nowrap; } .admin-breadcrumb-link:hover { color: var(--c-accent); text-decoration: underline; } .admin-breadcrumb-sep { color: var(--c-subtle); } .admin-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .admin-main { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--c-bg); } /* ── Page layout ──────────────────────────────────────────── */ .admin-page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; } .admin-page-header { margin-bottom: 20px; } .admin-page-title { font-size: 22px; font-weight: 780; letter-spacing: -0.03em; margin: 0 0 4px; color: var(--c-text); display: flex; align-items: baseline; gap: 8px; } .admin-page-count { font-size: 14px; font-weight: 500; color: var(--c-muted); background: var(--c-panel); border: 1px solid var(--c-line); padding: 1px 8px; border-radius: var(--r-pill); } .admin-page-sub { font-size: 13px; color: var(--c-muted); margin: 0; } .admin-page-header--user .admin-user-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .admin-user-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .admin-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-subtle); margin: 20px 0 8px; } /* ── Stats grid ───────────────────────────────────────────── */ .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; align-items: stretch; } .admin-stats-grid + .admin-stats-grid { margin-top: 14px; } .admin-stat-card { background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); min-width: 0; height: 100%; } .admin-stat-value { font-size: 26px; font-weight: 560; letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-stat-label { font-size: 12px; font-weight: 600; color: var(--c-text); } .admin-stat-sub { font-size: 11px; color: var(--c-muted); margin-top: 2px; } /* ── Analytics cards ──────────────────────────────────────── */ .admin-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; align-items: stretch; } .admin-analytics-card { background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-sm); min-width: 0; height: 100%; } .admin-analytics-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; } .admin-analytics-label { font-size: 12px; font-weight: 600; color: var(--c-text); } .admin-analytics-total { font-size: 16px; font-weight: 750; letter-spacing: -0.03em; } .admin-analytics-sub { font-size: 11px; color: var(--c-muted); margin-bottom: 8px; } /* ── Mini sparkline ───────────────────────────────────────── */ .admin-mini-series { display: flex; align-items: flex-end; gap: 2px; height: 32px; overflow: hidden; } .admin-mini-bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; opacity: 0.85; transition: opacity 120ms; } .admin-mini-bar:hover { opacity: 1; } /* ── Spark bar ────────────────────────────────────────────── */ .admin-spark-bar { height: 4px; background: var(--c-line); border-radius: 2px; overflow: hidden; margin-top: 4px; } .admin-spark-bar-fill { height: 100%; border-radius: 2px; transition: width 300ms ease; } .admin-entitlement-meter.is-indeterminate .admin-spark-bar-fill { width: 42%; animation: studioIndeterminate 1.25s ease-in-out infinite; } /* ── Cards / panels ───────────────────────────────────────── */ .admin-card { background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); } .admin-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .admin-card-title-row strong { font-size: 14px; font-weight: 650; } .admin-finance-eyebrow { display: inline-flex; margin-bottom: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-accent-hi); } .admin-finance-insight-grid, .admin-finance-scenario-grid, .admin-finance-detail-grid, .admin-finance-note-grid { display: grid; gap: 12px; align-items: stretch; } .admin-finance-insight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .admin-finance-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; } .admin-finance-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-finance-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-finance-insight-card, .admin-finance-scenario-card, .admin-finance-note-card { display: flex; flex-direction: column; min-height: 100%; } .admin-finance-detail-grid > .admin-card, .admin-user-action-grid > .admin-user-action-panel { height: 100%; } .admin-finance-insight-title, .admin-finance-note-card strong, .admin-finance-scenario-card strong { display: block; color: var(--c-text); font-size: 14px; letter-spacing: -.02em; } .admin-finance-insight-value, .admin-finance-scenario-stat { display: block; margin-top: 10px; font-size: 25px; font-weight: 560; letter-spacing: -0.04em; color: var(--c-text); line-height: 1.05; } .admin-finance-scenario-stat { font-size: 18px; } .admin-finance-insight-meta { margin-top: 8px; font-size: 12px; color: var(--c-muted); } .admin-finance-insight-visual { margin-top: 14px; } .admin-finance-insight-copy, .admin-finance-scenario-card p, .admin-finance-note-card p { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--c-muted); } .admin-finance-ranking { display: grid; gap: 12px; } .admin-finance-ranking-row { display: grid; gap: 8px; } .admin-finance-ranking-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .admin-finance-ranking-label { min-width: 0; } .admin-finance-ranking-label strong { display: block; font-size: 13px; letter-spacing: -.01em; } .admin-finance-ranking-value { flex-shrink: 0; font-size: 13px; font-weight: 560; color: var(--c-text); } .admin-finance-note-list { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--c-muted); } /* ── Detail grid ──────────────────────────────────────────── */ .admin-detail-grid { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; } .admin-detail-main { min-width: 0; } .admin-detail-side { min-width: 0; } .admin-side-card { background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 6px; box-shadow: var(--shadow-sm); } .admin-side-card-title { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-side-card-meta { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; } /* ── Info grid ────────────────────────────────────────────── */ .admin-info-grid { display: grid; gap: 8px; } .admin-info-row { display: flex; align-items: baseline; gap: 12px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); } .admin-info-row:last-child { border-bottom: none; } .admin-info-label { font-weight: 600; color: var(--c-muted); flex-shrink: 0; min-width: 130px; font-size: 12px; } .admin-inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-entitlement-card { overflow: hidden; } .admin-entitlement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .admin-entitlement-meter { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-panel); padding: 12px; } .admin-entitlement-meter.is-over-limit { border-color: rgba(225,29,72,0.24); background: linear-gradient(180deg, rgba(225,29,72,0.08), rgba(225,29,72,0.02)), var(--c-panel); } .admin-entitlement-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .admin-entitlement-meter-head strong { font-size: 13px; color: var(--c-text); } .admin-entitlement-meter-head span { font-size: 11px; color: var(--c-muted); text-align: right; } .admin-entitlement-meter-copy { margin-top: 6px; line-height: 1.45; } .admin-entitlement-meter-bar { margin-top: 10px; } .admin-entitlement-meter-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: var(--c-muted); } .admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .admin-override-flags { margin: 4px 0; } /* ── Tables ───────────────────────────────────────────────── */ .admin-table-wrap { padding: 0; overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table thead tr { border-bottom: 1px solid var(--c-line); } .admin-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); white-space: nowrap; } .admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--c-line); vertical-align: middle; color: var(--c-text); } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table-row-clickable { cursor: pointer; } .admin-table-row-clickable:hover td { background: var(--c-accent-soft); } .admin-table-empty { padding: 32px 14px; text-align: center; color: var(--c-muted); font-size: 13px; } .admin-table-link { appearance: none; border: none; background: transparent; color: var(--c-accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; text-align: left; } .admin-table-link:hover { text-decoration: underline; color: var(--c-accent-hi); } .admin-responsive-card-list { display: none; gap: 12px; } .admin-responsive-card { min-width: 0; } .admin-responsive-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .admin-responsive-card-copy { min-width: 0; flex: 1; } .admin-responsive-card-title { font-size: 14px; font-weight: 700; color: var(--c-text); letter-spacing: -0.02em; } .admin-responsive-card-subtitle { margin-top: 5px; font-size: 12px; color: var(--c-muted); line-height: 1.5; } .admin-responsive-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; } .admin-responsive-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 14px; } .admin-responsive-metric { min-width: 0; } .admin-responsive-metric-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-subtle); } .admin-responsive-metric-value { margin-top: 4px; font-size: 13px; color: var(--c-text); line-height: 1.45; min-width: 0; } .admin-responsive-card-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line); display: grid; gap: 8px; } /* ── User cell ────────────────────────────────────────────── */ .admin-user-cell { display: flex; align-items: center; gap: 10px; } .admin-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; } .admin-user-avatar--lg { width: 52px; height: 52px; font-size: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hi)); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-user-info { min-width: 0; } .admin-user-email { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .admin-user-name { font-size: 11px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Badges ───────────────────────────────────────────────── */ .admin-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 650; white-space: nowrap; line-height: 1.5; } .admin-badge--neutral { background: var(--c-panel); color: var(--c-muted); border: 1px solid var(--c-line); } .admin-badge--good { background: var(--c-good-soft); color: var(--c-good); border: 1px solid rgba(15,118,110,0.18); } .admin-badge--accent { background: var(--c-accent-soft); color: var(--c-accent); border: 1px solid rgba(37,99,235,0.2); } .admin-badge--warn { background: rgba(217,119,6,0.1); color: var(--c-warn); border: 1px solid rgba(217,119,6,0.18); } .admin-badge--danger { background: var(--c-danger-soft); color: var(--c-danger); border: 1px solid rgba(225,29,72,0.18); } [data-theme="dark"] .admin-badge--accent { color: var(--c-accent); } [data-theme="dark"] .admin-badge--good { color: var(--c-good); } /* ── Edit forms ───────────────────────────────────────────── */ .admin-edit-form { display: flex; flex-direction: column; gap: 12px; } .admin-form-row { display: flex; flex-direction: column; gap: 5px; } .admin-form-label { font-size: 12px; font-weight: 600; color: var(--c-muted); } .admin-form-actions { display: flex; gap: 8px; flex-wrap: wrap; } .admin-form-error { background: var(--c-danger-soft); border: 1px solid rgba(225,29,72,0.18); border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; color: var(--c-danger); } .admin-form-success { background: var(--c-good-soft); border: 1px solid rgba(15,118,110,0.18); border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; color: var(--c-good); } .admin-user-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .admin-user-action-panel { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 13px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-panel); } .admin-user-action-panel--danger { border-color: rgba(225,29,72,0.24); } .admin-user-action-head, .admin-user-action-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .admin-user-action-head strong { min-width: 0; font-size: 13px; } .admin-user-action-copy { min-height: 36px; margin: 0; font-size: 12px; line-height: 1.45; } .admin-user-action-code-row { flex-wrap: wrap; } .admin-user-action-confirm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 920px) { .admin-user-action-grid, .admin-user-action-confirm-grid { grid-template-columns: 1fr; } } .admin-runtime-move-note { margin-bottom: 12px; padding: 12px 13px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: radial-gradient(circle at top right, rgba(37,99,235,0.12), transparent 46%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 92%, white 8%), var(--c-panel)); color: var(--c-muted); font-size: 12px; line-height: 1.55; box-shadow: var(--shadow-sm); } .admin-runtime-validation { display: grid; gap: 12px; margin-bottom: 12px; padding: 14px 15px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(37,99,235,0.1), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 92%, white 8%), var(--c-panel)); box-shadow: var(--shadow-sm); } .admin-runtime-validation.is-passing { border-color: rgba(15,118,110,0.22); } .admin-runtime-validation.is-blocked { border-color: rgba(225,29,72,0.18); } .admin-runtime-validation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .admin-runtime-validation-head strong { display: block; font-size: 13px; letter-spacing: -.02em; color: var(--c-text); } .admin-runtime-validation-blockers { display: flex; flex-wrap: wrap; gap: 8px; } .admin-runtime-validation-blockers span { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(225,29,72,0.08); border: 1px solid rgba(225,29,72,0.14); color: var(--c-danger); font-size: 11px; font-weight: 650; } .admin-runtime-validation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .admin-runtime-validation-item { display: grid; gap: 4px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); } .admin-runtime-validation-item span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .admin-runtime-validation-item strong { font-size: 12px; line-height: 1.45; color: var(--c-text); } .admin-runtime-validation-item.is-ok { border-color: rgba(15,118,110,0.18); } .admin-runtime-validation-item.is-failed { border-color: rgba(225,29,72,0.14); } .admin-setup-panel { display: grid; gap: 14px; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: radial-gradient(circle at top right, rgba(37,99,235,0.12), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 94%, white 6%), var(--c-panel)); box-shadow: var(--shadow-sm); } .admin-setup-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .admin-setup-panel-head strong { display: block; font-size: 15px; letter-spacing: -.02em; color: var(--c-text); } .admin-setup-panel-head p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--c-muted); } .admin-setup-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .admin-setup-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .admin-setup-fact { display: grid; gap: 4px; padding: 12px 13px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-accent) 14%, var(--c-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 90%, white 10%), var(--c-panel)); } .admin-setup-fact span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .admin-setup-fact strong { font-size: 12.5px; line-height: 1.5; color: var(--c-text); word-break: break-word; } .admin-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .admin-setup-grid--compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .admin-setup-card { display: grid; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(148,163,184,0.08), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 92%, white 8%), color-mix(in srgb, var(--c-panel-strong) 88%, white 12%)); } .admin-setup-card-head { display: grid; gap: 3px; } .admin-setup-card-head strong { font-size: 13px; color: var(--c-text); } .admin-setup-card-head span { font-size: 11px; line-height: 1.5; color: var(--c-muted); } .admin-setup-list, .admin-setup-bullet-list { display: grid; gap: 8px; } .admin-setup-list-item, .admin-setup-bullet-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); } .admin-setup-list-item.is-ready { border-color: rgba(15,118,110,0.18); } .admin-setup-list-item.is-pending { border-color: rgba(217,119,6,0.18); } .admin-setup-list-copy { display: grid; gap: 3px; min-width: 0; } .admin-setup-list-copy strong, .admin-setup-bullet-item { font-size: 12px; line-height: 1.5; color: var(--c-text); } .admin-setup-list-copy span { font-size: 11px; line-height: 1.55; color: var(--c-muted); } .admin-setup-list-chip { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 10%, white); color: var(--c-text); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .admin-setup-empty { padding: 11px 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); color: var(--c-muted); font-size: 11.5px; line-height: 1.55; } .admin-setup-bullet-item::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-good) 80%, white 20%)); flex: 0 0 auto; } .admin-setup-code-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .admin-setup-code { overflow: hidden; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94)), linear-gradient(180deg, var(--c-panel), var(--c-panel)); box-shadow: var(--shadow-sm); } .admin-setup-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(148,163,184,0.18); background: rgba(15, 23, 42, 0.82); } .admin-setup-code-head span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(226, 232, 240, 0.78); } .admin-setup-code pre { margin: 0; padding: 12px; overflow-x: auto; color: #dbeafe; font-size: 11px; line-height: 1.6; font-family: var(--font-mono); } .admin-ops-panel { display: grid; gap: 14px; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c-accent) 20%, var(--c-line)); background: radial-gradient(circle at top right, rgba(16,185,129,0.12), transparent 38%), radial-gradient(circle at bottom left, rgba(37,99,235,0.08), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--c-panel-strong) 94%, white 6%), var(--c-panel)); box-shadow: var(--shadow-sm); } .admin-ops-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .admin-ops-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .admin-ops-panel-head strong { display: block; font-size: 15px; letter-spacing: -.02em; color: var(--c-text); } .admin-ops-panel-head p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--c-muted); } .admin-ops-signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .admin-ops-signal { display: grid; gap: 4px; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--c-line); background: linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 92%, white 8%), color-mix(in srgb, var(--c-panel-strong) 88%, white 12%)); } .admin-ops-signal.is-good { border-color: rgba(15,118,110,0.18); } .admin-ops-signal.is-warn { border-color: rgba(217,119,6,0.18); } .admin-ops-signal.is-bad { border-color: rgba(225,29,72,0.18); } .admin-ops-signal span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .admin-ops-signal strong { font-size: 12.5px; line-height: 1.5; color: var(--c-text); } .admin-ops-list { display: grid; gap: 8px; } .admin-ops-list-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-accent) 16%, var(--c-line)); background: color-mix(in srgb, var(--c-panel) 94%, white 6%); font-size: 11.5px; line-height: 1.6; color: var(--c-text); } .admin-ops-list-item::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: linear-gradient(135deg, var(--c-good), var(--c-accent)); flex: 0 0 auto; } .admin-ops-support { display: grid; gap: 10px; } .admin-ops-support-links { display: flex; flex-wrap: wrap; gap: 8px; } .admin-ops-support-links a { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line)); background: color-mix(in srgb, var(--c-panel) 92%, white 8%); color: var(--c-text); font-size: 11px; font-weight: 650; text-decoration: none; } [data-theme="dark"] .admin-runtime-move-note, [data-theme="dark"] .admin-runtime-validation, [data-theme="dark"] .admin-ops-panel, [data-theme="dark"] .admin-ops-signal, [data-theme="dark"] .admin-ops-list-item, [data-theme="dark"] .admin-setup-panel, [data-theme="dark"] .admin-setup-card, [data-theme="dark"] .admin-setup-fact, [data-theme="dark"] .admin-setup-list-item, [data-theme="dark"] .admin-setup-bullet-item, [data-theme="dark"] .admin-setup-empty { background: radial-gradient(circle at top right, rgba(96,165,250,0.14), transparent 42%), linear-gradient(180deg, rgba(30,41,59,0.88), rgba(15,23,42,0.94)); } [data-theme="dark"] .admin-setup-code { border-color: rgba(96, 165, 250, 0.18); } [data-theme="dark"] .admin-ops-support-links a { background: rgba(15, 23, 42, 0.82); } /* ── Text helpers ─────────────────────────────────────────── */ .admin-strong { font-weight: 650; } .admin-muted { color: var(--c-muted); } .admin-positive { color: var(--c-good); font-weight: 600; } .admin-negative { color: var(--c-danger); font-weight: 600; } /* ── Recency card ─────────────────────────────────────────── */ .admin-recency-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--c-line); font-size: 13px; } .admin-recency-row:last-child { border-bottom: none; } .admin-recency-label { color: var(--c-muted); font-weight: 500; } .admin-recency-value { font-weight: 600; white-space: nowrap; } /* ── Quick links ──────────────────────────────────────────── */ .admin-quick-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } /* ── Search ───────────────────────────────────────────────── */ .admin-search-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .admin-search-row > label[for="adminAnalyticsDays"], .admin-search-row > label[for="adminMetricsDays"], .admin-search-row > label[for="adminTrafficDays"] { margin-left: auto; } #adminAnalyticsDays, #adminMetricsDays, #adminTrafficDays { flex: 0 0 132px; width: 132px; min-width: 132px; max-width: 132px; } .admin-search-row--filters { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(180px, 0.75fr)); gap: 10px; } .admin-search-input { max-width: 400px; width: 100%; } .admin-search-row--filters .admin-search-input { max-width: none; } .admin-inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-inline-form .studio-select { min-width: 190px; } .admin-custom-domains-page .admin-stats-grid { margin-top: 0; } .admin-custom-domains-stack { display: grid; gap: 16px; } .admin-custom-domains-toolbar, .admin-custom-domains-overview, .admin-custom-domains-surface { padding: 18px 18px 20px; } .admin-custom-domains-overview-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 16px; align-items: start; } .admin-custom-domains-overview-note { display: grid; gap: 8px; min-height: 100%; padding: 14px 15px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: radial-gradient(circle at top right, rgba(37,99,235,0.12), transparent 52%), linear-gradient(180deg, var(--c-panel), var(--c-panel-strong)); } [data-theme="dark"] .admin-custom-domains-overview-note { background: radial-gradient(circle at top right, rgba(96,165,250,0.18), transparent 52%), linear-gradient(180deg, rgba(12,20,36,0.96), rgba(9,15,28,0.94)); } .admin-custom-domains-overview-note strong { font-size: 13px; color: var(--c-text); } .admin-custom-domains-overview-note p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); } .admin-custom-domains-toolbar .admin-card-title-row, .admin-custom-domains-overview .admin-card-title-row, .admin-custom-domains-surface .admin-card-title-row { margin-bottom: 16px; } .admin-custom-domains-filters { margin-bottom: 0; } .admin-custom-domains-segmented { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .admin-custom-domains-segment { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-muted); border-radius: var(--r-pill); padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .admin-custom-domains-segment span { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: rgba(15,23,42,0.06); color: inherit; font-size: 11px; } [data-theme="dark"] .admin-custom-domains-segment span { background: rgba(148,163,184,0.12); } .admin-custom-domains-segment:hover { color: var(--c-text); border-color: rgba(37,99,235,0.22); transform: translateY(-1px); } .admin-custom-domains-segment.is-active { color: var(--c-accent-hi); border-color: rgba(37,99,235,0.34); background: linear-gradient(135deg, var(--c-accent-soft), rgba(37,99,235,0.08)); box-shadow: 0 10px 22px rgba(37,99,235,0.12); } [data-theme="dark"] .admin-custom-domains-segment.is-active { color: var(--c-accent); box-shadow: 0 10px 22px rgba(2,6,23,0.28); } .admin-custom-domains-table-wrap { margin: 0 -18px -20px; border-top: 1px solid var(--c-line); } .admin-custom-domain-ops-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; } .admin-custom-domain-ops-card { padding: 16px; } .admin-custom-domain-ops-card--provision { border-color: rgba(37,99,235,0.28); background: radial-gradient(circle at top right, rgba(37,99,235,0.12), transparent 48%), linear-gradient(180deg, var(--c-panel-strong), var(--c-panel)); box-shadow: 0 16px 36px rgba(37,99,235,0.08); } .admin-custom-domain-ops-card--dns { border-color: rgba(245,158,11,0.22); background: radial-gradient(circle at top right, rgba(245,158,11,0.12), transparent 48%), linear-gradient(180deg, var(--c-panel-strong), var(--c-panel)); } .admin-custom-domain-ops-card--live { border-color: rgba(22,163,74,0.22); background: radial-gradient(circle at top right, rgba(34,197,94,0.12), transparent 48%), linear-gradient(180deg, var(--c-panel-strong), var(--c-panel)); } [data-theme="dark"] .admin-custom-domain-ops-card--provision { border-color: rgba(96,165,250,0.28); background: radial-gradient(circle at top right, rgba(96,165,250,0.18), transparent 48%), linear-gradient(180deg, rgba(12,20,36,0.96), rgba(9,15,28,0.94)); box-shadow: 0 16px 36px rgba(2,6,23,0.28); } [data-theme="dark"] .admin-custom-domain-ops-card--dns { border-color: rgba(245,158,11,0.22); background: radial-gradient(circle at top right, rgba(245,158,11,0.16), transparent 48%), linear-gradient(180deg, rgba(18,18,12,0.95), rgba(12,12,9,0.93)); } [data-theme="dark"] .admin-custom-domain-ops-card--live { border-color: rgba(34,197,94,0.22); background: radial-gradient(circle at top right, rgba(34,197,94,0.16), transparent 48%), linear-gradient(180deg, rgba(12,20,16,0.95), rgba(9,15,12,0.93)); } .admin-custom-domain-ops-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .admin-custom-domain-ops-copy h3 { margin: 0; font-size: 17px; font-weight: 760; letter-spacing: -0.03em; color: var(--c-text); word-break: break-word; overflow-wrap: anywhere; } .admin-custom-domain-ops-copy p { margin: 5px 0 0; font-size: 12px; color: var(--c-muted); } .admin-custom-domain-ops-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-custom-domain-ops-subline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .admin-custom-domain-ops-subline span { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border-radius: 999px; background: var(--c-panel); color: var(--c-muted); font-size: 11px; overflow-wrap: anywhere; } .admin-custom-domain-ops-note { margin-top: 12px; padding: 10px 11px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel) 90%, white 10%); color: var(--c-text); font-size: 12px; line-height: 1.55; } [data-theme="dark"] .admin-custom-domain-ops-note { background: rgba(15,23,42,0.72); } .admin-custom-domain-ops-grid { margin-top: 12px; } .admin-custom-domain-ops-error { margin-top: 12px; padding: 10px 11px; border-radius: var(--r-md); border: 1px solid rgba(225,29,72,0.2); background: rgba(225,29,72,0.08); color: var(--c-danger); font-size: 12px; line-height: 1.55; } .admin-custom-domain-ops-detail { margin-top: 12px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-panel); overflow: hidden; } .admin-custom-domain-ops-detail summary { list-style: none; cursor: pointer; padding: 12px 13px; font-size: 12px; font-weight: 700; color: var(--c-text); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-custom-domain-ops-detail summary:hover { background: rgba(37,99,235,0.04); } [data-theme="dark"] .admin-custom-domain-ops-detail summary:hover { background: rgba(96,165,250,0.08); } .admin-custom-domain-ops-detail summary::-webkit-details-marker { display: none; } .admin-custom-domain-ops-detail summary::after { content: "Open"; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); } .admin-custom-domain-ops-detail[open] summary { border-bottom: 1px solid var(--c-line); background: rgba(37,99,235,0.04); } .admin-custom-domain-ops-detail[open] summary::after { content: "Close"; } [data-theme="dark"] .admin-custom-domain-ops-detail[open] summary { background: rgba(96,165,250,0.08); } .admin-custom-domain-ops-detail-body { display: grid; gap: 12px; padding: 12px; } .admin-custom-domain-ops-actions, .admin-custom-domain-ops-links { gap: 10px; } .admin-custom-domain-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .admin-custom-domain-step { min-width: 0; display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-panel-strong) 88%, white 12%); } .admin-custom-domain-step--full { grid-column: 1 / -1; } .admin-custom-domain-step--optional { border-style: dashed; } .admin-custom-domain-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; } .admin-custom-domain-step-index { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 0 8px; border-radius: 999px; background: rgba(37,99,235,0.12); color: var(--c-accent-hi); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; } .admin-custom-domain-step-copy { min-width: 0; display: grid; gap: 3px; } .admin-custom-domain-step-copy strong { font-size: 12px; color: var(--c-text); } .admin-custom-domain-step-copy span { font-size: 11px; line-height: 1.45; color: var(--c-muted); } .admin-custom-domain-step-code { margin: 0; padding: 12px; border-radius: 12px; background: #0f172a; color: #dbe7ff; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; box-shadow: inset 0 0 0 1px rgba(148,163,184,0.12); } .admin-copy-icon-button { appearance: none; width: 32px; height: 32px; padding: 0; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease; } .admin-copy-icon-button:hover { transform: translateY(-1px); color: var(--c-accent-hi); border-color: rgba(37,99,235,0.28); box-shadow: 0 8px 20px rgba(37,99,235,0.12); } .admin-copy-icon-button.copied { color: var(--c-good); border-color: rgba(22,163,74,0.28); background: rgba(22,163,74,0.08); box-shadow: 0 8px 20px rgba(22,163,74,0.14); } .admin-copy-icon-button svg { width: 15px; height: 15px; } /* ── Pagination ───────────────────────────────────────────── */ .admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; } /* ── Verification queue ───────────────────────────────────── */ .admin-verification-list { display: flex; flex-direction: column; gap: 12px; } .admin-verification-card { background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); } .admin-verification-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .admin-verification-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .admin-verification-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; } .admin-verification-statement { font-size: 13px; line-height: 1.6; color: var(--c-text); white-space: pre-wrap; padding: 12px; border-radius: var(--r-md); background: var(--c-panel); border: 1px solid var(--c-line); } .admin-verification-docs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .admin-verification-review-history { display: grid; gap: 4px; margin-top: 10px; } .admin-verification-review-box { width: 100%; display: grid; gap: 8px; margin-top: 8px; } /* ── Loading / Error ──────────────────────────────────────── */ .admin-loading { display: flex; align-items: center; gap: 12px; padding: 60px 24px; justify-content: center; color: var(--c-muted); font-size: 14px; } .admin-loading-spinner { width: 20px; height: 20px; border: 2px solid var(--c-line); border-top-color: var(--c-accent); border-radius: 50%; animation: admin-spin 0.7s linear infinite; flex-shrink: 0; } @keyframes admin-spin { to { transform: rotate(360deg); } } .admin-error-block { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--c-danger-soft); border: 1px solid rgba(225,29,72,0.18); color: var(--c-danger); font-size: 13px; margin: 24px; } .admin-error-block svg { flex-shrink: 0; } /* ── Activity feed ────────────────────────────────────────── */ .admin-activity-feed { display: flex; flex-direction: column; gap: 0; background: var(--c-panel-strong); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .admin-activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); } .admin-activity-item:last-child { border-bottom: none; } .admin-activity-item:hover { background: var(--c-accent-soft); } .admin-activity-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--c-panel); border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .admin-activity-icon svg { width: 12px; height: 12px; } .admin-activity-body { flex: 1; min-width: 0; } .admin-activity-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; } .admin-activity-type { font-weight: 650; color: var(--c-text); text-transform: capitalize; } .admin-activity-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; } .admin-activity-kv { font-size: 11px; color: var(--c-muted); display: flex; gap: 4px; } .admin-activity-key { font-weight: 600; color: var(--c-subtle); text-transform: capitalize; } .admin-activity-key::after { content: ":"; } .admin-activity-time { font-size: 11px; color: var(--c-muted); white-space: nowrap; flex-shrink: 0; margin-top: 2px; } /* ── Responsive: mobile ───────────────────────────────────── */ @media (max-width: 1100px) { .admin-finance-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .admin-shell { --admin-shell-block-margin: 0px; --admin-shell-block-gutter: 0px; margin: 0; border-left: none; border-right: none; border-radius: 0; } .admin-sidebar { position: fixed; top: 56px; left: 0; bottom: 0; transform: translateX(-100%); box-shadow: var(--shadow-xl); } .admin-sidebar.open { transform: translateX(0); } .admin-sidebar-backdrop { display: block; } .admin-sidebar-close { display: flex; align-items: center; justify-content: center; } .admin-burger { display: flex; align-items: center; justify-content: center; } .admin-detail-grid { grid-template-columns: 1fr; } .admin-entitlement-grid, .admin-form-grid { grid-template-columns: 1fr; } .admin-finance-insight-grid, .admin-finance-detail-grid, .admin-finance-scenario-grid, .admin-finance-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-search-row--filters { grid-template-columns: 1fr; } .admin-custom-domains-overview-grid, .admin-custom-domain-step-grid { grid-template-columns: 1fr; } .admin-custom-domain-ops-head, .admin-custom-domain-ops-badges { align-items: flex-start; } .admin-custom-domain-ops-list { grid-template-columns: 1fr; } .admin-page { padding: 16px 12px 60px; } .admin-search-row > label[for="adminAnalyticsDays"], .admin-search-row > label[for="adminMetricsDays"], .admin-search-row > label[for="adminTrafficDays"] { margin-left: 0; } .admin-table-wrap { display: none; } .admin-table-wrap.access-management-table-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-table-wrap.access-management-table-wrap .access-management-table { min-width: 680px; } .admin-responsive-card-list { display: grid; } .admin-pagination { flex-direction: column; align-items: flex-start; } .admin-verification-head { flex-direction: column; } .admin-verification-head-side { align-items: flex-start; } } @media (max-width: 500px) { .admin-stats-grid { grid-template-columns: 1fr 1fr; } .admin-finance-insight-grid, .admin-finance-detail-grid, .admin-finance-scenario-grid, .admin-finance-note-grid { grid-template-columns: 1fr; } .admin-custom-domains-segmented { flex-direction: column; } .admin-custom-domains-segment { width: 100%; justify-content: space-between; } .admin-user-email { max-width: 140px; } .admin-responsive-metrics { grid-template-columns: 1fr; } .admin-topbar { padding: 0 12px; } .admin-page-title { font-size: 18px; } } /* end styles/pages/admin.css */ /* begin styles/core/performance.css */ /* Chromium scroll performance: reduce paint-heavy glass and blur layers. */ html[data-studio-browser="chromium"] body::before { display: none; } html[data-studio-browser="chromium"] body { background: radial-gradient(680px 380px at 10% -6%, rgba(37,99,235,0.12), transparent 58%), linear-gradient(180deg, #ffffff 0%, var(--c-bg) 52%, #eef3fb 100%); } html[data-theme="dark"][data-studio-browser="chromium"] body { background: radial-gradient(680px 380px at 10% -6%, rgba(37,99,235,0.18), transparent 58%), linear-gradient(180deg, #0c1529 0%, #0f172a 44%, var(--c-bg) 100%); } html[data-studio-browser="chromium"] .studio-topbar, html[data-studio-browser="chromium"] .studio-launch-credit-badge, html[data-studio-browser="chromium"] .studio-topbar-menu, html[data-studio-browser="chromium"] .studio-mobile-nav-primary, html[data-studio-browser="chromium"] .studio-profile-menu, html[data-studio-browser="chromium"] .studio-surface, html[data-studio-browser="chromium"] .studio-modal, html[data-studio-browser="chromium"] .dashboard-pulse-card, html[data-studio-browser="chromium"] .sv-page-hero-kicker, html[data-studio-browser="chromium"] .sv-page-hero-stats, html[data-studio-browser="chromium"] .lp-int-panel, html[data-studio-browser="chromium"] .lp-int-source-card, html[data-studio-browser="chromium"] .lp-home-access-spectrum, html[data-studio-browser="chromium"] .public-chat-frame, html[data-studio-browser="chromium"] .conversation-wiki-index, html[data-studio-browser="chromium"] .detail-hero-action-toggle, html[data-studio-browser="chromium"] .pg-header, html[data-studio-browser="chromium"] .pg-composer-wrap { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-studio-browser="chromium"] .studio-topbar { background: rgba(255,255,255,0.96); box-shadow: 0 1px 0 rgba(148,163,184,0.18), 0 8px 22px rgba(15,23,42,0.06); } html[data-theme="dark"][data-studio-browser="chromium"] .studio-topbar { background: rgba(15,23,42,0.96); box-shadow: 0 1px 0 rgba(148,163,184,0.14), 0 10px 24px rgba(2,6,23,0.22); } html[data-studio-browser="chromium"] .studio-launch-credit-badge { background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96)), var(--c-panel-strong); } html[data-theme="dark"][data-studio-browser="chromium"] .studio-launch-credit-badge { background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(30,41,59,0.96)), var(--c-panel-strong); } html[data-studio-browser="chromium"] .lp-shell::before, html[data-studio-browser="chromium"] .lp-shell::after, html[data-studio-browser="chromium"] .lp-hero::before, html[data-studio-browser="chromium"] .lp-hero::after, html[data-studio-browser="chromium"] .lp-grid-lines, html[data-studio-browser="chromium"] .lp-bg-travel::before, html[data-studio-browser="chromium"] .lp-bg-travel::after { display: none !important; } html[data-studio-browser="chromium"] .lp-orb, html[data-studio-browser="chromium"] .lp-sh-orb, html[data-studio-browser="chromium"] .lp-problem-section::before, html[data-studio-browser="chromium"] .lp-shift-section::before, html[data-studio-browser="chromium"] .lp-why-section::before { animation: none !important; filter: none !important; } html[data-studio-browser="chromium"] .lp-orb { display: none; } html[data-studio-browser="chromium"] .lp-sh-orb, html[data-studio-browser="chromium"] .lp-problem-section::before, html[data-studio-browser="chromium"] .lp-shift-section::before, html[data-studio-browser="chromium"] .lp-why-section::before { opacity: 0.16; } html[data-studio-browser="chromium"] .lp-vector-net { opacity: 0.18; } /* end styles/core/performance.css */