/* 06a · dva talíře: vlevo kamera (zaoblená, tmavá jako obraz z kamery), vpravo výsledky; stavy podle tříd z js/s06a.js */
#s-dva-talire .dt-kamera { position: absolute; left: var(--okraj-x); top: 252px; width: 880px; height: 700px; border-radius: var(--r); overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #3a3a3d 0%, #232325 70%); box-shadow: var(--stin-velky); }
#s-dva-talire .dt-snimek { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 600ms var(--ven), transform 700ms var(--ven); }
#s-dva-talire .dt-svg { width: 560px; height: 560px; }
#s-dva-talire .dt-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#s-dva-talire .talir-okraj { fill: #f7f7f5; }
#s-dva-talire .talir-vnitrek { fill: #ececea; }
#s-dva-talire .omacka { fill: #a4552a; }
#s-dva-talire .knedlik { fill: #f1e4c4; stroke: #e2cfa4; stroke-width: 3; }
#s-dva-talire .drobek { fill: #c9a77a; }
#s-dva-talire .dt-s2 { opacity: 0; transform: translateX(60px); }
#s-dva-talire.t2 .dt-s1 { opacity: 0; transform: translateX(-60px); }
#s-dva-talire.t2 .dt-s2 { opacity: 1; transform: none; }
#s-dva-talire .dt-sken { position: absolute; left: 0; right: 0; top: -20%; height: 18%; background: linear-gradient(to bottom, transparent, rgba(48, 209, 88, 0.35), transparent); opacity: 0; }
#s-dva-talire.skenuje .dt-sken { animation: s06a-sken 1.2s var(--plynule) both; }
@keyframes s06a-sken { 0% { top: -20%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
#s-dva-talire .dt-detekce { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--zelena-zivá); opacity: 0; transform: scale(1.12); transition: opacity 400ms var(--ven), transform 600ms var(--ven); }
#s-dva-talire.detekce .dt-detekce { opacity: 0.9; transform: none; }
#s-dva-talire .dt-stav { position: absolute; left: 24px; top: 22px; margin: 0; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-size: 24px; font-weight: 700; }
#s-dva-talire .tecka { width: 14px; height: 14px; border-radius: 50%; background: var(--zelena-zivá); animation: pulz 1.6s ease-in-out infinite; }

#s-dva-talire .dt-vysledky { position: absolute; left: 1010px; right: var(--okraj-x); top: 252px; height: 700px; }
#s-dva-talire .dt-ceka { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 14px; margin: 0; font-size: 30px; font-weight: 600; color: var(--text2); transition: opacity 400ms var(--ven); }
#s-dva-talire.v1 .dt-ceka { opacity: 0; }
#s-dva-talire .dt-karta { position: absolute; left: 0; right: 0; background: var(--karta); border-radius: var(--r); box-shadow: var(--stin); padding: 30px 34px; opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ven), transform 700ms var(--ven); }
#s-dva-talire .dt-k1 { top: 0; }
#s-dva-talire .dt-k2 { top: 486px; display: flex; align-items: center; gap: 26px; }
#s-dva-talire.v1 .dt-k1, #s-dva-talire.v2 .dt-k2 { opacity: 1; transform: none; }
#s-dva-talire .dt-nad { margin: 0; font-size: 22px; font-weight: 700; color: var(--zelena); text-transform: uppercase; letter-spacing: 0.06em; }
#s-dva-talire .dt-jidlo { margin: 8px 0 18px; font-size: 40px; }
#s-dva-talire .dt-slozky { display: grid; gap: 12px; }
#s-dva-talire .dt-slozka { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 16px; font-size: 26px; }
#s-dva-talire .dt-slozka i { display: block; height: 14px; border-radius: 999px; background: var(--oranz2); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ven); }
#s-dva-talire.v1 .dt-slozka i { transform: scaleX(var(--podil)); }
#s-dva-talire .dt-slozka b { text-align: right; font-variant-numeric: tabular-nums; }
#s-dva-talire .dt-spodek { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linka); }
#s-dva-talire .dt-zbylo { margin: 0; display: flex; flex-direction: column; }
#s-dva-talire .dt-zbylo b { font-size: 96px; line-height: 0.95; font-weight: 800; color: var(--oranz); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#s-dva-talire .dt-zbylo small { font-size: 0.4em; color: var(--text2); margin-left: 6px; }
#s-dva-talire .dt-zbylo > span { font-size: 24px; color: var(--text2); font-weight: 600; }
#s-dva-talire .dt-kruh { display: flex; align-items: center; gap: 18px; }
#s-dva-talire .dt-kruh svg { width: 120px; height: 120px; transform: rotate(-90deg); }
#s-dva-talire .kruh-pozadi { fill: none; stroke: var(--linka); stroke-width: 12; }
#s-dva-talire .kruh-hodnota { fill: none; stroke: var(--zelena); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1100ms var(--ven) 200ms; }
#s-dva-talire .dt-kruh p { margin: 0; display: flex; flex-direction: column; }
#s-dva-talire .dt-kruh b { font-size: 48px; font-weight: 800; color: var(--zelena); font-variant-numeric: tabular-nums; }
#s-dva-talire .dt-kruh p > span { font-size: 24px; color: var(--text2); font-weight: 600; }
#s-dva-talire .dt-fajfka { flex: none; width: 110px; height: 110px; border-radius: 50%; background: var(--zelena-svetla); color: var(--zelena); display: grid; place-items: center; }
#s-dva-talire .dt-fajfka svg { width: 64px; height: 64px; stroke-width: 5px; }
#s-dva-talire .dt-k2 h2 { margin: 6px 0 4px; font-size: 44px; }
#s-dva-talire .dt-pod { margin: 0; font-size: 28px; color: var(--text2); }

/* živá kamera z dema (deck-bridge.js) přes rámeček kamery; bez spojení zůstane kreslený talíř */
#s-dva-talire .dt-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ven); background: #232325; }
#s-dva-talire.live .dt-live { opacity: 1; }
#s-dva-talire.live .dt-snimek { opacity: 0 !important; }
#s-dva-talire .dt-qr { position: absolute; right: 64px; bottom: 34px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 12px; border: 0; border-radius: 999px; background: var(--karta); box-shadow: var(--stin); font: 700 22px var(--pismo); color: var(--text2); cursor: pointer; opacity: 0.75; transition: opacity 200ms; }
#s-dva-talire .dt-qr:hover { opacity: 1; }
#s-dva-talire .dt-qr svg { width: 28px; height: 28px; }
#s-dva-talire.live .dt-qr { color: var(--zelena); }
#s-dva-talire .dt-qr-okno { position: absolute; inset: 0; z-index: 20; background: rgba(245, 245, 247, 0.96); }
#s-dva-talire .dt-qr-okno iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#s-dva-talire .dt-qr-zavrit { position: absolute; right: 40px; top: 30px; width: 64px; height: 64px; border: 0; border-radius: 50%; background: var(--text); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
#s-dva-talire .dt-karta.ceka { opacity: 1; transform: none; }
#s-dva-talire .dt-karta.ceka > * { opacity: 0.25; }
#s-dva-talire .dt-karta.ceka::after { content: "Analyzuji…"; position: absolute; left: 34px; top: 30px; font: 800 34px var(--pismo); color: var(--zelena); animation: pulz 1.4s ease-in-out infinite; opacity: 1; }

/* The card contains only camera pixels; pairing lives in its own small page. */
#s-dva-talire .dt-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:60px}
#s-dva-talire .dt-placeholder svg{width:70px;height:70px;color:#a6cfaf;margin-bottom:20px}
#s-dva-talire .dt-placeholder p{font-size:32px;font-weight:700;margin:0 0 12px}
#s-dva-talire .dt-placeholder span{font-size:22px;color:#c2cec3}
#s-dva-talire.live .dt-placeholder{visibility:hidden}
#s-dva-talire .dt-detekce,#s-dva-talire .dt-sken{display:none}
#s-dva-talire .dt-qr-okno[hidden]{display:none}

#s-dva-talire .dt-slozka{grid-template-columns:150px 1fr 140px}#s-dva-talire .dt-slozka b{white-space:nowrap}#s-dva-talire .dt-placeholder p{color:#fff}

/* ---- krok 3: oba talíře jako dvě tečky; krok 4: tečky se promění v dlaždice a plocha vyroste v přehled pro jídelnu;
   krok 5: návrhy. Třídy z JS: spoj (k ≥ 3), dash (k ≥ 4), navrhy (k ≥ 5). ---- */
#s-dva-talire .dt-kamera { transition: opacity 600ms var(--ven); }
#s-dva-talire.spoj .dt-kamera, #s-dva-talire.spoj .dt-qr { opacity: 0; pointer-events: none; }

#s-dva-talire .dt-nadpis { position: relative; }
#s-dva-talire .dt-nadpis span { display: block; transition: opacity 500ms var(--ven), transform 500ms var(--ven); }
#s-dva-talire .dt-nadpis .n2 { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(14px); }
#s-dva-talire.dash .dt-nadpis .n1 { opacity: 0; transform: translateY(-14px); }
#s-dva-talire.dash .dt-nadpis .n2 { opacity: 1; transform: none; }
#s-dva-talire .dr-stitek { position: absolute; right: 190px; top: 78px; margin: 0; padding: 6px 16px 8px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--oranz); color: var(--oranz); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0; transition: opacity 500ms var(--ven); }
#s-dva-talire.dash .dr-stitek { opacity: 1; }

/* karty: v kroku 3 dostanou barevnou tečku (stejnou jako v ploše), v kroku 4 zmizí pod rostoucím přehledem */
#s-dva-talire .dt-karta::before { content: ""; position: absolute; right: 30px; top: 30px; width: 30px; height: 30px; border-radius: 50%; opacity: 0; transition: opacity 500ms var(--ven) 500ms; }
#s-dva-talire .dt-k1::before { background: var(--oranz); }
#s-dva-talire .dt-k2::before { background: var(--zelena-zivá); top: 50%; margin-top: -15px; }
#s-dva-talire.spoj .dt-karta::before { opacity: 1; }
#s-dva-talire.dash .dt-k1, #s-dva-talire.dash .dt-k2 { opacity: 0; transform: none; transition: opacity 400ms var(--ven); }

/* bílá plocha: v kroku 3 místo kamery, v kroku 4 vyroste v celý přehled */
#s-dva-talire .dr-plocha { position: absolute; left: var(--okraj-x); top: 252px; width: 880px; height: 700px; background: var(--karta); border-radius: var(--r); box-shadow: var(--stin-velky); overflow: hidden; z-index: 4; opacity: 0;
  transition: opacity 600ms var(--ven) 150ms, top 900ms var(--plynule), width 900ms var(--plynule), height 900ms var(--plynule); }
#s-dva-talire.spoj .dr-plocha { opacity: 1; }
#s-dva-talire.dash .dr-plocha { top: 236px; width: 1760px; height: 780px; }
#s-dva-talire .dr-tecky { position: absolute; left: 40px; top: 105px; width: 800px; display: grid; grid-template-columns: repeat(26, 1fr); gap: 7px; }
#s-dva-talire .dr-tecky i { aspect-ratio: 1; border-radius: 50%; opacity: 0; }
#s-dva-talire .dr-tecky i.p1 { background: var(--oranz); color: var(--oranz); }
#s-dva-talire .dr-tecky i.p2 { background: var(--zelena-zivá); color: var(--zelena-zivá); }
#s-dva-talire .dr-tecky i.prvni { transform: scale(0.2); transition: opacity 500ms var(--ven), transform 600ms var(--ven); }
#s-dva-talire.spoj .dr-tecky i.prvni { opacity: 1; transform: none; box-shadow: 0 0 0 5px var(--karta), 0 0 0 9px currentColor; transition-delay: 450ms; }
#s-dva-talire.spoj .dr-tecky i.p2 { transition-delay: 650ms; }
#s-dva-talire.dash .dr-tecky i.prvni { opacity: 0; transition: none; }

#s-dva-talire .dr-popisek { position: absolute; z-index: 2; margin: 0; display: flex; align-items: baseline; gap: 12px; padding: 8px 20px 10px; border-radius: 999px; background: var(--karta); box-shadow: var(--stin); font-size: 26px; font-weight: 600; color: var(--text3); white-space: nowrap; opacity: 0; transition: opacity 500ms var(--ven); }
#s-dva-talire .dr-popisek b { font-weight: 800; }
#s-dva-talire .dr-popisek b.oranz { color: var(--oranz); }
#s-dva-talire .dr-popisek b.zelena { color: var(--zelena); }
#s-dva-talire.spoj .dr-popisek { opacity: 1; transition-delay: 900ms; }
#s-dva-talire.spoj .dr-popisek.l2 { transition-delay: 1100ms; }
#s-dva-talire.dash .dr-popisek, #s-dva-talire.dash .dr-popisek.l2 { opacity: 0; transition: opacity 150ms linear 0ms; }

/* ---- přehled pro jídelnu (souřadnice uvnitř plochy 1760 × 780) ---- */
#s-dva-talire .dd { position: absolute; left: var(--okraj-x); top: 236px; width: 1760px; height: 780px; z-index: 5; pointer-events: none; }
#s-dva-talire .dd > * { position: absolute; margin: 0; }
#s-dva-talire .dd-lista { left: 30px; right: 30px; top: 22px; height: 56px; display: flex; align-items: center; gap: 14px; opacity: 0; transition: opacity 500ms var(--ven); }
#s-dva-talire.dash .dd-lista { opacity: 1; transition-delay: 500ms; }
#s-dva-talire .dd-logo { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 7px var(--zelena); }
#s-dva-talire .dd-app { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
#s-dva-talire .dd-misto { font-size: 24px; font-weight: 600; color: var(--text3); }
#s-dva-talire .dd-prepinac { margin-left: auto; display: flex; padding: 4px; border-radius: 999px; background: var(--stranka); }
#s-dva-talire .dd-prepinac span { padding: 6px 20px 8px; border-radius: 999px; font-size: 22px; font-weight: 600; color: var(--text3); }
#s-dva-talire .dd-prepinac .ano { background: var(--karta); color: var(--text); box-shadow: var(--stin); }

/* dlaždice; m1 a m2 začínají jako dvě tečky (--x0, --y0, --d0 z JS) a rozvinou se do dlaždic */
#s-dva-talire .dd-t { top: 96px; width: 336px; height: 166px; padding: 18px 24px; border-radius: 18px; overflow: hidden; }
#s-dva-talire .dd-t.m { left: var(--x0, 0px); top: var(--y0, 0px); width: var(--d0, 24px); height: var(--d0, 24px); padding: 0; border-radius: 50%; opacity: 0; transition: none; }
#s-dva-talire .dd-t.m1 { background: var(--oranz); }
#s-dva-talire .dd-t.m2 { background: var(--zelena-zivá); }
#s-dva-talire.dash .dd-t.m { opacity: 1; width: 336px; height: 166px; top: 96px; padding: 18px 24px; border-radius: 18px;
  transition: left 900ms var(--plynule), top 900ms var(--plynule), width 900ms var(--plynule), height 900ms var(--plynule), border-radius 700ms var(--plynule), padding 900ms var(--plynule), background-color 600ms var(--ven) 300ms; }
#s-dva-talire.dash .dd-t.m1 { left: 30px; background: var(--oranz-svetla); }
#s-dva-talire.dash .dd-t.m2 { left: 386px; background: var(--zelena-svetla); }
#s-dva-talire .dd-t.t3 { left: 742px; background: var(--stranka); opacity: 0; transform: scale(0.96); transition: opacity 500ms var(--ven), transform 500ms var(--ven); }
#s-dva-talire.dash .dd-t.t3 { opacity: 1; transform: none; transition-delay: 650ms; }
#s-dva-talire .dd-t > * { opacity: 0; white-space: nowrap; transition: opacity 400ms var(--ven); }
#s-dva-talire.dash .dd-t > * { opacity: 1; transition-delay: 750ms; }
#s-dva-talire .dd-nad { margin: 0; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
#s-dva-talire .m1 .dd-nad, #s-dva-talire .m1 .dd-cislo { color: var(--oranz); }
#s-dva-talire .m2 .dd-nad, #s-dva-talire .m2 .dd-cislo { color: var(--zelena); }
#s-dva-talire .dd-cislo { margin: 6px 0 0; font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#s-dva-talire .dd-cislo small { margin-left: 6px; font-size: 0.42em; color: var(--text2); letter-spacing: 0; }
#s-dva-talire .dd-pod { margin: 8px 0 0; font-size: 22px; font-weight: 600; color: var(--text2); }

/* karty přehledu */
#s-dva-talire .dd-karta { padding: 16px 26px; border-radius: 18px; background: var(--stranka); opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ven), transform 500ms var(--ven); }
#s-dva-talire.dash .dd-karta { opacity: 1; transform: none; }
#s-dva-talire .dd-hlava { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
#s-dva-talire .dd-hlava b { font-size: 26px; font-weight: 800; }
#s-dva-talire .dd-hlava span { font-size: 22px; font-weight: 600; color: var(--text3); }
#s-dva-talire .dd-graf { left: 30px; top: 280px; width: 1050px; height: 226px; }
#s-dva-talire.dash .dd-graf { transition-delay: 750ms; }
#s-dva-talire .dd-graf svg { display: block; width: 998px; height: 152px; margin-top: 6px; overflow: visible; }
#s-dva-talire .dd-graf rect { fill: var(--oranz2); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 600ms var(--ven); }
#s-dva-talire .dd-graf rect.sp { fill: var(--oranz); }
#s-dva-talire.dash .dd-graf rect { transform: none; }
#s-dva-talire .dd-graf text { font: 600 22px var(--pismo); fill: var(--text3); }
#s-dva-talire .dd-graf text.sp { font-size: 20px; font-weight: 700; fill: var(--oranz); opacity: 0; transition: opacity 400ms var(--ven); }
#s-dva-talire.dash .dd-graf text.sp { opacity: 1; transition-delay: 1900ms; }
#s-dva-talire .dd-seznam { left: 30px; top: 524px; width: 1050px; height: 226px; }
#s-dva-talire.dash .dd-seznam { transition-delay: 850ms; }
#s-dva-talire .dd-radek { display: grid; grid-template-columns: 430px 1fr 90px; align-items: center; gap: 20px; margin-top: 10px; font-size: 26px; font-weight: 600; }
#s-dva-talire .dd-radek i { height: 14px; border-radius: 999px; background: var(--oranz2); transform-origin: left; transform: scaleX(0); transition: transform 800ms var(--ven); }
#s-dva-talire .dd-radek:nth-of-type(1) i { background: var(--oranz); }
#s-dva-talire.dash .dd-radek i { transform: scaleX(var(--p)); transition-delay: 1200ms; }
#s-dva-talire .dd-radek b { text-align: right; font-size: 30px; font-weight: 800; color: var(--oranz); font-variant-numeric: tabular-nums; }
#s-dva-talire .dd-navrhy { left: 1110px; top: 96px; width: 620px; height: 654px; padding: 20px 24px; }
#s-dva-talire.dash .dd-navrhy { transition-delay: 950ms; }
#s-dva-talire .dd-ceka { position: absolute; left: 24px; right: 24px; top: 76px; display: grid; gap: 14px; transition: opacity 300ms var(--ven); }
#s-dva-talire .dd-ceka i { height: 130px; border-radius: 14px; background: linear-gradient(90deg, #e9e9ee 0%, #f8f8fa 50%, #e9e9ee 100%) 0 0 / 200% 100%; animation: s06a-trpytka 1.4s linear infinite; }
#s-dva-talire .dd-ceka p { margin: 4px 0 0; font-size: 22px; font-weight: 600; color: var(--text3); }
@keyframes s06a-trpytka { to { background-position: -200% 0; } }
#s-dva-talire.navrhy .dd-ceka { opacity: 0; }
#s-dva-talire .dd-karty { position: absolute; left: 24px; right: 24px; top: 76px; display: grid; gap: 14px; }
#s-dva-talire .dd-navrh { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; padding: 16px 20px 18px; border-radius: 14px; background: var(--karta); box-shadow: var(--stin); opacity: 0; transform: translateX(28px); transition: opacity 500ms var(--ven), transform 600ms var(--ven); }
#s-dva-talire.navrhy .dd-navrh { opacity: 1; transform: none; }
#s-dva-talire.navrhy .dd-navrh:nth-child(1) { transition-delay: 250ms; }
#s-dva-talire.navrhy .dd-navrh:nth-child(2) { transition-delay: 450ms; }
#s-dva-talire.navrhy .dd-navrh:nth-child(3) { transition-delay: 650ms; }
#s-dva-talire .dd-role { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; padding: 3px 14px 5px; border-radius: 999px; background: var(--zelena-svetla); color: var(--zelena); font-size: 22px; font-weight: 700; }
#s-dva-talire .dd-navrh h3 { grid-column: 1 / -1; margin: 6px 0 0; font-size: 28px; line-height: 1.15; white-space: nowrap; }
#s-dva-talire .dd-navrh p { grid-column: 1 / -1; margin: 0; font-size: 22px; color: var(--text3); }
#s-dva-talire .dd-navrh b { grid-column: 2; grid-row: 1; align-self: center; font-size: 32px; font-weight: 800; color: var(--zelena); white-space: nowrap; font-variant-numeric: tabular-nums; }
#s-dva-talire .dd-pozn { position: absolute; left: 24px; right: 24px; bottom: 20px; margin: 0; font-size: 22px; color: var(--text3); opacity: 0; transition: opacity 400ms var(--ven); }
#s-dva-talire.navrhy .dd-pozn { opacity: 1; transition-delay: 900ms; }

#s-dva-talire.hned * { transition: none !important; }

/* záloha bez živé kamery: klipy z mobilu (třída ma-zaznam z JS, jen když se soubor načte) */
#s-dva-talire .dt-zaznam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ven); background: #232325; }
#s-dva-talire.ma-zaznam:not(.live) .dt-zaznam.z1.ok { opacity: 1; }
#s-dva-talire.ma-zaznam:not(.live).t2 .dt-zaznam.z1 { opacity: 0; }
#s-dva-talire.ma-zaznam:not(.live).t2 .dt-zaznam.z2.ok { opacity: 1; }
#s-dva-talire.ma-zaznam:not(.live) .dt-placeholder { visibility: hidden; }
#s-dva-talire .dt-stav { z-index: 3; }

/* natočené demo: svislé video celé (contain) uprostřed, okraje vyplní rozmazaný první snímek */
#s-dva-talire .dt-zaznam { object-fit: contain; background: transparent; z-index: 1; }
#s-dva-talire .dt-pozadi { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) brightness(0.85) saturate(0.9); opacity: 0; transition: opacity 500ms var(--ven); }
#s-dva-talire .dt-pozadi.p1 { background-image: url(../assets/talir1.jpg); }
#s-dva-talire .dt-pozadi.p2 { background-image: url(../assets/talir2.jpg); }
#s-dva-talire.ma-zaznam:not(.live) .dt-pozadi.p1 { opacity: 1; }
#s-dva-talire.ma-zaznam:not(.live).t2 .dt-pozadi.p1 { opacity: 0; }
#s-dva-talire.ma-zaznam:not(.live).t2 .dt-pozadi.p2 { opacity: 1; }
/* údaj z váhy jako štítek v obraze (displej ve videu je malý) */
#s-dva-talire .dt-vaha { position: absolute; right: 24px; bottom: 22px; z-index: 3; margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ven), transform 400ms var(--ven); }
#s-dva-talire .dt-vaha svg { width: 34px; height: 34px; color: var(--zelena); }
#s-dva-talire.vazi .dt-vaha { opacity: 1; transform: none; }
#s-dva-talire.live .dt-vaha { display: none; }
/* karta talíře 1: místo procent výpočet z váhy */
#s-dva-talire .dt-slozka { grid-template-columns: 250px 1fr 110px; }
#s-dva-talire .dt-vypocet { display: grid; gap: 6px; text-align: right; font-variant-numeric: tabular-nums; }
#s-dva-talire .dt-vypocet p { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; }
#s-dva-talire .dt-vypocet p > span { font-size: 24px; font-weight: 600; color: var(--text3); }
#s-dva-talire .dt-vypocet b { font-size: 36px; font-weight: 800; min-width: 130px; }
#s-dva-talire .dt-vypocet p + p b { color: var(--text3); }

/* kroužek sleduje talíř: tenký, dokud se talíř hýbe (třída sleduje), při zastavení se zvýrazní (zachyceno) */
#s-dva-talire .dt-obrys { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
#s-dva-talire .dt-obrys circle { fill: none; stroke: var(--zelena-zivá); stroke-width: 2.5; opacity: 0; transition: opacity 250ms linear, stroke-width 350ms var(--ven), filter 350ms var(--ven); }
#s-dva-talire.sleduje .dt-obrys circle { opacity: 0.9; }
#s-dva-talire.zachyceno .dt-obrys circle { opacity: 1; stroke-width: 7; filter: drop-shadow(0 0 12px rgba(48, 209, 88, 0.7)); animation: s06a-zachyt 600ms var(--ven); }
@keyframes s06a-zachyt { 0% { stroke-width: 2.5; } 40% { stroke-width: 11; } 100% { stroke-width: 7; } }
#s-dva-talire.live .dt-obrys { display: none; }