/* Shared chrome for both workbenches; keep page-specific creation flows separate. */
@media(min-width:980px){.studio-page .studio-sidebar nav{flex:1 1 auto;min-height:0;align-content:start;grid-auto-rows:max-content;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.studio-page .studio-sidebar nav a{flex-shrink:0}.studio-page .sidebar-account,.studio-page #sidebar-admin-entry{flex:none}}
.studio-page .personal-menu { position:fixed; z-index:100; bottom:70px; left:12px; width:300px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 140px); overflow:auto; border:1px solid #e1e3e8; padding:20px; border-radius:18px; background:#fff; box-shadow:0 12px 40px #20242c18; color:#24262b; }
.studio-page .personal-menu[hidden] { display:none; }
.studio-page #sidebar-admin-entry[hidden] { display:none; }
.studio-page #sidebar-admin-entry { display:flex; flex-direction:column; align-items:center; gap:5px; margin-top:auto; padding:10px 0; font-size:11px; color:#647082; text-decoration:none; }
.studio-page #sidebar-admin-entry:not([hidden]) + .sidebar-account { margin-top:0; }
.studio-page .personal-menu > button { display:flex; align-items:center; width:100%; background:none; border:0; padding:12px 0; text-align:left; cursor:pointer; color:inherit; font:inherit; font-size:14px; line-height:inherit; }
.studio-page .personal-menu > button:hover { color:#000; background:#f5f6f8; }
@media(max-width:979px) { .studio-page #sidebar-admin-entry { margin-top:0; min-width:56px; } }
.studio-page .personal-identity { display:grid; align-items:start; gap:4px; overflow-wrap:anywhere; padding-bottom:20px; border-bottom:1px solid #e1e3e8; margin-bottom:8px; }
.studio-page .personal-identity>span { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:#24262b; color:white; }
.studio-page .personal-identity strong { font-size:14px; font-weight:600; }.studio-page .personal-identity small { display:block; margin-top:5px; font-size:11px; color:#616773; }
.studio-page .personal-menu>a { display:flex; align-items:center; justify-content:space-between; text-decoration:none; padding:12px 0; font-size:14px; }.studio-page .personal-menu>a:hover { color:#000; background:#f5f6f8; }
.studio-page .personal-menu details { padding:12px 0; font-size:14px; }.studio-page .personal-menu summary { cursor:pointer; }.studio-page .personal-menu p { margin-top:10px; color:#616773; font-size:12px; line-height:1.7; }
@media(max-width:979px) { .studio-page .personal-menu { bottom:auto; top:140px; right:12px; left:auto; } }
/* No bright rings on clicks or automatic dialog focus. Keyboard-only cues are neutral. */
.studio-page:is(.lipsync-page,.video-generation-page) :is(button,a,input,textarea,select,summary,[tabindex]):is(:focus,:focus-visible) { outline: 0; box-shadow: none; }
.studio-page:is(.lipsync-page,.video-generation-page) .creation-panel:focus-within { border-color: #e6e9ef; outline: 0; box-shadow: none; }
.studio-page:is(.lipsync-page,.video-generation-page) :is(.truth-field input,.truth-field textarea,.settings-panel textarea):focus { border-color: #e2e6ec; outline: 0; box-shadow: none; }
.studio-page.video-generation-page .language-options input + span,
.studio-page.video-generation-page .language-options input:focus-visible + span { outline: 0; box-shadow: none; }
.studio-page:is(.lipsync-page,.video-generation-page)[data-input-mode="keyboard"] :is(button,a,select,summary,input:not([type="radio"]):not([type="checkbox"])):focus-visible { outline: 1px solid #757575; outline-offset: 2px; box-shadow: none; }
.studio-page:is(.lipsync-page,.video-generation-page)[data-input-mode="keyboard"] :is(input[type="radio"],input[type="checkbox"]):focus-visible { outline: 1px solid #757575; outline-offset: 2px; }
.studio-page.video-generation-page[data-input-mode="keyboard"] .language-options input:focus-visible { outline: 0; }
.studio-page.video-generation-page[data-input-mode="keyboard"] .language-options input:focus-visible + span { outline: 1px solid #757575; outline-offset: 2px; }
.studio-page:is(.lipsync-page,.video-generation-page) .studio-header { display: flex; align-items: center; height: 48px; min-height: 48px; padding: 0 22px; }
.studio-page .studio-header .brand { display: inline-flex; align-items: center; height: 100%; gap: 10px; }
.studio-page .studio-header .brand-mark { width: 30px; height: 30px; padding: 0; }
.studio-page .studio-header .brand-mark img { display: block; }
.studio-page .studio-header .brand > span:last-child { display: flex; align-items: center; }
.studio-page .studio-header .brand strong { font-size: 14px; line-height: 1; }
.studio-page:is(.lipsync-page,.video-generation-page) .sidebar-account { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.studio-page .sidebar-balance { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 56px; min-height: 56px; padding: 6px; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; color: #637080; }
.studio-page .sidebar-balance > span { font-size: 12px; white-space: nowrap; }
.studio-page .sidebar-balance strong { font-size: 13px; font-weight: 500; }
.studio-page .sidebar-balance small { font-size: 11px; }
.studio-page .sidebar-account .avatar-button { width: 34px; height: 34px; flex: none; font-size: 14px; }
.studio-page .sidebar-help,.studio-page .back-site,.studio-page .studio-sidebar nav em { display: none; }
.studio-page .studio-sidebar nav a > span { letter-spacing: -.3px; }
.studio-page .studio-sidebar nav i { width: 24px; height: 24px; justify-content: center; flex: none; }
.studio-page .studio-sidebar nav .ui-icon { width: 24px; height: 24px; flex: none; stroke-width: 1.55; }
.studio-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lipsync-page .panel-help { margin-left: auto; display: grid; place-items: center; width: 30px; min-height: 30px; padding: 4px; background: transparent; color: #6a7484; }
@media(min-width:980px) {
  .studio-page:is(.lipsync-page,.video-generation-page) .studio-shell { grid-template-columns: 72px minmax(0,1fr); padding-top: 48px; }
  .studio-page:is(.lipsync-page,.video-generation-page) .studio-sidebar { top: 48px; height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); min-height: 0; padding: 20px 5px; }
  .studio-page:is(.lipsync-page,.video-generation-page) .studio-sidebar nav a { display: flex; flex-direction: column; gap: 7px; padding: 13px 2px; font-size: 12px; text-align: center; }
  .studio-page:is(.lipsync-page,.video-generation-page) .studio-sidebar nav a > span { width: 100%; white-space: nowrap; }
  .studio-page .studio-sidebar nav i { width: 24px; }
  .studio-page:is(.lipsync-page,.video-generation-page) .studio-main { padding: 14px 20px 20px; }
  .lipsync-page .creation-grid { margin-top: 0; }
}
@media(min-width:761px) and (max-width:979px) { .studio-page:is(.lipsync-page,.video-generation-page) .studio-shell { padding-top: 48px; } }
@media(max-width:979px) { .studio-page:is(.lipsync-page,.video-generation-page) .sidebar-account { margin: 0 0 0 auto; padding: 0 4px; align-self: center; flex-direction: row; gap: 6px; }.studio-page .sidebar-balance { width: 32px; min-height: 34px; padding: 3px; gap: 0; }.studio-page .sidebar-balance small { display: none; } }
@media(max-width:760px) { .studio-page:is(.lipsync-page,.video-generation-page) .studio-header { padding-inline: 12px; }.studio-page:is(.lipsync-page,.video-generation-page) .studio-shell { padding-top: 0; } }
.studio-sidebar .avatar-button.is-guest {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:52px;
  min-width:52px;
  height:34px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#616773;
  font-size:13px;
  font-weight:500;
  line-height:20px;
  letter-spacing:0;
  white-space:nowrap;
  writing-mode:horizontal-tb;
}
.studio-sidebar .avatar-button.is-guest:hover { background:#edf0f4; color:#24262b; }

/* The tool home and the public website are separate destinations. */
.studio-page .studio-header .studio-site-home { margin-left:auto; flex:none; padding:8px 12px; border:1px solid #e3e7ec; border-radius:8px; color:#4b5563; background:#fff; font-size:12px; line-height:1.4; text-decoration:none; }
.studio-page .studio-header .studio-site-home:hover { background:#f5f6f8; color:#24262b; }
.studio-page .studio-header .studio-site-home:focus-visible { outline:2px solid #4d70b5; outline-offset:3px; }