:root {
  color-scheme: dark;
  --ink: #071116;
  --panel: #0e1c23;
  --panel-2: #14262d;
  --line: rgba(219, 187, 121, 0.2);
  --muted: #9cb0b3;
  --cream: #f3ead8;
  --gold: #d4aa60;
  --gold-strong: #f0c776;
  --green: #61b48b;
  --danger: #e87d73;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--ink); color: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(240, 199, 118, .72); outline-offset: 2px; }

.loading-shell { min-height: 100vh; display: grid; place-items: center; background: #071116 url('/family-tree-wall.png') center/cover; }
.loading-card { padding: 1rem 1.35rem; border: 1px solid var(--line); background: rgba(7,17,22,.82); backdrop-filter: blur(14px); border-radius: 999px; color: var(--cream); }

.display-page { position: fixed; inset: 0; overflow: hidden; background: #071116; }
.wall-world { position: absolute; background: #071116 url('/family-tree-wall.png') center/cover no-repeat; transform-origin: top left; }
.wall-world.quadrant { width: 200vw; height: 200vh; }
.wall-world.full { inset: 0; }
.display-frame { position: absolute; display: grid; place-items: center; overflow: hidden; border: clamp(7px, .65vw, 18px) solid #2c2117; border-radius: 2px; background: linear-gradient(145deg, #efe0c3, #b99055); box-shadow: 0 0 0 2px rgba(225,190,126,.7), 0 12px 35px rgba(0,0,0,.5), inset 0 0 0 3px rgba(26,18,10,.65); }
.display-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 24px rgba(0,0,0,.34); }
.display-frame.oval { border-radius: 50%; }
.photo-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.2,.75,.25,1), clip-path 1.6s ease; }
.photo-layer.next { opacity: 0; }
.photo-layer.next.enter-sweep { clip-path: inset(0 100% 0 0); }
.photo-layer.next.enter-swap { transform: translateX(105%); }
.photo-layer.next.enter-snap { transform: scale(.96); transition-duration: .22s; }
.photo-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; text-align: center; color: rgba(241,228,203,.76); background: radial-gradient(circle at 50% 35%, rgba(213,174,101,.18), transparent 52%), linear-gradient(145deg, #17282c, #0c171d); font-family: Georgia, serif; font-size: clamp(.75rem, 1.15vw, 1.45rem); letter-spacing: .08em; text-transform: uppercase; }
.transition-fade .photo-layer.next { opacity: 1; }
.transition-sweep .photo-layer.next { opacity: 1; clip-path: inset(0 0 0 0); }
.transition-sweep .photo-layer.current { clip-path: inset(0 100% 0 0); }
.transition-swap .photo-layer.next { opacity: 1; transform: translateX(0); }
.transition-swap .photo-layer.current { transform: translateX(-105%); }
.transition-snap .photo-layer.next { opacity: 1; transition-duration: .22s; }
.tree-reveal-out .photo-layer { opacity: 0 !important; }
.offline-badge, .display-label { position: fixed; z-index: 10; color: rgba(255,255,255,.76); background: rgba(5,12,15,.7); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: .5rem .8rem; font-size: .78rem; backdrop-filter: blur(10px); }
.offline-badge { left: 1rem; bottom: 1rem; }
.display-label { right: 1rem; top: 1rem; }

.admin-shell { min-height: 100vh; background: radial-gradient(circle at 70% -10%, #17333c 0, #0a171d 42%, #061015 100%); }
.topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.4rem; border-bottom: 1px solid var(--line); background: rgba(8,18,23,.9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: .8rem; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(240,199,118,.34); border-radius: 12px; color: var(--gold-strong); background: #102229; font-family: Georgia, serif; font-size: 1.45rem; }
.brand h1 { margin: 0; font: 600 1.1rem/1.1 Georgia, serif; letter-spacing: .02em; }
.brand p { margin: .25rem 0 0; color: var(--muted); font-size: .8rem; }
.top-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.status-pill { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: 999px; padding: .48rem .72rem; color: var(--muted); font-size: .78rem; background: rgba(255,255,255,.025); }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(97,180,139,.1); }
.status-pill.offline::before { background: var(--danger); }
.btn { border: 1px solid rgba(240,199,118,.26); border-radius: 9px; padding: .68rem .9rem; color: var(--cream); background: rgba(255,255,255,.04); transition: .18s ease; }
.btn:hover { background: rgba(255,255,255,.09); border-color: rgba(240,199,118,.55); transform: translateY(-1px); }
.btn.primary { color: #211608; background: linear-gradient(135deg, var(--gold-strong), #b8843f); border-color: transparent; font-weight: 700; }
.btn.danger { color: #ffd9d5; border-color: rgba(232,125,115,.4); }
.btn.small { padding: .48rem .64rem; font-size: .82rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.workspace { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(250px, 320px); min-height: calc(100vh - 72px); }
.sidebar { padding: 1rem; border-right: 1px solid var(--line); background: rgba(8,18,23,.72); }
.sidebar.right { border-right: 0; border-left: 1px solid var(--line); }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; padding: .28rem; background: rgba(0,0,0,.22); border-radius: 11px; margin-bottom: 1rem; }
.tab { border: 0; border-radius: 8px; padding: .62rem .3rem; color: var(--muted); background: transparent; font-size: .82rem; }
.tab.active { color: var(--cream); background: var(--panel-2); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.panel { display: none; }
.panel.active { display: block; }
.card { border: 1px solid var(--line); border-radius: 13px; padding: 1rem; background: linear-gradient(145deg, rgba(21,39,46,.88), rgba(12,27,33,.9)); box-shadow: 0 10px 28px rgba(0,0,0,.16); margin-bottom: .8rem; }
.card h2, .card h3 { margin: 0 0 .45rem; font: 600 1rem/1.25 Georgia, serif; }
.card p { margin: .3rem 0 .8rem; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.lock-card { border-color: rgba(240,199,118,.32); }
.lock-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lock-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(212,170,96,.12); color: var(--gold-strong); }
.field { display: grid; gap: .38rem; margin-top: .8rem; }
.field label { color: #c9d3d1; font-size: .79rem; }
.field input, .field select { min-width: 0; width: 100%; border: 1px solid rgba(222,195,142,.2); border-radius: 9px; padding: .65rem .7rem; color: var(--cream); background: #09171c; }
.field input[type="range"] { padding: 0; accent-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .58rem 0; color: #d9dfdc; font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.055); }
.switch { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: #263a40; position: relative; transition: .18s; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: #d5dfdc; transition: .18s; }
.switch:checked { background: #a87836; }
.switch:checked::after { transform: translateX(18px); background: white; }
.muted { color: var(--muted); }
.tiny { font-size: .74rem; }

.stage-column { min-width: 0; padding: 1.2rem; display: flex; flex-direction: column; gap: .85rem; }
.stage-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stage-toolbar h2 { margin: 0; font: 600 1.05rem Georgia, serif; }
.stage-toolbar p { margin: .25rem 0 0; color: var(--muted); font-size: .8rem; }
.display-buttons { display: flex; gap: .35rem; }
.screen-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.03); }
.screen-btn.active { color: var(--ink); background: var(--gold); }
.editor-stage-wrap { flex: 1; min-height: 420px; display: grid; place-items: center; border: 1px solid rgba(220,188,124,.18); border-radius: 16px; padding: 1rem; background: linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%), #071217; background-size: 24px 24px; box-shadow: inset 0 0 55px rgba(0,0,0,.38); }
.editor-stage { height: min(68vh, 760px); max-width: 100%; aspect-ratio: var(--wall-ratio, 5/8); position: relative; overflow: hidden; background: #0a171d url('/canvas-wall-reference.jpg') center/cover no-repeat; box-shadow: var(--shadow); user-select: none; touch-action: none; }
.tv-reference-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: var(--tv-reference-opacity, .42); pointer-events: none; mix-blend-mode: screen; filter: saturate(.7) contrast(1.08); }
.no-go-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.display-zone-label { position: absolute; z-index: 6; display: grid; place-items: start center; padding-top: .35rem; border: 1px dashed rgba(255,255,255,.32); color: rgba(255,255,255,.68); font-size: clamp(.5rem, .72vw, .7rem); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: .18s ease; }
.display-zone-label.focus { border: 2px solid var(--gold-strong); background: rgba(212,170,96,.08); color: white; box-shadow: inset 0 0 28px rgba(212,170,96,.18); }
.quadrant-tag { position: absolute; z-index: 6; color: rgba(255,255,255,.52); font-size: clamp(.55rem, .8vw, .75rem); letter-spacing: .08em; text-transform: uppercase; }
.q1 { left: 1%; top: 2%; }.q2 { right: 1%; top: 2%; }.q3 { left: 1%; bottom: 2%; }.q4 { right: 1%; bottom: 2%; }
.editor-frame { position: absolute; z-index: 7; display: grid; place-items: center; border: max(2px, .22vw) solid #c89b52; background: rgba(4,12,15,.76); box-shadow: 0 6px 18px rgba(0,0,0,.42), inset 0 0 0 2px rgba(245,211,144,.23); color: #eee4d0; font-size: clamp(.55rem, .9vw, .85rem); text-align: center; overflow: hidden; }
.editor-frame.selected { outline: 2px solid #fff1bd; outline-offset: 3px; z-index: 9; }
.editor-frame.oval { border-radius: 50%; }
.editor-frame.warning { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(232,125,115,.32), 0 6px 18px rgba(0,0,0,.42); }
.editor-frame small { display: block; margin-top: .2rem; color: #ffaaa2; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; }
.editor-frame:not(.locked) { cursor: grab; }
.editor-frame:not(.locked):active { cursor: grabbing; }
.resize-handle { position: absolute; width: 14px; height: 14px; right: -2px; bottom: -2px; background: var(--gold-strong); border: 2px solid #23190d; cursor: nwse-resize; }
.editor-frame.locked .resize-handle { display: none; }
.frame-thumb { width: 100%; height: 100%; object-fit: cover; }
.frame-list { display: grid; gap: .45rem; max-height: 40vh; overflow: auto; padding-right: .2rem; }
.frame-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: .58rem .65rem; color: #dbe2df; background: rgba(255,255,255,.025); }
.frame-row.active { border-color: rgba(240,199,118,.55); background: rgba(212,170,96,.09); }
.frame-row button { border: 0; color: inherit; background: none; text-align: left; flex: 1; }
.media-drop { display: grid; place-items: center; text-align: center; min-height: 115px; padding: 1rem; border: 1px dashed rgba(240,199,118,.35); border-radius: 12px; background: rgba(212,170,96,.045); color: var(--muted); }
.media-drop input { max-width: 100%; }
.empty-state { padding: 1rem 0; color: var(--muted); font-size: .84rem; text-align: center; }
.measurement { display: grid; gap: .15rem; margin: .65rem 0 1rem; padding: .75rem; border: 1px solid rgba(240,199,118,.28); border-radius: 10px; background: rgba(212,170,96,.07); }
.measurement strong { color: var(--gold-strong); font: 600 1.05rem Georgia, serif; }
.measurement span { color: var(--muted); font-size: .72rem; }
.screen-details { border-top: 1px solid rgba(255,255,255,.075); padding: .7rem 0; }
.screen-details summary { cursor: pointer; color: #e6dfd0; font-size: .84rem; font-weight: 600; }
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: grid; gap: .5rem; }
.toast { max-width: 360px; padding: .8rem 1rem; border-radius: 10px; border: 1px solid rgba(240,199,118,.26); background: #13252b; color: var(--cream); box-shadow: var(--shadow); font-size: .85rem; animation: toast-in .2s ease; }
.toast.error { border-color: rgba(232,125,115,.5); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar.right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
}

@media (max-width: 760px) {
  .topbar { align-items: flex-start; }
  .brand p, .status-pill { display: none; }
  .workspace { display: block; }
  .sidebar, .sidebar.right { border: 0; border-bottom: 1px solid var(--line); display: block; }
  .stage-column { padding: .8rem; }
  .editor-stage-wrap { min-height: 280px; padding: .5rem; }
  .stage-toolbar { align-items: flex-end; }
  .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}