/* Shared look for the desktop studio pages (3D Set Builder, Story Room, Movie Maker) */
html, body { height: 100%; margin: 0; overflow: hidden; background: #05080f; }
body { display: flex; flex-direction: column; font-family: 'Crimson Pro', Georgia, serif; color: var(--text); }
input, select, textarea, button { font-family: inherit; }
.bar { display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #070a14; flex: 0 0 auto; }
#top { height: 50px; border-bottom: 1px solid var(--border); }
.ib { height: 34px; min-width: 34px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--studios-line); border-radius: 7px; background: transparent; color: var(--studios-bright);
  font: 700 0.84rem var(--btn-font); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ib:hover { background: rgba(205,187,146,0.1); }
.ib.on, .ib.primary { background: rgba(205,187,146,0.22); border-color: var(--studios); }
.ib:disabled { opacity: 0.35; cursor: default; }
.mini { height: 26px; padding: 0 8px; font-size: 0.72rem; }
.spacer { flex: 1; }
.title-in { background: transparent; border: 1px solid transparent; color: var(--studios-bright); font: 700 1.05rem var(--btn-font); letter-spacing: 0.06em; padding: 4px 8px; border-radius: 6px; width: 240px; }
.title-in:hover, .title-in:focus { border-color: var(--border); outline: none; }
select.f, input.f, textarea.f { background: #0a0e1a; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 0.92rem; }
.saved { color: var(--text-dim); font-size: 0.85rem; min-width: 52px; }
.side { background: #070a14; overflow-y: auto; }
.pane { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ph { font: 700 0.74rem var(--btn-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--studios); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.note { color: var(--text-mid); font-size: 0.92rem; line-height: 1.35; margin: 4px 0; }
.small { font-size: 0.82rem; color: var(--text-dim); }
.row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.row > label { flex: 0 0 82px; color: var(--text-mid); font-size: 0.9rem; }
.row input[type=range] { flex: 1; min-width: 0; accent-color: #cdbb92; }
.row output { flex: 0 0 54px; text-align: right; font-size: 0.85rem; color: var(--studios-bright); }
.num { width: 64px; background: #0a0e1a; border: 1px solid var(--border); border-radius: 5px; padding: 3px 4px; color: var(--studios-bright); font-size: 0.85rem; }
.sw { display: inline-flex; align-items: center; gap: 6px; color: var(--text-mid); font-size: 0.92rem; cursor: pointer; }
.sw input { accent-color: #cdbb92; width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: #0b0f1c; color: var(--studios-bright); font: 700 0.72rem var(--btn-font); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.chip.on { border-color: var(--studios); background: rgba(205,187,146,0.22); }
.tabs { display: flex; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #070a14; z-index: 2; }
.tabs button { flex: 1; padding: 10px 4px; border: 0; background: transparent; color: var(--text-mid); font: 700 0.74rem var(--btn-font); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--studios-bright); border-bottom-color: var(--studios); }
.kfb { border: 0; background: transparent; cursor: pointer; color: var(--text-dim); font-size: 0.95rem; padding: 0 2px; }
.kfb.on { color: #f6c86a; } .kfb.has { color: #cdbb92; }
.listitem { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; margin-bottom: 2px; }
.listitem:hover { background: #0d1222; }
.listitem.sel { border-color: var(--studios); background: rgba(205,187,146,0.1); }
.listitem .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--studios-bright); }
.listitem button { border: 0; background: transparent; color: var(--text-mid); cursor: pointer; }
.ov { position: fixed; inset: 0; z-index: 50; background: rgba(2,4,9,0.82); display: none; align-items: center; justify-content: center; }
.ov.open { display: flex; }
.box { background: #070a14; border: 1px solid var(--studios-line); border-radius: 14px; width: min(680px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.boxhead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.boxhead h2 { margin: 0; flex: 1; font: 700 1.05rem var(--btn-font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--studios-bright); }
.boxbody { overflow-y: auto; padding: 14px 18px; }
.exrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #111728; }
.exrow > div { flex: 1; }
.pbar { height: 8px; border-radius: 4px; background: #1a2036; overflow: hidden; margin: 12px 0; }
.pbar i { display: block; height: 100%; width: 0; background: #cdbb92; }
#toast { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 90; background: #10162a; border: 1px solid var(--studios-line); color: var(--studios-bright); padding: 7px 16px; border-radius: 999px; display: none; }
#tip { position: fixed; z-index: 100; max-width: 280px; background: #10162a; border: 1px solid var(--studios-line); color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; line-height: 1.35; pointer-events: none; display: none; }
#phone { position: fixed; inset: 0; z-index: 200; background: #05080f; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; gap: 14px; }
@media (max-width: 980px) { #phone { display: flex; } }

.side a, .note a { color: var(--studios-bright); }

/* never squash buttons: scroll the bar sideways on narrow screens */
.bar { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.bar > * { flex-shrink: 0; }
.bar > input { flex-shrink: 1; min-width: 100px; }