/* Local studio utilities: mineral panels, etched dividers, restrained warm metal. */
.studio-tools-backdrop[hidden], .studio-tools-backdrop [hidden] { display: none !important; }
.studio-tools-backdrop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; background: #030609bd; backdrop-filter: blur(18px) saturate(.6); -webkit-backdrop-filter: blur(18px) saturate(.6); }
.studio-tools-dialog { --studio-text: #e9eef0; --studio-muted: #a0adb5; --studio-gold: #d5c3a4; display: flex; flex-direction: column; width: min(100%, 800px); max-height: min(90dvh, 860px); padding: 30px; border: 1px solid #53606a; border-radius: 16px; background: linear-gradient(135deg, #1c252c 0%, #11181e 45%, #0c1217 100%); box-shadow: inset 0 1px #ffffff14, 0 35px 100px #000b; color: var(--studio-text); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #53606a transparent; }
.studio-tools-dialog.is-preferences { width: min(100%, 630px); }
.studio-tools-dialog button, .studio-tools-dialog input, .studio-tools-dialog textarea, .studio-tools-dialog select { font: inherit; }
.studio-tools-dialog button { cursor: pointer; }
.studio-tools-dialog .ui-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.studio-tools-dialog :is(button, input, textarea, select):focus-visible { outline: 2px solid var(--studio-gold); outline-offset: 3px; }
.studio-tools-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.studio-tools-eyebrow { margin: 0 0 10px; color: var(--studio-gold); font-size: 9px; font-weight: 600; letter-spacing: .18em; line-height: 1.5; }
.studio-tools-header h2 { margin: 0; color: #f1f4f5; font-size: 28px; font-weight: 550; letter-spacing: -.04em; line-height: 1.3; }
.studio-tools-subtitle { margin: 10px 0 0; color: var(--studio-muted); font-size: 12px; line-height: 1.7; }
.studio-tools-close { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #68798350; border-radius: 50%; color: #aab7bf; background: #ffffff03; transition: border-color .18s, color .18s, background .18s; }
.studio-tools-close:hover { color: #fff; border-color: #98a6af; background: #ffffff08; }
.studio-library-toolbar { display: flex; gap: 10px; align-items: stretch; }
.studio-search-wrap { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #4a5964; border-radius: 7px; background: #090f14; color: #9babb6; }
.studio-search-wrap:focus-within { border-color: var(--studio-gold); box-shadow: 0 0 0 3px #d5c3a40c; }
.studio-search-wrap input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 0; border: 0; outline: none !important; background: transparent; color: #ecf1f4; font-size: 12px; }
.studio-search-wrap input::placeholder { color: #8c9ba6; }
.studio-tools-button { display: inline-flex; justify-content: center; align-items: center; flex: none; gap: 7px; min-height: 44px; padding: 9px 14px; border: 1px solid #6d7b845c; border-radius: 7px; background: #ffffff05; color: #dce5ea; font-size: 12px !important; transition: border-color .18s, background .18s; }
.studio-tools-button:hover { border-color: #9dabb3; background: #ffffff0c; }
.studio-tools-button.studio-tools-primary { border-color: #a5977e82; background: #c5b18a12; color: #e2d4bc; }
.studio-tools-button.studio-tools-primary:hover { border-color: #d5c3a4; background: #c5b18a20; }
.studio-library-filters { display: flex; align-items: center; gap: 23px; margin: 13px 0 20px; border-bottom: 1px solid #71808b30; }
.studio-library-filters button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: #9aabb6; font-size: 11px; white-space: nowrap; }
.studio-library-filters button:hover { color: #f0f3f4; }
.studio-library-filters button[aria-pressed="true"] { border-bottom-color: var(--studio-gold); color: #e1d2b8; }
.studio-library-filters .ui-icon { width: 13px; height: 13px; }
.studio-template-count { margin-left: auto; color: #8596a2; font-size: 10px; white-space: nowrap; }
.studio-library-categories { display: flex; flex-wrap: wrap; gap: 7px; margin: -5px 0 12px; }
.studio-library-categories button { min-height: 34px; padding: 7px 11px; border: 1px solid #75828b35; border-radius: 6px; background: #060c102b; color: var(--studio-muted); font-size: 11px; line-height: 1.5; transition: border-color .18s, color .18s, background .18s; }
.studio-library-categories button:hover { color: var(--studio-text); border-color: #9babb467; background: #ffffff04; }
.studio-library-categories button[aria-pressed="true"] { color: var(--studio-gold); border-color: #bca78485; background: #c5b18a0e; box-shadow: inset 0 1px #e8d7b90b; }
.studio-library-hint { margin: 0 0 18px; color: var(--studio-muted); font-size: 10px; line-height: 1.8; }
.studio-empty-reset { margin-top: 16px; }
.studio-template-category-label { margin-bottom: 12px; }
.studio-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.studio-template-card { display: flex; flex-direction: column; min-width: 0; padding: 19px 19px 15px; border: 1px solid #6575813b; border-radius: 10px; background: linear-gradient(145deg, #ffffff04, #ffffff00 55%); box-shadow: inset 0 1px #ffffff06; transition: border-color .2s, background .2s; }
.studio-template-card:hover { border-color: #8596a469; background-color: #ffffff02; }
.studio-template-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.studio-template-glyph { display: grid; place-items: center; width: 29px; height: 29px; color: #d2dfe7; }
.studio-template-glyph .ui-icon { width: 23px; height: 23px; stroke-width: 1.1; }
.studio-template-number { color: #8698a7; font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; }
.studio-template-favorite { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -5px -4px auto; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: #899aa8; }
.studio-template-favorite:hover { border-color: #8195a440; color: #e7d9c1; background: #ffffff05; }
.studio-template-favorite[aria-pressed="true"] { color: var(--studio-gold); }
.studio-template-favorite[aria-pressed="true"] .ui-icon { fill: #c7b28a38; }
.studio-template-card h3 { margin: 0 0 10px; color: #e9eff3; font-size: 14px; font-weight: 550; letter-spacing: -.01em; line-height: 1.5; overflow-wrap: anywhere; }
.studio-template-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 0 0 18px; overflow: hidden; color: #9baab5; font-size: 11px; line-height: 1.85; overflow-wrap: anywhere; }
.studio-template-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #778a9824; }
.studio-template-tag { color: #90a1ae; font-size: 10px; }
.studio-template-fill { min-height: 30px; padding: 2px 0 2px 8px; border: 0; background: transparent; color: #dbccb2; font-size: 11px; letter-spacing: .025em; }
.studio-template-fill:hover { color: #f5e8cf; }
.studio-library-empty { grid-column: 1 / -1; padding: 48px 14px; text-align: center; }
.studio-library-empty strong { color: #dbe4ea; font-size: 14px; font-weight: 500; }
.studio-library-empty p { margin: 12px 0 0; color: #92a2ae; font-size: 12px; line-height: 1.8; }
.studio-tools-footer { display: flex; flex: none; align-items: flex-start; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #66778430; color: #8b9ca9; font-size: 10px; line-height: 1.8; }
.studio-tools-footer .ui-icon { width: 13px; height: 16px; margin-top: 1px; }
.studio-storage-status { margin: 18px 0 0; padding: 10px 12px; border: 1px solid #b9956659; border-radius: 6px; background: #b995660a; color: #e2caa5; font-size: 11px; line-height: 1.7; }
.studio-template-form { margin-top: 15px; padding: 19px; border: 1px solid #a08e6b5c; border-radius: 9px; background: #090e1380; }
.studio-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.studio-form-heading h3 { margin: 0; color: #e0d2bc; font-size: 13px; font-weight: 500; }
.studio-cancel-template { min-height: 30px; padding: 3px 0 3px 8px; border: 0; color: #9babb5; background: none; font-size: 11px !important; }
.studio-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; margin-bottom: 12px; }
.studio-template-form label { display: flex; flex-direction: column; gap: 8px; color: #a7b5bf; font-size: 11px; }
.studio-template-form :is(input, textarea, select) { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #52636f88; border-radius: 5px; outline: none; background: #0a1117; color: #e3eaf0; font-size: 12px; line-height: 1.7; }
.studio-template-form :is(input, textarea, select):focus { border-color: #c5b18a; }
.studio-template-form textarea { min-height: 120px; max-height: 240px; resize: vertical; }
.studio-template-form :is(input, textarea)::placeholder { color: #8294a1; }
.studio-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.studio-template-counter { color: #899ca9; font-size: 10px; }
.studio-custom-actions { display: flex; align-items: center; gap: 12px; min-height: 34px; padding-top: 9px; margin-top: 9px; border-top: 1px solid #65778524; font-size: 10px; color: #8c9fab; }
.studio-custom-actions > span { margin-right: auto; }
.studio-custom-actions button { min-height: 30px; padding: 2px; border: 0; background: none; font-size: 10px; }
.studio-template-delete { color: #cba89d; }
.studio-template-delete:hover { color: #f1c7bc; }
.studio-template-cancel-delete { color: #a8b7c1; }
.studio-setting { padding: 22px 0; border-top: 1px solid #74869530; }
.studio-setting:first-child { padding-top: 0; border-top: 0; }
.studio-setting-label { display: flex; align-items: flex-start; gap: 15px; }
.studio-setting-index { min-width: 17px; margin-top: 3px; color: #ad9d83; font-family: ui-monospace, monospace; font-size: 10px; }
.studio-setting h3 { margin: 0; color: #e4ebee; font-size: 14px; font-weight: 500; line-height: 1.5; }
.studio-setting p { margin: 7px 0 0; color: #99a9b4; font-size: 11px; line-height: 1.8; }
.studio-scene-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 19px; }
.studio-scene-options button { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 7px 7px 12px; border: 1px solid #65798650; border-radius: 8px; background: #ffffff02; color: #c3d0d8; text-align: left; }
.studio-scene-options button:hover { border-color: #91a2ad; }
.studio-scene-options button[aria-pressed="true"] { border-color: #c4b18d9c; box-shadow: inset 0 0 0 1px #c4b18d1a; background: #bcac8e09; }
.studio-scene-options strong { padding: 0 4px; color: #e0e7eb; font-size: 12px; font-weight: 500; }
.studio-scene-options small { padding: 0 4px; color: #98a9b5; font-size: 10px; }
.studio-scene-sample { position: relative; display: block; width: 100%; height: 57px; margin-bottom: 4px; overflow: hidden; border: 1px solid #a1b3c014; border-radius: 4px; background: linear-gradient(115deg, #070d12 5%, #172630 72%, #708896 73%, #263941 74%, #080e13 90%); }
.studio-scene-sample::after { content: ''; position: absolute; inset: auto 0 12px; height: 1px; background: linear-gradient(100deg, #bea7840a, #dbc6a5a3); transform: rotate(-6deg); }
.studio-scene-sample.scene-balanced { filter: brightness(.78); }
.studio-scene-sample.scene-quiet { filter: brightness(.5); }
.studio-switch-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.studio-switch { position: relative; flex: none; width: 42px; height: 24px; padding: 3px; border: 1px solid #71849170; border-radius: 30px; background: #070e14; transition: border-color .2s, background .2s; }
.studio-switch > span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #7d919f; box-shadow: 0 1px 4px #0007; transition: transform .2s, background .2s; }
.studio-switch[aria-checked="true"] { border-color: #b6a483; background: #8d795344; }
.studio-switch[aria-checked="true"] > span { transform: translateX(17px); background: #e0d0b4; }
@media (max-width: 600px) {
  .studio-tools-backdrop { padding: 12px; }
  .studio-tools-dialog { max-height: calc(100dvh - 24px); padding: 23px 18px 18px; border-radius: 12px; }
  .studio-tools-header { gap: 15px; margin-bottom: 22px; }
  .studio-tools-header h2 { font-size: 25px; }
  .studio-tools-subtitle { font-size: 11px; }
  .studio-tools-eyebrow { font-size: 8px; }
  .studio-library-toolbar { gap: 8px; }
  .studio-tools-button { padding: 9px 10px; font-size: 11px !important; }
  .studio-search-wrap { padding-inline: 10px; gap: 7px; }
  .studio-search-wrap input { font-size: 12px; }
  .studio-search-wrap > .ui-icon { display: none; }
  .studio-library-filters { flex-wrap: wrap; gap: 0 18px; margin-bottom: 15px; }
  .studio-template-count { font-size: 9px; }
  .studio-library-categories { gap: 6px; }
  .studio-library-categories button { min-height: 36px; padding: 7px 10px; }
  .studio-template-grid { grid-template-columns: 1fr; gap: 11px; }
  .studio-template-card { padding: 17px 17px 12px; }
  .studio-template-head { margin-bottom: 11px; }
  .studio-template-description { -webkit-line-clamp: 2; }
  .studio-form-row { grid-template-columns: minmax(0, 1fr) 114px; gap: 9px; }
  .studio-template-form { padding: 15px; }
  .studio-template-form :is(input, textarea, select) { font-size: 14px; }
  .studio-scene-options { gap: 7px; }
  .studio-scene-options button { padding: 5px 5px 10px; }
  .studio-scene-options small { padding-inline: 2px; font-size: 9px; }
  .studio-setting-label { gap: 10px; }
  .studio-setting h3 { font-size: 13px; }
  .studio-setting p { font-size: 10px; }
  .studio-switch-setting { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .studio-tools-backdrop *, .studio-tools-backdrop *::before, .studio-tools-backdrop *::after { transition: none !important; animation: none !important; } }
body[data-reduced-motion="true"] .studio-tools-backdrop * { transition: none !important; animation: none !important; }