/* ============================================================
   Lafa web · interaktivna replika aplikacije (LAF-004, rez 9)
   ------------------------------------------------------------
   Port produkcijske replike (lafa.css V22, .lafapp/.lw-*) u v3.
   Sva pravila su vezana za .aplikacija i .app-tour. Prozor je
   .win iz core.css u pravoj velicini aplikacije (1180 x 760,
   AppWindowSize) i skalira se kao umanjen pravi prozor da stane
   u ekran (JS upisuje --at-s). Unutra nema skrola: ekran koji
   je duzi od prozora vidi se kao snimak.
   Tema prozora je tema aplikacije (.appfrag[data-apptheme] iz
   ../../themes.css) i ne zavisi od teme strane. Ispod 900 px
   sirine prozor ima pravu sirinu i red ekrana umesto menija.
   Markup: v3/sekcije/aplikacija.html · ponasanje: lafa-app.js
   ============================================================ */

/* Boje teme aplikacije koje nisu vec registrovane u core.css: registrovane
   boje i mere se pretapaju kad se tema prozora promeni. */
@property --at-info { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --at-warning { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --at-danger { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --at-success { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --at-stroke-soft { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --at-r { syntax: "<length>"; inherits: true; initial-value: 14px; }
@property --at-r-sm { syntax: "<length>"; inherits: true; initial-value: 10px; }

/* ---------- Naslov sekcije ---------- */

.aplikacija .at-head {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.aplikacija .at-head h2 {
  font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
}
.aplikacija .at-sub {
  max-width: 34em;
  margin: clamp(14px, 2vh, 22px) auto 0;
  font-size: clamp(1.1875rem, 0.95rem + 0.8vw, 1.625rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.006em;
  color: var(--text-secondary);
  text-wrap: balance;
}

/* ---------- Komponenta ---------- */

.app-tour {
  --at-w0: 1180px;
  --at-h0: 760px;
  --at-maxh: 78vh;
  position: relative;
  margin-top: clamp(32px, 5.5vh, 60px);
  container: at-tour / inline-size;
}

/* Paleta prozora: tokeni aplikacije za izabranu temu (themes.css, .appfrag[data-apptheme]),
   prevedeni na imena koja koristi replika. Strana zadrzava svoju temu. */
.app-tour .at-win {
  --accent: var(--la-accent);
  --accent-rgb: var(--la-accent-rgb);
  --accent-soft: var(--la-accent-soft);
  --accent-grad: var(--la-grad);
  --at-info: var(--la-info);
  --at-warning: var(--la-warning);
  --at-danger: var(--la-danger);
  --at-success: var(--la-success);
  --at-stroke-soft: var(--la-stroke-soft);
  --info: var(--at-info);
  --warning: var(--at-warning);
  --danger: var(--at-danger);
  --success: var(--at-success);
  --win-bg: var(--la-win);
  --bg-1: var(--la-side);
  --surface: var(--la-card);
  --surface-2: var(--la-card2);
  --stroke: var(--la-stroke);
  --stroke-soft: var(--at-stroke-soft);
  --hair: var(--la-stroke-soft);
  --text-bright: var(--la-tx-bright);
  --text-primary: var(--la-tx);
  --text-secondary: color-mix(in srgb, var(--la-tx) 62%, var(--la-tx-mut));
  --text-muted: var(--la-tx-mut);
  --text-faint: var(--la-tx-faint);
  --on-accent: var(--la-side);
  --at-r: var(--la-r);
  --at-r-sm: var(--la-r-sm);
  --r-md: var(--at-r);
  --r-sm: var(--at-r-sm);
  /* jacina sjaja i cifre teme, kao --glow-strength i --mono-numerals u themes.css */
  --at-glow: 0.4;
  --mono-numerals: normal;
  --at-track: color-mix(in srgb, var(--text-bright) 8%, transparent);
  --at-well: color-mix(in srgb, var(--text-bright) 5%, transparent);
  --at-line: color-mix(in srgb, var(--text-bright) 9%, transparent);
  /* Citljive boje teksta; bez light-dark() ostaju cisti tokeni. */
  --at-ink-accent: var(--accent);
  --at-ink-info: var(--info);
  --at-ink-success: var(--success);
  --at-ink-warning: var(--warning);
  --at-ink-danger: var(--danger);
  --at-ink-agent: var(--agent);
  --at-ink-sound: var(--role-sound);
  color-scheme: dark;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  /* Pozadine i akcenat se pretapaju; tekst prelazi na pola puta (kad je pozadina sredina),
     pa ni izmedju tamne i svetle teme natpisi ne nestaju u sivoj magli. */
  transition:
    --accent 0.7s var(--ease-io), --accent-soft 0.7s var(--ease-io), --on-accent 0.7s var(--ease-io),
    --win-bg 0.7s var(--ease-io), --bg-1 0.7s var(--ease-io), --surface 0.7s var(--ease-io), --surface-2 0.7s var(--ease-io),
    --stroke 0.7s var(--ease-io), --hair 0.7s var(--ease-io), --at-stroke-soft 0.7s var(--ease-io),
    --at-info 0.7s var(--ease-io), --at-warning 0.7s var(--ease-io), --at-danger 0.7s var(--ease-io), --at-success 0.7s var(--ease-io),
    --at-r 0.7s var(--ease-io), --at-r-sm 0.7s var(--ease-io),
    --text-bright 0.01s linear 0.34s, --text-primary 0.01s linear 0.34s, --text-secondary 0.01s linear 0.34s,
    --text-muted 0.01s linear 0.34s, --text-faint 0.01s linear 0.34s;
}
.app-tour .at-win[data-apptheme="deep"] { --at-glow: 0.12; --mono-numerals: "tnum" 1; }
.app-tour .at-win[data-apptheme="iridescent"] { --at-glow: 0.85; --on-accent: var(--la-tx-bright); }
.app-tour .at-win[data-apptheme="light"] { --at-glow: 0.18; --on-accent: var(--la-win); color-scheme: light; }
@supports (color: light-dark(#000, #fff)) {
  .app-tour .at-win {
    --at-ink-accent: light-dark(var(--accent), color-mix(in srgb, var(--accent) 65%, var(--text-bright)));
    --at-ink-info: light-dark(color-mix(in srgb, var(--info) 62%, var(--text-bright)), var(--info));
    --at-ink-success: light-dark(color-mix(in srgb, var(--success) 78%, var(--text-bright)), var(--success));
    --at-ink-warning: light-dark(color-mix(in srgb, var(--warning) 72%, var(--text-bright)), var(--warning));
    --at-ink-danger: light-dark(color-mix(in srgb, var(--danger) 82%, var(--text-bright)), color-mix(in srgb, var(--danger) 80%, var(--text-bright)));
    --at-ink-agent: light-dark(color-mix(in srgb, var(--agent) 55%, var(--text-bright)), color-mix(in srgb, var(--agent) 80%, var(--text-bright)));
    --at-ink-sound: light-dark(color-mix(in srgb, var(--role-sound) 55%, var(--text-bright)), color-mix(in srgb, var(--role-sound) 85%, var(--text-bright)));
  }
}

/* ---------- Pozornica: prozor u pravoj velicini, umanjen da stane u ekran ---------- */

/* Kutija ima skaliranu velicinu vec iz CSS-a (sirina, 78 % visine ekrana ili 1180 px),
   a prozor u njoj JS skalira istim odnosom (--at-s = sirina kutije / 1180). */
.app-tour .at-stage {
  position: relative;
  width: min(100%, var(--at-w0), calc(var(--at-maxh) * 1180 / 760));
  aspect-ratio: 1180 / 760;
  margin-inline: auto;
}
html:not(.js) .app-tour .at-stage { overflow: hidden; border-radius: 12px; }
.app-tour .at-power {
  position: absolute;
  inset: 0;
  transform-origin: 50% 64%;
}
.app-tour .at-win {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--at-w0);
  height: var(--at-h0);
  overflow: clip;
  transform: scale(var(--at-s, 1));
  transform-origin: 0 0;
}
/* Ekran: pre paljenja crn, pa zasvetli (powerOn u lafa-app.js). */
.app-tour .at-win::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: var(--os-black);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Paljenje ---------- */

html.js .app-tour:not(.is-on) .at-power { opacity: 0; transform: scale(0.96); }
html.js .app-tour:not(.is-on) .at-win::after { opacity: 1; }
html.js .app-tour:not(.is-on) .at-picker { opacity: 0; visibility: hidden; }
.app-tour.is-powering .at-power { animation: at-power-in 0.86s var(--ease-out) both; }
.app-tour.is-powering .at-win::after { animation: at-screen-on 0.66s 0.14s var(--ease-io) both; }
.app-tour.is-powering .at-picker { animation: at-rise 0.6s 0.3s var(--ease-out) both; }
@keyframes at-power-in {
  from { opacity: 0; transform: scale(0.96); }
  45% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes at-screen-on { from { opacity: 1; } to { opacity: 0; } }
@keyframes at-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Ako skripta ne naoruza komponentu, prozor se ipak pokaze. */
html.js .app-tour:not(.is-armed) .at-power,
html.js .app-tour:not(.is-armed) .at-picker { animation: at-failsafe 0.01s 2.5s both; }
html.js .app-tour:not(.is-armed) .at-win::after { animation: at-failsafe-dark 0.01s 2.5s both; }
@keyframes at-failsafe { to { opacity: 1; visibility: visible; transform: none; } }
@keyframes at-failsafe-dark { to { opacity: 0; } }

/* ---------- Izbor teme ispod prozora (boje iz tokena aplikacije) ---------- */

.app-tour .at-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: clamp(20px, 3.4vh, 32px);
}
.app-tour .at-swatches { display: flex; gap: 4px; }
.app-tour .at-sw {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.app-tour .at-swdot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* gornja polovina je prozor teme, donja njen akcenat */
  background: linear-gradient(135deg, var(--la-win) 0 47%, transparent 47%), var(--la-grad);
  box-shadow: inset 0 0 0 1px var(--la-stroke), 0 0 0 1px var(--hair);
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.app-tour .at-sw:hover .at-swdot { transform: scale(1.06); }
.app-tour .at-sw[aria-checked="true"] .at-swdot {
  box-shadow: inset 0 0 0 1px var(--la-stroke), 0 0 0 3px var(--bg-0), 0 0 0 5px var(--text-bright);
}
.app-tour .at-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.app-tour .at-swname {
  min-height: 1.4em;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-bright);
}

.app-tour [hidden] { display: none !important; }
.app-tour p { margin: 0; }
.app-tour h3 { margin: 0; }
.app-tour button { font: inherit; color: inherit; }
.app-tour .at-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-tour .at-ic {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* U umanjenom prozoru okvir fokusa ostaje bar 2 px na ekranu. */
.app-tour .at-win :focus-visible { outline: max(2px, calc(2px / var(--at-s, 1))) solid var(--accent); outline-offset: 2px; }
.app-tour .at-panel:focus-visible,
.app-tour .at-achlist:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }

/* Tonovi kartica i cipova */
.app-tour [data-tone="accent"] { --tone: var(--accent); --tone-ink: var(--at-ink-accent); }
.app-tour [data-tone="info"] { --tone: var(--info); --tone-ink: var(--at-ink-info); }
.app-tour [data-tone="warning"] { --tone: var(--warning); --tone-ink: var(--at-ink-warning); }
.app-tour [data-tone="success"] { --tone: var(--success); --tone-ink: var(--at-ink-success); }

/* ---------- Telo prozora ---------- */

.app-tour .at-body {
  --at-layout: side;
  display: grid;
  flex: 1 1 0;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.app-tour .at-win > .win-bar { flex: none; }

/* ---------- Bocni meni ---------- */

.app-tour .at-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: clip;
  padding: 16px 12px 14px;
  background: var(--bg-1);
  border-right: 1px solid var(--hair);
}
.app-tour .at-brand { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.app-tour .at-glyph {
  width: 26px;
  height: auto;
  filter: drop-shadow(0 0 calc(4px + 12px * var(--at-glow)) color-mix(in srgb, var(--accent) 45%, transparent));
}
.app-tour .at-brandtx { display: flex; flex-direction: column; line-height: 1; }
.app-tour .at-brandtx b { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text-bright); }
.app-tour .at-brandtx i {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--at-ink-accent);
}

.app-tour .at-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.app-tour .at-navgrp {
  margin: 14px 8px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.app-tour .at-navgrp:first-child { margin-top: 10px; }
.app-tour .at-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.app-tour .at-tab:hover { background: var(--surface); }
.app-tour .at-tab[aria-selected="true"] {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--stroke), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.app-tour .at-tab .at-ic { color: var(--text-muted); }
.app-tour .at-tab[aria-selected="true"] .at-ic { color: var(--at-ink-accent); }
.app-tour .at-nt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.app-tour .at-nt b { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.app-tour .at-nt i {
  margin-top: 2px;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-tour .at-sidefoot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 14px; }
.app-tour .at-mini { display: flex; gap: 4px; padding: 0 2px; }
.app-tour .at-minibtn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.app-tour .at-minibtn:hover { background: var(--surface); color: var(--text-bright); }
.app-tour .at-minibtn .at-ic { width: 16px; height: 16px; stroke-width: 1.6; }
.app-tour .at-listener {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.app-tour .at-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.app-tour .at-listener .at-dot { box-shadow: 0 0 calc(3px + 10px * var(--at-glow)) var(--success); }
.app-tour .at-ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.app-tour .at-ver .at-ic { width: 13px; height: 13px; }
.app-tour .at-ver b { letter-spacing: 0.06em; color: var(--at-ink-accent); }

/* ---------- Glavni deo i ekrani ---------- */

/* Bez unutrasnjeg skrola: ekran duzi od prozora se vidi kao snimak, a tockic i dodir
   uvek pomeraju stranu. clip ne dozvoljava ni skrol iz koda ni fokusa. */
.app-tour .at-main {
  container: at-main / inline-size;
  min-width: 0;
  min-height: 0;
  overflow: clip;
  padding: 16px 24px 16px;
}
/* Ekran duzi od prozora: donja ivica blago izbledi, kao kraj snimka. */
.app-tour .at-main.is-cut {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent);
}
.app-tour .at-panel.is-on { animation: at-fade 0.24s var(--ease-out) both; }
@keyframes at-fade { from { opacity: 0; } }

.app-tour .at-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.app-tour .at-phead h3 {
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}
.app-tour .at-phead p { max-width: 60ch; font-size: 13px; color: var(--text-secondary); }

/* ---------- Tema u zaglavlju Dashboarda (ThemeQuickSwitch iz aplikacije) ---------- */

/* Kao u aplikaciji: ime izabrane teme i po jedna tacka u akcentu svake teme. */
.app-tour .at-themes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--at-well);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-bright) 8%, transparent);
}
.app-tour .at-thname {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-secondary);
}
.app-tour .at-thdots { display: flex; gap: 2px; }
.app-tour .at-th {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
/* Tacka je uvek 13 px i menja se skalom (bez preracunavanja rasporeda). */
.app-tour .at-th i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--la-accent);
  opacity: 0.5;
  transform: scale(0.77);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.app-tour .at-th:hover i { opacity: 0.85; }
.app-tour .at-th[aria-checked="true"] i {
  transform: none;
  opacity: 1;
  box-shadow: 0 0 0 3px var(--win-bg), 0 0 0 4.5px color-mix(in srgb, var(--text-bright) 90%, transparent), 0 0 10px color-mix(in srgb, var(--la-accent) 55%, transparent);
}

/* ---------- Segmenti i tabovi u karticama ---------- */

.app-tour .at-seg,
.app-tour .at-achtabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--at-well);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}
.app-tour .at-seg button,
.app-tour .at-achtabs button {
  min-height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.app-tour .at-seg button:hover,
.app-tour .at-achtabs button:hover { color: var(--text-bright); }
.app-tour .at-seg button[aria-pressed="true"],
.app-tour .at-achtabs button[aria-selected="true"] {
  background: var(--surface-2);
  color: var(--text-bright);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* ---------- Traka za diktat (demo, bez mikrofona) ---------- */

/* Boje stanja kao HeroRecordBar u aplikaciji: slusa crveno, obrada info, gotovo akcenat. */
.app-tour .at-dictbar {
  --dc: var(--accent);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 12px;
  padding: 7px 18px 7px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke), 0 0 0 4px color-mix(in srgb, var(--accent) 5%, transparent);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease-out);
}
.app-tour .at-dictbar[data-phase="rec"] { --dc: var(--danger); }
.app-tour .at-dictbar[data-phase="obrada"] { --dc: var(--info); }
.app-tour .at-dictbar:hover,
.app-tour .at-dictbar[data-phase="rec"],
.app-tour .at-dictbar[data-phase="obrada"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 45%, transparent), 0 0 0 4px color-mix(in srgb, var(--dc) 10%, transparent);
}
.app-tour .at-mic {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: 0 0 calc(8px + 30px * var(--at-glow)) color-mix(in srgb, var(--accent) 45%, transparent);
}
.app-tour .at-mic .at-ic { width: 20px; height: 20px; stroke-width: 1.9; }
.app-tour .at-dictbar[data-phase="rec"] .at-mic {
  background: var(--danger);
  color: var(--glass-ink, #fff);
  animation: at-pulse 1.1s ease-in-out infinite;
}
@keyframes at-pulse {
  50% { box-shadow: 0 0 calc(16px + 40px * var(--at-glow)) color-mix(in srgb, var(--danger) 70%, transparent); }
}
.app-tour .at-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 32%, transparent);
  font-size: 13px;
  font-weight: 700;
  color: var(--dc);
}
.app-tour .at-status .at-dot { background: var(--dc); }
.app-tour .at-dicttx {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-bright);
}
.app-tour .at-dicttx:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.app-tour .at-dwave { display: none; flex: none; align-items: center; gap: 2.2px; height: 22px; }
.app-tour .at-dictbar[data-phase="rec"] .at-dwave,
.app-tour .at-dictbar[data-phase="obrada"] .at-dwave { display: flex; }
.app-tour .at-dwave i { width: 3px; height: 5px; border-radius: 2px; background: var(--dc); }
.app-tour .at-dictbar[data-phase="rec"] .at-dwave i { animation: at-listen 0.9s ease-in-out infinite; }
.app-tour .at-dictbar[data-phase="obrada"] .at-dwave i { animation: at-scan 1s ease-in-out infinite; }
.app-tour .at-dwave i:nth-child(1) { --h: 9px; animation-delay: -0.2s; }
.app-tour .at-dwave i:nth-child(2) { --h: 15px; animation-delay: -0.55s; }
.app-tour .at-dwave i:nth-child(3) { --h: 20px; animation-delay: -0.1s; }
.app-tour .at-dwave i:nth-child(4) { --h: 14px; animation-delay: -0.42s; }
.app-tour .at-dwave i:nth-child(5) { --h: 22px; animation-delay: -0.7s; }
.app-tour .at-dwave i:nth-child(6) { --h: 16px; animation-delay: -0.05s; }
.app-tour .at-dwave i:nth-child(7) { --h: 21px; animation-delay: -0.5s; }
.app-tour .at-dwave i:nth-child(8) { --h: 17px; animation-delay: -0.3s; }
.app-tour .at-dwave i:nth-child(9) { --h: 22px; animation-delay: -0.62s; }
.app-tour .at-dwave i:nth-child(10) { --h: 14px; animation-delay: -0.16s; }
.app-tour .at-dwave i:nth-child(11) { --h: 20px; animation-delay: -0.48s; }
.app-tour .at-dwave i:nth-child(12) { --h: 12px; animation-delay: -0.74s; }
.app-tour .at-dwave i:nth-child(13) { --h: 16px; animation-delay: -0.26s; }
.app-tour .at-dwave i:nth-child(14) { --h: 9px; animation-delay: -0.58s; }
@keyframes at-listen { 0%, 100% { height: calc(var(--h, 16px) * 0.34); opacity: 0.74; } 50% { height: var(--h, 16px); opacity: 1; } }
@keyframes at-scan { 0%, 100% { height: 5px; opacity: 0.24; } 50% { height: 22px; opacity: 0.96; } }
.app-tour .at-dwords {
  display: none;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dc) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 30%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  color: var(--at-ink-accent);
}
.app-tour .at-dictbar[data-phase="done"] .at-dwords { display: inline-block; }
.app-tour .at-caret { flex: none; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-muted); }
.app-tour .at-dictbar:not([data-phase="idle"]) .at-caret { display: none; }

/* ---------- Tri velika broja ---------- */

.app-tour .at-stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 9px; }
.app-tour .at-bcard,
.app-tour .at-scard,
.app-tour .at-card {
  min-width: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}
.app-tour .at-bcard { padding: 11px 15px 12px; }
.app-tour .at-bk {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.app-tour .at-bk .at-ic { width: 15px; height: 15px; color: var(--at-ink-accent); }
.app-tour .at-bcard[data-tone="info"] .at-bk .at-ic { color: var(--tone-ink); }
.app-tour .at-bnum {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: var(--mono-numerals, normal);
  color: var(--text-bright);
}
.app-tour .at-bbar { display: block; height: 5px; margin: 8px 0 6px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.app-tour .at-bbar i { background: var(--accent-grad); }
.app-tour .at-bsub { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.app-tour .at-bbar + .at-bsub { margin-top: 0; }

/* ---------- Pet kartica ---------- */

.app-tour .at-stats5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 9px; }
.app-tour .at-scard { display: flex; flex-direction: column; padding: 10px 13px; }
.app-tour .at-sk { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.app-tour .at-info {
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--at-line);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: italic;
  color: var(--text-muted);
}
.app-tour .at-snum {
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--mono-numerals, normal);
  color: var(--tone);
}
.app-tour .at-sdelta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.app-tour .at-sbar { display: block; height: 5px; margin: 8px 0 6px; overflow: hidden; border-radius: 99px; background: var(--at-track); }
.app-tour .at-scard[data-tone="accent"] .at-sbar i { background: var(--accent-grad); }
.app-tour .at-scard[data-tone="info"] .at-sbar i { background: linear-gradient(90deg, color-mix(in srgb, var(--info) 60%, transparent), var(--info)); }
.app-tour .at-sfoot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.app-tour .at-sfoot b { font-family: var(--font-mono); color: var(--tone-ink); }
.app-tour .at-week { display: flex; gap: 5px; margin-top: 8px; }
.app-tour .at-week i { position: relative; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--at-line); }
.app-tour .at-week i.on { background: color-mix(in srgb, var(--warning) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--warning); }
.app-tour .at-week i.on::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--at-ink-warning);
}
.app-tour .at-speedchip {
  align-self: flex-start;
  margin-top: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--at-ink-accent);
}
.app-tour .at-shield { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--at-ink-success); }
.app-tour .at-shield .at-ic { width: 15px; height: 15px; }

/* ---------- Nivo i sledeća pobeda ---------- */

.app-tour .at-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 9px; }
.app-tour .at-card { padding: 13px 17px; }
.app-tour .at-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.app-tour .at-cardhead > b { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-bright); }
.app-tour .at-cardsub { margin-bottom: 4px; font-size: 12.5px; color: var(--text-secondary); }
.app-tour .at-cardsub b { color: var(--text-bright); }
.app-tour .at-allbtn {
  min-height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--at-well);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.app-tour .at-allbtn:hover { background: var(--surface-2); color: var(--text-bright); }

.app-tour .at-ladder { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 20px 0 13px; }
.app-tour .at-node {
  position: relative;
  display: grid;
  flex: 0 1 46px;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--at-ink-accent);
}
.app-tour .at-node.is-dim { background: transparent; box-shadow: inset 0 0 0 2px var(--at-line); color: var(--text-muted); }
.app-tour .at-node.is-cur {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 calc(6px + 30px * var(--at-glow)) color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text-bright);
}
.app-tour .at-crown {
  position: absolute;
  top: -17px;
  left: 50%;
  font-size: 15px;
  font-style: normal;
  line-height: 1;
  color: var(--at-ink-accent);
  transform: translateX(-50%);
}
.app-tour .at-lvbar { display: block; height: 7px; margin-bottom: 12px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.app-tour .at-lvbar i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent)); }
.app-tour .at-lvfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.app-tour .at-lvfoot b { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-bright); }
.app-tour .at-xp { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }

.app-tour .at-achtabs { margin-top: 0; }
.app-tour .at-achlist { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.app-tour .at-achrow { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; }
.app-tour .at-achicon,
.app-tour .at-cellic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--c), var(--c2));
  color: var(--glass-ink, #fff);
}
.app-tour .at-achicon .at-ic { width: 18px; height: 18px; }
.app-tour .at-achmain { min-width: 0; }
.app-tour .at-achtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.app-tour .at-achtop b { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-bright); }
.app-tour .at-achpct { font-family: var(--font-mono); font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--c); }
.app-tour .at-achbar { display: block; height: 6px; margin: 5px 0 4px; overflow: hidden; border-radius: 99px; background: var(--at-track); }
.app-tour .at-achbar i,
.app-tour .at-cellbar i { background: linear-gradient(90deg, var(--c2), var(--c)); }
.app-tour .at-achnote { font-size: 12px; line-height: 1.3; color: var(--text-secondary); }

/* ---------- Statusna traka ---------- */

.app-tour .at-statusbar { display: flex; flex-wrap: wrap; gap: 8px; }
.app-tour .at-spill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tone-ink);
}
.app-tour .at-spill .at-ic { width: 15px; height: 15px; }

/* ---------- Statistika ---------- */

.app-tour .at-statwrap { display: flex; flex-direction: column; gap: 12px; }
.app-tour .at-statwrap .at-duo { margin-bottom: 0; }

.app-tour .at-herolvl {
  position: relative;
  overflow: hidden;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent);
}
.app-tour .at-herotop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-tour .at-herobadge {
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c);
}
.app-tour .at-herowords { text-align: right; }
.app-tour .at-herowords b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; color: var(--text-bright); }
.app-tour .at-herowords i { font-size: 12px; font-style: normal; color: var(--text-secondary); }
.app-tour .at-heroname { margin: 10px 0 12px; }
.app-tour .at-heroname b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--c); }
.app-tour .at-heroname i { font-size: 13px; font-style: normal; color: var(--text-secondary); }
.app-tour .at-heroxpbar { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: var(--at-track); }
.app-tour .at-heroxpbar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c2), var(--c));
  box-shadow: 0 0 calc(4px + 12px * var(--at-glow)) color-mix(in srgb, var(--c) 50%, transparent);
}
.app-tour .at-heroxprow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.app-tour .at-heronext { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--at-line); }
.app-tour .at-heronextl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.app-tour .at-heronextr { text-align: right; }
.app-tour .at-heronextr b { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-bright); }
.app-tour .at-heronextr i { font-family: var(--font-mono); font-size: 11px; font-style: normal; color: var(--text-secondary); }

.app-tour .at-streakcard,
.app-tour .at-goalcard { display: flex; flex-direction: column; }
.app-tour .at-flamechip {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--at-ink-danger);
}
.app-tour .at-flamechip .at-ic { width: 16px; height: 16px; }
.app-tour .at-bignum { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1; color: var(--text-bright); }
.app-tour .at-bignum i { font-size: 13px; font-style: normal; font-weight: 500; color: var(--text-secondary); }
.app-tour .at-cardnote { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); }
.app-tour .at-cardfoot { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.app-tour .at-goalset { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.app-tour .at-goalring {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 10px auto 6px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--p), var(--at-track) 0);
}
/* rupa u prstenu ima istu boju kao kartica, pa se luk vidi kao u aplikaciji */
.app-tour .at-goalring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: linear-gradient(var(--surface), var(--surface)), var(--win-bg);
}
.app-tour .at-goalring span { position: relative; font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text-bright); }
.app-tour .at-goalcard .at-cardnote { text-align: center; }

.app-tour .at-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-tour .at-tile { min-width: 0; padding: 13px 14px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke-soft); }
.app-tour .at-tileic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--at-ink-accent);
}
.app-tour .at-tileic .at-ic { width: 16px; height: 16px; }
.app-tour .at-tileval { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.15; color: var(--text-bright); }
.app-tour .at-tilelbl { font-size: 12px; color: var(--text-secondary); }

.app-tour .at-actsum { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.app-tour .at-actbars { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin-top: 12px; }
.app-tour .at-actbar { flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 32%, transparent); }
.app-tour .at-actbar.is-hot {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent));
  box-shadow: 0 0 calc(2px + 10px * var(--at-glow)) color-mix(in srgb, var(--accent) 35%, transparent);
}

.app-tour .at-recrows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.app-tour .at-recrow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}
.app-tour .at-recic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.app-tour .at-recic .at-ic { width: 16px; height: 16px; }
.app-tour .at-recname { font-size: 13px; color: var(--text-primary); }
.app-tour .at-recval { font-family: var(--font-display); font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--text-bright); }

.app-tour .at-ranknow,
.app-tour .at-achcount { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.app-tour .at-ranks { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.app-tour .at-rankrow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.app-tour .at-rankrow.is-done { background: var(--surface); }
.app-tour .at-rankrow.is-cur {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), 0 0 calc(4px + 18px * var(--at-glow)) color-mix(in srgb, var(--danger) 18%, transparent);
}
.app-tour .at-rankdot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c), var(--c2));
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  /* tamno mastilo na svetloj boji ranga, u svakoj temi (macOS crna iz core.css) */
  color: color-mix(in srgb, var(--c) 10%, var(--os-black, #000));
}
.app-tour .at-rankrow.is-fut .at-rankdot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 65%, transparent);
  color: var(--text-secondary);
}
.app-tour .at-rankname { min-width: 0; }
.app-tour .at-rankname b { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--text-bright); }
.app-tour .at-rankrow.is-fut .at-rankname b { color: var(--text-secondary); }
.app-tour .at-rankname i { font-size: 12px; font-style: normal; color: var(--text-secondary); }
.app-tour .at-rankxp { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; color: var(--text-secondary); }
.app-tour .at-rankrow.is-cur .at-rankxp { color: var(--at-ink-danger); }

.app-tour .at-achgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.app-tour .at-achcell { min-width: 0; padding: 12px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke-soft); }
.app-tour .at-celltop { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.app-tour .at-cellic { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.app-tour .at-cellic .at-ic { width: 16px; height: 16px; }
.app-tour .at-cellname { font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-bright); }
.app-tour .at-celltier { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.app-tour .at-cellbar { display: block; height: 5px; margin-bottom: 6px; overflow: hidden; border-radius: 99px; background: var(--at-track); }
.app-tour .at-pips { display: flex; gap: 3px; margin-bottom: 6px; }
.app-tour .at-pips i { flex: 1 1 0; height: 4px; border-radius: 99px; background: var(--at-track); }
.app-tour .at-pips i.is-won { background: linear-gradient(180deg, var(--c), var(--c2)); }
.app-tour .at-pips i.is-cur { background: color-mix(in srgb, var(--c) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); }
.app-tour .at-cellval { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); }

/* ---------- Istorija ---------- */

.app-tour .at-histlist { display: flex; flex-direction: column; gap: 8px; }
.app-tour .at-histgroup {
  margin: 8px 4px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.app-tour .at-histgroup:first-child { margin-top: 0; }
.app-tour .at-histrow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}
.app-tour .at-histapp {
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}
.app-tour .at-histapp img { width: 20px; height: 20px; }
.app-tour .at-histmain { min-width: 0; }
.app-tour .at-histtx { margin-bottom: 5px; font-size: 13.5px; line-height: 1.45; color: var(--text-primary); }
.app-tour .at-histtx mark { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text-bright); }
.app-tour .at-histrow[data-diff-row="clean"] .at-raw,
.app-tour .at-histrow[data-diff-row="raw"] .at-clean { display: none; }
.app-tour .at-histrow[data-diff-row="raw"] .at-raw { color: var(--text-secondary); }
.app-tour .at-histfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.app-tour .at-histlat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
  color: var(--at-ink-accent);
}
.app-tour .at-histlat .at-ic { width: 11px; height: 11px; }
.app-tour .at-histmeta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.app-tour .at-histwords { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; color: var(--text-secondary); }
.app-tour .at-diff { display: inline-flex; margin-left: auto; overflow: hidden; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--at-line); }
.app-tour .at-diff button {
  min-height: 24px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.app-tour .at-diff button:hover { color: var(--text-bright); }
.app-tour .at-diff button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--at-ink-accent); }

/* ---------- Engine Lab ---------- */

.app-tour .at-enginewrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-tour .at-engcard { min-width: 0; padding: 14px 17px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke-soft); }
.app-tour .at-enghead { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.app-tour .at-engic,
.app-tour .at-mi {
  --chip: var(--accent);
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--chip) 13%, transparent);
  color: var(--at-ink-accent);
}
.app-tour .at-engic .at-ic { width: 17px; height: 17px; }
.app-tour .is-tune .at-engic { --chip: var(--warning); color: var(--at-ink-warning); }
.app-tour .is-sound .at-engic { --chip: var(--role-sound); color: var(--at-ink-sound); }
.app-tour .at-engt { min-width: 0; }
.app-tour .at-engt b { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-bright); }
.app-tour .at-engt i { font-size: 12px; font-style: normal; color: var(--text-muted); }
.app-tour .at-engrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--at-line); font-size: 12.5px; }
.app-tour .at-enghead + .at-engrow { border-top: 0; }
.app-tour .at-engrow span { color: var(--text-secondary); }
.app-tour .at-engrow b { min-width: 0; font-family: var(--font-mono); font-size: 12px; text-align: right; overflow-wrap: anywhere; color: var(--text-bright); }
.app-tour .at-engrow b.is-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--at-ink-accent); }
.app-tour .at-engrow b.is-ok::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 calc(2px + 8px * var(--at-glow)) color-mix(in srgb, var(--accent) 50%, transparent);
}

.app-tour .at-slider { --sc: var(--warning); --sc-ink: var(--at-ink-warning); margin-top: 12px; }
.app-tour .at-enghead + .at-slider { margin-top: 2px; }
.app-tour .at-slidhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.app-tour .at-slidhead span { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--text-bright); }
.app-tour .at-slidhead b { font-family: var(--font-mono); font-size: 12px; color: var(--sc-ink); }
.app-tour .at-slidtrack { position: relative; height: 6px; border-radius: 99px; background: var(--at-track); }
.app-tour .at-slidtrack i { position: absolute; top: 0; left: 0; width: var(--p); height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 50%, transparent), var(--sc)); }
.app-tour .at-slidknob {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--os-black, #000) 35%, transparent);
  transform: translate(-50%, -50%);
}
.app-tour .at-slidscale { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.app-tour .at-volslider { --sc: var(--role-sound); --sc-ink: var(--at-ink-sound); }

.app-tour .at-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
.app-tour .at-preset {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.app-tour .at-preset:hover { color: var(--text-bright); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-sound) 40%, transparent); }
.app-tour .at-preset[aria-pressed="true"] {
  background: color-mix(in srgb, var(--role-sound) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-sound) 55%, transparent);
  color: var(--at-ink-sound);
}
.app-tour .at-soundcap { margin-bottom: 4px; font-size: 12px; color: var(--text-secondary); }

/* ---------- Modeli i disk ---------- */

.app-tour .at-modellist { display: flex; flex-direction: column; gap: 10px; }
.app-tour .at-mdetail { min-width: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke-soft); }
.app-tour .at-enginewrap .at-mdisk { grid-column: 1 / -1; }
.app-tour .at-mdhead { display: flex; align-items: center; gap: 11px; }
.app-tour .at-mi { width: 34px; height: 34px; border-radius: 10px; }
.app-tour .at-mi .at-ic { width: 18px; height: 18px; }
.app-tour .at-mi.is-cpu { --chip: var(--text-muted); color: var(--text-secondary); }
.app-tour .at-mt { min-width: 0; }
.app-tour .at-mt b { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-bright); }
.app-tour .at-mt i { font-size: 12px; font-style: normal; color: var(--text-muted); }
.app-tour .at-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.app-tour .at-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.app-tour .at-chip.is-ok {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--at-ink-success);
}
.app-tour .at-chip.is-mono { font-family: var(--font-mono); }
.app-tour .at-pathrows { margin-top: 8px; }
.app-tour .at-pathrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--at-line); font-size: 12.5px; }
.app-tour .at-pathrow span { flex: none; color: var(--text-secondary); }
.app-tour .at-pathrow b { min-width: 0; font-family: var(--font-mono); font-size: 12px; text-align: right; overflow-wrap: anywhere; color: var(--text-bright); }
.app-tour .at-pathrow b.is-lnk { color: var(--at-ink-accent); }
.app-tour .at-pathrow.is-tot b { font-size: 13px; }
.app-tour .at-dotk { display: inline-flex; align-items: center; gap: 7px; }
.app-tour .at-dotk::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.app-tour .at-dotk.is-stt::before { background: var(--accent); }
.app-tour .at-dotk.is-llm::before { background: var(--agent); }

.app-tour .at-modelrow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}
.app-tour .at-modelrow .at-mi { width: 38px; height: 38px; }
.app-tour .at-modelrow .at-mt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.app-tour .at-modelrow .at-mt b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.app-tour .at-modeltag {
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-tour .at-modeltag.is-stt { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--at-ink-accent); }
.app-tour .at-modeltag.is-llm { background: color-mix(in srgb, var(--agent) 12%, transparent); color: var(--at-ink-agent); }
.app-tour .at-modellic { margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; }
.app-tour .at-modellic.is-ok { background: color-mix(in srgb, var(--success) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 28%, transparent); color: var(--at-ink-success); }
.app-tour .at-modellic.is-cond { background: color-mix(in srgb, var(--warning) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 28%, transparent); color: var(--at-ink-warning); }
.app-tour .at-modelside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.app-tour .at-modelstate { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--at-ink-accent); }
.app-tour .at-d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.app-tour .at-modelstate.is-opt { color: var(--text-secondary); }
.app-tour .at-modelstate.is-opt .at-d { background: var(--text-muted); }
.app-tour .at-modelsize { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ---------- Rečnik ---------- */

.app-tour .at-dictgroup { display: flex; align-items: center; gap: 8px; margin: 16px 2px 9px; font-size: 12.5px; color: var(--text-secondary); }
.app-tour .at-dictgroup:first-child { margin-top: 0; }
.app-tour .at-dictkind {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-tour .at-dictkind.is-info { background: color-mix(in srgb, var(--info) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 28%, transparent); color: var(--at-ink-info); }
.app-tour .at-dictkind.is-warn { background: color-mix(in srgb, var(--warning) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 28%, transparent); color: var(--at-ink-warning); }
.app-tour .at-dictterms { display: flex; flex-wrap: wrap; gap: 8px; }
.app-tour .at-term {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--info) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 24%, transparent);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--at-ink-info);
}
.app-tour .at-term i { font-size: 10px; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.app-tour .at-dictzamene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app-tour .at-dictrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}
.app-tour .at-dictfrom { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }
.app-tour .at-dictarrow { width: 16px; height: 16px; stroke-width: 2; color: var(--at-ink-warning); }
.app-tour .at-dictto { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-bright); }
.app-tour .at-dictsrc {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--at-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Boje iz podataka (nivo, rang, faza) citljive u svakoj temi ---------- */

@supports (color: light-dark(#000, #fff)) {
  .app-tour .at-achpct,
  .app-tour .at-herobadge,
  .app-tour .at-heroname b {
    color: light-dark(color-mix(in srgb, var(--c) 48%, var(--text-bright)), color-mix(in srgb, var(--c) 85%, var(--text-bright)));
  }
  .app-tour .at-status { color: light-dark(color-mix(in srgb, var(--dc) 55%, var(--text-bright)), color-mix(in srgb, var(--dc) 76%, var(--text-bright))); }
}

/* ---------- Punjenje traka kad se ekran otvori ---------- */

.app-tour .at-fill > i { display: block; width: var(--p); height: 100%; border-radius: 99px; transform-origin: left center; }
/* Prelaz postoji samo u stanju „live", pa naoruzavanje i reset skacu na nulu bez animacije. */
.app-tour.is-armed .at-fill > i { transform: scaleX(0); }
.app-tour.is-armed.is-live .at-panel.is-on .at-fill > i { transform: scaleX(1); transition: transform 0.9s var(--ease-out); }
.app-tour.is-armed.is-live .at-panel.is-on .at-replay .at-fill > i { transform: scaleX(0); transition: none; }

/* ---------- Uzi prostor: prava sirina, red ekrana umesto bocnog menija ---------- */

/* Ispod 900 px umanjen prozor bi bio presitan: prozor dobija pravu sirinu, visinu do
   78 % ekrana, a ekrani su red ikona (izabrani ima i natpis). I dalje bez skrola. */
@container at-tour (max-width: 899px) {
  .app-tour .at-stage {
    width: 100%;
    height: min(78vh, 720px);
    height: min(78svh, 720px);
    aspect-ratio: auto;
  }
  .app-tour .at-win { width: 100%; height: 100%; transform: none; }
  .app-tour .at-body { --at-layout: tabs; display: flex; flex-direction: column; }
  .app-tour .at-side {
    display: block;
    flex: none;
    padding: 6px 6px;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  .app-tour .at-brand,
  .app-tour .at-navgrp,
  .app-tour .at-sidefoot,
  .app-tour .at-nt i { display: none; }
  .app-tour .at-nav { flex-direction: row; justify-content: space-between; gap: 2px; }
  .app-tour .at-tab {
    position: relative;
    flex: 0 0 auto;
    justify-content: center;
    width: auto;
    min-width: 36px;
    min-height: 40px;
    padding: 0 9px;
    gap: 6px;
  }
  .app-tour .at-tab:not([aria-selected="true"]) .at-nt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app-tour .at-tab[aria-selected="true"] { flex: 0 1 auto; min-width: 0; padding: 0 12px 0 10px; }
  .app-tour .at-tab[aria-selected="true"] .at-nt b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; }
  .app-tour .at-main { flex: 1 1 auto; padding: 16px 16px 14px; }
}
/* Tablet: svi natpisi ekrana stanu u red. */
@container at-tour (min-width: 640px) and (max-width: 899px) {
  .app-tour .at-nav { justify-content: flex-start; gap: 4px; }
  .app-tour .at-tab:not([aria-selected="true"]) .at-nt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* ---------- Unutrasnji raspored prema sirini ekrana aplikacije ---------- */

/* Pun prozor: duzi ekrani se slazu u kolone, pa vise stane u jedan snimak. */
@container at-main (min-width: 860px) {
  .app-tour .at-statwrap {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .app-tour .at-statwrap > .at-duo { display: contents; }
  .app-tour .at-goalcard { justify-content: space-between; }
  .app-tour .at-actcard { display: flex; flex-direction: column; }
  .app-tour .at-actbars { flex: 1 1 auto; height: auto; min-height: 92px; }
  .app-tour .at-statwrap .at-tiles,
  .app-tour .at-statwrap .at-rankcard,
  .app-tour .at-statwrap > .at-card:last-child { grid-column: 1 / -1; }
  .app-tour .at-statwrap .at-reccard { grid-column: 2 / -1; }
  .app-tour .at-tile {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    column-gap: 11px;
    padding: 11px 13px;
  }
  .app-tour .at-tileic { grid-row: span 2; margin-bottom: 0; }
  .app-tour .at-enginewrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .app-tour .at-enginewrap .at-mdisk .at-pathrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .app-tour .at-modellist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-tour .at-modelrow {
    grid-column: 1 / -1;
    grid-template-columns: 38px minmax(0, 1fr) auto minmax(118px, auto);
    column-gap: 16px;
    row-gap: 2px;
    padding: 11px 16px;
  }
  .app-tour .at-modelrow > .at-mi { grid-row: 1 / 3; }
  .app-tour .at-modelrow .at-mt { display: contents; }
  .app-tour .at-modelrow .at-mt > b { grid-column: 2; grid-row: 1; }
  .app-tour .at-modelrow .at-mt > i { grid-column: 2; grid-row: 2; }
  .app-tour .at-modelrow .at-modellic { grid-column: 3; grid-row: 1 / 3; align-self: center; margin-top: 0; }
  .app-tour .at-modelrow .at-modelside { grid-column: 4; grid-row: 1 / 3; }
}
@container at-main (max-width: 900px) {
  .app-tour .at-stats5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-tour .at-stats5 .at-scard:nth-child(5) { grid-column: span 2; }
}
@container at-main (max-width: 700px) {
  .app-tour .at-duo { grid-template-columns: minmax(0, 1fr); }
}
@container at-main (max-width: 620px) {
  .app-tour .at-enginewrap,
  .app-tour .at-dictzamene { grid-template-columns: minmax(0, 1fr); }
  .app-tour .at-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container at-main (max-width: 540px) {
  .app-tour .at-phead { align-items: flex-start; margin-bottom: 12px; }
  .app-tour .at-phead h3 { font-size: 22px; }
  .app-tour .at-dictbar { gap: 10px; padding: 7px 14px 7px 7px; margin-bottom: 12px; }
  .app-tour .at-mic { width: 38px; height: 38px; }
  .app-tour .at-mic .at-ic { width: 18px; height: 18px; }
  .app-tour .at-status,
  .app-tour .at-caret { display: none; }
  .app-tour .at-dicttx { font-size: 14px; }
  .app-tour .at-stats3 { grid-template-columns: minmax(0, 1fr); }
  .app-tour .at-bnum { font-size: 30px; }
  .app-tour .at-stats5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-tour .at-stats5 .at-scard:nth-child(5) { grid-column: 1 / -1; }
  .app-tour .at-card,
  .app-tour .at-engcard { padding: 14px; }
  .app-tour .at-ladder { gap: 4px; margin-top: 20px; }
  .app-tour .at-node { font-size: 13px; }
  .app-tour .at-achgrid { grid-template-columns: minmax(0, 1fr); }
  .app-tour .at-herolvl { padding: 16px; }
  .app-tour .at-heroname b { font-size: 24px; }
  .app-tour .at-modelrow { grid-template-columns: 38px minmax(0, 1fr); padding: 13px 14px; }
  .app-tour .at-modelside { grid-column: 2; flex-direction: row; align-items: center; gap: 12px; }
  .app-tour .at-histrow { padding: 12px; gap: 10px; }
}
@container at-main (max-width: 360px) {
  .app-tour .at-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-tour .at-actbars { gap: 2px; }
  .app-tour .at-diff { margin-left: 0; }
  .app-tour .at-spill { padding: 6px 11px; font-size: 12px; }
}

/* ---------- Manje pokreta ---------- */

/* Bez pokreta prozor stoji upaljen od pocetka, a tema se menja odmah. */
@media (prefers-reduced-motion: reduce) {
  .app-tour .at-panel.is-on,
  .app-tour .at-dictbar[data-phase] .at-mic,
  .app-tour .at-dictbar[data-phase] .at-dwave i { animation: none; }
  .app-tour .at-dwave i { height: 12px; }
  .app-tour.is-armed .at-fill > i,
  .app-tour.is-armed.is-live .at-panel.is-on .at-fill > i,
  .app-tour.is-armed.is-live .at-panel.is-on .at-replay .at-fill > i { transform: none; transition: none; }
  .app-tour .at-win,
  .app-tour .at-th i,
  .app-tour .at-swdot { transition: none; }
  html.js .app-tour .at-power,
  html.js .app-tour .at-picker,
  html.js .app-tour:not(.is-on) .at-power,
  html.js .app-tour:not(.is-on) .at-picker { opacity: 1; visibility: visible; transform: none; animation: none; }
  html.js .app-tour .at-win::after,
  html.js .app-tour:not(.is-on) .at-win::after { opacity: 0; animation: none; }
}

/* ---------- Rez 11 · plocice objasnjavaju sta mere (kao u aplikaciji: klik, „Sta je ovo", „Kako se racuna") ---------- */

.app-tour [data-info] { position: relative; cursor: pointer; transition: box-shadow 0.18s var(--ease-out), background-color 0.18s var(--ease-out); }
.app-tour [data-info]:not(.at-ibtn):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--stroke-soft)); }
.app-tour [data-info]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-tour [data-info][aria-expanded="true"]:not(.at-ibtn) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.app-tour .at-scard[data-info]:hover .at-info { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
/* Plocice Statistike i bedzevi: „i" se pojavi na hover, kao u aplikaciji. */
.app-tour .at-tile[data-info]::after,
.app-tour .at-achcell[data-info]::after {
  content: "i";
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--at-line, var(--stroke));
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.18s var(--ease-out);
}
.app-tour .at-tile[data-info]:is(:hover, :focus-visible)::after,
.app-tour .at-achcell[data-info]:is(:hover, :focus-visible)::after { opacity: 1; }
.app-tour .at-ibtn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
}
.app-tour .at-ibtn .at-ic { width: 15px; height: 15px; }
.app-tour .at-ibtn:hover,
.app-tour .at-ibtn[aria-expanded="true"] { background: var(--surface-2); color: var(--text-bright); }

.app-tour .at-pop {
  position: absolute;
  z-index: 30;
  width: 300px;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--win-bg) 92%, var(--text-bright) 8%);
  box-shadow:
    inset 0 0 0 1px var(--stroke),
    0 18px 44px color-mix(in srgb, var(--os-black) 45%, transparent),
    0 4px 12px color-mix(in srgb, var(--os-black) 22%, transparent);
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  animation: at-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-tour .at-pop[hidden] { display: none; }
/* Strelica ka plocici (gore ili dole). */
.app-tour .at-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--ax, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: inherit;
  box-shadow: inset 1px 1px 0 var(--stroke);
  transform: rotate(45deg);
}
.app-tour .at-pop.is-up::before { top: auto; bottom: -6px; box-shadow: inset -1px -1px 0 var(--stroke); }
.app-tour .at-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.app-tour .at-pop-ic { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--pc, var(--accent)) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--accent)) 40%, transparent); color: var(--pc, var(--accent)); }
.app-tour .at-pop-ic .at-ic { width: 17px; height: 17px; }
.app-tour .at-pop-head > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.app-tour .at-pop-head b { font-size: 14.5px; font-weight: 700; color: var(--text-bright); }
.app-tour .at-pop-head i { font-size: 11px; font-style: normal; color: var(--text-muted); }
.app-tour .at-pop-x { display: grid; flex: none; place-items: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-primary); cursor: pointer; }
.app-tour .at-pop-x .at-ic { width: 13px; height: 13px; }
.app-tour .at-pop-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.app-tour .at-pop-h { margin: 8px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc, var(--accent)); }
.app-tour .at-pop-p { margin: 0; color: var(--text-primary); }
.app-tour .at-pop-tiers { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; font-size: 11.5px; color: var(--text-secondary); }
.app-tour .at-pop-tiers span { display: inline-flex; align-items: center; gap: 5px; }
.app-tour .at-pop-tiers i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--c), var(--c2)); }
.app-tour .at-pop-foot { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--stroke-soft, var(--stroke)); font-size: 11px; color: var(--text-muted); }
.app-tour .at-pop-foot .at-ic { width: 13px; height: 13px; color: var(--accent); }
@keyframes at-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .app-tour .at-pop { animation: none; } }