#studio .studio-header { position: relative; z-index: 2; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #30445a; }
#studio .studio-header .studio-mode-switch { position: relative; isolation: isolate; flex: 0 0 auto; padding: 8px 20px 12px; gap: 4px; }
#studio .studio-header .studio-mode-switch::before { display: none; }
#studio .studio-header .studio-mode-toggle { border: 0; background: transparent; box-shadow: none; padding: 3px; }
@media (min-width: 1401px) {
  #studio .studio-header .studio-mode-switch { margin-top: -23px; padding-top: 27px; padding-bottom: 11px; }
  #studio .studio-header .studio-mode-switch::before { top: calc(var(--studio-frame-join, 0px) - 4px); bottom: auto; height: 80px; }
}
#studio .studio-header .studio-mode-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#studio .studio-header .studio-mode-toggle button { min-height: 34px; padding: 6px 10px; font-size: 10px; white-space: nowrap; }
#studio .studio-header .studio-name { flex: 1 1 150px; }
#studio .studio-header #studio-save-status { flex: 1 0 90px; }
#studio .studio-header-actions { flex-shrink: 0; }
@media (max-width: 1400px) {
  #studio .studio-header { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #49627b transparent; }
  #studio .studio-header .studio-name { flex: 0 0 150px; }
  #studio .studio-header-label { flex-shrink: 0; }
}
#studio .studio-header-brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: #edf3f7; text-decoration: none; font-size: 14px; letter-spacing: .07em; }
#studio .studio-header-brand img { object-fit: contain; }
#studio .studio-header-label { display: flex; gap: 6px; align-items: center; font-size: 12px; }
#studio .studio-beta { color: #afbbff; border: 1px solid #687afa; border-radius: 7px; font-size: 8px; padding: 2px 5px; }
#studio .studio-header .studio-name { display: flex; flex: 1 1 180px; min-width: 0; max-width: 320px; gap: 4px; border-left: 1px solid #42566e; padding-left: 10px; }
#studio .studio-header .studio-name input { width: 100%; min-width: 0; color: #e5edf6; font-size: 11px; padding: 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
#studio .studio-header .studio-name input:focus { border-color: #7bd5fc; background: #0b1624; }
#studio .studio-header #studio-save-status { display: flex; flex: 1 1 140px; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; color: #f4cd8c; }
#studio .studio-header #studio-save-status::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
#studio .studio-header #studio-save-status[data-state="saved"] { color: #91f0d5; }
#studio .studio-header #studio-save-status[data-state="saved"]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m7.5 12 3 3 6-6'/%3E%3C/g%3E%3C/svg%3E"); }
#studio .studio-header #studio-save-status[data-state="error"] { color: #ffacbc; }
#studio .studio-header #studio-save-status[data-state="error"]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/g%3E%3C/svg%3E"); }
#studio .studio-header-actions { display: flex; gap: 8px; align-items: center; }
#studio .studio-header-menu { position: relative; }
#studio .studio-header-menu > summary { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #435b79; border-radius: 12px; cursor: pointer; color: #d8e4f5; font-size: 10px; background: #101c2e; list-style: none; }
#studio .studio-header-menu > summary::-webkit-details-marker { display: none; }
#studio #studio-credit-panel > summary {
  gap: 9px; min-height: 38px; padding: 7px 12px 7px 9px; border: 1px solid transparent; border-radius: 13px;
  background: linear-gradient(135deg, #13283d, #0b1525) padding-box, linear-gradient(125deg, #72d8ff99, #42658b88 55%, #9e8cf777) border-box;
  box-shadow: inset 0 1px 0 #d9f5ff0d, 0 3px 12px #0004; color: #eaf7ff;
  transition: box-shadow .18s ease, color .18s ease;
}
#studio #studio-header-credits { font-size: 12px; font-weight: 650; letter-spacing: .015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#studio .studio-credit-gem { display: grid; place-items: center; flex-shrink: 0; filter: drop-shadow(0 0 5px #37bdff55); }
#studio .studio-credit-chevron { color: #9dc6e6; margin-left: 3px; flex-shrink: 0; transition: transform .18s ease; }
#studio #studio-credit-panel[open] > summary, #studio #studio-credit-panel > summary:hover { box-shadow: inset 0 1px 0 #d9f5ff15, 0 0 16px #49bfff20; color: #fff; }
#studio #studio-credit-panel[open] .studio-credit-chevron { transform: rotate(180deg); }
#studio #studio-credit-panel > summary:focus-visible { outline: 2px solid #8eeaff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #studio #studio-credit-panel > summary, #studio .studio-credit-chevron { transition: none; } }
#studio .studio-header-popover { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 220px; padding: 14px; display: grid; gap: 10px; background: #101c2b; border: 1px solid #526a87; border-radius: 12px; box-shadow: 0 15px 35px #0009; }
#studio .studio-header-popover a { color: #9bdef9; font-size: 12px; }
#studio .studio-header-popover [hidden] { display: none; }
#studio .studio-header-popover h2 { font-size: 15px; margin: 0; }
#studio .studio-credit-popover { width: min(340px, 80vw); max-height: 65dvh; overflow-y: auto; font-size: 12px; }
#studio #studio-user-menu > summary, #studio #studio-expand {
  min-height: 38px; border: 1px solid transparent; border-radius: 13px; color: #eaf4ff;
  background: linear-gradient(145deg, #1a2b40, #0c1626 75%) padding-box, linear-gradient(130deg, #8ebceaaa, #425b7980 55%, #a298cf88) border-box;
  box-shadow: inset 0 1px 0 #e3f2ff12, 0 3px 12px #0004;
  transition: box-shadow .18s ease, color .18s ease;
}
#studio #studio-user-menu > summary { width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
#studio #studio-user-menu .studio-user-avatar { display: block; width: 38px; height: 38px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px #94cbff55; }
#studio #studio-user-menu > summary svg { width: 19px; height: 19px; filter: drop-shadow(0 1px 3px #88caff33); }
#studio #studio-expand { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 13px; font-size: 11px; font-weight: 600; letter-spacing: .015em; white-space: normal; }
#studio .studio-expand-icon { color: #a7ddff; flex-shrink: 0; }
#studio #studio-expand:hover, #studio #studio-expand[aria-pressed="true"] {
  color: #fff; box-shadow: inset 0 1px 0 #e3f2ff20, 0 0 16px #6fbaff25;
}
#studio #studio-user-menu > summary:hover .studio-user-avatar, #studio #studio-user-menu[open] .studio-user-avatar { box-shadow: 0 0 0 1px #a7dcff, 0 0 12px #6fbaff25; }
#studio #studio-user-menu > summary:focus-visible, #studio #studio-expand:focus-visible { outline: 2px solid #8eeaff; outline-offset: 3px; }
#studio #studio-user-menu .studio-header-popover { border-color: #6584a677; background: linear-gradient(145deg, #17273a, #0c1626); box-shadow: inset 0 1px 0 #e3f2ff0d, 0 15px 35px #0009; }
#studio #studio-user-menu .studio-header-popover a { padding: 9px 10px; border-radius: 7px; color: #dcecff; text-decoration: none; }
#studio #studio-user-menu .studio-header-popover a:hover, #studio #studio-user-menu .studio-header-popover a:focus-visible { background: #86c8ff12; color: #fff; }
@media (prefers-reduced-motion: reduce) { #studio #studio-user-menu > summary, #studio #studio-expand { transition: none; } }
#studio .studio-project-menu > summary { border: 0; background: transparent; padding: 5px; }
body.studio-expanded-active { overflow: hidden; }
#studio.studio-expanded .studio-dashboard { position: fixed; inset: 20px; z-index: 110; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: visible; }
#studio.studio-expanded .studio-dashboard > :not(.studio-stage) { flex-shrink: 0; }
#studio.studio-expanded .studio-stage { flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; }
#studio.studio-expanded .studio-workbench { height: 100%; min-height: 420px; }
#studio.studio-expanded .studio-library-dock { flex-shrink: 0; }
#studio.studio-expanded .studio-canvas { position: relative; top: auto; }
#studio.studio-expanded .studio-library-open .studio-stage { overflow: hidden; }
@media (max-width: 900px) {
  #studio .studio-header { gap: 8px; }
  #studio .studio-header .studio-name { order: 0; flex: 0 0 140px; max-width: none; }
  #studio .studio-header #studio-save-status { order: 0; flex: 0 0 90px; }
  #studio .studio-header-actions { margin-left: auto; flex-wrap: nowrap; }
  #studio .studio-header-brand { font-size: 11px; }
  #studio .studio-header-label { font-size: 10px; }
  #studio.studio-expanded .studio-dashboard { inset: 20px 8px; }
  #studio.studio-expanded .studio-library-dock { margin-bottom: -30px; }
  #studio.studio-expanded .studio-workbench { height: auto; min-height: 0; }
}
@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) and (max-height: 650px) {
  #studio.studio-expanded .studio-workbench { height: auto; }
}

#studio #studio-expand { width: 42px; min-width: 42px; height: 42px; padding: 0; gap: 0; }

#studio #studio-clear { display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; padding: 0; }