/*
 * UI v2 — the new-quote flow (design "Mondigo képernyőterv 3": Main, 11, 11b,
 * 12, 13, 14, 14b, 14d, 15, 16). Served and injected only with QQ_UI_V2=1;
 * every selector is scoped under html.ui-v2 (tools/ui-v2-flag-contract_test).
 *
 * Money is never animated: no rule here transitions or animates an amount.
 * Motion reads the tokens of ui-v2.css, which are zero under reduced motion;
 * the dictation level meter is driven by JS and keeps updating either way.
 */

/* ---- the flow replaces the established new-quote screen ---- */
/* :where() keeps this at #view-new specificity, so the handoff rule below wins. */
html.ui-v2 body.v2-flow #view-new > :where(:not(#v2-flow):not(#paywall-box):not(#v2-layer):not(#v2-sheet-host):not(#v2-live)) { display: none !important; }
html.ui-v2 body.v2-flow.v2-handoff #view-new > #draft-editor { display: block !important; }
html.ui-v2 body.v2-flow.v2-handoff #view-new > #draft-editor.hidden { display: none !important; }
html.ui-v2 body.v2-flow #view-new { background: var(--mg-bg-page); color: var(--mg-text-primary); font-family: var(--font-mg-sans); }
/* Full-bleed like the design while the new-quote view is the visible one. */
html.ui-v2 body.v2-flow main:has(> #view-new:not(.hidden)) { padding: 0; }
html.ui-v2 body.v2-flow.v2-on-sheet { overflow: hidden; }
html.ui-v2 #v2-flow { display: none; }
html.ui-v2 body.v2-flow #v2-flow { display: block; }
html.ui-v2 body.v2-legacy #v2-flow { display: block; }

html.ui-v2 #v2-flow,
html.ui-v2 #v2-flow * { box-sizing: border-box; }
html.ui-v2 #v2-flow button,
html.ui-v2 #v2-flow input,
html.ui-v2 #v2-flow select,
html.ui-v2 #v2-flow textarea { font: inherit; }
html.ui-v2 #v2-flow svg { flex-shrink: 0; }
html.ui-v2 .v2-nw { white-space: nowrap; }
html.ui-v2 .v2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html.ui-v2 .v2-scr { max-width: 560px; margin: 0 auto; min-height: calc(100vh - 140px); display: flex; flex-direction: column; background: var(--mg-bg-page); color: var(--mg-text-primary); font-family: var(--font-mg-sans); padding-bottom: 12px; }
html.ui-v2 .v2-top { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
html.ui-v2 .v2-tt { font-size: 15px; font-weight: 600; }
html.ui-v2 .v2-ib { width: 48px; height: 48px; border: none; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; padding: 0; }
html.ui-v2 .v2-ib:focus-visible,
html.ui-v2 #v2-flow button:focus-visible,
html.ui-v2 #v2-flow a:focus-visible,
html.ui-v2 #v2-flow input:focus-visible,
html.ui-v2 #v2-flow select:focus-visible,
html.ui-v2 #v2-flow textarea:focus-visible { outline: 3px solid var(--mg-action); outline-offset: 2px; }
html.ui-v2 .v2-link { min-height: 48px; padding: 0 6px; border: none; background: transparent; color: var(--mg-action); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
html.ui-v2 .v2-link.v2-muted-link { color: var(--mg-text-secondary); }

html.ui-v2 .v2-card { background: var(--mg-bg-card); border: 1px solid var(--mg-border-card); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); }
html.ui-v2 .v2-cta { min-height: 56px; border: none; border-radius: var(--mg-radius-control); background: var(--mg-action); color: var(--mg-white); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer; box-shadow: var(--mg-shadow-cta); padding: 0 16px; }
html.ui-v2 .v2-cta[disabled],
html.ui-v2 .v2-cta[aria-disabled="true"] { background: var(--mg-ink-200); color: var(--mg-text-secondary); box-shadow: none; cursor: not-allowed; }
html.ui-v2 .v2-cta.v2-yellow { background: var(--mg-review); color: var(--mg-text-primary); box-shadow: none; }
html.ui-v2 .v2-cta-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--mg-text-primary); color: var(--mg-yellow-300); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
html.ui-v2 .v2-sec { min-height: var(--mg-touch-min); border: 1.5px solid var(--mg-border-control); border-radius: var(--mg-radius-control); background: var(--mg-bg-card); color: var(--mg-text-primary); font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; text-align: center; }
html.ui-v2 .v2-sec.v2-dashed { border-style: dashed; background: transparent; }
html.ui-v2 .v2-sec.v2-green { border-color: var(--mg-action); color: var(--mg-action); }
html.ui-v2 .v2-opt { flex-direction: column; gap: 2px; padding: 8px 6px; min-height: 60px; }
html.ui-v2 .v2-opt small { font-size: 14px; color: var(--mg-text-muted); font-weight: 400; }
html.ui-v2 .v2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

html.ui-v2 .v2-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; align-self: flex-start; }
html.ui-v2 .v2-chip.c-own { background: var(--mg-own-tint); color: var(--mg-action); }
html.ui-v2 .v2-chip.c-said { background: var(--mg-source-tint); color: var(--mg-source-text); }
html.ui-v2 .v2-chip.c-rev { background: var(--mg-review-tint); color: var(--mg-review-text); }
html.ui-v2 .v2-chip.c-ink { background: var(--mg-bg-sunken); color: var(--mg-text-on-tint); }
/* Set4 w1 P2-6: "Ár később" — the price comes later; sending waits for it. */
html.ui-v2 .v2-later-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px; margin-left: 4px; border-radius: 999px; font-size: 13px; font-weight: 700; align-self: flex-start; background: var(--mg-review-tint); color: var(--mg-review-text); border: 1px solid var(--mg-review); }
html.ui-v2 .v2-estimate-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; margin-left: 4px; border-radius: 999px; font-size: 13px; font-weight: 700; align-self: flex-start; color: var(--mg-text-secondary); border: 1px solid currentColor; }
html.ui-v2 .v2-later-tag svg { width: 14px; height: 14px; flex-shrink: 0; }
html.ui-v2 .v2-estimate-field { display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .v2-estimate-field[hidden] { display: none; }
html.ui-v2 .v2-estimate-note { margin: 0; color: var(--mg-text-secondary); font-size: 14px; line-height: 1.45; }
html.ui-v2 .v2-later-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--mg-review-tint); color: var(--mg-text-primary); font-size: 14px; line-height: 1.45; }
html.ui-v2 .v2-ok { width: 28px; height: 28px; border-radius: 50%; background: var(--mg-done); color: var(--mg-white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html.ui-v2 .v2-rv { width: 28px; height: 28px; border-radius: 50%; background: var(--mg-review); color: var(--mg-text-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 15px; }
html.ui-v2 .v2-lbl { font-size: 13px; font-weight: 600; color: var(--mg-text-secondary); }
html.ui-v2 .v2-inp { min-height: 48px; border: 1.5px solid var(--mg-border-control); border-radius: 12px; padding: 0 14px; font-size: 16px; color: var(--mg-text-primary); background: var(--mg-bg-card); width: 100%; }
/* D3: section titles are secondary text; clay only for what the professional said (--source). */
html.ui-v2 .v2-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-text-secondary); }
html.ui-v2 .v2-eyebrow.v2-eyebrow--source { color: var(--mg-source-text); }
html.ui-v2 .v2-eyebrow.v2-eyebrow--action { color: var(--mg-action); }
html.ui-v2 .v2-h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
html.ui-v2 .v2-h1:focus { outline: none; }
html.ui-v2 .v2-sub { margin: 0; font-size: 15px; line-height: 1.45; color: var(--mg-text-secondary); }
html.ui-v2 .v2-muted { color: var(--mg-text-muted); }
html.ui-v2 .v2-pad { padding: 0 20px; }
html.ui-v2 .v2-quote { font-size: 14px; line-height: 1.45; color: var(--mg-source-text); background: var(--mg-source-tint); border-radius: 10px; padding: 8px 10px; margin: 0; }

/* stepper: 1. Elmondod · 2. Átnézed · 3. Elküldöd */
html.ui-v2 .v2-stp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 20px 10px; margin: 0; list-style: none; }
html.ui-v2 .v2-st { display: flex; flex-direction: column; gap: 6px; }
html.ui-v2 .v2-st .v2-bar { height: 4px; border-radius: 2px; background: var(--mg-bg-segment); }
html.ui-v2 .v2-st.done .v2-bar { background: var(--mg-done); }
html.ui-v2 .v2-st.on .v2-bar { background: var(--mg-text-primary); }
html.ui-v2 .v2-st .v2-sl { font-size: 13px; font-weight: 600; color: var(--mg-text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
html.ui-v2 .v2-st.done .v2-sl { color: var(--mg-action); }
html.ui-v2 .v2-st.on .v2-sl { color: var(--mg-text-primary); font-weight: 800; }
html.ui-v2 .v2-stp.dk .v2-st .v2-bar { background: var(--mg-layer-border); }
html.ui-v2 .v2-stp.dk .v2-st.done .v2-bar { background: var(--mg-layer-accent); }
html.ui-v2 .v2-stp.dk .v2-st.on .v2-bar { background: var(--mg-layer-text); }
html.ui-v2 .v2-stp.dk .v2-st .v2-sl { color: var(--mg-layer-text-muted); }
html.ui-v2 .v2-stp.dk .v2-st.done .v2-sl { color: var(--mg-layer-accent); }
html.ui-v2 .v2-stp.dk .v2-st.on .v2-sl { color: var(--mg-layer-text); }

/* ---- Main ---- */
html.ui-v2 .v2-mic-card { margin: 18px 16px 0; background: var(--mg-source-tint); border: 1px solid var(--mg-source-border); border-radius: 22px; padding: 22px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
html.ui-v2 .v2-mic-row { display: flex; align-items: center; gap: 14px; }
html.ui-v2 .v2-waves { display: flex; align-items: center; gap: 4px; opacity: .55; }
html.ui-v2 .v2-wb { width: 4px; border-radius: 2px; background: var(--mg-source-mark); display: inline-block; }
html.ui-v2 .v2-mic-btn { width: 96px; height: 96px; border-radius: 50%; border: none; background: var(--mg-action); color: var(--mg-white); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--mg-shadow-mic); }
html.ui-v2 .v2-row-card { margin: 12px 16px 0; padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; color: var(--mg-text-primary); cursor: pointer; text-align: left; width: calc(100% - 32px); min-height: 64px; }
html.ui-v2 .v2-row-card > span { display: flex; flex-direction: column; gap: 3px; }
html.ui-v2 .v2-bottom { margin: auto 16px 14px; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-center-note { text-align: center; font-size: 14px; color: var(--mg-text-muted); }

/* ---- 12 typed note ---- */
html.ui-v2 .v2-note { min-height: 220px; width: 100%; border: 1.5px solid var(--mg-action); border-radius: 16px; padding: 14px 16px; font-size: 17px; line-height: 1.5; color: var(--mg-text-primary); background: var(--mg-bg-card); resize: vertical; box-shadow: 0 0 0 4px var(--mg-own-tint); }

/* ---- 11 / 11b dictation, 13 processing: full-screen layers ---- */
html.ui-v2 .v2-layer { position: fixed; inset: 0; z-index: var(--mg-z-layer); overflow-y: auto; display: flex; flex-direction: column; background: var(--mg-bg-page); color: var(--mg-text-primary); font-family: var(--font-mg-sans); }
html.ui-v2 .v2-layer.v2-dark { background: var(--mg-layer-bg); color: var(--mg-layer-text); }
/* U-1: into dictation the screen dims over ~280 ms and the content settles
   from below, instead of a 13 ms cut from cream to ink. Once per opening (the
   layer is drawn once); nothing under reduced motion. */
@keyframes v2-dark-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-dark-settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.ui-v2 .v2-layer.v2-dark { animation: v2-dark-in calc(var(--mg-motion-base) * 1.4) cubic-bezier(.2, .8, .2, 1) both; }
html.ui-v2 .v2-layer.v2-dark > .v2-layer-inner { animation: v2-dark-settle calc(var(--mg-motion-base) * 1.6) cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .v2-layer.v2-dark, html.ui-v2 .v2-layer.v2-dark > .v2-layer-inner { animation: none; }
}
/* U-1: the first-time explanation before the microphone opens (a light sheet). */
html.ui-v2 .v2-di-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
html.ui-v2 .v2-di-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
html.ui-v2 .v2-di-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--mg-bg-sunken); color: var(--mg-text-secondary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html.ui-v2 .v2-dict-intro .v2-sheet-foot { margin-top: 16px; }
html.ui-v2 .v2-dict-intro .v2-sec { min-height: 48px; }
html.ui-v2 .v2-layer-inner { max-width: 560px; width: 100%; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
html.ui-v2 .v2-dark .v2-eyebrow, html.ui-v2 .v2-dark .v2-eyebrow.v2-eyebrow--source { color: var(--mg-layer-source); }
html.ui-v2 .v2-rec { display: flex; align-items: center; gap: 6px; padding-right: 12px; font-size: 14px; font-weight: 700; color: var(--mg-layer-rec-text); font-variant-numeric: tabular-nums; }
html.ui-v2 .v2-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mg-layer-rec); }
html.ui-v2 .v2-heard { margin: 10px 16px 0; flex-grow: 1; min-height: 180px; background: var(--mg-layer-card); border: 1px solid var(--mg-layer-border); border-radius: 20px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
html.ui-v2 .v2-heard p { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
html.ui-v2 .v2-heard .v2-prov { color: var(--mg-layer-text-muted); }
html.ui-v2 .v2-heard-cap { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mg-layer-text-secondary); }
html.ui-v2 .v2-tip { margin: 12px 16px 0; padding: 10px 14px; border-radius: 14px; background: rgba(200, 106, 74, .18); display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.4; color: var(--mg-layer-source); font-weight: 600; }
html.ui-v2 .v2-silence { margin: 12px 16px 0; padding: 14px; border-radius: 16px; background: var(--mg-review-tint); color: var(--mg-text-primary); display: flex; gap: 12px; align-items: flex-start; }
html.ui-v2 .v2-silence strong { display: block; font-size: 17px; font-weight: 800; }
html.ui-v2 .v2-silence small { display: block; font-size: 14px; line-height: 1.4; color: var(--mg-text-on-tint); margin-top: 4px; }
/* Kept recordings: the runtime's own #mq-pending-captures cards, lent to Main and Írás. */
html.ui-v2 #v2-flow .v2-pending #mq-pending-captures:empty { display: none; }
html.ui-v2 #v2-flow .v2-pending .mq-pending { margin: 12px 16px 0; padding: 14px; border-radius: 16px; font-size: 15px; line-height: 1.4; }
html.ui-v2 #v2-flow .v2-pending .mq-pending strong { display: block; font-weight: 800; margin-bottom: 4px; }
html.ui-v2 #v2-flow .v2-pending .mq-pending .btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
html.ui-v2 #v2-flow .v2-pending .mq-pending .btn { min-height: var(--mg-touch-min); }
html.ui-v2 .v2-meter-box { margin: 14px 16px 0; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-meter-bars { display: flex; align-items: center; justify-content: center; gap: 5px; height: 56px; }
html.ui-v2 .v2-meter-bars span { width: 4px; border-radius: 2px; background: var(--mg-layer-meter); display: inline-block; }
html.ui-v2 .v2-meter-bars.v2-quiet span { background: var(--mg-ink-700); }
html.ui-v2 .v2-meter-row { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 14px; }
html.ui-v2 .v2-meter-state { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mg-layer-accent); white-space: nowrap; }
html.ui-v2 .v2-meter-state.v2-off { color: var(--mg-layer-warm); }
html.ui-v2 .v2-meter-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
html.ui-v2 .v2-meter { flex-grow: 1; height: 10px; border-radius: 5px; background: var(--mg-layer-border); overflow: hidden; display: flex; }
html.ui-v2 .v2-meter-fill { height: 100%; background: var(--mg-layer-accent); border-radius: 5px; }
html.ui-v2 .v2-meter.v2-quiet .v2-meter-fill { background: var(--mg-layer-text-muted); }
html.ui-v2 .v2-meter-val { color: var(--mg-layer-text-secondary); white-space: nowrap; }
html.ui-v2 .v2-meter-note { text-align: center; font-size: 14px; color: var(--mg-layer-text-secondary); }
html.ui-v2 .v2-dict-ctl { display: flex; align-items: flex-start; justify-content: center; gap: 30px; padding: 16px 20px calc(26px + env(safe-area-inset-bottom, 0px)); }
/* 11: the dictation screen is exactly one viewport tall. The controls are pinned
   at the bottom; "Ezt hallom" takes what is left and scrolls inside itself (the
   newest words stay in view, older ones scroll off at the top), so neither a
   long dictation nor the "Nem hallok semmit" card can push Kész off screen. */
html.ui-v2 .v2-layer.v2-dark { overflow: hidden; }
html.ui-v2 .v2-dark .v2-layer-inner { height: 100%; min-height: 0; }
html.ui-v2 .v2-dark .v2-layer-inner > * { flex-shrink: 0; }
html.ui-v2 .v2-dark .v2-layer-inner > .v2-heard { flex: 1 1 0; min-height: 96px; }
html.ui-v2 .v2-dark .v2-dict-ctl { margin-top: auto; }
html.ui-v2 .v2-heard-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
html.ui-v2 .v2-heard-cap { flex-shrink: 0; }
@media (max-height: 640px) { html.ui-v2 .v2-dark .v2-meter-bars { height: 32px; } html.ui-v2 .v2-dark .v2-tip { display: none; } }
html.ui-v2 .v2-dict-ctl > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; color: var(--mg-layer-text-secondary); }
html.ui-v2 .v2-round { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--mg-layer-border); background: var(--mg-layer-card); color: var(--mg-layer-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
html.ui-v2 .v2-done-btn { width: 84px; height: 84px; border-radius: 50%; border: none; background: var(--mg-action); color: var(--mg-layer-text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 3px var(--mg-layer-text), 0 10px 24px rgba(10, 107, 66, .35); }
html.ui-v2 .v2-done-btn span { width: 24px; height: 24px; border-radius: 6px; background: var(--mg-layer-text); }
html.ui-v2 .v2-dict-ctl .v2-done-label { font-size: 15px; font-weight: 700; color: var(--mg-layer-text); }
html.ui-v2 .v2-caret { color: var(--mg-source-mark); }

html.ui-v2 .v2-proc-art { display: flex; justify-content: center; gap: 10px; margin-top: 44px; height: 64px; align-items: flex-end; }
html.ui-v2 .v2-proc-art span { width: 12px; border-radius: 8px; background: var(--mg-clay-200); }
html.ui-v2 .v2-proc-art span + span { background: var(--mg-source-mark); }
html.ui-v2 .v2-steps { list-style: none; margin: 34px 32px 0; padding: 0; display: flex; flex-direction: column; }
html.ui-v2 .v2-steps li { display: flex; gap: 14px; min-height: 64px; }
html.ui-v2 .v2-steps li > span:first-child { display: flex; flex-direction: column; align-items: center; }
html.ui-v2 .v2-step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--mg-ink-200); background: var(--mg-bg-card); }
html.ui-v2 .v2-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--mg-source-border); border-top-color: var(--mg-source-mark); animation: v2spin 1s linear infinite; }
@keyframes v2spin { to { transform: rotate(360deg); } }
/* 11 / 13: the former inline type and colours of the dictation and processing layers. */
html.ui-v2 .v2-dict-state { font-size: 14px; color: var(--mg-layer-text-secondary); }
html.ui-v2 .v2-heard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mg-layer-text-muted); }
html.ui-v2 .v2-proc-head { text-align: center; margin-top: 22px; display: flex; flex-direction: column; gap: var(--mg-space-6); padding: 0 var(--mg-space-20); }
html.ui-v2 .v2-step-text { display: flex; flex-direction: column; gap: var(--mg-space-2); padding-top: 3px; }
html.ui-v2 .v2-step-title { font-size: 15px; font-weight: 600; color: var(--mg-text-muted); }
html.ui-v2 .v2-step-title.is-done { color: inherit; }
html.ui-v2 .v2-step-title.is-on { color: inherit; font-weight: 700; }
html.ui-v2 .v2-step-sub { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-proc-foot { text-align: center; padding: var(--mg-space-24) var(--mg-space-32) 34px; margin-top: auto; display: flex; flex-direction: column; gap: var(--mg-space-6); font-size: 14px; }
html.ui-v2 .v2-proc-note { color: var(--mg-text-secondary); }
html.ui-v2 .v2-proc-kept { color: var(--mg-text-muted); }
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .v2-spin { animation: none; border-top-color: var(--mg-source-border); border-right-color: var(--mg-source-mark); }
}

/* ---- 14 Tételek ---- */
html.ui-v2 .v2-transcript { margin: 14px 16px 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-transcript-row { display: flex; align-items: center; gap: 10px; }
/* V2-17: the source icon is a span too; it keeps its 48 px circle. */
html.ui-v2 .v2-transcript-row > span:not(.v2-src-icon) { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .v2-transcript p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mg-text-on-tint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.ui-v2 .v2-transcript[data-open="1"] p { display: block; }
html.ui-v2 .v2-src-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--mg-source-tint); color: var(--mg-source-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
html.ui-v2 .v2-basic { margin: 10px 16px 0; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-basic-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--mg-text-secondary); }
html.ui-v2 .v2-basic-line { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
html.ui-v2 .v2-fact-row { min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--mg-bg-sunken); display: flex; align-items: center; gap: 10px; width: 100%; border: none; color: var(--mg-text-primary); text-align: left; }
html.ui-v2 .v2-fact-row > span:nth-child(2) { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; }
html.ui-v2 .v2-fact-row b { font-size: 15px; }
html.ui-v2 .v2-fact-row small { font-size: 14px; color: var(--mg-text-on-tint); }
html.ui-v2 .v2-fact-row.v2-ask { background: var(--mg-review-tint); border: 1.5px solid var(--mg-review); cursor: pointer; }
html.ui-v2 .v2-fact-row.v2-ask small { color: var(--mg-review-text); }
html.ui-v2 .v2-list-head { margin: 16px 20px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.ui-v2 .v2-list-head > span:first-child { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
html.ui-v2 .v2-list-head > span:last-child { font-size: 14px; color: var(--mg-text-secondary); }
html.ui-v2 .v2-list-head b { color: var(--mg-review-text); }
html.ui-v2 .v2-list { margin: 8px 16px 0; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-line { padding: 12px 14px; min-height: 64px; display: flex; gap: 12px; align-items: center; color: var(--mg-text-primary); width: 100%; text-align: left; cursor: pointer; }
html.ui-v2 .v2-line-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.ui-v2 .v2-line-main > b { font-size: 16px; overflow-wrap: anywhere; }
html.ui-v2 .v2-line-main > small { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-amt { font-size: 17px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .v2-qcard { background: var(--mg-bg-card); border: 2px solid var(--mg-review); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--mg-shadow-question); }
html.ui-v2 .v2-qcard.v2-missed { background: var(--mg-review-tint-soft); border-style: dashed; box-shadow: none; }
html.ui-v2 .v2-qhead { display: flex; gap: 12px; align-items: flex-start; }
html.ui-v2 .v2-qhead > span:nth-child(2) { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.ui-v2 .v2-qhead b { font-size: 16px; overflow-wrap: anywhere; }
html.ui-v2 .v2-qtext { font-size: 15px; font-weight: 700; color: var(--mg-review-text); margin: 0; line-height: 1.4; }
html.ui-v2 .v2-qcard .v2-ib { margin: -10px -10px 0 0; color: var(--mg-text-secondary); }
html.ui-v2 .v2-row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
html.ui-v2 .v2-row-btns > .v2-sec { flex: 1 1 auto; }
html.ui-v2 .v2-explain { padding: 10px 12px; border-radius: 12px; background: var(--mg-bg-sunken); font-size: 14px; line-height: 1.45; color: var(--mg-text-on-tint); margin: 0; }
html.ui-v2 .v2-inline-edit { display: flex; gap: 8px; align-items: stretch; }
html.ui-v2 .v2-inline-edit .v2-inp { flex: 1 1 auto; }

/* the dark total bar: always the final number, never animated */
html.ui-v2 .v2-dbar { position: sticky; bottom: 0; z-index: var(--mg-z-bar); margin-top: auto; background: var(--mg-layer-bg); color: var(--mg-layer-text); border-radius: 22px 22px 0 0; box-shadow: var(--mg-shadow-bar); padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
html.ui-v2 .v2-dbar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html.ui-v2 .v2-dbar-row > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--mg-layer-text-secondary); }
html.ui-v2 .v2-left { font-weight: 700; color: var(--mg-layer-warm); }
html.ui-v2 .v2-left.v2-clear { color: var(--mg-layer-accent); }
html.ui-v2 .v2-total { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-v2 .v2-var { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mg-layer-text-secondary); }
html.ui-v2 .v2-dbar-note { text-align: center; font-size: 14px; color: var(--mg-layer-text-secondary); margin: 0; }
html.ui-v2 .v2-sum-line { display: flex; justify-content: space-between; font-size: 15px; color: var(--mg-layer-text-secondary); gap: 10px; }
html.ui-v2 .v2-sum-line > span:last-child { font-weight: 600; color: var(--mg-layer-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .v2-sum-pay { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 10px; margin-top: 2px; gap: 10px; }
html.ui-v2 .v2-sum-pay > span:first-child { font-size: 17px; font-weight: 800; }
html.ui-v2 .v2-sum-pay > span:last-child { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 14b one by one ---- */
html.ui-v2 .v2-qprog { display: flex; align-items: center; gap: 10px; }
html.ui-v2 .v2-qprog > b { font-size: 15px; font-weight: 800; color: var(--mg-review-text); }
html.ui-v2 .v2-dots { flex-grow: 1; display: grid; gap: 4px; }
html.ui-v2 .v2-dots span { height: 6px; border-radius: 3px; background: var(--mg-bg-segment); }
html.ui-v2 .v2-dots span.done { background: var(--mg-done); }
html.ui-v2 .v2-dots span.on { background: var(--mg-review); }
html.ui-v2 .v2-bigopt { min-height: 72px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; text-align: left; font-size: 17px; font-weight: 800; width: 100%; }
html.ui-v2 .v2-bigopt small { font-size: 14px; font-weight: 400; color: var(--mg-text-muted); }
html.ui-v2 .v2-summary-row { padding: 10px 14px; min-height: 48px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--mg-divider); }
html.ui-v2 .v2-summary-row > span:nth-child(2) { flex-grow: 1; font-size: 15px; font-weight: 600; }
html.ui-v2 .v2-summary-row > span:last-child { font-size: 15px; font-weight: 700; text-align: right; }

/* ---- 15 item editor: bottom sheet ---- */
html.ui-v2 .v2-backdrop { position: fixed; inset: 0; z-index: var(--mg-z-backdrop); background: var(--mg-backdrop); display: flex; align-items: flex-end; justify-content: center; }
html.ui-v2 .v2-sheet { width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--mg-bg-card); color: var(--mg-text-primary); border-radius: 24px 24px 0 0; box-shadow: var(--mg-shadow-sheet); display: flex; flex-direction: column; font-family: var(--font-mg-sans); }
html.ui-v2 .v2-grip { display: flex; justify-content: center; padding-top: 8px; }
html.ui-v2 .v2-grip span { width: 40px; height: 5px; border-radius: 3px; background: var(--mg-ink-200); }
html.ui-v2 .v2-sheet-body { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 14px; }
html.ui-v2 .v2-field { display: flex; flex-direction: column; gap: 5px; }
html.ui-v2 .v2-choice { min-height: 64px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; border: 1.5px solid var(--mg-border-control); background: var(--mg-bg-card); color: var(--mg-text-primary); }
html.ui-v2 .v2-choice small { font-size: 14px; font-weight: 400; color: var(--mg-text-muted); }
html.ui-v2 .v2-choice[aria-checked="true"] { border: 2px solid var(--mg-text-primary); background: var(--mg-text-primary); color: var(--mg-white); }
html.ui-v2 .v2-choice[aria-checked="true"] small { color: var(--mg-ink-200); }
html.ui-v2 .v2-warn { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--mg-review-text); margin: 0; }
html.ui-v2 .v2-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: var(--mg-bg-subtle); border-radius: 14px; padding: 12px 14px; }
html.ui-v2 .v2-preview span { display: block; }
html.ui-v2 .v2-preview small { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-preview b { font-size: 18px; font-weight: 800; }
html.ui-v2 .v2-src-box { border: 1px solid var(--mg-source-border); background: var(--mg-source-tint); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
/* 15: "Mentés saját árként" (suggested mode only) and the unit selector's free text. */
html.ui-v2 .v2-own-price { display: flex; flex-direction: column; gap: 6px; }
html.ui-v2 .v2-own-price small { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-unit-other { margin-top: 8px; }
html.ui-v2 .v2-unit-other[hidden] { display: none; }
/* 19: what went into Áraim with this quote, and its undo. */
html.ui-v2 .v2-sent-learned { margin: 12px 16px 0; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
html.ui-v2 .v2-sent-learned .v2-link { flex-shrink: 0; }
html.ui-v2 .v2-sheet-foot { padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mg-bg-sunken); display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
html.ui-v2 .v2-sheet-foot .v2-warn { text-align: center; }
html.ui-v2 .v2-danger { min-height: 52px; padding: 0 12px; border: none; background: transparent; color: var(--mg-danger); font-size: 16px; font-weight: 700; cursor: pointer; }

/* ---- 16 final review ---- */
html.ui-v2 .v2-final-row { padding: 12px 14px; display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--mg-divider); min-height: 60px; }
html.ui-v2 .v2-final-row:first-child { border-top: none; }
html.ui-v2 .v2-final-row > span:nth-child(2) { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .v2-final-row b { font-size: 15px; overflow-wrap: anywhere; }
html.ui-v2 .v2-final-row small { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 button.v2-final-row { width: 100%; background: transparent; border: none; border-top: 1px solid var(--mg-divider); text-align: left; color: var(--mg-text-primary); cursor: pointer; }
html.ui-v2 .v2-dur { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--mg-divider); background: var(--mg-review-tint-soft); }
html.ui-v2 .v2-dur small { font-size: 14px; line-height: 1.4; color: var(--mg-review-text); }

/* ---- handoff (17–19 use the established customer & send section) ---- */
html.ui-v2 .v2-handoff-bar { max-width: 560px; margin: 0 auto; padding: 4px 0 8px; }
html.ui-v2 .v2-legacy-chip { display: flex; justify-content: flex-end; padding: 6px 16px 0; }

/* the menu behind "Továbbiak" — the same "…" on every quote page (U-2): the
   page's own actions, then the app's areas as in the tab bar */
html.ui-v2 .v2-menu-wrap { position: relative; display: inline-flex; align-items: center; }
html.ui-v2 .v2-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 48; min-width: 240px; max-width: calc(100vw - 24px); padding: 6px; display: flex; flex-direction: column; text-align: left; color: var(--mg-text-primary); }
html.ui-v2 .v2-menu [role="menu"] { display: flex; flex-direction: column; }
html.ui-v2 .v2-menu button { min-height: 48px; border: none; background: transparent; text-align: left; padding: 0 12px; border-radius: 10px; font-size: 15px; color: var(--mg-text-primary); cursor: pointer; font-family: var(--font-mg-sans); }
html.ui-v2 .v2-menu button:focus-visible { outline: 3px solid var(--mg-action); outline-offset: -3px; }
@media (hover: hover) { html.ui-v2 .v2-menu button:hover { background: var(--mg-bg-subtle); } }
html.ui-v2 .v2-menu .v2-menu-nav { display: flex; align-items: center; gap: 12px; font-weight: 600; }
html.ui-v2 .v2-menu .v2-menu-nav svg { color: var(--mg-text-secondary); }
html.ui-v2 .v2-menu-sep { height: 1px; margin: 4px 8px; background: var(--mg-bg-sunken); }
html.ui-v2 .v2-menu-note { margin: 2px 12px 8px; font-size: 14px; line-height: 1.4; color: var(--mg-text-muted); }
html.ui-v2 .v2-relative { position: relative; }

@media (min-width: 900px) {
  html.ui-v2 .v2-scr { min-height: 0; }
}

/* The hidden attribute always wins over a component's own display. */
html.ui-v2 #v2-flow [hidden], html.ui-v2 #v2-layer [hidden], html.ui-v2 #v2-sheet-host [hidden] { display: none !important; }
html.ui-v2 .v2-preview > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .v2-preview b { white-space: nowrap; }

/* ==== Phase 2: 17 client & terms, 17b dictated e-mail, 18 preview, 46 confirm, 19 sent, 14c usual job ==== */

/* 17: the rest of the terms on this screen (tax editor, "További feltételek"). */
html.ui-v2 .v2-tax-now { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
html.ui-v2 .v2-tax-now small { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-check-row { align-items: flex-start; padding: 12px 0; line-height: 1.35; }
html.ui-v2 .v2-check-row input { margin-top: 1px; }
html.ui-v2 .v2-reverse-box { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--mg-review-tint-soft); border: 1px solid var(--mg-review); font-size: 14px; line-height: 1.45; }
html.ui-v2 .v2-more-chev { display: inline-flex; transition: transform .15s ease; }
html.ui-v2 .v2-more-toggle[aria-expanded="true"] .v2-more-chev { transform: rotate(90deg); }
html.ui-v2 .v2-more-terms { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 16px; }
html.ui-v2 .v2-more-terms-hint { margin: 0; }
html.ui-v2 .v2-textarea { min-height: 96px; padding: 12px 14px; line-height: 1.4; resize: vertical; font-family: inherit; }
@media (prefers-reduced-motion: reduce) { html.ui-v2 .v2-more-chev { transition: none; } }

/* ---- 17 / 17b ---- */
html.ui-v2 .v2-eyebrow-row { margin: 18px 20px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ui-v2 .v2-form { margin: 0 16px; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
html.ui-v2 .v2-form > .v2-field:first-child { padding-top: 10px; }
html.ui-v2 .v2-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
html.ui-v2 .v2-field-head .v2-chip { align-self: center; }
html.ui-v2 .v2-hint { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-inp[aria-invalid="true"] { border-color: var(--mg-danger); }
html.ui-v2 .v2-field-ask .v2-inp { border-color: var(--mg-review); background: var(--mg-review-tint-soft); }
html.ui-v2 .v2-recall { margin: 6px 16px 0; padding: 12px 14px; border-radius: 16px; background: var(--mg-own-tint); border: 1px solid var(--mg-green-200); display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-recall-head { display: flex; gap: 12px; align-items: center; }
html.ui-v2 .v2-recall-head > span:last-child { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .v2-recall-head b { font-size: 15px; }
html.ui-v2 .v2-recall-head small { font-size: 14px; color: var(--mg-text-on-tint); line-height: 1.4; }
html.ui-v2 .v2-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--mg-done-tint); color: var(--mg-own-text); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
html.ui-v2 .v2-recall .v2-sec { font-size: 14px; }
html.ui-v2 .v2-sec.v2-site { justify-content: flex-start; gap: 8px; text-align: left; padding: 6px 12px; }
html.ui-v2 .v2-sec.v2-site b { font-weight: 600; overflow-wrap: anywhere; }
html.ui-v2 .v2-em { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--mg-review-tint-soft); border: 1.5px solid var(--mg-review); }
html.ui-v2 .v2-em-big { font-size: 22px; font-weight: 800; letter-spacing: .01em; line-height: 1.3; overflow-wrap: anywhere; word-break: break-all; }
html.ui-v2 .v2-em-big.v2-em-boxed { padding: 14px 16px; border-radius: 16px; background: var(--mg-review-tint-soft); border: 1.5px solid var(--mg-review); }
html.ui-v2 mark.v2-unsure { background: var(--mg-review-tint); color: var(--mg-review-text); border-bottom: 3px solid var(--mg-review); border-radius: 4px; padding: 0 3px; }
html.ui-v2 .v2-em-spell { font-size: 14px; color: var(--mg-text-secondary); letter-spacing: .04em; overflow-wrap: anywhere; }
html.ui-v2 .v2-em-opts { display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-sec.v2-em-opt { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; word-break: break-all; padding: 6px 12px; }
html.ui-v2 .v2-term-row { width: 100%; min-height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: none; border-top: 1px solid var(--mg-divider); background: transparent; color: var(--mg-text-primary); font-size: 15px; text-align: left; cursor: pointer; }
html.ui-v2 div.v2-term-row { cursor: default; padding: 10px 14px; }
html.ui-v2 .v2-term-val { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
html.ui-v2 .v2-term-add { font-weight: 600; color: var(--mg-action); }
html.ui-v2 .v2-term-edit { width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* ---- 18: the established preview overlay, in the v2 look ---- */
html.ui-v2 body.v2-flow.v2-pv #preview-overlay { background: var(--mg-bg-page) !important; color: var(--mg-text-primary); font-family: var(--font-mg-sans); overflow-y: auto; display: block !important; }
html.ui-v2 body.v2-flow.v2-pv #preview-overlay.hidden { display: none !important; }
html.ui-v2 body.v2-flow.v2-pv #preview-head,
html.ui-v2 body.v2-flow.v2-pv #preview-warnings,
html.ui-v2 body.v2-flow.v2-pv #preview-actions { display: none !important; }
html.ui-v2 body.v2-flow.v2-pv #preview-frame { display: block; width: calc(100% - 32px); max-width: 528px; height: 62vh; min-height: 360px; margin: 4px auto 0; border: 1px solid var(--mg-border-card) !important; border-radius: 12px; background: var(--mg-bg-card); box-shadow: var(--mg-shadow-preview); }
html.ui-v2 #v2-pv-top, html.ui-v2 #v2-pv-panel, html.ui-v2 #v2-pv-sheet, html.ui-v2 #v2-sent-host { font-family: var(--font-mg-sans); color: var(--mg-text-primary); }
html.ui-v2 #v2-pv-top *, html.ui-v2 #v2-pv-panel *, html.ui-v2 #v2-pv-sheet *, html.ui-v2 #v2-sent-host * { box-sizing: border-box; }
html.ui-v2 #v2-pv-top button, html.ui-v2 #v2-pv-panel button, html.ui-v2 #v2-pv-panel input, html.ui-v2 #v2-pv-sheet button, html.ui-v2 #v2-sent-host button { font: inherit; }
html.ui-v2 #v2-pv-top button:focus-visible, html.ui-v2 #v2-pv-panel button:focus-visible, html.ui-v2 #v2-pv-panel input:focus-visible, html.ui-v2 #v2-pv-sheet button:focus-visible, html.ui-v2 #v2-pv-sheet [tabindex]:focus-visible, html.ui-v2 #v2-sent-host button:focus-visible { outline: 3px solid var(--mg-action); outline-offset: 2px; }
html.ui-v2 .v2-pv-inner { max-width: 560px; margin: 0 auto; }
html.ui-v2 #v2-pv-top { position: sticky; top: 0; z-index: 2; background: var(--mg-bg-page); }
html.ui-v2 #v2-pv-panel .v2-pv-inner { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
html.ui-v2 .v2-pv-card { padding: 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; }
html.ui-v2 .v2-pv-card > b { font-size: 15px; font-weight: 700; }
html.ui-v2 .v2-pv-card > small { font-size: 14px; line-height: 1.4; color: var(--mg-text-on-tint); }
html.ui-v2 .v2-pv-ask { background: var(--mg-review-tint-soft); border: 1.5px solid var(--mg-review); }
html.ui-v2 .v2-check { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; cursor: pointer; }
html.ui-v2 .v2-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--mg-text-primary); flex-shrink: 0; }
html.ui-v2 .v2-pv-warn { background: var(--mg-bg-card); border: 1px solid var(--mg-border-card); }
html.ui-v2 .v2-pv-wline { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--mg-text-on-tint); }
html.ui-v2 .v2-pv-wline > span { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
html.ui-v2 .v2-pv-wline .v2-sec { flex-shrink: 0; font-size: 14px; }
html.ui-v2 .v2-pv-channel { display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; background: var(--mg-bg-segment); padding: 4px; border-radius: 14px; }
html.ui-v2 .v2-seg button { min-height: 48px; border: none; border-radius: 11px; background: transparent; color: var(--mg-text-on-tint); font-size: 14px; font-weight: 600; cursor: pointer; }
html.ui-v2 .v2-seg button[aria-checked="true"] { background: var(--mg-text-primary); color: var(--mg-white); font-weight: 700; }
html.ui-v2 .v2-seg button[disabled] { color: var(--mg-text-muted); cursor: not-allowed; text-decoration: line-through; }
html.ui-v2 .v2-pv-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--mg-review-tint); color: var(--mg-text-primary); font-size: 14px; line-height: 1.45; }
html.ui-v2 .v2-pv-cta { display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-pv-cta .v2-cta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 #v2-pv-sheet .v2-backdrop, html.ui-v2 #v2-sent-host .v2-layer { z-index: var(--mg-z-sheet); }
html.ui-v2 .v2-sheet-h { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
html.ui-v2 .v2-sheet-h:focus { outline: none; }
/* 15: the sheet's top row (top-bar title, button-sm 15/600) and the item name (title-2 20/800). */
html.ui-v2 .v2-sheet-top { display: flex; align-items: center; justify-content: space-between; padding: var(--mg-space-4) var(--mg-space-6) 0 var(--mg-space-20); }
html.ui-v2 .v2-sheet-h { line-height: 1.25; }
html.ui-v2 .v2-sheet-h--item { overflow-wrap: anywhere; }
html.ui-v2 .v2-src-text { font-size: 15px; line-height: 1.45; color: var(--mg-text-on-tint); }

/* ---- 19 sent ---- */
html.ui-v2 .v2-sent-head { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 24px 0; text-align: center; }
html.ui-v2 .v2-sent-ok { width: 76px; height: 76px; border-radius: 50%; background: var(--mg-done-tint); color: var(--mg-action); display: flex; align-items: center; justify-content: center; }
html.ui-v2 .v2-sent-head .v2-h1:focus { outline: none; }
html.ui-v2 .v2-tl-card { margin: 24px 16px 0; padding: 16px; }
html.ui-v2 .v2-tl { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
html.ui-v2 .v2-tl li { display: flex; gap: 12px; min-height: 58px; }
html.ui-v2 .v2-tl li:last-child { min-height: 0; }
html.ui-v2 .v2-tl-mark { display: flex; flex-direction: column; align-items: center; }
html.ui-v2 .v2-tl-line { width: 2px; flex-grow: 1; background: var(--mg-sand-200); }
html.ui-v2 .v2-tl-on { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--mg-green-200); border-top-color: var(--mg-done); }
html.ui-v2 .v2-tl-off { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--mg-ink-200); }
html.ui-v2 .v2-tl-text { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
html.ui-v2 .v2-tl-text b { font-size: 15px; font-weight: 700; }
html.ui-v2 .v2-tl-text b.v2-tl-later { font-weight: 400; color: var(--mg-text-secondary); }
html.ui-v2 .v2-tl-text small { font-size: 14px; color: var(--mg-text-muted); }

/* ---- 14c usual job picker ---- */
html.ui-v2 .v2-pkg { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-pkg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html.ui-v2 .v2-pkg-head b { font-size: 16px; overflow-wrap: anywhere; }
html.ui-v2 .v2-pkg-head span { font-size: 15px; font-weight: 800; }
html.ui-v2 .v2-pkg > small { font-size: 14px; line-height: 1.4; color: var(--mg-text-on-tint); }
html.ui-v2 .v2-pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-pkg-foot .v2-sec { min-width: 132px; }
html.ui-v2 #v2-flow .v2-list > .v2-sec.v2-dashed { width: 100%; }

/* ==== w5 layout (V2-20, V2-22, V2-32, V2-38): phone bar, toasts, desk ==== */

/* Artboards 12–19 start with the flow's own top bar: no app header on a phone
   while a flow screen (not Main, not the old editor) is the visible view. */
@media (max-width: 899px) {
  html.ui-v2 body.v2-flow:not(.v2-main):not(.v2-handoff):has(#view-new:not(.hidden) #v2-flow > .v2-scr) header.top { display: none; }
  html.ui-v2 body.v2-flow:not(.v2-main):not(.v2-handoff):has(#view-new:not(.hidden) #v2-flow > .v2-scr) #v2-flow > .v2-scr { min-height: 100vh; min-height: 100dvh; }
}

/* V2-20: on a phone the sum bar stays under a quarter of the screen —
   one label line, "Változhat" on one line, tighter padding. The "zöld lesz"
   hint belongs to 14b (where the answers are given), not under the 14 CTA. */
@media (max-width: 1023px) {
  html.ui-v2 .v2-dbar { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 6px; border-radius: 18px 18px 0 0; }
  html.ui-v2 .v2-dbar-row { align-items: center; }
  html.ui-v2 .v2-dbar-row > span:first-child { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; font-size: 14px; }
  html.ui-v2 .v2-dbar .v2-total { font-size: 24px; }
  html.ui-v2 .v2-dbar .v2-var { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-v2 .v2-dbar .v2-var[aria-expanded="true"] { white-space: normal; }
  html.ui-v2 .v2-scr[data-screen="items"] .v2-dbar .v2-cta + .v2-dbar-note { display: none; }
  /* 16 (net, VAT, payable, CTA, note): the markup's inline gap is the roomy desk one. */
  html.ui-v2 .v2-scr[data-screen="final"] > .v2-dbar { gap: 4px !important; }
  html.ui-v2 .v2-dbar .v2-sum-line { font-size: 14px; line-height: 18px; }
  html.ui-v2 .v2-dbar .v2-sum-pay { padding-top: 4px; margin-top: 0; }
  /* set5 P2-3: the open total reads "≥ 29 718 Ft", so the label wraps on a 360 px phone; set it at 14 px so it stays on one line (the 16 bar stays within 25% of the height). */
  html.ui-v2 .v2-scr[data-screen="final"] > .v2-dbar .v2-sum-pay > span:first-child { font-size: 14px; line-height: 16px; }
  html.ui-v2 .v2-scr[data-screen="final"] > .v2-dbar .v2-sum-pay > span:last-child { white-space: nowrap; flex-shrink: 0; }
  html.ui-v2 .v2-dbar .v2-sum-pay > span:last-child { font-size: 24px; line-height: 30px; }
  /* V2-11: an open payable ("≥ 29 718 Ft") is not set in the final-total size here either, so the label fits one line on a 360 px phone. */
  html.ui-v2 .v2-dbar .v2-sum-pay.v2-sum-open > span:last-child { font-size: 20px; line-height: 24px; }
  html.ui-v2 .v2-dbar .v2-dbar-note { font-size: 14px; line-height: 1.3; }
  html.ui-v2 .v2-scr[data-screen="final"] > .v2-dbar { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
/* A tappable "Változhat" (button form) keeps the look of the line. */
html.ui-v2 button.v2-var { display: block; width: 100%; min-height: 48px; padding: 12px 0; margin: -12px 0; /* 48px target, 24px of layout */ border: 0; background: transparent; font: inherit; font-size: 14px; line-height: 24px; color: var(--mg-layer-text-secondary); text-align: left; cursor: pointer; }
/* Between phone and desk the bar lines up with the cards above it. */
@media (min-width: 600px) and (max-width: 1023px) {
  html.ui-v2 #v2-flow .v2-scr > .v2-dbar { margin-left: 16px; margin-right: 16px; }
}

/* V2-22 / V2-08(c): a monolith toast never lands on the v2 CTA or the inputs.
   With the dark bar (14, 14b, 16) it sits just above the bar; on 17, 18 and 19
   (a form, the send panel, the sent screen) it drops in at the top. */
/* The compact bar is at most ~150 px on 14/14b and ~205 px on 16 (measured,
   tests/e2e/ui-v2-layout.spec.ts); the toast keeps clear of the tallest form. */
@media (max-width: 1023px) {
  html.ui-v2 body.v2-flow:not(.v2-pv):has(#view-new:not(.hidden) #v2-flow > .v2-scr > .v2-dbar) { --v2-dbar-h: 166px; }
  html.ui-v2 body.v2-flow:not(.v2-pv):has(#view-new:not(.hidden) #v2-flow > .v2-scr[data-screen="final"] > .v2-dbar) { --v2-dbar-h: 216px; }
  html.ui-v2 body.v2-flow:not(.v2-pv):has(#view-new:not(.hidden) #v2-flow > .v2-scr > .v2-dbar) #msg { bottom: calc(var(--v2-dbar-h) + 12px + env(safe-area-inset-bottom, 0px)); }
  html.ui-v2 body.v2-flow:not(.v2-pv):has(#view-new:not(.hidden) #v2-flow > .v2-scr > .v2-dbar) .mq-undo-toast { bottom: calc(var(--v2-dbar-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
}
html.ui-v2 body.v2-flow:has(#view-new:not(.hidden) #v2-flow > .v2-scr[data-screen="client"]) #msg,
html.ui-v2 body.v2-flow.v2-pv #msg,
html.ui-v2 body:has(#v2-sent-host .v2-layer) #msg { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; }
html.ui-v2 body.v2-flow:has(#view-new:not(.hidden) #v2-flow > .v2-scr[data-screen="client"]) .mq-undo-toast,
html.ui-v2 body.v2-flow.v2-pv .mq-undo-toast,
html.ui-v2 body:has(#v2-sent-host .v2-layer) .mq-undo-toast { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto !important; }

/* V2-38: at a desk the flow uses the width. 14, 14b and 16: the content left,
   the sum bar a sticky side panel as wide as its column. 17: Ügyfél left,
   Munka and Feltételek right. */
@media (min-width: 1024px) {
  html.ui-v2 #v2-flow > .v2-scr:has(> .v2-dbar) { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 8px; align-items: start; align-content: start; padding: 0 16px 32px; }
  html.ui-v2 #v2-flow > .v2-scr:has(> .v2-dbar) > :not(.v2-menu) { grid-column: 1; min-width: 0; }
  html.ui-v2 #v2-flow > .v2-scr:has(> .v2-dbar) > .v2-top, html.ui-v2 #v2-flow > .v2-scr:has(> .v2-dbar) > .v2-stp { grid-column: 1 / -1; }
  /* The bar spans the rows of the left column; spread over many rows, its
     height leaves no visible gap between the left-hand cards. */
  html.ui-v2 #v2-flow > .v2-scr:has(> .v2-dbar) > .v2-dbar { grid-column: 2; grid-row: 3 / span 60; position: sticky; top: 72px; bottom: auto; margin: 14px 16px 16px 0; border-radius: 22px; padding: 18px 18px 20px; box-shadow: 0 8px 24px rgba(16, 32, 56, .18); }

  html.ui-v2 #v2-flow > .v2-scr[data-screen="client"] { max-width: 1160px; display: block; columns: 2; column-gap: 8px; padding: 0 16px 32px; }
  html.ui-v2 #v2-flow > .v2-scr[data-screen="client"] > .v2-top, html.ui-v2 #v2-flow > .v2-scr[data-screen="client"] > .v2-stp { column-span: all; }
  html.ui-v2 #v2-flow > .v2-scr[data-screen="client"] > * { break-inside: avoid; }
  /* Padding, not margin: a margin is dropped at the top of the second column. */
  html.ui-v2 #v2-flow > .v2-scr[data-screen="client"] > .v2-eyebrow-row { margin-top: 0; padding-top: 18px; }
  html.ui-v2 #v2-flow > .v2-scr[data-screen="client"] > .v2-eyebrow-row ~ .v2-eyebrow-row:not(.v2-eyebrow-row ~ .v2-eyebrow-row ~ .v2-eyebrow-row) { break-before: column; }
  html.ui-v2 #v2-flow > .v2-scr[data-screen="client"] > .v2-bottom { margin-top: 18px; }
}

/* V2-32: at a desk the preview is two columns — the document left, the send
   panel right, its CTA always in view; only the document scrolls. */
@media (min-width: 1024px) {
  html.ui-v2 body.v2-flow.v2-pv #preview-overlay:not(.hidden) { display: grid !important; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; overflow: hidden; padding: 0 24px 24px; }
  html.ui-v2 body.v2-flow.v2-pv #v2-pv-top { grid-column: 1 / -1; grid-row: 1; }
  html.ui-v2 body.v2-flow.v2-pv #v2-pv-top .v2-pv-inner { max-width: none; }
  html.ui-v2 body.v2-flow.v2-pv #preview-frame { grid-column: 1; grid-row: 2; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; }
  html.ui-v2 body.v2-flow.v2-pv #v2-pv-panel { grid-column: 2; grid-row: 2; min-height: 0; max-height: 100%; overflow-y: auto; }
  html.ui-v2 body.v2-flow.v2-pv #v2-pv-panel .v2-pv-inner { max-width: none; padding: 0 0 4px; }
  html.ui-v2 body.v2-flow.v2-pv #v2-pv-panel .v2-pv-cta { position: sticky; bottom: 0; background: var(--mg-bg-page); padding-top: 8px; }
  html.ui-v2 body.v2-flow.v2-pv #v2-pv-sheet { grid-column: 1 / -1; }
}

/* D17: hover only with a mouse; pressed = a slight scale, never on amounts. */
@media (hover: hover) {
  html.ui-v2 .v2-card[role="button"]:hover, html.ui-v2 .v2-opt:hover, html.ui-v2 .v2-bigopt:hover { background: var(--mg-bg-subtle); }
  html.ui-v2 .v2-choice:hover:not([aria-checked="true"]) { background: var(--mg-bg-subtle); border-color: var(--mg-ink-700); }
}
html.ui-v2 .v2-opt:active, html.ui-v2 .v2-bigopt:active, html.ui-v2 .v2-choice:active, html.ui-v2 .v2-seg button:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { html.ui-v2 .v2-opt:active, html.ui-v2 .v2-bigopt:active, html.ui-v2 .v2-choice:active, html.ui-v2 .v2-seg button:active { transform: none; } }

/* w5 items */
/* 14 / 14b / 16 markup of the w5 fixes (V2-11, V2-13, V2-18, V2-19, V2-25,
   V2-41): every colour and size from the mg- tokens, no inline styles. */
html.ui-v2 .v2-opt-label { font-weight: 700; }
html.ui-v2 .v2-self-start { align-self: flex-start; }
html.ui-v2 .v2-pad-t4 { padding-top: var(--mg-space-4); }
html.ui-v2 .v2-mb16 { margin-bottom: var(--mg-space-16); }
html.ui-v2 .v2-px12 { padding: 0 var(--mg-space-12); }
html.ui-v2 .v2-amt.v2-amt-rev { color: var(--mg-review-text); }
html.ui-v2 .v2-amt.v2-amt-sm { font-size: 16px; }
html.ui-v2 .v2-ok.v2-ok-sm { width: 24px; height: 24px; }
html.ui-v2 .v2-rv.v2-rv-sm { width: 24px; height: 24px; font-size: 13px; }
html.ui-v2 .v2-qhead-sub { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-qhead b.v2-qhead-title { font-size: 15px; line-height: 1.4; }
html.ui-v2 .v2-chip-row { display: flex; flex-wrap: wrap; gap: var(--mg-space-6); }
html.ui-v2 .v2-fact-ic, html.ui-v2 .v2-row-ic { color: var(--mg-text-secondary); display: inline-flex; }
/* 14 transcript: "Teljes szöveg" keeps the 48 px .v2-link target (D8); "+ Kiegészítem" is a neutral action (D2/D3). */
html.ui-v2 .v2-transcript-title { font-size: 15px; }
html.ui-v2 .v2-link.v2-transcript-toggle { padding: 0; align-self: flex-start; }
html.ui-v2 .v2-sec.v2-add-more { font-size: 14px; flex-shrink: 0; }
/* 14 time question, answered inline (V2-13). */
html.ui-v2 .v2-sched-q { padding: var(--mg-space-12); border-radius: var(--mg-radius-input); background: var(--mg-review-tint-soft); border: 1.5px solid var(--mg-review); display: flex; flex-direction: column; gap: var(--mg-space-10); }
html.ui-v2 .v2-sched-q-head { display: flex; gap: var(--mg-space-10); align-items: flex-start; }
html.ui-v2 .v2-sched-q-head > span:last-child { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--mg-space-4); }
html.ui-v2 .v2-sched-q-head b { font-size: 15px; color: var(--mg-text-primary); }
html.ui-v2 .v2-sched-said { font-size: 14px; line-height: 1.45; color: var(--mg-source-text); overflow-wrap: anywhere; }
html.ui-v2 .v2-sched-when { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--mg-text-primary); overflow-wrap: anywhere; }
html.ui-v2 .v2-sched-note { font-size: 14px; color: var(--mg-review-text); }
/* Sum bar: a range or a visibly partial figure is not set in the final-total size (V2-11). */
html.ui-v2 .v2-total.v2-total-open { font-size: 20px; white-space: normal; text-align: right; }
html.ui-v2 .v2-sum-pay.v2-sum-open > span:last-child { font-size: 20px; color: var(--mg-review); }
html.ui-v2 .v2-total .v2-nb { white-space: nowrap; }
html.ui-v2 .v2-dbar.v2-dbar-tight { gap: var(--mg-space-8); }
/* 360-wide phones: "≈ 89 990 Ft + 4 kérdés" wraps to two lines, so it is set tighter
   (smaller, 1.15 line height) to keep the bar a quarter of the screen at most. */
@media (max-width: 380px) {
  html.ui-v2 .v2-total.v2-total-open { font-size: 18px; line-height: 1.15; }
  html.ui-v2 .v2-sum-pay.v2-sum-open > span:last-child,
  html.ui-v2 .v2-dbar .v2-sum-pay.v2-sum-open > span:last-child { font-size: 18px; line-height: 1.15; }
  html.ui-v2 .v2-dbar .v2-sum-line { line-height: 1.2; }
}
/* 14b (V2-25: the title is .v2-h1, 28/800). */
html.ui-v2 .v2-q-intro { padding-top: var(--mg-space-6); display: flex; flex-direction: column; gap: var(--mg-space-10); }
html.ui-v2 .v2-q-about { font-size: 14px; font-weight: 700; color: var(--mg-text-secondary); }
html.ui-v2 .v2-q-block { margin: var(--mg-space-14) var(--mg-space-16) 0; }
html.ui-v2 .v2-q-opts { display: flex; flex-direction: column; gap: var(--mg-space-10); }
html.ui-v2 .v2-q-nav { margin: var(--mg-space-6) var(--mg-space-16) 0; display: flex; justify-content: space-between; }
html.ui-v2 .v2-q-done { display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-10); padding: 18px var(--mg-space-24) 0; text-align: center; }
html.ui-v2 .v2-q-done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--mg-done-tint); color: var(--mg-own-text); display: flex; align-items: center; justify-content: center; }
html.ui-v2 .v2-q-back { margin: var(--mg-space-4) var(--mg-space-16) 0; }
html.ui-v2 .v2-card.v2-card-block { margin: var(--mg-space-16) var(--mg-space-16) 0; overflow: hidden; }
html.ui-v2 .v2-card.v2-card-block.v2-card-last { margin: var(--mg-space-12) var(--mg-space-16) var(--mg-space-16); }
/* 16 (V2-25: the title is .v2-h1, 28/800). */
html.ui-v2 .v2-final-intro { padding-top: var(--mg-space-4); display: flex; flex-direction: column; gap: var(--mg-space-6); }
html.ui-v2 .v2-final-status { font-size: 15px; color: var(--mg-text-secondary); }
html.ui-v2 .v2-final-status .v2-st-open { color: var(--mg-review-text); }
html.ui-v2 .v2-final-status .v2-st-clear { color: var(--mg-own-text); }
html.ui-v2 button.v2-final-row.v2-final-first { border-top: none; }
html.ui-v2 .v2-dur-head { display: flex; gap: var(--mg-space-12); align-items: center; }
html.ui-v2 .v2-dur-text { flex-grow: 1; display: flex; flex-direction: column; gap: var(--mg-space-2); }
html.ui-v2 .v2-dur-text b { font-size: 15px; }
/* w5 client */
/* Main (V2-05, V2-41): the inline styles of renderMain as classes on mg- tokens. */
html.ui-v2 .v2-main-head { padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-main-resume { border-color: var(--mg-action); }
html.ui-v2 .v2-main-row-t { font-size: 15px; }
html.ui-v2 .v2-main-row-s { font-size: 14px; color: var(--mg-ink-600); }
html.ui-v2 .v2-main-row-ic { color: var(--mg-ink-600); margin-top: 2px; }
html.ui-v2 .v2-main-mic-t { font-size: 16px; font-weight: 700; }
html.ui-v2 .v2-main-mic-s { font-size: 14px; font-weight: 600; color: var(--mg-clay-700); }
html.ui-v2 .v2-main-src { align-items: center; }
html.ui-v2 .v2-main-src-plus { width: 36px; height: 36px; background: var(--mg-action); }
html.ui-v2 .v2-main-src-text { flex-grow: 1; }
html.ui-v2 .v2-main-src-ic { width: 48px; height: 48px; border-radius: 10px; background: var(--mg-bg-segment); color: var(--mg-clay-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
html.ui-v2 .v2-self-center { align-self: center; }
/* 17 (V2-28, V2-30, V2-27) */
html.ui-v2 .v2-recall-one { display: grid; grid-template-columns: minmax(0, 1fr); }
html.ui-v2 .v2-recall-head small.v2-recall-diff { color: var(--mg-ink-900); font-weight: 600; }
html.ui-v2 .v2-field.v2-field-narrow { max-width: 180px; }
html.ui-v2 .v2-field.v2-field-narrow .v2-field-head { flex-wrap: wrap; }
/* 18 (V2-31): optional content is a quiet tip, not an "Ezt még nézd meg" warning. */
html.ui-v2 .v2-pv-tip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 4px 0; font-size: 14px; line-height: 1.4; color: var(--mg-ink-700); }
html.ui-v2 .v2-pv-tip-acts { display: flex; gap: 4px; }
html.ui-v2 .v2-pv-tip .v2-link { min-height: var(--mg-touch-min, 48px); font-size: 14px; }
/* 19 (V2-35, V2-36) and the handback (V2-37) */
html.ui-v2 .v2-tl-ok { width: 24px; height: 24px; }
html.ui-v2 .v2-tl-fail { width: 24px; height: 24px; font-size: 13px; background: var(--mg-danger); color: var(--mg-white); }
html.ui-v2 .v2-sent-amt { color: var(--mg-ink-950); }
html.ui-v2 .v2-sent-acts { gap: 10px; }
html.ui-v2 .v2-sent-open { min-height: 52px; }
html.ui-v2 #quotes-triage .q-row.v2-just-sent { box-shadow: 0 0 0 2px var(--mg-done); background: var(--mg-own-tint); }

/* The dark bar is the screen's bottom edge on a phone: scrolled to the end,
   nothing shows under it. The body keeps room only for bottom tabs the flow
   hides here, and the screen's own bottom padding would sit under the bar. */
@media (max-width: 899px) {
  html.ui-v2 body.v2-flow.mq-editing:not(.nav-peek):not(.v2-main):has(#view-new:not(.hidden) #v2-flow > .v2-scr > .v2-dbar) { padding-bottom: 0; }
}
@media (max-width: 1023px) {
  html.ui-v2 #v2-flow > .v2-scr:has(> .v2-dbar) { padding-bottom: 0; }
}

/* Munkák (job grouping, #948/#949; design 14m/14n/18m). Drawn only with
   profile.features.workGroups and two or more jobs. */
html.ui-v2 .v2-list.v2-list-jobs { gap: 8px; }
html.ui-v2 .v2-job { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
html.ui-v2 .v2-job-head { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; border-bottom: 2px solid var(--mg-text-primary); }
html.ui-v2 .v2-job-name { flex-grow: 1; min-width: 0; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; border: none; background: transparent; color: var(--mg-text-primary); text-align: left; cursor: pointer; }
html.ui-v2 span.v2-job-name { cursor: default; }
html.ui-v2 .v2-job-title { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
html.ui-v2 .v2-job-title svg { color: var(--mg-text-muted); flex-shrink: 0; }
html.ui-v2 .v2-job-name small { font-size: 14px; color: var(--mg-text-muted); font-weight: 400; }
html.ui-v2 .v2-job-sum { font-size: 17px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .v2-job-list { display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-job-empty { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-job-explain { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: var(--mg-text-secondary); }
html.ui-v2 .v2-carried { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-carried svg, html.ui-v2 .v2-carried-note svg { color: var(--mg-source-text); flex-shrink: 0; }
html.ui-v2 .v2-carried-note { display: flex; align-items: flex-start; gap: 6px; margin: -6px 0 0; font-size: 14px; line-height: 1.4; color: var(--mg-text-secondary); }
html.ui-v2 .v2-carried-note svg { margin-top: 3px; }
html.ui-v2 .v2-dbar-groups { margin: 0; font-size: 14px; color: var(--mg-layer-text-secondary); overflow-wrap: anywhere; }
html.ui-v2 .v2-job-opts { display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-job-opt { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1.5px solid var(--mg-border-control); border-radius: 12px; background: var(--mg-bg-card); color: var(--mg-text-primary); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
html.ui-v2 .v2-job-opt small { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--mg-text-muted); white-space: nowrap; }
html.ui-v2 .v2-job-opt-name { min-width: 0; overflow-wrap: anywhere; }
html.ui-v2 .v2-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--mg-border-control); flex-shrink: 0; background: var(--mg-bg-card); color: var(--mg-on-selected); display: inline-flex; align-items: center; justify-content: center; }
html.ui-v2 .v2-radio svg { width: 12px; height: 12px; visibility: hidden; }
/* D1: a large selectable card is chosen with a 2px ink border on the card
   background and an ink check circle — never a solid ink fill. */
html.ui-v2 .v2-job-opt[aria-checked="true"] { border: 2px solid var(--mg-selected); padding: 0 13.5px; background: var(--mg-bg-card); color: var(--mg-text-primary); font-weight: 700; }
html.ui-v2 .v2-job-opt[aria-checked="true"] .v2-radio { border-color: var(--mg-selected); background: var(--mg-selected); }
html.ui-v2 .v2-job-opt[aria-checked="true"] .v2-radio svg { visibility: visible; }
html.ui-v2 .v2-inp.v2-inp-strong { border: 2px solid var(--mg-text-primary); }
html.ui-v2 .v2-job-quick { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui-v2 .v2-job-quick .v2-sec { min-height: 48px; padding: 0 12px; font-size: 14px; }
html.ui-v2 .v2-job-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mg-text-secondary); }
html.ui-v2 .v2-job-row { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0; border: none; border-top: 1px solid var(--mg-divider); background: transparent; color: var(--mg-text-primary); font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; }
html.ui-v2 .v2-job-del { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--mg-sand-300); border-radius: 14px; background: var(--mg-cream-50); }
html.ui-v2 .v2-job-del p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mg-text-on-tint); }
html.ui-v2 .v2-sec.v2-danger-sec { border-color: var(--mg-danger); color: var(--mg-danger); background: var(--mg-bg-card); }
html.ui-v2 .v2-link.v2-underline { text-decoration: underline; }
html.ui-v2 .v2-final-job { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px 6px; border-top: 1px solid var(--mg-divider); }
html.ui-v2 .v2-final-job:first-child { border-top: none; }
html.ui-v2 .v2-final-job b { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
html.ui-v2 .v2-final-job small { font-size: 14px; color: var(--mg-text-muted); white-space: nowrap; }
html.ui-v2 .v2-final-job ~ .v2-final-row { padding-left: 24px; }
html.ui-v2 .v2-final-sub { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--mg-border-card); font-size: 15px; }
html.ui-v2 .v2-final-sub span:last-child { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .v2-final-empty { margin: 12px 16px 0; padding: 4px 4px 4px 14px; border-radius: 12px; background: var(--mg-review-tint); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }

/* Item 9 (set5): at desk widths the tab bar stays reachable on Előnézet and Elküldve. */
@media (min-width: 900px) {
  html.ui-v2 body.v2-flow.v2-pv nav.tabs:not(.hidden),
  html.ui-v2 body.v2-flow:has(#v2-sent-host .v2-layer) nav.tabs:not(.hidden) { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
  html.ui-v2 body.v2-flow.v2-pv #preview-overlay,
  html.ui-v2 body.v2-flow:has(#v2-sent-host .v2-layer) #v2-sent-host .v2-layer { top: 56px !important; }
  html.ui-v2 body.v2-flow.v2-pv #preview-overlay { height: calc(100vh - 56px); }
}