:root {
  --clay: #BFE3F2;
  --gold: #FFBF00;
  --ink:  #E8F4F8;
  --cream: #02181C;
  --night: #032124;
  --forest: #08353b;
  --lagoon: #11444f;
  --current: #1d5260;
  --sea: #88bfbf;
  --ice: #cfe9ee;
  --bone: #f5f3ef;
  --white: #ffffff;
  --amber: #ffbf00;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  line-height: 1.7;
  text-wrap: pretty;
}

p {
  orphans: 3;
  widows: 3;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.headline-balance { text-wrap: balance; }

.rule-clay {
  height: 1px;
  background: linear-gradient(90deg, var(--clay), transparent);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.link-underline {
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-underline:hover { background-size: 100% 1.5px; }

.score-ring {
  background: conic-gradient(var(--clay) calc(var(--pct) * 1%), #11444F 0);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(191, 227, 242, 0.25);
  border-top-color: var(--clay);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.field-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(191, 227, 242, 0.2);
}

/* Dark card = section en contraste fort sur le site vitrine */
.dark-card {
  background: #0C3A41;
  color: #BFE3F2;
}
.dark-card-deep {
  background: #05272C;
  color: #BFE3F2;
}

/* Panel */
.modal-open { overflow: hidden; }
[data-modal] { transition: opacity 0.2s ease; }
[data-modal].hidden { display: none; }

.tl-track { position: relative; height: 8px; border-radius: 999px; background: #11444F; }
.tl-seg { position: absolute; top: 0; height: 8px; border-radius: 999px; background: var(--clay); opacity: 0.85; }

.marker-chip { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }

/* Annotation studio v2 */
.ka-studio {
  --ka-label-width: 214px;
  --ka-lane-height: 38px;
  color: var(--ink);
}
.ka-studio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.ka-back-link { color: rgba(207,233,238,.58); font-size: 12px; font-weight: 600; }
.ka-back-link:hover { color: var(--gold); }
.ka-status-pill {
  flex: none; border: 1px solid rgba(191,227,242,.16); border-radius: 999px;
  padding: 3px 10px; color: var(--ice); background: rgba(191,227,242,.07);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ka-save-state { color: rgba(207,233,238,.54); font-size: 11px; min-width: 100px; text-align: right; }
.ka-save-state.is-saving { color: var(--gold); }
.ka-save-state.is-error { color: #ff8e8e; }
.ka-button, .ka-icon-button, .ka-play-button {
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;
  border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1; transition: .15s ease;
}
.ka-button { min-height: 34px; padding: 0 13px; }
.ka-button:disabled, .ka-icon-button:disabled { cursor: not-allowed; opacity: .35; }
.ka-button-primary { color: #05272c; background: var(--clay); }
.ka-button-primary:hover { background: var(--ice); }
.ka-button-gold { color: #172c2d; background: var(--gold); }
.ka-button-gold:hover { background: #ffd34d; }
.ka-button-quiet { color: var(--ice); border-color: rgba(191,227,242,.16); background: rgba(191,227,242,.04); }
.ka-button-quiet:hover { border-color: rgba(191,227,242,.38); background: rgba(191,227,242,.09); }
.ka-button-danger { color: #ffadad; border-color: rgba(255,110,110,.25); background: rgba(255,90,90,.07); }
.ka-button-danger:hover { background: rgba(255,90,90,.14); }
.ka-video-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; }
.ka-video-panel, .ka-side-panel, .ka-timeline-panel {
  border: 1px solid rgba(191,227,242,.12); border-radius: 14px; background: #041f24;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.ka-video-panel { min-width: 0; overflow: hidden; }
.ka-video-stage {
  position: relative; display: flex; height: min(48vh, 510px); min-height: 330px;
  align-items: center; justify-content: center; overflow: hidden; background: #000;
}
.ka-video-world { position: absolute; transform-origin: 0 0; will-change: transform; }
.ka-video-world video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.ka-video-world canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.ka-video-world .ka-tracking-overlay,.ka-companion-video-world .ka-tracking-overlay { z-index: 3; pointer-events: none; }
.ka-video-world.is-pan canvas { cursor: grab; }
.ka-video-world.is-panning canvas { cursor: grabbing; }
.ka-video-world.is-draw canvas { cursor: crosshair; }
.ka-video-world.is-tracking-pick [data-video-overlay],.ka-companion-video-world.is-tracking-pick [data-companion-overlay] { cursor: crosshair; }
.ka-spatial-toolbar {
  position: absolute; z-index: 5; top: 10px; left: 10px; display: flex; gap: 4px; padding: 4px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px);
}
.ka-spatial-toolbar button { border-radius: 6px; padding: 6px 8px; color: rgba(255,255,255,.65); font-size: 9px; font-weight: 700; }
.ka-spatial-toolbar button:hover, .ka-spatial-toolbar button.is-active { color: #051f24; background: var(--gold); }
.ka-video-loading {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.ka-frame-badge {
  position: absolute; right: 10px; bottom: 10px; padding: 5px 8px; border-radius: 6px;
  color: rgba(255,255,255,.8); background: rgba(0,0,0,.72); font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ka-tracking-status {
  position: absolute; z-index: 5; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 7px;
  border: 1px solid rgba(103,232,168,.28); border-radius: 999px; padding: 6px 9px;
  color: #dcfff0; background: rgba(0,20,22,.82); font-size: 10px; font-weight: 700; backdrop-filter: blur(8px);
}
.ka-tracking-status i { width: 7px; height: 7px; border-radius: 50%; background: #67e8a8; box-shadow: 0 0 9px rgba(103,232,168,.72); }
.ka-tracking-status.is-searching i { background: var(--gold); box-shadow: 0 0 9px rgba(255,191,0,.72); }
.ka-tracking-status.is-error { border-color: rgba(255,110,110,.35); color: #ffc2c2; }
.ka-tracking-status.is-error i { background: #ff7373; box-shadow: 0 0 9px rgba(255,90,90,.72); }
.ka-transport {
  display: flex; align-items: center; gap: 7px; min-height: 54px; padding: 9px 11px;
  border-top: 1px solid rgba(191,227,242,.1); background: #05272c;
}
.ka-icon-button { width: 35px; height: 35px; color: var(--ice); border-color: rgba(191,227,242,.15); background: rgba(191,227,242,.045); }
.ka-icon-button:hover { color: #fff; border-color: rgba(191,227,242,.38); background: rgba(191,227,242,.1); }
.ka-play-button { width: 40px; height: 40px; color: #05272c; background: var(--gold); font-size: 15px; }
.ka-time-readout {
  display: flex; gap: 6px; margin-left: 5px; color: var(--ice); font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.ka-rate-label { display: flex; align-items: center; gap: 6px; margin-left: auto; color: rgba(207,233,238,.52); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ka-select-compact { height: 32px; border: 1px solid rgba(191,227,242,.15); border-radius: 7px; padding: 0 7px; color: var(--ice); background: #08353b; font-size: 11px; outline: none; }
.ka-video-zoom-range { width: 92px; accent-color: var(--gold); }
.ka-video-zoom-value { min-width: 35px; color: rgba(207,233,238,.55); font: 9px/1 ui-monospace, monospace; text-align: center; }
.ka-spatial-object-row { display: grid; grid-template-columns: minmax(0,1fr) 34px; gap: 5px; }
.ka-spatial-eye { border: 1px solid rgba(191,227,242,.14); border-radius: 7px; color: var(--ice); background: rgba(191,227,242,.04); font-size: 14px; }
.ka-spatial-eye:hover { border-color: rgba(191,227,242,.35); background: rgba(191,227,242,.09); }
.ka-side-panel { min-width: 0; overflow: hidden; }
.ka-side-tabs { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(191,227,242,.1); }
.ka-side-tabs button { position: relative; padding: 13px 8px; color: rgba(207,233,238,.5); font-size: 11px; font-weight: 700; }
.ka-side-tabs button.is-active { color: var(--ice); background: rgba(191,227,242,.04); }
.ka-side-tabs button.is-active::after { content: ''; position: absolute; right: 16px; bottom: -1px; left: 16px; height: 2px; background: var(--gold); }
.ka-side-content { height: calc(min(48vh, 510px) + 54px - 45px); min-height: 339px; overflow: auto; padding: 13px; }
.ka-input {
  width: 100%; border: 1px solid rgba(191,227,242,.14); border-radius: 8px; padding: 8px 10px;
  color: var(--ice); background: #05272c; font-size: 12px; line-height: 1.3; outline: none;
}
.ka-input:focus { border-color: var(--clay); box-shadow: 0 0 0 2px rgba(191,227,242,.08); }
.ka-input::placeholder { color: rgba(207,233,238,.3); }
.ka-field { display: grid; gap: 5px; color: rgba(207,233,238,.55); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ka-track-palette { display: grid; gap: 10px; margin-top: 12px; }
.ka-text-button { color: var(--gold); font-size: 10px; font-weight: 700; }
.ka-text-button:hover { color: #ffe07a; }
.ka-track-manager-row { display: grid; grid-template-columns: 20px 24px minmax(0,1fr); align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; }
.ka-track-manager-row:hover { border-color: rgba(191,227,242,.1); background: rgba(191,227,242,.035); }
.ka-track-manager-row.is-dragging { opacity: .42; }
.ka-track-manager-row.is-drop-before { box-shadow: 0 -2px 0 var(--gold); }
.ka-track-manager-row.is-drop-after { box-shadow: 0 2px 0 var(--gold); }
.ka-track-drag { display: grid; height: 26px; cursor: grab; place-items: center; color: rgba(207,233,238,.28); font-size: 13px; letter-spacing: -2px; }
.ka-track-drag:active { cursor: grabbing; }
.ka-track-visibility { width: 15px; height: 15px; accent-color: var(--gold); }
.ka-palette-group { display: grid; gap: 4px; }
.ka-palette-group-title { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px; color: rgba(207,233,238,.4); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ka-track-choice {
  display: flex; width: 100%; align-items: center; gap: 8px; min-height: 29px; padding: 4px 7px;
  border: 1px solid transparent; border-radius: 7px; color: rgba(232,244,248,.75); font-size: 11px; text-align: left;
}
.ka-track-choice:hover { background: rgba(191,227,242,.06); }
.ka-track-choice.is-active { border-color: rgba(255,191,0,.38); color: #fff; background: rgba(255,191,0,.08); }
.ka-track-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--track-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--track-color) 20%, transparent); }
.ka-track-choice small { margin-left: auto; color: rgba(207,233,238,.3); font-size: 9px; }
.ka-add-track { display: grid; gap: 10px; margin-top: 12px; border: 1px solid rgba(88,199,216,.2); border-radius: 10px; padding: 12px; background: rgba(88,199,216,.045); }
.ka-color-input { width: 100%; height: 34px; border: 1px solid rgba(191,227,242,.14); border-radius: 8px; padding: 3px; background: #05272c; }
.ka-empty-note { border: 1px dashed rgba(191,227,242,.15); border-radius: 10px; padding: 24px 14px; color: rgba(207,233,238,.42); font-size: 12px; text-align: center; }
.ka-revision-box { border: 1px solid rgba(191,227,242,.1); border-radius: 9px; padding: 9px 10px; background: rgba(191,227,242,.025); }
.ka-revision-box summary { cursor: pointer; color: rgba(207,233,238,.62); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ka-revision-item { border-left: 2px solid rgba(191,227,242,.18); padding: 5px 0 5px 9px; color: rgba(207,233,238,.5); font-size: 9px; line-height: 1.45; }
.ka-revision-item strong { color: var(--ice); }
.ka-divider { height: 1px; margin: 18px 0; background: rgba(191,227,242,.1); }
.ka-speed-zone-item, .ka-thread-item { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(191,227,242,.09); border-radius: 7px; padding: 7px 8px; background: rgba(191,227,242,.035); font-size: 10px; }
.ka-speed-zone-item button { margin-left: auto; color: rgba(255,180,180,.7); }
.ka-thread-item { align-items: flex-start; flex-direction: column; }
.ka-thread-status { border-radius: 999px; padding: 2px 6px; color: var(--gold); background: rgba(255,191,0,.09); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.ka-timeline-panel { margin-top: 14px; overflow: hidden; }
.ka-timeline-toolbar { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 11px; border-bottom: 1px solid rgba(191,227,242,.1); background: #05272c; }
.ka-range-readout { display: flex; gap: 8px; margin-left: 5px; color: rgba(207,233,238,.5); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ka-zoom-label { display: flex; align-items: center; gap: 8px; color: rgba(207,233,238,.5); font-size: 10px; }
.ka-zoom-label input { width: 110px; accent-color: var(--gold); }
.ka-overview-wrap { display: grid; grid-template-columns: var(--ka-label-width) minmax(0,1fr); height: 48px; border-bottom: 1px solid rgba(191,227,242,.1); background: #031b20; }
.ka-overview-label { display: flex; align-items: center; padding: 0 13px; border-right: 1px solid rgba(191,227,242,.1); color: rgba(207,233,238,.4); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ka-overview-wrap canvas { width: 100%; height: 48px; cursor: crosshair; }
.ka-timeline-scroll { position: relative; max-height: 44vh; overflow: auto; background: #031b20; overscroll-behavior: contain; }
.ka-timeline-content { position: relative; min-width: 100%; width: max-content; }
.ka-ruler-row, .ka-lane-row { display: flex; width: max-content; min-width: 100%; }
.ka-ruler-row { position: sticky; top: 0; z-index: 12; height: 31px; border-bottom: 1px solid rgba(191,227,242,.12); background: rgba(3,27,32,.97); }
.ka-lane-row { height: var(--ka-lane-height); border-bottom: 1px solid rgba(191,227,242,.065); }
.ka-lane-row:hover { background: rgba(191,227,242,.018); }
.ka-lane-row.is-selected { background: rgba(255,191,0,.025); }
.ka-lane-label {
  position: sticky; left: 0; z-index: 8; display: flex; width: var(--ka-label-width); min-width: var(--ka-label-width);
  align-items: center; gap: 8px; overflow: hidden; padding: 0 12px; border-right: 1px solid rgba(191,227,242,.1);
  color: rgba(232,244,248,.72); background: #041f24; font-size: 10px;
}
.ka-lane-label button { display: flex; width: 100%; align-items: center; gap: 8px; overflow: hidden; text-align: left; }
.ka-lane-label button span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-lane-count { margin-left: auto; color: rgba(207,233,238,.27); font-size: 9px; }
.ka-ruler-label { z-index: 14; color: rgba(207,233,238,.4); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ka-ruler-surface, .ka-lane-surface { position: relative; flex: none; }
.ka-ruler-surface { height: 31px; overflow: hidden; }
.ka-ruler-surface { cursor: zoom-in; }
.ka-ruler-surface canvas { position: absolute; inset: 0; width: 100%; height: 31px; }
.ka-tick-layer { position: absolute; inset: 0; pointer-events: none; }
.ka-ruler-tick { position: absolute; top: 0; bottom: 0; width: 1px; color: rgba(207,233,238,.38); }
.ka-ruler-tick i { position: absolute; top: 19px; left: 0; width: 1px; height: 12px; background: rgba(191,227,242,.2); }
.ka-ruler-tick b { position: absolute; top: 3px; left: 4px; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.ka-lane-surface { height: var(--ka-lane-height); cursor: crosshair; background-image: linear-gradient(90deg, rgba(191,227,242,.028) 1px, transparent 1px); background-size: 50px 100%; }
.ka-event {
  position: absolute; top: 6px; height: calc(var(--ka-lane-height) - 12px); min-width: 3px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--track-color) 82%, white 18%); border-radius: 5px;
  color: #02181c; background: color-mix(in srgb, var(--track-color) 82%, transparent); cursor: grab;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.18);
}
.ka-event:hover { filter: brightness(1.14); z-index: 4; }
.ka-event.is-selected { z-index: 5; outline: 2px solid #fff; outline-offset: 1px; }
.ka-event.is-saving { opacity: .58; }
.ka-event-label { display: block; overflow: hidden; padding: 4px 7px; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.ka-event-handle { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.ka-event-handle.is-start { left: 0; }
.ka-event-handle.is-end { right: 0; }
.ka-draft-range { position: absolute; top: 6px; height: calc(var(--ka-lane-height) - 12px); border: 1px dashed #fff; border-radius: 5px; background: rgba(255,255,255,.13); pointer-events: none; }
.ka-time-zoom-draft { position: absolute; z-index: 20; top: 0; bottom: 0; min-width: 2px; border: 1px solid rgba(255,239,156,.95); background: rgba(255,191,0,.2); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.ka-playhead { position: absolute; z-index: 10; top: 31px; bottom: 0; width: 1px; background: #ffef9c; pointer-events: none; box-shadow: 0 0 5px rgba(255,239,156,.65); }
.ka-playhead span { position: absolute; top: -5px; left: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: #ffef9c; }
.ka-speed-band { position: absolute; top: 3px; bottom: 3px; border: 1px solid rgba(88,199,216,.52); border-radius: 4px; background: rgba(88,199,216,.13); color: #a8eef5; font: 8px/23px ui-monospace, monospace; text-align: center; overflow: hidden; }
.ka-shortcuts { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 12px; border-top: 1px solid rgba(191,227,242,.08); color: rgba(207,233,238,.35); font-size: 9px; }
.ka-shortcuts span { display: inline-flex; align-items: center; gap: 4px; }
.ka-shortcuts kbd { border: 1px solid rgba(191,227,242,.15); border-radius: 4px; padding: 1px 4px; color: rgba(207,233,238,.62); background: rgba(191,227,242,.05); font: inherit; }

@media (max-width: 1100px) {
  .ka-video-grid { grid-template-columns: minmax(0,1fr) 290px; }
  .ka-studio { --ka-label-width: 180px; }
  .ka-time-readout { display: none; }
}

body.ka-dual-screen-active #sidebar,
body.ka-dual-screen-active #sidebarBackdrop,
body.ka-dual-screen-active header { display: none !important; }
body.ka-dual-screen-active main { height: 100vh; overflow: hidden; padding: 10px !important; }
.ka-studio.is-dual-screen { display: grid; height: calc(100vh - 20px); grid-template-columns: minmax(0,1fr) 340px; grid-template-rows: auto minmax(0,1fr); gap: 10px; }
.ka-studio.is-dual-screen .ka-studio-head { grid-column: 1 / -1; }
.ka-studio.is-dual-screen .ka-video-grid { display: contents; }
.ka-studio.is-dual-screen .ka-video-panel { display: none; }
.ka-studio.is-dual-screen .ka-side-panel { grid-column: 2; grid-row: 2; min-height: 0; }
.ka-studio.is-dual-screen .ka-side-content { height: calc(100vh - 132px); }
.ka-studio.is-dual-screen .ka-timeline-panel { grid-column: 1; grid-row: 2; min-height: 0; margin-top: 0; }
.ka-studio.is-dual-screen .ka-timeline-scroll { max-height: calc(100vh - 236px); }

/* Standalone synchronized annotation video screen. */
.ka-companion-body { min-height: 100vh; margin: 0; overflow: hidden; color: var(--ink); background: #000; font-family: "Spline Sans", ui-sans-serif, system-ui, sans-serif; }
.ka-companion { display: grid; height: 100vh; grid-template-rows: auto minmax(0,1fr) auto; background: #000; }
.ka-companion-head { z-index: 4; display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 16px; border-bottom: 1px solid rgba(191,227,242,.13); background: #041f24; }
.ka-companion-kicker { margin: 0; color: rgba(207,233,238,.42); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ka-companion-head h1 { overflow: hidden; margin: 2px 0 0; color: var(--ice); font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ka-companion-status { display: flex; flex: none; align-items: center; gap: 7px; border: 1px solid rgba(191,227,242,.14); border-radius: 999px; padding: 5px 10px; color: rgba(207,233,238,.55); font-size: 10px; }
.ka-companion-status i { width: 7px; height: 7px; border-radius: 50%; background: #ffbf00; box-shadow: 0 0 10px rgba(255,191,0,.6); }
.ka-companion-status.is-connected i { background: #67e8a8; box-shadow: 0 0 10px rgba(103,232,168,.65); }
.ka-companion-video-stage { position: relative; min-height: 0; overflow: hidden; background: #000; }
.ka-companion-video-world { position: absolute; transform-origin: 0 0; will-change: transform; }
.ka-companion-video-world video,.ka-companion-video-world canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ka-companion-video-world video { object-fit: fill; }
.ka-companion-video-world canvas { cursor: grab; touch-action: none; }
.ka-companion-video-world.is-panning canvas { cursor: grabbing; }
.ka-companion-frame { position: absolute; right: 12px; bottom: 12px; border-radius: 6px; padding: 5px 8px; color: rgba(255,255,255,.82); background: rgba(0,0,0,.72); font: 11px/1.2 ui-monospace, monospace; }
.ka-companion-hint { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,191,0,.45); border-radius: 10px; padding: 12px 16px; color: #fff1a6; background: rgba(0,0,0,.82); font-size: 12px; }
.ka-companion .hidden { display: none !important; }
.ka-companion-controls { z-index: 4; display: flex; min-height: 58px; align-items: center; gap: 7px; padding: 9px 12px; border-top: 1px solid rgba(191,227,242,.13); background: #041f24; }
.ka-companion-controls button,.ka-companion-controls select { height: 34px; border: 1px solid rgba(191,227,242,.16); border-radius: 8px; padding: 0 10px; color: var(--ice); background: rgba(191,227,242,.05); font-size: 11px; font-weight: 700; }
.ka-companion-controls button.is-primary { color: #05272c; background: var(--gold); }
.ka-companion-controls button.is-active { border-color: rgba(255,191,0,.45); color: var(--gold); }
.ka-companion-controls button.hidden { display: none; }
.ka-companion-controls input { min-width: 120px; flex: 1; accent-color: var(--gold); }
.ka-companion-timecode { color: rgba(207,233,238,.62); font: 10px/1 ui-monospace, monospace; white-space: nowrap; }
.ka-companion-controls [data-companion-zoom-value] { min-width: 38px; color: rgba(207,233,238,.5); font: 9px/1 ui-monospace, monospace; text-align: center; }

.sparkline path { vector-effect: non-scaling-stroke; }

input[type="range"].clay-range { accent-color: var(--clay); }

.panel-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.panel-scroll::-webkit-scrollbar-thumb { background: #11444F; border-radius: 999px; }

/* Focus area accordion */
.focus-card-label {
  text-shadow: 0 1px 8px rgba(2, 24, 28, 0.9);
}
.focus-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: max-height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.6s ease,
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.focus-card[data-open] .focus-body {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}
.focus-card[data-open] .focus-chevron {
  transform: rotate(180deg);
}

@media print {
  .grain,
  .no-print,
  header,
  footer,
  #toast,
  #modalRoot,
  #sidebar,
  #sidebarBackdrop,
  #sidebarToggle {
    display: none !important;
  }

  body,
  main {
    background: #fff !important;
    color: #04262B !important;
  }

  main,
  .panel-scroll {
    overflow: visible !important;
    height: auto !important;
  }
}