/* QR-koodigeneraattori — salven.net/qr. "Calm clarity" redesign:
   light warm ground, soft white cards, one muted indigo accent, generous space,
   3-column layout (type · live preview · style), advanced settings tucked away. */
:root{
  --bg:#f4f3ef; --panel:#ffffff; --panel-2:#faf9f6; --paper:#f3efe7;
  --ink:#2a2a31; --ink-2:#6b6b76; --ink-3:#9b9ba6;
  --ink-lede:#4f4f57; --ink-foot:#56565e;   /* darker greys for lede + footer (WCAG on light) */
  --btn-sec:#3d3d47;                         /* secondary download button ground */
  --line:#eeece7; --line-2:#e0ded7;
  --accent:#6a63d4; --accent-2:#efeefb; --accent-line:#cfccf2;
  --good:#3f9e6b; --good-bg:#e9f6ef; --good-line:#bfe3cf;
  --warn:#c98a2b; --warn-bg:#fbf3e4; --warn-line:#ecd8a8;
  --bad:#c8503f;  --bad-bg:#fbecea;  --bad-line:#f0c3bb;
  --ok-text:#1f6b45; --warn-text:#7a5514; --bad-text:#9a2f22;  /* strong status text on status bg */
  --r-card:16px; --r-ctl:10px;
  --shadow:0 1px 2px rgba(30,28,45,.04), 0 10px 30px rgba(30,28,45,.05);
  --sans:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ── Dark theme ─────────────────────────────────────────────────────────────
   Two entry points share ONE palette (keep the two blocks in sync):
   1. auto  — @media (prefers-color-scheme: dark), unless the user forced light
   2. manual — :root[data-theme="dark"], set by the toggle on any OS
   CRITICAL: --paper stays LIGHT so the QR preview stage never darkens (a QR must
   be dark modules on a light ground to scan). The user's own QR colours (s-bg-color)
   are untouched. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17171c; --panel:#212129; --panel-2:#1b1b22; --paper:#f3efe7;
    --ink:#ececf1; --ink-2:#b0b0bc; --ink-3:#83838f;
    --ink-lede:#c4c4cf; --ink-foot:#9a9aa6;
    --btn-sec:#3a3a44;
    --line:#2e2e37; --line-2:#3a3a45;
    --accent:#8b84e8; --accent-2:#2a2740; --accent-line:#413c66;
    --good:#5fc493; --good-bg:#16271f; --good-line:#295c40;
    --warn:#e0a94e; --warn-bg:#2a2113; --warn-line:#5c4a24;
    --bad:#e57366;  --bad-bg:#2a1613;  --bad-line:#5c2c24;
    --ok-text:#7fd6a6; --warn-text:#e0b866; --bad-text:#f0928a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#17171c; --panel:#212129; --panel-2:#1b1b22; --paper:#f3efe7;
  --ink:#ececf1; --ink-2:#b0b0bc; --ink-3:#83838f;
  --ink-lede:#c4c4cf; --ink-foot:#9a9aa6;
  --btn-sec:#3a3a44;
  --line:#2e2e37; --line-2:#3a3a45;
  --accent:#8b84e8; --accent-2:#2a2740; --accent-line:#413c66;
  --good:#5fc493; --good-bg:#16271f; --good-line:#295c40;
  --warn:#e0a94e; --warn-bg:#2a2113; --warn-line:#5c4a24;
  --bad:#e57366;  --bad-bg:#2a1613;  --bad-line:#5c2c24;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.45);
}
/* ───────────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;
  font-size:15px;-webkit-font-smoothing:antialiased;padding:28px 22px 56px}
.container{max-width:1180px;margin:0 auto}

/* top bar (language) */
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:6px}
.langsel{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.langsel button{border:0;background:transparent;font-family:inherit;font-size:.78rem;font-weight:800;color:var(--ink-3);padding:.32rem .8rem;cursor:pointer;letter-spacing:.03em}
.langsel button.on{background:var(--accent);color:#fff}
/* theme toggle — mirrors .langsel; emoji dimmed when inactive, full colour + tint when active */
.themesel{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.themesel button{border:0;background:transparent;font-size:.9rem;line-height:1;padding:.3rem .6rem;cursor:pointer;
  filter:grayscale(1);opacity:.5;transition:.15s}
.themesel button:hover{opacity:.8}
.themesel button.on{background:var(--accent-2);filter:none;opacity:1}

/* header */
header.hd{text-align:center;margin-bottom:22px}
header.hd h1{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;letter-spacing:-.02em}
header.hd .lede{color:var(--ink-lede);margin-top:.5rem;font-size:1.02rem;max-width:60ch;margin-inline:auto}
.nostot{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.nosto{display:inline-flex;align-items:center;gap:.4rem;background:var(--panel);border:1px solid var(--line-2);
  border-radius:999px;padding:.35rem .8rem;font-size:.82rem;color:var(--ink-2);box-shadow:var(--shadow)}
.nosto b{color:var(--ink);font-weight:700}
.nosto .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* mode toggle (single vs batch) */
.mode{display:flex;justify-content:center;margin:0 auto 18px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:999px;padding:4px;width:max-content;box-shadow:var(--shadow)}
.mode button{border:0;background:transparent;font-family:inherit;font-size:.9rem;color:var(--ink-2);
  padding:.5rem 1.2rem;border-radius:999px;cursor:pointer;font-weight:600;transition:.15s}
.mode button.on{background:var(--accent);color:#fff}

/* ad slots */
.ad-slot{margin:14px 0;border:1px dashed var(--line-2);border-radius:var(--r-card);min-height:70px}
.ad-slot[data-live="1"]{border:0;min-height:0}
.ad-slot:empty{display:none}

/* 3-column layout (desktop only; below 1040 it becomes a single linear column) */
.studio{display:grid;grid-template-columns:220px 1fr 320px;gap:16px;align-items:start}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  padding:18px;box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
.col > .col-title,.card > .col-title,.col-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:800;margin-bottom:.8rem}

/* left: type cards */
.col-type{position:sticky;top:20px}
.typelist{display:flex;flex-direction:column;gap:8px}
.typecard{display:flex;align-items:center;gap:11px;background:var(--panel);border:1.5px solid var(--line-2);
  border-radius:12px;padding:9px 11px;cursor:pointer;font-family:inherit;font-size:.92rem;color:var(--ink);
  text-align:left;transition:.14s}
.typecard:hover{border-color:var(--accent-line);background:var(--panel-2)}
.typecard.active{border-color:var(--accent);background:var(--accent-2)}
.typecard .ico{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  font-size:18px;background:var(--accent-2);color:var(--accent)}
.typecard .ico svg{width:20px;height:20px;display:block}
.typecard.active .ico{background:var(--panel)}

/* center: preview + input */
.col-preview{position:sticky;top:20px}
.qr-stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.qr-paper{background:var(--paper);border-radius:14px;padding:22px;display:grid;place-items:center}
#qr-canvas{width:100%;height:auto;max-width:300px;display:block;border-radius:6px}
.dlrow{display:flex;gap:.55rem;margin-top:.9rem}
.btn{flex:1;background:var(--accent);color:#fff;border:none;padding:.7rem 1rem;font-size:.92rem;
  font-weight:700;border-radius:var(--r-ctl);cursor:pointer;font-family:inherit;transition:.15s}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sec{background:var(--btn-sec)}
.btn.ghost{background:var(--panel-2);color:var(--accent);border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--accent-2)}
.icbtn{flex:0 0 auto;width:44px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-ctl);
  cursor:pointer;font-size:1rem;color:var(--ink-2)}
.icbtn:hover{background:var(--accent-2);color:var(--accent)}
.muted{font-size:.76rem;color:var(--ink-3);margin-top:.8rem;text-align:center;line-height:1.45}

/* content input area (in center, under preview) */
/* UX (qwen-ux-check 2026-07-13): sisalto ennen tulosta — syottokentat esikatselun ja
   latauksen ylle KAIKILLA leveyksilla (order:-1 nostaa .qr-stage-flexissa ensimmaiseksi) */
.inputwrap{order:-1;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tab-content{display:none}
.tab-content.active{display:block}
.form-group{margin-bottom:.8rem}
.form-group:last-child{margin-bottom:0}
label{display:block;margin-bottom:.35rem;font-weight:600;font-size:.82rem;color:var(--ink-2)}
input[type=text],input[type=url],input[type=tel],input[type=email],input[type=number],input[type=datetime-local],textarea,select{
  width:100%;padding:.62rem .75rem;border:1.5px solid var(--line-2);border-radius:var(--r-ctl);
  font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--panel-2);transition:border-color .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);background:var(--panel)}
select:disabled,input:disabled{opacity:.45;cursor:not-allowed}
.ctl:has(select:disabled) > span{opacity:.55}
textarea{min-height:88px;resize:vertical}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b76' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media (max-width:520px){.row{grid-template-columns:1fr}}
.hint{font-size:.77rem;color:var(--ink-3);margin-top:.4rem;line-height:1.45}
.hint code{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem}
.checkline{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink-2);cursor:pointer;font-weight:600}
.checkline input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* right: style panel */
.style-section{margin-bottom:1.15rem}
.style-section:last-child{margin-bottom:0}
.style-label{font-size:.78rem;font-weight:700;color:var(--ink-2);margin-bottom:.5rem}

/* theme preset swatches */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.theme{border:1.5px solid var(--line-2);border-radius:12px;padding:.55rem .3rem;background:var(--panel);
  cursor:pointer;font-family:inherit;font-size:.72rem;color:var(--ink-2);text-align:center;transition:.14s}
.theme:hover{border-color:var(--accent-line)}
.theme.on{border-color:var(--accent);background:var(--accent-2);color:var(--ink)}
.theme .sw{display:block;width:34px;height:34px;border-radius:50%;margin:0 auto .35rem;border:1px solid rgba(0,0,0,.08)}

/* pattern (dot style) picker */
.patterns{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.pat{border:1.5px solid var(--line-2);border-radius:10px;padding:5px;background:var(--panel);cursor:pointer;
  aspect-ratio:1;display:grid;place-items:center;transition:.14s}
.pat:hover{border-color:var(--accent-line)}
.pat.on{border-color:var(--accent);background:var(--accent-2)}
.pat svg{width:100%;height:100%;display:block}

/* colour swatch rows */
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.sw-btn{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;
  position:relative;transition:transform .1s}
.sw-btn:hover{transform:scale(1.12)}
.sw-btn.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.sw-btn.custom{background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);display:grid;place-items:center}
.sw-btn.custom::after{content:"+";color:#fff;font-weight:800;font-size:.8rem;text-shadow:0 0 2px rgba(0,0,0,.4)}
.sw-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}

/* size presets */
.seg{display:flex;gap:6px}
.seg button{flex:1;border:1.5px solid var(--line-2);background:var(--panel);border-radius:var(--r-ctl);
  padding:.5rem;font-family:inherit;font-size:.82rem;color:var(--ink-2);cursor:pointer;font-weight:600;transition:.14s}
.seg button.on{border-color:var(--accent);background:var(--accent-2);color:var(--ink)}

/* advanced disclosure */
details.adv{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.6rem}
details.adv > summary{list-style:none;cursor:pointer;font-size:.82rem;font-weight:700;color:var(--accent);
  display:flex;align-items:center;gap:.4rem;padding:.2rem 0}
details.adv > summary::-webkit-details-marker{display:none}
details.adv > summary::before{content:"▸";transition:transform .15s}
details.adv[open] > summary::before{transform:rotate(90deg)}
.adv-body{padding-top:.7rem}
.ctl-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .8rem}
.ctl{display:flex;flex-direction:column;gap:.3rem}
.ctl > span{font-weight:600;font-size:.8rem;color:var(--ink-2)}
input[type=color]{width:100%;height:34px;padding:2px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--panel);cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.file-row{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
/* Map location picker (geo tab). Container needs an explicit height for MapLibre. */
.geo-map{position:relative;height:320px;border:1px solid var(--line-2);border-radius:var(--r-ctl);overflow:hidden;background:var(--panel-2)}
.geo-map-msg{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.2rem;font-size:.82rem;color:var(--ink-3);line-height:1.5}
.geo-map .maplibregl-canvas{border-radius:var(--r-ctl)}
.geo-search{position:relative;display:flex;gap:.5rem;margin-bottom:.6rem}
.geo-search input{flex:1;min-width:0}
.geo-search-results{position:absolute;top:100%;left:0;right:0;z-index:5;margin:.25rem 0 0;padding:.25rem;list-style:none;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-ctl);box-shadow:var(--shadow);max-height:220px;overflow-y:auto}
.geo-search-results li{padding:.45rem .6rem;border-radius:6px;cursor:pointer;font-size:.85rem}
.geo-search-results li:hover{background:var(--accent-2)}
.geo-search-results li.geo-search-empty{color:var(--ink-3);cursor:default}
.geo-search-results li.geo-search-empty:hover{background:transparent}
.filebtn{display:inline-block;padding:.5rem .9rem;background:var(--accent-2);color:var(--accent);
  border:1px solid var(--accent-line);border-radius:var(--r-ctl);cursor:pointer;font-weight:700;font-size:.85rem}
.filebtn:hover{background:var(--accent-line)}
input[type=file]{display:none}
.linkbtn{background:none;border:none;color:var(--ink-3);cursor:pointer;font-family:inherit;font-size:.83rem;
  text-decoration:underline;padding:0}
.linkbtn:hover{color:var(--accent)}
.subcard{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:.7rem}
.subcard > h4{font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:.55rem}

/* scannability + contrast badges */
.scan{margin-top:.85rem;padding:.55rem .7rem;border-radius:10px;font-size:.82rem;line-height:1.35;
  text-align:left;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2)}
.scan:empty{display:none}
.scan b{color:var(--ink)}
.scan.ok{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.scan.ok b{color:var(--ok-text)}
.scan.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.scan.warn b{color:var(--warn-text)}
.scan .tests{margin-top:.4rem;display:grid;gap:.02rem}
.scan .chk-row{font-size:.78rem;font-weight:600;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan .chk-row.y{color:var(--ok-text)}
.scan .chk-row.n{color:var(--bad-text)}
.scan .printsize{margin-top:.55rem;padding-top:.45rem;border-top:1px dashed var(--line-2);
  font-size:.74rem;color:var(--ink-3);font-weight:400}
.scan .printsize b{color:var(--ink-2)}
.contrast{margin-top:.5rem;padding:.45rem .7rem;border-radius:10px;font-size:.78rem;line-height:1.35;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2)}
.contrast:empty{display:none}
.contrast b{color:var(--ink)}
.contrast.ok{background:var(--good-bg);border-color:var(--good-line);color:var(--ok-text)}
.contrast.mid{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-text)}
.contrast.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-text)}
.warn-note{font-size:.74rem;color:var(--ink-3);margin-top:.7rem;line-height:1.45;border-top:1px solid var(--line);padding-top:.6rem}

/* batch mode panel */
/* onboarding: scenario picker (first-touch) — body.onboarding-luokka ohjaa (kuten body.batch) */
.intro{display:none;max-width:760px;margin:0 auto}
body.onboarding .intro{display:block}
body.onboarding .studio,body.onboarding .batchwrap,body.onboarding .mode,body.onboarding .mobilebar{display:none}
.intro-title{text-align:center;font-size:1.5rem;font-weight:800;color:var(--ink);margin:6px 0 20px}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scenario{display:flex;align-items:center;gap:12px;background:var(--panel);border:1.5px solid var(--line-2);
  border-radius:14px;padding:16px 18px;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;
  color:var(--ink);text-align:left;transition:.14s;min-height:60px}
.scenario:hover{border-color:var(--accent-line);background:var(--panel-2);transform:translateY(-1px)}
.scenario .ico{flex:0 0 auto;color:var(--accent);display:grid;place-items:center}
.scenario .ico svg{width:26px;height:26px;display:block}
.intro-skip{display:block;margin:16px auto 0;background:none;border:none;color:var(--ink-3);
  font-family:inherit;font-size:.9rem;cursor:pointer;padding:.7rem 1.2rem;min-height:44px;
  box-sizing:border-box;text-decoration:underline}
.intro-skip:hover{color:var(--accent)}
@media (max-width:520px){.intro-grid{grid-template-columns:1fr}.intro-title{font-size:1.25rem}}

.batchwrap{display:none}
body.batch .studio{display:none}
body.batch .batchwrap{display:block}
.batchwrap .card{max-width:760px;margin:0 auto}

footer.ft{text-align:center;color:var(--ink-foot);font-size:.8rem;margin-top:26px}
/* Lock glyph via mask so its colour tracks --ink-foot in both themes (a baked data-URI
   stroke would not flip for dark mode). */
footer.ft::before{content:"";display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px;
  background-color:var(--ink-foot);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat}

/* mobile sticky preview bar (expandable) */
.mobilebar{display:none}
.mb-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.mb-info b{font-size:.82rem;color:var(--ink)}
.mb-scan{font-size:.76rem;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-scan.ok{color:var(--ok-text)}.mb-scan.mid{color:var(--warn-text)}.mb-scan.bad{color:var(--bad-text)}
#qr-mini{width:50px;height:50px;flex:0 0 auto;border-radius:8px;background:#fff;border:1px solid var(--line-2);cursor:pointer}

/* Everything below the desktop 3-column width: one linear, static column + the
   sticky mobile preview bar. This covers phones, tablets and desktop-site mode —
   the previous 720–1040 band left the preview sticky with no bar (overlap bug). */
@media (max-width:1040px){
  body{padding-bottom:88px}
  .studio{display:block}
  .studio > .col{max-width:640px;margin:0 auto 14px;position:static}
  .col-type,.col-preview,.col-style{position:static}
  .typelist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .typecard{font-size:.85rem;padding:9px}
  .typecard .ico{width:30px;height:30px;font-size:16px}
  #qr-canvas{max-width:260px}
  /* UX (vahaisemmat): >=44px kosketuskohteet mobiilissa (syoton nosto on nyt perustyyleissa) */
  .linkbtn{display:block;width:100%;min-height:44px;padding:.7rem 0;text-decoration:none}
  .linkbtn::after{content:" \203A";opacity:.6}
  .sw-btn{width:32px;height:32px}
  /* bottom:-1px + compensating padding closes a sub-pixel hairline gap under the
     bar on high-DPI screens (scrolling content used to show through); the extra
     1px of background bleeds off-screen while the content stays put. */
  .mobilebar{display:block;position:fixed;left:0;right:0;bottom:-1px;z-index:60;
    background:var(--panel);border-top:1px solid var(--line-2);box-shadow:0 -6px 24px rgba(30,28,45,.12);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1px)}
  .mb-row{display:flex;gap:12px;align-items:center;padding:9px 14px}
  .mb-row .btn{flex:0 0 auto;width:auto;padding:.62rem 1.05rem;min-height:44px}   /* ≥44px touch target */
  .mb-panel{display:none}
  .mobilebar.expanded{max-height:66vh;overflow-y:auto}
  .mobilebar.expanded .mb-row{display:none}
  .mobilebar.expanded .mb-panel{display:flex;flex-direction:column;gap:.7rem;padding:10px 14px 16px}
  .mb-close{align-self:flex-end;background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;
    padding:.3rem .8rem;font-size:.8rem;color:var(--ink-2);cursor:pointer;font-family:inherit;font-weight:600}
  .mb-split{display:flex;gap:12px;align-items:flex-start}
  .mb-split #qr-big{flex:0 0 47%;width:47%;height:auto;aspect-ratio:1;border-radius:8px;background:#fff;border:1px solid var(--line-2)}
  .mb-split #mb-analysis{flex:1;min-width:0;margin-top:0;overflow:hidden}
  .mb-split #mb-analysis .contrast{min-height:2.6em;margin-top:.45rem}   /* reserve → no jump on verdict change */
  .mb-density{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:.5rem .7rem;
    font-size:.74rem;color:var(--ink-3);line-height:1.4;min-height:2.9em}
  .mb-density b{color:var(--ink-2)}
  .mb-panel .dlrow{margin-top:0}
  body.mb-expanded{padding-bottom:52vh}
  body.batch .mobilebar{display:none}   /* no single-code preview in batch mode */
}