/* Setara identity on the screening-room system: near-black ground with light pools, translucent white surfaces,
   one accent (lavender → pale yellow, #d0a9f8 → #f5ecb2) reserved for interaction and ambient light. */
:root {
 --brand-paper: #050506;
 --brand-paper-lit: #ededef;
 --brand-ink: #d0a9f8;
 --brand-ink-deep: #171426;
 --media-dark: #020203;
 --on-media-dark: #ededef;
 --on-media-dark-muted: #a2a8b2;
}
:root {
  --ds-bg-deep: #020203;
  --ds-bg: #050506;
  --ds-bg-elevated: #0a0a0c;
  --ds-surface: rgba(255,255,255,.05);
  --ds-surface-hover: rgba(255,255,255,.08);
  --ds-surface-active: rgba(255,255,255,.11);
  --ds-glass: rgba(10,10,12,.82);
  --ds-stage: #020203;
  --ds-overlay: rgba(2,2,3,.72);
  --ds-fg: #ededef;
  --ds-muted: #a2a8b2;
  --ds-subtle: #8a9098;
  --ds-faint: rgba(138,144,152,.5);
  --ds-accent: #d0a9f8;
  --ds-accent-2: #f5ecb2;
  --ds-accent-gradient: linear-gradient(100deg, #d0a9f8 0%, #f5ecb2 100%);
  --ds-accent-hover: #ddc1fa;
  --ds-accent-text: #d0a9f8;
  --ds-accent-solid: #d0a9f8;
  --ds-accent-solid-hover: #ddc1fa;
  --ds-accent-contrast: #171426;
  --ds-accent-soft: rgba(208,169,248,.14);
  --ds-accent-glow: rgba(208,169,248,.28);
  --ds-accent-rgb: 208,169,248;
  --ds-success: #2ecc7a; --ds-success-text: #5fdc98; --ds-success-soft: rgba(46,204,122,.16); --ds-success-line: rgba(46,204,122,.32); --ds-success-text: #3fd695; --ds-success-soft: rgba(33,193,123,.15);
  --ds-warning: #f0cd33; --ds-warning-text: #f3d65a; --ds-warning-soft: rgba(240,205,51,.16); --ds-warning-line: rgba(240,205,51,.32); --ds-warning-text: #f0cd33; --ds-warning-soft: rgba(240,205,51,.15);
  --ds-danger: #f43350; --ds-danger-text: #ff6b80; --ds-danger-soft: rgba(244,51,80,.16); --ds-danger-line: rgba(244,51,80,.32); --ds-danger-text: #f6546c; --ds-danger-soft: rgba(244,51,80,.15);
  --ds-timecode: #f0cd33; --ds-timecode-bg: rgba(240,205,51,.16);
  --ds-surface-solid: #0f1013;
  --ds-hair: .5px;
  --ds-accent-gradient-text: linear-gradient(100deg, #d0a9f8 0%, #f5ecb2 100%);
  --ds-accent-solid-contrast: #171426;
  --ds-border: rgba(255,255,255,.07);
  --ds-border-hover: rgba(255,255,255,.12);
  --ds-border-strong: rgba(255,255,255,.18);
  --ds-border-accent: rgba(208,169,248,.45);
  --ds-input: rgba(255,255,255,.04);
  --ds-control: rgba(255,255,255,.08);
  --ds-control-hover: rgba(255,255,255,.12);
  --ds-shadow-card: inset 0 1px 0 0 rgba(255,255,255,.06);
  --ds-shadow-hover: inset 0 1px 0 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --ds-shadow-pop: inset 0 1px 0 0 rgba(255,255,255,.08), 0 0 0 .5px rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --ds-shadow-dialog: inset 0 1px 0 0 rgba(255,255,255,.08), 0 0 0 .5px rgba(255,255,255,.12), 0 24px 64px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4), 0 24px 80px rgba(208,169,248,.07);
  --ds-shadow-button: inset 0 1px 0 0 rgba(255,255,255,.08);
  --ds-shadow-accent: inset 0 1px 0 0 rgba(255,255,255,.18), 0 8px 24px rgba(208,169,248,.22);
  --ds-shadow-accent-hover: inset 0 1px 0 0 rgba(255,255,255,.22), 0 10px 30px rgba(208,169,248,.3);
  --ds-radius: 8px;
  --ds-radius-sm: 6px;
  --ds-radius-control: 6px;
  --ds-radius-dialog: 8px;
  --ds-radius-pill: 999px;
  --ds-ease: cubic-bezier(.2,0,0,1);
  --ds-fast: 150ms;
  --ds-base: 200ms;
  --ds-slow: 300ms;
  --ds-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* One typeface everywhere: timecodes, readouts and durations use the UI face with tabular figures (owner, Sep 7). */
  --ds-mono: var(--ds-font);
  --ds-text-xs: 11px; --ds-text-sm: 12px; --ds-text-md: 13px; --ds-text-lg: 14px; --ds-text-xl: 20px;
  --ds-rail: 64px;
  --ds-sidebar: 244px;
  --ds-topbar: 50px;
  --ds-panel: 320px;
  /* Focus ring: 1px gap + 2px ring (3px outside the control) so it never reaches a neighbour's text. */
  --ds-focus: 0 0 0 1px var(--ds-bg), 0 0 0 3px rgba(208,169,248,.8);
  --bg: var(--ds-bg);
  --panel: var(--ds-bg-elevated);
  --raised: var(--ds-control);
  --line: var(--ds-border);
  --muted: var(--ds-muted);
  --accent: var(--ds-accent-text);
  --text: var(--ds-fg);
  --error: var(--ds-danger-text);
  --amber: var(--ds-warning-text);
  color-scheme: dark;
  font-family: var(--ds-font);
  color: var(--ds-fg);
  background: var(--ds-bg);
}
body.ds-interface {
  isolation: isolate;
  min-height: 100svh;
  color: var(--ds-fg);
  font-family: var(--ds-font);
  font-size: var(--ds-text-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Flat pastel-tinted canvas (the producer asked for a soft flat colour rather than a black canvas) */
  background: var(--ds-bg);
}
/* Soft ambient light pools, without a grid or halftone texture. */
.ds-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
#mode-badge:empty, #sidebar-mode:empty { display: none; }
/* Layer 3 — light pools. Radial gradients rather than blurred boxes: a blur pass per layer per frame
   competes with 9:16 video decoding; a gradient is already smooth at this scale and costs one paint. */
.ds-orb { position: absolute; display: block; border-radius: 50%; will-change: transform; animation: ds-float 9s ease-in-out infinite; }
.ds-orb:nth-child(1) { width: min(1600px, 160vw); height: 1000px; top: -640px; left: 50%; margin-left: min(-800px, -80vw); background: radial-gradient(closest-side, rgba(208,169,248,.26), rgba(208,169,248,.09) 45%, rgba(208,169,248,0) 74%); }
.ds-orb:nth-child(2) { width: 900px; height: 900px; top: 18%; left: -460px; background: radial-gradient(closest-side, rgba(245,236,178,.12), rgba(245,236,178,.05) 50%, rgba(245,236,178,0) 74%); animation-duration: 10s; animation-delay: -3s; }
.ds-orb:nth-child(3) { width: 760px; height: 760px; right: -380px; top: 42%; background: radial-gradient(closest-side, rgba(208,169,248,.10), rgba(208,169,248,.04) 50%, rgba(208,169,248,0) 74%); animation-duration: 8s; animation-delay: -5s; }
.ds-orb:nth-child(4) { width: 1000px; height: 520px; bottom: -320px; left: 28%; background: radial-gradient(closest-side, rgba(245,236,178,.08), rgba(245,236,178,0) 70%); animation: ds-pulse 8s ease-in-out infinite; }
@keyframes ds-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(1deg); } }
@keyframes ds-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
/* Layer 5 — scroll-linked hero parallax (values written by design-system.js, bounded) */
.ds-interface :is(.projects-header,.page > .intro,.auth-page > .intro) { transform: translateY(var(--ds-scroll-y,0px)) scale(var(--ds-scroll-scale,1)); opacity: var(--ds-scroll-opacity,1); transform-origin: left top; will-change: transform, opacity; }
/* Headlines: vertical white → translucent gradient for dimensionality */
.ds-interface :is(.projects-header,.intro,.run-heading,.review-intro) h1 {
  color: var(--ds-fg); font-size: var(--ds-text-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; background: none; -webkit-text-fill-color: currentColor; animation: none;
}
.ds-interface :is(.projects-header,.intro,.run-heading,.review-intro) h1 em, .ds-gradient-accent {
  font-style: normal; background: linear-gradient(90deg, #5b53ff 0%, #9e9eff 50%, #5b53ff 100%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ds-shimmer 6s linear infinite;
}
@keyframes ds-shimmer { to { background-position: 200% center; } }
@keyframes ds-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ds-scale-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.ds-interface .eyebrow { font-family: var(--ds-font); font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-subtle); letter-spacing: .06em; text-transform: uppercase; }
/* Mouse-tracking spotlight (design-system.js writes --pointer-x/--pointer-y and data-ds-lit on fine pointers only).
   It tints the card surface; thumbnails and players sit on their own opaque stage so media is never coloured. */
body.ds-interface [data-ds-lit] { background-image: none; }

/* Text controls need leading for descenders inside ellipsis/overflow containers. */
/* ---------- Base control normalization (low specificity: any class-qualified module rule wins) ---------- */
.ds-interface :where(button,input,select,textarea,summary) { font-family: var(--ds-font); font-size: var(--ds-text-sm); color: var(--ds-fg); }
.ds-interface :where(button,a,input,textarea,select,summary,[role=tab],[role=menuitem]) {
  transition: color var(--ds-fast) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease), opacity var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease);
}
.ds-interface :where(button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 8px; border-radius: var(--ds-radius-control);
  background: var(--ds-control); border: 1px solid transparent; color: var(--ds-fg);
  font-weight: 500; line-height: 1.4; cursor: pointer; white-space: nowrap; box-shadow: none;
}
.ds-interface :where(button):hover:not(:disabled) { background: var(--ds-control-hover); border-color: var(--ds-border-hover); box-shadow: var(--ds-shadow-button), 0 0 0 1px rgba(var(--ds-ink-rgb),.02), 0 4px 16px rgba(0,0,0,.25); }
.ds-interface :where(button):active:not(:disabled) { background: var(--ds-surface-active); transform: scale(.98); }
.ds-interface :where(button):disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ds-interface :where(button.primary,button.ds-primary,#send-comment,.wm-share,.review-portal button.primary) {
  position: relative; overflow: hidden; color: var(--ds-accent-contrast); background: var(--ds-accent-gradient); border-color: transparent; box-shadow: var(--ds-shadow-accent);
}
.ds-interface :where(button.primary,button.ds-primary,#send-comment,.wm-share,.review-portal button.primary) > svg { color: inherit; }
.ds-interface :where(button.primary,button.ds-primary,#send-comment,.wm-share,.review-portal button.primary):hover:not(:disabled) { background: var(--ds-accent-gradient); filter: brightness(1.06); border-color: transparent; box-shadow: var(--ds-shadow-accent-hover); }
.ds-interface :where(button.primary,button.ds-primary,#send-comment,.wm-share,.review-portal button.primary):active:not(:disabled) { background: var(--ds-accent-solid); transform: scale(.98); box-shadow: var(--ds-shadow-accent); }
/* Shine sweep on hover */
.ds-interface :where(button.primary,button.ds-primary,#send-comment,.wm-share,.review-portal button.primary)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform var(--ds-slow) var(--ds-ease); pointer-events: none; }
.ds-interface :where(button.primary,button.ds-primary,#send-comment,.wm-share,.review-portal button.primary):hover:not(:disabled)::after { transform: translateX(-120%); }
.ds-interface :where(button.text-button,button.ds-ghost,button.ghost) { background: transparent; border-color: transparent; box-shadow: none; color: var(--ds-muted); }
.ds-interface :where(button.text-button,button.ds-ghost,button.ghost):hover:not(:disabled) { background: var(--ds-surface-hover); border-color: transparent; color: var(--ds-fg); }
.ds-interface :where(button.danger,button.ds-danger) { color: var(--ds-danger-text); }
.ds-interface :where(button.danger,button.ds-danger):hover:not(:disabled) { background: var(--ds-danger-soft); border-color: rgba(239,68,68,.3); }
.ds-interface :where(button.ds-compact) { min-height: 24px; padding: 2px 8px; font-size: var(--ds-text-sm); }
.ds-interface :where(button.ds-large) { min-height: 34px; padding: 0 14px; font-size: var(--ds-text-md); }
.ds-interface :where(button) > svg, .ds-interface :where(.ds-icon-btn) > svg { width: 16px; height: 16px; flex: none; }
.ds-interface :where(.ds-icon-btn) {
  width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: var(--ds-radius-control);
  background: transparent; border: 1px solid transparent; color: var(--ds-muted); box-shadow: none;
}
.ds-interface :where(.ds-icon-btn):hover:not(:disabled) { background: var(--ds-surface-hover); color: var(--ds-fg); border-color: transparent; }
.ds-interface :where(.ds-icon-btn)[aria-pressed=true], .ds-interface :where(.ds-icon-btn).is-active { background: var(--ds-surface-active); color: var(--ds-fg); }
.ds-interface :where(.ds-icon-btn.ds-compact) { width: 26px; height: 26px; min-height: 26px; }
.ds-interface :where(.ds-icon-btn.ds-compact) > svg { width: 14px; height: 14px; }
.ds-interface :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea) {
  min-height: 30px; padding: 0 10px; border-radius: var(--ds-radius-control);
  background: var(--ds-input); border: 1px solid rgba(var(--ds-ink-rgb),.10); color: var(--ds-fg); font-size: var(--ds-text-md); line-height: 1.4;
}
.ds-interface :where(textarea) { padding: 8px 10px; resize: none; min-height: 64px; }
.ds-interface :where(input,select,textarea)::placeholder { color: var(--ds-subtle); }
.ds-interface :where(input:not([type=checkbox]):not([type=radio]),select,textarea):hover:not(:disabled) { border-color: var(--ds-border-hover); }
.ds-interface :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus { border-color: var(--ds-accent); outline: none; box-shadow: 0 0 0 3px var(--ds-accent-soft), 0 0 16px rgba(91,83,255,.12); }
.ds-interface :where(select) {
  appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 14px;
}
.ds-interface :where(input[type=search]) { -webkit-appearance: none; appearance: none; }
.ds-interface :where(input[type=search])::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ds-interface :where(input[type=checkbox],input[type=radio]) { accent-color: var(--ds-accent-solid); width: 15px; height: 15px; margin: 0; cursor: pointer; flex: none; }
.ds-interface :where(input[type=range]) { accent-color: var(--ds-accent); }
.ds-interface :where(label) { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-muted); }
.ds-interface :where(summary) { cursor: pointer; list-style: none; }
.ds-interface :where(summary)::-webkit-details-marker { display: none; }
.ds-interface :where(button,a,summary,[tabindex]:not([tabindex="-1"])):focus-visible,
.ds-interface :where(input,select,textarea):focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-interface :where(a) { color: var(--ds-accent-text); text-decoration: none; }
.ds-interface :where(a):hover { text-decoration: underline; }
.ds-interface :where(hr) { border: 0; border-top: 1px solid var(--ds-border); margin: 12px 0; }
.ds-interface :where(kbd,.ds-kbd) { font-family: var(--ds-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: var(--ds-control); border: 1px solid var(--ds-border); color: var(--ds-muted); }
/* Scrollbars stay thin and neutral */
.ds-interface * { scrollbar-width: thin; scrollbar-color: rgba(var(--ds-ink-rgb),.14) transparent; }
.ds-interface *::-webkit-scrollbar { width: 10px; height: 10px; }
.ds-interface *::-webkit-scrollbar-thumb { background: rgba(var(--ds-ink-rgb),.14); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.ds-interface *::-webkit-scrollbar-thumb:hover { background: rgba(var(--ds-ink-rgb),.24); border: 3px solid transparent; background-clip: padding-box; }
.ds-interface *::-webkit-scrollbar-track { background: transparent; }

/* ---------- Dialogs ---------- */
.ds-interface :where(dialog) {
  padding: 0; margin: auto; color: var(--ds-fg); background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-dialog); box-shadow: var(--ds-shadow-dialog);
  max-width: min(96vw, 1200px); max-height: 92dvh; overflow: hidden;
}
.ds-interface :where(dialog)::backdrop { background: rgba(6,7,10,.7); }
.ds-interface :where(dialog[open]) { animation: ds-dialog-in var(--ds-base) var(--ds-ease); }
.ds-interface :where(dialog[open])::backdrop { animation: ds-fade-in var(--ds-base) var(--ds-ease); }
@keyframes ds-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-rise-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ds-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-dialog-header { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--ds-border); flex: none; }
.ds-dialog-header h2, .ds-dialog-header strong { font-size: var(--ds-text-lg); font-weight: 600; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-dialog-body { padding: 16px 20px; overflow: auto; min-height: 0; }
.ds-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ds-border); flex: none; }

/* ---------- Menus / popovers ---------- */
.ds-menu {
  position: absolute; z-index: 40; min-width: 200px; max-width: 320px; padding: 4px; margin: 0;
  inset: auto; width: auto; height: auto; overflow: visible; /* neutralise the [popover] UA box when promoted to the top layer */
  background: var(--ds-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-pop); list-style: none; animation: ds-rise-in var(--ds-fast) var(--ds-ease);
}
.ds-menu[hidden] { display: none; }
.ds-menu[popover] { position: fixed; } /* top layer: viewport coordinates, above any open <dialog> */
.ds-menu button, .ds-menu [role=menuitem] {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 30px; padding: 0 8px; text-align: left;
  background: transparent; border: 0; border-radius: 5px; box-shadow: none; color: var(--ds-fg); font-size: var(--ds-text-md); font-weight: 400; white-space: nowrap;
}
.ds-menu button > svg, .ds-menu [role=menuitem] > svg { width: 16px; height: 16px; color: var(--ds-muted); flex: none; }
.ds-menu button:hover:not(:disabled), .ds-menu [role=menuitem]:hover, .ds-menu button:focus-visible, .ds-menu [role=menuitem]:focus-visible { background: var(--ds-surface-hover); border-color: transparent; box-shadow: none; }
.ds-menu button:focus-visible, .ds-menu [role=menuitem]:focus-visible { box-shadow: inset 0 0 0 1px var(--ds-border-accent); }
.ds-menu .ds-danger, .ds-menu [data-danger] { color: var(--ds-danger-text); }
.ds-menu .ds-danger:hover, .ds-menu [data-danger]:hover { background: var(--ds-danger-soft); }
.ds-menu hr, .ds-menu-separator { border: 0; border-top: 1px solid var(--ds-border); margin: 4px 0; }
.ds-menu-label { padding: 6px 8px 4px; font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-subtle); text-transform: uppercase; letter-spacing: .05em; }
.ds-popover { position: absolute; z-index: 40; width: 360px; max-width: calc(100vw - 16px); padding: 14px; background: var(--ds-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-pop); animation: ds-rise-in var(--ds-fast) var(--ds-ease); }

/* ---------- Tabs / segmented ---------- */
.ds-tabs { display: flex; gap: 2px; align-items: stretch; border-bottom: 1px solid var(--ds-border); }
.ds-tabs > button, .ds-tabs > [role=tab] {
  min-height: 34px; padding: 0 10px; margin-bottom: -1px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
  color: var(--ds-muted); font-size: var(--ds-text-md); font-weight: 500;
}
.ds-tabs > button:hover:not(:disabled), .ds-tabs > [role=tab]:hover { color: var(--ds-fg); background: transparent; border-color: transparent; border-bottom-color: var(--ds-border-strong); }
.ds-tabs > button[aria-selected=true], .ds-tabs > button[aria-pressed=true], .ds-tabs > [role=tab][aria-selected=true] { color: var(--ds-fg); border-bottom-color: var(--ds-accent); background: transparent; }
.ds-tabs .ds-count { margin-left: 4px; font-size: 10.5px; color: var(--ds-subtle); font-variant-numeric: tabular-nums; }
.ds-segment { display: inline-flex; padding: 2px; gap: 2px; background: var(--ds-input); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-control); }
.ds-segment > button { min-height: 26px; padding: 0 8px; background: transparent; border: 0; border-radius: 4px; box-shadow: none; color: var(--ds-muted); font-size: var(--ds-text-sm); }
.ds-segment > button:hover:not(:disabled) { background: var(--ds-surface-hover); border-color: transparent; color: var(--ds-fg); }
.ds-segment > button[aria-pressed=true], .ds-segment > button[aria-current], .ds-segment > button.is-active { background: var(--ds-surface-active); color: var(--ds-fg); }
.ds-segment > button > svg { width: 15px; height: 15px; }

/* ---------- Badges / status ---------- */
.ds-chip, .ds-badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 20px; padding: 0 7px; border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-active); border: 1px solid var(--ds-border); color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.ds-chip.is-accent, .ds-badge.is-accent { background: rgba(var(--ds-ink-rgb),.08); border-color: rgba(var(--ds-ink-rgb),.18); color: var(--ds-fg); }
.ds-chip.is-success, .ds-badge.is-success { background: var(--ds-success-soft); border-color: var(--ds-success-line); color: var(--ds-success-text); }
.ds-chip.is-warning, .ds-badge.is-warning { background: var(--ds-warning-soft); border-color: var(--ds-warning-line); color: var(--ds-warning-text); }
.ds-chip.is-danger, .ds-badge.is-danger { background: var(--ds-danger-soft); border-color: var(--ds-danger-line); color: var(--ds-danger-text); }
.ds-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ds-timecode { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px; background: var(--ds-timecode-bg); color: var(--ds-timecode); font-family: var(--ds-mono); font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.ds-duration { position: absolute; right: 6px; bottom: 6px; padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; font-family: var(--ds-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; line-height: 1.2; pointer-events: none; }
.ds-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #2f8f5b; color: #fff; font-size: 11px; font-weight: 600; flex: none; text-transform: uppercase; }
.ds-avatar.is-accent { background: var(--ds-accent-solid); color: var(--ds-accent-contrast); }

/* ---------- Switch (wraps a real checkbox; the input stays hit-testable for tests) ---------- */
.ds-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--ds-text-md); color: var(--ds-fg); font-weight: 400; }
.ds-switch input { position: relative; appearance: none; -webkit-appearance: none; width: 30px; height: 18px; margin: 0; border-radius: 999px; background: var(--ds-control-hover); border: 1px solid var(--ds-border); cursor: pointer; transition: background-color var(--ds-fast) var(--ds-ease); flex: none; }
.ds-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform var(--ds-fast) var(--ds-ease); }
.ds-switch input:checked { background: var(--ds-accent-solid); border-color: transparent; }
.ds-switch input:checked::after { background: #fff; }
.ds-switch input:checked::after { transform: translateX(12px); }
.ds-switch input:disabled { opacity: .45; cursor: not-allowed; }
.ds-switch input:focus-visible { box-shadow: var(--ds-focus); outline: none; }

/* ---------- Skeletons / fallbacks / empty states ---------- */
.ds-skeleton { position: relative; overflow: hidden; background: var(--ds-surface-active); border-radius: 6px; }
.ds-skeleton::after { content: none; }
.ds-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--ds-surface-active); color: var(--ds-subtle); font-size: var(--ds-text-xs); text-align: center; padding: 8px; }
.ds-fallback svg { width: 22px; height: 22px; color: var(--ds-faint); }
.ds-fallback.is-pending svg { color: var(--ds-accent-text); animation: ds-spin 1.4s linear infinite; }
.ds-fallback.is-failed { color: var(--ds-danger-text); }
.ds-fallback.is-failed svg { color: var(--ds-danger-text); }
.ds-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 16px; text-align: center; color: var(--ds-muted); font-size: var(--ds-text-md); }
.ds-empty svg { width: 28px; height: 28px; color: var(--ds-faint); margin-bottom: 4px; }
.ds-empty strong { color: var(--ds-fg); font-weight: 500; }
.ds-empty p, .ds-empty small { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-subtle); max-width: 36ch; }
.ds-spinner{ display: inline-block; width: 14px; height: 14px;     flex: none; border:0;border-radius:0;background:var(--ds-loading-image,url("/static/brand-kit-20260911/tara/loader/tara-loader-cream.svg")) center/100% 100% no-repeat;animation:none;}

/* ---------- Toasts ---------- */
/* The region is promoted to the top layer (popover) and, while a modal dialog is open, mounted inside it —
   everything outside an open modal is inert, so a body-level toast paints behind the backdrop. */
.ds-toast-region { position: fixed; inset: auto; right: 20px; bottom: 20px; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; transform: none; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: calc(100vw - 24px); }
.ds-toast-region[popover]:not(:popover-open) { display: none; }
.ds-toast { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 12px; border-radius: var(--ds-radius-sm); background: var(--ds-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-pop); color: var(--ds-fg); font-size: var(--ds-text-md); pointer-events: auto; animation: ds-rise-in var(--ds-base) var(--ds-ease); }
.ds-toast.is-error { border-color: rgba(239,68,68,.35); }
.ds-toast.is-success { border-color: rgba(34,197,94,.35); }
.ds-toast svg { width: 16px; height: 16px; flex: none; color: var(--ds-muted); }
.ds-toast.is-error svg { color: var(--ds-danger-text); }
.ds-toast.is-success svg { color: var(--ds-success-text); }
.ds-toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--ds-base) var(--ds-ease), transform var(--ds-base) var(--ds-ease); }

/* ---------- Media tile primitives (modules add their own class names alongside) ---------- */
.ds-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--ds-stage); overflow: hidden; }
.ds-thumb > img, .ds-thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-thumb > img.is-loading { opacity: 0; }
.ds-thumb > img { transition: opacity var(--ds-base) var(--ds-ease); }
.ds-card { position: relative; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-card); overflow: hidden; transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-base) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease); }
.ds-card:hover { border-color: var(--ds-border-hover); box-shadow: var(--ds-shadow-hover); }

/* gradient border that fades in on hover (mask-composite keeps the interior untouched) */
.ds-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(to bottom, rgba(91,83,255,.35), transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--ds-base) var(--ds-ease); pointer-events: none; z-index: 1; }
.ds-card::before { display: none; }
.ds-card.is-selected { border-color: var(--ds-border-accent); box-shadow: 0 0 0 1px var(--ds-border-accent), 0 0 24px rgba(91,83,255,.12), var(--ds-shadow-card); }
.ds-card.is-dragging { opacity: .6; }
.ds-card-check { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 5px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.28); opacity: 0; transition: opacity var(--ds-fast) var(--ds-ease); }
.ds-card:hover .ds-card-check, .ds-card:focus-within .ds-card-check, .ds-card.is-selected .ds-card-check, .ds-card-check:has(input:checked) { opacity: 1; }
.ds-card-check input { width: 14px; height: 14px; }
.ds-card-info { padding: 9px 10px 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 6px; row-gap: 2px; align-items: center; }
.ds-card-title { grid-column: 1; font-size: var(--ds-text-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-fg); }
.ds-card-meta { grid-column: 1; font-size: var(--ds-text-xs); color: var(--ds-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-card-more { grid-column: 2; grid-row: 1 / span 2; }
.ds-brand-mark, .ds-interface .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ds-accent-solid); color: var(--ds-accent-contrast); font-weight: 700; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 14px rgba(91,83,255,.25); }

/* ---------- Hidden / visually hidden ---------- */
.ds-interface [hidden] { display: none !important; }
.ds-interface .sr-only, .ds-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Coarse pointers / touch ---------- */
@media (hover: none) and (pointer: coarse) {
  .ds-card-check { opacity: 1; }
  .ds-switch { min-height: 36px; }
  .ds-interface :where(button) { min-height: 36px; }
  .ds-interface :where(.ds-icon-btn) { width: 36px; height: 36px; min-height: 36px; }
  /* Touch floor. Module sheets set compact sizes at higher specificity (`.wm-layout > button`, `#client-review .discussion-tabs > button`)
     and load after this sheet, so the floor is declared !important — it only applies on coarse pointers. */
  .ds-segment > button { min-height: 36px !important; min-width: 36px !important; }
  .ds-tabs > button, .ds-tabs > [role=tab] { min-height: 36px !important; }
  .ds-menu button, .ds-menu [role=menuitem] { min-height: 36px !important; }
}
/* ---------- Motion preferences ---------- */
/* Only decorative loops pause in hidden tabs; entrance animations must always finish. */
.ds-motion-paused :is(.ds-skeleton,.ds-spinner,.ds-fallback.is-pending svg,.ds-orb,.ds-gradient-accent), .ds-motion-paused .ds-skeleton::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .ds-orb { animation: none; will-change: auto; }
  .ds-interface :is(.projects-header,.page > .intro,.auth-page > .intro) { transform: none; opacity: 1; will-change: auto; }
  .ds-interface :is(.projects-header,.intro,.run-heading,.review-intro) h1 { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-interface *, .ds-interface *::before, .ds-interface *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ds-skeleton::after { animation: none; }
  .ds-interface :is(.projects-header,.intro,.run-heading,.review-intro) h1 em, .ds-gradient-accent { animation: none; }
  .ds-interface :where(button):active:not(:disabled), .ds-card:hover { transform: none; }
}
/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .ds-atmosphere { display: none; }
  .ds-interface :is(.projects-header,.intro,.run-heading,.review-intro) h1 { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
  .ds-card::before { display: none; }
  .ds-interface :is(button,input,select,textarea) { border: 1px solid ButtonText; }
  .ds-card.is-selected, .ds-tabs > button[aria-selected=true], .ds-tabs > button[aria-pressed=true], .ds-segment > button[aria-pressed=true] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ds-chip, .ds-badge, .ds-timecode, .ds-duration { border: 1px solid CanvasText; }
  .ds-switch input::after { background: ButtonText; }
}

/* Setara identity assets are embedded outlines; no image-node or route changes. */
:root{--setara-mark:url("/static/brand-kit-20260911/setara/setara-mark-cream.svg");--setara-wordmark:url("/static/brand-kit-20260911/setara/setara-wordmark-swapped-ink.svg");--setara-wordmark-light:url("/static/brand-kit-20260911/setara/setara-wordmark-swapped-cream.svg")}
/* Setara identity, Frame.io surfaces and controls. */
body.ds-interface{font-weight:400;background:var(--ds-bg-deep)}
.ds-interface :is(.auth-card,.projects-header){transform:none;opacity:1}
.ds-interface .auth-card{padding:26px;background:var(--ds-bg-elevated);border:1px solid var(--ds-border);border-radius:8px;box-shadow:none;backdrop-filter:none}
.ds-interface .auth-card .panel{background:transparent;box-shadow:none}
.ds-interface .auth-page .brand .brand-mark{display:block;width:144px;height:44px;background:var(--setara-wordmark-light) center/contain no-repeat;border:0;border-radius:0;box-shadow:none;font-size:0}
.ds-interface .auth-page .brand>span:last-child{display:none}
#client-review .brand .ds-brand-mark,#client-review .review-header .brand .ds-brand-mark{width:88px;height:28px;flex:none;background:var(--setara-wordmark-light) center/contain no-repeat;border-radius:0;box-shadow:none;font-size:0}
.ds-interface :is(.primary,.pill-dark),.producer-room button.primary,#client-review .decision-row .is-approve{background:var(--ds-accent-solid);color:var(--ds-accent-contrast);border-color:transparent;box-shadow:none;border-radius:6px}
.ds-interface :is(.primary,.pill-dark):hover:not(:disabled),#client-review .decision-row .is-approve:hover:not(:disabled){background:var(--ds-accent-solid-hover);color:var(--ds-accent-contrast)}
.ds-interface :is(.badge,.ds-badge,.ds-chip){border-color:var(--ds-border);letter-spacing:0;text-transform:none}

.ds-interface .ds-avatar{background:var(--brand-ink)!important;color:var(--brand-paper-lit)}
#client-review #author-avatar.is-empty{color:var(--brand-paper-lit)}
.ds-interface :is(.ds-duration,.media-duration,.wm-duration,.wm-play,.wm-folder-share){color:var(--on-media-dark)}
.ds-interface .ds-card.is-selected{box-shadow:0 0 0 1px var(--ds-border-accent)}
.ds-interface .ds-gradient-accent{background:none;color:var(--ds-accent);-webkit-text-fill-color:currentColor;animation:none}
.ds-interface :is(.ds-menu,.ds-popover,.ds-toast){background:var(--ds-bg-elevated);backdrop-filter:none}
#client-review #focused-review,.producer-room .pr-body{background:var(--ds-bg-deep)}
#client-review .viewer-column,#client-review .discussion,.producer-room .pr-stage,.producer-room .pr-sidebar{border-radius:8px}
#client-review .review-player,.producer-room .pr-viewer{background:var(--media-dark)}
.ds-interface :is(.media-preview-dialog,.wm-preview-dialog) :is(video,img){filter:none}
.producer-room .pr-note-actions{opacity:1}
#client-review .reel-item img{opacity:1}
@media(max-width:760px){#client-review .review-header .brand .ds-brand-mark{width:72px;height:26px}}
.ds-switch input:checked::after{background:var(--ds-accent-contrast)}
@media(forced-colors:active){.ds-switch input:checked::after{background:ButtonText}}

/* Semantic statuses retain the original green/yellow/red distinctions. */
.ds-interface :is(.ds-chip.is-success,.badge.live){color:var(--ds-success-text);background:var(--ds-success-soft);border-color:rgba(34,197,94,.3)}
.ds-interface :is(.ds-chip.is-warning,.badge.simulation){color:var(--ds-warning-text);background:var(--ds-warning-soft);border-color:rgba(245,181,68,.3)}
.ds-interface .ds-chip.is-danger{color:var(--ds-danger-text);background:var(--ds-danger-soft);border-color:rgba(239,68,68,.3)}
/* Approve follows the accent palette (owner, Sep 7): styled in client-review.css. */

/* Soft neo-pastel accents; the workspace surfaces remain Frame.io dark. */
.ds-interface button.primary,.producer-room button.primary,.ds-interface .wm-share{background:var(--ds-accent-gradient);color:var(--ds-accent-contrast)}
.ds-interface button.primary:hover:not(:disabled),.producer-room button.primary:hover:not(:disabled),.ds-interface .wm-share:hover:not(:disabled){background:var(--ds-accent-gradient);color:var(--ds-accent-contrast)}
.ds-interface .ds-avatar,#client-review #author-avatar.is-empty{color:var(--ds-accent-contrast)}

/* === Frame.io menu skin: #262a3b panel, radius 8, 8px inset, 34px items (radius 4, 13px), check on the chosen radio. === */
.ds-menu { min-width: 192px; padding: 8px; background: var(--ds-surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 8px; box-shadow: 0 1px 20px rgba(0,0,0,.16), 0 12px 16px rgba(0,0,0,.2), 0 0 0 1px rgba(var(--ds-ink-rgb),.04); }
.ds-menu button, .ds-menu [role=menuitem] { min-height: 34px; padding: 0 8px; border-radius: 4px; font-size: 13px; }
.ds-menu button:hover:not(:disabled), .ds-menu [role=menuitem]:hover { background: rgba(85,88,110,.4); }
.ds-menu button > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-menu .ds-menu-check { display: inline-flex; width: 16px; height: 16px; margin-left: 12px; color: var(--ds-fg); }
.ds-menu .ds-menu-check > svg { width: 16px; height: 16px; color: var(--ds-fg); }
.ds-menu hr, .ds-menu-separator { margin: 6px 0; border-top-color: rgba(var(--ds-ink-rgb),.08); }
.ds-menu-label { padding: 0 8px; min-height: 30px; display: flex; align-items: center; font-size: 12px; font-weight: 400; color: rgba(189,192,212,.71); text-transform: none; letter-spacing: 0; }

/* Status is text, not a dot: chips and badges keep their tint, the indicator dots are gone everywhere. */
.ds-chip .ds-dot, .ds-badge .ds-dot, .ds-chip > i.ds-dot { display: none; }

/* Numeric readouts keep their columns without a monospace face. */
.ds-timecode, .ds-duration, [id$="-readout"], [id$="-frame"], .tbtn-text, .wm-transport-time, .wm-zoom output, .pr-frame-index { font-variant-numeric: tabular-nums; }

/* === Screening-room system (Sep 8): hairlines, type, solid occluders. === */
@media (max-resolution: 1dppx) { :root { --ds-hair: 1px; --ds-border: rgba(var(--ds-ink-rgb),.05); --ds-border-hover: rgba(var(--ds-ink-rgb),.09); --ds-border-strong: rgba(var(--ds-ink-rgb),.14); } }
.ds-interface h1, .ds-interface h2, .ds-interface h3 { font-weight: 510; letter-spacing: -.018em; text-wrap: balance; }
.ds-interface h1 { letter-spacing: -.032em; }
.ds-interface :where(button.primary,button.ds-primary,.review-portal button.primary) { color: var(--ds-accent-contrast); box-shadow: var(--ds-shadow-accent); }
.ds-interface :where(button.primary,button.ds-primary,.review-portal button.primary):hover:not(:disabled) { box-shadow: var(--ds-shadow-accent-hover); }
.ds-popover, .ds-dialog, dialog.ds-dialog { background: var(--ds-surface-solid); }
.ds-menu button:hover:not(:disabled), .ds-menu [role=menuitem]:hover { background: var(--ds-surface-active); }
/* Dropdowns occlude what they cover: solid panel, darker opaque control inside. */
:root { --ds-surface-solid-2: #1a1c22; --ds-surface-solid-3: #22242c; --ds-ink-rgb: 255,255,255; --ds-shell-surface: rgba(255,255,255,.05); --ds-shell-topbar: rgba(255,255,255,.03); --ds-shell-page: rgba(255,255,255,.035); }
.ds-menu, .ds-popover, .toolbar-pop, .project-switcher-pop, .team-popover { background: var(--ds-surface-solid); border: var(--ds-hair) solid rgba(var(--ds-ink-rgb),.14); }
.ds-interface :where(select), .toolbar-pop-select, .toolbar-select, .version-select, #feedback-category { background-color: var(--ds-surface-solid-2); }
.ds-interface :where(select):hover:not(:disabled), .toolbar-pop-select:hover { background-color: var(--ds-surface-solid-3); }
.ds-menu button:hover:not(:disabled), .ds-menu [role=menuitem]:hover { background: var(--ds-surface-solid-3); }

/* === Light theme (Sep 8). `data-theme` is stamped on <html> by theme.js before first paint and kept in sync by the
   account menu (Dark / Light / System). Only the producer app opts in; the client share page stays on the dark stage.
   Media rules hold in both themes: players, thumbnail wells and overlays keep their near-black stage. === */
:root[data-theme="light"] {
  color-scheme: light;
  --brand-paper: #f2f2f5;
  --ds-bg-deep: #d9dae0;
  --ds-bg: #e3e4e9;
  --ds-bg-elevated: #ffffff;
  --ds-surface: rgba(20,22,30,.06);
  --ds-surface-hover: rgba(20,22,30,.1);
  --ds-surface-active: rgba(20,22,30,.15);
  --ds-glass: rgba(255,255,255,.88);
  --ds-overlay: rgba(20,22,30,.45);
  --ds-fg: #111216;
  --ds-muted: #444955;
  --ds-subtle: #5c616d;
  --ds-faint: rgba(92,97,109,.55);
  --ds-accent-text: #5a2fb0;
  --ds-accent-soft: rgba(111,67,196,.12);
  --ds-accent-glow: rgba(111,67,196,.22);
  --ds-accent-rgb: 111,67,196;
  --ds-accent-gradient-text: linear-gradient(100deg, #5a2fb0 0%, #7d6200 100%);
  --ds-success-text: #0f6b3a; --ds-success-soft: rgba(46,204,122,.14); --ds-success-line: rgba(21,122,69,.3);
  --ds-warning-text: #6a5300; --ds-warning-soft: rgba(240,205,51,.22); --ds-warning-line: rgba(125,98,0,.3);
  --ds-danger-text: #b3172f; --ds-danger-soft: rgba(244,51,80,.12); --ds-danger-line: rgba(196,30,56,.3);
  --ds-timecode: #7d6200; --ds-timecode-bg: rgba(240,205,51,.28);
  --ds-surface-solid: #ffffff;
  --ds-surface-solid-2: #f1f1f4;
  --ds-surface-solid-3: #e6e6ec;
  --ds-ink-rgb: 20,22,30;
  --ds-shell-surface: rgba(255,255,255,.88);
  --ds-shell-topbar: rgba(255,255,255,.7);
  --ds-shell-page: rgba(255,255,255,.84);
  --ds-border: rgba(20,22,30,.16);
  --ds-border-hover: rgba(20,22,30,.24);
  --ds-border-strong: rgba(20,22,30,.34);
  --ds-border-accent: rgba(111,67,196,.45);
  --ds-input: #ffffff;
  --ds-control: rgba(20,22,30,.08);
  --ds-control-hover: rgba(20,22,30,.14);
  --ds-shadow-card: inset 0 1px 0 0 rgba(255,255,255,.7);
  --ds-shadow-hover: inset 0 1px 0 0 rgba(255,255,255,.8), 0 8px 24px rgba(20,22,30,.16), 0 1px 3px rgba(20,22,30,.12);
  --ds-shadow-pop: 0 0 0 .5px rgba(20,22,30,.2), 0 12px 32px rgba(20,22,30,.2), 0 2px 8px rgba(20,22,30,.1);
  --ds-shadow-dialog: 0 0 0 .5px rgba(20,22,30,.12), 0 24px 64px rgba(20,22,30,.22), 0 4px 12px rgba(20,22,30,.1);
  --ds-shadow-button: inset 0 1px 0 0 rgba(255,255,255,.6);
  --ds-shadow-accent: inset 0 1px 0 0 rgba(255,255,255,.35), 0 8px 24px rgba(111,67,196,.18);
  --ds-shadow-accent-hover: inset 0 1px 0 0 rgba(255,255,255,.45), 0 10px 30px rgba(111,67,196,.24);
  --ds-focus: 0 0 0 1px var(--ds-bg), 0 0 0 3px rgba(111,67,196,.7);
}
@media (max-resolution: 1dppx) { :root[data-theme="light"] { --ds-border: rgba(20,22,30,.14); --ds-border-hover: rgba(20,22,30,.22); --ds-border-strong: rgba(20,22,30,.32); } }

:root[data-theme="light"] .ds-orb:nth-child(1) { background: radial-gradient(closest-side, rgba(170,120,240,.22), rgba(170,120,240,.08) 45%, rgba(170,120,240,0) 74%); }
:root[data-theme="light"] .ds-orb:nth-child(2) { background: radial-gradient(closest-side, rgba(224,200,90,.16), rgba(224,200,90,.06) 50%, rgba(224,200,90,0) 74%); }
:root[data-theme="light"] .ds-orb:nth-child(3) { background: radial-gradient(closest-side, rgba(170,120,240,.12), rgba(170,120,240,.05) 50%, rgba(170,120,240,0) 74%); }
:root[data-theme="light"] .ds-orb:nth-child(4) { background: radial-gradient(closest-side, rgba(224,200,90,.1), rgba(224,200,90,0) 70%); }
:root[data-theme="light"] .ds-menu button:hover:not(:disabled), :root[data-theme="light"] .ds-menu [role=menuitem]:hover { background: var(--ds-surface-solid-3); }
:root[data-theme="light"] .ds-chip.is-success, :root[data-theme="light"] .badge.live { border-color: var(--ds-success-line); }
:root[data-theme="light"] .ds-chip.is-warning, :root[data-theme="light"] .badge.simulation { border-color: var(--ds-warning-line); }
:root[data-theme="light"] .ds-chip.is-danger { border-color: var(--ds-danger-line); }
:root[data-theme="light"] .shell .rail .brand .brand-mark, :root[data-theme="light"] .shell .sidebar .brand .brand-mark { filter: none; }
/* Gradient buttons paint from the border box: with the default padding-box origin the 1px transparent border shows the
   gradient's far end repeated as a hairline at each side, which read as clipped corners in light mode. */
.ds-interface :is(button.primary,button.ds-primary,.wm-share,.home-new,.pane-actions .primary,.pane-toolbar .primary), .producer-room button.primary, .review-portal button.primary { background-origin: border-box !important; background-clip: border-box !important; }
/* Light contrast (owner, Sep 8): solid-white panels on a grey ground, darker ink and firmer hairlines throughout. */

:root[data-theme="light"] .ds-interface :where(input,textarea,select) { border-color: var(--ds-border-hover); }
:root[data-theme="light"] .ds-menu, :root[data-theme="light"] .ds-popover, :root[data-theme="light"] .toolbar-pop, :root[data-theme="light"] .project-switcher-pop, :root[data-theme="light"] .team-popover { border-color: rgba(20,22,30,.22); }

/* Review status colors illuminate the glass frame/caption, never the media. */
:root { --ds-review-red-rgb: 238,91,106; --ds-review-orange-rgb: 237,159,67; --ds-review-green-rgb: 68,192,137; --ds-review-glow-alpha: .14; --ds-review-tint-alpha: .09; }
:root[data-theme="light"] { --ds-review-red-rgb: 184,46,66; --ds-review-orange-rgb: 160,96,20; --ds-review-green-rgb: 25,125,78; --ds-review-glow-alpha: .12; --ds-review-tint-alpha: .07; }
[data-feedback-status="revisions"] { --tile-review-rgb: var(--ds-review-red-rgb); }
[data-feedback-status="pending"] { --tile-review-rgb: var(--ds-review-orange-rgb); }
[data-feedback-status="approved"] { --tile-review-rgb: var(--ds-review-green-rgb); }
:is(.workspace-media .wm-tile, #client-review .review-browser-item)[data-feedback-status]:not([data-feedback-status=""]) {
  border-color: rgba(var(--tile-review-rgb),.5);
  box-shadow: 0 0 0 1px rgba(var(--tile-review-rgb),.16), 0 3px 16px rgba(var(--tile-review-rgb),var(--ds-review-glow-alpha));
}
:is(.workspace-media .wm-tile, #client-review .review-browser-item)[data-feedback-status]:not([data-feedback-status=""]) :is(.wm-file-details,.asset-card-caption) {
  background: linear-gradient(to top,rgba(var(--tile-review-rgb),var(--ds-review-tint-alpha)),transparent);
}
:is(.workspace-media,#client-review) .tile-review-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; grid-column: 1 / -1; }
:is(.workspace-media,#client-review) .tile-review-label { color: rgb(var(--tile-review-rgb)); font-weight: 500; }
:is(.workspace-media,#client-review) .tile-added-date { margin-left: auto; white-space: nowrap; }
.workspace-media .wm-file-details .wm-more { grid-row: 1; }
#client-review .asset-status:empty { display: none; }
#client-review .asset-card-caption { padding-right: 8px; }
#client-review .media-grid .card-more { top: auto; bottom: 34px; }
#client-review .media-grid .asset-card-caption .ds-card-title { padding-right: 24px; }
@media (forced-colors: active) {
  :is(.workspace-media .wm-tile, #client-review .review-browser-item)[data-feedback-status]:not([data-feedback-status=""]) { box-shadow: none; border-color: CanvasText; }
  :is(.workspace-media,#client-review) .tile-review-label { color: CanvasText; }
}
#client-review .asset-card-caption .tile-review-meta { grid-row: 2; }

/* Remaining allowance and real generation activity, shared by both viewers. */
.ds-allowance{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ds-muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
.ds-battery{position:relative;display:block;width:26px;height:14px;padding:2px;border:1px solid currentColor;border-radius:4px;box-sizing:border-box;flex:none}
.ds-battery::after{content:"";position:absolute;left:100%;top:4px;width:3px;height:4px;background:currentColor;border-radius:0 2px 2px 0}
.ds-battery>span{display:block;height:100%;border-radius:1px;background:var(--ds-accent-gradient);transition:width .5s ease}
.ds-allowance.is-low{color:var(--ds-warning-text)}
.has-generation{position:relative}
.ds-generation-overlay{position:absolute!important;inset:0;z-index:5;display:flex!important;align-items:center;justify-content:center;gap:10px;padding:8px!important;overflow:hidden;pointer-events:none;background:rgba(0,0,0,.38);color:var(--on-media-dark,#fff)!important;border-radius:inherit;font-size:12px!important;line-height:1.5;isolation:isolate}
.ds-generation-overlay::before{content:none}
.ds-generation-spinner{display:block;width:20px;height:20px;flex:none;border:0;border-radius:0;background:var(--ds-loading-image,url("/static/brand-kit-20260911/tara/loader/tara-loader-cream.svg")) center/100% 100% no-repeat;animation:none;}
@keyframes ds-generation-spin{to{transform:rotate(360deg)}}
@keyframes ds-generation-sweep{to{transform:translateX(100%)}}
.reel-item .ds-generation-label,.wm-cover .ds-generation-label{display:none}
@media(prefers-reduced-motion:reduce){.ds-generation-overlay::before,.ds-generation-spinner{animation:none}.ds-battery>span{transition:none}}
@media(forced-colors:active){.ds-battery>span{background:Highlight}.ds-generation-spinner{border-color:GrayText;border:0;border-radius:0;background:var(--ds-loading-image,url("/static/brand-kit-20260911/tara/loader/tara-loader-cream.svg")) center/100% 100% no-repeat;animation:none;}.ds-generation-overlay{background:Canvas;color:CanvasText!important}}

/* Local image replacement uses the same quiet, opaque dialog as other asset actions. */
.image-upload-drop{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;min-height:180px;padding:24px;border:1px dashed var(--ds-border-strong);border-radius:var(--ds-radius);background:var(--ds-surface);text-align:center;overflow-wrap:anywhere}
.image-upload-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.image-upload-drop svg{width:24px;height:24px;color:var(--ds-muted)}
.image-upload-drop small{color:var(--ds-muted)}
.image-upload-drop:focus-within,.image-upload-drop.is-dragover{border-color:var(--ds-accent);background:var(--ds-accent-soft)}

/* Multiline inputs grow with their contents; long drafts scroll instead of requiring a drag handle. */
textarea {
  resize: none !important;
  field-sizing: content;
  height: auto !important;
  max-height: min(320px, 40dvh);
  overflow-y: auto;
}

/* One site-wide loading mark. Its SVG owns the animation; never rotate it again. */
:root{--ds-loading-image:url('/static/brand-kit-20260911/tara/loader/tara-loader-cream.svg')}
.ds-loading-mark,.ds-spinner,.spinner,.launch-spinner,.ds-generation-spinner,
.boot::before,#client-review .loading:not(.is-error)::before,
.producer-room .pr-viewer.is-loading::after,.producer-room button.is-busy::after,
.workspace-media .wm-refresh.is-busy>svg,.asm-agent[data-agent-state="working"] .asm-agent-mark>svg{
  display:inline-block;flex:none;border:0!important;border-radius:0!important;
  background:var(--ds-loading-image) center/100% 100% no-repeat!important;
  animation:none!important;filter:drop-shadow(0 0 1px #0005);
}
.ds-loading-mark{width:20px;height:20px;vertical-align:middle}
.workspace-media .wm-refresh.is-busy>svg>*,.asm-agent[data-agent-state="working"] .asm-agent-mark>svg>*{visibility:hidden}
.ds-motion-paused{--ds-loading-image:url('/static/brand-kit-20260911/tara/loader/tara-loader-still-cream.svg')}
@media(prefers-reduced-motion:reduce){:root{--ds-loading-image:url('/static/brand-kit-20260911/tara/loader/tara-loader-still-cream.svg')}}

/* Initial project/media/search placeholders use the same mark as later loading states. */
.projects-loading-thumb,.wm-skeleton-thumb,.ws-skeleton>span:first-child{position:relative}
.projects-loading-thumb::after,.wm-skeleton-thumb::after,.ws-skeleton>span:first-child::after{
 content:"";position:absolute;inset:50% auto auto 50%;width:32px;height:32px;
 transform:translate(-50%,-50%);background:var(--ds-loading-image) center/100% 100% no-repeat;
 animation:none;pointer-events:none;
}
.ws-skeleton>span:first-child::after{width:20px;height:20px}

/* September 11 supplied brand kit: theme-specific assets and reduced-motion stills. */
:root[data-theme="light"]{--setara-mark:url("/static/brand-kit-20260911/setara/setara-mark-ink.svg");--setara-wordmark-light:url("/static/brand-kit-20260911/setara/setara-wordmark-swapped-ink.svg");--ds-loading-image:url("/static/brand-kit-20260911/tara/loader/tara-loader-ink.svg")}
:root[data-theme="light"].ds-motion-paused,:root[data-theme="light"] .ds-motion-paused{--ds-loading-image:url("/static/brand-kit-20260911/tara/loader/tara-loader-still-ink.svg")}
@media(prefers-reduced-motion:reduce){:root[data-theme="light"]{--ds-loading-image:url("/static/brand-kit-20260911/tara/loader/tara-loader-still-ink.svg")}}

.ds-toast{max-width:min(360px,calc(100vw - 32px));line-height:1.45}.ds-toast>span{min-width:0;overflow-wrap:anywhere}.ds-toast-dismiss{flex:none;padding:4px;border:0;background:transparent;color:inherit;min-height:24px;cursor:pointer}

.ds-toast{max-width:min(460px,calc(100vw - 32px));flex-wrap:wrap}.ds-toast>span{flex:1;min-width:140px;overflow-wrap:anywhere}.ds-toast-action{flex:none;padding:5px 9px;border:1px solid var(--ds-border);border-radius:6px;color:var(--ds-fg);background:var(--ds-surface-hover);font-size:12px}
.reference-repair-guidance{padding:12px;margin-bottom:12px;border:1px solid var(--ds-border);border-radius:10px;background:var(--ds-surface);font-size:13px;line-height:1.5}.reference-repair-guidance p{margin:6px 0 10px;color:var(--ds-muted)}.reference-repair-guidance button{font-size:12px;min-height:32px}

/* Shared dropdowns stay in the Setara palette, including long lists and dialogs. */
.ds-menu { max-width: min(360px, calc(100vw - 16px)); max-height: min(440px, calc(100dvh - 16px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ds-menu .ds-menu-label { white-space: normal; line-height: 1.45; padding-block: 6px; }
.ds-menu button:disabled { opacity: .5; cursor: default; }