:root {
  color-scheme: light;
  --brand-ink: #11100f;
  /* Workspace surfaces follow the Hotel project's semantic four-theme system. */
  --ws-surface: #fffdf8;
  --ws-soft: #f1ece2;
  --ws-selected: #e7ddc7;
  --ws-text: #423d33;
  --ws-muted: #716958;
  --ws-border: #c4b798;
  --ws-action: #74603d;
  --ws-hover: #57472b;
  --ws-dark: #423b2e;
  --paper: #f7f4ee;
  --ws-on-action: #fff9f4;
  --ws-warning: #785315;
  --ws-warning-bg: #fff4d9;
  --ws-error: #a12e3b;
  --ws-error-bg: #fff0f1;
  --ws-success: #276247;
  --ws-success-bg: #edf7ef;
  --brand-panel: color-mix(in srgb, var(--ws-surface) 58%, transparent);
  --brand-panel-strong: color-mix(in srgb, var(--ws-surface) 84%, transparent);
  --brand-line: color-mix(in srgb, var(--ws-border) 70%, transparent);
  --brand-gold: #c7a765;
  --brand-gold-light: #ead5a4;
  --brand-text: var(--ws-text);
  --brand-muted: var(--ws-muted);
  --accent-burgundy: #843a51;
  --accent-graphite: #90959c;
  --accent-tool: #3976bd;
  --accent-ivory: #e8ddc7;
  --brand-shadow: 0 14px 34px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 8%);
}
html[data-palette="burgundy"] {
  color-scheme: light;
  --ws-surface:#fffaf8; --ws-soft:#f0e5e7; --ws-selected:#ead0d8;
  --ws-text:#39232d; --ws-muted:#72626a; --ws-border:#c9adb6;
  --ws-action:#702f46; --ws-hover:#552035; --ws-dark:#38212c; --paper:#eee6e1;
  --brand-gold:#843a51; --brand-gold-light:#b87382;
  --brand-line:color-mix(in srgb,#c9adb6 72%,transparent);
}
html[data-palette="graphite"] {
  color-scheme: light;
  --ws-surface:#f8f9fa; --ws-soft:#e9ebee; --ws-selected:#d7dce2;
  --ws-text:#272d34; --ws-muted:#5c6672; --ws-border:#acb4be;
  --ws-action:#485461; --ws-hover:#303a46; --ws-dark:#29323d; --paper:#e8eaed;
  --brand-gold:#707984; --brand-gold-light:#969da6;
  --brand-line:color-mix(in srgb,#acb4be 72%,transparent);
}
html[data-palette="tool"] {
  color-scheme: light;
  --ws-surface:#ffffff; --ws-soft:#edf3f9; --ws-selected:#dceafd;
  --ws-text:#21354a; --ws-muted:#536b83; --ws-border:#a8bfd7;
  --ws-action:#2466a7; --ws-hover:#184d82; --ws-dark:#203d5c; --paper:#f0f4f8;
  --brand-gold:#3976bd; --brand-gold-light:#6899c8;
  --brand-line:color-mix(in srgb,#a8bfd7 72%,transparent);
}
html[data-palette="ivory"] {
  color-scheme: light;
  --ws-surface:#fffdf8; --ws-soft:#f1ece2; --ws-selected:#e7ddc7;
  --ws-text:#423d33; --ws-muted:#716958; --ws-border:#c4b798;
  --ws-action:#74603d; --ws-hover:#57472b; --ws-dark:#423b2e; --paper:#f7f4ee;
  --brand-gold:#c7a765; --brand-gold-light:#ead5a4;
  --brand-line:color-mix(in srgb,#c4b798 70%,transparent);
}

body:not(.visitor) {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--ws-text);
  background: var(--paper);
}
body:not(.visitor)::before,
body:not(.visitor)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body:not(.visitor)::before {
  background: url('/images/hero-workspace-architecture.png') center 42% / cover no-repeat;
  opacity: .22;
  filter: saturate(.45) contrast(1.04);
}
body:not(.visitor)::after {
  background: linear-gradient(110deg, color-mix(in srgb,var(--paper) 78%,transparent), color-mix(in srgb,var(--paper) 58%,transparent) 46%, color-mix(in srgb,var(--paper) 78%,transparent)),
    linear-gradient(0deg, var(--paper) 0%, transparent 38%, color-mix(in srgb,var(--paper) 28%,transparent) 100%);
}

body:not(.visitor) :is(aside, .panel, .stats article, .tour, .authbox, dialog,
  .uploadPanel, .empty, .assetcard, .assetgrid .job, #assetPicker,
  #assetDetails, #tourDialog, #mediaLibrary, #publicationDialog) {
  color: var(--ws-text);
  background: var(--brand-panel);
  border: 1px solid var(--brand-line);
  box-shadow: var(--brand-shadow);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}
body:not(.visitor) aside {
  color: var(--ws-on-action);
  background: color-mix(in srgb,var(--ws-dark) 91%,transparent);
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
}
body:not(.visitor) :is(main > header, .sectionTitle, .brand, .eyebrow) { color: var(--ws-text); }
body:not(.visitor) main > header { background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
body:not(.visitor) .headerMeta { display:flex;align-items:center;justify-content:flex-end;gap:12px; }
body:not(.visitor) :is(p, .small, .muted, .asideBottom span, .asideSub, .filename) { color: var(--brand-muted); }
body:not(.visitor) .brand span { color: var(--brand-gold); }
body:not(.visitor) .eyebrow { color: var(--ws-action); }
body:not(.visitor) .banner {
  color: var(--ws-warning);
  background: color-mix(in srgb,var(--ws-warning-bg) 82%,transparent);
  border-left-color: var(--brand-gold);
  border-radius: 0 10px 10px 0;
  backdrop-filter: blur(12px);
}
body:not(.visitor) > header,
body:not(.visitor) main > header,
body:not(.visitor) :is(.toolbar, .message, .filmstrip) {
  color: var(--ws-text);
  background: var(--brand-panel);
  border-color: var(--brand-line);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}
/* These targeted overrides follow the broad surface rule so its :is() ID
   specificity cannot leave a white slab behind the sidebar or page heading. */
body:not(.visitor) #shell > aside { color:var(--ws-on-action);background:color-mix(in srgb,var(--ws-dark) 91%,transparent);border:0;border-right:1px solid var(--brand-line); }
body:not(.visitor) #shell > aside :is(.brand,.asideSub,.asideBottom,.asideBottom span) { color:color-mix(in srgb,var(--ws-on-action) 84%,transparent); }
body:not(.visitor) #shell > aside .brand span { color:var(--brand-gold-light); }
body:not(.visitor) main > header { background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
body:not(.visitor) .local { color:var(--ws-muted);background:color-mix(in srgb,var(--ws-soft) 72%,transparent);border-color:var(--ws-border); }
body:not(.visitor) #arrowStylePanel,
body:not(.visitor) #arrowDestinationPanel,
body:not(.visitor) #poiPanel {
  color: var(--ws-text);
  background: var(--brand-panel-strong);
  border-color: var(--brand-line);
  box-shadow: var(--brand-shadow);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}
body:not(.visitor) #arrowStylePanel :is(p, .pickerLabel, .styleNote),
body:not(.visitor) #arrowDestinationPanel #destinationStatus,
body:not(.visitor) #poiPanel :is(label, .richLabel, .richCount) { color: var(--brand-muted); }
body:not(.visitor) :is(input, select, textarea) {
  color: var(--ws-text);
  background: color-mix(in srgb,var(--ws-surface) 92%,transparent);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
}
body:not(.visitor) :is(input, select, textarea)::placeholder { color: #a79d8c; }
body:not(.visitor) :is(button, .button) {
  color: var(--ws-on-action);
  background: linear-gradient(180deg, color-mix(in srgb,var(--ws-action) 82%,#fff 18%), var(--ws-action));
  border: 1px solid color-mix(in srgb,var(--ws-action) 68%,#fff 32%);
  border-radius: 12px;
  box-shadow: 0 3px 0 rgb(13 12 10 / 75%), 0 7px 16px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 14%);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
body:not(.visitor) :is(button, .button):hover:not(:disabled) {
  border-color: var(--brand-gold-light);
  background: linear-gradient(180deg, color-mix(in srgb,var(--ws-hover) 82%,#fff 18%), var(--ws-hover));
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgb(13 12 10 / 72%), 0 11px 22px rgb(0 0 0 / 30%), inset 0 1px rgb(255 255 255 / 18%);
}
body:not(.visitor) :is(button, .button):active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #0d0c0a, inset 0 2px 5px rgb(0 0 0 / 28%); }
body:not(.visitor) :is(button, .button).primary,
body:not(.visitor) :is(#add, #save, #publishButton, #loginButton, #newTour, #confirmAssets) {
  color: var(--ws-on-action);
  background: linear-gradient(180deg, color-mix(in srgb,var(--ws-action) 80%,#fff 20%), var(--ws-action));
  border-color: color-mix(in srgb,var(--ws-action) 65%,#fff 35%);
  text-shadow: 0 1px rgb(255 255 255 / 30%);
}
body:not(.visitor) :is(button, .button):disabled { opacity:1;filter:none;color:color-mix(in srgb,var(--ws-text) 72%,var(--ws-surface));background:linear-gradient(180deg,var(--ws-soft),color-mix(in srgb,var(--ws-soft) 76%,var(--ws-border)));border-color:var(--ws-border);box-shadow:inset 0 1px #fff8,0 2px 0 color-mix(in srgb,var(--ws-border) 65%,var(--ws-text));cursor:not-allowed; }
body:not(.visitor) a:not(.button) { color: var(--ws-action);text-decoration:none;font-weight:600; }
body:not(.visitor) a:not(.button):hover { color: var(--brand-text);text-decoration:underline;text-decoration-color:var(--brand-gold);text-underline-offset:3px; }
body:not(.visitor) #back { color:var(--brand-text);background:linear-gradient(180deg,rgb(69 60 43 / 96%),rgb(42 37 29 / 98%));border:1px solid var(--brand-line);border-radius:12px;box-shadow:0 3px 0 rgb(13 12 10 / 75%),0 7px 16px rgb(0 0 0 / 24%),inset 0 1px rgb(255 255 255 / 14%); }
body:not(.visitor) .palettePicker { display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--brand-line);border-radius:999px;background:rgb(15 14 12 / 78%);box-shadow:inset 0 1px rgb(255 255 255 / 8%); }
body:not(.visitor) .palettePicker button { width:18px;height:18px;min-width:18px;min-height:18px;padding:0;border:1px solid rgb(255 255 255 / 62%);border-radius:50%;box-shadow:0 1px 3px rgb(0 0 0 / 55%); }
body:not(.visitor) .palettePicker button[data-palette="burgundy"] { background:#843a51; }
body:not(.visitor) .palettePicker button[data-palette="graphite"] { background:#90959c; }
body:not(.visitor) .palettePicker button[data-palette="tool"] { background:#3976bd; }
body:not(.visitor) .palettePicker button[data-palette="ivory"] { background:#e8ddc7; }
body:not(.visitor) .palettePicker button[aria-pressed="true"] { outline:2px solid var(--brand-gold-light);outline-offset:3px;transform:scale(1.08); }
body:not(.visitor) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ws-action);
  outline-offset: 3px;
}
body:not(.visitor) .close-icon-button {
  color: var(--brand-gold-light);
  background: linear-gradient(145deg, #29251e, #11100e);
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgb(199 167 101 / 11%), 0 5px 14px rgb(0 0 0 / 34%), inset 0 1px rgb(255 255 255 / 12%);
}
body:not(.visitor) .close-icon-button:hover { background: linear-gradient(145deg, #443922, #1b1812); }
body:not(.visitor) .job, body:not(.visitor) .assetcard, body:not(.visitor) .tour { min-width: 0; }
body:not(.visitor) .assetgrid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
body:not(.visitor) .assetgrid .job, body:not(.visitor) .assetcard { gap: 6px; }
body:not(.visitor) .assetgrid .job { padding-bottom: 9px; }
body:not(.visitor) .assetgrid .job>div:not(.thumb) { padding: 0 10px; }
body:not(.visitor) .assetgrid .job>.thumb, body:not(.visitor) .photo img { aspect-ratio: 1.8 / 1; }
body:not(.visitor) .cardbody { padding: 9px; }
body:not(.visitor) .cardbody .inline { gap: 5px; }
body:not(.visitor) .cardbody button, body:not(.visitor) .cardbody a { padding: 5px 8px; font-size: 12px; }
body:not(.visitor) .metadataPills { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
body:not(.visitor) .metaPill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #332f29;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: inset 0 1px rgb(255 255 255 / 52%);
}
body:not(.visitor) .jobNote { display:grid;gap:0;margin-top:8px;color:var(--ws-muted);font-size:12px;line-height:1.45; }
body:not(.visitor) .jobNote.is-active { padding:9px 10px;border:1px solid color-mix(in srgb,#d7b777 48%,transparent);border-radius:9px;color:#f7efe8;background:radial-gradient(ellipse at 12% 15%,rgb(95 70 37 / 34%),transparent 64%),linear-gradient(135deg,#171015,#0b090a);box-shadow:inset 0 1px rgb(255 255 255 / 7%),0 5px 14px rgb(0 0 0 / 14%); }
body:not(.visitor) .jobNote.is-active>span { color:#f7efe8;font-weight:650; }
body:not(.visitor) .jobNote.is-error { color:var(--ws-error); }
body:not(.visitor) .cuttingTrack { height:4px;margin-top:8px;overflow:hidden;border-radius:999px;background:#0b090a;box-shadow:inset 0 1px 2px rgb(0 0 0 / 70%); }
body:not(.visitor) .cuttingTrack>span { display:block;width:45%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,#ad8137 28%,#ffe4a3 52%,#d7b777 72%,transparent);animation:materialGoldFlow 2.8s ease-in-out infinite; }
@keyframes materialGoldFlow { from { transform:translateX(-110%); } to { transform:translateX(330%); } }
body:not(.visitor) .tone-blue { background: #d9e6ee; border-color: #9eb7c8; }
body:not(.visitor) .tone-sand { background: #e9dfc9; border-color: #c7b58f; }
body:not(.visitor) .tone-rose { background: #ecd9d7; border-color: #caa7a3; }
body:not(.visitor) .tone-green { background: #d8e6d9; border-color: #a0bba1; }
body:not(.visitor) .tone-red { background: #efd9d5; border-color: #ceaaa1; }
body:not(.visitor) .tone-gold { background: #f0e1b9; border-color: #cbb16b; }
body:not(.visitor) .tag { color: #3b352a; background: #e8ddc7; }
body:not(.visitor) .tag.good { background: #d8e6d9; color: #31523c; }
body:not(.visitor) .tag.bad { background: #efd9d5; color: #7e382d; }
body:not(.visitor) .tour { padding: 16px; border-radius: 14px; }
body:not(.visitor) .tour .cover { margin: -16px -16px 12px; padding: 16px; height: 68px; color: var(--ws-action); background: color-mix(in srgb,var(--ws-selected) 68%,transparent); border-radius: 14px 14px 0 0; }
body:not(.visitor) nav button.active { color: var(--ws-on-action); background: linear-gradient(180deg,color-mix(in srgb,var(--ws-action) 80%,#fff 20%),var(--ws-action)); }
body:not(.visitor) .close-icon-button,
body:not(.visitor) .marker,
body:not(.visitor) .markerSettings,
body:not(.visitor) .headerColors button,
body:not(.visitor) .colorChoices button,
body:not(.visitor) .iconChoices button,
body:not(.visitor) #scenes button { box-shadow: none; }
body:not(.visitor) .marker { background: transparent; border: 0; }
body:not(.visitor) dialog::backdrop { background: rgb(8 8 7 / 72%); backdrop-filter: blur(7px); }
body:not(.visitor) .applicationGrid button[aria-pressed=true],
body:not(.visitor) .applicationFallback button[aria-pressed=true],
body:not(.visitor) #sceneNamePanel button[aria-pressed=true] { color: var(--ws-on-action); background: linear-gradient(180deg,color-mix(in srgb,var(--ws-action) 80%,#fff 20%),var(--ws-action)); }

@media (max-width: 950px) and (min-width: 651px) {
  body:not(.visitor) .assetgrid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 9px; }
  body:not(.visitor) main { padding: 24px 22px; }
  body:not(.visitor) .cardbody .inline { gap: 4px; }
}
body:not(.visitor) :is(button.primary,#add,#save,#publishButton,#loginButton,#newTour,#confirmAssets) { background:linear-gradient(180deg,color-mix(in srgb,var(--ws-action) 80%,#fff 20%),var(--ws-action));border-color:color-mix(in srgb,var(--ws-action) 65%,#fff 35%);color:var(--ws-on-action); }
body:not(.visitor) .sceneTitleRow strong { color: var(--brand-text); }
body:not(.visitor) .sceneApplication { color: var(--ws-action);font-weight:650; }
body:not(.visitor) .photo { background:var(--ws-soft); }
body:not(.visitor) .photo img { display:block; }
body:not(.visitor) .number { color: var(--ws-text); background: var(--ws-selected); border:1px solid var(--ws-border); }
body:not(.visitor) #toast:not(:empty) { color: var(--ws-text); background: color-mix(in srgb,var(--ws-surface) 94%,transparent); border: 1px solid var(--ws-border); box-shadow: var(--brand-shadow); backdrop-filter: blur(16px); }
body:not(.visitor) .meter { background: color-mix(in srgb,var(--ws-border) 42%,transparent); }
body:not(.visitor) .meter div { background: linear-gradient(90deg,var(--ws-action),color-mix(in srgb,var(--ws-action) 66%,#fff 34%)); }
body:not(.visitor) #applicationPanel,
body:not(.visitor) #projectApplicationPanel,
body:not(.visitor) #sceneNamePanel,
body:not(.visitor) #inheritedApplication { color: var(--ws-text); background:color-mix(in srgb,var(--ws-soft) 88%,transparent); border-color:var(--ws-border); }
body:not(.visitor) :is(#applicationPanel,#projectApplicationPanel,#sceneNamePanel,#inheritedApplication) button[aria-pressed=true] { color:var(--ws-on-action);background:linear-gradient(180deg,color-mix(in srgb,var(--ws-action) 80%,#fff 20%),var(--ws-action)); }
body:not(.visitor) .tag.good { color:var(--ws-success);background:var(--ws-success-bg); }
body:not(.visitor) .tag.bad { color:var(--ws-error);background:var(--ws-error-bg); }
body:not(.visitor) :is(#tourDialog, #assetPicker, #assetDetails, #mediaLibrary, #publicationDialog) h2 { color: var(--brand-text); }
body.visitor .visitorTitle,
body.visitor #dock,
body.visitor #visitorScenes,
body.visitor #expand,
body.visitor #viewerStatus {
  color: var(--ws-text);
  background: color-mix(in srgb,var(--ws-dark) 84%,transparent);
  border: 1px solid var(--brand-line);
  box-shadow: 0 12px 28px rgb(0 0 0 / 32%), inset 0 1px rgb(255 255 255 / 9%);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}
body.visitor .visitorTitle { border-radius: 14px; }
body.visitor .visitorTitle span { color: var(--brand-gold-light); }
body.visitor .visitorTitle h1 { color: var(--ws-on-action); }
body.visitor #dock { border-radius: 16px; }
body.visitor #dock button,
body.visitor #expand,
body.visitor #visitorScenes button {
  color: var(--ws-on-action);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
body.visitor #dock button:hover,
body.visitor #visitorScenes button:hover { border-color: var(--brand-line); background: rgb(255 255 255 / 9%); }
body.visitor #dock button[aria-pressed="true"],
body.visitor #visitorScenes button[aria-current="true"] {
  color: var(--ws-on-action);
  border-color: var(--brand-gold-light);
  background: linear-gradient(180deg,var(--brand-gold-light),var(--brand-gold));
}
body.visitor #visitorScenes button[aria-current="true"] { border-width: 2px; }
body.visitor :is(#passwordDialog,#poiViewer,#shareDialog) {
  color: var(--brand-text);
  background: color-mix(in srgb,var(--ws-dark) 94%,transparent);
  border: 1px solid var(--brand-line);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgb(0 0 0 / 42%), inset 0 1px rgb(255 255 255 / 8%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.visitor :is(#passwordDialog,#poiViewer,#shareDialog) :is(h2,label,p,small,strong) { color: inherit; }
body.visitor :is(#passwordDialog,#poiViewer,#shareDialog) input {
  color: var(--brand-text);
  background: rgb(12 11 10 / 75%);
  border: 1px solid var(--brand-line);
  border-radius: 9px;
}
body.visitor :is(#passwordDialog,#poiViewer,#shareDialog) button:not(.close-icon-button) {
  color: #211a0d;
  border: 1px solid var(--brand-gold-light);
  border-radius: 11px;
  background: linear-gradient(180deg,var(--brand-gold-light),var(--brand-gold));
  box-shadow: 0 3px 0 rgb(0 0 0 / 55%), inset 0 1px rgb(255 255 255 / 36%);
}
body.visitor .richBody { color: var(--ws-on-action); }
body.visitor .richBody blockquote { border-color: var(--brand-gold); color: #d8cfbf; }
body.visitor #localNote { color: var(--brand-gold-light); }
body.visitor #viewerStatus { color: var(--ws-on-action); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  body:not(.visitor) *, body:not(.visitor) *::before, body:not(.visitor) *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  body:not(.visitor) .cuttingTrack>span { animation:none;transform:translateX(60%); }
}