/* Studio shell. This file deliberately contains visual/layout
   overrides only: the production controls keep their existing IDs and wiring. */
:root {
  --studio-rail: 256px;
  --studio-top: 68px;
  --studio-dock: 224px;
  --studio-gap: 10px;
  --studio-rail-motion: .2s cubic-bezier(.4,0,.2,1);
  --studio-font: 'Camera Plain Variable',ui-sans-serif,system-ui,sans-serif;
  --studio-ui-font: -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,'Helvetica Neue',Arial,sans-serif;
  --studio-text: oklch(1 0 0);
  --studio-rail-button: 50px;
  --studio-rail-gutter: 14px;
  --studio-rail-active: #303033;
  --studio-rail-hover: #252528;
  --studio-rail-logo-hover: #1b1b1e;
}

body:has(#app-screen:not(.hidden)) {
  background: #111113 !important;
}

body:has(#app-screen:not(.hidden)) input[type='text'],
body:has(#app-screen:not(.hidden)) input[type='email'],
body:has(#app-screen:not(.hidden)) input[type='password'],
body:has(#app-screen:not(.hidden)) input[type='number'],
body:has(#app-screen:not(.hidden)) input[type='search'],
body:has(#app-screen:not(.hidden)) input[type='url'],
body:has(#app-screen:not(.hidden)) textarea,
body:has(#app-screen:not(.hidden)) select {
  background:#17171a !important;
  background-color:#17171a !important;
  border-color:#45454b !important;
  box-shadow:none !important;
  color:#f4f1f4 !important;
  color-scheme:dark;
}
body:has(#app-screen:not(.hidden)) input::placeholder,
body:has(#app-screen:not(.hidden)) textarea::placeholder {
  color:#85818a !important;
  opacity:1 !important;
}
/* Focus ring only for keyboard users — clicking an input drew a ring inside
   fields that already show focus another way (the composer has its own glow). */
body:has(#app-screen:not(.hidden)) input:focus-visible,
body:has(#app-screen:not(.hidden)) textarea:focus-visible,
body:has(#app-screen:not(.hidden)) select:focus-visible {
  border-color:#6b6871 !important;
  outline:2px solid rgba(23,201,255,.28) !important;
  outline-offset:1px !important;
}
/* The composer sits in its own glowing frame, so it never needs the ring. */
body:has(#app-screen:not(.hidden)) #studio-idea-prompt:focus,
body:has(#app-screen:not(.hidden)) #studio-idea-prompt:focus-visible {
  outline:none !important;
  border-color:transparent !important;
}

#app-screen:not(.hidden) {
  isolation: isolate;
  background: #111113 !important;
  color: oklch(1 0 0) !important;
  font: normal 400 14px/21px var(--studio-font);
}

#app-screen:not(.hidden) button,
#app-screen:not(.hidden) a,
#app-screen:not(.hidden) input,
#app-screen:not(.hidden) textarea,
#app-screen:not(.hidden) select {
  font-family: var(--studio-font);
}

.studio-atmosphere {
  position: fixed;
  inset: var(--studio-gap) var(--studio-gap) var(--studio-gap) var(--studio-rail);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  border-radius: 18px;
  border: 1px solid #2c2c31;
  background:radial-gradient(circle at 50% 46%,rgba(255,49,95,.24),transparent 12rem),radial-gradient(circle at 50% 46%,rgba(23,201,255,.2),transparent 18rem),#17151b;
  transition:none;
}

.studio-rays {
  position: absolute;
  inset: -75%;
  background:repeating-conic-gradient(from 0deg at 50% 46%,rgba(248,239,206,.05) 0deg 7.5deg,transparent 7.5deg 15deg);
  -webkit-mask-image:radial-gradient(closest-side at 50% 46%,#000 25%,transparent 80%);
  mask-image:radial-gradient(closest-side at 50% 46%,#000 25%,transparent 80%);
  opacity:1;
  animation: studio-ray-spin 120s linear infinite;
}
@keyframes studio-ray-spin { to { transform:rotate(360deg); } }

#sidebar {
  top: 0 !important;
  width: var(--studio-rail) !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: #111113 !important;
  border-right: 0 !important;
  color: #f5f2f5 !important;
  transition:none !important;
  will-change:auto;
}
#app-screen:not(.hidden) aside#sidebar { width:var(--studio-rail) !important; border-right:0 !important; }
#sidebar > div.studio-sidebar-brand:first-child { display:flex !important; align-items:center; justify-content:space-between; height:68px !important; padding:0 18px !important; border:0 !important; background:#111113 !important; }
.studio-mark { display:inline-flex; flex:0 0 auto; align-items:center; padding:0; border:0; background:transparent; text-decoration:none; }
/* flex:none on both, or the mark shrinks below its intrinsic width and squashes. */
.studio-mark img { display:block; flex:0 0 auto; width:auto; height:40px; }
.studio-mark-icon { display:none; width:34px; height:34px; border-radius:9px; }
.studio-brand-right { display:flex; align-items:center; gap:8px; }
.studio-rail-toggle { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:#8f8c94; cursor:pointer; }
.studio-rail-toggle:hover { background:#242427; color:#e6e3e8; }
.studio-rail-toggle svg { width:18px; height:18px; }

/* Collapsed icon-only rail. --studio-rail cascades to every stage. */
#app-screen.is-rail { --studio-rail:48px; --studio-rail-button:30px; --studio-rail-gutter:calc((var(--studio-rail) - var(--studio-rail-button)) / 2); }
/* In collapsed mode the rail sits directly on the app background. */
#app-screen.is-rail:not(.hidden) aside#sidebar,
#app-screen.is-rail #sidebar,
#app-screen.is-rail #sidebar > div.studio-sidebar-brand:first-child,
#app-screen.is-rail #sidebar-footer { background:transparent !important; border:0 !important; border-right:0 !important; }
#app-screen.is-rail #sidebar > div.studio-sidebar-brand:first-child { position:relative !important; justify-content:center !important; height:46px !important; padding:0 !important; }
#app-screen.is-rail .studio-mark, #app-screen.is-rail .studio-badge { display:none !important; }
#app-screen.is-rail .studio-mark-icon { position:absolute; left:50%; top:50%; display:block; width:30px; height:auto; border-radius:0; opacity:1; filter:blur(0); transform:translate(-50%,-50%) scale(1); transition:opacity .12s ease,filter .16s ease,transform .16s ease; }
#app-screen.is-rail .studio-sidebar-brand:hover .studio-mark-icon { opacity:0; filter:blur(5px); transform:translate(-50%,-50%) scale(.82); }
#app-screen.is-rail .studio-brand-right { position:absolute; left:var(--studio-rail-gutter); top:8px; right:auto; display:grid; place-items:center; width:var(--studio-rail-button); height:var(--studio-rail-button); border-radius:12px; background:transparent; opacity:1; transform:none; transition:background .12s ease; }
#app-screen.is-rail .studio-sidebar-brand:hover .studio-brand-right { background:var(--studio-rail-logo-hover); }
#app-screen.is-rail .studio-rail-toggle { width:32px; height:32px; border:1px solid #55545a; border-radius:7px; background:transparent; box-shadow:none; color:#d8d5dc; opacity:0; transform:none; transition:opacity .12s ease,color .12s ease,border-color .12s ease; }
#app-screen.is-rail .studio-sidebar-brand:hover .studio-rail-toggle { opacity:1; transform:none; }
#app-screen.is-rail .studio-rail-toggle:hover { background:transparent; border-color:#716f76; color:#fff; }
#app-screen.is-rail .studio-workspace-card { justify-content:center !important; width:var(--studio-rail-button) !important; height:var(--studio-rail-button) !important; min-height:var(--studio-rail-button) !important; margin:2px 0 10px var(--studio-rail-gutter) !important; padding:0 !important; border-color:#3c3c40 !important; border-radius:12px !important; background:transparent !important; }
#app-screen.is-rail .studio-workspace-card { border-radius:9px !important; }
#app-screen.is-rail .studio-workspace-card:hover { background:var(--studio-rail-hover) !important; }
#app-screen.is-rail .studio-workspace-avatar { width:min(22px,calc(var(--studio-rail-button) - 4px)) !important; height:min(22px,calc(var(--studio-rail-button) - 4px)) !important; flex:0 0 auto !important; border-radius:50%; font-size:10px; }
#app-screen.is-rail .studio-account-avatar { width:min(26px,var(--studio-rail-button)) !important; height:min(26px,var(--studio-rail-button)) !important; flex:0 0 auto !important; }
#app-screen.is-rail .studio-workspace-name, #app-screen.is-rail .studio-workspace-chevron { display:none !important; }
#app-screen.is-rail .studio-primary-nav { padding-inline:0 !important; gap:0 !important; align-items:flex-start; }
#app-screen.is-rail .studio-nav-item svg { width:16px !important; height:16px !important; flex-basis:16px !important; }
#app-screen.is-rail .studio-nav-item { border-radius:9px !important; justify-content:center !important; width:var(--studio-rail-button) !important; height:var(--studio-rail-button) !important; min-height:var(--studio-rail-button) !important; margin:0 0 0 var(--studio-rail-gutter) !important; padding:0 !important; gap:0 !important; border-radius:12px !important; font-size:0 !important; background:transparent !important; transform:none !important; transition:background .15s ease,color .15s ease; }
#app-screen.is-rail .studio-nav-item:hover { background:var(--studio-rail-hover) !important; animation:none !important; transform:none !important; }
#app-screen.is-rail .studio-nav-item.is-active { background:var(--studio-rail-active) !important; }
#app-screen.is-rail .studio-nav-group { gap:3px; }
#app-screen.is-rail .studio-nav-group--secondary { margin-top:50px; }
#app-screen.is-rail .studio-nav-item.is-placeholder:hover { background:transparent !important; }
#app-screen.is-rail #session-list { display:none !important; }
#app-screen.is-rail #sidebar-footer { display:flex !important; justify-content:flex-start !important; margin-top:auto !important; min-height:0 !important; padding:0 0 10px !important; }
#app-screen.is-rail #studio-account-trigger { width:var(--studio-rail-button); height:var(--studio-rail-button); margin-left:var(--studio-rail-gutter); border:0; border-radius:9px; background:transparent; }
#app-screen.is-rail #studio-account-trigger:hover { background:var(--studio-rail-hover); }
@media (prefers-reduced-motion: reduce) {
  .studio-atmosphere,
  #sidebar,
  #url-bar,
  .studio-canvas-heading,
  #preview-area,
  #panel-resizer,
  #studio-split-preview,
  .studio-workspace-header nav button { transition-duration:0s !important; }
  #studio-split-preview svg,
  .studio-workspace-header nav button svg { animation:none !important; }
  #studio-project-workspace .studio-workspace-header nav::before { transition:none !important; animation:none !important; }
}
@keyframes studio-rail-icon-bounce {
  0%,100% { transform:translateY(0); }
  45% { transform:translateY(-5px); }
  72% { transform:translateY(1px); }
}
@keyframes studio-rail-brand-bounce {
  0%,100% { transform:translateX(0) translateY(0) scale(1); }
  45% { transform:translateX(10px) translateY(-4px) scale(1.04); }
  72% { transform:translateX(8px) translateY(1px) scale(1.02); }
}
@keyframes studio-account-sheet-in {
  from { opacity:.96; transform:translateY(34px); }
  to { opacity:1; transform:translateY(0); }
}
.studio-badge { padding:5px 8px; border:1px solid rgba(23,201,255,.4); border-radius:6px; background:rgba(23,201,255,.12); color:#17C9FF; font-size:9px; font-weight:800; letter-spacing:.14em; }
#studio-mobile-topbar,
#studio-mobile-preview-dock,
#studio-mobile-project-list,
#studio-mobile-scroll-track { display:none; }
/* Beat comic.css '#sidebar > div:first-child span' (muted, !important) so the STUDIO text is pink like the Just talk button. */
#sidebar > div.studio-sidebar-brand:first-child span.studio-badge { color:#17C9FF !important; }
.studio-workspace-card { display:flex !important; align-items:center; gap:11px; width:calc(100% - 24px); margin:2px 12px 12px; padding:10px; border:1px solid #3c3c40 !important; border-radius:12px; background:#1b1b1d !important; color:inherit; cursor:pointer; }
.studio-workspace-avatar { display:grid; place-items:center; width:28px; height:28px; border:1px solid #fff; border-radius:50%; background:#17C9FF; color:#fff; font-size:13px; font-weight:800; }
.studio-workspace-name { color:oklch(0.9095 0.002 107); font-size:14px; font-weight:400; line-height:20px; }
.studio-workspace-chevron { margin-left:auto; color:#aaa7ae; font-size:15px; transition:transform .15s ease; }
#studio-workspace-trigger[aria-expanded='true'] .studio-workspace-chevron { transform:rotate(180deg); }
#studio-workspace-menu { position:absolute; top:130px; right:12px; left:12px; z-index:95; width:auto; max-width:calc(100% - 24px); overflow:hidden; border:1px solid var(--cx-line); border-radius:14px; background:var(--cx-panel); box-shadow:0 28px 80px rgba(0,0,0,.62); color:var(--cx-text); }
/* The icon-only rail still needs a full flyout; pinned/peeked session menus use
   the actual 224px sidebar and therefore remain constrained by the rule above. */
#app-screen.is-rail:not(.is-session-sidebar-open):not(.is-session-sidebar-peek) #studio-workspace-menu {
  right:auto;
  width:288px;
  max-width:none;
}
#studio-workspace-menu.hidden { display:none !important; }
.studio-workspace-menu-head { display:flex; align-items:center; gap:12px; padding:16px; }
.studio-workspace-avatar--large { width:48px; height:48px; flex:0 0 48px; border-radius:50%; font-size:19px; }
.studio-workspace-menu-head div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.studio-workspace-menu-head strong { color:var(--cx-text); font:600 14px/18px var(--studio-font); }
/* Scoped to the subtitle: the avatar is a sibling span and must keep its own type. */
.studio-workspace-menu-head > div > span { color:var(--cx-muted); font:400 12px/16px var(--studio-font); }
.studio-workspace-links { display:grid; gap:8px; padding:0 14px 14px; }
.studio-workspace-links button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:34px; border:1px solid var(--cx-line-strong); border-radius:8px; background:var(--cx-fill); color:var(--cx-text); font:600 12px/16px var(--studio-font); cursor:pointer; }
.studio-workspace-links button:hover { background:rgba(255,255,255,.1); }
.studio-workspace-links span { color:var(--cx-muted); font-size:15px; }
.studio-workspace-credits { padding:14px 16px 16px; border-top:1px solid var(--cx-line); border-bottom:1px solid var(--cx-line); }
.studio-workspace-credits > div:first-child { display:flex; align-items:center; justify-content:space-between; }
.studio-workspace-credits strong { color:var(--cx-text); font:600 13px/17px var(--studio-font); }
.studio-workspace-credits span { color:var(--cx-muted); font:400 12px/16px var(--studio-font); }
.studio-workspace-credits b { color:var(--cx-text); font-weight:600; }
.studio-credit-track { height:6px; margin:12px 0 10px; overflow:hidden; border-radius:999px; background:var(--cx-fill); }
.studio-credit-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cx-pink),var(--cx-cyan)); transition:width .25s ease; }
.studio-workspace-credits small { color:var(--cx-dim); font:400 11px/1.45 var(--studio-font); }
.studio-workspace-buy { display:flex; align-items:center; gap:11px; width:calc(100% - 20px); min-height:42px; margin:10px; padding:0 12px; border:1px solid var(--cx-line); border-radius:10px; background:var(--cx-surface); color:var(--cx-text); cursor:pointer; }
.studio-workspace-buy > span { color:var(--cx-cyan); font-size:16px; }
.studio-workspace-buy strong { font:600 13px/17px var(--studio-font); }
.studio-workspace-buy em { margin-left:auto; padding:4px 9px; border-radius:999px; background:rgba(23,201,255,.14); color:var(--cx-cyan); font:normal 600 10px/14px var(--studio-font); letter-spacing:.03em; }
.studio-workspace-buy:hover { background:var(--cx-surface-hover); border-color:var(--cx-line-strong); }
#sidebar > div.flex.items-center { background:transparent !important; border:0 !important; padding:10px 14px 8px !important; }
#sidebar > div.flex.items-center > span { color:#858289 !important; letter-spacing:.08em !important; }
#delete-sessions-btn { background:transparent !important; color:#8f8c93 !important; }
#session-list { padding:2px 10px 14px !important; }
#session-list .session-row-btn { color:oklch(0.9095 0.002 107) !important; border-radius:9px !important; }
#session-list .session-row-btn:hover { background:#252527 !important; border-color:transparent !important; color:#fff !important; }
#session-list .session-row-btn.session-active { background:#2b2b2e !important; border-color:transparent !important; color:#fff !important; box-shadow:none !important; transform:none !important; }
#sidebar-footer { background:#111113 !important; border-top:0 !important; }
#user-email:not(.hidden), #logout-btn:not(.hidden), #admin-link:not(.hidden), #sidebar-home-link { color:#aaa7ae !important; }

/* Compact account launcher and account menu */
#sidebar-footer { position:relative !important; display:flex !important; align-items:center; min-height:70px; padding:12px 16px !important; overflow:visible !important; }
#studio-account-trigger { position:relative; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.studio-account-avatar { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(255,255,255,.85); border-radius:50%; background:#17C9FF; color:#fff; font-size:11px; font-weight:900; }
.studio-account-avatar--large { width:36px; height:36px; flex:0 0 36px; font-size:13px; }
/* A Google profile photo replaces the initial and fills the whole circle, so the
   ring and tint that frame the letter are dropped. */
.studio-account-avatar.has-photo { border-color:transparent; background:transparent; }
#studio-account-trigger .studio-account-avatar.has-photo { width:100%; height:100%; }
.studio-account-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
#studio-account-menu { position:absolute; right:12px; left:12px; bottom:76px; z-index:90; width:auto; max-width:calc(100% - 24px); max-height:calc(100vh - 24px); overflow:auto; padding:6px; border:1px solid var(--cx-line); border-radius:14px; background:var(--cx-panel); box-shadow:0 22px 64px rgba(0,0,0,.58); color:var(--cx-text); }
#app-screen.is-rail:not(.is-session-sidebar-open):not(.is-session-sidebar-peek) #studio-account-menu { right:auto; left:16px; bottom:calc(100% + 8px); width:240px; max-width:none; max-height:calc(100vh - 92px); }
#studio-account-menu.hidden { display:none !important; }
.studio-account-head { display:flex; align-items:center; gap:10px; padding:8px 10px 12px; border-bottom:1px solid var(--cx-line); }
.studio-account-head > div { min-width:0; }
.studio-account-head strong { display:block; margin-bottom:2px; overflow:hidden; color:var(--cx-text); font:600 13px/17px var(--studio-font); text-overflow:ellipsis; white-space:nowrap; }
#studio-account-menu #user-email:not(.hidden) { display:block !important; max-width:170px; overflow:hidden; color:var(--cx-muted) !important; font:400 12px/16px var(--studio-font) !important; text-overflow:ellipsis; white-space:nowrap; }
#studio-account-menu #credits-display:not(.hidden) { position:static !important; display:flex !important; align-items:center; gap:10px !important; width:calc(100% - 8px) !important; min-height:44px !important; margin:6px 4px !important; padding:7px 10px !important; border:1px solid var(--cx-line) !important; border-radius:10px !important; background:var(--cx-surface) !important; box-shadow:none !important; color:var(--cx-text) !important; text-align:left; }
#studio-account-menu #credits-display > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
#studio-account-menu #credits-display strong { color:var(--cx-text); font:600 12px/16px var(--studio-font); }
#studio-account-menu #credits-display small { color:var(--cx-muted); font:400 11px/15px var(--studio-font); }
.studio-menu-icon { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border-radius:8px; background:rgba(23,201,255,.14); color:var(--cx-cyan); font-size:13px; }
#studio-account-menu .credits-topup { flex:0 0 22px; width:22px; height:22px; border:1px solid var(--cx-line-strong); border-radius:999px; background:transparent; color:var(--cx-muted); }
.studio-account-group { padding:4px 0; }
#studio-account-menu .studio-account-group button,
#studio-account-menu .studio-account-group a,
#studio-account-menu .studio-signout { display:flex !important; align-items:center; gap:11px; width:100% !important; min-height:34px !important; margin:0 !important; padding:0 10px !important; border:0 !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; color:var(--cx-text) !important; font:400 13px/18px var(--studio-font) !important; text-align:left; text-decoration:none !important; text-transform:none !important; cursor:pointer; }
#studio-account-menu .studio-account-group button:hover,
#studio-account-menu .studio-account-group a:hover,
#studio-account-menu .studio-signout:hover { background:var(--cx-fill) !important; color:#fff !important; transform:none !important; }
#studio-account-menu .studio-account-group svg,
#studio-account-menu .studio-signout svg { display:block; width:17px; height:17px; flex:0 0 17px; color:var(--cx-muted); }
#studio-account-menu .studio-account-group button:hover svg,
#studio-account-menu .studio-account-group a:hover svg,
#studio-account-menu .studio-signout:hover svg { color:var(--cx-text); }
#studio-account-menu .studio-account-group em { margin-left:auto; color:var(--cx-dim); font-style:normal; font-size:13px; }
#studio-account-menu .studio-signout { margin-top:4px !important; border-top:1px solid var(--cx-line) !important; border-radius:0 !important; }

#url-bar:not(.hidden) {
  left: var(--studio-rail) !important;
  height:var(--studio-top) !important;
  min-height:var(--studio-top) !important;
  padding:0 18px !important;
  gap:8px !important;
  background:rgba(22,22,24,.82) !important;
  border-bottom:0 !important;
  backdrop-filter:blur(20px);
  transition:none !important;
}
#builder-wordmark, #sidebar-toggle, #sidebar-resizer { display:none !important; }
.domain-controls { flex:1 1 auto; min-width:0; }
#site-link { color:#aaa7ae !important; }
.preview-toggles { padding:4px; border:1px solid #3c3c40; border-radius:10px; background:#1c1c1f; }
.preview-toggles button, #preview-refresh, #preview-open, #publish-btn, #preview-site-open, #version-history-btn, .studio-voice-btn {
  width:auto !important; height:34px !important; min-height:34px !important; flex:0 0 auto !important; padding:0 10px !important;
  background:transparent !important; border:0 !important; border-radius:7px !important; box-shadow:none !important; color:#b8b5bc !important;
  font-size:11px !important; letter-spacing:0 !important; text-transform:none !important;
}
.preview-toggles button:hover, #preview-refresh:hover, #preview-open:hover, #preview-site-open:hover, #version-history-btn:hover { background:#303034 !important; color:#fff !important; }
.preview-toggles button.bg-violet-600, .preview-toggles button.text-white { background:#38383d !important; color:#fff !important; border:0 !important; box-shadow:none !important; }
#publish-btn { background:#f4f1f4 !important; color:#171518 !important; font-weight:800 !important; }
#credits-display:not(.hidden) { position:static !important; margin-left:4px; min-height:34px !important; background:#2a2a2e !important; color:#f3eff5 !important; border:1px solid #44444a !important; border-radius:9px !important; box-shadow:none !important; }
#credits-count { color:#fff !important; }

.studio-canvas-heading { display:none !important; }
.studio-heading-kicker { margin-bottom:4px; color:rgba(255,255,255,.58); font-size:9px; font-weight:800; letter-spacing:.18em; }
.studio-canvas-heading strong { font-size:clamp(20px,2.2vw,31px); letter-spacing:-.035em; }

#preview-area {
  top:var(--studio-top) !important; left:var(--studio-rail) !important; bottom:var(--studio-dock) !important;
  padding:72px 34px 20px !important; background:transparent !important;
  transition:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) #preview-area { padding:72px 34px 20px !important; display:grid !important; }
#preview-container:not(.hidden) { width:min(1120px,100%) !important; height:100% !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:16px !important; box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.5) !important; background:#fff !important; }
#preview-container[data-device='tablet']:not(.hidden) { width:720px !important; }
#preview-container[data-device='mobile']:not(.hidden) { width:390px !important; }
#preview-empty:not(.hidden) { width:min(760px,calc(100% - 48px)) !important; max-width:760px !important; min-height:280px !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:18px !important; box-shadow:0 28px 90px rgba(0,0,0,.38) !important; background:rgba(24,24,28,.78) !important; backdrop-filter:blur(24px); }
#preview-empty .login-stage { display:none !important; }

#panel-resizer { left:var(--studio-rail) !important; bottom:calc(var(--studio-dock) - 5px) !important; transition:none !important; }
#panel-resizer::after { background:#2b2b2f !important; border:1px solid #4a4a50 !important; color:#aaa7ae !important; box-shadow:none !important; }
#bottom-panel:not(.hidden) {
  left:calc(var(--studio-rail) + 28px) !important; right:28px !important; bottom:14px !important;
  height:calc(var(--studio-dock) - 28px) !important; min-height:calc(var(--studio-dock) - 28px) !important;
  padding:8px 12px 12px !important; background:rgba(25,25,29,.9) !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:18px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.48) !important; color:#f5f2f5 !important; backdrop-filter:blur(22px);
  transition:none !important;
}
#bottom-panel > .flex.items-center.border-b { padding:2px 2px 7px !important; gap:3px !important; }
.tab-btn { min-height:30px !important; padding:6px 11px !important; color:#9d9aa1 !important; font-size:10px !important; letter-spacing:.03em !important; text-transform:none !important; transform:none !important; }
.tab-btn:hover:not(.tab-btn-active) { color:#fff !important; transform:none !important; }
.tab-btn-active { background:#36363b !important; border-color:#505057 !important; color:#fff !important; border-radius:8px !important; box-shadow:none !important; transform:none !important; }
#tab-prompt { margin-top:0 !important; gap:9px !important; }
#prompt { height:100% !important; min-height:78px !important; padding:14px 80px 14px 14px !important; background:#24242a !important; border:1px solid #45454c !important; border-radius:12px !important; box-shadow:none !important; color:#fff !important; }
#prompt::placeholder { color:#85828d !important; }
#prompt-record-btn { border-color:#55545c !important; background:#303036 !important; color:#ddd9e0 !important; }
#build-btn { background:#f3f0f4 !important; color:#171518 !important; border:0 !important; border-radius:10px !important; box-shadow:none !important; }

body:has(#app-screen:not(.hidden)) #human-help-button { background:#29292f !important; color:#eeeaf0 !important; border:1px solid #48484f !important; box-shadow:none !important; }

@media (max-width: 900px) {
  :root { --studio-rail:220px; }
  .studio-workspace-card { margin-inline:8px; }
  #url-bar:not(.hidden) { overflow-x:auto !important; }
  .studio-canvas-heading { display:none; }
  /* The mobile Studio sheet owns #preview-area's box outright (it is one page of a
     horizontal scroller, not a pane in a split view), so the tablet split-view
     rules step aside for it rather than being out-specified further down. */
  #preview-area, #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)) #preview-area { padding:18px !important; }
}

@media (max-width: 820px) {
  html:has(#app-screen:not(.hidden)),
  body:has(#app-screen:not(.hidden)) { width:100%; height:100%; overflow:hidden !important; background:#3f3a1c !important; }
  #app-screen:not(.hidden) { position:fixed !important; inset:0 !important; display:block !important; overflow:hidden !important; background:#1c1c1d !important; }
  #app-screen.is-mobile-studio { --mobile-edge:28px; --mobile-top:132px; --mobile-bottom:126px; --mobile-panel-w:calc(var(--mobile-page-w) - 88px); }
  #app-screen.is-mobile-studio #url-bar,
  #app-screen.is-mobile-studio #url-bar:not(.hidden),
  #app-screen.is-mobile-studio .studio-canvas-heading,
  #app-screen.is-mobile-studio #panel-resizer,
  #app-screen.is-mobile-studio #sidebar-resizer,
  #app-screen.is-mobile-studio .studio-atmosphere,
  #app-screen.is-mobile-studio .studio-grain { display:none !important; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #url-bar:not(.hidden) { display:none !important; }
  /* The three screens are one sheet: every panel and every piece of chrome is laid
     out at a fixed offset *inside* #app-screen, which is the horizontal scroller.
     Because they are scrolled content rather than viewport-fixed boxes chasing
     scrollLeft from a handler, the browser moves the whole sheet in one go, on the
     compositor — so nothing can lag a frame behind the finger or drift out of
     register with its neighbour. No script runs while the sheet is moving.

     --mobile-page-w is one screen's width. 100vw is the fallback; the shell
     overwrites it with the scroller's own clientWidth, because the two disagree
     wherever a classic scrollbar or a pinch zoom is in play, and offsets built
     from a width the container does not actually have are what tear the seams
     open at the ends of the sheet. */
  #app-screen.is-mobile-studio { --mobile-page-w:100vw; overflow-x:auto !important; overflow-y:hidden !important; scroll-behavior:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  #app-screen.is-mobile-studio::-webkit-scrollbar { display:none; }
  /* Everything the sheet sizes from --mobile-page-w states its own box-sizing:
     a padded box measured content-first would sit wider than the page it belongs
     to and push the scroll range past the last screen. */
  #studio-mobile-scroll-track,
  #studio-mobile-scroll-track span,
  #app-screen.is-mobile-studio .studio-mobile-bar,
  #app-screen.is-mobile-studio #studio-mobile-preview-dock,
  #app-screen.is-mobile-studio:not(.hidden) aside#sidebar,
  #app-screen.is-mobile-studio #studio-project-activity,
  #app-screen.is-mobile-studio #preview-area,
  #app-screen.is-mobile-studio #bottom-panel:not(.hidden) { box-sizing:border-box !important; }
  /* The one in-flow child: it gives the scroller its width and carries the three
     snap points. Every panel is out of flow and pinned over it. */
  #studio-mobile-scroll-track { display:flex; width:calc(var(--mobile-panel-w) + var(--mobile-page-w) * 2); min-width:calc(var(--mobile-panel-w) + var(--mobile-page-w) * 2); height:100dvh; pointer-events:none; }
  #studio-mobile-scroll-track span { display:block; height:100dvh; scroll-snap-align:start; scroll-snap-stop:always; }
  #studio-mobile-scroll-track span:nth-child(1) { flex:0 0 var(--mobile-panel-w); }
  #studio-mobile-scroll-track span:nth-child(2),
  #studio-mobile-scroll-track span:nth-child(3) { flex:0 0 var(--mobile-page-w); }
  .studio-mobile-bar { position:absolute; top:28px; right:auto; z-index:220; display:none; align-items:center; gap:18px; pointer-events:none; }
  #studio-mobile-topbar { left:28px; width:calc(var(--mobile-panel-w) - 56px); grid-template-columns:82px minmax(0,340px); }
  #studio-mobile-chatbar { left:calc(var(--mobile-panel-w) + 28px); width:calc(var(--mobile-page-w) - 56px); grid-template-columns:82px minmax(0,1fr) 82px; justify-content:space-between; }
  #app-screen.is-mobile-studio .studio-mobile-bar { display:grid; }
  #studio-mobile-topbar > button,
  #studio-mobile-chatbar button { pointer-events:auto; position:relative; height:82px; min-height:82px; border:1px solid #4c4b50; border-radius:999px; background:#303032; box-shadow:0 16px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07); color:#f2eff3; font:normal 400 24px/1 var(--studio-font); }
  .studio-mobile-bar .studio-mobile-search,
  .studio-mobile-bar .studio-mobile-menu,
  .studio-mobile-bar .studio-mobile-back { display:grid; place-items:center; padding:0; }
  .studio-mobile-icon { width:34px; height:34px; fill:none; stroke:#d3d0d5; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .studio-mobile-icon--back { stroke:#f2eff3; }
  .studio-mobile-bar .studio-mobile-title { display:flex; align-items:center; justify-content:center; gap:16px; min-width:0; padding:0 24px; color:#f2eff3 !important; font-size:24px; font-weight:400; }
  .studio-mobile-bar .studio-mobile-title span { overflow:hidden; color:#f2eff3 !important; text-overflow:ellipsis; white-space:nowrap; }
  .studio-mobile-bar .studio-mobile-title em { color:#d7d4d9 !important; font-style:normal; font-size:22px; }
  /* Panels are absolutely positioned in the scroller, so `left` alone places them
     for good — there is no transform, no transition and no per-screen variant. The
     seam between two panels is a shared edge in one layout pass, which is what
     keeps the sheet reading as a single surface at every point of a drag.

     `border:0` here also finally lands on #sidebar, which was still carrying the
     desktop rail's 3px right border: on the sheet that border falls exactly on the
     join with the chat page and draws a dark rule down it. */
  #app-screen.is-mobile-studio:not(.hidden) aside#sidebar,
  #app-screen.is-mobile-studio #studio-project-activity,
  #app-screen.is-mobile-studio #preview-area { position:absolute !important; top:0 !important; right:auto !important; bottom:auto !important; width:var(--mobile-page-w) !important; height:100dvh !important; min-height:100dvh !important; overflow:hidden !important; border:0 !important; transform:none !important; transition:none !important; }
  #app-screen.is-mobile-studio:not(.hidden) aside#sidebar { left:0 !important; z-index:120; width:var(--mobile-panel-w) !important; display:flex !important; flex-direction:column !important; background:#1d1d1e !important; color:#f2eff3 !important; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #sidebar { display:flex !important; }
  #app-screen.is-mobile-studio #studio-project-activity { left:var(--mobile-panel-w) !important; z-index:110; display:flex !important; flex-direction:column !important; background:#1d1d1e !important; color:#f2eff3 !important; }
  #app-screen.is-mobile-studio #preview-area { left:calc(var(--mobile-panel-w) + var(--mobile-page-w)) !important; z-index:100; display:block !important; padding:0 !important; background:#252525 !important; }
  /* Once a preview is loaded, structure.css lays #preview-area out as a desktop
     pane through an `:has(#preview-container…)` selector the plain mobile one
     cannot out-rank. The sheet restates its page geometry through the same gate
     rather than leaving the third screen half a page adrift. */
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #preview-area { position:absolute !important; top:0 !important; right:auto !important; bottom:auto !important; left:calc(var(--mobile-panel-w) + var(--mobile-page-w)) !important; width:var(--mobile-page-w) !important; height:100dvh !important; min-height:100dvh !important; padding:0 !important; }
  body:has(#app-screen.is-mobile-studio:not(.hidden)) #voice-studio-test-btn { display:none !important; }
  #app-screen.is-mobile-studio #sidebar > div.studio-sidebar-brand:first-child { display:none !important; }
  #app-screen.is-mobile-studio .studio-mark img { height:38px; }
  #app-screen.is-mobile-studio .studio-primary-nav { display:none !important; }
  #app-screen.is-mobile-studio #session-list { display:none !important; }
  #app-screen.is-mobile-studio #studio-mobile-project-list { display:flex; flex:1; min-height:0; flex-direction:column; gap:0; padding:144px 40px 142px 28px; overflow-y:auto; }
  /* Rows scroll under the top bar and the workspace pill, so both ends get a
     progressive blur: the mask fades the backdrop-filter out rather than ending it
     on a hard line. Sits above the list but below the fixed chrome (z-index 130+). */
  #app-screen.is-mobile-studio #sidebar::before,
  #app-screen.is-mobile-studio #sidebar::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    z-index:5;
    pointer-events:none;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  #app-screen.is-mobile-studio #sidebar::before {
    top:0;
    height:132px;
    background:linear-gradient(to bottom, rgba(29,29,30,.78), rgba(29,29,30,0));
    mask-image:linear-gradient(to bottom, #000 55%, transparent);
    -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent);
  }
  #app-screen.is-mobile-studio #sidebar::after {
    bottom:0;
    height:150px;
    background:linear-gradient(to top, rgba(29,29,30,.78), rgba(29,29,30,0));
    mask-image:linear-gradient(to top, #000 55%, transparent);
    -webkit-mask-image:linear-gradient(to top, #000 55%, transparent);
  }
  .studio-mobile-project-row { display:grid; grid-template-columns:110px minmax(0,1fr); grid-template-rows:auto auto; column-gap:28px; align-items:center; min-height:176px; padding:14px 0; border:0; border-bottom:1px solid #39393b; background:transparent; color:#f4f1f4; text-align:left; }
  .studio-mobile-project-row strong { grid-column:2; overflow:hidden; font-size:28px; font-weight:700; line-height:1.18; text-overflow:ellipsis; white-space:nowrap; }
  .studio-mobile-project-row small { grid-column:2; color:#aaa7ae; font-size:25px; line-height:1.2; }
  .studio-mobile-project-thumb { position:relative; grid-row:1/3; display:grid; place-items:center; width:110px; height:148px; overflow:hidden; border:1px solid #3f3e43; border-radius:6px; background:#f5f2ef; color:#d4d1d7; font-size:46px; }
  .studio-mobile-project-thumb iframe { position:absolute; top:0; left:0; width:400%; height:400%; border:0; background:#fff; pointer-events:none; transform:scale(.25); transform-origin:0 0; }
  .studio-mobile-project-row--new .studio-mobile-project-thumb { background:#151516; color:#aaa7ae; }
  #app-screen.is-mobile-studio #session-list .session-row-btn { min-height:82px !important; padding:14px 0 14px 132px !important; border-radius:0 !important; border:0 !important; border-bottom:1px solid #343438 !important; background:transparent !important; color:#f3f0f4 !important; font-size:20px !important; line-height:1.18 !important; text-align:left !important; }
  #app-screen.is-mobile-studio #session-list .session-row-btn.session-active { background:transparent !important; }
  /* Pinned inside #sidebar rather than to the viewport, so the pill and the avatar
     are carried by the projects page instead of standing still while it moves.
     Anchored on both edges so neither depends on --mobile-panel-w resolving the
     same way here as it does one level up. */
  #app-screen.is-mobile-studio #studio-workspace-trigger { position:absolute !important; left:28px !important; right:98px !important; bottom:52px !important; z-index:130; display:flex !important; align-items:center !important; justify-content:flex-start !important; width:auto !important; min-height:84px !important; height:84px !important; margin:0 !important; padding:8px 24px 8px 10px !important; gap:18px !important; border:1px solid #444349 !important; border-radius:999px !important; background:#262628 !important; box-shadow:0 18px 42px rgba(0,0,0,.45) !important; }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-avatar { width:64px; height:64px; border-radius:50%; background:#c91578; font-size:26px; }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-name { display:block !important; overflow:hidden; color:#f4f1f4; font-size:24px; font-weight:700; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-name { font-size:0; }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-name::after { content:attr(data-mobile-label); font-size:24px; }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-chevron { display:block !important; margin-left:auto; color:#aaa7ae; font-size:20px; }
  #app-screen.is-mobile-studio #sidebar-footer { position:absolute !important; left:auto !important; right:0 !important; bottom:52px !important; z-index:131; display:grid !important; place-items:center !important; width:84px !important; min-height:84px !important; height:84px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
  #app-screen.is-mobile-studio #sidebar-footer::after,
  #app-screen.is-mobile-studio #sidebar-footer::before { content:none; }
  #app-screen.is-mobile-studio #studio-account-trigger { width:64px !important; height:64px !important; border-radius:50% !important; margin:0 !important; background:#242327 !important; color:#fff !important; font-size:26px !important; }
  #app-screen.is-mobile-studio #studio-account-trigger::after { content:none; }
  #app-screen.is-mobile-studio #studio-account-menu:not(.hidden) { position:fixed !important; inset:210px auto 0 24px !important; z-index:260 !important; display:block !important; width:calc(100vw - 48px) !important; max-height:none !important; padding:30px 28px 34px !important; overflow:auto !important; border:0 !important; border-radius:30px 30px 0 0 !important; background:#1d1d1e !important; box-shadow:0 -22px 70px rgba(0,0,0,.52) !important; color:#f3f0f4 !important; animation:studio-account-sheet-in .22s cubic-bezier(.22,.9,.25,1); }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-head { gap:18px; padding:0 0 16px; border:0; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-head .studio-account-avatar--large { width:58px; height:58px; flex-basis:58px; border-radius:50%; font-size:21px; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-head strong { margin:0 0 8px; font-size:28px; font-weight:700; line-height:1.05; }
  #app-screen.is-mobile-studio #studio-account-menu #user-email:not(.hidden) { max-width:none; color:#aaa7ae !important; font-size:22px !important; line-height:1.15; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-group { padding:4px 0; border-top:1px solid #49484a; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-group--updates { border-top:0; padding-top:2px; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-group button,
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-group a,
  #app-screen.is-mobile-studio #studio-account-menu .studio-signout { min-height:48px !important; padding:0 4px !important; gap:18px !important; color:#f6f3f7 !important; font-size:18px !important; font-weight:500 !important; line-height:1 !important; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-group span,
  #app-screen.is-mobile-studio #studio-account-menu .studio-signout span { width:28px; flex-basis:28px; color:#f6f3f7; font-size:19px; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-account-group em { color:#f6f3f7; font-size:24px; line-height:1; }
  #app-screen.is-mobile-studio #studio-account-menu #credits-display,
  #app-screen.is-mobile-studio #studio-account-menu #sidebar-home-link,
  #app-screen.is-mobile-studio #studio-account-menu #admin-link { display:none !important; }
  #app-screen.is-mobile-studio #studio-account-menu .studio-signout { border-top:0 !important; }
  #app-screen.is-mobile-studio #studio-project-activity > header { display:none !important; min-height:86px; padding:16px 80px 8px; justify-content:center; }
  #app-screen.is-mobile-studio .studio-project-back { position:absolute; left:16px; top:16px; width:56px; height:56px; border:1px solid #4c4b50; border-radius:50%; background:#2b2b2d; }
  #app-screen.is-mobile-studio #studio-project-activity header > div { align-items:center; max-width:calc(100vw - 180px); min-height:56px; padding:0 24px; border:1px solid #4c4b50; border-radius:999px; background:#2b2b2d; justify-content:center; }
  #app-screen.is-mobile-studio #studio-project-activity header strong { max-width:100%; font-size:24px; font-weight:400; }
  #app-screen.is-mobile-studio #studio-project-activity header span { display:none; }
  #app-screen.is-mobile-studio #studio-activity-feed { padding:124px 64px 282px !important; font-size:30px; scrollbar-width:thin; scrollbar-color:#d7d4d8 transparent; }
  /* Position indicator for the message feed: a pale rounded thumb pinned to the
     panel's right edge (WebKit needs the explicit thumb; Firefox uses the pair above). */
  #app-screen.is-mobile-studio #studio-activity-feed::-webkit-scrollbar { width:4px; background:transparent; }
  #app-screen.is-mobile-studio #studio-activity-feed::-webkit-scrollbar-track { background:transparent; }
  #app-screen.is-mobile-studio #studio-activity-feed::-webkit-scrollbar-thumb { border-radius:999px; background:#d7d4d8; }
  #app-screen.is-mobile-studio .studio-activity-item,
  #app-screen.is-mobile-studio .studio-activity-assistant { width:100%; margin:0 0 28px; }
  #app-screen.is-mobile-studio #studio-activity-feed > .studio-activity-item:first-child { display:none !important; }
  #app-screen.is-mobile-studio .studio-change-card { display:none !important; }
  #app-screen.is-mobile-studio .studio-activity-assistant { margin:0 0 52px; }
  #app-screen.is-mobile-studio .studio-activity-assistant > p { margin:0; color:#dddadd; font-size:31px; font-weight:400; line-height:1.45; }
  #app-screen.is-mobile-studio .studio-activity-item:not(.studio-activity-assistant) { width:74%; margin:28px 24px 42px auto; padding:28px 32px; border:1px solid #4a494d; border-radius:34px; background:#252526; color:#e6e3e7; }
  #app-screen.is-mobile-studio .studio-activity-prompt { margin:0; color:#e5e2e6; font-size:31px; line-height:1.45; }
  #app-screen.is-mobile-studio .studio-activity-meta { justify-content:flex-end; gap:18px; margin-top:18px; color:#aaa7ae; font-size:24px; }
  #app-screen.is-mobile-studio .studio-response-actions { display:flex; gap:28px; margin:26px 0 0; }
  #app-screen.is-mobile-studio .studio-response-actions button { color:#ece9ee; font-size:24px; }
  /* The composer belongs to the chat page, so it is laid out on the chat page's
     stretch of the sheet — 14px in from both of its edges. */
  #app-screen.is-mobile-studio #bottom-panel:not(.hidden) { position:absolute !important; left:calc(var(--mobile-panel-w) + 14px) !important; right:auto !important; width:calc(var(--mobile-page-w) - 28px) !important; bottom:18px !important; z-index:210 !important; height:154px !important; min-height:154px !important; padding:10px !important; border:1px solid #3f3e43 !important; border-radius:28px !important; background:#202022 !important; box-shadow:0 18px 46px rgba(0,0,0,.5) !important; opacity:1 !important; transform:none !important; pointer-events:auto; transition:none !important; }
  /* Same story as #preview-area: with a preview loaded, structure.css docks the
     composer beside a split-view pane through an `:has()` selector that outranks
     the plain mobile one, which would leave it a page behind its own chat screen. */
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) { position:absolute !important; left:calc(var(--mobile-panel-w) + 14px) !important; right:auto !important; width:calc(var(--mobile-page-w) - 28px) !important; bottom:18px !important; }
  #app-screen.is-mobile-studio #bottom-panel > .flex.items-center.border-b,
  #app-screen.is-mobile-studio #tab-prompt { display:block !important; padding:0 !important; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt { display:block !important; padding:0 !important; }
  #app-screen.is-mobile-studio #tab-prompt > .flex-1.relative { height:132px; overflow:hidden; border:1px solid #3e3d42; border-radius:22px; background:#171719; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative { height:132px !important; max-width:none !important; border:1px solid #3e3d42 !important; border-radius:22px !important; background:#171719 !important; }
  #app-screen.is-mobile-studio #prompt { height:100% !important; min-height:0 !important; padding:24px 132px 52px 22px !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#f2eff3 !important; font-size:21px !important; line-height:1.35 !important; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #prompt { height:100% !important; min-height:0 !important; padding:24px 132px 52px 22px !important; border:0 !important; border-radius:0 !important; background:transparent !important; font-size:21px !important; line-height:1.35 !important; }

  @media (max-width: 480px) {
    #app-screen.is-mobile-studio { --mobile-panel-w:calc(var(--mobile-page-w) - 61px); }
    /* The menu button belongs to the chat screen peeking behind, so the bar runs
       the full viewport while the search + filter pills stay inside the panel. */
    .studio-mobile-bar { top:17px; gap:10px; }
    #studio-mobile-topbar { left:18px; width:calc(var(--mobile-panel-w) - 36px); grid-template-columns:42px max-content; }
    /* Equal 42px end columns centre the middle track, so the title pill lands on the
       viewport centre while hugging its own text. */
    /* Left and right insets must match exactly, or the centred middle track — and
       so the title pill — lands off the viewport centre. */
    #studio-mobile-chatbar { left:calc(var(--mobile-panel-w) + 18px); width:calc(var(--mobile-page-w) - 36px); grid-template-columns:42px minmax(0,1fr) 42px; }
    #studio-mobile-topbar::after { content:none; }
    #studio-mobile-topbar > button,
    #studio-mobile-chatbar button { height:42px; min-height:42px; font-size:17px; }
    .studio-mobile-icon { width:20px; height:20px; stroke-width:2; }
    #studio-mobile-topbar .studio-mobile-search,
    #studio-mobile-chatbar .studio-mobile-back,
    #studio-mobile-chatbar .studio-mobile-menu { width:42px; }
    #studio-mobile-chatbar .studio-mobile-menu { justify-self:end; }
    #studio-mobile-topbar .studio-mobile-title,
    #studio-mobile-chatbar .studio-mobile-title { justify-self:center; width:max-content; max-width:100%; padding:0 17px; font-size:17px; gap:8px; }
    #studio-mobile-topbar .studio-mobile-title { justify-self:start; }
    #studio-mobile-topbar .studio-mobile-title em,
    #studio-mobile-chatbar .studio-mobile-title em { font-size:15px; }
    #app-screen.is-mobile-studio #studio-mobile-project-list { padding:86px 22px 104px 15px; }
    #app-screen.is-mobile-studio #sidebar::before { height:80px; }
    #app-screen.is-mobile-studio #sidebar::after { height:95px; }
    /* The thumbnail spans every track, so slack has to go to dedicated 1fr spacers —
       otherwise the title and date tracks stretch and drift apart. */
    .studio-mobile-project-row { grid-template-columns:65px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr); column-gap:14px; min-height:103px; padding:0; }
    .studio-mobile-project-row .studio-mobile-project-thumb { grid-row:1/-1; align-self:center; }
    .studio-mobile-project-row strong { grid-row:2; }
    .studio-mobile-project-row small { grid-row:3; }
    .studio-mobile-project-row--new small { display:none; }
    /* Divider is inset to the copy column rather than running under the thumbnail. */
    .studio-mobile-project-row { border-bottom:0; background-image:linear-gradient(#39393b,#39393b); background-repeat:no-repeat; background-position:79px 100%; background-size:calc(100% - 79px) 1px; }
    .studio-mobile-project-row:last-child { background-image:none; }
    .studio-mobile-project-row strong { font-size:16px; max-width:100%; line-height:1.2; }
    .studio-mobile-project-row small { margin-top:4px; font-size:13px; }
    .studio-mobile-project-thumb { width:65px; height:87px; border-radius:5px; font-size:26px; }
    #app-screen.is-mobile-studio #studio-workspace-trigger { left:15px !important; right:82px !important; bottom:29px !important; width:auto !important; min-height:48px !important; height:48px !important; padding:5px 14px 5px 5px !important; gap:12px !important; }
    #app-screen.is-rail.is-mobile-studio #studio-workspace-trigger { justify-content:flex-start !important; transform:none !important; }
    #app-screen.is-rail.is-mobile-studio #studio-workspace-trigger .studio-workspace-name,
    #app-screen.is-rail.is-mobile-studio #studio-workspace-trigger .studio-workspace-chevron { display:block !important; }
    #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-avatar { width:38px; height:38px; font-size:15px; }
    #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-name::after { font-size:16px; }
    #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-chevron { font-size:14px; }
    #app-screen.is-mobile-studio #sidebar-footer { left:auto !important; right:24px !important; top:auto !important; bottom:29px !important; width:42px !important; min-height:42px !important; height:42px !important; }
    #app-screen.is-rail.is-mobile-studio #sidebar-footer { transform:none !important; }
    #app-screen.is-mobile-studio #studio-account-trigger { width:42px !important; height:42px !important; font-size:16px !important; }
    #app-screen.is-mobile-studio #studio-activity-feed { padding:106px 30px 212px !important; font-size:20px; }
    #app-screen.is-mobile-studio .studio-activity-assistant { margin:0 0 34px; }
    #app-screen.is-mobile-studio .studio-activity-assistant > p { font-size:21px; line-height:1.42; }
    #app-screen.is-mobile-studio .studio-activity-item:not(.studio-activity-assistant) { width:78%; margin:22px 14px 34px auto; padding:18px 20px; border-radius:24px; }
    #app-screen.is-mobile-studio .studio-activity-prompt { font-size:20px; line-height:1.4; }
    #app-screen.is-mobile-studio .studio-activity-meta { gap:12px; margin-top:12px; font-size:14px; }
    #app-screen.is-mobile-studio .studio-response-actions { gap:20px; margin:18px 0 0; }
    #app-screen.is-mobile-studio .studio-response-actions button { font-size:18px; }
    #app-screen.is-mobile-studio #bottom-panel:not(.hidden),
    #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) { left:calc(var(--mobile-panel-w) + 13px) !important; right:auto !important; bottom:20px !important; width:calc(var(--mobile-page-w) - 26px) !important; height:auto !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:20px !important; background:transparent !important; box-shadow:none !important; }
    #app-screen.is-mobile-studio #tab-prompt > .flex-1.relative,
    #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative { height:auto !important; border-radius:20px !important; }
    /* One line tall by default, growing upward as text is typed: the height comes
       from --studio-prompt-h, which the shell recomputes from scrollHeight. The
       bottom padding reserves the row the action buttons sit in. */
    #app-screen.is-mobile-studio #prompt,
    #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #prompt { min-height:0 !important; max-height:180px !important; overflow-y:auto !important; resize:none !important; }
    #app-screen.is-mobile-studio #studio-account-menu:not(.hidden) { inset:210px auto 0 24px !important; width:calc(100vw - 48px) !important; padding:28px 28px 34px !important; border-radius:30px 30px 0 0 !important; }
    #app-screen.is-mobile-studio #studio-account-menu .studio-account-head .studio-account-avatar--large { width:54px; height:54px; flex-basis:54px; }
    #app-screen.is-mobile-studio #studio-account-menu .studio-account-head strong { font-size:27px; }
    #app-screen.is-mobile-studio #studio-account-menu #user-email:not(.hidden) { font-size:21px !important; }
    #app-screen.is-mobile-studio #studio-account-menu .studio-account-group button,
    #app-screen.is-mobile-studio #studio-account-menu .studio-account-group a,
    #app-screen.is-mobile-studio #studio-account-menu .studio-signout { min-height:48px !important; font-size:18px !important; }
  }
  #app-screen.is-mobile-studio #prompt::placeholder { color:#8e8b94 !important; }
  #app-screen.is-mobile-studio .studio-prompt-add { display:grid !important; left:16px !important; bottom:14px !important; width:48px !important; height:48px !important; font-size:28px !important; }
  #app-screen.is-mobile-studio .studio-prompt-more { position:absolute !important; left:72px !important; bottom:14px !important; z-index:2; display:grid !important; place-items:center !important; width:48px !important; height:48px !important; border:1px solid #4c4b50 !important; border-radius:50% !important; background:#303032 !important; color:#f2eff3 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important; font:700 22px/1 var(--studio-font) !important; letter-spacing:2px !important; }
  #app-screen.is-mobile-studio #prompt-record-btn { right:16px !important; bottom:14px !important; width:48px !important; height:48px !important; }
  #app-screen.is-mobile-studio #prompt-actions { position:absolute !important; right:72px !important; bottom:14px !important; width:auto !important; min-width:0 !important; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions.flex { position:absolute !important; inset:auto 72px 14px auto !important; width:auto !important; min-width:0 !important; height:48px !important; }
  #app-screen.is-mobile-studio #prompt-actions .build-power-row { display:flex !important; align-items:center !important; gap:0 !important; }
  /* With the AI power chooser gone, the build button itself is the phone's send
     control, sitting where the old mode pill did. */
  #app-screen.is-mobile-studio .build-power-row #build-btn { display:block !important; width:48px !important; min-width:48px !important; height:48px !important; min-height:48px !important; padding:0 !important; overflow:hidden; border:0 !important; border-radius:50% !important; background:#f1eef2 !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161618' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6'/%3E%3Cpath d='M6 12l6-6 6 6'/%3E%3C/svg%3E") !important; background-position:center !important; background-repeat:no-repeat !important; background-size:22px 22px !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; transform:none !important; }
  #app-screen.is-mobile-studio:has(#prompt:placeholder-shown) .build-power-row #build-btn { background-color:#6f6f75 !important; }
  
  
  
  
  #app-screen.is-mobile-studio #preview-container:not(.hidden) { position:absolute !important; inset:0 !important; width:100% !important; max-width:none !important; height:100% !important; min-height:0 !important; border:0 !important; border-radius:0 !important; background:#fff !important; box-shadow:none !important; }
  #app-screen.is-mobile-studio #preview-empty:not(.hidden) { position:absolute !important; inset:0 !important; border-radius:0 !important; }
  /* Preview controls form a header on the preview page's stretch of the sheet,
     so they travel with that page during horizontal navigation. */
  #studio-mobile-preview-dock { position:absolute; left:calc(var(--mobile-panel-w) + var(--mobile-page-w)); right:auto; top:0; bottom:auto; width:var(--mobile-page-w); z-index:220; display:none; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:10px; height:calc(64px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 13px 0; border:0; border-bottom:1px solid #343338; background:#1c1c1d; }
  #app-screen.is-mobile-studio #studio-mobile-preview-dock { display:grid; }
  .studio-dock-icon { width:17px; height:17px; fill:none; stroke:#e2e0e3; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  #studio-mobile-preview-dock button { display:grid; place-items:center; border:1px solid #4c4b50; border-radius:999px; background:#303034; color:#f2eff3; font:400 15px/1 var(--studio-font); }
  .studio-dock-back { grid-auto-flow:column; gap:6px; height:37px; padding:0 15px 0 12px; }
  .studio-dock-round { width:36px; height:36px; padding:0; }
  .studio-dock-preview-back { justify-self:start;width:48px;height:48px; }
  .studio-dock-preview-back .studio-mobile-icon { width:22px;height:22px; }
  .studio-dock-menu .studio-mobile-icon { width:19px;height:19px; }
  .studio-dock-actions { position:relative;display:grid;justify-self:center;min-width:0; }
  #studio-mobile-preview-dock .studio-dock-actions-trigger { display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;height:48px;padding:0 18px;font-weight:600; }
  .studio-dock-actions-trigger span { overflow:hidden;color:#f2eff3 !important;text-overflow:ellipsis;white-space:nowrap; }
  .studio-dock-actions-trigger em { color:#aaa7ae;font-style:normal;font-size:14px; }
  #studio-mobile-preview-menu { position:absolute; left:50%; right:auto; top:calc(100% + 12px); bottom:auto; z-index:2; display:grid; width:180px; padding:6px 0; border:1px solid #3a393e; border-radius:12px; background:#262628; box-shadow:0 18px 46px rgba(0,0,0,.5); transform:translateX(-50%); }
  #studio-mobile-preview-menu.hidden { display:none; }
  #studio-mobile-preview-menu button { display:grid; grid-template-columns:16px minmax(0,1fr) auto auto; align-items:center; gap:10px; height:49px; padding:0 15px; border:0 !important; border-radius:0 !important; background:transparent !important; font:400 14px/1 var(--studio-font) !important; text-align:left; }
  /* comic.css sets a global `p, span, li { color: var(--ink) }` that outranks
     inheritance from the button, so the labels need their colour stated. */
  #studio-mobile-preview-menu button span,
  .studio-dock-back span { color:#f2eff3 !important; justify-self:start; white-space:nowrap; }
  #studio-mobile-preview-menu button:active { background:#303032 !important; }
  #studio-mobile-preview-menu .studio-dock-icon { width:16px; height:16px; }
}

/* Editor toolbar states ---------------------------------------------------
   Split view owns the compact overflow menu. The full workspace owns the
   expanded Files/Code controls and labelled actions. Keep these selectors
   separate so changing one sidebar state cannot overwrite the other. */
.studio-split-preview-wrap { display:none; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-preview-wrap { position:relative; display:block; }

#studio-project-workspace:not(.hidden) .studio-workspace-header { display:grid; grid-template-columns:auto auto auto 1fr; align-items:center; min-height:64px; height:64px; padding:0 20px; border-bottom:0; background:#1b1b1c; }
#studio-project-workspace:not(.hidden) .studio-workspace-project { grid-column:1; display:flex; min-width:280px; }
#studio-project-workspace:not(.hidden) .studio-workspace-quick { grid-column:2; gap:8px; margin:0 12px 0 0; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav { position:relative; isolation:isolate; grid-column:3; justify-self:start; width:auto; height:38px; margin:0; padding:3px; border:1px solid #3a3a40; border-radius:999px; background:#202022; box-shadow:none; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav::before { content:''; position:absolute; top:2px; left:var(--studio-liquid-left,3px); z-index:0; width:var(--studio-liquid-width,92px); height:calc(100% - 4px); border:1px solid rgba(161,249,255,.72); border-radius:999px; background:linear-gradient(135deg,rgba(218,253,255,.34) 0%,rgba(74,224,240,.26) 34%,rgba(0,139,169,.2) 68%,rgba(255,255,255,.12) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,30,40,.42),inset 8px 0 14px rgba(255,255,255,.08),0 6px 20px rgba(0,216,240,.3); backdrop-filter:blur(18px) saturate(185%); -webkit-backdrop-filter:blur(18px) saturate(185%); transition:left .56s cubic-bezier(.22,.9,.24,1),width .56s cubic-bezier(.22,.9,.24,1),border-radius .28s ease,box-shadow .2s ease; pointer-events:none; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav.is-liquid-moving::before { animation:studio-liquid-pill-bounce .56s ease-in-out; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav.is-liquid-instant::before { transition:none; animation:none; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav.is-liquid-dragging,
#studio-project-workspace:not(.hidden) .studio-workspace-header nav.is-liquid-dragging button { cursor:grabbing; user-select:none; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav.is-liquid-dragging::before { transition:none; border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(0,30,40,.4),0 8px 25px rgba(0,224,248,.4); }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button { width:34px; min-width:34px; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button.is-active { width:auto; height:30px; padding:0 14px; border-color:#4c7aff; background:#244a9f; color:#91b4ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px rgba(25,72,190,.35); }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button.is-active { cursor:grab; touch-action:none; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button.is-active span { display:inline; font-size:14px; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav .studio-workspace-more { display:grid; place-items:center; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav .studio-workspace-more svg { width:17px; height:17px; }
#studio-project-workspace:not(.hidden) .studio-workspace-publish { grid-column:4; justify-self:end; gap:8px; }
#studio-project-workspace:not(.hidden) .studio-workspace-publish button { display:flex; width:auto; min-width:0; min-height:38px; height:38px; padding:0 16px; border-radius:999px; font-size:13px; }
#studio-project-workspace:not(.hidden) .studio-workspace-publish .studio-workspace-share { border-color:#4a4a4f; background:#29292b; color:#fff; }
#studio-project-workspace:not(.hidden) .studio-workspace-publish .studio-workspace-buy { border-color:#9a63ff !important; background:linear-gradient(180deg,#a15aff,#7d38ed) !important; color:#fff !important; }
#studio-project-workspace:not(.hidden) .studio-workspace-publish .studio-workspace-buy svg { width:17px; height:17px; fill:#fff; }
#studio-project-workspace:not(.hidden) .studio-workspace-publish .studio-workspace-publish-btn { border-color:#4c86ff; background:linear-gradient(180deg,#3678f6,#205ce4); color:#fff; }
#studio-project-workspace:not(.hidden) .studio-workspace-panel[data-workspace-panel='preview'] { padding:0 16px 16px; background:#1b1b1c; }
#studio-project-workspace:not(.hidden) .studio-workspace-previewbar { top:-51px; width:430px; height:40px; grid-template-columns:30px 1fr 22px; padding:0 14px; border-color:#414145; background:#29292b; }
#studio-project-workspace:not(.hidden) .studio-workspace-previewbar .studio-preview-device { left:-52px; width:30px; height:30px; }
#studio-project-workspace:not(.hidden) .studio-workspace-previewbar a { right:-48px; }
#studio-project-workspace:not(.hidden) .studio-workspace-previewbar strong { font-size:15px; font-weight:500; }

@media (max-width:1100px) {
  #studio-project-workspace:not(.hidden) .studio-workspace-project { min-width:190px; }
  #studio-project-workspace:not(.hidden) .studio-workspace-project small { display:none; }
  #studio-project-workspace:not(.hidden) .studio-workspace-publish button { padding:0 11px; }
}

/* Open-sidebar reference toolbar. The legacy URL controls remain in the DOM as
   action sources, but are not part of the visible editor chrome. */
.studio-split-toolbar { display:none; }
#app-screen:has(#preview-container:not(.hidden)) #url-bar:not(.hidden) { display:block !important; padding:0 16px !important; }
#app-screen:has(#preview-container:not(.hidden)) #url-bar > .domain-controls,
#app-screen:has(#preview-container:not(.hidden)) #url-bar > .preview-toggles { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity #studio-project-history,
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity #studio-project-panel { display:none !important; }
body #app-screen:has(#preview-container:not(.hidden)) #url-bar:not(.hidden) { height:48px !important; min-height:48px !important; }
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity > header { min-height:48px !important; height:48px !important; padding:5px 16px !important; }
body #app-screen:has(#preview-container:not(.hidden)) #preview-area { top:48px !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-toolbar { display:grid; grid-template-columns:minmax(215px,auto) minmax(230px,1fr) auto; align-items:center; gap:14px; width:100%; height:48px; }
.studio-split-toolbar button { border:0; font-family:var(--studio-ui-font); cursor:pointer; }
.studio-split-toolbar svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.studio-split-primary { display:flex; align-items:center; gap:8px; min-width:0; }
.studio-split-primary > button { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0; border-radius:9px; background:transparent; color:#b9b6bd; }
.studio-split-primary > button:hover { background:#2d2d31; color:#fff; }
.studio-split-primary #studio-split-preview { position:relative; isolation:isolate; display:flex; flex:0 0 auto; align-items:center; gap:8px; width:auto; height:36px; padding:3px 13px 3px 3px; overflow:hidden; border:1px solid rgba(91,239,255,.56); border-radius:999px; background:linear-gradient(135deg,rgba(18,211,232,.32),rgba(0,120,150,.18) 52%,rgba(255,255,255,.08)); color:#d9fbff; font-size:14px; font-weight:650; box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,15,25,.34),0 5px 18px rgba(0,210,235,.2); backdrop-filter:blur(14px) saturate(155%); -webkit-backdrop-filter:blur(14px) saturate(155%); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.studio-split-primary #studio-split-preview::after { content:''; position:absolute; z-index:-1; inset:1px 1px auto; height:48%; border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.24),transparent); pointer-events:none; }
.studio-split-primary #studio-split-preview svg { width:18px; height:18px; padding:0; border:0; border-radius:0; background:transparent; color:#effeff; box-shadow:none; }
.studio-split-primary #studio-split-preview:hover { border-color:rgba(151,248,255,.86); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 7px 22px rgba(0,225,255,.3); transform:translateY(-1px); }
.studio-split-primary .studio-split-preview-wrap { display:block; }
.studio-split-page { display:grid; grid-template-columns:30px minmax(150px,360px) 30px; align-items:center; justify-content:center; gap:10px; min-width:0; color:#aaa7ae; }
.studio-split-device { justify-self:center; border:1px solid transparent !important; }
.studio-split-device:is(:hover,:focus-visible) { border-color:var(--studio-line-silver) !important; outline:0; }
.studio-split-page > .studio-split-page-control { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; height:40px; min-width:0; padding:0 5px 0 2px; border:1px solid #414145; border-radius:999px; background:#29292b; }
.studio-split-page button { display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; background:transparent; color:#aaa7ae; }
.studio-split-page button:hover { background:#37373b; color:#fff; }
.studio-split-page strong { overflow:hidden; color:#f2eff3; font-size:14px; font-weight:500; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.studio-split-page .studio-split-page-trigger { display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; width:100%; height:32px; border-radius:999px; }
.studio-split-page .studio-split-page-trigger:hover,.studio-split-page .studio-split-page-trigger[aria-expanded="true"] { background:rgba(255,255,255,.055); }
.studio-split-page .studio-split-page-chevron { width:16px; height:16px; color:#88858d; transition:transform .18s ease; }
.studio-split-page .studio-split-page-trigger[aria-expanded="true"] .studio-split-page-chevron { transform:rotate(180deg); }
.studio-split-page-menu { position:absolute; z-index:80; top:calc(100% + 8px); right:0; left:36px; display:grid; gap:3px; padding:6px; border:1px solid var(--studio-line-strong,#47454d); border-radius:12px; background:var(--studio-surface,#1b191f); box-shadow:0 16px 40px rgba(0,0,0,.46); }
.studio-split-page-menu.hidden { display:none; }
.studio-split-page .studio-split-page-menu button { display:flex; align-items:center; justify-content:space-between; width:100%; height:34px; padding:0 10px; border-radius:8px; color:var(--studio-silver,#b5b2ba); font:500 13px/1 var(--studio-ui-font); text-align:left; }
.studio-split-page .studio-split-page-menu button:hover,.studio-split-page .studio-split-page-menu button[aria-current="page"] { background:var(--studio-surface-2,#242128); color:var(--studio-cream,#fbf1e0); }
.studio-split-page .studio-split-page-menu button[aria-current="page"]::after { content:'✓'; color:var(--studio-cyan,#17c9ff); }
.studio-split-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.studio-split-actions button { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0; border:1px solid #49494e; border-radius:50%; background:#29292b; color:#f5f2f5; }
.studio-split-actions button:hover { filter:brightness(1.12); }
.studio-split-actions #studio-split-buy { border-color:#9a63ff; background:linear-gradient(180deg,#a15aff,#7d38ed); }
.studio-split-actions #studio-split-buy svg { width:22px; height:22px; fill:#fff; stroke:none; }
.studio-split-actions #studio-split-publish { border-color:#4c86ff; background:linear-gradient(180deg,#3678f6,#205ce4); }

@media (max-width:1250px) {
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-toolbar { grid-template-columns:auto 1fr auto; gap:7px; }
  .studio-split-primary { gap:3px; }
  .studio-split-page { grid-template-columns:24px minmax(120px,1fr) 24px; gap:3px; }
  .studio-split-actions { gap:4px; }
  .studio-split-actions button { width:34px; height:34px; flex-basis:34px; }
}

/* Expanded workspace proportions from the reference: a compact fixed project
   column, complete view switcher, narrow centred page pill, and right actions. */
#studio-project-workspace:not(.hidden) .studio-workspace-header {
  grid-template-columns:170px auto auto minmax(0,1fr) !important;
  column-gap:0 !important;
  min-height:48px !important;
  height:48px !important;
  padding:0 14px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-project {
  width:170px !important;
  min-width:170px !important;
  overflow:hidden;
}
#studio-project-workspace:not(.hidden) .studio-workspace-project > span { min-width:0; }
#studio-project-workspace:not(.hidden) .studio-workspace-project strong { max-width:118px; }
#studio-project-workspace:not(.hidden) .studio-workspace-quick {
  margin:0 8px 0 0 !important;
  gap:4px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-quick button {
  width:28px !important;
  height:28px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-header nav {
  height:36px !important;
  margin:0 !important;
  gap:1px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button {
  width:32px !important;
  min-width:32px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button.is-active {
  width:auto !important;
  min-width:0 !important;
  height:32px !important;
  padding:2px 12px 2px 2px !important;
  gap:8px;
  z-index:1;
  border-color:transparent;
  background:transparent;
  color:#d9fbff;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button.is-active::after { display:none; }
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button { position:relative; z-index:1; }

@keyframes studio-liquid-pill-bounce {
  0%,100% { transform:scaleX(1) scaleY(1); filter:saturate(1); }
  38% { transform:scaleX(1.13) scaleY(.9); filter:saturate(1.35) brightness(1.1); }
  72% { transform:scaleX(.96) scaleY(1.04); filter:saturate(1.15); }
}

#studio-project-workspace:not(.hidden) .studio-workspace-publish {
  grid-column:4 !important;
  gap:6px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button {
  height:34px !important;
  min-height:34px !important;
  padding:0 13px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-panel[data-workspace-panel='preview'] {
  padding:0 9px 9px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-previewbar {
  top:-43px !important;
  width:260px !important;
  height:36px !important;
  grid-template-columns:30px 1fr 20px !important;
  padding:0 10px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-previewbar .studio-preview-device {
  left:-46px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-previewbar a {
  right:-42px !important;
}

@media (max-width:1050px) {
  #studio-project-workspace:not(.hidden) .studio-workspace-header {
    grid-template-columns:138px auto auto minmax(0,1fr) !important;
  }
  #studio-project-workspace:not(.hidden) .studio-workspace-project {
    width:138px !important;
    min-width:138px !important;
  }
  #studio-project-workspace:not(.hidden) .studio-workspace-project strong { max-width:88px; }
  #studio-project-workspace:not(.hidden) .studio-workspace-publish button { padding:0 10px !important; }
}

@keyframes studio-mode-sheet-in {
  from { transform:translateY(24px); opacity:.82; }
  to { transform:translateY(0); opacity:1; }
}

/* Dashboard information architecture */
.studio-primary-nav { display:flex; flex-direction:column; gap:0; padding:0 10px 14px; border:0 !important; }
/* Camera Plain Variable, 400, 14px/20px, oklch(0.9095 0.002 107). */
.studio-nav-item { display:flex; align-items:center; gap:11px; width:100%; min-height:33px; padding:0 11px; border:0; border-radius:9px; background:transparent; color:#c9c6cf; font:400 14px/18px var(--studio-font); text-align:left; cursor:pointer; }
.studio-nav-item svg { width:17px; height:17px; flex:0 0 17px; color:#8b8891; }
.studio-nav-item.is-active svg,.studio-nav-item:hover svg { color:#e6e3e8; }
.studio-nav-item:hover { background:rgba(255,255,255,.045); color:#fff; }
.studio-nav-item.is-active { background:rgba(255,255,255,.075); color:#fff; }

/* Two-group nav: a tight primary cluster, a spacer, then the secondary cluster. */
.studio-nav-group { display:flex; flex-direction:column; gap:0; }
.studio-nav-group--secondary { margin-top:0; }
.studio-nav-item.is-placeholder { cursor:default; }
.studio-nav-item.is-placeholder:hover { background:transparent; color:#c9c6cf; }
.studio-nav-item.is-placeholder:hover svg { color:#8f8c94; }
.studio-mobile-bar { display:none; }

/* Recents: section label plus the existing #session-list rows, which sessions.js
   already builds with working click handlers. */
.studio-rail-section { padding:20px 22px 6px; color:#8b8891; font:400 13px/18px var(--studio-font); letter-spacing:0; }
.studio-primary-nav .studio-rail-section { padding-left:12px; padding-right:12px; }
#session-list .session-row-btn { display:flex !important; align-items:center !important; height:33px !important; min-height:33px !important; padding:0 12px !important; font:400 14px/20px var(--studio-font) !important; }
#session-list [data-session-id] { margin:0 !important; }
#session-list { gap:0 !important; }
#session-list [data-session-id]:nth-child(n+7) { display:none !important; }
/* No heading when there is nothing recent, and none in the collapsed rail. */
#sidebar:not(:has(#session-list [data-session-id])) .studio-rail-section--recents { display:none; }
#app-screen.is-rail .studio-rail-section { display:none !important; }
#preview-area:has(#preview-empty:not(.hidden)) { top:0 !important; bottom:0 !important; padding:0 !important; display:block !important; overflow-y:auto !important; }
#preview-area:has(#preview-empty:not(.hidden)) + #voice-studio-hud + #panel-resizer { display:none !important; }
#app-screen:has(#preview-empty:not(.hidden)) #url-bar,
#app-screen:has(#preview-empty:not(.hidden)) .studio-canvas-heading,
#app-screen:has(#preview-empty:not(.hidden)) #bottom-panel,
#app-screen:has(#preview-empty:not(.hidden)) #panel-resizer { display:none !important; }
#preview-empty:not(.hidden) { position:fixed !important; isolation:isolate; inset: var(--studio-gap) var(--studio-gap) 0 var(--studio-rail) !important; display:block !important; width:auto !important; max-width:none !important; min-height:0 !important; margin:0 !important; padding:42px 44px 48px !important; border:0 !important; border-top:1px solid rgba(255,255,255,.14) !important; border-left:1px solid rgba(255,255,255,.14) !important; border-right:1px solid rgba(255,255,255,.14) !important; border-radius:18px 18px 0 0 !important; box-shadow:none !important; background:#17151b !important; color:#fff !important; overflow:auto !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transition:none !important; }
#app-screen:not(.is-rail) #preview-empty:not(.hidden) { border-left:0 !important; }
#app-screen:not(.is-rail) .studio-atmosphere { border-left:0; }
/* Dither film. The ray fan is a 6.8%-alpha gradient over near-black, which 8-bit
   sRGB can only resolve into a handful of steps — that is what reads as faint
   horizontal TV lines. This grain sits directly above it (same z-index, later in
   tree order) and pushes each pixel across the quantisation boundary. */
.studio-grain {
  position:fixed;
  inset:var(--studio-gap) var(--studio-gap) 0 var(--studio-rail);
  z-index:-1;
  pointer-events:none;
  border-radius:18px 18px 0 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") repeat 0 0 / 160px 160px;
  transition:none;
}

/* The ray fan is held still. Rotating it re-blurred a 2933x2223 layer on every
   frame for a 3-degree-per-second drift nobody could follow; at rest it looks
   the same and costs well over half as much. */
#preview-empty:not(.hidden)::before {
  content:'';
  position:absolute;
  inset:-75%;
  z-index:-1;
  pointer-events:none;
  background:repeating-conic-gradient(from 18deg at 50% 46%,rgba(248,239,206,.068) 0deg 7.5deg,transparent 7.5deg 15deg);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 100%);
  filter:blur(6px);
}
#preview-empty:not(.hidden)::after {
  content:'';
  position:absolute;
  inset:-12%;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 26rem);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 100%);
  filter:blur(18px);
}
/* The greeting and the composer own the first screen, centred; the project
   shelf starts below it and only peeks in at the bottom edge. */
.studio-dashboard { position:relative; z-index:1; width:min(1120px,100%); min-height:100%; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
/* The greeting and composer hold the first screen on their own, so the project
   shelf starts below the fold and only its top edge shows. */
.studio-dashboard-hero { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:max(320px,calc(100vh - 240px)); }
.studio-dashboard h1 { margin:0 0 24px; color:#fff !important; font-size:clamp(30px,3vw,46px); font-weight:700; letter-spacing:-.045em !important; text-transform:none !important; }
.studio-dashboard .prompt { position:relative; width:100%; max-width:720px; margin-top:14px; padding:18px 18px 14px; border:1px solid rgba(251,241,224,.15); border-radius:26px; background:#1B1920; box-shadow:0 1px 0 rgba(251,241,224,.05) inset,-4px 0 0 rgba(23,201,255,.5),4px 0 0 rgba(255,49,95,.52),-5px 0 12px rgba(23,201,255,.3),5px 0 12px rgba(255,49,95,.32),0 24px 70px rgba(0,0,0,.55); text-align:left; transition:box-shadow .2s ease,border-color .2s ease; }
/* The spot glows belong to the composer, not the panel: measured from its own
   box they keep their place whatever height the hero takes. */
.studio-dashboard .prompt::before { content:''; position:absolute; z-index:-1; inset:-340px -660px -200px; pointer-events:none; background:radial-gradient(circle at calc(50% + 505px) calc(50% + 115px),rgba(255,49,95,.28),transparent 14rem),radial-gradient(circle at calc(50% - 505px) calc(50% + 115px),rgba(23,201,255,.24),transparent 16rem); filter:blur(18px); }
.studio-dashboard .prompt:focus-within { border-color:rgba(251,241,224,.3); }
.studio-dashboard .prompt #studio-idea-prompt { width:100%; min-height:82px; border:0 !important; border-radius:0 !important; outline:0; resize:none; background:transparent !important; background-color:transparent !important; box-shadow:none !important; color:#FBF1E0 !important; font:500 16.5px/1.5 'Camera Plain Variable',system-ui,sans-serif !important; appearance:none; }
.studio-dashboard .prompt #studio-idea-prompt::placeholder { color:rgba(251,241,224,.32) !important; opacity:1; }
.studio-dashboard .prompt-bar { display:flex; align-items:center; gap:8px; margin-top:12px; }
.studio-dashboard .icon-btn { display:flex !important; align-items:center !important; justify-content:center !important; width:36px !important; height:36px !important; padding:0 !important; border:1px solid rgba(251,241,224,.15) !important; border-radius:999px !important; background:transparent !important; box-shadow:none !important; color:#FBF1E0 !important; cursor:pointer; opacity:.65; transition:opacity .15s,background .15s; }
.studio-dashboard .icon-btn:hover { background:rgba(251,241,224,.06); opacity:1; }
.studio-dashboard .icon-btn svg { width:16px; height:16px; }
.studio-dashboard #welcome-new-btn.mic-btn { display:inline-flex !important; align-items:center !important; gap:7px !important; width:auto !important; height:36px !important; padding:0 14px !important; border:1px solid rgba(255,49,95,.4) !important; border-radius:999px !important; background:rgba(255,49,95,.12) !important; box-shadow:none !important; color:#FF315F !important; font:600 13.5px 'Camera Plain Variable',system-ui,sans-serif !important; text-transform:none !important; cursor:pointer; }
.studio-dashboard #welcome-new-btn.mic-btn:hover { background:rgba(255,49,95,.2) !important; }
.studio-dashboard .mic-btn svg { width:14px; height:14px; }
.studio-dashboard .prompt-bar .grow { flex:1; }
.studio-dashboard #welcome-typing-btn.send-btn { display:flex !important; align-items:center !important; justify-content:center !important; width:40px !important; height:40px !important; min-height:40px !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:#FF315F !important; color:#fff !important; cursor:pointer; box-shadow:-3px 0 0 rgba(23,201,255,.62),3px 0 0 rgba(255,49,95,.38),0 8px 22px rgba(255,49,95,.28) !important; transition:transform .15s ease,box-shadow .15s ease; }
.studio-dashboard #welcome-typing-btn.send-btn:hover { transform:translateY(-1px); box-shadow:-3px 0 0 rgba(23,201,255,.72),3px 0 0 rgba(255,49,95,.48),0 6px 20px rgba(255,49,95,.45) !important; }
.studio-dashboard .send-btn svg { width:18px; height:18px; }
.studio-dashboard-tools { display:flex; align-items:center; gap:5px; margin:32px 0 16px; padding:5px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(23,23,26,.6); }
.studio-dashboard-tools button { min-height:34px; padding:0 15px; border:0; border-radius:999px; background:transparent; color:#aaa7ae; font:600 12px 'Camera Plain Variable',sans-serif; cursor:pointer; }
.studio-dashboard-tools button:hover,.studio-dashboard-tools button.is-active { background:#39393e; color:#fff; }
.studio-project-shelf { width:100%; min-height:290px; padding:24px; border:1px solid rgba(255,255,255,.11); border-radius:25px; background:#1b1b1c; box-shadow:0 28px 75px rgba(0,0,0,.25); }
.studio-project-shelf-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.studio-project-shelf-head div { display:flex; flex-direction:column; gap:3px; }
.studio-project-shelf-head > div:first-child { align-items:flex-start; text-align:left; }
.studio-project-shelf-head strong { color:#fff; font-size:17px; }
.studio-project-shelf-head span { color:#77747c; font-size:11px; }
.studio-project-shelf-head button { border:0; background:transparent; color:#eeeaf0; font:600 12px 'Camera Plain Variable',sans-serif; cursor:pointer; }
.studio-project-actions { display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; }
.studio-project-actions #delete-sessions-btn.studio-project-delete { display:inline-flex !important; align-items:center; min-height:34px !important; padding:0 13px !important; border:1px solid var(--cx-line) !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; color:var(--cx-muted) !important; font:600 12px/16px var(--studio-font) !important; }
.studio-project-actions #delete-sessions-btn.studio-project-delete:hover { background:rgba(255,49,95,.1) !important; border-color:rgba(255,49,95,.4) !important; color:#ff8dab !important; }
.studio-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.studio-project-card { content-visibility:auto; contain-intrinsic-size:auto 300px; position:relative; min-width:0; overflow:hidden; border:1px solid #39393d; border-radius:15px; background:#252527; cursor:pointer; text-align:left; transition:transform .16s ease,border-color .16s ease; }
.studio-project-card:hover { transform:translateY(-3px); border-color:#77727e; }
.studio-project-card:focus-visible { outline:2px solid rgba(23,201,255,.7); outline-offset:3px; }
.studio-project-card.is-delete-selected { border-color:#ff315f; box-shadow:0 0 0 2px rgba(255,49,95,.24); }
.studio-project-favourite { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(10,10,12,.66); color:#f8f4ef; cursor:pointer; backdrop-filter:blur(10px); transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; }
.studio-project-rename { position:absolute; top:10px; right:50px; min-height:32px; padding:0 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(10,10,12,.66); color:#f8f4ef; font:700 10px/14px var(--studio-font); cursor:pointer; opacity:0; backdrop-filter:blur(10px); transition:opacity .12s ease,background .15s ease,border-color .15s ease; }
.studio-project-card:hover .studio-project-rename,.studio-project-card:focus-within .studio-project-rename { opacity:1; }
.studio-project-rename:hover { border-color:rgba(255,255,255,.36); background:rgba(10,10,12,.84); }
.studio-project-favourite:hover { transform:scale(1.05); border-color:rgba(255,255,255,.38); background:rgba(10,10,12,.82); }
.studio-project-favourite.is-active { border-color:rgba(255,211,106,.62); background:rgba(255,211,106,.16); color:#ffd36a; }
.studio-project-favourite.is-active svg { fill:currentColor; }
.studio-project-favourite svg { width:16px; height:16px; pointer-events:none; }
.studio-project-thumb { contain:paint; position:relative; display:grid; place-items:center; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(145deg,#f7f3eb,#d9d5ce); color:#2b292d; font-size:11px; }
.studio-project-shot { width:100%; height:100%; object-fit:cover; object-position:top center; background:#fff; }
.studio-project-thumb iframe { position:absolute; top:0; left:0; width:400%; height:400%; border:0; background:#fff; pointer-events:none; transform:scale(.25); transform-origin:0 0; }
.studio-project-copy { display:flex; flex-direction:column; gap:3px; padding:12px 13px 14px; }
.studio-project-copy strong { overflow:hidden; color:#f3f0f4; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.studio-project-copy span { color:#85818a; font-size:10px; }
#studio-project-empty { margin:60px 0; color:#77747c; font-size:13px; text-align:center; }
.studio-project-grid:not(:empty) + #studio-project-empty { display:none; }
.studio-project-search { width:100%; margin:0 0 18px; padding:12px 14px; border:1px solid #46464c; border-radius:10px; outline:0; background:#17171a; color:#fff; font:14px 'Camera Plain Variable',sans-serif; }

.studio-dashboard.is-templates-view .studio-project-grid,
.studio-dashboard.is-templates-view #studio-project-empty,
.studio-dashboard.is-uploads-view .studio-project-grid,
.studio-dashboard.is-uploads-view #studio-project-empty { display:none !important; }
.studio-dashboard.is-templates-view .studio-project-actions #delete-sessions-btn,
.studio-dashboard.is-uploads-view .studio-project-actions #delete-sessions-btn { display:none !important; }
.studio-dashboard-upload-grid.hidden { display:none !important; }
.studio-dashboard.is-uploads-view .studio-dashboard-upload-grid { display:grid !important; }
/* The upload tree belongs to the uploads view alone; it had been leaking on to
   the dashboard shelf under the project grid. */
.studio-dashboard:not(.is-uploads-view) .studio-dashboard-upload-grid { display:none !important; }

/* The projects window hosts the dashboard's own grid, so it needs the view
   switching the dashboard does with .is-uploads-view restated for its own host. */
#studio-projects .studio-dashboard-upload-grid { display:none !important; }
#studio-projects.is-uploads .studio-project-grid,
#studio-projects.is-uploads #studio-project-empty { display:none !important; }
#studio-projects.is-uploads .studio-dashboard-upload-grid { display:grid !important; max-height:none; }
#studio-projects #studio-project-empty { margin:40px 0; text-align:left; }
/* Connectors */
.studio-dashboard.is-connectors-view .studio-project-grid,
.studio-dashboard.is-connectors-view #studio-project-empty { display:none !important; }
.studio-dashboard.is-connectors-view .studio-project-actions #delete-sessions-btn { display:none !important; }
/* Connectors is an overlay: it lays over the dashboard instead of scrolling it away. */
/* ── Connectors window ───────────────────────────────────────────────────────
   Tokens first: every surface, line and text shade in this window comes from
   here, so the same system can dress the next window without re-deriving it.
   Lines are translucent white rather than flat greys — that keeps a hairline
   reading the same weight over the panel, a card and an input alike. */
/* On :root so any surface in the Studio can use the window's system, not
   just .studio-window itself. */
:root {
  --cx-panel:#141416;          /* the window itself, a step above the page   */
  --cx-surface:#1a1a1c;        /* insets: cards, search, request box         */
  --cx-surface-hover:#212125;
  --cx-line:rgba(255,255,255,.08);
  --cx-line-strong:rgba(255,255,255,.15);
  --cx-fill:rgba(255,255,255,.06);      /* selected row                      */
  --cx-fill-hover:rgba(255,255,255,.035);
  --cx-text:#f2eff4;
  --cx-muted:#8b8891;
  --cx-dim:#6e6b74;            /* counts, section labels                     */
  --cx-pink:#FF315F;
  --cx-cyan:#17C9FF;
}

.studio-window-backdrop { display:none; }
.studio-window.is-open.is-project-overlay { z-index:180; }
.studio-window-backdrop.is-open { display:block !important; position:fixed; inset:0; z-index:59; background:rgba(8,8,10,.62); backdrop-filter:blur(2px); }
.studio-window.is-open {
  display:grid !important; position:fixed; z-index:60;
  top:50%; left:calc(var(--studio-rail) + 34px); right:34px; transform:translateY(-50%);
  max-height:min(720px,calc(100vh - 72px)); overflow:auto;
  padding:20px; border:1px solid var(--cx-line); border-radius:18px; background:var(--cx-panel);
  box-shadow:0 40px 120px rgba(0,0,0,.62);
  transition:none;
}
/* Rail-opened windows fill the pane, sitting exactly where the dashboard sits
   so the rail stays put and nothing appears to float. */
.studio-window.is-open.is-fullscreen {
  inset:var(--studio-gap) 0 0 var(--studio-rail);
  max-height:none; transform:none;
  padding:42px 44px 48px; border:0; border-top:1px solid rgba(255,255,255,.14);
  border-radius:18px 18px 0 0; background:var(--cx-surface); box-shadow:none;
  transition:none;
}
#app-screen.is-mobile-studio .studio-window.is-open.is-fullscreen { inset:0 !important; grid-template-columns:minmax(0,1fr); padding:20px 16px 28px; border:0; border-radius:0; }
/* Project tools cover the project pane edge to edge. The dashboard rail is
   256px, but the pinned project menu is 224px; using the dashboard inset here
   exposes a strip of the chat and preview behind the window. */
#app-screen .studio-window.is-open.is-fullscreen.is-project-overlay {
  inset:0 !important;
  border-radius:0 !important;
  max-height:none;
  transform:none;
  transition:none;
}
@media (min-width:1101px) {
  #app-screen.is-session-sidebar-open .studio-window.is-open.is-fullscreen.is-project-overlay {
    left:224px !important;
  }
}
.studio-window { grid-template-columns:232px minmax(0,1fr); gap:20px; text-align:left; }

.studio-window-crumb button { display:grid; place-items:center; width:30px; height:30px; margin-left:auto; padding:0; border:0; border-radius:8px; background:transparent; color:var(--cx-muted); cursor:pointer; }
.studio-window-crumb button:hover { background:var(--cx-fill); color:var(--cx-text); }
.studio-window-crumb button svg { width:16px; height:16px; }

/* Left column */
.studio-window-side { display:flex; flex-direction:column; align-self:start; gap:2px; }
#app-screen #studio-connector-search.studio-window-search,
#app-screen #studio-template-search.studio-window-search,
#app-screen #studio-projects-search.studio-window-search {
  width:100%;
  height:36px;
  margin-bottom:10px;
  padding:0 11px;
  border:1px solid transparent !important;
  border-radius:9px !important;
  background:
    linear-gradient(var(--cx-surface),var(--cx-surface)) padding-box,
    conic-gradient(from 135deg,var(--studio-cyan),rgba(184,184,188,.2),var(--studio-crimson),rgba(184,184,188,.2),var(--studio-cyan)) border-box !important;
  box-shadow:none !important;
  color:var(--cx-text) !important;
  font:400 13px/36px var(--studio-font);
  animation:none !important;
  transition:box-shadow .18s ease,filter .18s ease !important;
}
#app-screen #studio-connector-search.studio-window-search:focus,
#app-screen #studio-template-search.studio-window-search:focus,
#app-screen #studio-projects-search.studio-window-search:focus,
#app-screen #studio-connector-search.studio-window-search:focus-visible,
#app-screen #studio-template-search.studio-window-search:focus-visible,
#app-screen #studio-projects-search.studio-window-search:focus-visible {
  border-color:transparent !important;
  outline:none !important;
  box-shadow:
    -5px 0 16px rgba(23,201,255,.24),
    5px 0 16px rgba(255,49,95,.24),
    0 0 0 1px rgba(251,241,224,.08),
    0 8px 22px rgba(0,0,0,.28) !important;
  filter:brightness(1.08);
}
#app-screen #studio-connector-search.studio-window-search::placeholder,
#app-screen #studio-template-search.studio-window-search::placeholder,
#app-screen #studio-projects-search.studio-window-search::placeholder { color:var(--cx-dim); }
.studio-window-filters { display:flex; flex-direction:column; gap:1px; }
.studio-window-filter { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:36px; padding:0 11px; border:0; border-radius:8px; background:transparent; color:var(--cx-muted); font:400 13.5px/18px var(--studio-font); letter-spacing:0; text-align:left; text-transform:none; cursor:pointer; }
.studio-window-filter:hover { background:var(--cx-fill-hover); color:var(--cx-text); }
.studio-window-filter.is-active { background:var(--cx-fill); color:var(--cx-text); font-weight:600; }
.studio-window-filter span { color:var(--cx-dim); font-size:12px; font-variant-numeric:tabular-nums; }
.studio-window-side-label { padding:20px 11px 8px; color:var(--studio-cream); font:700 14px/18px var(--studio-font); letter-spacing:0; text-transform:none; }

/* Request box — 0.5px frame, with the bloom sitting on its top edge. */
.studio-connectors-request { position:relative; z-index:0; display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin-top:20px; padding:14px 12px; overflow:hidden; border:1px solid var(--cx-line); border-radius:12px; background:var(--cx-surface); }
.studio-connectors-request > * { position:relative; z-index:1; }
.studio-connectors-request::before { content:''; position:absolute; z-index:0; top:-5px; right:11%; left:11%; height:11px; border-radius:999px; background:linear-gradient(90deg,var(--cx-pink),var(--cx-cyan)); filter:blur(7px); opacity:.85; pointer-events:none; }
.studio-connectors-request::after { content:''; position:absolute; z-index:1; top:0; right:8px; left:8px; height:1px; border-radius:999px; background:linear-gradient(90deg,transparent,var(--cx-pink) 20%,var(--cx-cyan) 80%,transparent); pointer-events:none; }
.studio-connectors-request svg { width:17px; height:17px; color:var(--cx-muted); }
.studio-connectors-request strong { color:var(--cx-text); font:500 13px/18px var(--studio-font); }
#app-screen .studio-connectors-request input { width:100%; height:33px; padding:0 10px; border:1px solid var(--cx-line) !important; border-radius:8px !important; background:rgba(0,0,0,.28) !important; box-shadow:none !important; color:var(--cx-text) !important; font:400 12px/33px var(--studio-font); }
#app-screen .studio-connectors-request input::placeholder { color:var(--cx-dim); }
.studio-connectors-request button { width:100%; min-height:33px; border:1px solid var(--cx-line-strong); border-radius:8px; background:var(--cx-fill); color:var(--cx-text); font:600 12px/16px var(--studio-font); cursor:pointer; }
.studio-connectors-request button:hover { background:rgba(255,255,255,.1); }
.studio-connectors-request button:disabled { opacity:.6; cursor:default; }

/* Right column */
.studio-window-main { min-width:0; }
.studio-window-crumb { display:flex; align-items:center; gap:7px; width:100%; margin-bottom:18px; color:var(--cx-muted); font:400 13px/18px var(--studio-font); }
.studio-window-crumb i { font-style:normal; color:var(--cx-dim); }
.studio-window-crumb span { color:var(--cx-text); }
.studio-window-hero { margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--cx-line); }
.studio-window-hero strong { display:block; margin-bottom:6px; color:#fff; font:700 20px/26px var(--studio-font); }
.studio-window-hero p { max-width:620px; color:var(--cx-muted); font:400 13px/19px var(--studio-font); }
.studio-window-section { padding:4px 2px 10px; color:var(--cx-dim); font:600 11px/14px var(--studio-font); letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.studio-window-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px; }
.studio-window-grid + .studio-window-section { padding-top:26px; }
.studio-connector-card.is-filtered, .studio-window-grid.is-filtered, .studio-window-section.is-filtered { display:none !important; }
.studio-window-empty { padding:24px 2px; color:var(--cx-muted); font:400 13px/18px var(--studio-font); }

/* Cards */
.studio-connector-card { display:flex; align-items:center; gap:12px; min-height:64px; padding:11px 13px; border:1px solid var(--cx-line); border-radius:11px; background:var(--cx-surface); cursor:default; }
.studio-connector-icon { position:relative; display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; }
.studio-connector-icon svg { display:block; width:32px; height:32px; }
.studio-connector-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; text-align:left; }
.studio-connector-copy strong { color:var(--cx-text); font:600 13px/17px var(--studio-font); }
.studio-connector-copy small { color:var(--cx-muted); font:400 12px/16px var(--studio-font); }
.studio-connector-card--live { cursor:pointer; text-decoration:none; }
.studio-connector-card--live:hover { border-color:var(--cx-line-strong); background:var(--cx-surface-hover); }
/* Enabled dot, as the reference marks its live connectors. */
.studio-connector-card--live .studio-connector-icon::after { content:''; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border:2px solid var(--cx-surface); border-radius:50%; background:#33d17a; }
.studio-connector-open { margin-left:auto; flex:0 0 auto; padding:3px 9px; border-radius:999px; background:rgba(51,209,122,.14); color:#7fe0a6; font:600 10px/14px var(--studio-font); font-style:normal; letter-spacing:.03em; white-space:nowrap; }
.studio-connector-soon { margin-left:auto; flex:0 0 auto; padding:3px 8px; border-radius:999px; background:var(--cx-fill); color:var(--cx-dim); font:600 10px/14px var(--studio-font); font-style:normal; letter-spacing:.04em; white-space:nowrap; }
.studio-dashboard-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; overflow:visible; padding-right:2px; }
.studio-dashboard-template-grid > div.is-filtered { display:none !important; }
.studio-dashboard-template-grid .tm-empty { grid-column:1/-1; padding:22px 2px; color:var(--cx-muted) !important; font:400 13px/18px var(--studio-font) !important; }
.studio-dashboard-template-grid > div { width:100% !important; overflow:visible; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
.studio-dashboard-template-grid > div > div:first-child { height:230px !important; overflow:hidden; border:1px solid var(--cx-line) !important; border-radius:11px; background:#f4f2ed; transition:box-shadow .22s ease,transform .22s ease; }
.studio-dashboard-template-grid > div:hover > div:first-child {
  border-color:transparent !important;
  background:
    linear-gradient(#f4f2ed,#f4f2ed) padding-box,
    conic-gradient(from var(--studio-connector-frame-angle),var(--studio-cyan),#b8b8bc33,var(--studio-crimson),#b8b8bc33,var(--studio-cyan)) border-box !important;
  box-shadow:0 14px 30px rgba(0,0,0,.34),-5px 2px 18px rgba(23,201,255,.11),5px 2px 18px rgba(255,49,95,.1);
  transform:translateY(-2px);
  animation:studio-connector-c09 8s linear infinite;
}
/* templates.js ships a purple Tailwind hover wash for the legacy gallery.
   The Studio window uses the connector-style moving frame instead. */
.studio-dashboard-template-grid > div > div:first-child > button.absolute {
  background:transparent !important;
  background-image:none !important;
  transition:opacity .2s ease,background-color .2s ease !important;
  text-shadow:0 1px 5px rgba(0,0,0,.9);
}
.studio-dashboard-template-grid > div:hover > div:first-child > button.absolute {
  background:rgba(10,9,14,.58) !important;
}
.studio-dashboard-template-grid iframe { width:1280px !important; height:900px !important; transform:scale(.39) !important; transform-origin:top left !important; }
.studio-dashboard-template-grid > div > div:last-child { padding:14px 0 0 !important; }
.studio-dashboard-template-grid [class*='text-gray-800'] { color:var(--cx-text) !important; font-size:13px !important; font-weight:600 !important; }
.studio-dashboard-template-grid [class*='text-gray-500'] { color:var(--cx-muted) !important; font-size:12px !important; }
.studio-dashboard-template-grid .gallery-card-btn {
  min-height:40px !important;
  padding:0 18px !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:999px !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
  font:600 12px/14px var(--studio-font) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}
.studio-dashboard-template-grid .gallery-card-btn:hover:not(:disabled) {
  filter:brightness(1.12);
  transform:translateY(-1px) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.24) !important;
}
.studio-dashboard-template-grid .gallery-card-btn.dock-pill-btn--primary {
  border-color:rgba(184,184,188,.4) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
}
.studio-dashboard-template-grid .gallery-card-btn.dock-pill-btn--primary:hover:not(:disabled) {
  box-shadow:-3px 0 0 rgba(23,201,255,.72),3px 0 0 rgba(255,49,95,.72),0 8px 18px rgba(0,0,0,.28) !important;
}
.studio-dashboard-template-grid .gallery-card-btn:active:not(:disabled) {
  filter:brightness(.96);
  transform:translateY(0) !important;
}

/* My Projects uses the same preview treatment as Templates: the artwork is
   the interactive focal point, while its title and metadata sit quietly below.
   Keep the permanent New Project tile in its own, simpler card style. */
.studio-project-card:not(.studio-project-card--new) {
  overflow:hidden;
  border:1px solid var(--cx-line);
  border-radius:11px;
  background:var(--studio-surface-2);
  box-shadow:none;
  transition:box-shadow .22s ease,transform .22s ease;
}
.studio-project-card:not(.studio-project-card--new)::before,
.studio-project-card:not(.studio-project-card--new)::after {
  display:none;
}
.studio-project-card:not(.studio-project-card--new):hover {
  border-color:transparent;
  background:
    linear-gradient(var(--studio-surface-2),var(--studio-surface-2)) padding-box,
    conic-gradient(from var(--studio-connector-frame-angle),var(--studio-cyan),#b8b8bc33,var(--studio-crimson),#b8b8bc33,var(--studio-cyan)) border-box;
  box-shadow:0 14px 30px rgba(0,0,0,.34),-5px 2px 18px rgba(23,201,255,.11),5px 2px 18px rgba(255,49,95,.1);
  transform:translateY(-2px);
  animation:studio-connector-c09 8s linear infinite;
}
.studio-project-card:not(.studio-project-card--new) .studio-project-thumb {
  isolation:isolate;
  contain:paint;
  overflow:hidden;
  border:0;
  border-radius:10px 10px 0 0;
  background:#f4f2ed;
}
.studio-project-card:not(.studio-project-card--new) .studio-project-thumb::before {
  content:'';
  position:absolute;
  z-index:2;
  inset:0;
  background:rgba(10,9,14,.58);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.studio-project-card:not(.studio-project-card--new) .studio-project-thumb::after {
  content:'Preview';
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  color:#fff;
  font:600 14px/18px var(--studio-font);
  opacity:0;
  pointer-events:none;
  text-shadow:0 1px 5px rgba(0,0,0,.9);
  transform:translate(-50%,-50%);
  transition:opacity .2s ease;
}
.studio-project-card:not(.studio-project-card--new):hover .studio-project-thumb::before,
.studio-project-card:not(.studio-project-card--new):hover .studio-project-thumb::after,
.studio-project-card:not(.studio-project-card--new):focus-within .studio-project-thumb::before,
.studio-project-card:not(.studio-project-card--new):focus-within .studio-project-thumb::after {
  opacity:1;
}
.studio-project-card:not(.studio-project-card--new) .studio-project-copy {
  padding:14px 13px;
  border-radius:0 0 10px 10px;
  background:var(--studio-surface-2);
}
.studio-project-card:not(.studio-project-card--new) .studio-project-favourite,
.studio-project-card:not(.studio-project-card--new) .studio-project-rename {
  z-index:4;
}
.studio-dashboard-upload-grid { display:block; max-height:500px; overflow-y:auto; overscroll-behavior:contain; text-align:left; }
.studio-upload-toolbar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding:0 0 12px; border-bottom:1px solid var(--cx-line); background:#1b1b1c; }
.studio-upload-toolbar > strong { color:var(--cx-text); font:600 13px/18px var(--studio-font); }
.studio-upload-add-file { min-height:34px; padding:0 13px; border:1px solid var(--cx-line-strong); border-radius:8px; background:var(--cx-fill); color:var(--cx-text); font:700 12px/16px var(--studio-font); cursor:pointer; }
.studio-upload-view-toggle { display:flex; gap:0; padding:3px; border:1px solid rgba(184,184,188,.28); border-radius:10px; background:#111015; }
.studio-upload-view-toggle button { display:grid; place-items:center; width:38px; min-width:38px; min-height:34px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--cx-muted); cursor:pointer; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
.studio-upload-view-toggle button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.studio-upload-view-toggle button:hover:not(.is-active) { background:rgba(251,241,224,.06); color:var(--cx-text); }
.studio-upload-view-toggle button.is-active { background:var(--studio-cream); color:var(--studio-ink); box-shadow:0 3px 10px rgba(0,0,0,.28); }
.studio-upload-tree-section { position:relative; isolation:isolate; margin:0 2px 10px; overflow:visible; border:1px solid var(--cx-line); border-radius:12px; background:var(--cx-surface); transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.studio-upload-tree-section:hover { border-color:var(--studio-line-strong) !important; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.studio-upload-tree-section[open] { background:rgba(251,241,224,.035); }
.studio-upload-tree-section summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:44px; padding:0 12px; color:var(--cx-text); font:600 13px/18px var(--studio-font); cursor:pointer; }
.studio-upload-tree-section summary::marker { color:var(--cx-muted); }
.studio-upload-tree-section summary span { color:var(--cx-text) !important; font:600 13px/18px var(--studio-font) !important; }
.studio-upload-tree-section summary em { color:var(--cx-dim); font:500 12px/16px var(--studio-font); }
.studio-upload-folder-action { min-height:34px; padding:0 13px; border:1px solid rgba(184,184,188,.4); border-radius:999px; background:rgba(251,241,224,.024); color:var(--studio-cream); box-shadow:-2px 0 0 rgba(23,201,255,.5),2px 0 0 rgba(255,49,95,.5); font:600 12px/16px var(--studio-font); cursor:pointer; transition:filter .18s ease,transform .18s ease,box-shadow .18s ease; }
.studio-upload-folder-action:hover { filter:brightness(1.12); transform:translateY(-1px); box-shadow:-3px 0 0 rgba(23,201,255,.68),3px 0 0 rgba(255,49,95,.68),0 7px 16px rgba(0,0,0,.24); }
.studio-upload-tree-files { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0 12px 12px; }
.studio-dashboard-upload-grid.is-small .studio-upload-tree-files { grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; }
.studio-dashboard-upload-grid.is-list .studio-upload-tree-files { grid-template-columns:1fr; gap:6px; }
.studio-upload-file { position:relative; display:flex; flex-direction:column; min-width:0; aspect-ratio:1; overflow:hidden; border:1px solid var(--cx-line); border-radius:11px; background:var(--cx-surface); color:var(--cx-text); cursor:pointer; }
.studio-dashboard-upload-grid.is-small .studio-upload-file { border-radius:8px; }
.studio-dashboard-upload-grid.is-list .studio-upload-file { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; min-height:58px; aspect-ratio:auto; border-radius:9px; }
.studio-upload-file.is-selected { border-color:var(--cx-line-strong); background:var(--cx-fill); box-shadow:none; }
.studio-upload-file:hover { border-color:var(--cx-line-strong); background:var(--cx-surface-hover); }
.studio-upload-file img { width:100%; height:100%; object-fit:cover; }
.studio-dashboard-upload-grid.is-list .studio-upload-file img { width:46px; height:46px; margin-left:6px; border-radius:6px; }
.studio-upload-file-copy { position:absolute; inset:auto 0 0; padding:8px; overflow:hidden; background:linear-gradient(transparent,rgba(0,0,0,.82)); color:#fff; }
.studio-dashboard-upload-grid.is-small .studio-upload-file-copy { padding:5px; }
.studio-dashboard-upload-grid.is-list .studio-upload-file-copy { position:static; padding:7px 10px; background:none; }
.studio-upload-file-copy strong,.studio-upload-file-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-upload-file-copy strong { color:var(--cx-text); font:600 13px/17px var(--studio-font); }
.studio-upload-file-copy small { color:var(--cx-muted); font:400 12px/16px var(--studio-font); }
.studio-dashboard-upload-grid.is-small .studio-upload-file-copy strong { font:600 9px/12px var(--studio-font); }
.studio-dashboard-upload-grid.is-small .studio-upload-file-copy small { display:none; }
.studio-dashboard-upload-grid.is-list .studio-upload-file-copy strong { font:600 12px/16px var(--studio-font); }
.studio-dashboard-upload-grid.is-list .studio-upload-file-copy small { color:var(--cx-dim); font:400 11px/15px var(--studio-font); }
.studio-upload-empty { margin:0; padding:18px; border:1px dashed var(--cx-line-strong); border-radius:12px; color:var(--cx-muted); font:400 12px/18px var(--studio-font); text-align:center; }
.studio-upload-project-empty { min-height:96px; margin:0; display:grid; place-items:center; border:1px dashed var(--cx-line); border-radius:12px; color:var(--cx-dim); font:400 11px/16px var(--studio-font); }
.studio-upload-actions { position:absolute; inset:auto 8px 8px; z-index:2; display:flex; flex-wrap:wrap; gap:5px; opacity:0; transition:opacity .12s ease; }
.studio-dashboard-upload-grid.is-list .studio-upload-actions { position:static; justify-self:end; margin-right:8px; }
.studio-upload-file.is-selected .studio-upload-actions,.studio-upload-file:hover .studio-upload-actions { opacity:1; }
.studio-upload-action { min-height:28px; padding:0 9px; border:1px solid var(--cx-line-strong); border-radius:8px; background:rgba(12,12,14,.78); color:var(--cx-text); font:600 12px/16px var(--studio-font); cursor:pointer; backdrop-filter:blur(8px); }
.studio-upload-action:hover { background:var(--cx-fill); }

/* Carry the new dark/glass system through every production window. */
#templates-modal > div, #template-modal > div, #version-modal > div, #dialog-modal > div,
#placeholder-form-modal > div, #human-help-modal > div, .share-card, .credits-shop-card {
  background:#202024 !important; border:1px solid #49494f !important; border-radius:18px !important; box-shadow:0 30px 90px rgba(0,0,0,.58) !important; color:#f3eff5 !important;
}
#templates-modal input, #dialog-input { background:#17171a !important; border-color:#4b4b52 !important; color:#fff !important; }
.tm-header > div { min-width:0; }
.tm-subtitle { margin:3px 0 0; color:#929099; font-size:12px; }
.tm-view-all { margin-left:auto; color:#f3eff5; font-size:12px; font-weight:700; text-decoration:none; }
.tm-view-all:hover { color:#fff; text-decoration:underline; }
.tm-cluster > .path-pill,
.tm-cluster > .path-heading,
.tm-cluster > .path-halftone { display:none !important; }
#templates-modal .tm-cluster { max-width:1040px; align-items:center; }
#templates-modal .tm-window { width:min(1000px,calc(100vw - 40px)); height:min(650px,calc(100vh - 48px)); background:#202024 !important; border:1px solid #49494f !important; border-radius:20px !important; box-shadow:0 30px 90px rgba(0,0,0,.58) !important; }
#templates-modal .tm-header { min-height:72px; padding:14px 18px; background:#202024 !important; border-bottom:1px solid #414146 !important; }
#templates-modal .tm-title { color:#f3eff5 !important; font-size:20px; text-transform:none; }
#templates-modal .tm-toolbar { padding:12px 18px; border-bottom:1px solid #414146 !important; }
#templates-modal .tm-search { min-height:42px; border:1px solid #4b4b52 !important; border-radius:10px !important; background:#17171a !important; color:#fff !important; box-shadow:none !important; }
#templates-modal .tm-grid { gap:18px; padding:20px; }
/* Preserve the original ingested-template card treatment inside the new shell. */
#templates-modal .tm-grid > div { width:280px !important; overflow:hidden; border:1px solid #d8d5d0 !important; border-radius:12px !important; background:#fff !important; box-shadow:0 10px 26px rgba(0,0,0,.22) !important; }
#templates-modal .tm-grid > div > div:first-child { height:158px !important; background:#f3f1ed !important; }
#templates-modal .tm-grid iframe { transform:scale(.219) !important; }
#templates-modal .tm-grid > div > div:last-child { padding:12px !important; gap:5px !important; }
#templates-modal .tm-grid [class*='text-gray-800'] { color:#27242a !important; font-size:14px !important; }
#templates-modal .tm-grid [class*='text-gray-500'] { color:#77727c !important; font-size:11px !important; }
.tm-source-btn, .brief-btn, #dialog-cancel, #dialog-ok { border-radius:9px !important; box-shadow:none !important; }

@media (max-width: 1080px) {
  .studio-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #preview-empty:not(.hidden) { padding:28px 24px 40px !important; }
}

/* Active project/editor shell */
#studio-project-activity { display:none; }
#app-screen:has(#preview-container:not(.hidden)) .studio-atmosphere,
#app-screen:has(#preview-container:not(.hidden)) .studio-canvas-heading { display:none !important; }
/* The dashboard pane is opaque and covers the atmosphere exactly, so its own
   rotating ray layer is painted and never seen. Skip it while the pane is up. */
#app-screen:has(#preview-empty:not(.hidden)) .studio-atmosphere { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #sidebar,
#app-screen:has(#preview-container:not(.hidden)) #sidebar-resizer { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #url-bar:not(.hidden) { left:50% !important; height:64px !important; min-height:64px !important; padding:8px 14px !important; background:#1b1b1c !important; }
#app-screen:has(#preview-container:not(.hidden)) #builder-wordmark { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #sidebar-toggle { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) .domain-controls { max-width:220px; }
#app-screen:has(#preview-container:not(.hidden)) #site-link { color:#f2eff3 !important; font-size:13px !important; font-weight:700; }
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity { position:fixed; inset:0 50% 0 0; z-index:3; display:flex; flex-direction:column; overflow:hidden; border-right:0; background:#1b1b1c; color:#f3f0f4; }
#studio-project-activity > header { display:flex; align-items:center; gap:10px; min-height:56px; padding:9px 16px; border-bottom:0; }
.studio-project-back { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:8px; background:transparent; text-decoration:none; }
.studio-project-back img { width:30px; height:auto; border-radius:0; object-fit:contain; }
#studio-project-activity header > div { display:flex; flex-direction:column; gap:0; min-width:0; }
#studio-project-activity header strong { overflow:hidden; color:#fff; font:600 14px/1.25 var(--studio-ui-font); text-overflow:ellipsis; white-space:nowrap; }
#studio-project-activity header span { color:#88858d; font:400 11px/1.35 var(--studio-ui-font); }
#studio-project-history,
#studio-project-panel { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0; border:0; border-radius:9px; background:transparent; color:#b9bcc4; cursor:pointer; }
#studio-project-history { margin-left:auto; }
#studio-project-history:hover,
#studio-project-panel:hover { background:#282a30; color:#fff; }
#studio-project-history svg,
#studio-project-panel svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* The chat column and its composer use the UI face, like the workspace. */
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity,
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity button,
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity a,
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel,
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel button,
#app-screen:has(#preview-container:not(.hidden)) #prompt,
#app-screen:has(#preview-container:not(.hidden)) #url-bar,
#app-screen:has(#preview-container:not(.hidden)) #url-bar button,
#app-screen:has(#preview-container:not(.hidden)) #url-bar a { font-family:var(--studio-ui-font) !important; }
#studio-activity-feed { flex:1; min-height:0; overflow-y:auto; padding:20px 16px 220px; }
.studio-activity-empty { margin-top:28px; color:#77747c; font-size:13px; text-align:center; }
.studio-activity-item { width:min(58%,560px); margin:0 0 28px auto; padding:13px 16px; border:1px solid #3d3d42; border-radius:18px; background:#29292b; color:#eae7ec; font-size:13px; line-height:1.45; }
.studio-activity-prompt { margin:0; color:#ece9ed; font-size:14px; }
.studio-activity-meta { display:flex; justify-content:space-between; gap:12px; margin-top:8px; color:#88858d; font-size:10px; }
.studio-activity-meta span { color:#aaa7ae; font-weight:700; text-transform:capitalize; }
.studio-activity-assistant { position:relative; width:min(92%,600px); margin:0 auto 34px 0; padding:0; border:0; border-radius:14px; background:transparent; color:#d8d5db; }
.studio-activity-assistant::before { display:none; }
.studio-change-card { overflow:hidden; margin-bottom:18px; border:1px solid #3068ff; border-radius:13px; background:#252527; box-shadow:0 0 0 1px rgba(48,104,255,.18); }
.studio-change-card > strong { display:block; padding:17px 18px; color:#f5f2f5; font-size:13px; }
.studio-change-card > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 12px; }
.studio-change-card button { min-height:36px; border:1px solid #444349; border-radius:999px; background:transparent; color:#ddd9df; font-size:11px; }
.studio-change-card button.is-active { border-color:transparent; background:#24283a; color:#637ec4; }
.studio-activity-assistant > p { margin:0; color:#c9c6cc; font-size:13px; line-height:1.55; }
.studio-response-actions { display:flex; gap:13px; margin-top:16px; }
.studio-response-actions button { padding:0; border:0; background:transparent; color:#aaa7ae; font-size:14px; }
#studio-build-activity { position:absolute; left:20px; right:20px; bottom:214px; display:grid; grid-template-columns:22px 1fr; gap:2px 8px; padding:14px; border:1px solid #356aff; border-radius:13px; background:#252528; box-shadow:0 0 0 1px rgba(53,106,255,.18); }
#studio-build-activity.hidden { display:none !important; }
#studio-build-activity { grid-template-columns:24px 1fr; }
#studio-build-activity > globe-loader { grid-row:1/3; align-self:center; }
#studio-build-activity strong { color:#fff; font-size:12px; }
#studio-build-activity small { color:#8e8b94; font-size:10px; }
#app-screen:has(#preview-container:not(.hidden)) #preview-area { top:64px !important; right:0 !important; bottom:0 !important; left:50% !important; padding:8px !important; display:block !important; background:#1b1b1c !important; }
#app-screen:has(#preview-container:not(.hidden)) #preview-container:not(.hidden) { width:100% !important; max-width:none !important; height:100% !important; border:1px solid #3d3d42 !important; border-radius:16px !important; box-shadow:none !important; }
/* The composer is the foot of the chat column, not a window of its own: same
   ground, no rounding, no seam. */
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) { left:0 !important; right:50% !important; bottom:0 !important; height:164px !important; min-height:164px !important; padding:0 16px 16px !important; border:0 !important; border-radius:0 !important; background:#1b1b1c !important; box-shadow:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden)::before {
  content:'';
  position:absolute;
  right:0;
  bottom:100%;
  left:0;
  height:72px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(27,27,28,0),#1b1b1c 92%);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  mask-image:linear-gradient(to bottom,transparent,#000 38%,#000);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 38%,#000);
}
#app-screen:has(#preview-container:not(.hidden)) #panel-resizer { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt { position:relative; display:block !important; padding:0 !important; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt .flex-1.relative { max-width:none !important; min-width:0; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative { height:100% !important; overflow:visible !important; border:0 !important; border-radius:24px !important; background:transparent !important; box-shadow:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #prompt { display:block !important; height:100% !important; min-height:132px !important; padding:20px 20px 64px !important; background:#1c1c1e !important; }
#app-screen:has(#preview-container:not(.hidden)) #prompt-actions { position:absolute; right:20px; bottom:16px; z-index:3; display:block !important; min-width:0 !important; }
#app-screen:has(#preview-container:not(.hidden)) .build-power-row { display:flex !important; flex-direction:row !important; align-items:center; gap:8px; }
#app-screen:has(#preview-container:not(.hidden)) #build-btn { width:100% !important; min-height:42px !important; }

#app-screen:has(#preview-container:not(.hidden)) #human-help-button { display:none !important; }






#app-screen:has(#preview-container:not(.hidden)) #bottom-panel > .flex.items-center.border-b { position:absolute; top:38px; right:16px; z-index:2; width:auto; padding:0 !important; border:0 !important; }
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel > .flex.items-center.border-b .tab-btn { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel > .flex.items-center.border-b .tab-btn-active { display:block !important; min-height:26px !important; padding:4px 8px !important; color:#8e8b94 !important; background:transparent !important; border:0 !important; font-size:0 !important; }
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel > .flex.items-center.border-b .tab-btn-active::after { content:'•••'; font-size:13px; letter-spacing:2px; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt { padding:0 !important; }
#app-screen:has(#preview-container:not(.hidden)) #prompt {
  border:1px solid transparent !important;
  border-radius:24px !important;
  background:rgba(18,17,23,.92) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.42) !important;
  color:#f4f4f5 !important;
  font:400 15px/1.5 var(--studio-font) !important;
  transform:none !important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease !important;
}
#app-screen:has(#preview-container:not(.hidden)) #prompt::placeholder { color:#8b8b90 !important; opacity:1 !important; }
#app-screen:has(#preview-container:not(.hidden)) #prompt:focus,
#app-screen:has(#preview-container:not(.hidden)) #prompt:focus-visible {
  border-color:transparent !important;
  box-shadow:0 20px 46px rgba(0,0,0,.48) !important;
  outline:0 !important;
}
#app-screen:has(#preview-container:not(.hidden)) #prompt-record-btn { left:auto !important; right:68px !important; bottom:16px !important; z-index:4; width:40px !important; height:40px !important; padding:0 !important; overflow:hidden; border:1px solid rgba(255,255,255,.25) !important; border-radius:50% !important; background:#1B1920 !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF1E0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v3'/%3E%3C/svg%3E") !important; background-position:center !important; background-repeat:no-repeat !important; background-size:19px 19px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important; color:transparent !important; font-size:0 !important; transform:none !important; transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important; }
#app-screen:has(#preview-container:not(.hidden)) #prompt-record-btn:hover { background-color:#25222b !important; border-color:rgba(255,255,255,.36) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 7px 16px rgba(0,0,0,.3) !important; transform:translateY(-1px) !important; }
#app-screen:has(#preview-container:not(.hidden)) #prompt-record-btn::after { content:none; }

#app-screen:has(#preview-container:not(.hidden)) .build-power-row #build-btn { width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; padding:0 !important; overflow:hidden; border:1px solid rgba(255,255,255,.25) !important; border-radius:50% !important; background:#1B1920 !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF1E0' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6'/%3E%3Cpath d='M6 12l6-6 6 6'/%3E%3C/svg%3E") !important; background-position:center !important; background-repeat:no-repeat !important; background-size:20px 20px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important; color:transparent !important; font-size:0 !important; transform:none !important; transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt:has(#prompt:placeholder-shown) .build-power-row #build-btn { opacity:1 !important; filter:none !important; cursor:pointer !important; }
#app-screen:has(#preview-container:not(.hidden)) .build-power-row #build-btn::after { content:none; }
#app-screen:has(#preview-container:not(.hidden)) .build-power-row #build-btn:hover { filter:none; background-color:#25222b !important; border-color:rgba(255,255,255,.36) !important; transform:translateY(-1px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 7px 16px rgba(0,0,0,.3) !important; }

.studio-prompt-add { display:none; }
#app-screen:has(#preview-container:not(.hidden)) .studio-prompt-add { position:absolute; left:20px; bottom:16px; z-index:4; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:#1B1920; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); color:#FBF1E0; font:300 24px/1 var(--studio-font); transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
#app-screen:has(#preview-container:not(.hidden)) .studio-prompt-add:hover { background:#25222b; border-color:rgba(255,255,255,.36); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 7px 16px rgba(0,0,0,.3); transform:translateY(-1px); }
#app-screen:has(#preview-container:not(.hidden)) .studio-prompt-more { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions.flex { position:absolute !important; inset:auto 20px 16px auto !important; display:block !important; width:auto !important; min-width:0 !important; height:40px !important; transform:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions .build-power-row { display:flex !important; flex-flow:row nowrap !important; align-items:center !important; width:auto !important; gap:8px !important; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions .build-power-row #build-btn { flex:0 0 40px !important; width:40px !important; min-width:40px !important; max-width:40px !important; }

#app-screen:has(#preview-container:not(.hidden)) #bottom-panel > div.flex.items-center.border-b { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel > div.flex.items-center.border-b .tab-btn-active { display:grid !important; place-items:center; width:34px !important; height:28px !important; margin:0 !important; padding:0 !important; }
#app-screen:has(#preview-container:not(.hidden)) #preview-mobile,
#app-screen:has(#preview-container:not(.hidden)) #preview-tablet { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #preview-desktop { min-width:88px !important; border:1px solid #356ee8 !important; border-radius:999px !important; background:#173c8f !important; color:transparent !important; font-size:0 !important; }
#app-screen:has(#preview-container:not(.hidden)) #preview-desktop::before { content:'◉  Preview'; color:#8fb4ff; font-size:11px; font-weight:700; }
#app-screen:has(#preview-container:not(.hidden)) #subdomain-section:not(.hidden) { display:flex !important; align-items:center !important; min-height:36px !important; overflow:hidden !important; border:1px solid #414046 !important; border-radius:10px !important; background:#222225 !important; box-shadow:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #subdomain-link:not(.hidden) { min-width:142px !important; min-height:34px !important; padding:0 12px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#c6c3ca !important; font-size:10px !important; font-weight:600 !important; text-decoration:none !important; text-transform:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #subdomain-link:empty::before { content:'yourname.weboom.ai' !important; color:#77747c !important; font-weight:500 !important; }
#app-screen:has(#preview-container:not(.hidden)) #subdomain-set-btn:not(.hidden) { min-height:34px !important; padding:0 12px !important; border:0 !important; border-left:1px solid #414046 !important; border-radius:0 !important; background:#2d2c30 !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; font-weight:650 !important; letter-spacing:0 !important; text-transform:none !important; transform:none !important; }
#app-screen:has(#preview-container:not(.hidden)) #subdomain-set-btn:not(.hidden)::after { content:'Set domain'; color:#d9d6dc; font-size:10px; }
#app-screen:has(#preview-container:not(.hidden)) #subdomain-set-btn:not(.hidden):hover { background:#38373c !important; }
.studio-preview-tools { display:none; }
#app-screen:has(#preview-container:not(.hidden)) .studio-preview-tools { position:absolute; left:50%; bottom:10px; z-index:12; display:flex; align-items:center; gap:2px; padding:5px; border:1px solid #dedee2; border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateX(-50%); }
.studio-preview-tools button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:#34343a; font-size:13px; }
.studio-preview-tools button:hover { background:#eeeef1; }







@media (max-width: 820px) {
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #prompt-record-btn {
    right:16px !important;
    bottom:14px !important;
    width:48px !important;
    height:48px !important;
  }
  
  
  
  
  
  
}

/* Full project workspace opened from Preview. */
#studio-project-workspace { position:fixed; inset:0; z-index:150; background:#19191a; color:#eeeef0; }
#studio-project-workspace.hidden { display:none !important; }
#studio-project-workspace:not(.hidden) { display:flex; flex-direction:column; }
.studio-workspace-header { display:grid; grid-template-columns:auto auto auto 1fr; align-items:center; min-height:48px; padding:0 14px; border-bottom:1px solid #303032; background:#1d1d1e; }
.studio-workspace-project { display:flex; align-items:center; gap:10px; min-width:0; color:#fff; text-decoration:none; }
.studio-workspace-project img.studio-workspace-mark { width:30px; height:auto; border-radius:0; }
.studio-workspace-project > span { display:flex; flex-direction:column; min-width:0; }
.studio-workspace-project strong { overflow:hidden; color:#f4f1f4 !important; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.studio-workspace-project small { margin-top:2px; color:#949198 !important; font-size:10px; }
/* The workspace chrome uses the system grotesk rather than the display face,
   so labels read as UI instead of branding. */
#studio-project-workspace,
#studio-project-workspace button,
#studio-project-workspace input,
#studio-project-workspace a { font-family:var(--studio-ui-font) !important; }
#studio-project-workspace .studio-code-gutter,
#studio-project-workspace .studio-code-text,
#studio-project-workspace .studio-workspace-code-file span,
#studio-project-workspace .studio-workspace-codeview > header strong { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; }

/* Segmented view switch: a track with a lit thumb that fills its full height,
   the way a slider knob sits in its groove. */
.studio-workspace-header nav { display:flex; align-items:stretch; justify-self:start; gap:2px; height:36px; margin-left:16px; padding:3px; border:1px solid #2f333c; border-radius:999px; background:linear-gradient(180deg,#191b21 0%,#0e0f13 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.45); }
.studio-workspace-nav-sep { align-self:center; width:1px; height:16px; margin:0 5px; background:linear-gradient(180deg,rgba(255,255,255,0),#3a3e47,rgba(255,255,255,0)); }
.studio-workspace-header nav button { display:flex; align-items:center; justify-content:center; gap:7px; width:34px; min-width:34px; height:auto; min-height:0; padding:0; border:1px solid transparent; border-radius:999px; background:transparent; color:#d6d9e0; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
.studio-workspace-header nav button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.studio-workspace-header nav button span { display:none; }
.studio-workspace-header nav button:hover { background:rgba(255,255,255,.06); color:#fff; }
.studio-workspace-header nav button.is-active { width:auto; min-width:0; padding:0 13px; border-color:#4571e6; background:linear-gradient(180deg,#2f56b8 0%,#26428f 100%); color:#a8c4ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(30,54,120,.45); }
.studio-workspace-header nav button.is-active:hover { background:linear-gradient(180deg,#4771e2 0%,#3053b6 100%); color:#fff; }
.studio-workspace-header nav button.is-active span { display:inline; color:inherit; font:500 13px/1 var(--studio-font); letter-spacing:0; text-transform:none; }
.studio-workspace-publish { display:flex; align-items:center; justify-self:end; gap:8px; }
.studio-workspace-publish button { display:flex; align-items:center; gap:7px; min-height:34px; padding:0 14px; border:1px solid #3a3a40; border-radius:999px; background:#26262a; color:#e8e6ea; font:500 12.5px/1 var(--studio-font); }
.studio-workspace-publish button:hover { border-color:#4a4a52; background:#2f2f34; color:#fff; }
.studio-workspace-publish button[data-workspace-action='share'] { padding-left:5px; }
.studio-workspace-avatar { display:grid; place-items:center; width:24px; height:24px; overflow:hidden; border-radius:50%; background:#3a5bd0; color:#fff; font:700 11px/1 var(--studio-font); }
#studio-workspace-menu .studio-workspace-avatar--large { width:48px !important; height:48px !important; min-width:48px !important; flex:0 0 48px !important; border-radius:50% !important; font-size:19px !important; }
.studio-workspace-avatar img { width:100%; height:100%; object-fit:cover; }
.studio-workspace-buy { border-color:#7b4bf0 !important; background:linear-gradient(180deg,#8b5cf6 0%,#6d3ae4 100%) !important; color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 7px rgba(109,58,228,.45); }
.studio-workspace-buy:hover { background:linear-gradient(180deg,#9a70f8 0%,#7a49ec 100%) !important; }
.studio-workspace-buy svg { width:14px; height:14px; fill:currentColor; stroke:none; }
.studio-workspace-publish button.studio-workspace-publish-btn { border-color:#3264dc; background:linear-gradient(180deg,#3b74f0 0%,#2a5ad8 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 7px rgba(42,90,216,.4); }
.studio-workspace-publish button.studio-workspace-publish-btn:hover { background:linear-gradient(180deg,#4a80f5 0%,#3266e2 100%); }

/* Full-screen preview toolbar follows the compact three-zone project layout. */
.studio-workspace-header { position:relative; grid-template-columns:auto 1fr auto; min-height:64px; height:64px; padding:0 20px; border-bottom:0; background:#1b1b1c; }
.studio-workspace-quick { grid-column:1; grid-row:1; gap:10px; margin:0; }
.studio-workspace-quick button { width:34px; height:34px; }
.studio-workspace-header nav { grid-column:1; grid-row:1; justify-self:start; width:auto; height:38px; margin-left:88px; padding:3px; border-color:#3a3a40; background:#202022; box-shadow:none; }
.studio-workspace-header nav button.is-active { position:relative; isolation:isolate; height:32px; padding:2px 13px 2px 2px; gap:8px; overflow:hidden; border-color:rgba(91,239,255,.58); background:linear-gradient(135deg,rgba(18,211,232,.32),rgba(0,120,150,.18) 52%,rgba(255,255,255,.08)); color:#d9fbff; box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,15,25,.34),0 5px 18px rgba(0,210,235,.2); backdrop-filter:blur(14px) saturate(155%); -webkit-backdrop-filter:blur(14px) saturate(155%); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.studio-workspace-header nav button.is-active::after { content:''; position:absolute; z-index:-1; inset:1px 1px auto; height:48%; border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.24),transparent); pointer-events:none; }
.studio-workspace-header nav button.is-active svg { width:16px; height:16px; padding:0; border:0; border-radius:0; background:transparent; color:#effeff; box-shadow:none; }
.studio-workspace-header nav button.is-active:hover { border-color:rgba(151,248,255,.86); background:linear-gradient(135deg,rgba(27,224,243,.4),rgba(0,137,165,.22) 52%,rgba(255,255,255,.1)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 7px 22px rgba(0,225,255,.3); transform:translateY(-1px); }
.studio-workspace-header nav button.is-active span { font-size:14px; }
.studio-workspace-header nav .studio-workspace-more { display:grid; place-items:center; width:34px; color:#aaa7ae; font-size:23px; line-height:1; }
.studio-workspace-publish { grid-column:3; grid-row:1; gap:8px; }
.studio-workspace-publish button.studio-workspace-round { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; min-height:40px; padding:0; border-radius:50%; }
.studio-workspace-publish button.studio-workspace-round svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.studio-workspace-publish button.studio-workspace-share { border-color:#49494d; background:#29292b; color:#f1eff2; }
.studio-workspace-publish button.studio-workspace-buy { border-color:#9a63ff !important; background:linear-gradient(180deg,#a15aff,#7d38ed) !important; }
.studio-workspace-publish button.studio-workspace-buy svg { width:22px; height:22px; fill:#fff; stroke:none; }
.studio-workspace-publish button.studio-workspace-publish-btn { border-color:#4c86ff; background:linear-gradient(180deg,#3678f6,#205ce4); }
.studio-workspace-panel[data-workspace-panel='preview'] { padding:0 16px 16px; background:#1b1b1c; }
.studio-workspace-previewbar { top:-51px; width:430px; height:40px; grid-template-columns:30px 1fr 22px; padding:0 14px; border-color:#414145; background:#29292b; }
.studio-workspace-previewbar .studio-preview-device { left:-52px; width:30px; height:30px; }
.studio-workspace-previewbar a { right:-48px; }
.studio-workspace-previewbar strong { font-size:15px; font-weight:500; }

.studio-publish-popover { position:absolute; top:64px; right:18px; z-index:20; width:min(480px,calc(100vw - 36px)); padding:22px; border:1px solid rgba(251,241,224,.24); border-radius:20px; background:#1b1920; color:#fbf1e0; box-shadow:-3px 0 0 rgba(23,201,255,.62),3px 0 0 rgba(255,49,95,.62),0 0 18px rgba(251,241,224,.08),0 40px 120px rgba(0,0,0,.62); font-family:var(--studio-font); }
.studio-publish-popover.hidden { display:none !important; }
.studio-publish-popover > header { display:flex; align-items:center; gap:10px; min-height:30px; }
.studio-publish-popover > header strong { color:#fbf1e0; font-size:20px; font-weight:650; line-height:1.2; }
.studio-publish-popover > header button { display:grid; place-items:center; width:32px; height:32px; margin-left:auto; padding:0; border:1px solid rgba(184,184,188,.3); border-radius:50%; background:#211f27; color:#b8b8bc; }
.studio-publish-popover > header button:hover { border-color:rgba(251,241,224,.4); background:rgba(251,241,224,.07); color:#fbf1e0; }
.studio-publish-popover > header button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.studio-publish-status-dot { width:9px; height:9px; border:1px solid rgba(184,184,188,.7); border-radius:50%; background:transparent; box-shadow:0 0 8px rgba(251,241,224,.12); }
.studio-publish-intro { margin-top:18px; padding:18px; border:1px solid rgba(251,241,224,.15); border-radius:14px; background:linear-gradient(110deg,rgba(23,201,255,.045),transparent 35%,transparent 65%,rgba(255,49,95,.045)),#211f27; box-shadow:-1px 0 0 rgba(23,201,255,.32),1px 0 0 rgba(255,49,95,.32); }
.studio-publish-intro strong { color:#fbf1e0; font-size:15px; font-weight:650; }
.studio-publish-intro p { margin:7px 0 0; color:#b8b8bc; font-size:13px; line-height:1.55; }
.studio-publish-domain-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.studio-publish-domain-head > strong { color:#fbf1e0; font-size:13px; }
.studio-publish-domain-head button { padding:5px 0; border:0; background:transparent; color:#fbf1e0; font-size:13px; }
.studio-publish-domain-head button::first-letter { color:#17c9ff; }
.studio-publish-domain-head button:hover { color:#17c9ff; }
.studio-publish-domain-head button span { margin-left:6px; padding:4px 7px; border:1px solid rgba(255,49,95,.24); border-radius:999px; background:rgba(255,49,95,.1); color:#ff8aa5; font-size:10px; }
.studio-publish-domain { overflow:hidden; margin-top:10px; border:1px solid rgba(184,184,188,.3); border-radius:14px; background:#211f27; box-shadow:-1px 0 0 rgba(23,201,255,.34),1px 0 0 rgba(255,49,95,.34); }
.studio-publish-subdomain { display:flex; align-items:center; min-height:50px; padding:0 10px 0 14px; }
.studio-publish-subdomain input { min-width:0; flex:0 1 180px; padding:0 !important; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; color:#fbf1e0 !important; font:600 13px/1 var(--studio-font); }
.studio-publish-subdomain input:focus,.studio-publish-subdomain input:focus-visible { border:0 !important; outline:0 !important; box-shadow:none !important; color:#fbf1e0 !important; }
.studio-publish-subdomain span { color:#b8b8bc; font:500 13px/1 var(--studio-font); }
.studio-publish-subdomain button { min-height:32px; margin-left:auto; padding:0 13px; border:1px solid rgba(184,184,188,.38); border-radius:999px; background:rgba(251,241,224,.025); color:#fbf1e0; font:600 11px/1 var(--studio-font); }
.studio-publish-subdomain button:hover { border-color:rgba(251,241,224,.52); background:rgba(251,241,224,.08); color:#fbf1e0; }
.studio-publish-domain small { display:block; padding:14px; border-top:1px solid rgba(251,241,224,.1); color:#fbf1e0; font-size:12px; }
.studio-publish-security { margin:18px 2px; color:#17c9ff; font-size:16px; text-shadow:0 0 10px rgba(23,201,255,.38); }
.studio-publish-security span { margin-left:8px; color:#fbf1e0; font-size:13px; font-weight:600; text-shadow:none; }
#studio-publish-confirm { display:block; min-width:104px; min-height:38px; margin-left:auto; padding:0 18px; border:0; border-radius:999px; background:#fbf1e0; box-shadow:-3px 0 0 rgba(23,201,255,.72),3px 0 0 rgba(255,49,95,.72),0 8px 22px rgba(0,0,0,.28); color:#17151b; font-size:13px; font-weight:650; transition:filter .18s ease,transform .18s ease,box-shadow .18s ease; }
#studio-publish-confirm:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:-4px 0 0 rgba(23,201,255,.8),4px 0 0 rgba(255,49,95,.8),0 11px 26px rgba(0,0,0,.32); }

/* Version history — current Studio styling, overriding the retired comic skin. */
#version-modal:not(.hidden) { padding:18px !important; background:rgba(7,7,9,.78) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#version-modal > div { position:relative !important; width:min(1180px,calc(100vw - 36px)) !important; height:min(820px,calc(100vh - 36px)) !important; max-width:none !important; overflow:hidden !important; border:1px solid #46464c !important; border-radius:20px !important; background:#1b1b1c !important; box-shadow:0 30px 90px rgba(0,0,0,.65) !important; color:#f2eff3 !important; }
#version-modal > div > div:first-child { min-height:64px !important; padding:10px 14px !important; border:0 !important; border-bottom:1px solid #38383d !important; background:#202022 !important; }
#version-modal > div > div:first-child > div { gap:8px !important; }
#version-prev,#version-next,#version-close { display:grid !important; place-items:center !important; width:34px !important; height:34px !important; padding:0 !important; border:0 !important; border-radius:9px !important; background:transparent !important; box-shadow:none !important; color:#aaa7af !important; font:500 17px/1 var(--studio-ui-font) !important; transform:none !important; }
#version-prev:not(:disabled):hover,#version-next:not(:disabled):hover,#version-close:hover { background:#303034 !important; color:#fff !important; transform:none !important; }
#version-prev:disabled,#version-next:disabled { opacity:.3 !important; }
#version-title { color:#f3f0f4 !important; font:650 14px/1 var(--studio-ui-font) !important; letter-spacing:0 !important; text-transform:none !important; }
#version-prompt-text { max-width:260px !important; color:#aaa7af !important; font:400 12px/1.4 var(--studio-ui-font) !important; }
#version-date { color:#7f7c84 !important; font:400 11px/1.4 var(--studio-ui-font) !important; }
#version-restore,#version-duplicate { min-height:36px !important; padding:0 14px !important; border:1px solid #45454b !important; border-radius:10px !important; box-shadow:none !important; font:650 12px/1 var(--studio-ui-font) !important; letter-spacing:0 !important; text-transform:none !important; transform:none !important; }
#version-restore { border-color:transparent !important; background:var(--studio-cream,#fbf1e0) !important; color:var(--studio-ink,#17151b) !important; box-shadow:-2px 0 0 rgba(23,201,255,.68),2px 0 0 rgba(255,49,95,.68) !important; }
#version-restore:hover { background:var(--studio-cream,#fbf1e0) !important; box-shadow:-3px 0 0 rgba(23,201,255,.78),3px 0 0 rgba(255,49,95,.78),0 7px 18px rgba(0,0,0,.22) !important; filter:brightness(1.04); transform:none !important; }
#version-duplicate { background:#29292d !important; color:#ece9ee !important; }
#version-duplicate:hover { border-color:#58585f !important; background:#343439 !important; box-shadow:none !important; transform:none !important; }
#version-iframe { margin:12px !important; width:calc(100% - 24px) !important; flex:1 1 auto !important; border:1px solid #3c3c42 !important; border-radius:14px !important; background:#fff !important; }

@media (max-width:760px) {
  #version-modal:not(.hidden) { padding:8px !important; }
  #version-modal > div { width:calc(100vw - 16px) !important; height:calc(100vh - 16px) !important; }
  #version-modal > div > div:first-child { flex-wrap:wrap !important; min-height:96px !important; }
  #version-prompt-text,#version-date { display:none !important; }
  #version-restore,#version-duplicate { padding:0 9px !important; font-size:11px !important; }
}
/* The panel-toggle icon on the left is the way back to the chat, so the old
   close button only has to stay reachable for keyboards. */
.studio-workspace-publish button.sr-only-close { width:1px; height:1px; min-height:0; padding:0; overflow:hidden; border:0; clip-path:inset(50%); }

.studio-workspace-project-chevron { width:7px; height:7px; margin-left:4px; border-right:1.6px solid #8d8a93; border-bottom:1.6px solid #8d8a93; transform:translateY(-2px) rotate(45deg); }
.studio-workspace-quick { display:flex; align-items:center; gap:2px; margin-left:12px; }
.studio-workspace-quick button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:9px; background:transparent; color:#b9bcc4; }
.studio-workspace-quick button:hover { background:#282a30; color:#fff; }
.studio-workspace-quick svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#studio-workspace-close { width:36px; padding:0; color:#aaa7ae; font-size:20px; }
.studio-workspace-panel { display:none; flex:1; min-height:0; position:relative; }
.studio-workspace-panel.is-active { display:flex; }
.studio-workspace-panel[data-workspace-panel='preview'] { padding:0 12px 12px; background:#1d1d1e; }
.studio-workspace-previewbar { position:absolute; top:-42px; left:50%; z-index:3; display:grid; grid-template-columns:26px 1fr 18px; align-items:center; gap:7px; width:300px; height:36px; padding:0 10px; border:1px solid #3a3a40; border-radius:999px; background:#26262a; color:#aaa7ae; transform:translateX(-50%); }
/* The device picker and the open-in-new link sit outside the pill, as flat icons. */
.studio-workspace-previewbar .studio-preview-device { position:absolute; left:-40px; width:26px; height:26px; }
.studio-workspace-previewbar a { position:absolute; right:-40px; }
.studio-workspace-previewbar svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.studio-preview-device { display:grid; place-items:center; }
.studio-workspace-previewbar button { display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:transparent; color:#aaa7ae; }
.studio-workspace-previewbar button:hover { background:#36363a; color:#fff; }
.studio-workspace-previewbar strong { color:#f0edf1; font-size:12.5px; font-weight:650; text-align:center; }
.studio-preview-chevron { color:#85828a; font-size:15px; text-align:center; }
.studio-workspace-previewbar a { display:grid; place-items:center; width:26px; height:26px; color:#c9c6cc; text-decoration:none; }
.studio-workspace-frame { width:100%; height:100%; overflow:hidden; border:1px solid #37363a; border-radius:18px; background:#fff; }
.studio-workspace-frame iframe { width:100%; height:100%; border:0; }
#studio-project-workspace .studio-workspace-preview-tools { display:flex; bottom:22px; }
.studio-workspace-sidebar { width:305px; flex:0 0 305px; padding:12px; border-right:1px solid rgba(0,225,255,.2); background:linear-gradient(180deg,#111329,#0d0d1c 55%,#160d20); }
.studio-workspace-search { min-height:42px; padding:11px 13px; border:1px solid #3d3c40; border-radius:10px; color:#85828a; font-size:12px; }
.studio-workspace-file-list,.studio-workspace-code-tree { margin-top:12px; color:#c9c6cc; font-size:12px; line-height:2; }
.studio-workspace-file-list { display:grid; gap:2px; line-height:1.3; }
.studio-workspace-file-list .studio-workspace-file { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:10px; padding:6px; text-align:left; }
.studio-workspace-file-list .studio-workspace-file img { width:34px; height:34px; border-radius:7px; object-fit:cover; background:#232326; }
.studio-workspace-file-list .studio-workspace-file span { overflow:hidden; color:var(--studio-silver); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.studio-workspace-file-list .studio-workspace-file:hover span,.studio-workspace-file-list .studio-workspace-file.is-active span { color:var(--studio-cream); }
.studio-workspace-file-list .studio-workspace-file:hover,.studio-workspace-file-list .studio-workspace-file.is-active { background:var(--studio-surface-2); color:var(--studio-cream); }
.studio-workspace-file-empty { margin:10px 6px; color:var(--studio-silver); font-size:12px; line-height:1.5; }
.studio-workspace-file-add { width:100%; margin-top:10px; min-height:38px; border:1px dashed var(--studio-line-silver); border-radius:10px; background:transparent; color:var(--studio-silver); font-size:12px; }
.studio-workspace-file-add:hover { border-color:var(--studio-silver); background:var(--studio-surface-2); color:var(--studio-cream); }
.studio-workspace-file-preview { max-width:min(560px,70%); max-height:60%; border:1px solid #3d3d42; border-radius:14px; object-fit:contain; }
/* Code view: searchable file tree on the left, tabbed source viewer on the right. */
.studio-code-searchbar { display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; gap:6px; }
.studio-code-searchbar input { width:100%; height:38px; padding:0 12px; border:1px solid var(--studio-line-silver); border-radius:11px; background:var(--studio-surface); color:var(--studio-cream); font:400 12.5px var(--studio-font); outline:0; }
.studio-code-searchbar input::placeholder { color:var(--studio-silver); opacity:.65; }
.studio-code-searchbar input:focus { border-color:var(--studio-cyan); box-shadow:0 0 0 3px rgba(23,201,255,.1); }
.studio-code-sort { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--studio-silver); }
.studio-code-sort svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.studio-code-sort:hover { background:var(--studio-surface-2); color:var(--studio-cream); }
.studio-code-sort:focus-visible { outline:2px solid var(--studio-cyan); outline-offset:2px; }

.studio-workspace-code-tree { display:grid; align-content:start; gap:1px; margin-top:12px; }
.studio-workspace-code-tree .studio-workspace-file { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:8px; min-height:30px; padding:0 7px; border-radius:8px; text-align:left; }
.studio-workspace-code-tree .studio-workspace-file span { overflow:hidden; color:var(--studio-silver); font:400 13px/1.4 var(--studio-ui-font); text-overflow:ellipsis; white-space:nowrap; }
.studio-workspace-code-tree .studio-workspace-file:hover { background:var(--studio-surface); }
.studio-workspace-code-tree .studio-workspace-file:hover span,
.studio-workspace-code-tree .studio-workspace-code-file.is-active span { color:var(--studio-cream); }
.studio-workspace-code-tree .studio-workspace-code-file.is-active { background:var(--studio-surface-2); box-shadow:inset 2px 0 var(--studio-cyan); }
.studio-workspace-code-tree .studio-workspace-file:focus-visible { outline:2px solid var(--studio-cyan); outline-offset:2px; }
.studio-code-badge { display:grid; place-items:center; width:20px; height:18px; border:1px solid rgba(255,49,95,.25); border-radius:5px; background:rgba(255,49,95,.1); color:var(--studio-crimson); font:600 8.5px/1 var(--studio-ui-font); font-style:normal; letter-spacing:.02em; }
.studio-code-chevron { width:0; height:0; margin-left:5px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid var(--studio-silver); transition:transform .15s ease; }
.studio-code-chevron.is-open { transform:rotate(90deg); }

.studio-workspace-codeview { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--studio-surface); }
.studio-code-tabs { display:flex; align-items:center; gap:12px; min-height:58px; padding:9px 15px; border-bottom:1px solid rgba(251,241,224,.08); background:#17151b; }
.studio-code-tab { display:flex; align-items:center; gap:12px; min-width:0; height:40px; padding:0 12px 0 14px; border:1px solid rgba(184,184,188,.3); border-radius:12px; background:#1b1920; color:#fbf1e0; box-shadow:none; }
.studio-code-tab em { overflow:hidden; font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.studio-code-tab button { display:grid; flex:0 0 auto; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:transparent; color:#b8b8bc; font-size:17px; line-height:1; }
.studio-code-tab button:hover { background:rgba(251,241,224,.08); color:#fbf1e0; }
.studio-code-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.studio-code-actions button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:9px; background:transparent; color:#b8b8bc; box-shadow:none; transition:background .18s ease,color .18s ease; }
.studio-code-actions button:hover { background:rgba(251,241,224,.07); color:#fbf1e0; box-shadow:none; transform:none; }
.studio-code-actions button.is-done { color:#fbf1e0; }
.studio-code-actions svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.studio-code-download { display:flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 12px; border:0; border-radius:9px; background:transparent; color:#b8b8bc; box-shadow:none; font:600 13px/1 var(--studio-font); text-decoration:none; transition:background .18s ease,color .18s ease; }
.studio-code-download:hover { background:rgba(251,241,224,.07); color:#fbf1e0; box-shadow:none; filter:none; transform:none; }
.studio-code-actions button:focus-visible,.studio-code-download:focus-visible,.studio-code-tab button:focus-visible { outline:2px solid #17c9ff; outline-offset:2px; }

.studio-code-scroll { flex:1; min-height:0; overflow:auto; }
.studio-code-grid { display:grid; grid-template-columns:auto minmax(0,1fr); align-content:start; padding:12px 0; font:400 12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.studio-code-num { padding:0 16px 0 18px; color:var(--studio-silver); opacity:.6; text-align:right; user-select:none; }
.studio-code-line { padding-right:24px; color:var(--studio-cream); white-space:pre-wrap; overflow-wrap:anywhere; }
.studio-code-grid i { font-style:normal; }
.tok-key { color:#b77cff; font-weight:600; }
.tok-str { color:#ffd166; }
.tok-num { color:#ff7a6e; }
.tok-com { color:#65d6a6; font-style:italic !important; }
.tok-fn { color:#00e1ff; }
.tok-tag { color:#ff3da9; }
.tok-attr { color:#ff86d0; }
.tok-prop { color:#52dfff; }
.studio-workspace-codeview .studio-workspace-blank { flex:1; }
.studio-workspace-file { display:block; width:100%; padding:4px 9px; border:0; border-radius:7px; background:transparent; color:#c9c6cc; text-align:left; }
.studio-workspace-file:hover { background:#2d2d30; color:#fff; }
.studio-workspace-code-tree { white-space:pre-line; }
.studio-workspace-blank { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; background:#171718; color:#8f8c94; }
.studio-workspace-blank > span { font-size:30px; }
.studio-workspace-blank strong { color:#d8d5da; font-size:14px; }
.studio-workspace-blank small { font-size:11px; }















/* Build progress: CI surface, shared globe and no legacy comic badge. */
#progress .progress-card {
  width:min(380px,calc(100% - 32px)); min-width:0; padding:24px !important;
  border:1px solid var(--studio-line-strong) !important; border-radius:20px !important;
  background:var(--studio-surface) !important; color:var(--studio-cream) !important;
  box-shadow:-2px 0 rgba(23,201,255,.42),2px 0 rgba(255,49,95,.42),0 24px 64px rgba(0,0,0,.45) !important;
  font-family:var(--studio-font) !important; transform:none !important;
}
#progress .progress-card::before,#progress .progress-card::after { display:none !important; }
#progress .progress-card .progress-title { color:var(--studio-cream) !important; font:600 17px/1.4 var(--studio-font) !important; text-transform:none !important; letter-spacing:0 !important; text-shadow:none !important; }
#progress #progress-step { color:var(--studio-silver) !important; font:400 13px/1.5 var(--studio-font) !important; white-space:normal; text-align:center; }
#progress #progress-mode { background:var(--studio-surface-2) !important; color:var(--studio-silver) !important; border:1px solid var(--studio-line) !important; border-radius:999px !important; font:500 11px/1.4 var(--studio-font) !important; box-shadow:none !important; }

/* Inline failures stay readable beside the editor tabs. */
#error:not(.hidden) {
  display:flex; align-items:center; gap:8px; max-width:100%; min-width:0; flex-shrink:0; margin:8px 12px;
  padding:0; border:0; border-radius:0;
  background:transparent; color:var(--studio-cream) !important;
  box-shadow:none;
}
#error #error-msg { color:var(--studio-cream); font:400 12px/1.45 var(--studio-font); overflow-wrap:anywhere; }

/* The fixed-height composer must not shrink when a build error appears. */
#app-screen:has(#preview-container:not(.hidden)) #bottom-panel > #error:not(.hidden) {
  position:absolute;
  bottom:calc(100% + 12px);
  left:16px;
  right:16px;
  z-index:5;
  margin:0;
  max-height:120px;
  overflow-y:auto;
}

/* Share website: current dark Studio treatment. */
#share-modal:not(.hidden) { display:flex !important; align-items:center !important; justify-content:center !important; padding:20px !important; background:rgba(7,7,9,.72) !important; backdrop-filter:blur(12px); }
#share-modal .share-card { position:relative !important; display:flex !important; flex-direction:column !important; width:min(600px,calc(100vw - 40px)) !important; max-width:600px !important; max-height:calc(100vh - 40px) !important; overflow:auto !important; gap:0 !important; padding:24px !important; border:1px solid #4a494f !important; border-radius:20px !important; background:#242326 !important; box-shadow:0 32px 100px rgba(0,0,0,.65) !important; color:#f2eff3 !important; text-align:left !important; }
#share-modal .share-pill { position:static !important; order:1; display:block !important; margin:0 48px 4px 0 !important; padding:0 0 14px !important; border:0 !important; border-radius:0 !important; background:linear-gradient(90deg,rgba(23,201,255,.72),rgba(251,241,224,.1) 24%,rgba(251,241,224,.1) 76%,rgba(255,49,95,.72)) left bottom/100% 1px no-repeat !important; box-shadow:none !important; color:#fbf1e0 !important; font-size:20px !important; font-weight:750 !important; letter-spacing:-.02em !important; text-transform:none !important; transform:none !important; }
#share-modal .share-pill::after { content:'Share your published website with a direct link or social app.'; display:block; margin-top:7px; color:#99969e; font-size:11px; font-weight:500; letter-spacing:0; line-height:1.45; }
#share-modal .share-close { position:absolute !important; top:16px !important; right:16px !important; z-index:3; display:grid !important; place-items:center !important; width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; padding:0 !important; border:1px solid #49484e !important; border-radius:50% !important; background:#303034 !important; box-shadow:none !important; color:#c9c6cc !important; font-size:19px !important; transform:none !important; }
#share-modal .share-close:hover { background:#3a393e !important; color:#fff !important; }
#share-modal .share-brand { display:none !important; }
/* Panel dissolves into the card flex so its preview + publish children order independently. */
#share-modal .share-preview-panel { display:contents !important; }
#share-modal .share-preview-card { order:2; display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin:16px 0 0 !important; padding:12px !important; border:1px solid rgba(251,241,224,.15) !important; border-radius:14px !important; background:#211f27 !important; box-shadow:-1px 0 0 rgba(23,201,255,.34),1px 0 0 rgba(255,49,95,.34) !important; }
#share-modal .share-preview-thumb-wrap { border:1px solid #3c3b40 !important; border-radius:10px !important; background:#252428 !important; }
#share-modal .share-preview-loading { color:#c9b8ff !important; background:#1f1e22 !important; }
#share-modal #share-preview-loading-text { color:#9f9aa6 !important; }
#share-modal .share-preview-placeholder { background:#1f1e22 !important; }
#share-modal .share-preview-placeholder-icon { color:#5a5960 !important; }
#share-modal .share-preview-placeholder-text { color:#99969e !important; }
#share-modal .share-preview-title { color:#f2eff3 !important; font-size:13px !important; font-weight:700 !important; }
#share-modal .share-preview-description { color:#99969e !important; font-size:11px !important; }
#share-modal .share-publish-row { order:4; display:flex !important; justify-content:center !important; margin:16px 0 0 !important; }
#share-modal .share-publish:not(.hidden) { width:100% !important; min-height:42px !important; border:1px solid rgba(184,184,188,.4) !important; border-radius:999px !important; background:rgba(251,241,224,.024) !important; box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important; color:#fbf1e0 !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; transform:none !important; }
#share-modal .share-publish:not(.hidden):hover { border-color:rgba(251,241,224,.32) !important; background:rgba(251,241,224,.055) !important; filter:brightness(1.08) !important; }
#share-modal .share-published-status:not(.hidden) { display:inline-flex !important; align-items:center !important; gap:8px !important; min-height:34px !important; padding:0 13px !important; border:1px solid rgba(184,184,188,.34) !important; border-radius:999px !important; background:#211f27 !important; box-shadow:-2px 0 0 rgba(23,201,255,.58),2px 0 0 rgba(255,49,95,.58) !important; color:#b8b8bc !important; font:500 11px/1.3 var(--studio-font) !important; letter-spacing:0 !important; }
#share-modal .share-published-status > span { color:#17c9ff !important; font-size:12px !important; text-shadow:0 0 10px rgba(23,201,255,.45) !important; }
#share-modal .share-controls { order:3; width:100% !important; min-width:0 !important; margin-top:18px !important; color:#e8e5e9 !important; text-align:left !important; }
#share-modal .share-section { margin-top:18px !important; }
#share-modal .share-controls .share-section:first-child { margin-top:0 !important; }
#share-modal .share-label { margin:0 0 7px !important; color:#aaa7ae !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important; }
#share-modal .share-link-row { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:8px !important; margin:0 !important; }
#share-modal .share-input { min-width:0 !important; height:42px !important; padding:0 12px !important; border:1px solid rgba(184,184,188,.32) !important; border-radius:10px !important; background:#17151b !important; box-shadow:-1px 0 0 rgba(23,201,255,.46),1px 0 0 rgba(255,49,95,.46) !important; color:#fbf1e0 !important; font-size:11px !important; }
#share-modal .share-copy { min-width:76px !important; height:42px !important; padding:0 14px !important; border:1px solid rgba(184,184,188,.4) !important; border-radius:999px !important; background:rgba(251,241,224,.024) !important; box-shadow:-2px 0 0 rgba(23,201,255,.58),2px 0 0 rgba(255,49,95,.58) !important; color:#fbf1e0 !important; font-size:11px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; transform:none !important; }
#share-modal .share-copy:hover { border-color:rgba(251,241,224,.34) !important; background:rgba(251,241,224,.06) !important; filter:brightness(1.08) !important; }
#share-modal .share-socials { display:grid !important; grid-template-columns:repeat(7,38px) !important; gap:8px !important; margin:0 !important; }
#share-modal .share-social { display:grid !important; place-items:center !important; width:38px !important; min-width:38px !important; height:38px !important; min-height:38px !important; padding:0 !important; border:1px solid rgba(251,241,224,.28) !important; border-radius:10px !important; background:rgba(251,241,224,.045) !important; box-shadow:none !important; color:#fbf1e0 !important; transform:none !important; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important; }
#share-modal .share-social:hover { border-color:rgba(251,241,224,.58) !important; background:rgba(251,241,224,.1) !important; box-shadow:0 0 18px rgba(251,241,224,.14) !important; color:#fbf1e0 !important; transform:translateY(-2px) !important; }
#share-modal .share-social svg { width:17px !important; height:17px !important; }
#share-modal .share-qr-toggle { width:100% !important; min-height:42px !important; padding:0 14px !important; border:1px solid rgba(184,184,188,.3) !important; border-radius:10px !important; background:#211f27 !important; box-shadow:-1px 0 0 rgba(23,201,255,.38),1px 0 0 rgba(255,49,95,.38) !important; color:#fbf1e0 !important; font-size:11px !important; letter-spacing:0 !important; text-transform:none !important; transform:none !important; }
#share-modal .share-qr-toggle:hover { border-color:rgba(251,241,224,.3) !important; background:#28252e !important; }
#share-modal .share-qr { margin-top:10px !important; padding:14px !important; border:1px solid #414045 !important; border-radius:12px !important; background:#1b1b1e !important; text-align:center !important; }
#share-modal .share-qr-box { display:grid !important; place-items:center !important; width:170px !important; height:170px !important; margin:0 auto !important; padding:10px !important; border-radius:10px !important; background:#fff !important; }
#share-modal .share-qr-hint { margin:9px 0 0 !important; color:#99969e !important; font-size:10px !important; }
#share-modal .share-actions { display:flex !important; align-items:center !important; justify-content:center !important; margin-top:18px !important; padding-top:14px !important; border-top:1px solid rgba(251,241,224,.08) !important; }
#share-modal .share-built-link { display:inline-flex !important; align-items:baseline !important; gap:4px !important; color:#8f8c94 !important; font:500 11px/1.4 var(--studio-font) !important; letter-spacing:0 !important; text-decoration:none !important; }
#share-modal .share-built-wordmark { color:#d5d1d7 !important; font:600 11px/1.4 var(--studio-font) !important; letter-spacing:0 !important; text-shadow:none !important; text-transform:none !important; }
#share-modal .share-built-link:hover,#share-modal .share-built-link:hover .share-built-wordmark { color:#fbf1e0 !important; }
#share-modal .share-halftone { display:none !important; }

/* Book a human: styled with the same tokens as the Studio project workspace
   (panel #1d1d1e, #343436 dividers, and the white preview frame at 18px radius). */
#human-help-modal { background:rgba(7,7,9,.72) !important; backdrop-filter:blur(12px); }
#human-help-modal::before { display:none !important; }
#human-help-modal .human-help-window { width:min(560px,calc(100vw - 40px)) !important; height:min(720px,calc(100vh - 40px)) !important; border:1px solid #343436 !important; border-radius:18px !important; box-shadow:0 32px 100px rgba(0,0,0,.65) !important; background:#1d1d1e !important; }
#human-help-modal .human-help-header { min-height:68px !important; padding:0 18px !important; border-bottom:1px solid #343436 !important; background:#1d1d1e !important; }
#human-help-modal .human-help-title { color:#f0edf1 !important; font-size:15px !important; font-weight:650 !important; letter-spacing:-.01em !important; text-transform:none !important; }
#human-help-modal .human-help-close { display:grid !important; place-items:center !important; width:38px !important; height:38px !important; padding:0 !important; border:1px solid #424146 !important; border-radius:50% !important; background:#28282b !important; box-shadow:none !important; color:#c9c6cc !important; font-size:19px !important; line-height:1 !important; transform:none !important; }
#human-help-modal .human-help-close:hover { background:#36363a !important; color:#fff !important; }
#human-help-modal .human-help-frame-wrap { padding:12px !important; background:#1d1d1e !important; }
/* Cross-origin Google iframe we can't theme (invert mangles the avatar/Meet icon),
   so present it exactly like the Studio's .studio-workspace-frame: white, 18px. */
#human-help-modal .human-help-frame, #human-help-modal #human-help-iframe { border:1px solid #37363a !important; border-radius:18px !important; background:#fff !important; box-shadow:none !important; filter:none !important; }

/* Sharper hairline borders: 1px collapses to a true 0.5px on retina.
   Only the elements that intentionally have a border — a wildcard here reveals the
   phantom gray-200 borders Tailwind Preflight leaves at width:0 on everything. */
@media (min-resolution: 2dppx) {
  #sidebar .studio-workspace-card,
  #sidebar .studio-badge,
  #sidebar .studio-workspace-links button,
  #app-screen .studio-primary-nav,
  #app-screen .studio-landing-composer,
  #app-screen .studio-dashboard .icon-btn,
  #app-screen .studio-dashboard #welcome-new-btn.mic-btn,
  #app-screen .studio-dashboard-tools,
  #app-screen .studio-dashboard-tools button,
  #app-screen .studio-project-shelf,
  #app-screen .studio-project-card,
  #app-screen .studio-project-search,
  .share-card, .human-help-window, .credits-shop-card,
  #templates-modal > div, #template-modal > div, #version-modal > div,
  #dialog-modal > div, #placeholder-form-modal > div,
  #app-screen .studio-connector-card,
  #app-screen #studio-connector-search.studio-window-search,
  #app-screen #studio-template-search.studio-window-search,
  #app-screen #studio-projects-search.studio-window-search,
  #app-screen .studio-connectors-request,
  #app-screen .studio-connectors-request input,
  #app-screen .studio-connectors-request button,
  .studio-window.is-open {
    border-width: 0.5px !important;
  }
  #app-screen .studio-connectors-request::after { height:0.5px; top:0; }
  #preview-empty:not(.hidden) {
    border-top-width: 0.5px !important;
    border-left-width: 0.5px !important;
    border-right-width: 0.5px !important;
  }
}

/* Tablet split view. Excluded from the mobile Studio, where #preview-area is a
   whole page of the horizontal sheet rather than a pane sharing the width. */
@media (max-width: 900px) {
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)) #studio-project-activity { right:55%; }
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)) #preview-area { left:45% !important; }
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) { right:55% !important; }
}

@media (max-width: 820px) {
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #preview-container:not(.hidden) { position:absolute !important; inset:0 !important; width:100% !important; max-width:none !important; height:100% !important; min-height:0 !important; border:0 !important; border-radius:0 !important; }
}

/* Phone composer — matches the Studio reference: one text line that grows upward,
   with a 33px action row beneath it.
   This block is deliberately last in the file. Both `@media (max-width: 820px)`
   blocks above contain rules that sit *after* their nested 480px block, so an
   override written inside that nested block loses on source order no matter how
   the selector is written. Ordering it here settles the cascade without
   specificity padding. */
@media (max-width: 480px) {
  #app-screen.is-mobile-studio #prompt,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #prompt {
    height:var(--studio-prompt-h, 87px) !important;
    padding:14px 16px 51px 16px !important;
    font-size:16px !important;
    line-height:1.35 !important;
  }
  #app-screen.is-mobile-studio .studio-prompt-add,
  #app-screen.is-mobile-studio .studio-prompt-more,
  #app-screen.is-mobile-studio #prompt-record-btn,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #prompt-record-btn {
    width:33px !important;
    height:33px !important;
    bottom:12px !important;
  }
  #app-screen.is-mobile-studio .studio-prompt-add { left:14px !important; font-size:19px !important; }
  #app-screen.is-mobile-studio .build-power-row #build-btn { width:33px !important; min-width:33px !important; height:33px !important; min-height:33px !important; background-size:17px 17px !important; }
  #app-screen.is-mobile-studio .studio-prompt-more { left:55px !important; font:700 15px/1 var(--studio-font) !important; }
  /* The button's own label is suppressed in favour of the stroked mic the shell
     injects, matching the dock. */
  #app-screen.is-mobile-studio #prompt-record-btn,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #prompt-record-btn { right:14px !important; display:grid !important; place-items:center !important; color:transparent !important; font-size:0 !important; }
  #app-screen.is-mobile-studio #prompt-record-btn::after,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #prompt-record-btn::after { content:none !important; }
  #app-screen.is-mobile-studio #prompt-record-btn .studio-dock-icon { width:16px !important; height:16px !important; stroke:#f2eff3 !important; }
  #app-screen.is-mobile-studio #prompt-actions,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions.flex {
    position:absolute !important;
    inset:auto 55px 12px auto !important;
    height:33px !important;
  }
  
  
  
}

/* ── Credits shop, on the connectors window system ──────────────────────────── */
#credits-shop-modal { background:rgba(8,8,10,.62) !important; backdrop-filter:blur(2px); }
.credits-shop-card { width:min(1040px,calc(100vw - 48px)) !important; max-height:calc(100vh - 64px); overflow:auto;
  padding:22px !important; border:1px solid var(--cx-line) !important; border-radius:18px !important;
  background:var(--cx-panel) !important; box-shadow:0 40px 120px rgba(0,0,0,.62) !important; color:var(--cx-text) !important; }
.credits-shop-close { position:absolute; top:16px; right:16px; display:grid !important; place-items:center; width:30px !important; height:30px !important;
  padding:0 !important; border:0 !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important;
  color:var(--cx-muted) !important; font-size:18px !important; transform:none !important; }
.credits-shop-close:hover { background:var(--cx-fill) !important; color:var(--cx-text) !important; }
.credits-shop-card .path-pill { display:inline-block; margin:0 0 10px !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; color:var(--cx-dim) !important;
  font:600 11px/14px var(--studio-font) !important; letter-spacing:.08em !important; text-transform:uppercase; transform:none !important; }
.credits-shop-title { margin:0 0 6px !important; color:#fff !important; font:700 20px/26px var(--studio-font) !important; }
.credits-shop-tagline { color:var(--cx-muted) !important; font:400 13px/19px var(--studio-font) !important; font-weight:400 !important; }
.credits-shop-balance { margin:14px 0 0 !important; padding:4px 10px !important; border:1px solid var(--cx-line) !important; border-radius:999px !important;
  background:rgba(23,201,255,.12) !important; box-shadow:none !important; color:var(--cx-cyan) !important;
  font:600 10px/16px var(--studio-font) !important; letter-spacing:.04em !important; }
.credits-shop-balance strong { color:var(--cx-cyan) !important; font-size:13px !important; }
.credits-shop-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; gap:10px !important; margin-top:18px !important; }
.credits-pack { padding:16px !important; border:1px solid var(--cx-line) !important; border-radius:11px !important;
  background:var(--cx-surface) !important; box-shadow:none !important; color:var(--cx-text) !important; transform:none !important; }
.credits-pack--featured { border-color:rgba(23,201,255,.45) !important; background:var(--cx-surface) !important; }
.credits-pack-badge { top:-9px !important; padding:3px 9px !important; border:0 !important; border-radius:999px !important;
  background:rgba(23,201,255,.16) !important; box-shadow:none !important; color:var(--cx-cyan) !important;
  font:600 10px/14px var(--studio-font) !important; letter-spacing:.03em !important; transform:none !important; }
.credits-pack-name { color:var(--cx-muted) !important; font:400 13px/18px var(--studio-font) !important; }
.credits-pack-price { margin:2px 0 8px !important; color:var(--cx-text) !important; font:700 26px/32px var(--studio-font) !important; }
.credits-pack-credits { color:var(--cx-text) !important; font:400 13px/18px var(--studio-font) !important; }
.credits-pack-credits strong { color:var(--cx-text) !important; font-weight:700 !important; }
.credits-pack-meta, .credits-pack-rate { color:var(--cx-muted) !important; font:400 12px/17px var(--studio-font) !important; }
.credits-pack-buy { padding-top:16px !important; min-height:0 !important; }
.credits-pack-buy::before { top:0 !important; left:-16px !important; right:-16px !important; border-top:1px solid var(--cx-line) !important; border-image:none !important; }
.credits-pack-link { min-height:34px !important; border:1px solid var(--cx-line-strong) !important; border-radius:8px !important;
  background:var(--cx-fill) !important; box-shadow:none !important; color:var(--cx-text) !important;
  font:600 12px/16px var(--studio-font) !important; transform:none !important; }
.credits-pack-link:hover { background:rgba(255,255,255,.1) !important; transform:none !important; }
.credits-pack--featured .credits-pack-link { background:rgba(23,201,255,.14) !important; border-color:rgba(23,201,255,.4) !important; color:var(--cx-cyan) !important; }
.credits-pack-soon { padding:3px 8px !important; border:0 !important; border-radius:999px !important; background:var(--cx-fill) !important;
  box-shadow:none !important; color:var(--cx-dim) !important; font:600 10px/14px var(--studio-font) !important; letter-spacing:.04em !important; }
.credits-shop-foot { margin-top:16px !important; color:var(--cx-dim) !important; font:400 12px/17px var(--studio-font) !important; font-weight:400 !important; }
.prompt-uploads-menu { display:none; }

/* Composer controls (desktop split view): one 40px row, 16px from the bottom of
   the composer box, attachments on the left and Build/mic/send on the right. */





/* Uploads picker hanging off the + button. */
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-menu:not(.hidden) { position:absolute; left:20px; bottom:68px; z-index:6; display:grid !important; gap:4px; width:300px; max-height:280px; padding:7px; overflow:auto; border:1px solid #3a3a40; border-radius:16px; background:#242427; box-shadow:0 24px 70px rgba(0,0,0,.55); }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-menu-head { padding:6px 8px 4px; color:#8b8b90; font:700 10px/1.2 var(--studio-font); letter-spacing:.04em; }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-item { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; padding:6px; border:1px solid transparent; border-radius:10px; background:transparent; color:#eeebef; font:500 12px/1.3 var(--studio-font); text-align:left; }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-item:hover { border-color:#4a4a52; background:#2f2f34; }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-item img { width:38px; height:38px; border-radius:7px; object-fit:cover; background:#17171a; }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-item small { display:block; color:#8b8b90; font-size:10px; font-weight:500; }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-empty { padding:10px 8px; color:#8b8b90; font:500 12px/1.4 var(--studio-font); }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-upload { display:flex; align-items:center; gap:8px; padding:9px 8px; border:1px dashed #4a4a52; border-radius:10px; background:transparent; color:#d8d5db; font:500 12px/1 var(--studio-font); }
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-upload:hover { border-color:#6a6970; background:#2f2f34; color:#fff; }

@media (max-width: 820px) {
  /* The phone composer keeps its own three-control row. */
  #app-screen.is-mobile-studio .prompt-uploads-menu { display:none !important; }
}

/* Final desktop split-height lock. This intentionally follows every legacy
   shell rule so open-chat and closed-chat toolbars are both exactly 48px. */
@media (min-width:821px) {
  html body #app-screen:has(#preview-container:not(.hidden)) #url-bar:not(.hidden) {
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-toolbar {
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
  }
  html body #app-screen:has(#preview-container:not(.hidden)) #studio-project-activity > header {
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
  }
  html body #app-screen:has(#preview-container:not(.hidden)) #preview-area {
    top:48px !important;
  }
}

/* Final CI lock for compact project actions. These intentionally outrank the
   legacy responsive glass rules so the documented families win the cascade. */
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share {
  border:1px solid rgba(255,255,255,.25) !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share::after { display:none !important; }
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share:hover {
  border-color:rgba(255,255,255,.4) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy {
  border:1px solid var(--studio-line-silver) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy::after { display:none !important; }
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy:hover {
  border-color:var(--studio-line-silver) !important;
  background:rgba(251,241,224,.045) !important;
  color:var(--studio-cream) !important;
  box-shadow:-6px 0 0 rgba(23,201,255,.8),6px 0 0 rgba(255,49,95,.8) !important;
  filter:brightness(1.12) !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish {
  overflow:visible !important;
  border:0 !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.72),3px 0 0 rgba(255,49,95,.72),0 8px 24px rgba(0,0,0,.53) !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish::after { display:none !important; }
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish:hover {
  border:0 !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-5px 0 0 rgba(23,201,255,.8),5px 0 0 rgba(255,49,95,.8),0 10px 28px rgba(0,0,0,.56) !important;
  filter:brightness(1.06) !important;
}

/* Project preview toolbar: compact adaptations of the four documented CI
   button families. Dimensions stay unchanged; only visual grammar changes. */
#app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-split-history,
  #studio-split-panel,
  #studio-split-refresh,
  #studio-split-open
) {
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--studio-silver) !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease !important;
}
#app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-split-history,
  #studio-split-panel,
  #studio-split-refresh,
  #studio-split-open
):hover {
  border-color:var(--studio-line-strong) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  transform:translateY(-1px);
}

/* L01 / active view */
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary #studio-split-preview {
  height:36px !important;
  padding:3px 13px 3px 3px !important;
  border:1px solid var(--studio-line-silver) !important;
  border-radius:999px !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  animation:studio-ci-l01 3.6s ease-in-out infinite;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary #studio-split-preview::after { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary #studio-split-preview:hover {
  border-color:var(--studio-line-silver) !important;
  background:rgba(251,241,224,.045) !important;
  color:var(--studio-cream) !important;
  filter:brightness(1.12) !important;
  transform:translateY(-1px);
}

/* Secondary / current page */
#app-screen:has(#preview-container:not(.hidden)) .studio-split-page > div {
  border:1px solid rgba(255,255,255,.25) !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-page > div strong { color:var(--studio-cream) !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-page > div > span { color:var(--studio-silver) !important; }

/* Secondary / share */
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share {
  display:grid !important;
  place-items:center;
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:50% !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share::after { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share:hover {
  border-color:rgba(255,255,255,.4) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
  transform:translateY(-1px);
}

/* L01 / purchase */
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy {
  display:grid !important;
  place-items:center;
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border:1px solid var(--studio-line-silver) !important;
  border-radius:50% !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  animation:studio-ci-l01 3.6s ease-in-out infinite;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy::after { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy:hover {
  border-color:var(--studio-line-silver) !important;
  background:rgba(251,241,224,.045) !important;
  color:var(--studio-cream) !important;
  filter:brightness(1.12) !important;
  transform:translateY(-1px);
}

/* OA / compact publish */
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish {
  display:grid !important;
  place-items:center;
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:50% !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.72),3px 0 0 rgba(255,49,95,.72),0 8px 24px rgba(0,0,0,.53) !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  animation:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish::after { display:none !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish:hover {
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-5px 0 0 rgba(23,201,255,.8),5px 0 0 rgba(255,49,95,.8),0 10px 28px rgba(0,0,0,.56) !important;
  filter:brightness(1.06) !important;
  transform:translateY(-1px);
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-toolbar button:focus-visible {
  outline:2px solid var(--studio-silver) !important;
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce) {
  #app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-preview,#studio-split-buy) { animation:none !important; }
}

/* Session sidebar reveal --------------------------------------------------- */
.studio-session-sidebar-trigger { position:relative; isolation:isolate; cursor:pointer; }
.studio-session-sidebar-trigger > img,
.studio-session-sidebar-trigger > svg {
  grid-area:1 / 1;
  transition:opacity .16s ease,filter .16s ease,transform .16s ease;
}
.studio-session-trigger-menu,
.studio-session-trigger-pin,
.studio-session-trigger-close {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transform:scale(.82);
  pointer-events:none;
}
.studio-session-trigger-tooltip {
  position:absolute;
  z-index:3;
  top:50%;
  left:calc(100% + 9px);
  display:none;
  width:max-content;
  padding:6px 9px;
  border:1px solid var(--studio-line-strong);
  border-radius:8px;
  background:var(--studio-surface-2);
  color:var(--studio-silver) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.32);
  font:500 11px/1 var(--studio-font) !important;
  transform:translateY(-50%);
  pointer-events:none;
}
.studio-session-tooltip-close { display:none; }
.studio-session-trigger-tooltip span { color:var(--studio-silver) !important; }
.studio-session-sidebar-dock { display:none; }

@media (min-width:1101px) {
  /* Keep the real navigation just off-canvas during a session so it can reveal
     smoothly without maintaining a second copy of the menu. */
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)) #sidebar {
    position:fixed !important;
    z-index:190;
    top:0 !important;
    bottom:0;
    left:0;
    display:flex !important;
    width:224px !important;
    visibility:hidden;
    box-shadow:none;
    transform:translate3d(-100%,0,0) !important;
    pointer-events:none;
    backface-visibility:hidden;
    will-change:transform;
    transition:transform .42s cubic-bezier(.4,0,.2,1),box-shadow .36s ease,visibility 0s linear .42s !important;
  }
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)).is-session-sidebar-peek #sidebar,
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)).is-session-sidebar-open #sidebar {
    visibility:visible;
    transform:translate3d(0,0,0) !important;
    pointer-events:auto;
    transition:transform .42s cubic-bezier(.4,0,.2,1),box-shadow .36s ease,visibility 0s !important;
  }
  #app-screen:not(.is-mobile-studio).is-session-sidebar-peek #sidebar {
    box-shadow:18px 0 48px rgba(0,0,0,.34);
  }
  #app-screen:is(.is-session-sidebar-peek,.is-session-sidebar-open) #sidebar > .studio-sidebar-brand:first-child {
    position:relative !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 !important;
  }
  #app-screen:is(.is-session-sidebar-peek,.is-session-sidebar-open) #sidebar > .studio-sidebar-brand:first-child > .studio-mark,
  #app-screen:is(.is-session-sidebar-peek,.is-session-sidebar-open) #sidebar > .studio-sidebar-brand:first-child > .studio-mark-icon,
  #app-screen:is(.is-session-sidebar-peek,.is-session-sidebar-open) #sidebar > .studio-sidebar-brand:first-child > .studio-brand-right {
    display:none !important;
  }
  #app-screen:is(.is-session-sidebar-peek,.is-session-sidebar-open) .studio-session-sidebar-dock {
    position:absolute;
    z-index:2;
    top:8px;
    left:16px;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--studio-silver);
    cursor:pointer;
  }
  .studio-session-sidebar-dock:hover { background:var(--studio-surface-2) !important; color:var(--studio-cream); }
  .studio-session-sidebar-dock > img,
  .studio-session-sidebar-dock > svg {
    grid-area:1 / 1;
    transition:opacity .16s ease,filter .16s ease,transform .16s ease;
  }
  .studio-session-dock-logo { width:30px; height:auto; opacity:0; transform:scale(.82); }
  .studio-session-dock-pin,
  .studio-session-dock-close {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0;
    transform:scale(.82);
  }
  #app-screen.is-session-sidebar-peek .studio-session-dock-pin { opacity:1; transform:scale(1); }
  #app-screen.is-session-sidebar-open .studio-session-dock-logo { opacity:1; transform:scale(1); }
  #app-screen.is-session-sidebar-open .studio-session-sidebar-dock:hover .studio-session-dock-logo {
    opacity:0;
    filter:blur(4px);
    transform:scale(.82);
  }
  #app-screen.is-session-sidebar-open .studio-session-sidebar-dock:hover .studio-session-dock-close {
    opacity:1;
    transform:scale(1);
  }
  #app-screen.is-session-sidebar-open .studio-session-sidebar-dock:hover .studio-session-trigger-tooltip { display:block; }
  #app-screen.is-session-sidebar-open .studio-session-sidebar-dock .studio-session-tooltip-open { display:none; }
  #app-screen.is-session-sidebar-open .studio-session-sidebar-dock .studio-session-tooltip-close { display:inline; }

  /* Loaded state: W -> hamburger. During the hover-preview it becomes the
     panel/pin affordance. Once pinned the W returns, then becomes close on hover. */
  #app-screen.is-session-nav-ready:not(.is-session-sidebar-open) .studio-session-trigger-logo {
    opacity:0;
    filter:blur(4px);
    transform:scale(.82);
  }
  #app-screen.is-session-nav-ready:not(.is-session-sidebar-open):not(.is-session-sidebar-peek) .studio-session-trigger-menu,
  #app-screen.is-session-sidebar-peek .studio-session-trigger-pin {
    opacity:1;
    transform:scale(1);
  }
  #app-screen.is-session-sidebar-peek .studio-session-trigger-menu { opacity:0; transform:scale(.82); }
  #app-screen.is-session-sidebar-open .studio-session-trigger-logo { opacity:1; transform:scale(1); }
  #app-screen.is-session-sidebar-open .studio-session-sidebar-trigger:hover .studio-session-trigger-logo {
    opacity:0;
    filter:blur(4px);
    transform:scale(.82);
  }
  #app-screen.is-session-sidebar-open .studio-session-sidebar-trigger:hover .studio-session-trigger-close {
    opacity:1;
    transform:scale(1);
  }
  #app-screen.is-session-sidebar-open .studio-session-tooltip-open { display:none; }
  #app-screen.is-session-sidebar-open .studio-session-tooltip-close { display:inline; color:var(--studio-silver) !important; }

  /* Once pinned, the sidebar owns the top-left control and the chat moves right
     to expose all three panels without duplicating the W. */
  #app-screen.is-session-sidebar-open .studio-session-sidebar-trigger {
    visibility:hidden;
    pointer-events:none;
  }

  /* Pinning the 224px menu narrows the preview header. Keep Preview and More
     clickable instead of letting the centred page control overlap them. */
  #app-screen.is-session-sidebar-open:has(#preview-container:not(.hidden)) #studio-split-files-shortcut,
  #app-screen.is-session-sidebar-open:has(#preview-container:not(.hidden)) #studio-split-code-shortcut,
  #app-screen.is-session-sidebar-open:has(#preview-container:not(.hidden)) .studio-split-view-separator {
    display:none !important;
  }
  #app-screen.is-session-sidebar-open:has(#preview-container:not(.hidden)) #studio-split-preview {
    width:40px !important;
    min-width:40px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  #app-screen.is-session-sidebar-open:has(#preview-container:not(.hidden)) #studio-split-preview > span {
    display:none !important;
  }
  #app-screen.is-session-sidebar-open:has(#preview-container:not(.hidden)) #studio-project-activity {
    left:224px !important;
    right:50% !important;
  }
  #app-screen.is-session-sidebar-open:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) {
    left:224px !important;
    right:50% !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) #studio-project-activity,
  #app-screen:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) {
    transition:left .42s cubic-bezier(.4,0,.2,1),right .42s cubic-bezier(.4,0,.2,1) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .studio-session-sidebar-trigger > img,
  .studio-session-sidebar-trigger > svg,
  #app-screen:has(#preview-container:not(.hidden)) #sidebar,
  #app-screen:has(#preview-container:not(.hidden)) #studio-project-activity,
  #app-screen:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) { transition:none !important; }
}

/* Project actions use only the Studio pink/cyan accent pair. */
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-share {
  border-color:rgba(23,201,255,.62) !important;
  background:linear-gradient(180deg,rgba(23,201,255,.2),rgba(23,201,255,.09)) !important;
  color:#c8f4ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 13px rgba(23,201,255,.18) !important;
  backdrop-filter:blur(12px) saturate(145%);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy {
  border-color:rgba(255,255,255,.3) !important;
  background:linear-gradient(115deg,var(--cx-pink) 0%,#e63880 46%,var(--cx-cyan) 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 4px 16px rgba(255,49,95,.22),0 4px 18px rgba(23,201,255,.18) !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(255,49,95,.72) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.07) 46%,transparent 58%),radial-gradient(ellipse at 50% 48%,#ff7897 0%,var(--cx-pink) 44%,#d52255 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 15px rgba(255,49,95,.26) !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-share:hover {
  border-color:var(--cx-cyan) !important;
  background:linear-gradient(180deg,rgba(23,201,255,.3),rgba(23,201,255,.14)) !important;
  color:#fff !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy:hover,
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn:hover {
  filter:brightness(1.1) saturate(1.08);
}

#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share {
  border-color:rgba(23,201,255,.62);
  background:rgba(23,201,255,.14);
  color:var(--cx-cyan);
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy {
  border-color:rgba(255,255,255,.3);
  background:linear-gradient(135deg,var(--cx-pink),#e63880 48%,var(--cx-cyan));
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(255,49,95,.72);
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.07) 46%,transparent 58%),radial-gradient(circle at 50% 48%,#ff7897 0%,var(--cx-pink) 46%,#d52255 100%);
}

/* One typographic and icon system for every control in the Studio chrome. */
#studio-project-workspace:not(.hidden) .studio-workspace-header button,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-toolbar button,
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity > header button {
  color:#fff !important;
  font-family:var(--studio-ui-font) !important;
  font-size:14px !important;
  font-weight:600 !important;
  font-style:normal !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  -webkit-font-smoothing:antialiased;
}
#studio-project-workspace:not(.hidden) .studio-workspace-header button span,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-toolbar button span,
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity > header button span {
  color:inherit !important;
  font:inherit !important;
  letter-spacing:inherit !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-header button svg,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-toolbar button svg,
#app-screen:has(#preview-container:not(.hidden)) #studio-project-activity > header button svg {
  color:inherit !important;
  stroke:currentColor;
}
#studio-project-workspace:not(.hidden) .studio-workspace-header nav button,
#studio-project-workspace:not(.hidden) .studio-workspace-quick button,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary > button,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions button {
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,filter .18s ease,transform .18s ease;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button {
  min-height:34px !important;
  height:34px !important;
  padding-inline:14px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button svg {
  width:16px !important;
  height:16px !important;
  flex:0 0 16px;
  fill:currentColor !important;
  stroke:none !important;
}

/* Optically centre Preview labels against their globe icons. */
#app-screen:has(#preview-container:not(.hidden)) #studio-split-preview > span,
#studio-project-workspace:not(.hidden) .studio-workspace-header nav [data-workspace-view='preview'].is-active > span {
  display:inline-flex !important;
  align-items:center;
  align-self:center;
  height:100%;
  padding:0 !important;
  line-height:1 !important;
  transform:translateY(-1px);
}

/* Share deliberately mirrors Preview's cyan liquid-glass treatment. */
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-share,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-width:0;
  height:36px !important;
  min-height:36px !important;
  padding:3px 13px !important;
  overflow:hidden;
  border:1px solid rgba(91,239,255,.56) !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,rgba(18,211,232,.32),rgba(0,120,150,.18) 52%,rgba(255,255,255,.08)) !important;
  color:#d9fbff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,15,25,.34),0 5px 18px rgba(0,210,235,.2) !important;
  backdrop-filter:blur(14px) saturate(155%);
  -webkit-backdrop-filter:blur(14px) saturate(155%);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-share::after,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share::after {
  content:'';
  position:absolute;
  inset:1px 1px auto;
  z-index:-1;
  height:48%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);
  pointer-events:none;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-share:hover,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share:hover {
  border-color:rgba(151,248,255,.86) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 7px 22px rgba(0,225,255,.3) !important;
  transform:translateY(-1px) !important;
}

/* ==========================================================================
   CI-aligned Studio
   The landing-page CI is the source of truth for every shared token and
   component. The dashboard hero remains Studio's expressive focal moment;
   the surrounding product UI is deliberately quieter.
   ========================================================================== */
:root {
  --studio-font:'Space Grotesk',system-ui,sans-serif;
  --studio-ui-font:'Space Grotesk',system-ui,sans-serif;
  --studio-canvas:#131217;
  --studio-ink:#17151b;
  --studio-surface:#1b1920;
  --studio-surface-2:#211f27;
  --studio-cream:#fbf1e0;
  --studio-silver:#b8b8bc;
  --studio-cyan:#17c9ff;
  --studio-crimson:#ff315f;
  --studio-line:rgba(251,241,224,.1);
  --studio-line-strong:rgba(251,241,224,.2);
  --studio-line-silver:rgba(184,184,188,.4);
  --studio-rail-active:#211f27;
  --studio-rail-hover:#1b1920;
  --studio-rail-logo-hover:#1b1920;
  --cx-panel:#17151b;
  --cx-surface:#1b1920;
  --cx-surface-hover:#211f27;
  --cx-line:rgba(251,241,224,.1);
  --cx-line-strong:rgba(251,241,224,.2);
  --cx-fill:rgba(251,241,224,.065);
  --cx-fill-hover:rgba(251,241,224,.04);
  --cx-text:#fbf1e0;
  --cx-muted:#b8b8bc;
  --cx-dim:rgba(184,184,188,.62);
  --cx-pink:#ff315f;
  --cx-cyan:#17c9ff;
}

body:has(#app-screen:not(.hidden)),
#app-screen:not(.hidden) {
  background:var(--studio-canvas) !important;
  color:var(--studio-cream) !important;
  font-family:var(--studio-font) !important;
  background-image:none !important;
}
body:has(#app-screen:not(.hidden)) h1:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) h2:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) h3:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) h4:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) .font-display:not(.weboom-logo) {
  font-family:var(--studio-font) !important;
}
body:has(#app-screen:not(.hidden)) input[type='text'],
body:has(#app-screen:not(.hidden)) input[type='email'],
body:has(#app-screen:not(.hidden)) input[type='password'],
body:has(#app-screen:not(.hidden)) input[type='number'],
body:has(#app-screen:not(.hidden)) input[type='search'],
body:has(#app-screen:not(.hidden)) input[type='url'],
body:has(#app-screen:not(.hidden)) textarea,
body:has(#app-screen:not(.hidden)) select {
  background:rgba(251,241,224,.024) !important;
  border-color:var(--studio-line-strong) !important;
  color:var(--studio-cream) !important;
  font-family:var(--studio-font) !important;
}
body:has(#app-screen:not(.hidden)) input::placeholder,
body:has(#app-screen:not(.hidden)) textarea::placeholder { color:rgba(184,184,188,.52) !important; }

/* Quiet application shell */
#sidebar,
#app-screen:not(.hidden) aside#sidebar,
#sidebar > div.studio-sidebar-brand:first-child,
#sidebar-footer {
  background:var(--studio-canvas) !important;
  border-color:var(--studio-line) !important;
  color:var(--studio-cream) !important;
}
#sidebar { border-right:1px solid var(--studio-canvas) !important; }
#app-screen:not(.hidden) aside#sidebar { border-right:1px solid var(--studio-canvas) !important; }
#sidebar > div.studio-sidebar-brand:first-child { border-bottom:1px solid var(--studio-line) !important; }
.studio-mark img { height:42px; }
.studio-badge,
#sidebar > div.studio-sidebar-brand:first-child span.studio-badge {
  padding:5px 9px;
  border:1px solid var(--studio-line-silver) !important;
  border-radius:999px;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-silver) !important;
  font:700 9px/1 var(--studio-font) !important;
  letter-spacing:.14em !important;
}
.studio-rail-toggle { color:var(--studio-silver); }
.studio-rail-toggle:hover { background:var(--studio-surface); color:var(--studio-cream); }
.studio-workspace-card {
  border:1px solid var(--studio-line) !important;
  border-radius:12px !important;
  background:var(--studio-ink) !important;
  color:var(--studio-cream) !important;
}
.studio-workspace-card:hover { border-color:var(--studio-line-strong) !important; background:var(--studio-surface) !important; }
.studio-workspace-avatar,.studio-account-avatar {
  border-color:rgba(251,241,224,.75) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  box-shadow:-1px 0 0 rgba(23,201,255,.7),1px 0 0 rgba(255,49,95,.7);
}
.studio-workspace-name { color:var(--studio-cream); }
.studio-workspace-chevron,.studio-rail-section { color:var(--studio-silver); }
.studio-primary-nav { border-color:var(--studio-line) !important; }
.studio-nav-item {
  border:1px solid transparent !important;
  border-radius:10px !important;
  color:var(--studio-silver) !important;
  font-family:var(--studio-font) !important;
}
.studio-nav-item:hover { background:var(--studio-surface) !important; color:var(--studio-cream) !important; }
.studio-nav-item.is-active {
  position:relative;
  border-color:transparent !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
}
.studio-nav-item.is-active::before { display:none; }
.studio-nav-item.is-active svg {
  color:var(--studio-cream) !important;
  filter:drop-shadow(-1px 0 rgba(23,201,255,.38)) drop-shadow(1px 0 rgba(255,49,95,.38));
}
#session-list .session-row-btn { color:var(--studio-silver) !important; font-family:var(--studio-font) !important; }
#session-list .session-row-btn:hover { background:var(--studio-surface) !important; color:var(--studio-cream) !important; }
#session-list .session-row-btn.session-active { background:var(--studio-surface-2) !important; color:var(--studio-cream) !important; }
#studio-workspace-menu,#studio-account-menu {
  border:1px solid var(--studio-line-strong) !important;
  background:rgba(23,21,27,.96) !important;
  color:var(--studio-cream) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.58) !important;
  backdrop-filter:blur(18px);
}
#studio-workspace-menu .studio-workspace-credits { border-color:var(--studio-line) !important; }
#studio-workspace-menu .studio-credit-track {
  height:5px;
  background:var(--studio-surface-2);
}
#studio-workspace-menu .studio-credit-track i {
  background:var(--studio-cyan);
  box-shadow:none;
}
#studio-workspace-menu .studio-workspace-buy {
  position:relative;
  isolation:isolate;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--studio-line-silver) !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.68),2px 0 0 rgba(255,49,95,.68) !important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#studio-workspace-menu .studio-workspace-buy::before {
  content:'';
  position:absolute;
  z-index:0;
  top:-35%;
  bottom:-35%;
  left:-45%;
  width:30%;
  background:linear-gradient(90deg,transparent,rgba(251,241,224,.42),transparent);
  transform:translateX(-220%) skewX(-18deg);
  animation:studio-workspace-buy-shine 4.2s ease-in-out infinite;
  pointer-events:none;
}
#studio-workspace-menu .studio-workspace-buy > * { position:relative; z-index:1; }
#studio-workspace-menu .studio-workspace-buy > span { color:var(--studio-cyan) !important; }
#studio-workspace-menu .studio-workspace-buy em {
  background:rgba(255,49,95,.12);
  color:var(--studio-crimson);
}
#studio-workspace-menu .studio-workspace-buy:hover {
  border-color:rgba(251,241,224,.34) !important;
  background:var(--studio-surface-2) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.82),3px 0 0 rgba(255,49,95,.82) !important;
  transform:translateY(-1px);
}

/* Match the support action to the credit CTA, without the travelling shine. */
#studio-workspace-menu .studio-workspace-links { padding:0 10px 14px; }
#studio-workspace-menu .studio-workspace-links button {
  position:relative;
  isolation:isolate;
  min-height:42px;
  border:1px solid var(--studio-line-silver) !important;
  border-radius:10px;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.68),2px 0 0 rgba(255,49,95,.68) !important;
  font:600 13px/17px var(--studio-font);
  animation:none !important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#studio-workspace-menu .studio-workspace-links button::before,
#studio-workspace-menu .studio-workspace-links button::after {
  content:none !important;
  animation:none !important;
}
#studio-workspace-menu .studio-workspace-links button:hover {
  border-color:rgba(251,241,224,.34) !important;
  background:var(--studio-surface-2) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.82),3px 0 0 rgba(255,49,95,.82) !important;
  transform:translateY(-1px);
}
@keyframes studio-workspace-buy-shine {
  0%,58% { transform:translateX(-220%) skewX(-18deg); opacity:0; }
  63% { opacity:1; }
  80%,100% { transform:translateX(650%) skewX(-18deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  #studio-workspace-menu .studio-workspace-buy::before { animation:none; }
}

/* The sole hero treatment: exact CI rays, separated colour fields and grain. */
.studio-atmosphere {
  border:1px solid var(--studio-line) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 26rem),
    var(--studio-ink) !important;
}
.studio-rays {
  inset:-75%;
  background:repeating-conic-gradient(from 18deg at 50% 46%,rgba(248,239,206,.068) 0 7.5deg,transparent 7.5deg 15deg);
  filter:blur(6px);
  -webkit-mask-image:none;
  mask-image:none;
  animation:studio-ci-rays-spin 180s linear infinite;
}
@keyframes studio-ci-rays-spin { to { transform:rotate(360deg); } }
#preview-empty:not(.hidden) {
  background:linear-gradient(to bottom,var(--studio-ink) 0%,#09090b 58%,#000 100%) !important;
  border-color:var(--studio-line) !important;
  border-bottom:0 !important;
  color:var(--studio-cream) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
#preview-empty:not(.hidden)::before {
  inset:0;
  background:repeating-conic-gradient(from var(--studio-dashboard-ray-angle) at 50% 46%,rgba(248,239,206,.068) 0 7.5deg,transparent 7.5deg 15deg);
  filter:blur(6px);
  animation:studio-dashboard-ray-spin 180s linear infinite;
}
@property --studio-dashboard-ray-angle {
  syntax:'<angle>';
  inherits:false;
  initial-value:18deg;
}
@keyframes studio-dashboard-ray-spin { to { --studio-dashboard-ray-angle:378deg; } }
#preview-empty:not(.hidden)::after {
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 26rem),
    radial-gradient(circle at calc(50% + 505px) 52%,rgba(255,49,95,.28),transparent 14rem),
    radial-gradient(circle at calc(50% - 505px) 52%,rgba(23,201,255,.24),transparent 16rem);
  filter:blur(18px);
}
.studio-dashboard h1 {
  margin-bottom:24px;
  color:var(--studio-cream) !important;
  font:700 clamp(34px,3.4vw,52px)/1 var(--studio-font) !important;
  letter-spacing:-.045em !important;
  text-shadow:0 0 24px rgba(255,255,255,.12);
}
.studio-dashboard .prompt {
  max-width:720px;
  padding:20px 20px 16px;
  border:1px solid rgba(251,241,224,.2) !important;
  border-radius:24px;
  background:rgba(18,17,23,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    -3px 0 0 rgba(23,201,255,.64),
    3px 0 0 rgba(255,49,95,.64),
    0 0 12px rgba(255,255,255,.16),
    0 0 28px rgba(255,255,255,.08),
    0 28px 90px rgba(0,0,0,.58) !important;
}
.studio-dashboard .prompt::before { display:none; }
.studio-dashboard .prompt:focus-within {
  border-color:rgba(251,241,224,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),-4px 0 0 rgba(23,201,255,.75),4px 0 0 rgba(255,49,95,.75),0 0 18px rgba(255,255,255,.18),0 28px 90px rgba(0,0,0,.62) !important;
}
.studio-dashboard .prompt #studio-idea-prompt {
  color:var(--studio-cream) !important;
  font:400 16px/1.55 var(--studio-font) !important;
}
.studio-dashboard .prompt #studio-idea-prompt::placeholder { color:rgba(184,184,188,.52) !important; }
.studio-dashboard .icon-btn {
  width:40px !important;
  height:40px !important;
  border:1px solid var(--studio-line-strong) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-silver) !important;
  opacity:1;
}
.studio-dashboard .icon-btn:hover { background:var(--studio-surface-2) !important; color:var(--studio-cream) !important; }
/* L01 */
.studio-dashboard #welcome-new-btn.mic-btn {
  height:40px !important;
  padding:0 16px !important;
  border:1px solid var(--studio-line-silver) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  font:600 13px/1 var(--studio-font) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  animation:studio-ci-l01 3.6s ease-in-out infinite;
}
.studio-dashboard #welcome-new-btn.mic-btn:hover {
  background:rgba(251,241,224,.045) !important;
  box-shadow:-6px 0 0 rgba(23,201,255,.8),6px 0 0 rgba(255,49,95,.8) !important;
  transform:translateY(-1px);
}
@keyframes studio-ci-l01 {
  0%,20%,100% { box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6); }
  50%,65% { box-shadow:-6px 0 0 rgba(23,201,255,.8),6px 0 0 rgba(255,49,95,.8); }
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy {
  animation:none !important;
}
@media (prefers-reduced-motion:reduce) {
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy { animation:none !important; }
}
/* OA */
.studio-dashboard #welcome-typing-btn.send-btn {
  width:40px !important;
  height:40px !important;
  border:0 !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.78),2px 0 0 rgba(255,49,95,.78),0 8px 22px rgba(0,0,0,.3) !important;
}
.studio-dashboard #welcome-typing-btn.send-btn:hover {
  box-shadow:-5px 0 0 rgba(23,201,255,.82),5px 0 0 rgba(255,49,95,.82),0 10px 28px rgba(0,0,0,.38) !important;
}

/* Dashboard navigation and restrained C08/C11 card family. */
.studio-dashboard-tools {
  border:1px solid var(--studio-line) !important;
  background:rgba(19,18,23,.7) !important;
  backdrop-filter:blur(14px);
}
.studio-dashboard-tools button { color:var(--studio-silver); font:600 12px/1 var(--studio-font); }
.studio-dashboard-tools button:hover { background:rgba(251,241,224,.04); color:var(--studio-cream); }
.studio-dashboard-tools button.is-active { background:var(--studio-surface-2); color:var(--studio-cream); }
.studio-project-shelf {
  border:1px solid var(--studio-line) !important;
  border-radius:24px;
  background:rgba(27,25,32,.9) !important;
  box-shadow:0 28px 75px rgba(0,0,0,.28);
}
.studio-project-shelf-head strong { color:var(--studio-cream); font:600 17px/1.25 var(--studio-font); }
.studio-project-shelf-head span,#studio-project-empty { color:var(--studio-silver); }
.studio-project-card {
  overflow:visible;
  border:1px solid var(--studio-line-strong);
  border-radius:18px;
  background:var(--studio-surface-2);
  box-shadow:none;
}
.studio-project-card::before,.studio-project-card::after {
  content:'';
  position:absolute;
  z-index:2;
  top:22%;
  bottom:22%;
  width:2px;
  border-radius:999px;
  opacity:.72;
  transition:top .18s,bottom .18s,opacity .18s;
  pointer-events:none;
}
.studio-project-card::before { left:-2px; background:var(--studio-cyan); }
.studio-project-card::after { right:-2px; background:var(--studio-crimson); }
.studio-project-card:hover {
  border-color:rgba(251,241,224,.3);
  background:#24212a;
  transform:translateY(-2px);
}
.studio-project-card:hover::before,.studio-project-card:hover::after { top:13%; bottom:13%; opacity:1; }
.studio-project-thumb { border-radius:17px 17px 0 0; }
.studio-project-copy { background:var(--studio-surface-2); border-radius:0 0 17px 17px; }
.studio-project-copy strong { color:var(--studio-cream); font-family:var(--studio-font); font-weight:600; }
.studio-project-copy span { color:var(--studio-silver); }
.studio-project-favourite,.studio-project-rename {
  border-color:var(--studio-line-strong);
  background:rgba(19,18,23,.82);
  color:var(--studio-cream);
}
.studio-project-favourite.is-active { border-color:rgba(255,49,95,.62); background:rgba(255,49,95,.12); color:var(--studio-crimson); }
.studio-project-actions #delete-sessions-btn.studio-project-delete {
  border-color:var(--studio-line-strong) !important;
  color:var(--studio-silver) !important;
  font-family:var(--studio-font) !important;
}

/* Library screens use the same surfaces and static C11 edges. */
.studio-window.is-open,.studio-window.is-open.is-fullscreen {
  border-color:var(--studio-line) !important;
  background:var(--studio-ink) !important;
  color:var(--studio-cream) !important;
}
.studio-window-hero { border-color:var(--studio-line); }
.studio-window-hero strong { color:var(--studio-cream); font-family:var(--studio-font); }
.studio-window-hero p,.studio-window-crumb,.studio-window-filter { color:var(--studio-silver); }
.studio-window-side-label { color:var(--studio-cream); }
.studio-window-filter.is-active { background:var(--studio-surface-2); color:var(--studio-cream); }
.studio-connector-card,.studio-upload-tree-section,.studio-upload-file,.studio-connectors-request {
  border-color:var(--studio-line) !important;
  background:var(--studio-surface) !important;
}
.studio-connector-card { position:relative; }
.studio-connector-card::before { content:''; position:absolute; left:-1px; top:28%; bottom:28%; width:1px; background:var(--studio-cyan); }
.studio-connector-card::after { content:''; position:absolute; right:-1px; top:28%; bottom:28%; width:1px; background:var(--studio-crimson); }
.studio-connectors-request::before { display:none; }
.studio-connectors-request::after { background:linear-gradient(90deg,transparent,var(--studio-cyan) 24%,var(--studio-crimson) 76%,transparent); opacity:.7; }
.studio-upload-toolbar { background:var(--studio-ink); border-color:var(--studio-line); }

/* Continue the menu divider's static cyan-to-crimson treatment beneath every
   library-window introduction. The line stays continuous, with no clear stops. */
.studio-window-hero { position:relative; border-bottom-color:transparent !important; }
.studio-window-hero::after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(to right,var(--studio-cyan),var(--studio-crimson));
  opacity:.7;
  pointer-events:none;
}

/* Builder chrome: quiet dark surfaces, cream primary action, no off-brand gloss. */
#url-bar:not(.hidden),#bottom-panel:not(.hidden),#studio-project-activity,
.studio-workspace-header,.studio-workspace-sidebar {
  background:var(--studio-ink) !important;
  border-color:var(--studio-line) !important;
  color:var(--studio-cream) !important;
}
#url-bar > .flex-1,.studio-split-page > div {
  background:var(--studio-surface) !important;
  border:1px solid var(--studio-line-strong) !important;
  box-shadow:none !important;
  color:var(--studio-cream) !important;
}
.studio-split-primary #studio-split-preview {
  border:1px solid var(--studio-line-silver) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.55),2px 0 0 rgba(255,49,95,.55) !important;
  backdrop-filter:none;
}
.studio-split-primary #studio-split-preview::after { display:none; }
.studio-split-primary #studio-split-preview:hover { box-shadow:-5px 0 0 rgba(23,201,255,.75),5px 0 0 rgba(255,49,95,.75) !important; }
.studio-workspace-frame { border-color:var(--studio-line-strong); }
.studio-workspace-blank { background:var(--studio-surface); color:var(--studio-silver); }
.studio-workspace-blank strong { color:var(--studio-cream); }
.tab-btn { color:var(--studio-silver) !important; font-family:var(--studio-font) !important; letter-spacing:0 !important; text-transform:none !important; transform:none !important; }
.tab-btn-active { border-color:var(--studio-line-strong) !important; background:var(--studio-surface-2) !important; color:var(--studio-cream) !important; box-shadow:none !important; transform:none !important; }
.dock-pill-btn { border-color:var(--studio-line-strong) !important; background:var(--studio-surface-2) !important; color:var(--studio-cream) !important; box-shadow:none !important; font-family:var(--studio-font) !important; text-transform:none !important; }
.dock-pill-btn--primary,.dock-pill-btn--accent {
  border-color:var(--studio-line-silver) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy,
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn {
  border:1px solid var(--studio-line-silver) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  backdrop-filter:none;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy::after,
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn::after { display:none; }
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn {
  border-color:transparent !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.72),2px 0 0 rgba(255,49,95,.72) !important;
}

/* CI modals and status surfaces. */
#templates-modal > div,#template-modal > div,#version-modal > div,#dialog-modal > div,
#placeholder-form-modal > div,#human-help-modal > div,.share-card,.credits-shop-card,
#share-modal .share-card,#human-help-modal .human-help-window {
  border:1px solid var(--studio-line-strong) !important;
  border-radius:20px !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.42),2px 0 0 rgba(255,49,95,.42),0 30px 90px rgba(0,0,0,.58) !important;
}
#share-modal .share-card {
  border-color:rgba(251,241,224,.28) !important;
  box-shadow:
    -3px 0 0 rgba(23,201,255,.7),
    3px 0 0 rgba(255,49,95,.7),
    0 0 18px rgba(251,241,224,.11),
    0 30px 90px rgba(0,0,0,.58) !important;
}

/* Template customisation and project naming use quiet CI form surfaces. */
#placeholder-form-modal,#dialog-modal.dialog-project-rename { background:rgba(7,7,9,.72) !important; backdrop-filter:blur(10px); font-family:var(--studio-font) !important; }
#placeholder-form-modal .placeholder-form-scrim,#placeholder-form-modal .login-stage { display:none !important; }
#placeholder-form-modal .placeholder-form-window,#dialog-modal.dialog-project-rename > div {
  width:min(580px,calc(100vw - 32px)) !important; max-width:580px !important; height:auto !important;
  max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--studio-line-strong) !important;
  border-radius:20px !important; background:var(--studio-surface) !important; color:var(--studio-cream) !important;
  box-shadow:-2px 0 rgba(23,201,255,.42),2px 0 rgba(255,49,95,.42),0 30px 90px #0009 !important;
  animation:none !important;
}
#placeholder-form-modal .brief-header { padding:18px 24px; background:var(--studio-surface) !important; border-bottom:1px solid var(--studio-line) !important; }
#placeholder-form-modal .brief-kicker { padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:var(--studio-silver) !important; font:600 11px/1.4 var(--studio-font); letter-spacing:.1em; }
#placeholder-form-modal .brief-close { width:34px; height:34px; padding:0; border:1px solid var(--studio-line-silver); border-radius:50%; background:transparent; color:var(--studio-silver); box-shadow:none; font:400 22px/1 var(--studio-font); transform:none; }
#placeholder-form-modal .brief-close:hover { background:var(--studio-surface-2); color:var(--studio-cream); }
#placeholder-form-modal .brief-body { padding:24px; min-height:0; }
#placeholder-form-modal .brief-title { color:var(--studio-cream); font:600 26px/1.2 var(--studio-font); margin:0 0 14px; }
#placeholder-form-modal :is(.placeholder-form-lead,.placeholder-form-help) { color:var(--studio-silver); font:400 14px/1.6 var(--studio-font); }
#placeholder-form-modal .placeholder-field-label { color:var(--studio-silver); font:500 12px/1.5 var(--studio-font); text-transform:none; letter-spacing:0; }
#placeholder-form-modal .placeholder-form-footer { padding:18px 24px; background:var(--studio-surface) !important; border-top:1px solid var(--studio-line) !important; gap:12px; }
#placeholder-form-modal :is(.login-input,.placeholder-input),#dialog-modal.dialog-project-rename #dialog-input {
  width:100%; min-height:44px; padding:10px 14px !important; border:1px solid var(--studio-line-silver) !important;
  border-radius:12px !important; background:var(--studio-ink) !important; color:var(--studio-cream) !important;
  font:400 15px/1.4 var(--studio-font) !important; box-shadow:none !important; outline:none !important;
}
#placeholder-form-modal :is(.login-input,.placeholder-input):focus,#dialog-modal.dialog-project-rename #dialog-input:focus {
  border-color:var(--studio-cyan) !important; box-shadow:0 0 0 3px rgba(23,201,255,.12) !important;
}
#placeholder-form-modal input::selection,#dialog-modal.dialog-project-rename input::selection { background:rgba(23,201,255,.3); color:var(--studio-cream); }
#placeholder-form-modal input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px var(--studio-ink) inset !important; -webkit-text-fill-color:var(--studio-cream) !important; }
#placeholder-form-modal .brief-btn,#dialog-modal.dialog-project-rename :is(#dialog-ok,#dialog-cancel) {
  min-height:42px !important; padding:0 20px !important; border:1px solid var(--studio-line-silver) !important; border-radius:999px !important;
  background:var(--studio-surface) !important; color:var(--studio-cream) !important; box-shadow:none !important;
  font:500 14px/1 var(--studio-font) !important; letter-spacing:0 !important; text-transform:none !important; transform:none !important;
}
#placeholder-form-modal #placeholder-form-submit,#dialog-modal.dialog-project-rename #dialog-ok { box-shadow:-2px 0 rgba(23,201,255,.6),2px 0 rgba(255,49,95,.6) !important; }
#placeholder-form-modal .brief-btn:hover,#dialog-modal.dialog-project-rename :is(#dialog-ok,#dialog-cancel):hover { background:var(--studio-surface-2) !important; }
#placeholder-form-modal button:focus-visible,#dialog-modal.dialog-project-rename button:focus-visible { outline:2px solid var(--studio-cyan); outline-offset:3px; }
#dialog-modal.dialog-project-rename > div > div:first-child { padding:24px 24px 12px !important; }
#dialog-modal.dialog-project-rename > div > div:nth-child(2) { padding:12px 24px 24px !important; justify-content:flex-end !important; }
#dialog-modal.dialog-project-rename #dialog-message { color:var(--studio-cream) !important; font:600 22px/1.3 var(--studio-font) !important; }
#dialog-modal.dialog-project-rename #dialog-left-actions { display:none !important; }

/* Share details use the same cream/silver hierarchy as the surrounding shell. */
#share-modal .share-card { font-family:var(--studio-font) !important; }
#share-modal .share-preview-title,
#share-modal .share-controls,
#share-modal .share-built-wordmark { color:var(--studio-cream) !important; }
#share-modal .share-pill::after,
#share-modal #share-preview-loading-text,
#share-modal .share-preview-placeholder-icon,
#share-modal .share-preview-placeholder-text,
#share-modal .share-preview-description,
#share-modal .share-label,
#share-modal .share-qr-hint,
#share-modal .share-built-link { color:var(--studio-silver) !important; }
#share-modal .share-preview-loading { color:var(--studio-cyan) !important; }
#share-modal .share-preview-thumb-wrap,
#share-modal .share-preview-loading,
#share-modal .share-preview-placeholder,
#share-modal .share-qr { background:var(--studio-surface) !important; border-color:var(--studio-line-strong) !important; }
#share-modal .share-close { background:var(--studio-surface-2) !important; border-color:var(--studio-line-silver) !important; color:var(--studio-silver) !important; }
#share-modal .share-close:hover { background:var(--studio-surface) !important; color:var(--studio-cream) !important; }

/* Google owns the appointment document inside the iframe; this CI shell keeps
   the booking experience on-brand without filtering or breaking its controls. */
@property --human-help-card-angle {
  syntax:'<angle>';
  inherits:false;
  initial-value:135deg;
}
#human-help-modal {
  background:rgba(0,0,0,.76) !important;
  backdrop-filter:blur(14px);
}
#human-help-modal .human-help-window {
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-color:rgba(255,255,255,.145) !important;
  background:var(--studio-surface) !important;
  box-shadow:0 32px 100px rgba(0,0,0,.68) !important;
}
#human-help-modal .human-help-window::before,
#human-help-modal .human-help-window::after {
  content:'';
  position:absolute;
  z-index:-1;
  height:auto;
  padding:1px;
  border-radius:inherit;
  background:conic-gradient(from var(--human-help-card-angle),var(--studio-cyan) 0 50%,var(--studio-crimson) 50% 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:human-help-card-orbit 10s linear infinite;
  pointer-events:none;
}
#human-help-modal .human-help-window::before { inset:-9px; }
#human-help-modal .human-help-window::after { inset:-4px; animation-direction:reverse; }
@keyframes human-help-card-orbit { to { --human-help-card-angle:495deg; } }
#human-help-modal .human-help-header {
  min-height:70px !important;
  padding:0 18px 0 20px !important;
  border-bottom:1px solid var(--studio-line) !important;
  background:var(--studio-ink) !important;
}
#human-help-modal .human-help-title {
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--studio-cream) !important;
  font:650 16px/1.1 var(--studio-font) !important;
}
#human-help-modal .human-help-title::before {
  content:'HUMAN-SUPPORTED';
  color:var(--studio-silver);
  font:700 9px/1 var(--studio-font);
  letter-spacing:.14em;
}
#human-help-modal .human-help-close {
  width:40px !important;
  height:40px !important;
  border:0 !important;
  border-radius:50% !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.72),3px 0 0 rgba(255,49,95,.72),0 8px 24px rgba(0,0,0,.533) !important;
}
#human-help-modal .human-help-close:hover {
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  filter:brightness(1.05);
  transform:translateY(-1px) !important;
}
#human-help-modal .human-help-frame-wrap {
  padding:12px !important;
  background:var(--studio-ink) !important;
}
#human-help-modal .human-help-frame,
#human-help-modal #human-help-iframe {
  border:1px solid rgba(255,255,255,.145) !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:none !important;
  filter:none !important;
}
@media (prefers-reduced-motion:reduce) {
  #human-help-modal .human-help-window::before,
  #human-help-modal .human-help-window::after { animation:none; }
}
#toast-container > div {
  border:1px solid var(--studio-line-strong) !important;
  border-radius:12px !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.45) !important;
}
:focus-visible { outline:2px solid var(--studio-cream) !important; outline-offset:3px !important; }

@media (max-width:820px) {
  #app-screen.is-mobile-studio #studio-account-menu:not(.hidden),
  #app-screen.is-mobile-studio #studio-project-activity {
    background:var(--studio-ink) !important;
    color:var(--studio-cream) !important;
  }
  .studio-dashboard h1 { font-size:clamp(32px,8vw,44px) !important; }
  .studio-dashboard .prompt { border-radius:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .studio-rays,#preview-empty:not(.hidden)::before,
  .studio-dashboard #welcome-new-btn.mic-btn { animation:none !important; }
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share svg {
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:currentColor !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share {
  padding:3px 13px 3px 3px !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-share > span,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share > span {
  display:inline-flex !important;
  align-items:center;
  align-self:center;
  height:100%;
  line-height:1 !important;
  transform:none !important;
}

/* The side-panel toolbar becomes cramped before the general layout breakpoint. */
@media (max-width:1600px) {
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share {
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    padding:0 !important;
    border-radius:50% !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share > span {
    display:none !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share > svg {
    display:block !important;
    width:18px !important;
    height:18px !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish {
    position:relative;
    isolation:isolate;
    display:grid;
    place-items:center;
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    padding:0 !important;
    overflow:hidden;
    border:1px solid rgba(255,49,95,.62) !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,rgba(255,49,95,.42),rgba(190,20,70,.24) 52%,rgba(255,255,255,.08)) !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(35,0,12,.34),0 5px 18px rgba(255,49,95,.24) !important;
    backdrop-filter:blur(14px) saturate(155%);
    -webkit-backdrop-filter:blur(14px) saturate(155%);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish::after {
    content:'';
    position:absolute;
    inset:1px 1px auto;
    z-index:0;
    height:48%;
    border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);
    pointer-events:none;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish:hover {
    border-color:rgba(255,128,158,.88) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 7px 22px rgba(255,49,95,.32) !important;
    transform:translateY(-1px) !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-publish > svg {
    display:block !important;
    width:18px !important;
    height:18px !important;
    fill:none !important;
    stroke:currentColor !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy {
    position:relative;
    isolation:isolate;
    display:grid;
    place-items:center;
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    padding:0 !important;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.42) !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,rgba(255,49,95,.5),rgba(230,56,128,.4) 46%,rgba(23,201,255,.5)) !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(18,0,25,.34),0 5px 16px rgba(255,49,95,.2),0 5px 18px rgba(23,201,255,.18) !important;
    backdrop-filter:blur(14px) saturate(155%);
    -webkit-backdrop-filter:blur(14px) saturate(155%);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy::after {
    content:'';
    position:absolute;
    inset:1px 1px auto;
    z-index:-1;
    height:48%;
    border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.26),transparent);
    pointer-events:none;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy:hover {
    border-color:rgba(255,255,255,.68) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.54),0 7px 20px rgba(255,49,95,.26),0 7px 22px rgba(23,201,255,.24) !important;
    transform:translateY(-1px) !important;
  }
  #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy > svg {
    display:block !important;
    width:18px !important;
    height:18px !important;
    fill:currentColor !important;
    stroke:none !important;
  }
}

/* Expanded actions use the same glass material as their compact icons. */
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy,
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn {
  position:relative;
  isolation:isolate;
  height:36px !important;
  min-height:36px !important;
  overflow:hidden;
  border-radius:999px !important;
  color:#fff !important;
  backdrop-filter:blur(14px) saturate(155%);
  -webkit-backdrop-filter:blur(14px) saturate(155%);
  transition:border-color .18s ease,box-shadow .18s ease,filter .18s ease,transform .18s ease !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy {
  border:1px solid rgba(255,255,255,.42) !important;
  background:linear-gradient(115deg,rgba(255,49,95,.5),rgba(230,56,128,.4) 46%,rgba(23,201,255,.5)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(18,0,25,.34),0 5px 16px rgba(255,49,95,.2),0 5px 18px rgba(23,201,255,.18) !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn {
  border:1px solid rgba(255,49,95,.62) !important;
  background:linear-gradient(135deg,rgba(255,49,95,.42),rgba(190,20,70,.24) 52%,rgba(255,255,255,.08)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(35,0,12,.34),0 5px 18px rgba(255,49,95,.24) !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy::after,
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn::after {
  content:'';
  position:absolute;
  inset:1px 1px auto;
  z-index:-1;
  height:48%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.26),transparent);
  pointer-events:none;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy:hover {
  border-color:rgba(255,255,255,.68) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.54),0 7px 20px rgba(255,49,95,.26),0 7px 22px rgba(23,201,255,.24) !important;
  filter:none;
  transform:translateY(-1px) !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn:hover {
  border-color:rgba(255,128,158,.88) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 7px 22px rgba(255,49,95,.32) !important;
  filter:none;
  transform:translateY(-1px) !important;
}

/* Keep the final project action rules CI-native; these sit after the legacy
   glass-material compatibility rules above so source order cannot revive it. */
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy,
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn {
  border:1px solid var(--studio-line-silver) !important;
  background:rgba(251,241,224,.024) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  backdrop-filter:none;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn {
  border-color:transparent !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.72),2px 0 0 rgba(255,49,95,.72) !important;
}
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-buy::after,
#studio-project-workspace:not(.hidden) .studio-workspace-publish button.studio-workspace-publish-btn::after { display:none !important; }

/* Phone Studio uses a three-page swipe sheet rather than the desktop shell.
   Restate its materials here so that alternate layout keeps the same CI. */
@media (max-width:820px) {
  html:has(#app-screen:not(.hidden)),body:has(#app-screen:not(.hidden)),
  #app-screen:not(.hidden) { background:var(--studio-canvas) !important; }
  #app-screen.is-mobile-studio:not(.hidden) aside#sidebar,
  #app-screen.is-mobile-studio #studio-project-activity { background:var(--studio-ink) !important; color:var(--studio-cream) !important; }
  #app-screen.is-mobile-studio #preview-area { background:var(--studio-canvas) !important; }
  #studio-mobile-topbar > button,#studio-mobile-chatbar > button {
    border-color:var(--studio-line-strong) !important;
    background:var(--studio-surface-2) !important;
    color:var(--studio-cream) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  .studio-mobile-icon,.studio-mobile-icon--forward { stroke:var(--studio-silver); }
  .studio-mobile-bar .studio-mobile-title,
  .studio-mobile-bar .studio-mobile-title span { color:var(--studio-cream) !important; }
  .studio-mobile-bar .studio-mobile-title em { color:var(--studio-silver) !important; }
  #app-screen.is-mobile-studio #sidebar::before { background:linear-gradient(to bottom,rgba(23,21,27,.82),rgba(23,21,27,0)); }
  #app-screen.is-mobile-studio #sidebar::after { background:linear-gradient(to top,rgba(23,21,27,.82),rgba(23,21,27,0)); }
  .studio-mobile-project-row {
    border-color:var(--studio-line) !important;
    color:var(--studio-cream) !important;
    background-image:linear-gradient(var(--studio-line),var(--studio-line));
  }
  .studio-mobile-project-row small { color:var(--studio-silver); }
  .studio-mobile-project-thumb { border-color:var(--studio-line-strong); }
  .studio-mobile-project-row--new .studio-mobile-project-thumb { background:var(--studio-surface); color:var(--studio-silver); }
  #app-screen.is-mobile-studio #studio-workspace-trigger {
    border-color:var(--studio-line-strong) !important;
    background:var(--studio-surface-2) !important;
    box-shadow:-2px 0 0 rgba(23,201,255,.5),2px 0 0 rgba(255,49,95,.5),0 18px 42px rgba(0,0,0,.45) !important;
  }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-avatar,
  #app-screen.is-mobile-studio #studio-account-trigger { background:var(--studio-surface-2) !important; color:var(--studio-cream) !important; }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-name { color:var(--studio-cream); }
  #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-chevron { color:var(--studio-silver); }
  #app-screen.is-mobile-studio #studio-account-menu:not(.hidden) {
    border-top:1px solid var(--studio-line-strong) !important;
    background:var(--studio-ink) !important;
    color:var(--studio-cream) !important;
  }
  #app-screen.is-mobile-studio #bottom-panel:not(.hidden) {
    border-color:var(--studio-line-strong) !important;
    background:var(--studio-surface) !important;
    box-shadow:-2px 0 0 rgba(23,201,255,.45),2px 0 0 rgba(255,49,95,.45),0 18px 46px rgba(0,0,0,.5) !important;
  }
  #app-screen.is-mobile-studio #tab-prompt > .flex-1.relative,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative {
    border-color:var(--studio-line-strong) !important;
    background:rgba(18,17,23,.92) !important;
  }
  #app-screen.is-mobile-studio #prompt { color:var(--studio-cream) !important; }
  #app-screen.is-mobile-studio #prompt::placeholder { color:rgba(184,184,188,.52) !important; }
  #app-screen.is-mobile-studio .studio-prompt-more {
    border-color:var(--studio-line-strong) !important;
    background:var(--studio-surface-2) !important;
    color:var(--studio-silver) !important;
  }
  #app-screen.is-mobile-studio .build-power-row #build-btn {
    background-color:var(--studio-cream) !important;
    box-shadow:-2px 0 0 rgba(23,201,255,.72),2px 0 0 rgba(255,49,95,.72) !important;
  }
  #app-screen.is-mobile-studio:has(#prompt:placeholder-shown) .build-power-row #build-btn { background-color:rgba(184,184,188,.5) !important; }
}

/* A few legacy controls set Camera with selector-level !important declarations.
   The Studio shell is uniformly Space Grotesk in the CI. */
#app-screen:not(.hidden) button,
#app-screen:not(.hidden) a,
#app-screen:not(.hidden) input,
#app-screen:not(.hidden) textarea,
#app-screen:not(.hidden) select { font-family:var(--studio-font) !important; }

/* Project destructive action: CI capsule with one semantic crimson signal. */
.studio-project-actions #delete-sessions-btn.studio-project-delete {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:max-content !important;
  min-height:36px !important;
  padding:0 15px !important;
  border:1px solid rgba(255,49,95,.42) !important;
  border-radius:999px !important;
  background:rgba(255,49,95,.055) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
  font:600 12px/1 var(--studio-font) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  transform:none !important;
  transition:background .18s,border-color .18s,color .18s,transform .18s !important;
}
.studio-project-actions #delete-sessions-btn.studio-project-delete::before {
  content:'';
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--studio-crimson);
  box-shadow:0 0 10px rgba(255,49,95,.48);
}
.studio-project-actions #delete-sessions-btn.studio-project-delete:hover {
  border-color:rgba(255,49,95,.72) !important;
  background:rgba(255,49,95,.12) !important;
  color:var(--studio-cream) !important;
  transform:translateY(-1px) !important;
}

/* Profile avatar: retain recognisability while removing off-palette colour. */
#studio-account-trigger {
  border-radius:50% !important;
  background:transparent !important;
}
.studio-account-avatar,
.studio-account-avatar.has-photo {
  overflow:hidden;
  border:1px solid rgba(251,241,224,.72) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.72),2px 0 0 rgba(255,49,95,.72) !important;
}
.studio-account-avatar img {
  filter:grayscale(1) contrast(1.06) brightness(.94);
  transition:filter .18s ease;
}
#studio-account-trigger:hover .studio-account-avatar {
  box-shadow:-4px 0 0 rgba(23,201,255,.82),4px 0 0 rgba(255,49,95,.82) !important;
}
#studio-account-trigger:hover .studio-account-avatar img { filter:grayscale(1) contrast(1.1) brightness(1.04); }

@media (max-width:820px) {
  #app-screen.is-mobile-studio #studio-account-trigger { background:transparent !important; }
}

/* Exact CI Secondary button: quiet alternative action. */
.studio-project-actions #delete-sessions-btn.studio-project-delete,
.studio-project-actions #delete-sessions-btn.studio-project-delete:hover {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  width:max-content !important;
  min-height:34px !important;
  padding:0 13px !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:999px !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
  font:600 12px/16px 'Space Grotesk',sans-serif !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  filter:none !important;
  transform:none !important;
  animation:none !important;
}
.studio-project-actions #delete-sessions-btn.studio-project-delete::before { display:none !important; }

/* Connector cards: C11's quiet split-side frame with the closing CTA's
   restrained surface lift. Connector artwork remains the only loud colour. */
.studio-connector-card,
.studio-connector-card--live {
  position:relative;
  isolation:isolate;
  overflow:visible;
  border:1px solid #ffffff25 !important;
  background:#1b1920 !important;
  box-shadow:none !important;
  transform:none;
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s !important;
}
.studio-connector-card::before,
.studio-connector-card::after { display:none !important; }
.studio-connector-card:hover::before,
.studio-connector-card:hover::after { display:none !important; }
.studio-connector-card:hover,
.studio-connector-card--live:hover {
  border-color:transparent !important;
  background:
    linear-gradient(#24212a,#24212a) padding-box,
    conic-gradient(from var(--studio-connector-frame-angle),var(--studio-cyan),#b8b8bc33,var(--studio-crimson),#b8b8bc33,var(--studio-cyan)) border-box !important;
  box-shadow:0 8px 20px rgba(0,0,0,.24) !important;
  transform:translateY(-1px);
  animation:studio-connector-c09 8s linear infinite;
}
@property --studio-connector-frame-angle { syntax:'<angle>'; inherits:false; initial-value:135deg; }
@keyframes studio-connector-c09 { to { --studio-connector-frame-angle:495deg; } }
@media (prefers-reduced-motion:reduce) {
  .studio-connector-card,.studio-connector-card--live { transition:none !important; }
  .studio-connector-card:hover,.studio-connector-card--live:hover { transform:none; animation:none !important; }
  .studio-dashboard-template-grid > div > div:first-child { transition:none !important; }
  .studio-dashboard-template-grid > div:hover > div:first-child { transform:none; animation:none !important; }
  .studio-project-card:not(.studio-project-card--new) { transition:none !important; }
  .studio-project-card:not(.studio-project-card--new):hover { transform:none; animation:none !important; }
}

/* Non-dashboard view marker: turn the sidebar divider into the same restrained
   cyan-to-crimson accent used above the "Missing a connector?" card. */
@media (min-width:821px) {
  #app-screen:not(.is-mobile-studio):has(.studio-primary-nav .studio-nav-item.is-active:not([data-studio-view="dashboard"])) #sidebar,
  #app-screen:not(.is-mobile-studio):has(.studio-primary-nav .studio-nav-item.is-active:not([data-studio-view="dashboard"])) aside#sidebar {
    position:relative !important;
    height:100% !important;
    min-height:100% !important;
    border-right-color:transparent !important;
  }

  #app-screen:not(.is-mobile-studio):not(:has(#preview-container:not(.hidden))):not(:has(#studio-project-workspace:not(.hidden))):has(.studio-window.is-open.is-fullscreen):has(.studio-primary-nav .studio-nav-item.is-active:not([data-studio-view="dashboard"])) .studio-atmosphere,
  #app-screen:not(.is-mobile-studio):not(:has(#preview-container:not(.hidden))):not(:has(#studio-project-workspace:not(.hidden))):has(.studio-window.is-open.is-fullscreen):has(.studio-primary-nav .studio-nav-item.is-active:not([data-studio-view="dashboard"])) #preview-empty:not(.hidden),
  #app-screen:not(.is-mobile-studio):not(:has(#preview-container:not(.hidden))):not(:has(#studio-project-workspace:not(.hidden))):has(.studio-window.is-open.is-fullscreen):has(.studio-primary-nav .studio-nav-item.is-active:not([data-studio-view="dashboard"])) .studio-window.is-open.is-fullscreen {
    border-color:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  #app-screen:not(.is-mobile-studio):not(:has(#preview-container:not(.hidden))):not(:has(#studio-project-workspace:not(.hidden))):has(.studio-window.is-open.is-fullscreen):has(.studio-primary-nav .studio-nav-item.is-active:not([data-studio-view="dashboard"]))::after {
    content:'';
    position:fixed;
    z-index:132;
    inset:var(--studio-gap) var(--studio-gap) -1px var(--studio-rail);
    padding:1px;
    border-radius:18px 18px 0 0;
    background:conic-gradient(from 225deg,var(--studio-cyan),var(--studio-crimson),var(--studio-cyan));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:.7;
    pointer-events:none;
  }
}

/* Resizable prompt/chat column -------------------------------------------- */
#studio-collapsed-menu-trigger,
#studio-prompt-column-resizer { display:none; }

/* The full workspace is an overlay, so its underlying split-view divider must
   never remain visible or interactive above the project preview. */
#app-screen:has(#studio-project-workspace:not(.hidden):not(.is-split-view)) #studio-prompt-column-resizer {
  display:none !important;
  pointer-events:none !important;
}

@media (min-width:1101px) {
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)) {
    --studio-prompt-boundary:50vw;
  }
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)):not(.is-prompt-column-collapsed) #studio-project-activity {
    right:calc(100vw - var(--studio-prompt-boundary)) !important;
  }
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)):not(.is-prompt-column-collapsed) #bottom-panel:not(.hidden) {
    right:calc(100vw - var(--studio-prompt-boundary)) !important;
  }
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)):not(.is-prompt-column-collapsed) #url-bar:not(.hidden),
  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)):not(.is-prompt-column-collapsed) #preview-area {
    left:var(--studio-prompt-boundary) !important;
  }

  #app-screen:not(.is-mobile-studio):has(#preview-container:not(.hidden)) #studio-prompt-column-resizer {
    position:fixed;
    z-index:170;
    top:48px;
    bottom:0;
    left:var(--studio-prompt-boundary);
    display:block;
    width:12px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    cursor:col-resize;
    touch-action:none;
    transform:translateX(-50%);
  }
  #studio-prompt-column-resizer::before {
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    border-radius:999px;
    background:linear-gradient(to bottom,var(--studio-cyan),var(--studio-crimson));
    opacity:.7;
    transform:translateX(-50%);
    transition:opacity .18s ease,filter .18s ease;
  }
  #studio-prompt-column-resizer::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:4px;
    height:36px;
    border:1px solid var(--studio-cyan);
    border-radius:999px;
    background:var(--studio-cyan);
    box-shadow:none;
    transform:translate(-50%,-50%);
    transition:height .18s ease,box-shadow .18s ease;
  }
  #studio-prompt-column-resizer:is(:hover,:focus-visible)::before,
  #app-screen.is-prompt-column-resizing #studio-prompt-column-resizer::before {
    opacity:1;
    filter:saturate(1.3) brightness(1.18);
  }
  #studio-prompt-column-resizer:is(:hover,:focus-visible)::after,
  #app-screen.is-prompt-column-resizing #studio-prompt-column-resizer::after {
    height:48px;
    box-shadow:0 0 10px rgba(23,201,255,.38);
  }

  /* Full-width preview after the divider reaches the left edge. */
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #studio-project-activity,
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden) {
    display:none !important;
  }
  #app-screen.is-prompt-column-collapsed:not(.is-session-sidebar-open):has(#preview-container:not(.hidden)) #studio-prompt-column-resizer {
    display:none !important;
  }
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #url-bar:not(.hidden),
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #preview-area {
    left:0 !important;
  }
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #studio-collapsed-menu-trigger {
    display:grid !important;
    place-items:center;
  }
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #studio-split-history { display:none !important; }
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #studio-split-panel {
    display:grid !important;
    border:1px solid var(--studio-line-strong) !important;
    border-radius:50% !important;
    background:var(--studio-surface) !important;
    color:var(--studio-cream) !important;
  }
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #studio-split-panel:hover {
    border-color:var(--studio-line-silver) !important;
    background:var(--studio-surface-2) !important;
  }
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)).is-session-sidebar-open #url-bar:not(.hidden),
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)).is-session-sidebar-open #preview-area {
    left:224px !important;
  }
  #app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)).is-session-sidebar-open #studio-prompt-column-resizer {
    left:224px !important;
    display:block !important;
  }

  /* Direct manipulation follows the pointer without easing; released layouts
     regain the same calm transition as the pin/unpin interaction. */
  html body #app-screen.is-prompt-column-resizing:has(#preview-container:not(.hidden)) #studio-project-activity,
  html body #app-screen.is-prompt-column-resizing:has(#preview-container:not(.hidden)) #bottom-panel:not(.hidden),
  html body #app-screen.is-prompt-column-resizing:has(#preview-container:not(.hidden)) #url-bar:not(.hidden),
  html body #app-screen.is-prompt-column-resizing:has(#preview-container:not(.hidden)) #preview-area { transition:none !important; }
}

/* Keep every piece of prompt copy within the documented CI text palette. */
#app-screen:has(#preview-container:not(.hidden)) #prompt {
  color:var(--studio-cream) !important;
  caret-color:var(--studio-cream);
}
#app-screen:has(#preview-container:not(.hidden)) #prompt::placeholder {
  color:rgba(184,184,188,.52) !important;
  opacity:1 !important;
}
#app-screen:has(#preview-container:not(.hidden)) #prompt::selection {
  background:rgba(23,201,255,.28);
  color:var(--studio-cream);
}
#app-screen:has(#preview-container:not(.hidden)) .studio-prompt-add,
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-item,
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-upload,
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-upload:hover {
  color:var(--studio-cream) !important;
}
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-menu-head,
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-item small,
#app-screen:has(#preview-container:not(.hidden)) .prompt-uploads-empty {
  color:var(--studio-silver) !important;
}

/* Microphone permission dialog: CI surface + Secondary and L01 actions. */
#dialog-modal.dialog-mic-error {
  background:rgba(19,18,23,.82) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
#dialog-modal.dialog-mic-error > div {
  width:min(520px,calc(100vw - 32px)) !important;
  max-width:520px !important;
  height:auto !important;
  border:1px solid rgba(255,255,255,.145) !important;
  border-radius:20px !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:
    -3px 0 0 rgba(23,201,255,.64),
    3px 0 0 rgba(255,49,95,.64),
    0 0 12px rgba(255,255,255,.12),
    0 24px 70px rgba(0,0,0,.58) !important;
}
#dialog-modal.dialog-mic-error > div > div:first-child {
  padding:28px 30px 14px !important;
}
#dialog-modal.dialog-mic-error > div > div:nth-child(2) {
  align-items:center !important;
  padding:10px 24px 24px !important;
}
#dialog-modal.dialog-mic-error #dialog-message {
  margin:0 !important;
  color:var(--studio-cream) !important;
  font:500 18px/1.5 var(--studio-font) !important;
  letter-spacing:-.015em !important;
  text-transform:none !important;
}
#dialog-modal.dialog-mic-error #dialog-cancel,
#dialog-modal.dialog-mic-error #dialog-ok {
  min-width:0 !important;
  min-height:40px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  font:600 14px/1 var(--studio-font) !important;
  text-transform:none !important;
  transition:transform .18s ease,filter .18s ease,background .18s ease !important;
}
#dialog-modal.dialog-mic-error #dialog-cancel {
  border:1px solid rgba(255,255,255,.25) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-silver) !important;
  box-shadow:none !important;
}
#dialog-modal.dialog-mic-error #dialog-ok {
  border:1px solid rgba(184,184,188,.4) !important;
  background:rgba(251,241,224,.024) !important;
  background-image:none !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  animation:studio-dialog-l01 3.6s ease-in-out infinite;
}
#dialog-modal.dialog-mic-error #dialog-cancel:hover,
#dialog-modal.dialog-mic-error #dialog-ok:hover {
  filter:brightness(1.12);
  transform:translateY(-2px);
}
@keyframes studio-dialog-l01 {
  0%,20%,100% { box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6); }
  50%,65% { box-shadow:-6px 0 0 rgba(23,201,255,.8),6px 0 0 rgba(255,49,95,.8); }
}
@media (max-width:600px) {
  #dialog-modal.dialog-mic-error > div > div:first-child { padding:24px 22px 12px !important; }
  #dialog-modal.dialog-mic-error > div > div:nth-child(2) { padding:10px 18px 20px !important; }
  #dialog-modal.dialog-mic-error #dialog-message { font-size:16px !important; }
}
@media (prefers-reduced-motion:reduce) {
  #dialog-modal.dialog-mic-error #dialog-ok { animation:none !important; }
}

/* Connector request result: the legacy dialog's gray copy has insufficient
   contrast on Studio's dark surface, so keep this compact status CI-native. */
#dialog-modal.dialog-connector-status {
  background:rgba(19,18,23,.82) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
#dialog-modal.dialog-connector-status > div {
  width:min(520px,calc(100vw - 32px)) !important;
  max-width:520px !important;
  height:auto !important;
  border:1px solid rgba(255,255,255,.145) !important;
  border-radius:20px !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.64),3px 0 0 rgba(255,49,95,.64),0 24px 70px rgba(0,0,0,.58) !important;
}
#dialog-modal.dialog-connector-status > div > div:first-child {
  padding:26px 28px 12px !important;
}
#dialog-modal.dialog-connector-status > div > div:nth-child(2) {
  align-items:center !important;
  padding:10px 22px 22px !important;
}
#dialog-modal.dialog-connector-status #dialog-message {
  margin:0 !important;
  color:var(--studio-cream) !important;
  font:500 17px/1.45 var(--studio-font) !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}
#dialog-modal.dialog-connector-status #dialog-ok {
  min-height:40px !important;
  padding:0 18px !important;
  border:1px solid var(--studio-line-silver) !important;
  border-radius:999px !important;
  background:rgba(251,241,224,.024) !important;
  background-image:none !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  font:600 14px/1 var(--studio-font) !important;
  text-transform:none !important;
  transition:background .18s ease,filter .18s ease,transform .18s ease !important;
}
#dialog-modal.dialog-connector-status #dialog-ok:hover {
  background:var(--studio-surface-2) !important;
  filter:brightness(1.12);
  transform:translateY(-1px);
}
@media (max-width:600px) {
  #dialog-modal.dialog-connector-status > div > div:first-child { padding:22px 20px 10px !important; }
  #dialog-modal.dialog-connector-status > div > div:nth-child(2) { padding:10px 18px 20px !important; }
  #dialog-modal.dialog-connector-status #dialog-message { font-size:15px !important; }
}

/* Compact project-view rail. The current view opens into a labelled pill;
   the neighbouring views stay icon-only and More reveals Code sideways. */
#app-screen:has(#preview-container:not(.hidden)) .studio-split-preview-wrap {
  position:relative;
  display:inline-flex !important;
  align-items:center;
  gap:2px;
  height:40px;
  padding:0;
  border:1px solid var(--studio-line-strong);
  border-radius:999px;
  background:rgba(19,18,23,.76);
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button {
  display:inline-flex !important;
  place-items:initial;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:0 0 30px;
  width:30px;
  min-width:30px;
  height:40px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px;
  background:transparent !important;
  color:var(--studio-silver);
  box-shadow:none !important;
  filter:none !important;
  animation:none !important;
  transition:width .22s ease,padding .22s ease,background .16s ease,color .16s ease,transform .16s ease !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button:hover,
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button:focus-visible {
  background:rgba(251,241,224,.07) !important;
  color:var(--studio-cream);
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button:hover { transform:translateY(-1px); }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button svg {
  flex:0 0 17px;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button > span { display:none; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button.is-active {
  flex-basis:auto;
  width:auto;
  min-width:0;
  padding:0 12px !important;
  border:1px solid var(--studio-line-silver) !important;
  background:rgba(251,241,224,.035) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.62),2px 0 0 rgba(255,49,95,.62) !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button.is-active > span {
  display:inline-flex;
  align-items:center;
  height:auto;
  color:inherit !important;
  font:600 14px/1 var(--studio-font);
  transform:none;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary .studio-split-preview-wrap #studio-split-preview.studio-split-view-button {
  flex-basis:30px !important;
  width:30px !important;
  min-width:30px !important;
  height:40px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  animation:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary .studio-split-preview-wrap #studio-split-preview.studio-split-view-button:not(.is-active) > span {
  display:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary .studio-split-preview-wrap #studio-split-preview.studio-split-view-button.is-active {
  flex-basis:auto !important;
  width:auto !important;
  min-width:0 !important;
  padding:0 12px !important;
  border:1px solid var(--studio-line-silver) !important;
  background:rgba(251,241,224,.035) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.62),2px 0 0 rgba(255,49,95,.62) !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-primary .studio-split-preview-wrap #studio-split-preview.studio-split-view-button.is-active > span {
  display:inline-flex !important;
  align-items:center !important;
  align-self:center !important;
  height:auto !important;
  line-height:1 !important;
  transform:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-separator {
  flex:0 0 1px;
  width:1px;
  height:18px;
  margin:0 1px;
  background:var(--studio-line-strong);
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button--extended { display:inline-flex !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-separator--extended { display:block !important; }

#app-screen:has(#preview-container:not(.hidden)) .studio-workspace-more-panel.is-active {
  display:grid;
  place-items:center;
  padding:28px;
  background:var(--studio-canvas);
}
.studio-workspace-more-tools {
  position:relative;
  isolation:isolate;
  width:min(560px,100%);
  padding:30px;
  border:0;
  border-radius:22px;
  background:
    radial-gradient(circle at 7% 4%,rgba(23,201,255,.09),transparent 32%),
    radial-gradient(circle at 95% 96%,rgba(255,49,95,.08),transparent 34%),
    var(--studio-surface);
  box-shadow:0 24px 70px rgba(0,0,0,.3);
  color:var(--studio-cream);
}
.studio-workspace-more-tools::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(23,201,255,.68),rgba(184,184,188,.22) 45%,rgba(255,49,95,.68));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.studio-workspace-more-kicker {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
  color:var(--studio-silver) !important;
  font:600 11px/1 var(--studio-font);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.studio-workspace-more-kicker::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--studio-cyan);
  box-shadow:0 0 10px rgba(23,201,255,.5);
}
.studio-workspace-more-tools > strong {
  display:flex;
  align-items:center;
  gap:16px;
  font:600 28px/1.1 var(--studio-font);
}
.studio-workspace-more-tools > strong::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(23,201,255,.62),rgba(255,49,95,.62));
  opacity:.72;
}
.studio-workspace-more-tools > div { display:grid; gap:10px; margin-top:26px; }
.studio-workspace-more-tools button {
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 20px;
  align-items:center;
  gap:13px;
  min-height:68px;
  padding:10px 16px 10px 12px;
  overflow:hidden;
  border:1px solid var(--studio-line-strong);
  border-radius:13px;
  background:rgba(33,31,39,.82);
  color:var(--studio-cream);
  text-align:left;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.studio-workspace-more-tools button:hover,
.studio-workspace-more-tools button:focus-visible {
  border-color:rgba(251,241,224,.27);
  background:linear-gradient(105deg,rgba(23,201,255,.075),rgba(251,241,224,.035) 48%,rgba(255,49,95,.07)),#24212a;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  outline:0;
  transform:translateY(-1px);
}
.studio-workspace-more-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(251,241,224,.15);
  border-radius:11px;
  background:rgba(19,18,23,.72);
  color:var(--studio-silver);
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.studio-workspace-more-icon svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#studio-split-more-history .studio-workspace-more-icon { color:rgba(23,201,255,.82); }
#studio-split-more-share .studio-workspace-more-icon { color:var(--studio-cream); }
#studio-split-more-publish .studio-workspace-more-icon { color:rgba(255,49,95,.82); }
.studio-workspace-more-tools button:hover .studio-workspace-more-icon,
.studio-workspace-more-tools button:focus-visible .studio-workspace-more-icon {
  border-color:rgba(251,241,224,.26);
  background:rgba(19,18,23,.9);
  color:var(--studio-cream);
}
.studio-workspace-more-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.studio-workspace-more-copy strong { color:var(--studio-cream); font:600 14px/17px var(--studio-font); }
.studio-workspace-more-copy small { color:var(--studio-silver); font:400 11px/15px var(--studio-font); }
.studio-workspace-more-arrow {
  justify-self:end;
  color:rgba(251,241,224,.42);
  font:400 18px/1 var(--studio-font);
  transition:color .18s ease,transform .18s ease;
}
.studio-workspace-more-tools button:hover .studio-workspace-more-arrow,
.studio-workspace-more-tools button:focus-visible .studio-workspace-more-arrow {
  color:var(--studio-cream);
  transform:translateX(2px);
}

/* Files and Code selected from the compact dropdown replace only the website
   pane. The compact header and chat geometry stay fixed. */
#app-screen:has(#preview-container:not(.hidden)) #studio-project-workspace.is-split-view:not(.hidden) {
  top:48px;
  right:0;
  bottom:0;
  left:var(--studio-prompt-boundary);
  z-index:20;
  background:var(--studio-canvas);
}
#studio-project-workspace.is-split-view:not(.hidden) > .studio-workspace-header {
  display:none !important;
}
#studio-project-workspace.is-split-view.is-publish-view:not(.hidden) {
  background:transparent !important;
  pointer-events:none;
}
#studio-project-workspace.is-split-view.is-publish-view:not(.hidden) > .studio-workspace-panel {
  display:none !important;
}
#studio-project-workspace.is-split-view.is-publish-view:not(.hidden) > #studio-publish-popover:not(.hidden) {
  top:16px;
  display:block !important;
  pointer-events:auto;
}
#app-screen.is-prompt-column-collapsed:has(#preview-container:not(.hidden)) #studio-project-workspace.is-split-view:not(.hidden) {
  left:0;
}
#app-screen.is-prompt-column-collapsed.is-session-sidebar-open:has(#preview-container:not(.hidden)) #studio-project-workspace.is-split-view:not(.hidden) {
  left:224px;
}
#app-screen.is-prompt-column-resizing:has(#preview-container:not(.hidden)) #studio-project-workspace.is-split-view:not(.hidden) {
  transition:none;
}

/* Keep the compact credit control's existing material, but contain its visual
   treatment inside the circular frame. No cyan/red shadow may spread into the
   neighbouring Share or Publish controls. */
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy,
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy:hover {
  animation:none !important;
  box-shadow:
    -2px 0 0 rgba(23,201,255,.6),
    2px 0 0 rgba(255,49,95,.6),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.28) !important;
}

html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share,
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-share:hover {
  animation:none !important;
  box-shadow:
    -2px 0 0 rgba(23,201,255,.6),
    2px 0 0 rgba(255,49,95,.6),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.28) !important;
}

/* The first project tile is a permanent route back to a clean Studio brief. */
.studio-project-card.studio-project-card--new {
  padding:0;
  appearance:none;
  color:var(--studio-cream);
  font-family:var(--studio-font);
  text-transform:none;
}
.studio-project-thumb.studio-project-thumb--new {
  background:var(--studio-surface);
  color:var(--studio-silver);
}
.studio-new-project-plus {
  font:300 52px/1 var(--studio-font);
  transition:color .18s ease,transform .18s ease;
}
.studio-project-card--new .studio-project-copy {
  min-height:63px;
  justify-content:center;
}
.studio-project-card--new:hover .studio-new-project-plus {
  color:var(--studio-cream);
  transform:scale(1.06);
}

/* Header controls: restrained CI colour at rest, brighter on interaction.
   Shadows stay inside or immediately against each frame so neighbouring
   controls never inherit the old wide colour pop-out. */
#app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-collapsed-menu-trigger,
  #studio-split-history,
  #studio-split-panel,
  #studio-split-device,
  #studio-split-refresh,
  #studio-split-open
) {
  border:1px solid rgba(251,241,224,.16) !important;
  background:linear-gradient(135deg,rgba(23,201,255,.07),rgba(251,241,224,.025) 52%,rgba(255,49,95,.065)) !important;
  color:var(--studio-cream) !important;
  box-shadow:inset 1px 0 rgba(23,201,255,.22),inset -1px 0 rgba(255,49,95,.22) !important;
}
#app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-collapsed-menu-trigger,
  #studio-split-history,
  #studio-split-panel,
  #studio-split-device,
  #studio-split-refresh,
  #studio-split-open
):is(:hover,:focus-visible) {
  border-color:rgba(251,241,224,.34) !important;
  background:linear-gradient(135deg,rgba(23,201,255,.15),rgba(251,241,224,.055) 52%,rgba(255,49,95,.14)) !important;
  box-shadow:-1px 0 0 rgba(23,201,255,.62),1px 0 0 rgba(255,49,95,.62),0 0 14px rgba(23,201,255,.1) !important;
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-preview-wrap {
  border-color:var(--studio-line-strong) !important;
  box-shadow:none;
}
#app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-split-preview,
  #studio-split-files-shortcut,
  #studio-split-code-shortcut,
  #studio-split-more-trigger
):not(.is-active) { color:rgba(251,241,224,.64) !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-button:not(.is-active):is(:hover,:focus-visible) {
  background:rgba(251,241,224,.07) !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) #studio-split-refresh,
#app-screen:has(#preview-container:not(.hidden)) #studio-split-refresh:is(:hover,:focus-visible) {
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) #studio-split-refresh { color:var(--studio-silver) !important; }
#app-screen:has(#preview-container:not(.hidden)) #studio-split-refresh:is(:hover,:focus-visible) { color:var(--studio-cream) !important; }
#app-screen:has(#preview-container:not(.hidden)) .studio-split-view-separator {
  background:var(--studio-line-strong);
}
#app-screen:has(#preview-container:not(.hidden)) .studio-split-page > div {
  border-color:rgba(251,241,224,.22) !important;
  box-shadow:inset 1px 0 rgba(23,201,255,.18),inset -1px 0 rgba(255,49,95,.18) !important;
}

/* Brighter at rest so the two primary preview-navigation controls remain easy
   to locate, while all colour stays contained inside their existing frames. */
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-history,#studio-split-panel) {
  border-color:rgba(251,241,224,.3) !important;
  background:linear-gradient(105deg,rgba(23,201,255,.105),rgba(251,241,224,.075) 52%,rgba(255,49,95,.095)) !important;
  color:var(--studio-cream) !important;
  box-shadow:inset 1px 0 rgba(23,201,255,.3),inset -1px 0 rgba(255,49,95,.3),inset 0 1px rgba(251,241,224,.08) !important;
}
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-history,#studio-split-panel):is(:hover,:focus-visible) {
  border-color:rgba(251,241,224,.46) !important;
  background:linear-gradient(105deg,rgba(23,201,255,.17),rgba(251,241,224,.11) 52%,rgba(255,49,95,.15)) !important;
  color:var(--studio-cream) !important;
  box-shadow:inset 1px 0 rgba(23,201,255,.46),inset -1px 0 rgba(255,49,95,.46),inset 0 1px rgba(251,241,224,.12) !important;
}

/* Share and credits retain the CI colour ring without a graphite disc or a
   second grey outline. Their centres remain transparent to the toolbar. */
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions :is(#studio-split-share,#studio-split-buy),
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions :is(#studio-split-share,#studio-split-buy):hover {
  position:relative;
  border:0 !important;
  background:transparent !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
  animation:none !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions :is(#studio-split-share,#studio-split-buy)::before {
  content:'';
  position:absolute;
  inset:0;
  display:block !important;
  padding:2px;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(23,201,255,.68),rgba(255,49,95,.68));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions :is(#studio-split-share,#studio-split-buy):is(:hover,:focus-visible) {
  filter:brightness(1.2) !important;
  transform:translateY(-1px);
}
html body #app-screen:has(#preview-container:not(.hidden)) .studio-split-actions #studio-split-buy svg {
  fill:var(--studio-cream) !important;
}

/* The navigation pair uses the same cut-out colour frame as Share/Credits,
   but keeps its established rounded-square silhouette. */
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-history,#studio-split-panel),
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-history,#studio-split-panel):is(:hover,:focus-visible) {
  position:relative;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-history,#studio-split-panel)::before {
  content:'';
  position:absolute;
  inset:0;
  display:block !important;
  padding:2px;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(23,201,255,.68),rgba(255,49,95,.68));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-history,#studio-split-panel):is(:hover,:focus-visible) {
  filter:brightness(1.2) !important;
  transform:translateY(-1px);
}

/* The device-cycle and open-site controls share the same restrained cut-out
   frame and circular silhouette. */
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-device,#studio-split-open),
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-device,#studio-split-open):is(:hover,:focus-visible) {
  position:relative;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:var(--studio-cream) !important;
  box-shadow:none !important;
}
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-device,#studio-split-open)::before {
  content:'';
  position:absolute;
  inset:0;
  display:block !important;
  padding:2px;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(23,201,255,.68),rgba(255,49,95,.68));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
#app-screen:has(#preview-container:not(.hidden)) :is(#studio-split-device,#studio-split-open):is(:hover,:focus-visible) {
  filter:brightness(1.2) !important;
  transform:translateY(-1px);
}

/* Final toolbar CI frame. Match the library search field's precise one-pixel
   conic edge instead of the older two-pixel cut-out rings and side shadows. */
html body #app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-split-history,
  #studio-split-panel,
  #studio-split-device,
  #studio-split-open,
  #studio-split-preview.is-active,
  #studio-split-share,
  #studio-split-buy
) {
  border:1px solid transparent !important;
  background:
    linear-gradient(var(--studio-surface),var(--studio-surface)) padding-box,
    conic-gradient(from 135deg,var(--studio-cyan),rgba(184,184,188,.2),var(--studio-crimson),rgba(184,184,188,.2),var(--studio-cyan)) border-box !important;
  box-shadow:none !important;
  animation:none !important;
  filter:none !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-split-history,
  #studio-split-panel,
  #studio-split-device,
  #studio-split-open,
  #studio-split-share,
  #studio-split-buy
)::before {
  content:none !important;
  display:none !important;
}
html body #app-screen:has(#preview-container:not(.hidden)) :is(
  #studio-split-history,
  #studio-split-panel,
  #studio-split-device,
  #studio-split-open,
  #studio-split-preview.is-active,
  #studio-split-share,
  #studio-split-buy
):is(:hover,:focus-visible) {
  background:
    linear-gradient(var(--studio-surface-2),var(--studio-surface-2)) padding-box,
    conic-gradient(from 135deg,var(--studio-cyan),rgba(184,184,188,.34),var(--studio-crimson),rgba(184,184,188,.34),var(--studio-cyan)) border-box !important;
  box-shadow:none !important;
  filter:brightness(1.08) !important;
}

/* Focused composer: two conic-border orbits replace the textarea's grey edge,
   moving in opposite directions over ten seconds. */
@property --studio-prompt-c24-angle {
  syntax:'<angle>';
  inherits:false;
  initial-value:135deg;
}
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative {
  position:relative;
  isolation:isolate;
  border-radius:24px;
}
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::before,
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::after {
  content:'';
  position:absolute;
  z-index:2;
  height:auto;
  padding:1px;
  border-radius:inherit;
  background:conic-gradient(
    from var(--studio-prompt-c24-angle),
    var(--studio-cyan),
    transparent 28% 48%,
    var(--studio-crimson) 60%,
    transparent 78% 98%,
    var(--studio-cyan)
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:1;
  pointer-events:none;
  animation:studio-prompt-c24-orbit 10s linear infinite;
}
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::before { inset:-5px; }
#app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::after {
  inset:0;
  animation-direction:reverse !important;
}

/* Live voice editing stays on the built site: the composer starts it and this
   compact monitor floats over the preview instead of replacing the workspace. */
#tab-prompt #prompt-talk-btn {
  position:absolute !important;
  left:72px !important;
  bottom:16px !important;
  z-index:5 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 16px !important;
  border:1px solid rgba(251,241,224,.25) !important;
  border-radius:999px !important;
  background:var(--studio-surface) !important;
  box-shadow:inset 0 1px 0 rgba(251,241,224,.07) !important;
  color:var(--studio-cream) !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:normal !important;
  cursor:pointer !important;
}
#tab-prompt #prompt-talk-btn:is(:hover,:focus-visible),
#tab-prompt #prompt-talk-btn[aria-pressed='true'] {
  background:var(--studio-surface-2) !important;
  border-color:rgba(251,241,224,.5) !important;
  filter:brightness(1.12);
}
#tab-prompt #prompt-talk-btn:focus-visible { outline:2px solid var(--studio-cyan);outline-offset:3px; }
#studio-live-voice {
  position:relative;
  --studio-live-radius:24px;
  z-index:24;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:10px;
  width:100%;
  min-height:0;
  padding:16px 18px;
  overflow:visible;
  border:0;
  border-radius:var(--studio-live-radius);
  background:rgba(18,17,23,.96);
  box-shadow:0 18px 42px rgba(0,0,0,.42);
  color:var(--studio-cream);
  isolation:isolate;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
#studio-live-voice::before,
#studio-live-voice::after {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(var(--studio-live-radius) - 1px);
  pointer-events:none;
}
#studio-live-voice::before {
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse calc(48% * var(--bw1,1)) calc(118% * var(--bh1,1)) at calc(-6% + var(--studio-aurora-left-x,0px)) calc(22% + var(--studio-aurora-left-y,0px)),rgb(23 201 255 / calc(.26 + var(--studio-aurora-alpha,.13))),transparent 72%),
    radial-gradient(ellipse calc(30% * var(--bw2,1)) calc(68% * var(--bh2,1)) at calc(4% + var(--bx1,0px)) calc(88% + var(--by1,0px)),rgb(80 226 255 / calc(.12 + var(--studio-aurora-alpha,.13))),transparent 67%),
    radial-gradient(ellipse calc(72% * var(--bw2,1)) calc(48% * var(--bh2,1)) at calc(46% + var(--bx2,0px)) calc(116% + var(--by2,0px)),rgb(251 241 224 / calc(.05 + var(--studio-aurora-alpha,.13))),transparent 74%),
    radial-gradient(ellipse calc(46% * var(--bw3,1)) calc(116% * var(--bh3,1)) at calc(106% + var(--studio-aurora-right-x,0px)) calc(24% + var(--studio-aurora-right-y,0px)),rgb(255 49 95 / calc(.27 + var(--studio-aurora-alpha,.13))),transparent 72%),
    radial-gradient(ellipse calc(28% * var(--bw1,1)) calc(64% * var(--bh1,1)) at calc(96% + var(--bx3,0px)) calc(82% + var(--by3,0px)),rgb(255 105 146 / calc(.13 + var(--studio-aurora-alpha,.13))),transparent 66%),
    radial-gradient(ellipse 62% 44% at calc(60% + var(--bx3,0px)) calc(-12% + var(--by3,0px)),rgb(150 78 240 / calc(.06 + var(--studio-aurora-alpha,.13))),transparent 74%);
  background-color:rgba(18,17,23,.72);
  background-size:118% 116%,106% 114%,112% 122%,118% 116%,104% 112%,110% 120%;
  background-position:0 50%,2% 94%,50% 100%,100% 50%,98% 88%,50% 0;
  background-repeat:no-repeat;
  -webkit-mask:radial-gradient(ellipse at center,transparent 18%,rgba(0,0,0,.34) 58%,#000 100%);
  mask:radial-gradient(ellipse at center,transparent 18%,rgba(0,0,0,.34) 58%,#000 100%);
  opacity:min(1,calc(.5 + var(--beam-opacity,.42)));
  filter:brightness(calc(.78 + var(--beam-opacity,.42))) saturate(calc(.25 + var(--pulse-glow-boost,1.04)));
  transition:opacity 55ms linear,filter 55ms linear;
  animation:
    studio-voice-edge-flow 7.3s cubic-bezier(.37,.02,.21,.98) infinite alternate,
    studio-voice-edge-wisp 11.7s ease-in-out infinite alternate-reverse;
}
#studio-live-voice::after {
  z-index:1;
  background:
    radial-gradient(ellipse 22% 76% at calc(-2% + var(--studio-wisp-left-x,0px)) calc(32% + var(--studio-wisp-left-y,0px)),rgb(72 224 255 / .52),transparent 70%),
    radial-gradient(ellipse 16% 54% at calc(3% - var(--studio-wisp-left-x,0px)) calc(84% - var(--studio-wisp-left-y,0px)),rgb(23 201 255 / .38),transparent 68%),
    radial-gradient(ellipse 21% 74% at calc(102% + var(--studio-wisp-right-x,0px)) calc(30% + var(--studio-wisp-right-y,0px)),rgb(255 49 95 / .54),transparent 70%),
    radial-gradient(ellipse 15% 52% at calc(97% - var(--studio-wisp-right-x,0px)) calc(82% - var(--studio-wisp-right-y,0px)),rgb(255 110 151 / .4),transparent 68%),
    radial-gradient(ellipse 48% 20% at calc(58% + var(--studio-wisp-top-x,0px)) -5%,rgb(156 87 244 / .38),transparent 72%),
    radial-gradient(ellipse 54% 18% at calc(44% + var(--studio-wisp-bottom-x,0px)) 105%,rgb(251 241 224 / .22),transparent 74%),
    linear-gradient(118deg,rgba(251,241,224,.13),rgba(251,241,224,.025) 22%,transparent 43%);
  background-size:110% 118%,104% 112%,110% 118%,104% 112%,118% 106%,116% 105%,100% 100%;
  background-position:0 35%,1% 86%,100% 34%,99% 84%,55% 0,45% 100%,0 0;
  background-repeat:no-repeat;
  -webkit-mask:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.5) 64%,#000 100%);
  mask:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.5) 64%,#000 100%);
  mix-blend-mode:screen;
  opacity:min(1,calc(.2 + var(--beam-opacity,.42)));
  transition:opacity 55ms linear;
  animation:studio-voice-foreground-wisps 5.1s cubic-bezier(.44,.03,.19,.97) infinite alternate;
}
#studio-live-voice.hidden { display:none !important; }
@property --studio-voice-border-angle { syntax:"<angle>";inherits:false;initial-value:135deg; }
#studio-live-voice-border {
  position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  opacity:1;
  filter:
    brightness(calc(.78 + var(--beam-opacity,.42)))
    saturate(var(--pulse-glow-boost,1.04))
    drop-shadow(-2px 0 calc(4px + var(--studio-aurora-lift,0px)) rgb(23 201 255 / calc(.3 + var(--studio-aurora-alpha,.13))))
    drop-shadow(2px 0 calc(4px + var(--studio-aurora-lift,0px)) rgb(255 49 95 / calc(.3 + var(--studio-aurora-alpha,.13))));
  transition:filter 45ms linear;
}
#studio-live-voice-border::before,
#studio-live-voice-border::after {
  content:"";position:absolute;border-radius:inherit;padding:var(--studio-voice-line-width,1px);
  background:conic-gradient(
    from var(--studio-voice-border-angle),
    var(--studio-cyan),
    transparent 28% 48%,
    var(--studio-crimson) 60%,
    transparent 78% 98%,
    var(--studio-cyan)
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:studio-voice-border-orbit 10s linear infinite;
}
#studio-live-voice-border::before {
  inset:-5px;
  border-radius:calc(var(--studio-live-radius) + 5px);
}
#studio-live-voice-border::after {
  inset:0;
  border-radius:var(--studio-live-radius);
  animation-direction:reverse;
}
@keyframes studio-voice-border-orbit { to { --studio-voice-border-angle:495deg; } }
@keyframes studio-voice-edge-flow {
  0% { background-position:-5% 42%,4% 96%,44% 105%,105% 58%,96% 86%,56% -5%; }
  17% { background-position:1% 54%,-2% 88%,52% 99%,99% 43%,102% 94%,47% 1%; }
  39% { background-position:-3% 48%,6% 102%,48% 103%,103% 52%,94% 80%,53% -3%; }
  64% { background-position:2% 58%,1% 90%,55% 97%,97% 46%,101% 91%,45% 2%; }
  83% { background-position:-1% 45%,5% 98%,46% 104%,104% 55%,95% 84%,55% -1%; }
  100% { background-position:0 52%,-3% 86%,53% 100%,100% 42%,103% 96%,48% 0; }
}
@keyframes studio-voice-edge-wisp {
  0% { background-size:116% 120%,102% 110%,114% 118%,121% 112%,108% 118%,106% 124%; }
  31% { background-size:122% 111%,110% 120%,108% 126%,114% 121%,101% 108%,116% 114%; }
  57% { background-size:112% 124%,104% 116%,119% 115%,123% 109%,111% 122%,108% 127%; }
  79% { background-size:124% 114%,112% 108%,110% 128%,112% 124%,103% 112%,118% 111%; }
  100% { background-size:118% 118%,106% 122%,116% 120%,120% 116%,110% 106%,112% 123%; }
}
@keyframes studio-voice-foreground-wisps {
  0% { background-position:-3% 28%,4% 91%,103% 39%,96% 78%,61% -3%,39% 103%,0 0; }
  23% { background-position:2% 43%,-2% 80%,98% 26%,102% 89%,48% 2%,53% 98%,0 0; }
  47% { background-position:-1% 34%,5% 88%,101% 45%,95% 76%,66% -1%,35% 101%,0 0; }
  71% { background-position:3% 47%,-3% 77%,97% 31%,103% 92%,45% 3%,57% 97%,0 0; }
  100% { background-position:-2% 30%,2% 94%,102% 42%,98% 80%,58% -2%,42% 102%,0 0; }
}
@media(prefers-reduced-motion:reduce) {
  #studio-live-voice-border::before,#studio-live-voice-border::after { animation:none; }
  #studio-live-voice::before,#studio-live-voice::after { animation:none; }
  #studio-live-voice::before,#studio-live-voice::after,#studio-live-voice-border { transition:none; }
}
#studio-live-voice-close {
  position:relative;
  align-self:flex-start;
  flex-shrink:0;
  margin-top:auto;
  padding:6px 16px;
  z-index:2;
  min-height:36px;
  border:0;
  border-radius:999px;
  background:var(--studio-surface);
  box-shadow:none;
  color:var(--studio-cream);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  cursor:pointer;
}
#studio-live-voice-close:is(:hover,:focus-visible) { background:var(--studio-surface-2);color:var(--studio-cream);outline:0;filter:brightness(1.14); }
.studio-live-voice-copy { position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:0;overflow:auto; }
.studio-live-voice-copy strong { flex:0 0 auto;font-size:13px;font-weight:850; }
.studio-live-voice-copy span { min-width:0;white-space:normal;overflow-wrap:anywhere;color:var(--studio-silver);font-size:12px;line-height:1.5; }
body.studio-live-voice-active #prompt-talk-btn { color:var(--studio-cream) !important; }
body.studio-live-voice-active #app-screen #bottom-panel #tab-prompt { display:none !important; }

@media (max-width:760px) {
  #studio-live-voice { --studio-live-radius:15px;padding:12px 14px; }
  .studio-live-voice-copy { gap:7px; }
  .studio-live-voice-copy span { font-size:11px; }
}
@media (max-width:820px) {
  #app-screen.is-mobile-studio #prompt-talk-btn { left:76px !important;bottom:14px !important;height:48px !important;min-height:48px !important; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions.flex { right:16px !important; }
}
@media (max-width:480px) {
  #app-screen.is-mobile-studio #prompt-talk-btn { left:55px !important;bottom:12px !important;height:33px !important;min-height:33px !important;padding:0 12px !important; }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions.flex { right:14px !important; }
}
@keyframes studio-prompt-c24-orbit {
  to { --studio-prompt-c24-angle:495deg; }
}
@media (prefers-reduced-motion:reduce) {
  #app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::before,
  #app-screen:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::after {
    animation:none !important;
  }
}

@media (max-width:480px) {
  #app-screen.is-mobile-studio .build-power-row #build-btn,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) .build-power-row #build-btn,
  #app-screen.is-mobile-studio:has(#prompt:placeholder-shown) .build-power-row #build-btn,
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt:not(.hidden) #prompt-actions.flex .build-power-row #build-btn {
    flex:0 0 33px !important;
    width:33px !important;
    min-width:33px !important;
    max-width:33px !important;
    height:33px !important;
    min-height:33px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background-color:var(--studio-cream) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317151b' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6'/%3E%3Cpath d='m6 12 6-6 6 6'/%3E%3C/svg%3E") !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:17px 17px !important;
    box-shadow:none !important;
    color:transparent !important;
    font-size:0 !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* Credits shop: CI-led pricing composition. Standard packs remain quiet while
   the recommended pack receives the single C24 focal treatment. */
@property --studio-credit-pack-angle {
  syntax:'<angle>';
  inherits:false;
  initial-value:135deg;
}
#credits-shop-modal {
  padding:32px !important;
  background:
    radial-gradient(circle at 12% 50%,rgba(23,201,255,.09),transparent 30%),
    radial-gradient(circle at 88% 50%,rgba(255,49,95,.09),transparent 30%),
    rgba(7,7,9,.78) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
#credits-shop-modal .credits-shop-card {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  width:min(1180px,calc(100vw - 64px)) !important;
  max-height:calc(100dvh - 64px);
  padding:38px 40px 30px !important;
  overflow:auto;
  border:1px solid rgba(251,241,224,.15) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 0 0,rgba(23,201,255,.055),transparent 28%),
    radial-gradient(circle at 100% 100%,rgba(255,49,95,.05),transparent 30%),
    var(--studio-surface) !important;
  box-shadow:0 34px 100px rgba(0,0,0,.58),inset 0 1px rgba(251,241,224,.055) !important;
  color:var(--studio-cream) !important;
}
#credits-shop-modal .credits-shop-card::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(23,201,255,.52),rgba(251,241,224,.1) 45%,rgba(255,49,95,.52));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
#credits-shop-modal .credits-shop-card .path-pill {
  grid-column:1;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 13px !important;
  color:var(--studio-silver) !important;
  font:600 11px/14px var(--studio-font) !important;
  letter-spacing:.13em !important;
}
#credits-shop-modal .credits-shop-card .path-pill::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--studio-cyan);
  box-shadow:0 0 12px rgba(23,201,255,.52);
}
#credits-shop-modal .credits-shop-title {
  grid-column:1;
  margin:0 0 7px !important;
  color:var(--studio-cream) !important;
  font:700 clamp(28px,3vw,38px)/1.05 var(--studio-font) !important;
  letter-spacing:-.035em;
}
#credits-shop-modal .credits-shop-tagline {
  grid-column:1;
  margin:0 !important;
  color:var(--studio-silver) !important;
  font:400 15px/22px var(--studio-font) !important;
}
#credits-shop-modal .credits-shop-balance {
  grid-column:2;
  grid-row:2/4;
  align-self:center;
  display:flex;
  align-items:baseline;
  gap:5px;
  margin:0 50px 0 28px !important;
  padding:10px 14px !important;
  border:1px solid rgba(251,241,224,.16) !important;
  border-radius:12px !important;
  background:rgba(12,11,15,.48) !important;
  box-shadow:inset 2px 0 rgba(23,201,255,.46),inset -2px 0 rgba(255,49,95,.42) !important;
  color:var(--studio-silver) !important;
  font:600 10px/14px var(--studio-font) !important;
  letter-spacing:.08em !important;
  white-space:nowrap;
}
#credits-shop-modal .credits-shop-balance strong {
  color:var(--studio-cream) !important;
  font:700 20px/1 var(--studio-font) !important;
  letter-spacing:-.02em;
}
#credits-shop-modal .credits-shop-close {
  top:24px;
  right:26px;
  width:36px !important;
  height:36px !important;
  border:1px solid rgba(251,241,224,.14) !important;
  border-radius:50% !important;
  background:rgba(251,241,224,.025) !important;
  color:var(--studio-silver) !important;
  font:300 23px/1 var(--studio-font) !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease !important;
}
#credits-shop-modal .credits-shop-close:is(:hover,:focus-visible) {
  border-color:rgba(251,241,224,.34) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-cream) !important;
  outline:0;
  transform:rotate(5deg) !important;
}
#credits-shop-modal .credits-shop-grid {
  grid-column:1/-1;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-top:34px !important;
  padding:8px;
}
#credits-shop-modal .credits-pack {
  position:relative;
  isolation:isolate;
  min-height:310px;
  padding:24px 22px 20px !important;
  overflow:visible;
  border:1px solid rgba(251,241,224,.145) !important;
  border-radius:18px !important;
  background:rgba(27,25,32,.9) !important;
  box-shadow:none !important;
  color:var(--studio-cream) !important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
#credits-shop-modal .credits-pack:not(.credits-pack--featured):is(:hover,:focus-within) {
  border-color:rgba(251,241,224,.28) !important;
  background:var(--studio-surface-2) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
  transform:translateY(-2px) !important;
}
#credits-shop-modal .credits-pack--featured {
  border-color:rgba(251,241,224,.2) !important;
  background:var(--studio-surface-2) !important;
}
#credits-shop-modal .credits-pack--featured::before,
#credits-shop-modal .credits-pack--featured::after {
  content:'';
  position:absolute;
  z-index:-1;
  height:auto;
  padding:1px;
  border-radius:inherit;
  background:conic-gradient(
    from var(--studio-credit-pack-angle),
    var(--studio-cyan),
    transparent 28% 48%,
    var(--studio-crimson) 60%,
    transparent 78% 98%,
    var(--studio-cyan)
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  animation:studio-credit-pack-orbit 10s linear infinite;
}
#credits-shop-modal .credits-pack--featured::before { inset:-7px; }
#credits-shop-modal .credits-pack--featured::after { inset:-3px; animation-direction:reverse; }
#credits-shop-modal .credits-pack-badge {
  top:17px !important;
  right:17px;
  left:auto !important;
  padding:4px 8px !important;
  border:1px solid rgba(251,241,224,.12) !important;
  border-radius:999px !important;
  background:rgba(251,241,224,.045) !important;
  color:var(--studio-silver) !important;
  font:600 9px/13px var(--studio-font) !important;
  letter-spacing:.08em !important;
  transform:none !important;
}
#credits-shop-modal .credits-pack--featured .credits-pack-badge {
  border-color:rgba(23,201,255,.24) !important;
  background:rgba(23,201,255,.09) !important;
  color:var(--studio-cyan) !important;
}
#credits-shop-modal .credits-pack-name {
  margin:0 0 20px !important;
  color:var(--studio-silver) !important;
  font:500 14px/18px var(--studio-font) !important;
}
#credits-shop-modal .credits-pack-price {
  margin:0 0 14px !important;
  color:var(--studio-cream) !important;
  font:700 36px/1 var(--studio-font) !important;
  letter-spacing:-.045em;
}
#credits-shop-modal .credits-pack-credits {
  margin:0 0 5px;
  color:var(--studio-cream) !important;
  font:500 14px/19px var(--studio-font) !important;
}
#credits-shop-modal .credits-pack-credits strong {
  margin-right:4px;
  color:var(--studio-cream) !important;
  font:700 28px/1 var(--studio-font) !important;
  letter-spacing:-.035em;
}
#credits-shop-modal :is(.credits-pack-meta,.credits-pack-rate) {
  margin:0;
  color:var(--studio-silver) !important;
  font:400 12px/18px var(--studio-font) !important;
}
#credits-shop-modal .credits-pack-rate {
  display:inline-flex;
  width:max-content;
  margin-top:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(251,241,224,.045);
  color:rgba(251,241,224,.62) !important;
}
#credits-shop-modal .credits-pack-buy {
  display:grid;
  place-items:stretch;
  min-height:44px !important;
  margin-top:auto;
  padding-top:20px !important;
}
#credits-shop-modal .credits-pack-buy::before { content:none !important; }
#credits-shop-modal .credits-pack-link {
  min-height:42px !important;
  border:1px solid rgba(184,184,188,.4) !important;
  border-radius:999px !important;
  background:rgba(251,241,224,.025) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 rgba(23,201,255,.6),2px 0 rgba(255,49,95,.6) !important;
  font:600 12px/1 var(--studio-font) !important;
  letter-spacing:.02em !important;
  text-transform:none;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease !important;
}
#credits-shop-modal .credits-pack-link:is(:hover,:focus-visible) {
  border-color:rgba(184,184,188,.55) !important;
  background:rgba(251,241,224,.045) !important;
  box-shadow:-4px 0 rgba(23,201,255,.82),4px 0 rgba(255,49,95,.82) !important;
  filter:brightness(1.12);
  outline:0;
  transform:translateY(-1px) !important;
}
#credits-shop-modal .credits-pack--featured .credits-pack-link {
  border-color:var(--studio-cream) !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
}
#credits-shop-modal .credits-pack-soon {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin:0;
  padding:0 12px !important;
  border:1px solid rgba(251,241,224,.09) !important;
  border-radius:999px !important;
  background:rgba(251,241,224,.025) !important;
  color:rgba(184,184,188,.58) !important;
  font:600 10px/1 var(--studio-font) !important;
  letter-spacing:.055em !important;
}
#credits-shop-modal .credits-shop-foot {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:20px 0 0 !important;
  color:rgba(184,184,188,.68) !important;
  font:400 12px/17px var(--studio-font) !important;
}
#credits-shop-modal .credits-shop-foot::before {
  content:'✓';
  color:var(--studio-cyan);
  font-weight:700;
}
@keyframes studio-credit-pack-orbit {
  to { --studio-credit-pack-angle:495deg; }
}
@media (max-width:900px) {
  #credits-shop-modal .credits-shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:600px) {
  #credits-shop-modal { align-items:flex-start !important; padding:14px !important; }
  #credits-shop-modal .credits-shop-card {
    grid-template-columns:1fr;
    width:100% !important;
    max-height:calc(100dvh - 28px);
    padding:28px 20px 24px !important;
    border-radius:20px !important;
  }
  #credits-shop-modal .credits-shop-title { padding-right:38px; }
  #credits-shop-modal .credits-shop-balance {
    grid-column:1;
    grid-row:auto;
    justify-self:start;
    margin:18px 0 0 !important;
  }
  #credits-shop-modal .credits-shop-grid {
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-top:24px !important;
    padding:7px;
  }
  #credits-shop-modal .credits-pack { min-height:278px; }
}
@media (prefers-reduced-motion:reduce) {
  #credits-shop-modal .credits-pack--featured::before,
  #credits-shop-modal .credits-pack--featured::after { animation:none !important; }
  #credits-shop-modal .credits-pack,
  #credits-shop-modal .credits-pack-link,
  #credits-shop-modal .credits-shop-close { transition:none !important; }
}

/* Upload failure: focused CI status dialog instead of the legacy generic box. */
#dialog-modal.dialog-upload-error {
  padding:20px;
  background:rgba(7,7,9,.76) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#dialog-modal.dialog-upload-error > div {
  position:relative !important;
  isolation:isolate;
  width:min(520px,calc(100vw - 40px)) !important;
  max-width:none !important;
  overflow:visible !important;
  border:1px solid rgba(251,241,224,.16) !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 0 0,rgba(23,201,255,.06),transparent 32%),
    radial-gradient(circle at 100% 100%,rgba(255,49,95,.065),transparent 34%),
    var(--studio-surface) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.56),inset 0 1px rgba(251,241,224,.055) !important;
}
#dialog-modal.dialog-upload-error > div::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(23,201,255,.58),rgba(251,241,224,.1) 46%,rgba(255,49,95,.58));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
#dialog-modal.dialog-upload-error > div > div:first-child {
  padding:27px 28px 18px !important;
}
#dialog-modal.dialog-upload-error > div > div:nth-child(2) {
  align-items:center;
  justify-content:flex-end !important;
  padding:0 28px 26px !important;
}
#dialog-modal.dialog-upload-error #dialog-left-actions { display:none; }
#dialog-modal.dialog-upload-error #dialog-message {
  margin:0;
  color:var(--studio-cream) !important;
  font:500 16px/23px var(--studio-font) !important;
}
#dialog-modal.dialog-upload-error #dialog-message::before {
  content:'UPLOADS';
  display:block;
  width:max-content;
  margin:0 0 13px;
  padding-left:14px;
  background:radial-gradient(circle at 4px 50%,var(--studio-crimson) 0 3px,transparent 3.5px);
  color:var(--studio-silver);
  font:600 10px/13px var(--studio-font);
  letter-spacing:.13em;
}
#dialog-modal.dialog-upload-error #dialog-cancel { display:none !important; }
#dialog-modal.dialog-upload-error #dialog-ok {
  min-width:96px;
  min-height:42px;
  padding:0 18px !important;
  border:1px solid rgba(184,184,188,.4) !important;
  border-radius:999px !important;
  background:rgba(251,241,224,.025) !important;
  color:var(--studio-cream) !important;
  box-shadow:-2px 0 rgba(23,201,255,.58),2px 0 rgba(255,49,95,.58) !important;
  font:600 13px/1 var(--studio-font) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease !important;
}
#dialog-modal.dialog-upload-error #dialog-ok:is(:hover,:focus-visible) {
  background:rgba(251,241,224,.055) !important;
  box-shadow:-4px 0 rgba(23,201,255,.78),4px 0 rgba(255,49,95,.78) !important;
  filter:brightness(1.12);
  outline:0;
  transform:translateY(-1px);
}
@media (max-width:520px) {
  #dialog-modal.dialog-upload-error > div > div:first-child { padding:24px 22px 16px !important; }
  #dialog-modal.dialog-upload-error > div > div:nth-child(2) { padding:0 22px 22px !important; }
}
@media (prefers-reduced-motion:reduce) {
  #dialog-modal.dialog-upload-error #dialog-ok { transition:none !important; }
}

/* Publish confirmation and status dialog. */
#dialog-modal {
  /* Confirmations must remain above the expanded workspace (150), project
     tools (180) and template preview (220). */
  z-index:260 !important;
}
#dialog-modal.dialog-publish-status {
  background:rgba(19,18,23,.82) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
#dialog-modal.dialog-publish-status > div {
  width:min(520px,calc(100vw - 32px)) !important;
  max-width:520px !important;
  height:auto !important;
  border:1px solid rgba(251,241,224,.24) !important;
  border-radius:20px !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.66),3px 0 0 rgba(255,49,95,.66),0 0 18px rgba(251,241,224,.08),0 28px 80px rgba(0,0,0,.62) !important;
}
#dialog-modal.dialog-publish-status > div > div:first-child {
  padding:28px 28px 14px !important;
}
#dialog-modal.dialog-publish-status > div > div:nth-child(2) {
  align-items:center !important;
  justify-content:flex-end !important;
  padding:10px 24px 24px !important;
}
#dialog-modal.dialog-publish-status #dialog-message {
  margin:0 !important;
  color:var(--studio-cream) !important;
  font:600 18px/1.4 var(--studio-font) !important;
  letter-spacing:-.015em !important;
  text-transform:none !important;
}
#dialog-modal.dialog-publish-status #dialog-left-actions { display:none !important; }
#dialog-modal.dialog-publish-status #dialog-cancel,
#dialog-modal.dialog-publish-status #dialog-ok {
  min-height:40px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  background-image:none !important;
  box-shadow:none !important;
  font:600 13px/1 var(--studio-font) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  transform:none !important;
}
#dialog-modal.dialog-publish-status #dialog-cancel {
  border:1px solid rgba(184,184,188,.34) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-silver) !important;
}
#dialog-modal.dialog-publish-status #dialog-ok {
  border:0 !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.68),2px 0 0 rgba(255,49,95,.68) !important;
}
#dialog-modal.dialog-publish-status #dialog-cancel:hover {
  border-color:rgba(251,241,224,.48) !important;
  background:rgba(251,241,224,.07) !important;
  color:var(--studio-cream) !important;
}
#dialog-modal.dialog-publish-status #dialog-ok:hover {
  filter:brightness(1.06) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.78),3px 0 0 rgba(255,49,95,.78),0 8px 20px rgba(0,0,0,.24) !important;
}

/* Version restore confirmation: a clear destructive decision without the
   legacy low-contrast dialog or generic OK label. */
#dialog-modal.dialog-version-restore {
  background:rgba(19,18,23,.82) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
#dialog-modal.dialog-version-restore > div {
  width:min(520px,calc(100vw - 32px)) !important;
  max-width:520px !important;
  height:auto !important;
  border:1px solid rgba(251,241,224,.24) !important;
  border-radius:20px !important;
  background:var(--studio-surface) !important;
  color:var(--studio-cream) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.66),3px 0 0 rgba(255,49,95,.66),0 0 18px rgba(251,241,224,.08),0 28px 80px rgba(0,0,0,.62) !important;
}
#dialog-modal.dialog-version-restore > div > div:first-child { padding:27px 28px 14px !important; }
#dialog-modal.dialog-version-restore > div > div:nth-child(2) {
  align-items:center !important;
  justify-content:flex-end !important;
  padding:10px 24px 24px !important;
}
#dialog-modal.dialog-version-restore #dialog-left-actions { display:none !important; }
#dialog-modal.dialog-version-restore #dialog-message {
  margin:0 !important;
  color:var(--studio-cream) !important;
  font:600 17px/1.48 var(--studio-font) !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}
#dialog-modal.dialog-version-restore #dialog-message::before {
  content:'VERSION HISTORY';
  display:block;
  width:max-content;
  margin:0 0 12px;
  padding-left:14px;
  background:radial-gradient(circle at 4px 50%,var(--studio-crimson) 0 3px,transparent 3.5px);
  color:var(--studio-silver);
  font:600 10px/13px var(--studio-font);
  letter-spacing:.13em;
}
#dialog-modal.dialog-version-restore #dialog-cancel,
#dialog-modal.dialog-version-restore #dialog-ok {
  min-height:40px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  background-image:none !important;
  font:600 13px/1 var(--studio-font) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  transform:none !important;
}
#dialog-modal.dialog-version-restore #dialog-cancel {
  border:1px solid rgba(184,184,188,.34) !important;
  background:var(--studio-surface-2) !important;
  color:var(--studio-silver) !important;
  box-shadow:none !important;
}
#dialog-modal.dialog-version-restore #dialog-ok {
  border:0 !important;
  background:var(--studio-cream) !important;
  color:var(--studio-ink) !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.68),2px 0 0 rgba(255,49,95,.68) !important;
}
#dialog-modal.dialog-version-restore #dialog-cancel:hover {
  border-color:rgba(251,241,224,.48) !important;
  background:rgba(251,241,224,.07) !important;
  color:var(--studio-cream) !important;
}
#dialog-modal.dialog-version-restore #dialog-ok:hover {
  background:var(--studio-cream) !important;
  box-shadow:-3px 0 0 rgba(23,201,255,.78),3px 0 0 rgba(255,49,95,.78),0 8px 20px rgba(0,0,0,.24) !important;
  filter:brightness(1.04) !important;
}
#dialog-modal.dialog-version-restore #dialog-cancel:focus-visible,
#dialog-modal.dialog-version-restore #dialog-ok:focus-visible {
  outline:2px solid var(--studio-cream) !important;
  outline-offset:3px !important;
}
#dialog-modal.dialog-version-restore .corner-resizer { display:none !important; }

/* Custom domain assistance confirmation. */
#dialog-modal.dialog-domain-assist {
  background:rgba(19,18,23,.82) !important;
  backdrop-filter:blur(9px);
}
#dialog-modal.dialog-domain-assist > div {
  width:min(520px,calc(100vw - 32px)) !important;
  max-width:520px !important;
  height:auto !important;
  border:1px solid rgba(251,241,224,.15) !important;
  border-radius:20px !important;
  background:#1B1920 !important;
  box-shadow:-2px 0 rgba(23,201,255,.6),2px 0 rgba(255,49,95,.6),0 28px 80px rgba(0,0,0,.6) !important;
}
#dialog-modal.dialog-domain-assist > div > div:first-child { padding:26px 26px 14px !important; }
#dialog-modal.dialog-domain-assist > div > div:nth-child(2) { padding:10px 26px 26px !important; justify-content:flex-end !important; }
#dialog-modal.dialog-domain-assist #dialog-message {
  margin:0 !important;
  color:#FBF1E0 !important;
  font:500 18px/1.5 'Space Grotesk',system-ui,sans-serif !important;
  text-transform:none !important;
}
#dialog-modal.dialog-domain-assist #dialog-message::before {
  content:'CUSTOM DOMAIN';
  display:block;
  margin-bottom:12px;
  color:#B8B8BC;
  font:600 10px/1.4 'Space Grotesk',system-ui,sans-serif;
  letter-spacing:.13em;
}
#dialog-modal.dialog-domain-assist :is(#dialog-cancel,#dialog-ok) {
  min-height:44px !important;
  padding:0 20px !important;
  border-radius:999px !important;
  color:#FBF1E0 !important;
  font:500 14px/1 'Space Grotesk',system-ui,sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transform:none !important;
}
#dialog-modal.dialog-domain-assist #dialog-cancel {
  background:#1B1920 !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:none !important;
}
#dialog-modal.dialog-domain-assist #dialog-ok {
  background:rgba(251,241,224,.024) !important;
  border:1px solid rgba(184,184,188,.4) !important;
  box-shadow:-2px 0 rgba(23,201,255,.6),2px 0 rgba(255,49,95,.6) !important;
}
#dialog-modal.dialog-domain-assist #dialog-ok:hover { filter:brightness(1.12); }
#dialog-modal.dialog-domain-assist #dialog-cancel:hover { background:#211F27 !important; }
#dialog-modal.dialog-domain-assist button:focus-visible { outline:2px solid #17C9FF !important; outline-offset:3px; }
#dialog-modal.dialog-domain-assist :is(#dialog-left-actions,.corner-resizer) { display:none !important; }

/* Project deletion confirmation: scoped to single and bulk project deletion. */
/* Shared fallback also keeps legacy callers readable on the dark CI surface. */
#dialog-modal #dialog-message {
  color:var(--studio-cream) !important;
  font:500 17px/1.5 var(--studio-font) !important;
}
#dialog-modal :is(#dialog-cancel,#dialog-ok) {
  min-height:40px;
  padding:0 20px !important;
  border-radius:999px !important;
  font:600 14px/1 var(--studio-font) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#dialog-modal #dialog-cancel {
  color:var(--studio-cream) !important;
  background:var(--studio-surface-2) !important;
  border:1px solid rgba(251,241,224,.25) !important;
}
#dialog-modal #dialog-ok {
  color:var(--studio-cream) !important;
  background:var(--studio-surface) !important;
  border:1px solid rgba(251,241,224,.4) !important;
}
#dialog-modal.dialog-project-delete {
  background:rgba(19,18,23,.82) !important;
  backdrop-filter:blur(9px);
}
#dialog-modal.dialog-project-delete > div {
  width:min(480px,calc(100vw - 32px)) !important;
  max-width:480px !important;
  height:auto !important;
  border:1px solid rgba(251,241,224,.24) !important;
  border-radius:20px !important;
  background:#1B1920 !important;
  box-shadow:-3px 0 rgba(23,201,255,.6),3px 0 rgba(255,49,95,.6),0 28px 80px rgba(0,0,0,.6) !important;
}
#dialog-modal.dialog-project-delete > div > div:first-child { padding:26px 26px 14px !important; }
#dialog-modal.dialog-project-delete > div > div:nth-child(2) { padding:10px 24px 24px !important; justify-content:flex-end !important; }
#dialog-modal.dialog-project-delete #dialog-message {
  color:#FBF1E0 !important;
  font:600 18px/1.5 'Space Grotesk',system-ui,sans-serif !important;
  text-transform:none !important;
}
#dialog-modal.dialog-project-delete #dialog-message::before {
  content:'DELETE PROJECT';
  display:block;
  margin-bottom:12px;
  color:#B8B8BC;
  font:600 10px/1.4 'Space Grotesk',system-ui,sans-serif;
  letter-spacing:.13em;
}
#dialog-modal.dialog-project-delete :is(#dialog-cancel,#dialog-ok) {
  min-height:40px !important;
  padding:0 20px !important;
  border-radius:999px !important;
  background-image:none !important;
  font:600 14px/1 'Space Grotesk',system-ui,sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transform:none !important;
  box-shadow:none !important;
}
#dialog-modal.dialog-project-delete #dialog-cancel {
  color:#FBF1E0 !important;
  background:#211F27 !important;
  border:1px solid rgba(251,241,224,.25) !important;
}
#dialog-modal.dialog-project-delete #dialog-ok {
  color:#FBF1E0 !important;
  background:#1B1920 !important;
  border:1px solid #FF315F !important;
}
#dialog-modal.dialog-project-delete #dialog-ok:hover { background:rgba(255,49,95,.12) !important; }
#dialog-modal.dialog-project-delete #dialog-cancel:hover { background:rgba(251,241,224,.08) !important; }
#dialog-modal.dialog-project-delete button:focus-visible { outline:2px solid #17C9FF !important; outline-offset:3px; }
#dialog-modal.dialog-project-delete :is(#dialog-left-actions,.corner-resizer) { display:none !important; }

/* Template preview chrome — CI surface, cream type and L01 start action. */
#template-modal {
  z-index:220 !important;
  padding:20px;
  background:rgba(0,0,0,.65) !important;
  backdrop-filter:blur(6px);
}
#template-modal > div {
  overflow:hidden;
  max-width:min(1200px,calc(100vw - 40px)) !important;
  max-height:calc(100dvh - 40px) !important;
  background:#1B1920 !important;
  border:1px solid rgba(251,241,224,.15) !important;
  border-radius:20px !important;
  font-family:'Space Grotesk',system-ui,sans-serif !important;
}
#template-modal .template-preview-header {
  flex-shrink:0;
  min-height:72px;
  gap:18px;
  padding:16px 22px;
  background:#1B1920 !important;
  border-bottom:1px solid rgba(251,241,224,.15) !important;
}
#template-modal #template-modal-title {
  min-width:0;
  color:#FBF1E0 !important;
  font:600 17px/1.4 'Space Grotesk',system-ui,sans-serif !important;
  text-shadow:none !important;
}
#template-modal #template-modal-use {
  min-height:40px !important;
  padding:10px 20px !important;
  border:1px solid rgba(184,184,188,.4) !important;
  border-radius:999px !important;
  background:rgba(251,241,224,.024) !important;
  color:#FBF1E0 !important;
  font:500 14px/14px 'Space Grotesk',system-ui,sans-serif !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  box-shadow:-2px 0 0 rgba(23,201,255,.6),2px 0 0 rgba(255,49,95,.6) !important;
  animation:none !important;
  transition:transform .18s,filter .18s;
}
#template-modal #template-modal-use::before,
#template-modal #template-modal-use::after { content:none !important; }
#template-modal #template-modal-use:hover { transform:translateY(-2px); filter:brightness(1.12); }
#template-modal #template-modal-close {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  margin-left:8px;
  padding:0;
  border:1px solid rgba(251,241,224,.15) !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#B8B8BC !important;
  box-shadow:none !important;
}
#template-modal #template-modal-close:hover { color:#FBF1E0 !important; background:#211F27 !important; }
#template-modal #template-modal-open { color:#B8B8BC !important; font:500 12px/1.4 'Space Grotesk',system-ui,sans-serif; }
#template-modal :is(button,a):focus-visible { outline:2px solid #17C9FF !important; outline-offset:3px; }
#template-modal #template-modal-iframe { min-height:0; width:100%; border:0; border-radius:0 !important; }
#template-modal #template-modal-img { background:#131217 !important; border-radius:0 !important; }
@media (prefers-reduced-motion:reduce) {
  #template-modal #template-modal-use { animation:none !important; transition:none; }
}
@media (max-width:600px) {
  #template-modal { padding:12px; }
  #template-modal > div { width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; max-height:calc(100dvh - 24px) !important; }
  #template-modal .template-preview-header { flex-wrap:wrap; gap:12px; padding:14px; }
  #template-modal #template-modal-use { padding:10px 14px !important; }
}
@media (max-width:600px) {
  #dialog-modal.dialog-version-restore > div > div:first-child { padding:23px 22px 12px !important; }
  #dialog-modal.dialog-version-restore > div > div:nth-child(2) { padding:10px 18px 20px !important; }
}

#studio-mobile-project-search,.studio-mobile-search-empty,.studio-window-mobile-menu { display:none; }
.studio-project-delete-pick { display:none; }
@media (min-width:821px) {
  #studio-mobile-navigation,#studio-mobile-navigation::backdrop { display:none !important; }
}
@media (max-width:820px) {
  #app-screen.is-mobile-studio .studio-dashboard-tools { display:none !important; }
  #app-screen.is-mobile-studio .studio-project-shelf.is-delete-mode .studio-project-card:not(.studio-project-card--new) { cursor:pointer; }
  #app-screen.is-mobile-studio .studio-project-shelf.is-delete-mode .studio-project-card--new { display:none; }
  #app-screen.is-mobile-studio .studio-project-delete-pick { position:absolute;z-index:5;top:10px;left:10px;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--studio-line-strong);border-radius:50%;background:rgba(18,17,23,.9);color:var(--studio-ink);font:700 17px/1 var(--studio-font);box-shadow:0 5px 16px rgba(0,0,0,.32); }
  #app-screen.is-mobile-studio .studio-project-card.is-delete-selected .studio-project-delete-pick { border-color:var(--studio-cream);background:var(--studio-cream); }
  #app-screen.is-mobile-studio .studio-project-shelf.is-delete-mode .studio-project-rename,
  #app-screen.is-mobile-studio .studio-project-shelf.is-delete-mode .studio-project-favourite { display:none; }
  #app-screen.is-mobile-studio #studio-mobile-topbar { left:16px;width:calc(var(--mobile-page-w) - 32px);grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;justify-content:space-between;top:max(16px,env(safe-area-inset-top)); }
  #app-screen.is-mobile-studio #studio-mobile-chatbar { left:calc(var(--mobile-panel-w) + 16px);width:calc(var(--mobile-page-w) - 32px);grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;justify-content:space-between;top:max(16px,env(safe-area-inset-top)); }
  #app-screen.is-mobile-studio #studio-mobile-chatbar > button { height:48px;min-height:48px;font-size:17px;touch-action:manipulation; }
  #app-screen.is-mobile-studio #studio-mobile-chatbar .studio-mobile-back,
  #app-screen.is-mobile-studio #studio-mobile-chatbar .studio-mobile-menu { width:48px; }
  #app-screen.is-mobile-studio #studio-mobile-chatbar .studio-mobile-title { justify-self:center;width:max-content;max-width:100%;padding:0 17px;font-size:17px;gap:8px; }
  #app-screen.is-mobile-studio #studio-mobile-chatbar .studio-mobile-title em { font-size:15px; }
  #app-screen.is-mobile-studio #studio-mobile-topbar #studio-workspace-trigger { position:static !important;inset:auto !important;justify-self:center;justify-content:center !important;width:100% !important;max-width:260px;min-width:0;height:48px !important;min-height:48px !important;padding:0 10px !important;gap:6px !important;transform:none !important;box-shadow:none !important; }
  #app-screen.is-mobile-studio #studio-mobile-topbar > #studio-workspace-trigger .studio-workspace-avatar { display:none !important; }
  #app-screen.is-mobile-studio #studio-mobile-topbar .studio-workspace-name { min-width:0;font-size:0; }
  #app-screen.is-mobile-studio #studio-mobile-topbar .studio-workspace-name::after { font-size:14px; }
  #app-screen.is-mobile-studio #studio-mobile-topbar .studio-workspace-chevron { margin-left:0;font-size:14px; }
  body:not(.studio-live-voice-active) #app-screen.is-mobile-studio :is(
    #studio-mobile-chatbar .studio-mobile-title,
    #studio-mobile-topbar > #studio-workspace-trigger,
    #studio-mobile-preview-dock .studio-dock-actions-trigger
  ) {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center;
    width:max-content !important;
    max-width:100% !important;
    min-width:0;
    height:48px !important;
    min-height:48px !important;
    padding:0 17px !important;
    gap:8px !important;
    border:1px solid rgba(251,241,224,.2) !important;
    border-radius:999px !important;
    background:#211f27 !important;
    box-shadow:none !important;
    color:var(--studio-cream) !important;
    font:400 17px/1 var(--studio-font) !important;
  }
  body:not(.studio-live-voice-active) #app-screen.is-mobile-studio #studio-mobile-topbar #studio-workspace-trigger .studio-workspace-name::after,
  body:not(.studio-live-voice-active) #app-screen.is-mobile-studio :is(#studio-mobile-chat-title,.studio-dock-actions-label) {
    color:var(--studio-cream) !important;
    font:400 17px/1 var(--studio-font) !important;
  }
  body:not(.studio-live-voice-active) #app-screen.is-mobile-studio :is(
    #studio-mobile-chatbar .studio-mobile-title > em,
    #studio-mobile-topbar #studio-workspace-trigger .studio-workspace-chevron,
    #studio-mobile-preview-dock .studio-dock-actions-trigger > em
  ) {
    display:inline-grid !important;
    place-items:center;
    flex:0 0 16px;
    width:16px;
    height:16px;
    margin:0 !important;
    color:var(--studio-silver) !important;
    font-size:0 !important;
    line-height:1 !important;
  }
  body:not(.studio-live-voice-active) #app-screen.is-mobile-studio :is(
    #studio-mobile-chatbar .studio-mobile-title > em,
    #studio-mobile-topbar #studio-workspace-trigger .studio-workspace-chevron,
    #studio-mobile-preview-dock .studio-dock-actions-trigger > em
  )::before {
    content:"";
    width:8px;
    height:8px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg) !important;
  }
  body:not(.studio-live-voice-active) #app-screen.is-mobile-studio :is(
    #studio-mobile-chatbar .studio-mobile-title[aria-expanded="true"] > em,
    #studio-mobile-preview-dock .studio-dock-actions-trigger[aria-expanded="true"] > em
  ) { transform:rotate(180deg); }
  #app-screen.is-mobile-studio #studio-mobile-topbar #studio-workspace-menu { position:absolute !important;inset:60px 0 auto !important;width:100%;max-width:100%;max-height:calc(100dvh - 110px);overflow:auto;pointer-events:auto; }
  #app-screen.is-mobile-studio #sidebar-footer { left:16px !important;right:auto !important;bottom:max(20px,env(safe-area-inset-bottom)) !important;width:48px !important;height:48px !important;min-height:48px !important; }
  #app-screen.is-mobile-studio #studio-account-trigger { width:48px !important;height:48px !important; }
  #app-screen.is-mobile-studio > #studio-account-menu:not(.hidden) { position:fixed !important;inset:auto 16px max(84px,calc(env(safe-area-inset-bottom) + 68px)) 16px !important;width:auto !important;max-width:none !important;height:auto !important;max-height:calc(100dvh - 180px) !important;padding:20px !important;border:1px solid var(--studio-line-strong) !important;border-radius:20px !important;z-index:260 !important;animation:none !important; }
  #app-screen.is-mobile-studio > #studio-account-menu .studio-account-head { align-items:center;gap:12px;padding:0 0 16px; }
  #app-screen.is-mobile-studio > #studio-account-menu .studio-account-head > div { flex:1;min-width:0; }
  #app-screen.is-mobile-studio > #studio-account-menu .studio-account-head .studio-account-avatar--large { width:48px;height:48px;flex:0 0 48px;font-size:17px; }
  #app-screen.is-mobile-studio > #studio-account-menu .studio-account-head strong { margin:0 0 3px;overflow:hidden;font-size:18px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap; }
  #app-screen.is-mobile-studio > #studio-account-menu #user-email:not(.hidden) { display:block !important;max-width:100%;overflow:hidden;font-size:14px !important;line-height:1.3 !important;text-overflow:ellipsis;white-space:nowrap; }
  #app-screen.is-mobile-studio[data-mobile-screen="projects"] #studio-mobile-chatbar .studio-mobile-back,
  #app-screen.is-mobile-studio:not([data-mobile-screen="projects"]) #studio-mobile-topbar { visibility:hidden; }
  #app-screen.is-mobile-studio[data-mobile-screen="preview"]:has(#preview-empty:not(.hidden)) #studio-mobile-topbar { left:calc(var(--mobile-panel-w) + var(--mobile-page-w) + 16px);visibility:visible; }
  #app-screen.is-mobile-studio:has(#preview-empty:not(.hidden)) #studio-mobile-preview-dock { display:none !important; }
  #app-screen.is-mobile-studio #studio-mobile-topbar > button { width:48px;height:48px;min-height:48px;touch-action:manipulation; }
  #studio-mobile-topbar .studio-mobile-icon { width:22px;height:22px; }
  #app-screen.is-mobile-studio > .studio-window.is-open { z-index:240; }
  #app-screen.is-mobile-studio .studio-window-mobile-menu { display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin-left:8px;padding:0;border:1px solid var(--studio-line-strong);border-radius:50%;background:var(--studio-surface-2);color:var(--studio-cream);touch-action:manipulation; }
  #app-screen.is-mobile-studio .studio-window-mobile-menu .studio-mobile-icon { width:21px;height:21px; }
  #app-screen.is-mobile-studio #studio-templates #studio-templates-close,
  #app-screen.is-mobile-studio #studio-connectors #studio-connectors-close,
  #app-screen.is-mobile-studio #studio-projects.is-uploads #studio-projects-close { display:none !important; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-crumb .studio-window-mobile-menu,
  #app-screen.is-mobile-studio #studio-connectors .studio-window-crumb .studio-window-mobile-menu,
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-window-crumb .studio-window-mobile-menu { margin-left:auto; }
  #app-screen.is-mobile-studio #studio-templates.studio-window.is-open.is-fullscreen { display:flex !important;flex-direction:column;gap:0;padding:16px 16px 30px;overflow-x:hidden;overflow-y:auto; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-main { display:contents; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-crumb { order:1;min-height:48px;margin:0 0 16px;font-size:14px; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-crumb > button { width:44px;height:44px;min-height:44px;border:1px solid var(--studio-line-strong);border-radius:50%;background:var(--studio-surface-2); }
  #app-screen.is-mobile-studio #studio-templates .studio-window-crumb > button svg { width:18px;height:18px; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-hero { order:2;margin:0 0 18px;padding:0 0 18px; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-hero strong { font-size:24px;line-height:1.2; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-hero p { font-size:14px;line-height:1.5; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-side { order:3;display:flex;width:100%;margin:0 0 22px;gap:8px; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-side-label { display:none; }
  #app-screen.is-mobile-studio #studio-template-search.studio-window-search { height:44px;margin:0 0 4px;padding:0 13px;border-radius:12px !important;font-size:16px;line-height:44px; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-filters { flex-direction:row;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:none; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-filters::-webkit-scrollbar { display:none; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-filter { flex:0 0 auto;width:auto;min-height:40px;padding:0 14px;border:1px solid var(--studio-line);border-radius:999px;white-space:nowrap; }
  #app-screen.is-mobile-studio #studio-templates .studio-window-filter.is-active { border-color:var(--studio-line-strong); }
  #app-screen.is-mobile-studio #studio-dashboard-template-grid { order:4;grid-template-columns:minmax(0,1fr);gap:30px;padding:0; }
  #app-screen.is-mobile-studio #studio-templates-empty { order:5; }
  #app-screen.is-mobile-studio #studio-dashboard-template-grid > div > div:first-child { height:clamp(230px,62vw,380px) !important;border-radius:14px; }
  #app-screen.is-mobile-studio #studio-dashboard-template-grid iframe { transform:scale(calc((100vw - 32px)/1280)) !important; }
  #app-screen.is-mobile-studio #studio-dashboard-template-grid [class*='text-gray-800'] { font-size:16px !important; }
  #app-screen.is-mobile-studio #studio-dashboard-template-grid [class*='text-gray-500'] { font-size:14px !important; }
  #app-screen.is-mobile-studio #studio-dashboard-template-grid .gallery-card-btn { min-height:44px !important;font-size:14px !important; }
  #app-screen.is-mobile-studio #studio-connectors.studio-window.is-open.is-fullscreen { display:flex !important;flex-direction:column;gap:0;padding:16px 16px 30px;overflow-x:hidden;overflow-y:auto; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-main,
  #app-screen.is-mobile-studio #studio-connectors .studio-window-side { display:contents; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-crumb { order:1;min-height:48px;margin:0 0 16px;font-size:14px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-crumb > button { width:44px;height:44px;min-height:44px;border:1px solid var(--studio-line-strong);border-radius:50%;background:var(--studio-surface-2); }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-crumb > button svg { width:18px;height:18px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-hero { order:2;margin:0 0 18px;padding:0 0 18px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-hero strong { font-size:24px;line-height:1.2; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-hero p { font-size:14px;line-height:1.5; }
  #app-screen.is-mobile-studio #studio-connector-search.studio-window-search { order:3;height:44px;margin:0 0 12px;padding:0 13px;border-radius:12px !important;font-size:16px;line-height:44px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-side-label { display:none; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-filters { order:4;flex-direction:row;gap:8px;max-width:100%;margin:0 0 8px;overflow-x:auto;scrollbar-width:none; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-filters::-webkit-scrollbar { display:none; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-filters + .studio-window-side-label + .studio-window-filters { margin-bottom:22px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-filter { flex:0 0 auto;width:auto;min-height:40px;padding:0 14px;border:1px solid var(--studio-line);border-radius:999px;white-space:nowrap; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-filter.is-active { border-color:var(--studio-line-strong); }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-section,
  #app-screen.is-mobile-studio #studio-connectors .studio-window-grid { order:5; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-crumb,
  #app-screen.is-mobile-studio #studio-connectors .studio-window-hero,
  #app-screen.is-mobile-studio #studio-connectors #studio-connector-search,
  #app-screen.is-mobile-studio #studio-connectors .studio-window-filters,
  #app-screen.is-mobile-studio #studio-connectors .studio-window-section,
  #app-screen.is-mobile-studio #studio-connectors .studio-window-grid,
  #app-screen.is-mobile-studio #studio-connectors .studio-connectors-request { flex-shrink:0; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-section { padding:12px 2px 10px;font-size:12px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-grid { grid-template-columns:minmax(0,1fr);gap:10px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-window-grid + .studio-window-section { padding-top:28px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-connector-card { min-height:72px;padding:13px 14px;border-radius:13px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-connector-copy strong { font-size:15px;line-height:19px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-connector-copy small { font-size:13px;line-height:17px; }
  #app-screen.is-mobile-studio #studio-connectors .studio-connectors-request { order:10;width:100%;box-sizing:border-box;margin:30px 0 0;padding:16px 14px;border-radius:14px; }
  #app-screen.is-mobile-studio #studio-connectors-empty { order:9; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads.studio-window.is-open.is-fullscreen { display:flex !important;flex-direction:column;gap:0;padding:16px 16px 30px;overflow-x:hidden;overflow-y:auto; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads > .studio-window-side { display:none; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads > .studio-window-main { display:flex;flex:0 0 auto;flex-direction:column;min-width:0; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-window-crumb { min-height:48px;margin:0 0 16px;font-size:14px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-window-crumb > button { width:44px;height:44px;min-height:44px;border:1px solid var(--studio-line-strong);border-radius:50%;background:var(--studio-surface-2); }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-window-crumb > button svg { width:18px;height:18px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-window-hero { margin:0 0 20px;padding:0 0 18px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-window-hero strong { font-size:24px;line-height:1.2; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-window-hero p { font-size:14px;line-height:1.5; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads #studio-projects-body { min-width:0; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-dashboard-upload-grid { max-height:none;overflow:visible; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-toolbar { position:static;margin:0 0 14px;padding:0 0 14px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-toolbar > strong { font-size:16px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-view-toggle button { width:44px;min-width:44px;min-height:40px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-tree-section { margin:0 0 12px;border-radius:14px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-tree-section summary { grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;min-height:0;padding:12px 13px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-tree-section summary span { font-size:15px !important;line-height:20px !important; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-tree-section summary em { align-self:center; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-folder-action { grid-column:1/-1;width:100%;min-height:42px;margin-top:5px;font-size:14px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-upload-tree-files { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 12px 12px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-dashboard-upload-grid.is-small .studio-upload-tree-files { grid-template-columns:repeat(4,minmax(0,1fr));gap:7px; }
  #app-screen.is-mobile-studio #studio-projects.is-uploads .studio-dashboard-upload-grid.is-list .studio-upload-tree-files { grid-template-columns:minmax(0,1fr); }
  #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #preview-container:not(.hidden) { inset:calc(64px + env(safe-area-inset-top)) 0 0 !important;height:auto !important; }
  #app-screen.is-mobile-studio #studio-mobile-project-search:not([hidden]) { display:block;position:absolute;top:80px;left:16px;width:calc(100% - 32px);height:44px;border:1px solid var(--studio-line-strong);border-radius:12px;padding:10px 12px;background:var(--studio-surface);color:var(--studio-cream);font:16px var(--studio-font);z-index:125; }
  #app-screen.is-mobile-studio #sidebar.is-mobile-searching #studio-mobile-project-list { padding-top:140px; }
  body.studio-live-voice-active #app-screen.is-mobile-studio #studio-live-voice { display:none !important; }
  body.studio-live-voice-active #app-screen.is-mobile-studio #bottom-panel #tab-prompt { display:block !important; }
  body.studio-live-voice-active #app-screen.is-mobile-studio #prompt-talk-btn { min-width:112px !important;white-space:nowrap; }
  body.studio-live-voice-active #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::before,
  body.studio-live-voice-active #app-screen.is-mobile-studio:has(#preview-container:not(.hidden)) #tab-prompt > .flex-1.relative::after {
    --studio-prompt-c24-angle:135deg;
    animation:none !important;
    opacity:.34;
  }
  @keyframes studio-mobile-aurora-bloom {
    0%,100% {
      filter:brightness(1.16) saturate(1.3)
        drop-shadow(-7px -2px 8px rgba(23,201,255,.38))
        drop-shadow(7px 2px 8px rgba(240,45,69,.36));
    }
    38% {
      filter:brightness(1.26) saturate(1.38)
        drop-shadow(-10px -5px 10px rgba(23,201,255,.46))
        drop-shadow(6px 5px 9px rgba(240,45,69,.4));
    }
    72% {
      filter:brightness(1.2) saturate(1.34)
        drop-shadow(-6px 3px 9px rgba(23,201,255,.4))
        drop-shadow(10px -3px 10px rgba(240,45,69,.46));
    }
  }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(.studio-mobile-title,#studio-workspace-trigger,.studio-dock-actions-trigger) {
    --beam-strength:1;
    --beam-stroke-opacity:1;
    --beam-inner-opacity:1;
    --pulse-glow-sx:1;
    --pulse-glow-sy:1;
    --pulse-glow-boost:1;
    position:relative !important;
    isolation:isolate;
    overflow:visible;
    justify-self:center;
    display:flex !important;
    align-items:center;
    justify-content:center !important;
    width:100% !important;
    max-width:260px !important;
    min-width:0;
    height:48px !important;
    min-height:48px !important;
    padding:0 18px !important;
    gap:0 !important;
    border-radius:999px !important;
    font-size:16px !important;
    line-height:1 !important;
    pointer-events:none;
    border-color:transparent !important;
    outline:0 !important;
    background:#242329 !important;
    box-shadow:
      calc(-10px - var(--studio-aurora-lift,0px)) -2px calc(13px + var(--studio-aurora-spread,0px)) rgb(23 201 255 / var(--studio-aurora-alpha,.18)),
      -7px 5px calc(10px + var(--studio-aurora-spread,0px)) rgb(23 201 255 / calc(var(--studio-aurora-alpha,.18) * .7)),
      calc(10px + var(--studio-aurora-lift,0px)) 2px calc(13px + var(--studio-aurora-spread,0px)) rgb(240 45 69 / var(--studio-aurora-alpha,.18)),
      7px -5px calc(10px + var(--studio-aurora-spread,0px)) rgb(240 45 69 / calc(var(--studio-aurora-alpha,.18) * .7)) !important;
  }
  /* The regular Projects header deliberately makes this trigger static. During
     voice mode its beam pseudos need the pill itself as their containing block,
     otherwise they stretch around the complete Search / Workspace / Stop bar. */
  body.studio-live-voice-active #app-screen.is-mobile-studio #studio-mobile-topbar > #studio-workspace-trigger {
    position:relative !important;
  }
  body.studio-live-voice-active #app-screen.is-mobile-studio #studio-mobile-preview-dock > .studio-dock-actions {
    justify-self:center;
    width:calc(100% - 6px);
    max-width:260px;
    min-width:0;
  }
  body.studio-live-voice-active #app-screen.is-mobile-studio #studio-mobile-preview-dock .studio-dock-actions-trigger {
    width:100% !important;
  }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(.studio-mobile-title,#studio-workspace-trigger,.studio-dock-actions-trigger)::after {
    content:"";
    position:absolute;
    inset:-5px;
    z-index:2;
    padding:1.5px;
    border-radius:inherit;
    clip-path:inset(0 round 999px);
    background:
      radial-gradient(ellipse calc(70px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(40px * var(--bh1,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(33% + var(--bx1,0px)) calc(-7.4% + var(--by1,0px)),rgba(255,50,100,var(--bop-tl,1)),transparent),
      radial-gradient(ellipse calc(60px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(35px * var(--bh2,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(12% + var(--bx2,0px)) calc(-5% + var(--by2,0px)),rgba(40,140,255,var(--bop-tl,1)),transparent),
      radial-gradient(ellipse calc(40px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(70px * var(--bh3,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(2.1% + var(--bx3,0px)) calc(68.3% + var(--by3,0px)),rgba(50,200,80,var(--bop-bl,1)),transparent),
      radial-gradient(ellipse calc(20px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(35px * var(--bh1,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(2.1% + var(--bx1,0px)) calc(68.3% + var(--by1,0px)),rgba(30,185,170,var(--bop-bl,1)),transparent),
      radial-gradient(ellipse calc(180px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(32px * var(--bh2,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(74.4% + var(--bx2,0px)) calc(100% + var(--by2,0px)),rgba(100,70,255,var(--bop-br,1)),transparent),
      radial-gradient(ellipse calc(85px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(26px * var(--bh3,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(55% + var(--bx3,0px)) calc(100% + var(--by3,0px)),rgba(40,140,255,var(--bop-br,1)),transparent),
      radial-gradient(ellipse calc(74px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(32px * var(--bh1,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(93.9% + var(--bx1,0px)) calc(0% + var(--by1,0px)),rgba(255,120,40,var(--bop-tr,1)),transparent),
      radial-gradient(ellipse calc(26px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(42px * var(--bh2,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(100% + var(--bx2,0px)) calc(27.1% + var(--by2,0px)),rgba(240,50,180,var(--bop-tr,1)),transparent),
      radial-gradient(ellipse calc(52px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(48px * var(--bh3,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(100% + var(--bx3,0px)) calc(27.1% + var(--by3,0px)),rgba(180,40,240,var(--bop-tr,1)),transparent);
    background:
      radial-gradient(ellipse calc(220px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(28px * var(--bh2,1) * var(--bgh,1)) at calc(52% + var(--bx2,0px)) calc(112% + var(--by2,0px)),rgba(255,49,95,var(--bop-br,1)),transparent 72%),
      radial-gradient(ellipse calc(155px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(24px * var(--bh3,1) * var(--bgh,1)) at calc(34% + var(--bx3,0px)) calc(108% + var(--by3,0px)),rgba(23,201,255,var(--bop-bl,1)),transparent 72%),
      radial-gradient(ellipse calc(82px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(42px * var(--bh1,1) * var(--bgh,1)) at calc(20% + var(--bx1,0px)) calc(0% + var(--by1,0px)),rgba(23,201,255,var(--bop-tl,1)),transparent),
      radial-gradient(ellipse calc(76px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(46px * var(--bh2,1) * var(--bgh,1)) at calc(48% + var(--bx2,0px)) calc(100% + var(--by2,0px)),rgba(255,49,95,var(--bop-bl,1)),transparent),
      radial-gradient(ellipse calc(92px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(42px * var(--bh3,1) * var(--bgh,1)) at calc(78% + var(--bx3,0px)) calc(0% + var(--by3,0px)),rgba(23,201,255,var(--bop-tr,1)),transparent),
      radial-gradient(ellipse calc(86px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(44px * var(--bh1,1) * var(--bgh,1)) at calc(100% + var(--bx1,0px)) calc(70% + var(--by1,0px)),rgba(255,49,95,var(--bop-br,1)),transparent),
      radial-gradient(ellipse calc(72px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(40px * var(--bh2,1) * var(--bgh,1)) at calc(0% + var(--bx2,0px)) calc(74% + var(--by2,0px)),rgba(255,49,95,var(--bop-bl,1)),transparent);
    background:
      radial-gradient(ellipse calc(150px * var(--bw1,1)) calc(34px * var(--bh1,1) * var(--bgh,1)) at calc(18% + var(--studio-aurora-left-x,0px)) calc(108% + var(--studio-aurora-left-y,0px)),rgba(23,201,255,var(--bop-bl,1)),transparent 72%),
      radial-gradient(ellipse calc(150px * var(--bw2,1)) calc(34px * var(--bh2,1) * var(--bgh,1)) at calc(82% + var(--studio-aurora-right-x,0px)) calc(108% + var(--studio-aurora-right-y,0px)),rgba(240,45,69,var(--bop-br,1)),transparent 72%),
      radial-gradient(ellipse calc(118px * var(--bw3,1)) calc(62px * var(--bh3,1)) at calc(0% + var(--studio-aurora-left-x,0px)) calc(42% + var(--studio-aurora-left-y,0px)),rgba(23,201,255,var(--bop-tl,1)),transparent 74%),
      radial-gradient(ellipse calc(118px * var(--bw1,1)) calc(62px * var(--bh1,1)) at calc(100% + var(--studio-aurora-right-x,0px)) calc(58% + var(--studio-aurora-right-y,0px)),rgba(240,45,69,var(--bop-tr,1)),transparent 74%),
      linear-gradient(90deg,rgba(23,201,255,.94) 0%,rgba(23,201,255,.72) 26%,transparent 47%,transparent 53%,rgba(240,45,69,.72) 74%,rgba(240,45,69,.94) 100%);
    opacity:calc(var(--beam-opacity,.42) * var(--beam-stroke-opacity,1) * var(--beam-strength,1));
    filter:brightness(1.02) saturate(1.2) drop-shadow(-7px -3px 11px rgba(23,201,255,.58)) drop-shadow(6px 4px 12px rgba(240,45,69,.54));
    animation:studio-mobile-aurora-bloom 1.35s ease-in-out infinite;
    pointer-events:none;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    transform:scale(var(--studio-aurora-pulse-scale,1));
    transform-origin:center;
    transition:transform 55ms linear,opacity 70ms linear;
    will-change:opacity,filter,background,transform;
  }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(.studio-mobile-title,#studio-workspace-trigger,.studio-dock-actions-trigger)::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    border-radius:inherit;
    clip-path:inset(0 round 999px);
    background:
      radial-gradient(ellipse calc(65px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(35px * var(--bh1,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(33% + var(--bx1,0px)) calc(-7.4% + var(--by1,0px)),rgba(255,50,100,var(--bop-tl,1)),transparent),
      radial-gradient(ellipse calc(55px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(30px * var(--bh2,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(12% + var(--bx2,0px)) calc(-5% + var(--by2,0px)),rgba(40,140,255,var(--bop-tl,1)),transparent),
      radial-gradient(ellipse calc(35px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(65px * var(--bh3,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(2.1% + var(--bx3,0px)) calc(68.3% + var(--by3,0px)),rgba(50,200,80,var(--bop-bl,1)),transparent),
      radial-gradient(ellipse calc(15px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(30px * var(--bh1,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(2.1% + var(--bx1,0px)) calc(68.3% + var(--by1,0px)),rgba(30,185,170,var(--bop-bl,1)),transparent),
      radial-gradient(ellipse calc(173px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(28px * var(--bh2,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(74.4% + var(--bx2,0px)) calc(100% + var(--by2,0px)),rgba(100,70,255,var(--bop-br,1)),transparent),
      radial-gradient(ellipse calc(80px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(22px * var(--bh3,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(55% + var(--bx3,0px)) calc(100% + var(--by3,0px)),rgba(40,140,255,var(--bop-br,1)),transparent),
      radial-gradient(ellipse calc(69px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(28px * var(--bh1,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(93.9% + var(--bx1,0px)) calc(0% + var(--by1,0px)),rgba(255,120,40,var(--bop-tr,1)),transparent),
      radial-gradient(ellipse calc(22px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(38px * var(--bh2,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(100% + var(--bx2,0px)) calc(27.1% + var(--by2,0px)),rgba(240,50,180,var(--bop-tr,1)),transparent),
      radial-gradient(ellipse calc(47px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(44px * var(--bh3,1) * var(--bgh,1) * var(--pulse-glow-boost,1)) at calc(100% + var(--bx3,0px)) calc(27.1% + var(--by3,0px)),rgba(180,40,240,var(--bop-tr,1)),transparent),
      radial-gradient(ellipse 60px 60px at 0 0,rgba(255,255,255,calc(.18 * var(--bop-tl,1))),transparent 70%),
      radial-gradient(ellipse 60px 60px at 100% 0,rgba(255,255,255,calc(.18 * var(--bop-tr,1))),transparent 70%),
      radial-gradient(ellipse 60px 60px at 0 100%,rgba(255,255,255,calc(.18 * var(--bop-bl,1))),transparent 70%),
      radial-gradient(ellipse 60px 60px at 100% 100%,rgba(255,255,255,calc(.18 * var(--bop-br,1))),transparent 70%);
    background:
      radial-gradient(ellipse calc(210px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(30px * var(--bh2,1) * var(--bgh,1)) at calc(52% + var(--bx2,0px)) calc(108% + var(--by2,0px)),rgba(255,49,95,var(--bop-br,1)),transparent 74%),
      radial-gradient(ellipse calc(145px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(26px * var(--bh3,1) * var(--bgh,1)) at calc(34% + var(--bx3,0px)) calc(106% + var(--by3,0px)),rgba(23,201,255,var(--bop-bl,1)),transparent 74%),
      radial-gradient(ellipse calc(76px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(36px * var(--bh1,1) * var(--bgh,1)) at calc(20% + var(--bx1,0px)) calc(0% + var(--by1,0px)),rgba(23,201,255,var(--bop-tl,1)),transparent),
      radial-gradient(ellipse calc(70px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(40px * var(--bh2,1) * var(--bgh,1)) at calc(48% + var(--bx2,0px)) calc(100% + var(--by2,0px)),rgba(255,49,95,var(--bop-bl,1)),transparent),
      radial-gradient(ellipse calc(86px * var(--bw3,1) * var(--pulse-glow-boost,1)) calc(36px * var(--bh3,1) * var(--bgh,1)) at calc(78% + var(--bx3,0px)) calc(0% + var(--by3,0px)),rgba(23,201,255,var(--bop-tr,1)),transparent),
      radial-gradient(ellipse calc(80px * var(--bw1,1) * var(--pulse-glow-boost,1)) calc(38px * var(--bh1,1) * var(--bgh,1)) at calc(100% + var(--bx1,0px)) calc(70% + var(--by1,0px)),rgba(255,49,95,var(--bop-br,1)),transparent),
      radial-gradient(ellipse calc(66px * var(--bw2,1) * var(--pulse-glow-boost,1)) calc(34px * var(--bh2,1) * var(--bgh,1)) at calc(0% + var(--bx2,0px)) calc(74% + var(--by2,0px)),rgba(255,49,95,var(--bop-bl,1)),transparent),
      radial-gradient(ellipse 60px 60px at 0 0,rgba(255,255,255,calc(.13 * var(--bop-tl,1))),transparent 70%),
      radial-gradient(ellipse 60px 60px at 100% 100%,rgba(255,255,255,calc(.13 * var(--bop-br,1))),transparent 70%);
    background:
      radial-gradient(ellipse calc(136px * var(--bw1,1)) calc(32px * var(--bh1,1) * var(--bgh,1)) at calc(18% + var(--studio-aurora-left-x,0px)) calc(104% + var(--studio-aurora-left-y,0px)),rgba(23,201,255,var(--bop-bl,1)),transparent 74%),
      radial-gradient(ellipse calc(136px * var(--bw2,1)) calc(32px * var(--bh2,1) * var(--bgh,1)) at calc(82% + var(--studio-aurora-right-x,0px)) calc(104% + var(--studio-aurora-right-y,0px)),rgba(240,45,69,var(--bop-br,1)),transparent 74%),
      radial-gradient(ellipse calc(108px * var(--bw3,1)) calc(56px * var(--bh3,1)) at calc(0% + var(--studio-aurora-left-x,0px)) calc(42% + var(--studio-aurora-left-y,0px)),rgba(23,201,255,var(--bop-tl,1)),transparent 76%),
      radial-gradient(ellipse calc(108px * var(--bw1,1)) calc(56px * var(--bh1,1)) at calc(100% + var(--studio-aurora-right-x,0px)) calc(58% + var(--studio-aurora-right-y,0px)),rgba(240,45,69,var(--bop-tr,1)),transparent 76%);
    -webkit-mask-image:linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);
    mask-composite:add;
    opacity:calc(var(--beam-opacity,.42) * .46 * var(--beam-inner-opacity,1) * var(--beam-strength,1));
    filter:brightness(1.08) saturate(1.26);
    transform:scale(var(--studio-aurora-inner-scale,1));
    transform-origin:center;
    transition:transform 55ms linear,opacity 70ms linear;
    pointer-events:none;
    will-change:opacity,filter,background,transform;
  }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(.studio-mobile-title,#studio-workspace-trigger,.studio-dock-actions-trigger) > * { position:relative;z-index:3; }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(.studio-mobile-title > em,#studio-workspace-trigger .studio-workspace-chevron,.studio-dock-actions-trigger > em) { display:none !important; }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(#studio-mobile-chat-title,.studio-dock-actions-label) { font-size:0 !important; }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(#studio-mobile-chat-title,.studio-dock-actions-label)::after { content:"Listening…";color:var(--studio-cream); }
  body.studio-live-voice-active #app-screen.is-mobile-studio :is(#studio-mobile-chat-title,.studio-dock-actions-label)::after { font-size:16px;line-height:1; }
  body.studio-live-voice-active #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-name::after { content:"Listening…" !important;font-size:16px;line-height:1; }
  body.studio-live-voice-active[data-studio-voice-state="talking"] #app-screen.is-mobile-studio :is(#studio-mobile-chat-title,.studio-dock-actions-label)::after { content:"Talking…"; }
  body.studio-live-voice-active[data-studio-voice-state="talking"] #app-screen.is-mobile-studio #studio-workspace-trigger .studio-workspace-name::after { content:"Talking…" !important; }
  body.studio-live-voice-active #app-screen.is-mobile-studio .studio-mobile-menu { border-color:var(--studio-line-strong) !important;background:var(--studio-surface-2) !important;box-shadow:none !important; }
  body.studio-live-voice-active #app-screen.is-mobile-studio .studio-mobile-menu > svg { display:none; }
  body.studio-live-voice-active #app-screen.is-mobile-studio .studio-mobile-menu::after {
    content:"";
    position:relative;
    z-index:1;
    width:9px;
    height:9px;
    border-radius:1.5px;
    background:var(--studio-cream);
    box-shadow:0 0 8px rgba(251,241,224,.28);
  }
  #studio-mobile-project-list > [hidden] { display:none !important; }
  #app-screen.is-mobile-studio .studio-mobile-search-empty:not([hidden]) { display:block;position:absolute;top:145px;left:20px;color:var(--studio-silver);font-size:15px; }
  #studio-mobile-navigation { box-sizing:border-box;width:calc(100% - 32px);max-width:420px;max-height:calc(100dvh - 48px);margin:24px auto;padding:20px;border:1px solid var(--studio-line-strong);border-radius:22px;background:var(--studio-surface,#1B1920);color:var(--studio-cream,#FBF1E0);box-shadow:0 20px 60px #0008;font-family:var(--studio-font); }
  #studio-mobile-navigation::backdrop { background:#0009; }
  #studio-mobile-navigation header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
  #studio-mobile-navigation header button { width:44px;height:44px;border:1px solid var(--studio-line-strong);border-radius:50%;font-size:24px; }
  #studio-mobile-navigation button { background:transparent;color:inherit;touch-action:manipulation; }
  #studio-mobile-navigation nav button { display:block;width:100%;min-height:52px;padding:12px 4px;text-align:left;border:0;border-bottom:1px solid var(--studio-line);font:500 17px var(--studio-font); }
  #studio-mobile-navigation nav button[hidden] { display:none !important; }
  #studio-mobile-navigation nav button[aria-current="page"] { color:var(--studio-cream,#FBF1E0);background:rgba(251,241,224,.07); }
  #studio-mobile-navigation nav button[data-mobile-menu-utility] { margin-top:16px;padding-top:18px;border-top:1px solid var(--studio-line);border-bottom:0;color:var(--studio-silver); }
  #studio-mobile-navigation button:focus-visible,#studio-mobile-project-search:focus-visible { outline:2px solid #17C9FF;outline-offset:2px; }
}