:root {
  --bg: #000;
  --panel: #14161a;
  --bar: #1b1e23;
  --line: #2a2e35;
  --text: #f2f3f5;
  --muted: #9aa0a8;
  --faint: #5f656e;
  --accent: #2f9e5b;
  --accent-text: #fff;
  --danger: #d9443c;
  --warn: #e39b2d;
  --yellow: #f2c94c;
  --radius: 12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
[hidden] { display: none !important; }

button, select, input { font: inherit; color: inherit; }
button {
  background: #2a2e35; border: 0; border-radius: 9px; padding: 8px 14px;
  cursor: pointer; white-space: nowrap; min-height: 38px;
}
button:hover { filter: brightness(1.12); }
button:disabled { opacity: .4; cursor: default; filter: none; }
button.primary { background: var(--accent); color: var(--accent-text); font-weight: 600; }
button.primary.stop { background: var(--danger); }
button.danger { background: rgba(217, 68, 60, .18); color: #ff8a83; }
button.ghost { background: transparent; color: #6fb6ff; }
button.icon { padding: 6px 8px; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -5px; }
input[type=number], input[type=url], select {
  background: #0d0f12; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
}
input[type=number] { width: 96px; text-align: right; }
input[type=url] { width: 100%; }
input, select, textarea { -webkit-user-select: text; user-select: text; font-size: 16px; }
canvas, svg, video, img { -webkit-touch-callout: none; }
.spacer { flex: 1; }

.segmented { display: inline-flex; background: #0d0f12; border-radius: 10px; padding: 2px; gap: 2px; }
.segmented button { background: transparent; border-radius: 8px; padding: 6px 14px; min-height: 34px; color: var(--muted); }
.segmented button.on { background: #3a3f48; color: var(--text); }

/* ---------- Rozvržení ---------- */
#app { display: flex; height: 100%; height: 100dvh; }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + var(--safe-top)) 12px 8px calc(12px + var(--safe-left));
  background: var(--bar); border-bottom: 1px solid var(--line);
}
#sourceBtn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#status { display: flex; align-items: center; gap: 6px; color: var(--muted); min-width: 0; }
#statusText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #666; flex: none; }

#stage { position: relative; flex: 1; background: #000; overflow: hidden; }
#mediaHost, .view { position: absolute; inset: 0; }
#mediaHost > * { position: absolute; object-fit: contain; pointer-events: none; }
#mediaHost.behind { opacity: 0; }
#quadSvg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#targetCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 20px; text-align: center; }
.hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); padding: 6px 12px; border-radius: 99px; font-size: 14px;
  max-width: calc(100% - 24px); text-align: center; pointer-events: none;
}
.floatbar {
  position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(30, 33, 38, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.floatbar label { display: flex; align-items: center; gap: 8px; }
#zoomRange { width: 200px; }
#banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  background: rgba(0,0,0,.78); padding: 10px 24px; border-radius: 16px; pointer-events: none;
  animation: drop .25s ease-out;
  white-space: nowrap;
}
#banner .n { font-size: 22px; font-weight: 700; }
#banner .s { font-size: 44px; font-weight: 800; color: var(--yellow); }
#banner .d { font-size: 18px; color: var(--muted); }
#subSwitch button { min-width: 34px; padding: 6px 8px; }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }

/* SVG rohy */
.quad { fill: none; stroke: #3ddc6b; stroke-width: 2; stroke-dasharray: 8 5; }
.handle circle.area { fill: rgba(61, 220, 107, .25); }
.handle circle.ring { fill: none; stroke: #3ddc6b; stroke-width: 2; }
.handle text { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.handle { cursor: grab; }
.guide { fill: none; stroke: rgba(0, 220, 255, .8); stroke-width: 1.5; pointer-events: none; }

/* ---------- Postranní panel ---------- */
#sidebar {
  width: 340px; flex: none; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
  padding-right: var(--safe-right);
  overflow-y: auto;
}
#stats { padding: calc(14px + var(--safe-top)) 16px 14px; border-bottom: 1px solid var(--line); }
#stats h4 { margin: 0 0 8px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big { display: flex; justify-content: space-between; margin-bottom: 8px; }
.big div b { display: block; font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.big div span { font-size: 12px; color: var(--muted); }
.grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 14px; margin-bottom: 8px; }
.grid span:nth-child(odd) { color: var(--muted); }
.grid span:nth-child(even) { font-variant-numeric: tabular-nums; }
.corr { font-size: 14px; }
.subhead { font-size: 14px; font-weight: 600; margin: 2px 0 6px; color: var(--yellow); }
.corr small { display: block; color: var(--muted); }
.corr small.f { color: var(--faint); }

#legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
#legend span { display: inline-flex; align-items: center; gap: 6px; }
#legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; }
#legend .dot-last { background: #30d158; }
#legend .dot-prev { background: #0a84ff; }
#legend .dot-group { background: #ffd60a; border-color: #000; border-radius: 1px; transform: rotate(45deg); width: 9px; height: 9px; }

#actions { margin-top: auto; padding: 12px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
#resetBtn { min-height: 46px; font-size: 17px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > button { flex: 1; }

/* ---------- Dialogy ---------- */
dialog {
  border: 0; padding: 0; background: var(--panel); color: var(--text);
  border-radius: 16px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
.sheet { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); overflow-y: auto; }
.sheet > header {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bar); border-bottom: 1px solid var(--line);
}
.sheet h2 { margin: 0; font-size: 17px; }
.sheet.small { padding: 18px; gap: 8px; }
.sheet.small p { color: var(--muted); margin: 0 0 8px; }
.sheet section { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.sheet h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.foot { margin: 0; font-size: 13px; color: var(--muted); }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.field.check { justify-content: flex-start; }
.field input[type=range] { flex: 1 1 100%; }
.warn { color: var(--warn); font-size: 14px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.list li button {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; background: #1d2026; white-space: normal;
}
.list li button .grow { flex: 1; min-width: 0; }
.list li small { display: block; color: var(--muted); }
.list li .chk { color: var(--accent); font-weight: 700; }
.hist { display: flex; gap: 6px; }
.hist > button:first-child { flex: 1; }

/* ---------- Displej na výšku (iPhone, iPad na výšku) ---------- */
@media (orientation: portrait), (max-width: 600px) {
  #app { flex-direction: column; }
  #main { flex: 1 1 auto; min-height: 0; }
  #sidebar {
    width: auto; flex: 0 0 auto; max-height: 45%; min-height: 0;
    border-left: 0; border-top: 1px solid var(--line); padding: 0 var(--safe-right) 0 var(--safe-left);
  }
  #stats { padding: 10px 16px; }
  #stats h4 { display: none; }
  #legend { padding: 6px 16px; }
  #actions { padding: 10px 16px calc(10px + var(--safe-bottom)); gap: 8px; }
  #toolbar { flex-wrap: wrap; gap: 8px; padding: calc(6px + var(--safe-top)) calc(10px + var(--safe-right)) 6px calc(10px + var(--safe-left)); }
  #armBtn { order: 9; }
  #status { order: 10; flex: 1 1 120px; font-size: 13px; }
  #sourceBtn { max-width: 120px; padding: 6px 4px; }
  #sourceName { overflow: hidden; text-overflow: ellipsis; }
  .segmented button { padding: 6px 10px; }
  .floatbar { left: 8px; right: 8px; bottom: 8px; gap: 8px; padding: 8px; }
  .floatbar .segmented button { padding: 6px 8px; font-size: 14px; }
  #zoomRange { width: 110px; }
  .hint { font-size: 12px; top: 6px; }
  .big { margin-bottom: 4px; }
  .big div b { font-size: 26px; }
  .grid { font-size: 13px; }
  #banner { padding: 8px 14px; gap: 10px; top: 8px; }
  #banner .s { font-size: 32px; }
  #banner .d { font-size: 14px; }
  #banner .n { font-size: 16px; }
}

/* ---------- Telefon na šířku (nízký displej) ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  #sidebar { width: 250px; }
  #stats { padding: calc(8px + var(--safe-top)) 12px 8px; }
  #stats h4 { display: none; }
  .big div b { font-size: 22px; }
  .grid { grid-template-columns: 1fr; gap: 0; font-size: 12px; }
  .corr { font-size: 12px; }
  #legend { padding: 6px 12px; font-size: 12px; }
  #actions { padding: 8px 12px calc(8px + var(--safe-bottom)); gap: 6px; }
  #resetBtn { min-height: 40px; }
  #toolbar { padding-top: calc(4px + var(--safe-top)); padding-bottom: 4px; gap: 8px; }
  #status { display: none; }
  .floatbar { bottom: 6px; padding: 6px 8px; }
  .hint { display: none; }
  button { min-height: 34px; padding: 6px 10px; }
}