/* Studio's own quiet room: layered materials, warm light and a luminous frame. */
.page-ai-studio { background: radial-gradient(ellipse at 3% 35%, #b66e3833, transparent 36%), radial-gradient(ellipse at 98% 28%, #70519b40, transparent 36%), linear-gradient(160deg, #161c29, #0b111b 65%, #221c20); }
#studio { --ink: #edf3f7; --muted: #afbdcc; --line: #334359; --studio-accent: #86dfff; --studio-soft: #18364b; color: var(--ink); color-scheme: dark; }
.studio-hero .eyebrow { color: #c1d1e3; }
.studio-hero h1 { color: #f2eee5; }
.studio-hero p { color: #b7c3d1; }
.studio-dashboard {
  --studio-frame-light: linear-gradient(135deg, #fff3dd 0%, #ffd09b 7%, #ffb5e6 15%, #a9ebff 28%, #36bdff 43%, #ad87ff 61%, #ffbce8 77%, #ffe1b6 89%, #fdb3ed 100%);
  border: 3px solid transparent;
  background: linear-gradient(145deg, #101b29, #0b1420 65%, #17202c) padding-box, var(--studio-frame-light) border-box;
  box-shadow: 0 30px 80px #000a, 0 0 3px 1px #e3f1ffc7, 0 0 12px #87bfff60,
    -7px -3px 22px #ffbb8440, -9px 8px 30px #32bfff35, 9px 10px 28px #bc77ff40,
    inset 0 0 0 1px #050b12, inset 0 2px 3px #d9ebff26;
}
.studio-dashboard::before {
  content: ''; position: absolute; inset: -5px; z-index: -1; padding: 5px; border-radius: inherit;
  background: var(--studio-frame-light); opacity: .12; filter: blur(7px); pointer-events: none;
  transition: opacity .6s ease;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}
.studio-dashboard::after {
  content: ''; position: absolute; inset: 1px; border-radius: inherit; border: 1px solid #c7e4ff26;
  box-shadow: inset 0 1px 1px #f6e8d955, inset 1px 0 2px #9cdcff22, 0 0 0 1px #040a1399;
  pointer-events: none;
}
/* Existing process state controls breathing; clicks create one brief local pulse. */
.studio-dashboard:has(#studio-save-status[data-state="saving"])::before {
  animation: studio-frame-breathe 2.8s ease-in-out infinite;
}
.studio-dashboard:has(#studio-save-status[data-state="loading"], [data-studio-busy="1"], [aria-busy="true"], .studio-job[data-state="queued"], .studio-job[data-state="processing"])::before {
  animation: studio-frame-breathe 2s ease-in-out infinite;
}
.studio-dashboard:has(#studio-save-status[data-state="error"])::before {
  background: linear-gradient(135deg, #f2d6a1, #bb9cef 45%, #e5b580); opacity: .5;
}
@keyframes studio-frame-breathe { 0%, 100% { opacity: .08; } 50% { opacity: 1; } }
.studio-dashboard[data-click-pulse]::before { opacity: 1; }
.studio-dashboard[data-click-pulse="a"]::after { animation: studio-frame-click-a .8s ease-out both; }
.studio-dashboard[data-click-pulse="b"]::after { animation: studio-frame-click-b .8s ease-out both; }
@keyframes studio-frame-click-a {
  0%, 15% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 8px #75caff); }
  100% { opacity: .85; filter: brightness(1) drop-shadow(0 0 3px #91d9ff66); }
}
@keyframes studio-frame-click-b {
  0%, 15% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 8px #75caff); }
  100% { opacity: .85; filter: brightness(1) drop-shadow(0 0 3px #91d9ff66); }
}
.studio-dashboard[data-continuous-frame] { background: linear-gradient(145deg, #101b29, #0b1420 65%, #17202c); box-shadow: 0 30px 80px #000a; }
.studio-dashboard[data-continuous-frame]::before, .studio-dashboard[data-continuous-frame]::after { inset: -3px; padding: 0; border: 0; border-radius: 0; background: var(--studio-continuous-outline) center / 100% 100% no-repeat; mask: none; box-shadow: none; z-index: 3; }
.studio-dashboard[data-continuous-frame]::before { filter: blur(6px); }
.studio-dashboard[data-continuous-frame]::after { opacity: .85; filter: drop-shadow(0 0 3px #91d9ff66); }
#studio .studio-dashboard[data-continuous-frame] .studio-mode-switch::before { display: none; }
#studio .studio-dashboard[data-continuous-frame] .studio-library-dock { background: transparent; border-radius: 0; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .studio-dashboard::before, .studio-dashboard::after { animation: none !important; transition: none; }
  .studio-dashboard:has(#studio-save-status[data-state="saving"], #studio-save-status[data-state="loading"], [data-studio-busy="1"], [aria-busy="true"], .studio-job[data-state="queued"], .studio-job[data-state="processing"])::before { opacity: .7; }
}
.studio-toolbar { border-color: #344559; }
.studio-name input { color: #f2eee5; }
#studio .studio-text-button { color: #9bdef9; text-decoration-color: #9bdef970; }
#studio .button-outline { background: #142233; border-color: #687d92; color: #edf3f7; }
#studio .button-blue { background: linear-gradient(115deg, #725af2, #1374d1 55%, #21b7d1); border-color: #76cefa; color: #fff; box-shadow: 0 3px 15px #248dc925; }
#studio .button-blue:hover { filter: brightness(1.12); }
#studio .studio-mode-switch { flex-direction: column; justify-content: center; gap: 7px; padding: 12px 0 15px; }
#studio .studio-mode-label { display: block; margin: 0; color: #afc5db; font-size: 10px; font-weight: 500; letter-spacing: .12em; }
#studio .studio-mode-toggle { display: flex; align-items: stretch; gap: 4px; max-width: 100%; padding: 4px; border: 1px solid #6486ae66; border-radius: 14px; background: linear-gradient(160deg, #152338, #0b1524); box-shadow: inset 0 1px 0 #d3e9ff12, 0 4px 14px #0003; }
#studio .studio-mode-toggle button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 38px; padding: 8px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #adbed3; font-size: 11px; font-weight: 500; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
#studio .studio-mode-toggle button svg { flex-shrink: 0; }
#studio .studio-mode-toggle button:hover { color: #f0f7ff; background: #ffffff08; }
#studio .studio-mode-toggle button[aria-pressed="true"] { background: linear-gradient(135deg, #284866, #20334f); border-color: #81cfff77; color: #f2faff; box-shadow: inset 0 1px 0 #d3efff26, 0 2px 8px #0004; }
#studio .studio-mode-toggle button:focus-visible { outline: 2px solid #8eeaff; outline-offset: 2px; }
@media (max-width: 480px) { #studio .studio-mode-toggle button { padding: 8px 10px; font-size: 10px; } }
@media (orientation: landscape) and (max-height: 650px) {
  #studio .studio-mode-switch { flex-direction: row; gap: 12px; padding: 6px 0; }
  #studio .studio-mode-toggle button { min-height: 32px; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) { #studio .studio-mode-toggle button { transition: none; } }
#studio .studio-card, #studio .studio-engine, #studio .studio-estimate { background: linear-gradient(155deg, #162332, #101b28); border-color: #34465b; box-shadow: inset 0 1px 0 #b1d6ff0c; }
/* Inner panels share the outer frame's material with a quieter luminous seam. */
#studio .studio-config-panel > .studio-card, #studio .studio-config-panel > .studio-engine,
#studio .studio-canvas, #studio .studio-estimate { border-color: #54738b66; box-shadow: inset 0 1px 0 #d9edff14, inset 0 -1px 0 #050c1655, 0 5px 14px #0002; }
#studio .studio-config-panel > .studio-card, #studio .studio-config-panel > .studio-engine { position: relative; }
#studio .studio-estimate { position: relative; }
@media (orientation: landscape) and (max-height: 650px) {
  #studio.studio-expanded .studio-mobile-jump { position: static; }
}
#studio .studio-config-panel > .studio-card::before, #studio .studio-config-panel > .studio-engine::before,
#studio .studio-canvas::before, #studio .studio-estimate::before {
  content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; z-index: 4; pointer-events: none;
  background: linear-gradient(135deg, #b7e8ff88, #759ab744 28%, #657b9b22 52%, #aa99d455 80%, #ecc8dd66);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  opacity: .65; transition: opacity .25s ease;
}
#studio .studio-config-panel > .studio-card:focus-within::before, #studio .studio-config-panel > .studio-engine:focus-within::before,
#studio .studio-canvas:focus-within::before, #studio .studio-estimate:focus-within::before { opacity: 1; }
#studio .studio-config-panel > .studio-card:hover::before, #studio .studio-config-panel > .studio-engine:hover::before,
#studio .studio-canvas:hover::before, #studio .studio-estimate:hover::before { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
  #studio .studio-config-panel > .studio-card::before, #studio .studio-config-panel > .studio-engine::before,
  #studio .studio-canvas::before, #studio .studio-estimate::before { transition: none; }
}
.studio-controls { scrollbar-color: #49627b #101b28; }
.studio-summary-content { scrollbar-color: #49627b #101b28; }
#studio .studio-section-title > span { background: linear-gradient(145deg, #355b81, #1c324d); color: #d1eeff; border: 1px solid #526a86; border-radius: 50%; }
#studio .studio-card input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#studio .studio-engine input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#studio select, #studio textarea, #studio .studio-engine select { background: #0e1926; border-color: #42566e; color: #edf3f7; }
#studio .studio-kicker { color: #a5dafa; }
#studio .studio-engine-tabs { background: #102030; border: 1px solid #3d5269; }
#studio .studio-engine-tabs button { color: #c4d3e0; }
#studio .studio-engine-tabs button[aria-pressed="true"] { background: #29465f; color: #e6f7ff; }
#studio input::placeholder, #studio textarea::placeholder { color: #a3b1c1; opacity: 1; }
#studio option { background: #101b28; color: #edf3f7; }
#studio input:disabled, #studio select:disabled { color: #a4b0bf; }
#studio .studio-size-grid input:disabled { background: #182331 !important; }
#studio .studio-matrix-color { background: #102031; border-color: #354a60; }
#studio .studio-color-dot { border-color: #25354a; box-shadow: 0 0 0 1px #75899b; }
#studio .studio-color input:checked + .studio-color-dot { box-shadow: 0 0 0 2px #8ee5ff, 0 0 10px #69c5e740; }
#studio .studio-color:has(input:checked) .studio-color-name { color: #a9e9ff; }
#studio .studio-location { background: #101e2d; border-color: #3c5067; }
#studio .studio-location:has(input:checked) { background: #193d53; border-color: #7bd6f1; color: #d0f4ff; }
#studio .studio-placement-rule { margin: 8px 0 0; font-size: 10px; line-height: 1.5; color: #bdcfdd; }
#studio .studio-style { background: #152638; border-color: #45576b; color: #eaf1f7; }
#studio .studio-style > span:last-child { color: #eaf1f7; }
#studio .studio-inspiration .studio-section-title { align-items: center; gap: 8px; margin-bottom: 10px; }
#studio .studio-inspiration h2 { font-size: 13px; }
#studio #studio-styles-toggle { margin-left: auto; font-size: 10px !important; }
#studio .studio-style-grid { --style-row-height: 104px; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72px; grid-auto-rows: var(--style-row-height); gap: 5px; padding: 4px; overflow-x: auto; overflow-y: hidden; max-width: 100%; overscroll-behavior: contain; }
#studio .studio-style-grid[data-expanded="true"] { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); grid-auto-columns: auto; max-height: calc(3 * var(--style-row-height) + 10px + 8px); overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
#studio .studio-style { text-align: center; border-radius: 7px; }
#studio .studio-style img { display: block; width: 100%; height: 72px; object-fit: cover; }
#studio .studio-style-art { height: 72px; min-height: 0; overflow: hidden; font-size: 16px; }
#studio .studio-style > span:last-child { padding: 5px 2px; font-size: 9px; min-height: 28px; overflow-wrap: anywhere; }
#studio .studio-style[aria-pressed="true"] { border-color: #93e8ff; box-shadow: 0 0 10px #7edcff65; outline-offset: 0; }
#studio .studio-product-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#studio .studio-product-card { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 6px; background: #102030; color: #eaf1f7; border: 1px solid #40536b; border-radius: 8px; cursor: pointer; }
#studio .studio-product-card img { display: block; width: 100%; height: 62px; object-fit: contain; border-radius: 5px; }
#studio .studio-product-card strong { font-size: 11px; }
#studio .studio-product-card > span { font-size: 9px; overflow-wrap: anywhere; }
#studio .studio-product-card[aria-pressed="true"] { border-color: #8bdcff; background: #183b56; box-shadow: inset 0 0 0 1px #647ff7, 0 0 12px #52bcff30; }
#studio .studio-all-products > summary, #studio .studio-quantity-panel > summary { padding: 12px 0; font-size: 11px; cursor: pointer; color: #bce9ff; }
#studio .studio-color-heading h3 { margin: 8px 0; font-size: 12px; }
#studio .studio-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
#studio .studio-color-groups { display: grid; gap: 12px; }
#studio .studio-color-group { min-width: 0; border: 1px solid #40536b; border-radius: 10px; padding: 10px; background: #10203066; }
#studio .studio-color-group.is-selected { border-color: #88dcf5; background: #183b5666; }
#studio .studio-color-group h4 { margin: 0 0 5px; font-size: 12px; color: #edf9ff; }
#studio .studio-color-group > p { margin: 0 0 9px; font-size: 10px; line-height: 1.5; color: #bce9ff; }
#studio .studio-color-empty { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; color: #bce9ff; }
#studio .studio-color-group #studio-colors-toggle { width: 100%; }
#studio .studio-color { border: 1px solid #40536b; background: #102030; border-radius: 7px; padding: 9px 3px; min-height: 65px; }
#studio .studio-color:has(input:checked) { background: #1a3b51; border-color: #88dcf5; box-shadow: 0 0 8px #69ceff26; }
#studio .studio-color-dot { width: 23px; height: 23px; border-radius: 5px; border-width: 2px; }
#studio #studio-colors-toggle { border: 1px solid #40536b; background: #102030; border-radius: 7px; padding: 8px 3px; font-size: 10px !important; text-decoration: none; }
#studio .studio-location-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#studio .studio-location { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; position: relative; text-align: center; font-size: 9px; }
#studio .studio-location svg { width: 38px; height: 40px; }
#studio .studio-placement-photo { display: block; position: relative; width: 50px; height: 62px; max-width: 100%; }
#studio .studio-placement-photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 3px #d6edff30); }
#studio .studio-placement-mark { position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); border: 1px solid #c2f0ff; border-radius: 1px; background: #54ceff66; box-shadow: 0 0 4px #42caff66; }
#studio .studio-placement-mark.is-large { width: 15px; height: 19px; }
#studio .studio-location:has(input:checked) .studio-placement-mark { background: #69d5ffb3; border-color: #fff; }
#studio .studio-location input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#studio .studio-location:has(input:focus-visible) { outline: 3px solid #ffc982; outline-offset: 2px; }
#studio .studio-location:has(input:checked) { box-shadow: inset 0 0 0 1px #647ff7, 0 0 10px #59c5ff35; }
#studio #studio-placement-count { margin-left: auto; font-size: 10px; color: #b8cddd; }
#studio .studio-references .studio-section-title { align-items: center; margin-bottom: 8px; gap: 7px; }
#studio #studio-reference-count { margin-left: auto; color: #bdccdb; font-size: 10px; }
#studio .studio-reference-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(70px, 1.25fr); gap: 6px; align-items: start; }
#studio .studio-reference-grid { display: contents; }
#studio .studio-reference { display: block; padding: 3px; height: 52px; border-radius: 6px; background: #102030; border-color: #43566d; }
#studio .studio-reference img { display: block; height: 100%; width: 100%; aspect-ratio: auto; object-fit: contain; background: #102030; }
#studio .studio-references .studio-upload { grid-column: 4; margin: 0; height: 52px; min-height: 52px; padding: 5px; gap: 4px; border-radius: 6px; font-size: 10px; }
#studio .studio-references .studio-upload:has(input:disabled) { opacity: .55; cursor: default; }
#studio .studio-references .studio-upload > span:last-of-type { font-size: 10px; }
#studio .studio-reference-management { grid-column: 1 / -1; order: 1; font-size: 11px; }
#studio .studio-reference-management summary { padding: 8px 0; cursor: pointer; color: #b6e4fa; }
#studio .studio-reference-manage-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid var(--line); }
#studio .studio-reference-manage-row > span { min-width: 0; overflow-wrap: anywhere; }
#studio .studio-reference-manage-row small { display: block; color: var(--muted); }
#studio .studio-controls .studio-section-title h2 { font-size: 13px; }
#studio .studio-upload, #studio .studio-pending-file { background: #16293a; border-color: #617e98; }
#studio .studio-canvas { background: radial-gradient(ellipse at 50% 35%, #27384a, #101b28 80%); border-color: #415366; }
.studio-canvas-top { color: #b9cedc; }
.studio-garment { border-radius: 24px; background: radial-gradient(ellipse, #d4d4c7 5%, #a5b2ac 70%, #879993); box-shadow: inset 0 0 40px #33483d2b, 0 14px 26px #0004; }
.studio-garment img { mix-blend-mode: multiply; }
#studio .studio-zone { background: #122a3fe8; border-color: #b5e7ff; color: #edf9ff; }
#studio .studio-view-switch button { color: #bdcfdd; }
#studio .studio-view-switch button[aria-pressed="true"] { background: #253d52; border-color: #82c4e1; color: #fff; }
#studio .studio-preview-badge, #studio #studio-piece-count { background: #213b52; color: #d7f2ff; }
#studio .studio-estimate-heading, #studio .studio-summary-actions { background: transparent; }
#studio .studio-promo { background: linear-gradient(125deg, #342c19, #26293a); border: 1px solid #d8aa60; color: #f4dfb2; box-shadow: 0 0 14px #d5993420; }
#studio .studio-promo b { color: #ffda8c; }
#studio .studio-warning { background: #352b22; border: 1px solid #8c6d48; color: #f5d4a2; }
#studio .studio-price-total strong { color: #f6f1e6; }
#studio .studio-credit-pill { background: #18364f; color: #b5e9ff; border-color: #42627d; }
#studio .studio-library-card, #studio .studio-job { background: #172638; border-color: #44566f; color: #eaf1f7; }
#studio .studio-dialog { background: #132132; color: #edf3f7; border-color: #687d94; }
#studio .studio-dialog::backdrop { background: #040911b3; }
#studio .studio-recovery { background: #352d20; color: #f5dfb3; border-color: #9a7742; }
#studio #studio-save-status[data-state="error"] { color: #ffb29f; }
#studio .studio-account-note { color: #b4c4d4; }
#studio .studio-account-note a { color: #a2e3ff; }
.studio-opening-ring { background: conic-gradient(#8ae6ff var(--progress), #314153 0); box-shadow: 0 0 24px #87dfff18; }
.studio-opening-ring::before { background: #101b28; }
.studio-opening-ring span { color: #c3f2ff; }
#studio button:focus-visible, #studio input:focus-visible, #studio select:focus-visible, #studio textarea:focus-visible, #studio summary:focus-visible { outline: 3px solid #ffc982; outline-offset: 3px; }
@media (max-width: 900px) {
  .studio-config-panel > summary { background: #162637; color: #eaf1f7; border-color: #485c72; }
}
@media (prefers-contrast: more) {
  #studio { --muted: #d2dfeb; --line: #8297ae; }
  .studio-dashboard { box-shadow: none; }
}