/* YoMinds Studio — original editorial composition, 21 October 2026.
 * This final presentation layer preserves existing DOM contracts and scroll owners.
 * References are documented in docs/STUDIO_DESIGN_20261021_RU.md; no external code/assets.
 */
:root {
  /* Palette intentionally inherited, unchanged, from production 20261021-07. */
  --primary-ink:#fff;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:20px;
  --control-shadow:none; --control-ring:0 0 0 3px var(--tint);
  --studio-max:1160px; --studio-rule:1px solid var(--line);
  --studio-heading:clamp(36px,4.1vw,60px); --workspace-card-padding:18px;
  --water-start:#0d1726; --water-mid:#152a43; --water-end:#101b2d; --water-ripple:#93c9e8;
}
html.light-theme { --water-start:#e8f5ff; --water-mid:#cfe8f5; --water-end:#f5faff; --water-ripple:#3c86a8; }
html { min-width:0; background:var(--bg); }
body { min-width:0; background:var(--bg); color:var(--text); font-size:14px; -webkit-font-smoothing:antialiased; }
.shell { min-width:0; }
button { border-radius:var(--radius-sm); font-weight:500; }
button:active:not(:disabled) { transform:translateY(1px); }
.primary { color:var(--primary-ink); background:var(--primary); border-color:var(--primary); box-shadow:none; }
.primary:hover:not(:disabled) { color:var(--primary-ink); background:var(--primary-hover); border-color:var(--primary-hover); box-shadow:none; }
.ghost { background:transparent; box-shadow:none; }
.ghost:hover:not(:disabled) { background:var(--hover); border-color:var(--line-strong); }
.icon { stroke-width:1.6; }
.eyebrow,.assistant-kicker,.studio-auth-kicker,.studio-edition { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.12em; line-height:1.6; text-transform:uppercase; }
.brand-symbol { color:var(--accent); }
.badge { border-radius:4px; font-size:10px; }
#waterCanvas { opacity:.65; }
.helper-history-older { min-height:44px; align-self:center; flex-shrink:0; }
.helper-message-list .message { padding:12px 14px; border-radius:10px; box-shadow:none; }
.helper-message-list .message-content { font-size:14px; line-height:1.6; }

/* Entry: a title page and a precisely aligned form, rather than a floating demo. */
.auth-layout { width:min(1240px,100%); min-height:100dvh; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); grid-template-areas:"brand form" "footer form"; grid-template-rows:auto auto; gap:0 clamp(48px,8vw,120px); align-items:center; padding:64px 64px 40px; }
.brand-card { grid-area:brand; position:relative; min-width:0; padding-right:16px; align-self:end; }
.studio-auth-footer { grid-area:footer; align-self:start; min-width:0; }
.auth-card { grid-area:form; }
.brand-symbol-auth { width:38px; height:38px; }
.brand-card h1 { margin:20px 0 34px; font-size:25px; font-weight:650; letter-spacing:-.055em; }
.studio-auth-brand { display:flex; align-items:center; gap:11px; margin-bottom:29px; }
.studio-auth-brand h1 { margin:0; font-size:25px; }
.studio-auth-brand .brand-symbol-auth { width:34px; height:34px; }
.brand-card > p[data-i18n=tagline] { max-width:560px; margin:0 0 22px; color:var(--text); font-size:clamp(36px,4.15vw,59px); font-weight:500; line-height:1.07; letter-spacing:-.065em; text-wrap:balance; }
.brand-card > p[data-i18n=localOnly] { max-width:405px; margin-bottom:20px; font-size:14px; line-height:1.8; color:var(--muted); }
.brand-card > .studio-auth-kicker { display:block; margin:0 0 17px; font-size:11px; font-weight:500; letter-spacing:.1em; line-height:1.6; }
.brand-card > p:has(a) { max-width:470px; margin:22px 0 0; padding-top:18px; border-top:var(--studio-rule); font-size:10px; line-height:1.9; color:var(--muted); }
.brand-card > p a { color:var(--muted); text-decoration:none; }
.brand-card > p a:hover { color:var(--accent); text-decoration:underline; }
.auth-preferences { margin-top:14px; gap:6px; }
.auth-preferences > span:first-child { margin-right:6px; }
.auth-preferences button { min-height:36px; }
.studio-auth-links { display:flex; flex-wrap:wrap; gap:5px 13px; max-width:470px; margin-top:21px; padding-top:16px; border-top:var(--studio-rule); }
.studio-auth-links a { color:var(--muted); font-size:11px; line-height:1.8; text-decoration:none; }
.studio-auth-links a:hover { color:var(--accent); text-decoration:underline; }
.studio-auth-facts { display:flex; flex-wrap:wrap; gap:8px 18px; margin:10px 0 20px; color:var(--muted); font-size:11px; letter-spacing:0; }
.studio-auth-facts span { display:inline-flex; align-items:center; gap:7px; }
.studio-auth-facts span::before { content:""; width:3px; height:3px; flex:none; background:var(--accent); }
.auth-card { position:relative; width:100%; padding:30px; border:var(--studio-rule); border-radius:var(--radius-lg); background:var(--panel); box-shadow:none; }
.auth-card::before { content:""; position:absolute; top:-1px; left:30px; width:48px; height:3px; background:var(--accent); }
.auth-card .tabs { display:flex; flex-wrap:wrap; gap:0; padding:0; margin:0 0 30px; border:0; border-bottom:var(--studio-rule); border-radius:0; background:transparent; }
.auth-card .tab { flex:1; min-width:0; min-height:46px; padding:9px 4px; font-size:11px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; box-shadow:none; color:var(--muted); }
.auth-card .tab.active { color:var(--text); background:transparent; border-bottom-color:var(--accent); box-shadow:none; }
.auth-card .tabs::before,.auth-card .tabs::after { display:none; }
.auth-card .segmented-indicator,.room-mode-tabs .segmented-indicator { display:none; }
.segmented-indicator { transition-duration:160ms; }
.auth-form { gap:18px; }
.auth-form h2 { margin:0 0 5px; font-size:25px; font-weight:550; letter-spacing:-.04em; }
.auth-form > label { gap:8px; font-size:12px; }
.auth-form input:not([type=checkbox]) { min-height:46px; padding:12px; border-color:var(--line-strong); background:var(--bg); }
.auth-form > .primary { margin-top:5px; min-height:46px; }
.auth-form .hint { font-size:12px; line-height:1.65; }
.auth-form .consent { font-size:12px; }
.auth-forgot { margin-top:17px; }

/* Original shared-space artwork. Its visual is supplied by local SVG/CSS. */
.studio-space { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1.5; max-height:260px; min-width:0; margin:28px 0 16px; overflow:hidden; color:var(--accent); }
.studio-space > svg { display:block; width:100%; height:100%; max-height:260px; }
.studio-space-plane { position:absolute; width:35%; aspect-ratio:1.35; border:1px solid var(--line-strong); border-radius:2px; background:var(--panel); transform:rotate(-25deg) skew(16deg,5deg); }
.studio-space-plane > svg { width:22px; height:22px; margin:14px; opacity:.7; fill:none; stroke:currentColor; stroke-width:1.4; }
.studio-space-plane[data-plane="1"] { left:14%; top:12%; }
.studio-space-plane[data-plane="2"] { left:44%; top:27%; border-color:var(--accent); }
.studio-space-plane[data-plane="3"] { left:14%; top:39%; }
.studio-space-plane[data-plane="4"] { left:44%; top:54%; }
.studio-space-center { position:absolute; z-index:2; display:grid; place-items:center; left:43%; top:44%; width:47px; height:47px; border:1px solid var(--accent); border-radius:50%; color:var(--accent); background:var(--bg); }
.studio-space-center svg { width:25px; height:25px; }
.studio-space-orbit { position:absolute; width:76%; height:68%; border:1px solid var(--line); border-radius:50%; transform:rotate(-15deg); }
.brand-card > .studio-space { max-width:430px; max-height:220px; margin:18px 0; }
.brand-card > .studio-space .studio-space-plane { width:32%; aspect-ratio:1.5; }
.brand-card > .studio-space .studio-space-plane[data-plane="1"] { top:8%; }
.brand-card > .studio-space .studio-space-plane[data-plane="2"] { top:23%; }
.brand-card > .studio-space .studio-space-plane[data-plane="3"] { top:35%; }
.brand-card > .studio-space .studio-space-plane[data-plane="4"] { top:50%; }

/* Workspace: fixed structural rails, broad content canvas and a clear current item. */
.topbar { height:62px; padding:0 24px; gap:20px; background:var(--bg); border-bottom:var(--studio-rule); }
.brand-inline { width:196px; }
.brand-home { gap:9px; }
.brand-home strong { font-size:21px; font-weight:600; }
.brand-symbol-mini { width:27px; height:27px; }
.brand-home .badge { margin-left:2px; padding:1px 4px; border:0; color:var(--muted); font-size:8px; letter-spacing:.06em; }
.workspace-location { font-size:11px; gap:10px; }
.workspace-location > span:first-child { color:var(--muted); }
.top-actions { gap:3px; }
.top-actions .utility-button,.top-actions > .icon-button { border-radius:5px; }
.upgrade-button { border-color:var(--line-strong); background:transparent; color:var(--accent); border-radius:5px; }
.profile-button { border-color:var(--line); background:var(--sidebar); padding:5px 9px; }
.workspace { height:calc(100dvh - 62px); min-height:0; grid-template-columns:224px minmax(0,1fr); }
.sidebar { gap:26px; padding:24px 14px 18px; background:var(--bg); border-right:var(--studio-rule); }
.sidebar-start { gap:3px; }
.sidebar-start > .primary { margin-bottom:23px; min-height:42px; gap:9px; border:var(--studio-rule); background:var(--panel); color:var(--text); font-size:12px; font-weight:550; }
.sidebar-start > .primary:hover { border-color:var(--accent); color:var(--accent); background:var(--tint); }
.sidebar .eyebrow { margin:0 11px 11px; font-size:9px; letter-spacing:.13em; }
.home-button,.hub-button { position:relative; min-height:38px; padding:8px 11px; gap:10px; border:0; border-radius:5px; color:var(--muted); font-size:12px; }
.home-button .icon,.hub-button .icon { width:16px; height:16px; }
.home-button.active,.hub-button.active { color:var(--text); background:var(--hover); font-weight:550; }
.home-button.active::before,.hub-button.active::before { content:""; position:absolute; top:10px; bottom:10px; left:-14px; width:2px; background:var(--accent); }
.home-button.active::after { display:none; }
.hub-nav { gap:1px; }
.hub-icon { width:20px; height:20px; border:0; border-radius:0; color:var(--muted); background:transparent; }
.hub-button.active .hub-icon { color:var(--accent); }
.hub-chevron { opacity:0; }
.sidebar-footer { padding:18px 10px 0; }
.sidebar-tip { padding:0; border:0; background:transparent; }
.sidebar-tip p { margin-bottom:18px; font-size:11px; line-height:1.65; }
.sidebar-tip > [data-icon] { display:none; }
.sidebar-help-link { font-size:11px; }
.sidebar-legal-links { gap:2px 12px; margin-top:14px; }
.sidebar-legal-links a { font-size:11px; }
.chat-panel,html:not(.water-disabled) .chat-panel { margin:0; border:0; border-radius:0; background:var(--panel); box-shadow:none; }

/* Home is a title spread followed by an indexed directory, not a tile dashboard. */
.landing-inner { max-width:var(--studio-max); margin-inline:auto; padding:40px clamp(28px,4vw,64px) 52px; }
.studio-edition { display:flex; justify-content:space-between; gap:16px; margin-bottom:32px; padding-bottom:12px; border-bottom:var(--studio-rule); font-size:9px; }
.landing-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr); gap:32px; padding-bottom:35px; align-items:center; }
.landing-hero .assistant-kicker { margin-bottom:18px; color:var(--accent); font-size:9px; letter-spacing:.14em; }
.landing-hero h1 { max-width:640px; margin:0 0 20px; font-size:var(--studio-heading); line-height:1.05; letter-spacing:-.065em; font-weight:500; text-wrap:balance; }
.landing-hero-copy > p:last-of-type { max-width:440px; margin-bottom:24px; font-size:13px; line-height:1.8; }
.landing-hero-copy > .primary { min-height:42px; padding-inline:18px; font-size:12px; }
.landing-hero > .studio-space { margin:0; aspect-ratio:1; max-height:280px; }
.landing-actions { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:22px 0; border-block:var(--studio-rule); }
.landing-action { min-height:64px; padding:6px 0; gap:14px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.landing-action + .landing-action { border-left:var(--studio-rule); padding-left:24px; }
.landing-action:hover { background:transparent; box-shadow:none; }
.landing-action-icon { width:36px; height:36px; border:var(--studio-rule); border-radius:50%; color:var(--accent); background:transparent; }
.landing-action-icon .icon { width:17px; height:17px; }
.landing-action strong { font-size:14px; font-weight:550; }
.landing-action small { margin-top:3px; font-size:12px; line-height:1.6; }
.landing-action:hover strong { color:var(--accent); }
.landing-hubs { margin-top:33px; }
.section-heading { align-items:flex-end; margin-bottom:19px; gap:18px; }
.section-heading .eyebrow { font-size:9px; margin-bottom:8px; }
.section-heading h2 { font-size:23px; font-weight:500; letter-spacing:-.04em; }
.section-caption { max-width:195px; text-align:right; font-size:11px; line-height:1.6; }
.landing-hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:30px; row-gap:0; counter-reset:studio-hub; }
.landing-hub-grid button { counter-increment:studio-hub; display:grid; position:relative; grid-template-columns:24px 28px minmax(0,1fr) 20px; grid-template-rows:auto auto; align-items:center; align-content:center; min-height:94px; padding:17px 2px; gap:3px 9px; border:0; border-top:var(--studio-rule); border-radius:0; background:transparent; transform:none; box-shadow:none; }
.landing-hub-grid button::before { content:counter(studio-hub,decimal-leading-zero); position:static; grid-column:1; grid-row:1 / 3; display:block; width:auto; height:auto; opacity:1; color:var(--muted); font-size:9px; font-weight:400; font-variant-numeric:tabular-nums; background:none; transform:none; }
.landing-hub-grid button::after { display:none; }
.landing-hub-grid .welcome-action-icon { grid-column:2; grid-row:1 / 3; align-self:center; display:grid; place-items:center; width:28px; height:32px; border:1px solid color-mix(in srgb,currentColor 12%,transparent); border-radius:9px; color:var(--muted); background:transparent; overflow:hidden; }
.landing-hub-grid .welcome-action-icon .icon { width:19px; height:19px; }
.landing-hub-grid strong { grid-column:3; grid-row:1; margin:0; font-size:13px; font-weight:550; line-height:1.5; letter-spacing:-.015em; }
.landing-hub-grid small { grid-column:3; grid-row:2; font-size:12px; line-height:1.6; color:var(--muted); }
.landing-hub-grid .hub-card-link { grid-column:4; grid-row:1 / 3; width:20px; height:24px; margin:0; align-self:center; color:var(--muted); background:transparent; }
.landing-hub-grid button:is(:hover,:focus-visible) { background:var(--hover); border-color:var(--line-strong); box-shadow:none; transform:none; }
.landing-hub-grid button:is(:hover,:focus-visible)::before { opacity:1; }
.landing-hub-grid button:hover :is(strong,.welcome-action-icon,.hub-card-link) { color:var(--accent); }
.landing-hub-grid .template-dnd .welcome-action-icon { color:var(--dnd-ink); background:var(--dnd-tint); }
.landing-hub-grid .template-roleplay .welcome-action-icon { color:var(--roleplay-ink); background:var(--roleplay-tint); }
.landing-hub-grid .template-learning .welcome-action-icon { color:var(--learning-ink); background:var(--learning-tint); }
.landing-hub-grid .template-social .welcome-action-icon { color:var(--social-ink); background:var(--social-tint); }
.landing-hub-grid .template-work .welcome-action-icon { color:var(--work-ink); background:var(--work-tint); }
.landing-hub-grid .template-games .welcome-action-icon { color:var(--games-ink); background:var(--games-tint); }
.landing-hub-grid .template-languages .welcome-action-icon { color:var(--languages-ink); background:var(--languages-tint); }
.landing-hub-grid .template-bookclub .welcome-action-icon { color:var(--bookclub-ink); background:var(--bookclub-tint); }
.landing-hub-grid .template-creative .welcome-action-icon { color:var(--creative-ink); background:var(--creative-tint); }
.landing-hub-grid .template-debates .welcome-action-icon { color:var(--debates-ink); background:var(--debates-tint); }
@media (prefers-reduced-motion:no-preference) {
  button,input,textarea,select,.choice-chip > span,.model-tier-option { transition-duration:160ms; transition-timing-function:var(--ease); }
  .primary::before,#voiceJoinButton::before { transition-duration:160ms; }
  .primary [data-icon] { transition-duration:160ms; }
  .landing-hub-grid button,.welcome-action,.landing-action { transition:background-color 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease); }
  .plan-switch-track,.plan-switch-track::before,.plan-switch-track span { transition-duration:160ms; }
  .profile-modal,.create-modal { animation:studio-surface-in 160ms ease-out; }
  .select-menu:not(.hidden),.room-history-menu[open] .room-history-menu-items,.reaction-options[popover]:popover-open { animation:studio-menu-in 120ms ease-out; }
  .navigation-open .sidebar { animation:studio-navigation-in 160ms ease-out; }
  .room-tools-drawer { animation-duration:160ms; }
  .landing-hub-grid .hub-card-link,.landing-action > [data-icon]:last-child { transition:transform 160ms var(--ease),color 160ms var(--ease); }
  .landing-hub-grid button:hover .hub-card-link { transform:translateX(3px); }
  .landing-action:hover > [data-icon]:last-child { transform:translate(2px,-2px); }
  @keyframes studio-surface-in { from { opacity:0; } to { opacity:1; } }
  @keyframes studio-menu-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
  @keyframes studio-navigation-in { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
}

/* Conversations stay compact and legible; original flex/scroll ownership is kept. */
.chat-header { padding:17px 24px; background:var(--panel); border-bottom:var(--studio-rule); }
.chat-header h2 { font-size:18px; font-weight:550; letter-spacing:-.035em; }
.chat-hub-icon { width:36px; height:36px; border-radius:8px; border-color:var(--line); background:transparent; }
.chat-actions button { font-size:11px; }
.room-mode-tabs { gap:18px; min-height:43px; margin:0 24px; padding:0; width:auto; max-width:calc(100% - 48px); border:0; border-bottom:var(--studio-rule); border-radius:0; background:transparent; }
.room-mode-tabs::before,.room-mode-tabs::after { display:none; }
.room-mode-tab { min-height:43px; padding:10px 1px; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); font-size:12px; background:transparent; }
.room-mode-tab[aria-selected=true] { border:0; border-bottom:2px solid var(--accent); color:var(--text); background:transparent; box-shadow:none; }
.room-mode-tab:hover { background:transparent; color:var(--text); }
.room-control-bar { padding:10px 24px; gap:8px; background:var(--panel); }
.room-tool-button { padding:6px 10px; min-height:34px; font-size:11px; background:transparent; border-color:var(--line); }
.room-tool-button:hover,.room-tool-button.active { background:var(--tint); border-color:var(--line-strong); color:var(--accent); }
.room-content > .message-list { padding:22px clamp(20px,3vw,46px); }
#chatView .message { max-width:min(680px,92%); border-color:var(--line); border-radius:10px; box-shadow:none; }
#chatView .message.mine { background:var(--tint); border-color:var(--line); }
#chatView .message.ai { background:var(--sidebar); }
#chatView .message-content { font-size:14px; line-height:1.6; }
#chatView .message-list { gap:14px; }
#chatView .message.message-continuation { margin-top:-9px; padding-top:9px; }
#chatView .message-continuation .message-author-line { height:0; min-height:0; margin:0; padding:0; }
#chatView .message-continuation .message-author-line > :not(.message-action-menu) { display:none; }
#chatView .message-continuation .message-action-menu { position:absolute; top:3px; right:5px; margin:0; }
#chatView .message-continuation .message-content { padding-right:34px; }
.message-author { font-weight:600; }
.message-kind { border-radius:3px; font-size:9px; }
.room-composer { border-color:var(--line-strong); border-radius:10px; box-shadow:none; background:var(--panel); }
.room-composer .composer-toolbar { background:transparent; }
.room-composer .composer-context { font-size:10px; }
.room-composer .primary { min-height:35px; font-size:11px; }
.room-tools-drawer,.room-side-panels { background:var(--sidebar); }
.room-tool-header { padding:14px 18px; background:var(--sidebar); }
.room-tool-header h3 { font-size:13px; font-weight:550; }
.room-tools-drawer .mechanics-card { border-radius:10px; box-shadow:none; background:var(--panel); }
.mechanics-card h4 { letter-spacing:-.025em; font-weight:550; }
.empty-state { padding:32px; }
.welcome-heading h2 { font-weight:500; font-size:33px; }
.welcome-mark { background:transparent; border-radius:50%; }
.assistant-surface { border-radius:12px; background:var(--sidebar); box-shadow:none; }
.welcome-actions { gap:0 24px; }
.welcome-action { border:0; border-top:var(--studio-rule); border-radius:0; background:transparent; min-height:86px; padding:16px 0; }
.welcome-action-icon { border-radius:7px; }
.welcome-action:hover { box-shadow:none; background:transparent; }
.discovery-view { padding:34px 38px; }
.discovery-header h1 { font-size:34px; font-weight:500; }
.discovery-header .muted { max-width:620px; font-size:13px; line-height:1.8; }
.discovery-controls { border-block:var(--studio-rule); padding:16px 0; margin-bottom:20px; }
.room-search input { background:var(--sidebar); }
.discovery-room-grid { gap:14px; }
.discovery-room-grid .room-card { min-height:130px; padding:18px; border-radius:10px; background:var(--panel); }
.discovery-room-grid .room-card-symbol { background:transparent; border:var(--studio-rule); }
.empty-rooms { border-style:solid; border-radius:10px; background:var(--sidebar); padding:35px 20px; }
.empty-rooms-icon { background:transparent; }
.friends-header { padding:34px 38px 22px; border-bottom:var(--studio-rule); }
.friends-header h2 { font-size:34px; font-weight:500; }
.friends-content { padding:24px 38px; }
.friend-card { border-radius:10px; box-shadow:none; }

/* Dialogs use consistent section rules and flat, readable controls. */
.modal-backdrop { background:#0b102c66; backdrop-filter:blur(3px); }
.modal,.profile-modal,.create-modal { border-color:var(--line-strong); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); }
.modal-header { align-items:center; gap:13px; margin-bottom:21px; }
.modal-header h2 { font-size:24px; font-weight:500; letter-spacing:-.045em; }
.modal-symbol { width:38px; height:38px; border:var(--studio-rule); border-radius:9px; background:transparent; }
.create-modal > .muted { font-size:12px; line-height:1.7; }
.create-form-fields { gap:20px; }
.form-section > legend { font-size:11px; font-weight:600; }
.form-section { gap:13px; }
.model-tier-option,.privacy-option { border-radius:8px; background:var(--sidebar); box-shadow:none; }
.model-tier-option[aria-checked=true],.privacy-option:has(:checked) { border-color:var(--accent); background:var(--tint); box-shadow:none; }
.choice-chip { border-radius:5px; box-shadow:none; }
.quick-start-choices button { border-radius:6px; background:var(--sidebar); box-shadow:none; }
.profile-avatar-editor { padding:16px; border:var(--studio-rule); border-radius:10px; background:var(--sidebar); }
.profile-divider { border-color:var(--line); }
.wallet-summary,.notification-settings { border-radius:10px; background:var(--sidebar); }

/* Music and screen share are working tools with visible hierarchy. */
.music-panel { gap:22px; }
.music-workspace-header { display:flex; align-items:flex-start; gap:13px; padding-bottom:20px; border-bottom:var(--studio-rule); }
.music-workspace-header > [data-icon],.music-workspace-header > .icon { display:grid; place-items:center; flex:none; width:40px; height:40px; padding:9px; border:var(--studio-rule); border-radius:9px; color:var(--accent); }
.music-workspace-header .music-workspace-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; padding:9px; border:var(--studio-rule); border-radius:9px; color:var(--accent); }
.music-workspace-icon .icon { width:20px; height:20px; }
.music-workspace-header h3 { margin:0 0 6px; font-size:22px; font-weight:500; letter-spacing:-.04em; }
.music-workspace-header p { margin:0; max-width:650px; font-size:12px; line-height:1.75; color:var(--muted); }
.music-section-heading,.music-library-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.music-section-heading h4,.music-library-header h4 { margin:0; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.music-section-heading > span,.music-section-heading small { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.music-queue,.music-library { min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
.music-library { padding-top:22px; border-top:var(--studio-rule); }
.music-tracks { gap:0; }
.music-track { gap:10px; min-height:60px; padding:9px 0; border:0; border-top:var(--studio-rule); border-radius:0; background:transparent; }
.music-track-position { width:22px; flex:none; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; text-align:center; }
.music-track [data-music-play] { min-height:42px; padding:4px 8px; background:transparent; border:0; border-radius:5px; }
.music-track [data-music-play]:hover { background:var(--hover); }
.music-track [data-music-play] strong { font-size:12px; font-weight:550; }
.music-track-title { display:grid; gap:4px; min-width:0; flex:1; }
.music-track-title strong { font-size:13px; font-weight:550; overflow-wrap:anywhere; }
.music-track small { font-size:10px; line-height:1.6; }
.music-track .music-now-playing { display:inline-flex; align-items:center; color:var(--accent); font-size:9px; font-weight:600; letter-spacing:.04em; }
.music-track:has(.music-now-playing) { background:var(--tint); }
.music-empty { padding:23px 16px; border:var(--studio-rule); border-radius:8px; background:var(--panel); color:var(--muted); font-size:12px; line-height:1.7; text-align:center; }
.music-empty strong { display:block; margin-bottom:5px; color:var(--text); font-weight:550; }
.music-empty > span { display:flex; justify-content:center; margin-bottom:11px; color:var(--accent); }
.music-empty p { margin:0; }
.music-library form { gap:10px; }
.music-library form[data-music-search] { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.music-upload { display:flex !important; flex-wrap:wrap; align-items:center; gap:10px !important; margin-top:18px; padding:12px; border:1px dashed var(--line-strong); border-radius:8px; background:var(--panel); }
.music-upload > span { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:500; }
.music-upload > input[type=file] { flex:1 1 200px; width:auto; max-width:100%; padding:0; border:0; border-radius:0; background:transparent; font-size:11px; }
.music-upload:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.music-upload input::file-selector-button { min-height:36px; margin-right:9px; border:var(--studio-rule); border-radius:5px; background:var(--hover); color:var(--text); font-size:11px; }
.music-search-results,.music-saved-tracks { margin-top:20px; }
.music-library .music-search-form { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.music-library details { margin-top:16px; border-top:var(--studio-rule); }
.music-library details > summary { min-height:44px; padding-block:14px; color:var(--muted); font-size:12px; cursor:pointer; }
.music-panel audio { height:36px; }
.room-music-player { border-color:var(--line); border-radius:8px; background:var(--sidebar); box-shadow:none; }
.music-main-control { color:var(--primary-ink); background:var(--primary); }
.screen-workspace { gap:18px; }
.screen-workspace-header { gap:13px; }
.screen-workspace-header h3 { font-size:22px; font-weight:500; letter-spacing:-.04em; }
.screen-workspace-header p { font-size:12px; line-height:1.75; }
.screen-workspace-header > [data-icon],.screen-workspace-icon { width:40px; height:40px; padding:9px; border-radius:9px; background:transparent; }
.screen-viewer { border-color:var(--line-strong); border-radius:10px; box-shadow:none; }
.screen-viewer-bar { padding:12px 14px; background:var(--sidebar); font-size:11px; }
.screen-viewer-stage,.screen-workspace .screen-preview { background:#101722; }
.screen-workspace .screen-empty { min-height:210px; gap:12px; padding:28px; background:#101722; color:#eaf0fa; }
.screen-workspace .screen-empty > .icon { width:36px; height:36px; color:#b3baff; }
.screen-workspace .screen-empty strong { font-size:17px; font-weight:500; }
.screen-workspace .screen-empty p { color:#a4aec3; font-size:12px; line-height:1.75; }
.screen-workspace .screen-analysis-card { gap:15px; padding:20px; border-radius:10px; background:var(--panel); }
.screen-analysis-card h4 { font-size:15px; font-weight:550; }
.screen-section-caption { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.screen-controls button { border-radius:6px; }
.screen-audio-controls { background:var(--sidebar); }
.screen-viewer > #screenAudioFeedback { margin:0; padding:10px 14px; border-top:var(--studio-rule); font-size:12px; line-height:1.65; }
.screen-analysis-answer { border:var(--studio-rule); border-radius:7px; background:var(--sidebar); }

/* Public documents receive the same typography without changing their content. */
body:has(> main:not(.shell)) { background:var(--panel); }
body:has(> main:not(.shell)) > :is(header,main,footer) { max-width:1000px; padding-inline:36px; }
body:has(> main:not(.shell)) h1 { max-width:850px; font-weight:500; letter-spacing:-.055em; }
body:has(> main:not(.shell)) h2 { font-weight:550; letter-spacing:-.035em; }
body:has(> main:not(.shell)) article { border-radius:10px; background:var(--sidebar); }

@media (max-width:1100px) and (min-width:721px) {
  .auth-layout { padding-inline:40px; gap:50px; grid-template-columns:minmax(0,1fr) minmax(330px,.85fr); }
  .workspace { grid-template-columns:210px minmax(0,1fr); }
  .brand-inline { width:180px; }
  .landing-inner { padding-inline:30px; }
  .landing-hero { grid-template-columns:minmax(0,1.4fr) minmax(170px,.6fr); gap:18px; }
  .landing-hero h1 { font-size:44px; }
  .landing-hub-grid { column-gap:20px; }
}
@media (max-width:720px) {
  :root { --workspace-card-padding:14px; }
  .auth-layout { display:flex; flex-direction:column; align-items:stretch; gap:28px; width:min(520px,100%); min-height:100dvh; padding:30px 22px 36px; }
  .brand-card { padding:0; align-self:stretch; }
  .studio-auth-footer { align-self:stretch; }
  .studio-auth-footer .studio-auth-links { margin-top:0; }
  .brand-symbol-auth { width:29px; height:29px; }
  .brand-card h1 { display:inline-block; margin:0 0 22px 8px; vertical-align:middle; font-size:23px; }
  .studio-auth-brand { margin-bottom:23px; gap:9px; }
  .studio-auth-brand h1 { margin:0; font-size:23px; }
  .studio-auth-brand .brand-symbol-auth { width:29px; height:29px; }
  .brand-card > p[data-i18n=tagline] { max-width:420px; margin-bottom:15px; font-size:36px; line-height:1.06; }
  .brand-card > p[data-i18n=localOnly] { margin-bottom:0; font-size:12px; line-height:1.75; }
  .brand-card > .studio-space { display:none; }
  .brand-card > .studio-auth-kicker { font-size:10px; margin:0 0 12px; }
  .brand-card > p:has(a) { margin-top:17px; padding-top:13px; font-size:10px; line-height:1.9; }
  .studio-auth-links { margin-top:17px; padding-top:13px; gap:3px 13px; }
  .studio-auth-links a { display:inline-flex; align-items:center; min-height:44px; font-size:11px; }
  .studio-auth-facts { gap:7px 14px; margin:13px 0 0; font-size:11px; }
  .auth-preferences { margin-top:10px; }
  .auth-preferences button { min-width:44px; min-height:44px; }
  .auth-card { padding:24px 20px; border-radius:12px; }
  .auth-card::before { left:20px; }
  .auth-card .tabs { margin-bottom:25px; }
  .auth-card .tab { min-height:46px; font-size:11px; padding-inline:3px; }
  .auth-form h2 { font-size:24px; }
  .auth-form input:not([type=checkbox]) { font-size:16px; }
  .auth-form > .primary { min-height:46px; }
  .topbar { height:56px; padding:0 8px; gap:2px; }
  .brand-inline { width:auto; gap:2px; }
  .brand-home { gap:6px; }
  .brand-home strong { font-size:18px; }
  .brand-symbol-mini { width:23px; height:23px; }
  .top-actions { gap:0; }
  .top-actions .language,.top-actions .utility-button,.top-actions > .icon-button,.top-actions .profile-button,#navigationToggle { min-height:44px; min-width:44px; width:44px; }
  .top-actions .profile-button { background:transparent; border:0; }
  .workspace { height:calc(100dvh - 56px); padding:0; }
  .sidebar { gap:24px; padding:22px 16px 24px; background:var(--sidebar); }
  .home-button,.hub-button { min-height:44px; }
  .sidebar-start > .primary { min-height:44px; }
  .sidebar-legal-links a { min-height:44px; font-size:11px; }
  .chat-panel,html:not(.water-disabled) .chat-panel { margin:0; border:0; border-radius:0; }
  .landing-inner { padding:27px 22px 36px; }
  .studio-edition { font-size:8px; margin-bottom:24px; padding-bottom:10px; }
  .landing-hero { grid-template-columns:minmax(0,1fr); gap:0; padding-bottom:26px; }
  .landing-hero .assistant-kicker { font-size:8px; margin-bottom:14px; }
  .landing-hero h1 { max-width:430px; font-size:42px; margin-bottom:18px; }
  .landing-hero-copy > p:last-of-type { max-width:380px; font-size:12px; margin-bottom:21px; line-height:1.8; }
  .landing-hero-copy > .primary { min-height:44px; }
  .landing-hero > .studio-space { display:none; }
  .landing-actions { grid-template-columns:minmax(0,1fr); gap:0; padding:7px 0; }
  .landing-action { min-height:76px; padding:13px 0; }
  .landing-action + .landing-action { border-left:0; border-top:var(--studio-rule); padding-left:0; }
  .landing-action strong { font-size:13px; }
  .landing-action small { font-size:12px; }
  .landing-hubs { margin-top:29px; }
  .section-heading { align-items:flex-start; margin-bottom:17px; gap:12px; }
  .section-heading h2 { font-size:23px; }
  .section-heading .eyebrow { font-size:8px; }
  .section-caption { max-width:105px; font-size:11px; padding-top:4px; }
  .landing-hub-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .landing-hub-grid button { min-height:92px; padding:17px 0; grid-template-columns:22px 25px minmax(0,1fr) 16px; column-gap:8px; }
  .landing-hub-grid strong { font-size:13px; }
  .landing-hub-grid small { font-size:12px; }
  .landing-hub-grid .welcome-action-icon { width:25px; }
  .discovery-view { padding:25px 20px; }
  .discovery-header h1 { font-size:29px; }
  .discovery-header .muted { font-size:12px; }
  .discovery-controls { gap:9px; padding:13px 0; }
  .discovery-room-grid .room-card { min-height:125px; padding:16px; }
  .friends-header { padding:25px 20px 20px; }
  .friends-header h2 { font-size:29px; }
  .friends-content { padding:20px; }
  .chat-header { padding:13px 14px; }
  .chat-header h2 { font-size:17px; }
  .chat-actions button { min-height:44px; }
  .room-mode-tabs { margin:0 14px; gap:18px; max-width:calc(100% - 28px); min-height:44px; }
  .room-mode-tab { min-height:44px; font-size:11px; }
  .room-control-bar { padding:9px 14px; }
  #chatView:has(#partyQuickBar:not([hidden]) [data-party-quick="ready"]) .party-shell [data-party-command="ready"],
  #chatView:has(#partyQuickBar:not([hidden]) [data-party-quick="start"]) .party-shell [data-party-command="start"] { display:none; }
  .room-tool-button { min-height:44px; padding:8px 10px; }
  #chatView .message { max-width:96%; border-radius:9px; }
  #chatView .message-content { font-size:14px; line-height:1.6; }
  #chatView .message.message-continuation { margin-top:-9px; }
  #chatView .message-continuation .message-action-menu { top:0; right:1px; }
  #chatView .message-continuation .message-action-menu > summary { min-width:44px; min-height:44px; }
  #chatView .message-continuation .message-content { padding-right:40px; }
  .room-content > .message-list { padding:16px 12px; }
  .room-composer { border-radius:9px; }
  .room-composer .primary { min-height:44px; }
  #helperForm .assistant-send { min-width:44px; min-height:44px; }
  .empty-state { padding:24px 18px; }
  .welcome-heading h2 { font-size:28px; }
  .welcome-actions { grid-template-columns:minmax(0,1fr); }
  .welcome-action { min-height:84px; }
  .modal,.profile-modal,.create-modal { border-radius:12px; }
  .modal-backdrop { padding:10px; }
  .modal-backdrop > :is(.modal,.profile-modal,.create-modal) { width:min(680px,100%); min-width:0; max-width:100%; max-height:calc(100dvh - 20px); }
  .create-modal { max-width:calc(100% - 20px); }
  .profile-modal :is(form,label,fieldset,.profile-avatar-editor,.avatar-file-label),.plans-modal :is(form,label,.wallet-summary,.wallet-purchase-row) { min-width:0; }
  .modal-header { margin-bottom:18px; }
  .modal-header h2 { font-size:22px; }
  .modal-header .modal-close { align-self:center; }
  .create-form-fields { gap:16px; }
  .modal input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.modal textarea,.modal select { font-size:16px; }
  #appView input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),#appView textarea,#appView select { font-size:16px; }
  .music-workspace-header h3,.screen-workspace-header h3 { font-size:20px; }
  .music-workspace-header p,.screen-workspace-header p { font-size:12px; }
  .music-track { gap:7px; }
  .music-track [data-music-play],.music-track > button { min-height:44px; }
  .music-library .music-search-form { grid-template-columns:minmax(0,1fr); }
  .music-library form[data-music-search] { grid-template-columns:minmax(0,1fr); }
  .music-library form[data-music-search] > button { min-height:44px; }
  .music-library .music-search-form > button { justify-self:stretch; }
  .screen-workspace .screen-empty { min-height:170px; padding:24px 16px; }
  .screen-workspace .screen-analysis-card { padding:16px; }
  body:has(> main:not(.shell)) > :is(header,main,footer) { padding-inline:22px; }
}
@media (max-width:360px) {
  .auth-layout { padding:24px 16px 30px; gap:22px; }
  .brand-card > p[data-i18n=tagline] { font-size:31px; }
  .auth-card { padding:23px 16px; }
  .auth-card .tab { font-size:10px; }
  .landing-inner { padding-inline:18px; }
  .landing-hero h1 { font-size:36px; }
  .section-caption { max-width:74px; }
  .landing-hub-grid button { grid-template-columns:20px 21px minmax(0,1fr) 16px; gap:3px 6px; }
  .landing-hub-grid .welcome-action-icon { width:21px; }
}
@media (min-width:721px) and (max-height:600px) {
  .auth-layout { padding-block:30px; }
  .brand-card > .studio-space { max-height:130px; margin-block:8px; }
  .brand-card h1 { margin-bottom:24px; }
  .brand-card > p[data-i18n=tagline] { font-size:42px; }
  .topbar { height:52px; }
  .workspace { height:calc(100dvh - 52px); }
  #chatView > .chat-header { padding:5px 14px; }
  #chatView .room-mode-tabs { min-height:38px; margin:0 14px; }
  #chatView .room-mode-tab { min-height:38px; padding-block:7px; }
  #chatView .room-control-bar { padding:5px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}