/* ============================================================================
   planner-izlog.css — SKIN "IZLOG" (smjer C, 2026-09-09) · v1.3 — vodič: full preview stage + bottom glass sheet, redesigned summary (lifter excluded: its guide is an in-page panel)
   Layout and look only. The engine (steps, options, counter), the 3D scene,
   the placement tools and the counting rules are untouched — this file only
   rearranges what the engine renders. Scoped to .poz-plan.poz-skin-izlog,
   which planner-core.js adds when ?skin=izlog was seen (?skin=classic forgets).
   ========================================================================== */

/* ——— shared: the accent is the tool's own (--acc), never a new colour ———
   Sven, 2026-09-09: "the colour coding needs to be more subtle and look more
   polished". The rule now: --acc is the brand HUE, and nothing paints with it
   raw except the ONE primary action on a screen. Every state derives a calm
   variant from it, so a selection reads as "chosen", not as a warning light.
   The same perceived weight needs different alphas on the guide's dark glass
   and the expert panel's white — hence two pairs, not one. */
.poz-plan.poz-skin-izlog {
  --acc-ink:  color-mix(in srgb, var(--acc, #0066CC) 86%, #0B0D10 14%);  /* text/underline on white */
  --acc-lift: color-mix(in srgb, var(--acc, #0066CC) 70%, #FFFFFF 30%);  /* text on the dark sheet */
  --acc-line: color-mix(in srgb, var(--acc, #0066CC) 38%, transparent);  /* a chosen edge, on white */
  --acc-wash: color-mix(in srgb, var(--acc, #0066CC) 7%, transparent);   /* the fill under it */
  --acc-line-d: color-mix(in srgb, var(--acc, #0066CC) 58%, transparent);/* the same, on dark */
  --acc-wash-d: color-mix(in srgb, var(--acc, #0066CC) 13%, transparent);

  /* LIQUID GLASS for the two expert bars. The header's lesson holds: ONE element,
     ONE backdrop-filter, bevel and specular as STATIC gradient layers in the same
     background. No second filter (two readbacks tear the rim), no mix-blend-mode
     (it re-composites the whole pane, text included, on every frame behind it),
     nothing animated on top of the filter. The body genuinely refracts — that is
     the cue that reads as glass; the edges cost nothing. */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.63) 44%, rgba(255, 255, 255, 0.70) 100%);
  --glass-blur: blur(26px) saturate(178%) brightness(1.05);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 0 0 1px rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(20, 30, 42, 0.05);
  --glass-cast: 0 26px 58px -34px rgba(15, 25, 40, 0.42);
  --glass-edge: 1px solid rgba(255, 255, 255, 0.5);
}
.poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__wizard.poz-vodic { counter-reset: vnav; }

/* ============================ VODIČ — DESKTOP (901 px +) ·  v2 ============================
   The three views ARE the interface: one big stage that fills the screen, the two secondary views beside it,
   and the step's choices in a dark glass sheet along the bottom. Nothing floats over the drawing. */
@media (min-width: 901px) {
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__wizard.poz-vodic {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 96px 0 0; overflow: hidden;
    background: radial-gradient(90% 62% at 50% 40%, #22252C 0%, #101216 58%, #08090B 100%);
  }
  /* the shell behind the guide is dark too — no light edge anywhere while the overlay is open */
  .poz-plan.poz-skin-izlog:has(.poz-vodic:not([hidden])) { background: #08090B; }
  .poz-plan.poz-skin-izlog:has(.poz-vodic:not([hidden])) .poz-plan__frame,
  .poz-plan.poz-skin-izlog:has(.poz-vodic:not([hidden])) .poz-plan__canvas,
  .poz-plan.poz-skin-izlog:has(.poz-vodic:not([hidden])) .poz-plan__scene { background: #08090B; }

  /* —— top row: title · numbered steps · advanced · close —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__bar {
    flex: none; display: flex; align-items: center; gap: 18px; padding: 4px 22px 0; border: 0; background: transparent;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__brand {
    font-family: Michroma, sans-serif; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: #8B929E; white-space: nowrap; flex: 0 0 auto;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav { flex: 1 1 auto; display: flex; justify-content: center; gap: 20px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button {
    display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 0; cursor: pointer;
    font-family: Michroma, sans-serif; font-size: 8.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(237, 240, 244, 0.7); border-bottom: 0; transition: color 0.16s;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button::before {
    counter-increment: vnav; content: counter(vnav);
    width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0;
    background: rgba(255, 255, 255, 0.13); border: 1px solid transparent; color: #EDF0F4;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button:hover { color: #fff; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-on { color: #fff; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-on::before { background: var(--acc, #0066CC); color: #fff; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-locked { opacity: 1; color: rgba(237, 240, 244, 0.36); cursor: default; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-locked::before { background: transparent; border-color: rgba(255, 255, 255, 0.16); color: rgba(237, 240, 244, 0.45); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__toexpert {
    flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(22, 24, 28, 0.6); color: #B3BAC5; font-size: 11.5px; font-weight: 500;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__toexpert:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__toexpert svg { width: 14px; height: 14px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__x { flex: none; width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #C9D0D8; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__credits { display: none; }

  /* —— the stage: main view + the two secondary views, filling everything above the sheet —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main { position: static; flex: 1 1 auto; min-height: 0; display: block; padding: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__hero {
    position: absolute; left: 22px; right: 22px; top: 148px; bottom: 244px; display: grid; gap: 10px; padding: 0; margin: 0;
    grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: 1fr 1fr; min-height: 0; background: none; border: 0; box-shadow: none;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__hero::after { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__view--main {
    grid-column: 1; grid-row: 1 / span 2; position: relative; inset: auto; margin: 0; display: grid; place-items: center; overflow: hidden;
    border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(120% 100% at 50% 38%, #24272E 0%, #16181D 58%, #0E1013 100%);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__view--main img { max-width: 88%; max-height: 88%; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__view--main .poz-vodic__livecnv { position: absolute; inset: 0; width: 100%; height: 100%; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__marks { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__subviews {
    position: static; grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 10px; width: auto; height: auto;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__subviews .poz-vodic__view {
    position: relative; width: auto; height: auto; margin: 0; display: grid; place-items: center; overflow: hidden;
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(120% 100% at 50% 38%, #22252B 0%, #15171C 60%, #0D0F12 100%);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__subviews .poz-vodic__view img { max-width: 88%; max-height: 78%; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__view > svg, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__view .poz-vodic__plansvg {
    width: 86%; height: auto; max-height: 82%; display: block;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__view figcaption {
    position: absolute; left: 12px; bottom: 10px; right: auto; top: auto; padding: 5px 9px; border-radius: 999px;
    font-family: Michroma, sans-serif; font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase;
    background: rgba(10, 11, 14, 0.72); color: #C9D0D8; border: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* —— the sheet: the step's question and its choices, along the bottom —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__body {
    position: absolute; left: 22px; right: 22px; bottom: 78px; top: auto; height: 158px; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(196px, 248px) minmax(0, 1fr); align-items: center; gap: 24px;
    margin: 0; padding: 14px 20px; max-width: none; overflow: visible; text-align: left;
    border-radius: 18px 18px 0 0; border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0;
    background: rgba(16, 18, 22, 0.86);
    -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__step { grid-column: 1; margin: 0 0 6px; font-family: Michroma, sans-serif; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #6C7683; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__q { grid-column: 1; margin: 0; font-family: var(--poz-font-body, 'IBM Plex Sans', sans-serif); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; color: #F4F6F8; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__e { grid-column: 1; margin: 6px 0 0; max-width: none; font-size: 12px; line-height: 1.45; color: #9AA3AE; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* the question block stacks in column 1, the choices fill column 2 */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__step, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__q, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__e { grid-row: auto; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts--tiered, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts--arch, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts--tok {
    grid-column: 2; grid-row: 1 / span 4; align-self: center;
    display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: stretch; gap: 10px;
    grid-template-columns: none; overflow-x: hidden; overflow-y: auto; padding: 2px 2px 6px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts::-webkit-scrollbar { height: 6px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; }
  /* one choice = a compact horizontal card */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt {
    flex: 1 1 260px; width: auto; min-width: 226px; max-width: 400px; min-height: 0; padding: 9px 14px 9px 9px;
    display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; border-radius: 14px;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: none; transform: none;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt:hover { transform: none; border-color: rgba(255, 255, 255, 0.3); box-shadow: none; background: rgba(255, 255, 255, 0.07); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt.is-on {
    border-color: var(--acc-line-d); background: var(--acc-wash-d); box-shadow: none;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts .poz-vodic__opt .poz-vodic__media,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt.is-lg .poz-vodic__media, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt.is-sm .poz-vodic__media {
    flex: 0 0 auto; width: 82px; height: 58px; border: 0; border-radius: 10px; overflow: hidden;
    background: linear-gradient(155deg, #2B3037 0%, #1E2228 55%, #15181D 100%);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts .poz-vodic__opt .poz-vodic__media img { max-width: 92%; max-height: 50px; filter: brightness(1.16) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt-tx { flex: 1 1 auto; min-width: 0; padding: 0; gap: 2px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt-tx b { font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt-tx i { font-size: 11.5px; line-height: 1.35; color: #9AA3AE; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__radio { display: none; }
  /* the load already stands in the title of these cards — the tag only collided with the badge */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__kg { display: none; }
  /* the recommendation is a ribbon along the card's top edge — over a 74 px thumbnail a corner badge only clips */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__pop {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 17px; padding: 0; border-radius: 13px 13px 0 0;
    display: grid; place-items: center; box-shadow: none;
    background: color-mix(in srgb, var(--acc, #0066CC) 20%, transparent); color: var(--acc-lift);
    border-bottom: 1px solid color-mix(in srgb, var(--acc, #0066CC) 26%, transparent);
    font-family: Michroma, sans-serif; font-style: normal; font-size: 6.5px; letter-spacing: 0.1em; white-space: nowrap;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt:has(.poz-vodic__pop) { padding-top: 24px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt:has(.poz-vodic__pop) .poz-vodic__media { height: 52px; position: static; }
  /* THE OFFSET-PARENT TRAP: .poz-vodic__media is position:relative in the classic sheet, so a ribbon
     with left/right:0 spans the 74 px THUMBNAIL, not the card. The card must be the containing block. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt { position: relative; }
  /* the size steps: the plan card with its counter is one wide choice */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt--hero { min-width: 330px; max-width: 360px; padding: 7px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt--hero .poz-vodic__media { width: 104px !important; height: 66px !important; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__hero-ctl { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__stepper--big { padding: 0; gap: 10px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__stepper--big > b { font-size: 19px; min-width: 62px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__stepper--big button { width: 30px; height: 30px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__hero-sub { font-size: 10.5px; color: #9AA3AE; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__chip--opt {
    flex: 0 0 auto; min-width: 92px; padding: 10px 14px; border-radius: 12px; flex-direction: column; gap: 1px; align-items: flex-start;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__chip--opt b { font-size: 13.5px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__chip--opt i { font-size: 10.5px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__chip--opt.is-on { border-color: var(--acc-line-d); background: var(--acc-wash-d); }
  /* a step with a follow-up question (heights) keeps it beside the choices */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__subq { grid-column: 2; grid-row: 4; margin: 0; padding: 0; border: 0; align-self: end; animation: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__subq) .poz-vodic__body { grid-template-rows: auto auto 1fr auto; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__subq) .poz-vodic__opts { grid-row: 1 / 4; align-self: center; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__subq h4 { margin: 0 0 5px; font-size: 8.5px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__chips .poz-vodic__chip { flex: 0 0 auto; min-width: 74px; padding: 7px 10px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__chips .poz-vodic__chip.is-on { border-color: var(--acc-line-d); background: var(--acc-wash-d); }
  /* SIZE THE SHEET TO THE QUESTION. With four choices or fewer one row is roomy;
     from five on they were squeezed to their minimum width and the titles broke
     into three clipped lines. Two rows, and every card keeps a readable width. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__opts > :nth-child(5)) .poz-vodic__body { height: 212px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__opts > :nth-child(5)) .poz-vodic__hero { bottom: 298px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__opts > :nth-child(5)) .poz-vodic__opt { flex: 1 1 288px; min-width: 262px; max-width: 340px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__opts > :nth-child(9)) .poz-vodic__opt { flex: 1 1 228px; min-width: 214px; max-width: 300px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__subq) .poz-vodic__body { height: 214px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main:has(.poz-vodic__subq) .poz-vodic__hero { bottom: 300px; }

  /* —— the foot: what you have so far, and the way on —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__foot {
    position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 3; height: 56px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 12px 0 20px;
    border-radius: 0 0 18px 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(16, 18, 22, 0.86);
    -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__sum { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 16px; min-width: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__sum > b { font-family: Michroma, sans-serif; font-size: 8.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #8B929E; white-space: nowrap; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__facts { display: flex; gap: 16px; overflow: hidden; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__foot .poz-vodic__fact { flex-direction: row; align-items: baseline; gap: 6px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__foot .poz-vodic__fact i { font-size: 10.5px; color: #8B929E; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__foot .poz-vodic__fact b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; color: #fff; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__fsep { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__foot-btns { gap: 8px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__back, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__next {
    border-radius: 11px; padding: 11px 20px; font-size: 12.5px; font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: #C9D0D8;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__next { background: var(--acc, #0066CC); color: #fff; border-color: var(--acc, #0066CC); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__next:hover { filter: brightness(1.08); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__next:disabled { opacity: 0.35; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__legal { position: absolute; left: 0; right: 0; bottom: 5px; z-index: 3; text-align: center; margin: 0; padding: 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.32); }

  /* ═══════════════ the last step — the moment the stage is SOLD ═══════════════
     Sven, 2026-09-10: the render was "wide screen, thin, and the stage too small
     with bleed left and right", the front and plan views were thumbnails, the
     fact block "broken" and the parts list unpadded.
     The page is now a product page on ONE deterministic grid:
       row 1 (470 px)  hero 540×470 (1.15:1 — near square, the render FILLS it,
                       because the photoreal pass sizes its canvas and camera
                       from this element's own clientWidth/clientHeight) plus a
                       424 px column carrying front and plan at 424×226 each;
                       and, at the right, the reading column: title, the
                       specification table, the one action.
       row 2 (164 px)  the parts list, full width, on its own padded surface.
     Nothing here is boxed for the sake of boxing: the reading column sits on the
     page ground, the way a spec column does on a product page. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum { display: block; }

  /* ——— row 1, left: the three views ——— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__hero {
    left: 22px; right: calc(410px + 18px + 22px); top: 140px; bottom: calc(126px + max(166px, 18vh)); height: auto;
    grid-template-columns: minmax(320px, calc((100vh - 266px - max(166px, 18vh)) * 7 / 6)) minmax(340px, 1fr);
    grid-template-rows: 1fr 1fr; gap: 18px;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__view--main { border-radius: 22px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__subviews { gap: 18px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__subviews .poz-vodic__view { border-radius: 18px; }
  /* the technical views are FEATURED now, so they get the room the render has */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__subviews .poz-vodic__view img {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__subviews .poz-vodic__view > svg { width: 98%; height: auto; max-height: 95%; }
  /* a hairline of light along the top edge — the panels read as machined, not flat */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__view--main,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__subviews .poz-vodic__view { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

  /* ——— the deterministic page grid ——— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__body {
    position: absolute; left: 22px; right: 22px; top: 140px; bottom: 78px; height: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) 410px;
    grid-template-rows: 18px auto 18px auto 16px auto minmax(0, 1fr) 30px max(166px, 18vh);
    column-gap: 18px; row-gap: 0; padding: 0; overflow: visible; align-items: start;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* ——— row 1, right: the reading column ——— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__step { grid-column: 2; grid-row: 1; margin: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__q {
    grid-column: 2; grid-row: 2; align-self: start; margin: 0;
    font-size: 28px; line-height: 1.12; letter-spacing: -0.018em; white-space: normal;
  }
  /* row 3 is now pure air between the title and the table */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__e { display: none; }

  /* ——— the specification table ———
     As eight bare label/value lines running edge to edge it read as a dump, not a
     design. It is a table now: its own caption, one rhythm, hairlines between,
     the values right-aligned on a single mono column so the eye can run down them. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts {
    grid-column: 2; grid-row: 4; align-self: start; margin: 0; display: block;
    min-height: 0; max-height: none; overflow: visible;
    padding: 7px 18px 3px; box-sizing: border-box; border-radius: 18px;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
    scrollbar-width: none;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts::before {
    content: 'Specifikacija'; display: block; margin: 0 0 5px; padding: 0 0 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-family: Michroma, sans-serif; font-size: 8px; font-weight: 400;
    letter-spacing: 0.18em; text-transform: uppercase; color: #6C7683;
  }
  html[lang^="en"] .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts::before { content: 'Specification'; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts .poz-vodic__fact {
    display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 16px;
    height: 21px; box-sizing: border-box; padding: 0; margin: 0; background: none; border: 0; border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055); flex-direction: row;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts .poz-vodic__fact:last-of-type { border-bottom: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts::-webkit-scrollbar { width: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts .poz-vodic__fact i {
    font-size: 11.5px; font-style: normal; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: #838B96; white-space: nowrap;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__sumfacts .poz-vodic__fact b {
    font-family: var(--poz-font-body, 'IBM Plex Sans', sans-serif); font-size: 12.5px; font-weight: 500;
    color: #F2F4F7; text-align: right; white-space: nowrap; letter-spacing: -0.002em;
    font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__fsep { display: none; }

  /* ——— the one action ——— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__paths {
    grid-column: 2; grid-row: 6; align-self: start; display: flex; flex-direction: column; gap: 10px; margin: 0;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path {
    padding: 15px 18px; gap: 13px; border-radius: 14px; align-items: center; text-align: left;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path--cta {
    order: 1; background: var(--acc, #0066CC); border: 1px solid var(--acc, #0066CC); color: #fff;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--acc, #0066CC) 30%, transparent);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path--cta:hover { filter: brightness(1.07); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path--cta .poz-vodic__path-tx b { color: #fff; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path--cta .poz-vodic__path-tx i { color: rgba(255, 255, 255, 0.8); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path--cta .poz-vodic__path-ico { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: transparent; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path:not(.poz-vodic__path--cta) {
    order: 2; padding: 11px 18px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: none;
    justify-content: center;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path:not(.poz-vodic__path--cta):hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.04); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path:not(.poz-vodic__path--cta) .poz-vodic__path-ico { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path:not(.poz-vodic__path--cta) .poz-vodic__path-tx i { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path:not(.poz-vodic__path--cta) .poz-vodic__path-tx { text-align: center; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path-ico { width: 34px; height: 34px; flex: 0 0 34px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path-tx { min-width: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path-tx b { font-size: 13.5px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__path-tx i { font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ——— row 2: the parts, full width and PADDED ——— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__spechead {
    grid-column: 1 / -1; grid-row: 8; align-self: end; margin: 0 0 8px; padding: 0; border: 0;
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist {
    grid-column: 1 / -1; grid-row: 9; margin: 0; align-self: stretch; height: 100%; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; row-gap: 0;
    grid-auto-rows: minmax(46px, 1fr); align-content: stretch; grid-auto-flow: row;
    padding: 4px 22px; box-sizing: border-box; border-radius: 18px;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* THE LEDGER TRAP: the list is not flat — a card can carry .poz-plan__item.is-sub
     breakdown lines under it. Poured down columns those children land far from their
     parent and read as broken rows. Row-major keeps the reading order, and a sub-line
     spans the full width right under the row it belongs to. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist > .poz-plan__item.is-sub { padding-left: 48px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist > * {
    min-height: 44px; align-items: center; padding: 4px 0; gap: 14px;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist .poz-plan__itemcard-img,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist .poz-plan__itemcard-glyph {
    width: 34px; height: 34px; border: 0 !important; border-radius: 8px; padding: 2px; object-fit: contain;
    /* the part shots are lit for a white card — on the dark ground they need a plate */
    background: rgba(255, 255, 255, 0.06) !important; filter: brightness(1.14) contrast(1.04);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist .poz-plan__itemcard-name { font-size: 12px; color: #EDF0F4 !important; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist .poz-plan__itemcard-code { color: #7C848F !important; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist .poz-plan__item.is-sub,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist .poz-plan__item.is-sub * { color: #99A1AC !important; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum .poz-vodic__speclist .poz-plan__itemcard-qty {
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 500; color: #EDF0F4;
    font-variant-numeric: tabular-nums;
  }
  /* the summary's own foot repeats every value the table above now carries */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum ~ .poz-vodic__foot .poz-vodic__sum { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__main--sum ~ .poz-vodic__foot {
    justify-content: flex-end; background: none; border: 0; border-radius: 0; padding-right: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__path--cta { border-color: color-mix(in srgb, var(--acc, #0066CC) 55%, transparent); background: color-mix(in srgb, var(--acc, #0066CC) 14%, transparent); }
}


/* ============================ PHONE / TABLET (≤ 900 px) ============================
   Step by step only. Advanced mode is hidden here and the visitor is told to open it
   on a wider screen; nothing else about the phone guide (document flow, sheets) changes. */
@media (max-width: 900px) {
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__wizard.poz-vodic:not([hidden]) { border: 0; border-radius: 0; background: #08090B; }
  /* top: progress only */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__bar { grid-template-columns: minmax(0, 1fr) 44px; padding: 12px 14px 8px; border-bottom: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__toexpert { display: none !important; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav { grid-row: 1; grid-column: 1; gap: 10px; scrollbar-width: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav::-webkit-scrollbar { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; min-height: 36px;
    font-family: Michroma, sans-serif; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237, 240, 244, 0.7);
    border-bottom: 0;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button::before {
    counter-increment: vnav; content: counter(vnav);
    width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0;
    background: rgba(255, 255, 255, 0.14); color: #EDF0F4;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-on { color: #fff; border-bottom-color: transparent; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-on::before { background: var(--acc, #0066CC); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-locked { opacity: 1; color: rgba(237, 240, 244, 0.38); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__nav button.is-locked::before { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__x { grid-row: 1; grid-column: 2; width: 40px; height: 40px; border: 0; background: rgba(255, 255, 255, 0.1); }
  /* hero: the render, bigger, with a fade into the question */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__hero {
    height: clamp(240px, 40svh, 380px); max-height: none; background: radial-gradient(90% 80% at 50% 60%, #22252C 0%, #101216 60%, #08090B 100%);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none; background: linear-gradient(rgba(8, 9, 11, 0), #08090B); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__view figcaption {
    inset: auto auto 12px 14px; padding: 5px 9px; border-radius: 999px; z-index: 2;
    font-family: Michroma, sans-serif; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
    background: rgba(12, 13, 16, 0.72); color: #DCE4EC; border: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* question */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__body { padding: 6px 16px 16px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__step { margin-bottom: 8px; font-family: Michroma, sans-serif; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #6C7683; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__q { margin: 0 0 6px; font: 600 24px/1.2 var(--poz-font-body, 'IBM Plex Sans', sans-serif); letter-spacing: -0.005em; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__e { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: #9AA3AE; }
  /* tiles as rows: picture left, text, radio right */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opts--tok { grid-template-columns: 1fr !important; gap: 8px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt {
    flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 6px 12px 6px 6px;
    border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.045);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt.is-on { border-color: var(--acc-line-d); background: var(--acc-wash-d); box-shadow: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__media { width: 84px; height: 54px; flex: none; border-radius: 10px; background: linear-gradient(155deg, #2B3037 0%, #1E2228 55%, #15181D 100%); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__media img, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__media svg { width: 86%; height: 44px; max-height: 44px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt-tx { padding: 0; gap: 2px; flex: 1 1 auto; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt-tx b { font-size: 15px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt-tx i { font-size: 11.5px; color: #9AA3AE; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__radio {
    display: block; position: static; flex: none; width: 20px; height: 20px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.3);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt.is-on .poz-vodic__radio { border-color: var(--acc, #3E7BFA); background: radial-gradient(circle at center, var(--acc, #3E7BFA) 0 45%, transparent 50%); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__pop { left: 0; right: 0; top: 0; height: 16px; border-radius: 12px 12px 0 0; box-shadow: none; font-size: 6px; background: color-mix(in srgb, var(--acc, #0066CC) 20%, transparent); color: var(--acc-lift); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt:has(.poz-vodic__pop) { padding-top: 22px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt:has(.poz-vodic__pop) .poz-vodic__media { position: static; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt--hero { flex-direction: column; align-items: stretch; padding: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__opt--hero .poz-vodic__media { width: 100%; height: 100px; border-radius: 14px 14px 0 0; }
  /* the foot sticks to the bottom of the screen while the list scrolls */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__foot {
    position: sticky; bottom: 12px; z-index: 5; margin: 6px 14px 14px; box-sizing: border-box;
    flex-direction: row; align-items: center; gap: 10px; padding: 8px 8px 8px 16px;
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(16, 18, 22, 0.94);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__sum { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__sum > b { font-size: 12.5px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__facts { flex-wrap: nowrap; gap: 8px; overflow: hidden; white-space: nowrap; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__fact { flex-direction: row; gap: 4px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__fact i { font-size: 10px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__fact b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__foot-btns { width: auto; flex: none; gap: 6px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__back, .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__next { flex: none; min-height: 44px; padding: 10px 14px; border-radius: 12px; font-size: 13px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__next { background: #FFFFFF; color: #16171B; border-color: #FFFFFF; padding: 10px 18px; }
  /* summary: no advanced path on a phone — say why */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__path[data-vfinish="expert"] { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__paths::after {
    content: 'Napredni način radi na širem zaslonu. Kopiraj link i otvori ga na računalu ili tabletu.';
    display: block; padding: 10px 2px 0; font-size: 12.5px; line-height: 1.45; color: #8B929E;
  }
  html[lang^="en"] .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__paths::after { content: 'Advanced mode needs a wider screen. Copy the link and open it on a computer or tablet.'; }
  /* the mode chooser offers the guide only, with the same note */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__entry-cards { grid-template-columns: 1fr; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__entry-card[data-mode="expert"] { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__entry-hint { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__entry-cards::after {
    content: 'Napredni način radi na širem zaslonu — na mobitelu te vodimo korak po korak.';
    display: block; text-align: center; font-size: 12.5px; line-height: 1.5; color: #8B929E; padding: 4px 8px 0;
  }
  html[lang^="en"] .poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-plan__entry-cards::after { content: 'Advanced mode needs a wider screen — on a phone we guide you step by step.'; }
}

/* ============================ EXPERT MODE (901 px +) — v2, after Sven's review ============================
   "The tabs with the selections are the most important part of the interface" — so they are a full-height LEFT
   PANEL, not a strip: a quiet segmented tab control on top, the chosen tool's options below with room to spare.
   The right panel is the specification with the primary action. No pills anywhere: tabs are a segmented control,
   codes are plain mono, Michroma stays on section headings only. Light studio only. */
@media (min-width: 901px) {
  /* —— top row: help/examples/undo/redo left · viewport tools centre · views right —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-tb { top: calc(var(--poz-header-h, 124px) - 11px); bottom: auto; left: 50%; transform: translateX(-50%); z-index: 31; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__bar--top { z-index: 32; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__views { left: auto; right: 0; transform: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__theme { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__topact { order: 3; margin-left: 0; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__topact .poz-plan__iconb[data-undo],
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__topact .poz-plan__iconb[data-reset] { position: static; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__send--top { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-coach { display: none; }

  /* —— left panel: tools —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tools,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="zbor"] .poz-plan__tools,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="truss"] .poz-plan__tools {
    left: 18px; top: 176px; bottom: 286px; right: auto; width: 372px; height: auto; max-height: none;
    display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
    /* the checks are the same pane's lower section, so this half is only rounded on top */
    border-radius: 18px 18px 0 0; border: var(--glass-edge); border-bottom: 0;
    background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-rim);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tools-head { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__toollist {
    flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 20px;
    margin: 0; padding: 6px 18px 0; background: none; border-radius: 0;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__toolgroup { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="zbor"] .poz-plan__tool,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="truss"] .poz-plan__tool {
    flex: 0 0 auto; width: auto; max-width: none; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 13px 0 11px; gap: 0;
    display: inline-flex; grid-template-columns: none; flex-direction: row; align-items: center; justify-content: center;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: #6B7480; transition: color 0.16s, border-color 0.16s;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool:hover { background: none; color: #0C0D10; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool.is-on { background: none; color: var(--acc-ink); border-bottom-color: var(--acc-ink); box-shadow: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__toollist::after { content: ''; order: 9; flex: 0 0 100%; height: 1px; margin: -1px -18px 0; background: rgba(20, 30, 42, 0.08); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool-ico, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool-num, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool-chev,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool-sub, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool-count { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool-name,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="zbor"] .poz-plan__tool-name,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="truss"] .poz-plan__tool-name {
    max-width: none; font: 500 13px/1.2 var(--poz-font-body, 'IBM Plex Sans', sans-serif); letter-spacing: 0; text-transform: none; text-align: center;
    white-space: nowrap;
  }
  /* the open tool fills the rest of the panel; nothing floats */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__panelwrap { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__panelwrap.is-open,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool.is-on + .poz-plan__panelwrap,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="zbor"] .poz-plan__panelwrap.is-open,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio[data-planner="truss"] .poz-plan__panelwrap.is-open {
    display: block; position: static; left: auto; top: auto !important; z-index: auto; order: 10;
    flex: 0 0 100%; width: 100%; min-height: 0; max-height: calc(100% - 52px); overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -18px; box-sizing: border-box; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; transform: none;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__panelwrap.is-open::before, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool.is-on + .poz-plan__panelwrap::before { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__panelwrap.is-open .poz-plan__panel, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool.is-on + .poz-plan__panelwrap .poz-plan__panel { max-height: none; overflow: visible; padding: 8px 18px 20px; border-radius: 0; opacity: 1; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tools-foot { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__restore--tools { top: 176px; left: 18px; transform: none; }

  /* —— inside a tool: Michroma headings, clean tiles, no pills —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__lbl {
    display: block; margin: 16px 0 8px; font-family: Michroma, sans-serif; font-size: 8.5px; font-weight: 400;
    letter-spacing: 0.16em; text-transform: uppercase; color: #8B929E;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__lbl:first-child { margin-top: 8px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip {
    border-radius: 10px; border: 1px solid rgba(20, 30, 42, 0.12); background: #FFFFFF; color: #16171B;
    font: 500 12.5px/1.25 var(--poz-font-body, 'IBM Plex Sans', sans-serif); letter-spacing: 0; text-transform: none;
    padding: 9px 12px; box-shadow: none; transition: border-color 0.14s, background 0.14s;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip:hover { border-color: color-mix(in srgb, var(--acc, #0066CC) 26%, transparent); background: #FAFBFC; transform: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip.is-on {
    border-color: var(--acc-line); box-shadow: inset 0 0 0 1px var(--acc-line);
    background: color-mix(in srgb, var(--acc, #0066CC) 6%, #FFFFFF); color: #0C0D10;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip.is-on .poz-plan__chip-lbl, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip.is-on b { color: #0C0D10; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool-count { color: #8A929C; }

  /* the pick-only tools (Uredi, Ukloni) open no panel — without this the left
     rail is a large blank white card and reads as a broken toolbar */
  /* the tab row is flex:1 inside the panel, so it eats the height and the placard
     lands at the very bottom — with no panel open it should hug the tabs */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-uredi .poz-plan__toollist,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-brisi .poz-plan__toollist { flex: 0 0 auto; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-uredi .poz-plan__toollist::after,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-brisi .poz-plan__toollist::after { border-bottom-color: transparent; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-uredi .poz-plan__tools::after,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-brisi .poz-plan__tools::after {
    display: block; margin: 14px 18px 0; padding: 14px 15px;
    border-radius: 12px; border: 1px solid #E6E8EC; background: #F7F8FA;
    font-size: 12px; line-height: 1.45; color: #5A626C;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-uredi .poz-plan__tools::after { content: 'Alat Uredi je uključen. Klikni bilo koji postavljeni element u prikazu da mu promijeniš visinu, smjer ili tip. Tipka R ga zakreće.'; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-brisi .poz-plan__tools::after { content: 'Alat Ukloni je uključen. Klikni bilo koji postavljeni element u prikazu i nestaje. Povratak na gradnju je tipka Gradi ili E.'; }
  html[lang^="en"] .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-uredi .poz-plan__tools::after { content: 'The Edit tool is on. Click any placed item in the view to change its height, direction or type. R rotates it.'; }
  html[lang^="en"] .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio.is-tool-brisi .poz-plan__tools::after { content: 'The Remove tool is on. Click any placed item in the view and it is gone. Press Build or E to go back to building.'; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip.is-pic, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip.poz-mod { padding: 8px; border-radius: 12px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip.is-pic img { border-radius: 8px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__hint { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #6B7480; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__mini { border-radius: 8px; font: 500 11.5px/1 var(--poz-font-body, 'IBM Plex Sans', sans-serif); letter-spacing: 0; text-transform: none; }

  /* —— over the stage: the guide pill, the first-run explainer, the norms box, the cursor hint —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio [data-planner-grid]:not(.is-tools-docked) .poz-assist,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio [data-planner-grid].is-tools-docked .poz-assist,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-assist { left: 408px; right: auto; top: 196px; bottom: auto; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-intro { display: none; }   /* every mode switch is a reload, so the first-run explainer would return each time; the tool hints carry it */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__scene-hint { top: 196px; bottom: auto; left: auto; right: 424px; transform: none; }
  /* Sven: the safety checks were "an appended small window with the scroll". They are
     not a separate object — they are the LOWER SECTION of the left pane. They cannot
     be nested in the DOM (the dock is built inside the scene's own stacking context),
     so they abut the tool half exactly and share its glass: same width, same left,
     no gap, one hairline between, rounded only at the bottom. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left {
    left: 18px; right: auto; top: auto; bottom: 46px; width: 372px; height: 240px; z-index: 27;
    display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; gap: 0; padding: 0; box-sizing: border-box;
    border-radius: 0 0 18px 18px; border: var(--glass-edge); border-top: 1px solid rgba(20, 30, 42, 0.09);
    background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-rim), var(--glass-cast); overflow: hidden;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__checks {
    flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 2px 18px 6px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(20, 30, 42, 0.18) transparent;
  }
  /* four checks have to fit without a scrollbar — a scrolling stub is what made it
     read as "an appended small window" rather than a section of the pane */
  /* the dock carries its OWN LumiLas credit as its first child. It landed exactly on
     the seam between the two halves, reading as a stray mark bleeding through the
     glass, and it stole 19 px the four checks needed. The bottom credits strip
     already shows pozornice × LumiLas with the version and build, so it is a duplicate. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-dock-lls { display: none; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__check { padding: 6px 0; gap: 8px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__check-name { font-size: 11.5px; line-height: 1.3; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__check-tx { font-size: 10.5px; line-height: 1.35; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__checks::-webkit-scrollbar { width: 6px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__checks::-webkit-scrollbar-thumb { background: rgba(20, 30, 42, 0.16); border-radius: 999px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__checks-head { padding: 10px 0 6px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__checks-head > span:first-child { font-family: Michroma, sans-serif; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8B929E; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-sumcard { display: none; }
  /* the scene's centred wordmark is what stops the glass going more transparent —
     at 9 % it reads straight through the panes as a smear, so it is dimmed here */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__scene::before { opacity: 0.05; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__bar--bottom { left: 408px; bottom: 6px; font-size: 9px; }
  /* Sven: the logo, the copyright and the build number must ALWAYS be readable.
     Both bars used to run down to bottom:26px and the credits sat at bottom:13px,
     so the strip was painted over a white card in its on-dark colours. The bars
     now stop at 46px and this band belongs to the credits alone. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__credits, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__credits--flo {
    bottom: 12px; z-index: 40; pointer-events: none;
  }
  /* 7.5 px at 62 % ink is not "always visible" — the build number is what Sven
     reads off a screenshot when something is wrong with a specific build */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__credits i { font-size: 9px; color: rgba(22, 23, 27, 0.72); letter-spacing: 0.03em; }

  /* —— right panel: specification with the primary action; codes in plain mono —— */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec {
    right: 18px; top: 176px; bottom: 46px; width: 372px; border-radius: 18px;
    background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-cast);
  }
  /* Sven: "there shouldn't be an additional window below or behind the right
     specification tab". The head, the list and the foot each carried their OWN
     card background, radius and drop shadow INSIDE the drawer — three stacked
     surfaces reading as a window behind a window. The drawer is the only card. */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-head,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__bom,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tots,
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-foot {
    background: none !important; border-radius: 0 !important; box-shadow: none !important;
    border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-head { border-bottom: 1px solid rgba(20, 30, 42, 0.09) !important; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-foot { border-top: 1px solid rgba(20, 30, 42, 0.09) !important; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard { border-radius: 12px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard-code, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__item code {
    display: inline-block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
    font: 400 10.5px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.04em; text-transform: none; color: #6B7480;
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-foot .poz-plan__send {
    display: block; width: 100%; box-sizing: border-box; padding: 14px 18px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--acc, #0066CC); color: #fff; font-family: Michroma, sans-serif; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--acc, #0066CC) 20%, transparent);
  }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-foot { padding: 12px 16px 16px; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-links { justify-content: center; margin-top: 8px; }
}
/* the guide's summary uses the same plain designation style */
.poz-plan.poz-skin-izlog:not(.poz-plan--lift) .poz-vodic__speclist .poz-plan__itemcard-code {
  padding: 0; border: 0; border-radius: 0; background: none; font: 400 10.5px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: #9AA3AE;
}

/* ---- expert is the LIGHT studio whatever theme classes the root happens to carry (a mode switch is a reload;
        during that moment the root can already be dark while expert is still on screen — without these the
        panels keep the dark theme's light text on white and read as washed out) ---- */
@media (min-width: 901px) {
  /* the theme-proof pass pins the INK only — restating a flat white here would
     paint over the glass, since it comes later in the file at equal specificity */
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tools, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__checks { color: #16171B; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tools *, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec *, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-dock-left .poz-plan__checks * { border-color: rgba(20, 30, 42, 0.1); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool { color: #6B7480; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tool.is-on { color: var(--acc-ink); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__lbl, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__checks-head, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__spec-head { color: #8B929E; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip { background: #FFFFFF; color: #16171B; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__chip.is-on { background: color-mix(in srgb, var(--acc, #0066CC) 6%, #FFFFFF); }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__hint, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__check-tx, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__mini { color: #6B7480; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__item { background: rgba(255, 255, 255, 0.65); color: #16171B; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard-name, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__check-name, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__tot b, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard-qty { color: #16171B; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard-code, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__item code { color: #6B7480; }
  .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard-img, .poz-plan.poz-skin-izlog:not(.poz-plan--lift).poz-plan--studio .poz-plan__itemcard-glyph { background: #F2F4F6; }
}