/* V4.1: visual translation shared with the public homepage. Functional selectors stay in styles.css. */
:root {
  --pf-accent: #2997ff;
  --pf-accent-strong: #76bdff;
  --pf-accent-soft: rgb(41 151 255 / 15%);
  --pf-page: #050607;
  --pf-surface: rgb(13 16 20 / 94%);
  --pf-surface-subtle: rgb(19 24 30 / 96%);
  --pf-surface-raised: #1b222a;
  --pf-canvas: #070a0e;
  --pf-border: rgb(255 255 255 / 10%);
  --pf-border-strong: rgb(255 255 255 / 18%);
  --pf-text: #f4f5f3;
  --pf-text-muted: #a8adb4;
  --pf-text-subtle: #737b85;
  --pf-selection: #f0b35a;
  --pf-shadow-panel: 0 22px 54px rgb(0 0 0 / 24%);
}

.studio-page { position: relative; min-height: 100vh; background: #050607; }
.studio-ambient { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: .085; filter: grayscale(.78) saturate(.38) contrast(1.2) brightness(.42) blur(1px); transform: scale(1.04); }
.studio-page::after { content: ''; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(circle at 54% 12%, rgb(69 132 194 / 16%), transparent 36%), linear-gradient(180deg, rgb(3 4 5 / 48%), rgb(3 4 5 / 88%)); }
.studio-page .app-shell, .studio-page .local-server-warning { position: relative; z-index: 1; }
.studio-page .app-shell { background: transparent; }

.studio-brand { min-width: max-content; display: flex; align-items: center; gap: 10px; color: var(--pf-text); text-decoration: none; }
.studio-brand > span { width: 74px; height: 36px; overflow: hidden; flex: 0 0 auto; background: transparent; }
.studio-brand img { width: 100%; height: 100%; display: block; object-fit: contain; }
.studio-brand .eyebrow { margin-bottom: 2px; color: var(--pf-accent-strong); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.studio-brand h1 { font-size: 18px; font-weight: 600; }
.studio-home-link { min-height: 40px; display: inline-grid; place-items: center; padding: 0 12px; border: 1px solid var(--pf-border); border-radius: 6px; background: var(--pf-surface-raised); color: var(--pf-text-muted); font-size: 12px; font-weight: 650; text-decoration: none; }
.studio-home-link:hover, .studio-home-link:focus-visible { border-color: var(--pf-accent); background: var(--pf-accent-soft); color: var(--pf-text); }

.studio-page .topbar { border-color: var(--pf-border); background: rgb(5 6 7 / 92%); box-shadow: 0 16px 44px rgb(0 0 0 / 18%); backdrop-filter: blur(18px); }
.studio-page .mode-tabs { border-color: var(--pf-border); border-radius: 10px; background: rgb(14 17 21 / 90%); }
.studio-page .mode-tab { color: var(--pf-text-muted); }
.studio-page .mode-tab.active { border-color: rgb(118 189 255 / 32%); background: linear-gradient(180deg, rgb(118 189 255 / 13%), rgb(41 151 255 / 7%)); box-shadow: inset 0 -2px 0 var(--pf-accent); color: var(--pf-text); }
.studio-page .workflow-bar { border-color: var(--pf-border); background: rgb(8 10 13 / 82%); backdrop-filter: blur(10px); }
.studio-page .panel, .studio-page .canvas-panel { border-color: var(--pf-border); background: linear-gradient(150deg, rgb(255 255 255 / 3%), transparent 34%), var(--pf-surface); box-shadow: var(--pf-shadow-panel); backdrop-filter: blur(16px); }
.studio-page .panel-kicker, .studio-page .eyebrow { color: var(--pf-accent-strong); }
.studio-page .canvas-panel { border-color: rgb(69 137 201 / 26%); background: linear-gradient(145deg, rgb(84 145 205 / 7%), transparent 32%), rgb(10 13 17 / 97%); }
.studio-page .canvas-stage {
  border-color: rgb(111 151 188 / 20%);
  background:
    linear-gradient(rgb(118 189 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(118 189 255 / 6%) 1px, transparent 1px),
    radial-gradient(circle at 52% 38%, #2f4051 0%, #141b23 42%, #06080b 78%);
  background-size: 36px 36px, 36px 36px, auto;
  box-shadow: inset 0 0 90px rgb(0 0 0 / 38%);
}
.studio-page .canvas-view { box-shadow: 0 22px 50px rgb(0 0 0 / 42%), 0 0 0 1px rgb(255 255 255 / 6%); }
.studio-page .empty-state { color: #bdc5cd; }
.studio-page .canvas-grid { background-image: linear-gradient(rgb(41 151 255 / 22%) 1px, transparent 1px), linear-gradient(90deg, rgb(41 151 255 / 22%) 1px, transparent 1px); }
.studio-page button { border-color: var(--pf-border); background: linear-gradient(180deg, rgb(255 255 255 / 5%), transparent), var(--pf-surface-raised); }
.studio-page button:hover:not(:disabled) { border-color: rgb(118 189 255 / 56%); background: var(--pf-accent-soft); }
.studio-page input, .studio-page select, .studio-page textarea { border-color: var(--pf-border); background: #161c23; }
.studio-page input[type="range"] { accent-color: var(--pf-accent); }
.studio-page .upload-zone { border-color: rgb(118 189 255 / 24%); background: linear-gradient(145deg, rgb(41 151 255 / 6%), transparent 56%); }
.studio-page .privacy-note,
.studio-page .reference-upload:not([hidden]),
.studio-page .field-editor,
.studio-page .variant-editor,
.studio-page .uv-report,
.studio-page .manufacturing-controls,
.studio-page .field-layer,
.studio-page .field-mapping,
.studio-page .library-card { border-color: var(--pf-border); background: linear-gradient(145deg, rgb(70 130 186 / 5%), transparent 62%), var(--pf-surface-subtle); }
.studio-page .three-view { border-color: rgb(118 189 255 / 20%); background: radial-gradient(circle at 52% 36%, #314354, #121923 46%, #05070a 82%); box-shadow: inset 0 0 80px rgb(0 0 0 / 30%); }
.studio-page .three-shape-picker { border-color: var(--pf-border); background: rgb(7 9 12 / 86%); backdrop-filter: blur(12px); }
.studio-page .three-shape-picker button.selected,
.studio-page .part-picker .selected,
.studio-page .star-artifact[aria-pressed="true"] { border-color: rgb(240 179 90 / 65%); background: rgb(240 179 90 / 14%); color: var(--pf-selection); box-shadow: inset 0 0 0 1px rgb(240 179 90 / 12%); }
.studio-page .primary { border-color: var(--pf-accent); background: #147ddf; }
.studio-page .primary:hover:not(:disabled) { background: var(--pf-accent); }
.studio-page .status-chip, .studio-page .mode-label { border-color: rgb(84 198 164 / 24%); background: rgb(84 198 164 / 10%); color: #71d2b4; }
.studio-page .footer-bar { border-color: var(--pf-border); background: rgb(5 6 7 / 92%); backdrop-filter: blur(12px); }
.studio-page .local-server-warning { border-color: var(--pf-warning); background: #1f1710; color: #ffd8a6; }

@media (max-width: 1279px) {
  .studio-brand { min-width: 0; }
  .studio-page .topbar { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 899px) {
  .studio-page .topbar { grid-template-columns: minmax(0, 1fr); }
  .studio-brand { width: 100%; }
  .studio-home-link { order: 3; }
}

@media (max-width: 600px) {
  .studio-brand h1 { font-size: 16px; }
  .studio-brand > span { width: 62px; height: 30px; }
  .studio-home-link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-ambient { display: none; }
  .studio-page { background: #050607 url("../assets/ascii-poster.png") center / cover fixed; }
  .studio-page::after { background: rgb(3 4 5 / 94%); }
}