@font-face {
    font-family: 'Bannikova';
    src: url('/fonts/BannikovaC.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  :root {
    --bg: #000; --panel: #0d0d0d; --muted: #888; --line: rgba(255,255,255,.1);
    --page-pad: clamp(16px, 3vw, 40px);
    --mobile-pad: 16px;
    --mobile-card-radius: 20px;
    --mobile-card-bg: linear-gradient(180deg, rgba(22,22,22,.95), rgba(10,10,10,.95));
    --mobile-card-border: 1px solid rgba(255,255,255,.08);
    --mobile-card-shadow: 0 24px 80px rgba(0,0,0,.6);
    --mobile-btn-h: 52px;
    --coin-chrome-v: 14px;
    --coin-chrome-h: calc(var(--coin-chrome-v) * 2 + var(--mobile-btn-h));
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --control-h: 48px;
    --landing-bg: #000;
    --landing-bg-top: #000;
    --mobile-field-bg: rgba(255,255,255,.1);
    --mobile-field-border: rgba(255,255,255,.22);
    --mobile-field-bg-focus: rgba(255,255,255,.14);
    --radius: 14px;
  }
  * { box-sizing: border-box; }
  html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
  }
  html:has(body.mobile-app-view) {
    background-color: var(--landing-bg-top);
  }
  body {
    margin: 0; min-height: 100dvh; overflow-x: hidden; overflow-y: auto;
    touch-action: manipulation;
    background: var(--bg);
    color: #fff;
    font: 14px/1.45 Inter, -apple-system, "SF Pro Text", system-ui, sans-serif;
    padding: max(var(--space-sm), env(safe-area-inset-top))
             max(var(--space-sm), env(safe-area-inset-right))
             max(var(--space-md), env(safe-area-inset-bottom))
             max(var(--space-sm), env(safe-area-inset-left));
  }
  .layout {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; max-width: 580px; margin: 0 auto;
  }
  @media (min-width: 1050px) {
    html { background-color: var(--landing-bg-top); }
    body {
      padding: var(--page-pad);
      overflow: hidden;
      height: 100dvh;
      box-sizing: border-box;
      background: var(--landing-bg);
      background-color: var(--landing-bg-top);
    }
    #appHeaderBack,
    #appHeaderClose,
    #appHeaderLogo,
    .appHeaderLandingBtn,
    .interpOverlay,
    .cardAction,
    .coinShareBtn,
    .landingHero { display: none !important; }
    .layout {
      position: relative;
      max-width: none;
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      display: grid;
      grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      gap: clamp(20px, 3vw, 40px);
      align-items: stretch;
    }
    #appHeader {
      grid-column: 2;
      grid-row: 1;
      place-self: start end;
      position: relative;
      top: auto;
      right: auto;
      width: max-content;
      height: max-content;
      margin: 16px 16px 0 0;
      inset: auto;
      pointer-events: none;
      z-index: 20;
      display: block !important;
      padding: 0;
    }
    #appHeader .tuningPanel {
      position: relative;
      top: auto;
      right: auto;
      inset: auto;
      width: 40px;
      min-height: 40px;
      height: auto;
      align-items: stretch;
      justify-content: flex-start;
      pointer-events: auto;
    }
    #appHeader .tuningPanel.open {
      width: 520px;
      min-width: 520px;
      padding-top: 48px;
    }
    #appHeader > .tuningPanel {
      justify-content: flex-start;
      align-items: stretch;
    }
    #appHeader .tuningToggle {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    #appHeader .tuningBody {
      width: 100%;
      min-width: 0;
      margin-top: 0;
      box-sizing: border-box;
    }
    aside {
      grid-column: 1;
      grid-row: 1;
      order: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      height: auto;
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background: transparent;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 4px clamp(12px, 1.5vw, 20px) 16px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.15) transparent;
    }
    .formCardMain,
    .formCardBottom {
      flex: 0 0 auto;
      min-height: auto;
    }
    .formCardBottom {
      margin-top: 8px;
      padding-top: 4px;
    }
    aside h1 {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -.025em;
      margin: 0 0 12px;
      color: rgba(255,255,255,.92);
    }
    aside .hint { margin-bottom: 16px; }
    input, select {
      background: var(--mobile-field-bg);
      border: 1px solid var(--mobile-field-border);
    }
    input:focus, select:focus {
      background: var(--mobile-field-bg-focus);
      border-color: rgba(255,255,255,.32);
    }
    .dateInputWrap {
      background: var(--mobile-field-bg);
      border: 1px solid var(--mobile-field-border);
    }
    .dateInputWrap:focus-within {
      background: var(--mobile-field-bg-focus);
      border-color: rgba(255,255,255,.32);
    }
    button.secondary {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      font-size: 13px;
    }
    button.secondary:hover { background: rgba(255,255,255,.1); }
    .formActions { margin-top: 16px; }
    .formActions .buttons:first-of-type {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #interpretation {
      max-height: none;
    }
    main {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      order: 0;
      min-height: 0;
      height: 100%;
      max-height: none;
      aspect-ratio: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      overflow: hidden;
      padding-top: 0;
      box-sizing: border-box;
    }
    .coinStage {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    main canvas,
    .coinStage canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      object-fit: contain;
      object-position: center center;
      background: transparent !important;
    }
    .landingInfoOverlay {
      position: fixed;
      inset: 0;
      z-index: 120;
    }
    .tuningPanel { top: 16px; right: 16px; width: min(300px, calc(100% - 32px)); }
    #appHeader .tuningToggle {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.22);
    }
  }
  aside {
    display: flex; flex-direction: column; gap: 0;
    width: 100%; min-height: 0; overflow: visible;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: clamp(20px, 4vw, 32px);
    box-shadow: none;
    order: 2;
  }
  @media (min-width: 1050px) {
    aside { order: 0; }
  }
  aside::-webkit-scrollbar { width: 6px; }
  aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 6px; }
  
  h1 { font-size: 26px; margin: 0 0 var(--space-xs); letter-spacing: -.03em; font-weight: 700; }
  .hint { color: var(--muted); font-size: 13px; margin: 0 0 var(--space-lg); line-height: 1.5; }
  .field { margin: 0 0 var(--space-md); }
  .field > label { display: block; font-size: 11px; color: var(--muted);
          letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--space-xs); font-weight: 600; }
  #plateBadgeWrap { margin: 0; }
  input, select {
    width: 100%; height: var(--control-h); background: rgba(0,0,0,.4); color: #fff;
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
    padding: 0 var(--space-md); outline: none; font: inherit; font-size: 14px;
    transition: border-color .2s, background .2s;
  }
  input:focus, select:focus { border-color: rgba(255,255,255,.4); background: rgba(0,0,0,.6); }
  .dateInputWrap {
    display: block;
    width: 100%;
    height: var(--control-h);
    box-sizing: border-box;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
  }
  .dateInputWrap:focus-within {
    border-color: rgba(255,255,255,.4);
    background: rgba(0,0,0,.6);
  }
  .dateInputWrap.is-invalid {
    border-color: #ff7676;
    background: rgba(255, 80, 80, 0.08);
  }
  .dateInputWrap.is-invalid:focus-within {
    border-color: #ff7676;
    box-shadow: 0 0 0 1px rgba(255, 118, 118, 0.35);
  }
  .dateInputWrap.is-invalid input {
    color: #ff7676;
  }
  .dateInputWrap input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 var(--space-md);
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: inherit;
    line-height: var(--control-h);
    box-sizing: border-box;
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
    min-width: 100%;
    -webkit-min-logical-width: 100%;
  }
  .dateInputWrap input[type="date"]:focus {
    outline: none;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .dateInputWrap input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }
  .row { display: grid; grid-template-columns: 1fr 92px; gap: var(--space-sm); }
  .row.prefix { grid-template-columns: 112px 1fr; }
  .row.full { grid-template-columns: 1fr; }
  .row.dt { grid-template-columns: 1fr 118px; }
  .fieldHint { font-size: 12px; color: var(--muted); margin: 0 0 var(--space-xs); line-height: 1.35; }
  .formCardMain { flex: 1 1 auto; min-height: 0; }
  .formCardBottom { flex: 0 0 auto; }
  .cardAction {
    flex: 0 0 auto;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    margin-top: 4px;
  }
  .mobilePrimaryBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--mobile-btn-h);
    height: var(--mobile-btn-h);
    max-height: var(--mobile-btn-h);
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: #0c0d10;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    box-sizing: border-box;
    cursor: pointer;
  }
  .mobilePrimaryBtn:active { transform: scale(0.98); }
  .mobilePrimaryBtn:disabled { opacity: .5; cursor: progress; transform: none; }
  .cardAction .mobilePrimaryBtn { border-radius: var(--radius); font-weight: 600; }
  .cardAction #error { margin: 0; font-size: 12px; min-height: 0; }
  .cardAction #error:empty { display: none; }
  .formActions { margin-top: var(--space-lg); }
  .formActions .buttons button { border-radius: 999px; }
  .buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm); }
  .buttons.export { grid-template-columns: 1fr 1fr; margin-top: var(--space-sm); }
  button {
    height: var(--control-h); border-radius: var(--radius); border: none;
    background: #fff; color: #000; font-weight: 600; cursor: pointer;
    letter-spacing: .02em; transition: transform .1s, opacity .2s, background .2s;
  }
  button:active { transform: scale(0.97); }
  button.secondary { background: rgba(255,255,255,.08); color: #fff; }
  button.secondary:hover { background: rgba(255,255,255,.12); }
  button:disabled { opacity: .5; cursor: progress; transform: none; }
  #error, #errorDesktop { color: #ff7676; font-size: 13px; min-height: 1.2em; margin: var(--space-sm) 0 0; }

  .interpPanel {
    display: none;
    flex-direction: column;
    gap: 12px;
  }
  .passportTitle {
    color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; margin: 0;
  }
  #interpretation { display: flex; flex-direction: column; gap: 12px; }
  .consentLine { margin: 8px 0 0; font-size: 12px; line-height: 1.4; text-align: center; color: rgba(255,255,255,.45); }
  .consentLine a, .termsLink, .legalLink { color: rgba(255,255,255,.7); }
  .termsOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    display: none;
    flex-direction: column;
  }
  .termsOverlay.open { display: flex; }
  .termsHeader {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    column-gap: 8px;
    padding: max(calc(env(safe-area-inset-top) + 10px), 28px) 16px 8px;
    box-sizing: border-box;
  }
  .termsHeaderLogo {
    grid-column: 2;
    justify-self: center;
    display: block;
    width: 72px;
    max-width: 72px;
    height: auto;
    margin: 0;
    filter: brightness(0) invert(1);
  }
  .termsHeader .appHeaderRight > .appHeaderIcon {
    position: absolute;
    inset: 0;
  }
  .termsFrame {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    background: #000;
  }
  .coinShareBtn {
    display: none;
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 20;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  .coinShareBtn svg { display: block; width: 22px; height: 22px; }
  .coinShareBtn:active { opacity: .55; }
  .coinShareBtn:disabled { opacity: .4; cursor: progress; }
  .layout.step-coin .coinShareBtn { display: flex; }
  .layout.step-coin.tuning-open .coinShareBtn,
  .layout.step-coin.interp-open .coinShareBtn { display: none; }
  .formPrimaryBtn {
    width: 100%;
    min-height: var(--control-h);
    border-radius: 999px;
    border: none;
    background: #fff;
    color: #0c0d10;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .02em;
    transition: transform .1s, opacity .2s, background .2s;
  }
  .formPrimaryBtn:active { transform: scale(0.98); }
  .formPrimaryBtn:disabled { opacity: .45; cursor: default; transform: none; }
  .formPayBlock {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  .formPayBlock[hidden] { display: none !important; }
  .formPayBlock .consentLine {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
  }
  #downloadQr:not([hidden]) { grid-column: 1 / -1; }
  .interpSection {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px; padding: 14px 16px;
  }
  .interpSection h3 {
    margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
    line-height: 1.35; color: #f2f2f2;
  }
  #interpretation .interpBlock,
  .mobileInterp .interpBlock {
    margin: 0 0 22px; padding: 0;
    background: none; border: none; border-radius: 0;
  }
  #interpretation .interpBlock:last-child,
  .mobileInterp .interpBlock:last-child { margin-bottom: 0; }
  .interpHeading {
    margin: 0 0 10px; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    line-height: 1.35; color: rgba(255,255,255,.9);
  }
  .interpHeadingTitle {
    text-transform: none; letter-spacing: .02em; font-size: 14px;
  }
  .interpBody {
    color: #c8c8c8; font-size: 14px; line-height: 1.6;
  }
  .interpBody p { margin: 0 0 10px; }
  .interpBody p:last-child { margin-bottom: 0; }
  .interpBody .interpSubhead {
    display: block; margin: 10px 0 4px; color: #e8e8e8; font-weight: 700;
    font-size: 14px; letter-spacing: .01em;
  }
  .interpBody .interpSubhead:first-child { margin-top: 0; }
  .interpBody .interpSubhead + p { margin-top: 0; }
  .interpBody strong { font-weight: 700; color: #e8e8e8; }
  .compatPrompt {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column; gap: 10px;
  }
  .compatPrompt label {
    display: block; margin: 0 0 4px; font-size: 10px;
    letter-spacing: .08em; color: rgba(255,255,255,.75);
  }
  .compatPrompt .dateInputWrap {
    width: 100%; box-sizing: border-box;
    height: var(--control-h); border-radius: 12px;
    background: var(--mobile-field-bg);
    border: 1px solid var(--mobile-field-border);
  }
  .compatPrompt .dateInputWrap:focus-within {
    border-color: rgba(255,255,255,.32);
    background: var(--mobile-field-bg-focus);
  }
  .compatPrompt .dateInputWrap input[type="date"] {
    width: 100%; box-sizing: border-box;
    padding: 0 12px; font-size: 16px;
    line-height: var(--control-h); direction: ltr;
  }
  .compatPrompt .mobilePrimaryBtn {
    width: 100%; box-sizing: border-box;
    height: var(--mobile-btn-h) !important;
    min-height: var(--mobile-btn-h) !important;
    max-height: var(--mobile-btn-h) !important;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 600;
  }
  .compatPrompt .mobilePrimaryBtn:disabled { opacity: .55; cursor: wait; }
  .compatError {
    margin: 0; color: #ffb4b4; font-size: 13px; line-height: 1.45;
  }
  .compatLoader {
    display: inline-block; color: rgba(255,255,255,.72);
  }
  .interpBlock.compatPending .interpBody {
    color: rgba(255,255,255,.72);
  }

  main {
    position: relative; width: 100%;
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: stretch;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    order: 1;
    aspect-ratio: 1;
    max-height: min(72dvh, 520px);
  }
  canvas {
    width: 100%; height: 100%;
    max-width: 1040px; max-height: 1040px;
    object-fit: contain;
    background: transparent;
    touch-action: none;
  }

  .tuningPanel {
    position: absolute; top: 12px; right: 12px; z-index: 10;
    width: min(280px, calc(100% - 24px));
    display: flex; flex-direction: column; align-items: flex-end;
  }
  @media (min-width: 1050px) {
    .tuningPanel { top: 16px; right: 16px; width: min(640px, calc(100% - 32px)); }
  }
  .tuningBody {
    display: none; margin-top: 8px; padding: 12px 14px; width: 100%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: visible;
  }
  .tuningPanel.open .tuningBody { display: block; }
  .tuningTitle {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.55); margin: 0 0 12px;
  }
  .tuningRow { margin-bottom: 10px; }
  .tuningRow:last-child { margin-bottom: 0; }
  .tuningRow label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; margin: 0 0 6px; letter-spacing: .08em;
    color: rgba(255,255,255,.42);
  }
  .tuningRow:has(.iosSlider) label {
    margin: 0 0 3px;
  }
  .tuningRow label span { color: rgba(255,255,255,.55); font-weight: 500; text-transform: none; letter-spacing: 0; }
  .iosSlider {
    position: relative;
    width: 100%;
    height: 28px;
  }
  .iosSliderTrack {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(0,0,0,.24);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
    overflow: hidden;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .iosSliderFill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.28);
    pointer-events: none;
    transition: width 0.04s linear;
  }
  .iosSlider.is-dragging .iosSliderFill {
    transition: none;
  }
  .iosSliderInput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .tuningRow input[type=color] {
    width: 100%; height: 28px; padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .tuningRow input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
  .tuningRow input[type=color]::-webkit-color-swatch {
    border: none; border-radius: 9px;
  }
  .tuningRow input[type=color]::-moz-color-swatch {
    border: none; border-radius: 9px;
  }
  .tuningControls {
    display: flex; align-items: center; gap: 4px;
  }
  .tuningIconBtn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: 0; padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: transparent;
    color: rgba(255,255,255,.55);
    cursor: pointer;
  }
  .tuningIconBtn:hover:not(:disabled) {
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.06);
  }
  .tuningIconBtn:disabled { opacity: .35; cursor: default; }
  .tuningIcon { width: 14px; height: 14px; display: block; }
  #tuningSpinToggle .tuningIconPlay { display: none; }
  #tuningSpinToggle.is-paused .tuningIconPlay { display: block; }
  #tuningSpinToggle.is-paused .tuningIconPause { display: none; }
  .tuningHead {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
  }
  .tuningHeadTitle {
    font-size: 12px; font-weight: 500; letter-spacing: -.01em;
    color: rgba(255,255,255,.55);
  }
  .tuningGrid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
  }
  .tuningRowWide { grid-column: 1 / -1; }
  .tuningColors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin-top: 8px;
  }
  .tuningColors .tuningRow { margin-bottom: 0; }
  .tuningColors .tuningRow label {
    justify-content: center;
    margin-bottom: 4px;
  }

  .coinStage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .coinStage canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 2200 / 2560;
    object-fit: contain;
    background: transparent;
  }

  .coinMobileBar {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--coin-chrome-v) 16px;
    min-height: var(--coin-chrome-h);
    box-sizing: border-box;
  }
  .coinMobileBar .coinNavBtn,
  .coinMobileBar .tuningToggle,
  .interpOverlayClose {
    box-sizing: border-box;
    flex-shrink: 0;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(8,8,10,.88);
    color: #fff;
    font-weight: 600;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .1s, background .2s;
  }
  .coinNavBtn:hover,
  .tuningToggle:hover,
  .interpOverlayClose:hover {
    background: rgba(20,20,24,.92);
  }
  .coinNavBtn:active,
  .tuningToggle:active,
  .interpOverlayClose:active {
    transform: scale(0.97);
  }
  .coinNavBtn,
  .interpOverlayClose {
    width: 36px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .coinNavBtn:not(.tuningToggle) {
    font-size: 20px;
  }
  .coinNavIcon {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .tuningToggle {
    width: 36px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }
  .tuningPanel.open .tuningToggle {
    background: rgba(255,255,255,.12);
  }
  #appHeader .tuningPanel.open .tuningToggle {
    background: transparent;
  }

  .interpOverlay {
    display: none; position: absolute; z-index: 25;
    inset: 0; border-radius: inherit;
    pointer-events: none;
  }
  .interpOverlay.open { display: flex; pointer-events: auto; }
  .interpOverlaySheet {
    flex: 1; min-height: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: var(--mobile-card-bg);
    border: none;
    border-radius: inherit;
    box-shadow: none;
    overflow: hidden;
  }
  .interpOverlayHead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 0;
    padding: 10px 16px; border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.85);
    line-height: 1.2;
  }
  .interpOverlayHead span {
    flex: 1 1 auto; min-width: 0;
  }
  .interpOverlay .mobileInterp {
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; padding: 12px 14px 16px;
  }

  #appHeader {
    display: none;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    column-gap: 8px;
    padding:
      max(calc(env(safe-area-inset-top) + 10px), 28px)
      16px
      8px;
    box-sizing: border-box;
  }
  .appHeaderIcon {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s;
  }
  .appHeaderLeft {
    grid-column: 1;
    justify-self: start;
    width: 36px;
    height: 36px;
    position: relative;
    flex-shrink: 0;
  }
  .appHeaderLeft > .appHeaderIcon {
    position: absolute;
    inset: 0;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
  .appHeaderLandingBtn {
    visibility: hidden;
    pointer-events: none;
  }
  .appHeaderRight > .appHeaderLandingBtn {
    position: absolute;
    inset: 0;
  }
  .appHeaderIcon:active { opacity: .55; }
  .appHeaderIcon svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  #appHeaderLogo {
    grid-column: 2;
    justify-self: center;
    display: block;
    width: 72px;
    max-width: 72px;
    height: auto;
    margin: 0;
    filter: brightness(0) invert(1);
  }
  .appHeaderRight {
    grid-column: 3;
    justify-self: end;
    width: 36px;
    height: 36px;
    position: relative;
    flex-shrink: 0;
  }
  #vehicleToggle {
    visibility: hidden;
    pointer-events: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .appHeaderRight.showVehicleToggle #vehicleToggle {
    visibility: visible;
    pointer-events: auto;
  }
  #vehicleToggle .vehicleIcon {
    display: block;
    width: 22px;
    height: 22px;
    stroke: #fff;
    color: #fff;
  }
  #vehicleToggle .vehicleIconMoto { display: none; }
  #vehicleToggle.is-moto .vehicleIconAuto { display: none; }
  #vehicleToggle.is-moto .vehicleIconMoto { display: block; }
  #appHeader .tuningPanel {
    position: absolute;
    inset: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    top: auto;
    right: auto;
  }
  @media (min-width: 1050px) {
    #appHeader .tuningPanel {
      position: relative;
      inset: auto;
      width: 40px;
      min-height: 40px;
      height: auto;
      align-items: stretch;
      justify-content: flex-start;
    }
    #appHeader .tuningPanel.open {
      width: 520px;
      min-width: 520px;
      padding-top: 48px;
    }
    #appHeader > .tuningPanel {
      justify-content: flex-start;
      align-items: stretch;
    }
    #appHeader .tuningToggle {
      position: absolute;
      top: 0;
      right: 0;
      align-self: auto;
      flex-shrink: 0;
    }
  }
  #appHeader .tuningToggle {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #fff;
    flex-shrink: 0;
  }
  #appHeader > .tuningPanel {
    justify-content: center;
    align-items: center;
  }
  @media (min-width: 1050px) {
    #appHeader > .tuningPanel {
      justify-content: flex-start;
      align-items: stretch;
    }
  }
  #appHeaderClose {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .landingLogo {
    display: block;
    width: 72px;
    max-width: 72px;
    height: auto;
    filter: brightness(0) invert(1);
  }
  .landingCopy { display: none !important; }
  .landingInfoOverlay {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }
  .layout.info-open .landingInfoOverlay { display: flex; }
  .landingInfoSheet {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .landingInfoBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    color: #c8c8c8;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    scrollbar-width: thin;
  }
  .landingInfoTitle {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.35;
    color: rgba(255,255,255,.9);
    text-align: center;
  }
  .landingInfoBody p { margin: 0 0 10px; }
  .landingInfoBody p:last-child { margin-bottom: 0; }
  .landingInfoBody ul {
    margin: 0 0 14px;
    padding: 0 0 0 1.1em;
    list-style: none;
  }
  .landingInfoBody li { margin: 0 0 8px; }
  .landingInfoBody li::before { content: '− '; }
  .landingInfoFooter {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
    color: #c8c8c8;
    font-size: 14px;
    line-height: 1.6;
  }
  .landingInfoFooter a {
    color: rgba(255,255,255,.85);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .landingInfoSite {
    margin: 10px 0 0;
    letter-spacing: .08em;
    font-size: 12px;
    color: rgba(255,255,255,.55);
  }
  .landingHero {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 8px;
  }
  .landingHeroStack {
    position: relative;
    width: min(100%, 100vw, 62dvh);
    aspect-ratio: 1;
    flex-shrink: 1;
  }
  .landingHeroStack .landingHeroArt {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .landingHeroStack .landingHeroArtMoto { display: none; }
  body.vehicle-moto .landingHeroStack .landingHeroArtAuto { display: none; }
  body.vehicle-moto .landingHeroStack .landingHeroArtMoto { display: block; }
  .landingHeroStack img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  /* Mobile: full-bleed app shell */
  @media (max-width: 1049px) {
    :root {
      --app-header-h: calc(max(calc(env(safe-area-inset-top) + 10px), 28px) + 8px + 36px);
    }
    body.mobile-app-view {
      padding: 0;
      overflow: hidden;
      min-height: 100dvh;
      background: var(--landing-bg);
      background-color: var(--landing-bg-top);
    }
    body.mobile-app-view #appHeader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: grid;
      background: transparent;
    }
    body.mobile-app-view .layout {
      height: 100dvh;
      min-height: 100dvh;
      padding-top: var(--app-header-h);
      box-sizing: border-box;
    }
    .layout {
      max-width: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 0;
    }
    .cardAction { display: none; }
    .layout.step-form #formCardAction { display: flex; }
    .layout.step-coin #coinCardAction { display: flex !important; }
    .layout.step-landing #landingCardAction { display: flex !important; }
    .layout.step-form #landingCardAction,
    .layout.step-form #coinCardAction,
    .layout.step-coin #landingCardAction { display: none !important; }
    .layout.step-form aside,
    .layout.step-coin main,
    .layout.step-landing main {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      max-height: none;
      aspect-ratio: auto;
      order: 0;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
    .layout.step-form aside {
      padding: 0;
    }
    .layout.step-landing #appHeaderBack,
    .layout.step-landing #appHeader .tuningPanel,
    .layout.step-form #appHeader .tuningPanel {
      visibility: hidden;
      pointer-events: none;
    }
    .layout.step-form #vehicleToggle,
    .layout.step-landing #vehicleToggle {
      visibility: visible;
      pointer-events: auto;
    }
    .layout.step-landing #appHeaderLandingInfo {
      visibility: visible;
      pointer-events: auto;
    }
    .layout.step-form #appHeaderLandingInfo,
    .layout.step-coin #appHeaderLandingInfo {
      visibility: hidden;
      pointer-events: none;
    }
    .layout.step-landing.info-open main,
    .layout.step-landing.info-open #landingCardAction { display: none !important; }
    .layout.info-open #appHeaderBack,
    .layout.step-landing.info-open #appHeaderBack {
      visibility: visible;
      pointer-events: auto;
    }
    .layout.info-open #vehicleToggle,
    .layout.info-open #appHeaderLandingInfo {
      visibility: hidden;
      pointer-events: none;
    }
    .layout.step-form #appHeaderBack,
    .layout.step-coin #appHeaderBack,
    .layout.step-coin #appHeader .tuningPanel {
      visibility: visible;
      pointer-events: auto;
    }
    .layout.step-coin #vehicleToggle {
      visibility: hidden;
      pointer-events: none;
    }
    .layout.step-form .formCardMain {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 0 16px 8px;
      scrollbar-width: thin;
    }
    .layout.step-coin main {
      padding: 0;
      justify-content: stretch;
      align-items: stretch;
    }
    .layout.step-landing main {
      padding: 0;
      justify-content: stretch;
      align-items: stretch;
      min-height: 0;
      overflow: hidden;
    }
    .layout.step-landing aside { display: none; }
    .layout.step-landing #coinCardAction { display: none !important; }
    .layout.step-landing #landingCardAction { display: flex !important; }
    .layout.step-landing .interpOverlay { display: none !important; }
    .layout.step-landing .coinStage {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      padding: 0;
      min-height: 0;
      overflow: hidden;
    }
    .layout.step-landing .landingHero {
      display: flex;
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      max-height: none;
      min-height: 0;
      overflow: hidden;
      padding: 0;
      margin: 0;
      position: relative;
      align-items: stretch;
      justify-content: center;
    }
    .layout.step-landing .landingHeroStack {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: auto;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    .layout.step-landing .landingHeroStack img {
      transform: scale(1.6);
      transform-origin: center center;
    }
    .layout.step-landing #landingCardAction {
      flex: 0 0 auto;
    }
    .layout.step-landing .coinStage canvas { display: none; }
    .layout.step-landing #landingCardAction {
      flex-direction: column;
      gap: 0;
      justify-content: flex-start;
      min-height: auto !important;
      padding: 0 16px max(14px, env(safe-area-inset-bottom));
      margin: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .layout.step-form #formCardAction {
      flex-direction: column;
      gap: 14px;
      justify-content: flex-start;
      min-height: auto !important;
      padding: 12px 16px max(14px, env(safe-area-inset-bottom));
      margin: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .layout.step-coin #coinCardAction {
      flex-direction: column;
      gap: 0;
      justify-content: flex-end;
      min-height: auto !important;
      padding: 12px 16px max(14px, env(safe-area-inset-bottom));
      margin: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .layout.step-form #formCardAction .mobilePrimaryBtn,
    .layout.step-coin #coinCardAction .mobilePrimaryBtn,
    .layout.step-landing #landingCardAction .mobilePrimaryBtn {
      width: 100%;
      box-sizing: border-box;
      height: var(--mobile-btn-h) !important;
      min-height: var(--mobile-btn-h) !important;
      max-height: var(--mobile-btn-h) !important;
      border-radius: 999px;
      background: var(--mobile-field-bg);
      color: #fff;
      border: 1px solid var(--mobile-field-border);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-weight: 600;
    }
    .layout.step-form {
      --control-h: 42px;
      --field-gap: 10px;
    }
    .layout.step-form main { display: none; }
    .layout.step-coin aside { display: none; }
    .layout.step-form .formCardBottom { display: none; }
    .layout.step-form h1 {
      display: none;
    }
    .layout.step-form .hint { display: none; }
    .layout.step-form .field { margin-bottom: var(--field-gap); }
    .layout.step-form .field > label {
      font-size: 10px; margin-bottom: 4px; letter-spacing: .08em;
    }
    .layout.step-form input:not([type="date"]),
    .layout.step-form select {
      height: var(--control-h);
      padding: 0 12px;
      font-size: 16px;
      border-radius: 12px;
      background: var(--mobile-field-bg);
      border: 1px solid var(--mobile-field-border);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .layout.step-form input:not([type="date"]):focus,
    .layout.step-form select:focus {
      border-color: rgba(255,255,255,.32);
      background: var(--mobile-field-bg-focus);
    }
    .layout.step-form .dateInputWrap {
      background: var(--mobile-field-bg);
      border: 1px solid var(--mobile-field-border);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .layout.step-form .dateInputWrap:focus-within {
      border-color: rgba(255,255,255,.32);
      background: var(--mobile-field-bg-focus);
    }
    .layout.step-form .dateInputWrap.is-invalid {
      border-color: #ff7676;
      background: rgba(255, 80, 80, 0.1);
    }
    .layout.step-form .dateInputWrap.is-invalid:focus-within {
      border-color: #ff7676;
      box-shadow: 0 0 0 1px rgba(255, 118, 118, 0.35);
    }
    .layout.step-form .row { gap: 8px; }
    .layout.step-form .row.dt {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }
    .layout.step-form .row.dt input {
      flex: 1 1 0;
      min-width: 0;
      width: 0;
      padding: 0 8px;
    }
    .layout.step-form .row.dt input[type="date"] { flex: 1.65 1 0; }
    .layout.step-form .row.dt input[type="time"] { flex: 1 1 0; }
    .layout.step-form .dateInputWrap {
      height: var(--control-h);
      border-radius: 12px;
    }
    .layout.step-form .dateInputWrap input[type="date"] {
      padding: 0 12px;
      font-size: 16px;
      line-height: var(--control-h);
      background: transparent;
      border: none;
      color: #fff;
      color-scheme: dark;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .layout.step-form .dateInputWrap input[type="date"]:focus {
      background: transparent;
      border: none;
      outline: none;
      box-shadow: none;
    }
    .layout.step-form input[type="time"] { text-align: left; }
    .layout.step-form .row.dt input[type="date"],
    .layout.step-form .row.dt input[type="time"] { direction: ltr; }
    .layout.step-form .row:not(.dt):not(.prefix):not(.full) {
      grid-template-columns: minmax(0, 1fr) 76px;
    }
    .layout.step-form .fieldHint {
      font-size: 12px; line-height: 1.35;
      margin: 0 0 6px;
    }
    .layout.step-form .buttons .secondary { display: none; }
    .layout.step-form .buttons.export { display: none; }
    .layout.step-form .interpPanel { display: none !important; }
    .layout.step-coin.interp-open #coinCardAction { display: none !important; }
    .layout.step-coin {
      --coin-tuning-h: 182px;
    }
    .layout.step-coin .coinCardDock {
      position: relative;
      width: 100%;
      min-height: var(--mobile-btn-h);
      transition: min-height 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .layout.step-coin.tuning-open .coinCardDock {
      min-height: var(--coin-tuning-h);
    }
    .layout.step-coin .coinStage {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      min-height: 0;
    }
    .layout.step-coin #coinCardAction .mobilePrimaryBtn {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s;
    }
    .layout.step-coin.tuning-open #coinCardAction .mobilePrimaryBtn {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px) scale(0.98);
      pointer-events: none;
    }
    .layout.step-coin .coinCardDock .consentLine {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(var(--mobile-btn-h) + 10px);
      margin: 0;
      z-index: 1;
      pointer-events: none;
    }
    .layout.step-coin .coinCardDock .consentLine a { pointer-events: auto; }
    .layout.step-coin.tuning-open .coinCardDock .consentLine {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .layout.step-coin #coinCardAction .tuningBody {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      width: 100%;
      margin: 0;
      padding: 6px 8px;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      pointer-events: none;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 14px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      touch-action: manipulation;
      transform: translateY(10px) scale(0.985);
      transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s;
    }
    .layout.step-coin.tuning-open #coinCardAction .tuningBody {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .layout.interp-open #appHeader .tuningPanel {
      visibility: hidden;
      pointer-events: none;
    }
    .layout.interp-open #appHeaderClose,
    .layout.info-open #appHeaderClose {
      visibility: visible;
      pointer-events: auto;
    }
    .layout.interp-open .interpOverlayHead { display: none; }
    .layout.interp-open .mobileInterp {
      padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    }
    .layout.step-coin .coinNavBtn {
      flex-shrink: 0;
    }
    .layout.step-coin #appHeader .tuningPanel {
      position: absolute;
      inset: 0;
      top: auto;
      right: auto;
      width: 36px;
      height: 36px;
      max-width: none;
      margin: 0;
      z-index: 25;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .layout.step-coin #appHeader .tuningPanel.open {
      align-items: center;
    }
    .layout.step-coin .tuningToggle {
      width: 36px;
      height: 36px;
      padding: 0;
      border: none;
      background: transparent;
    }
    .layout.step-coin.tuning-open .tuningToggle {
      opacity: 1;
      background: rgba(255,255,255,.1);
      border-radius: 999px;
    }
    .layout.step-coin .interpOverlay {
      border-radius: 0;
    }
    .layout.step-coin .interpOverlaySheet {
      background: var(--landing-bg);
      background-color: var(--landing-bg-top);
      border: none;
      border-radius: 0;
    }
    .layout.step-coin .interpOverlayClose {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.22);
    }
    .layout.step-coin .interpOverlayClose:hover {
      background: rgba(255,255,255,.14);
    }
    .layout.step-coin .interpOverlayHead {
      padding:
        max(calc(env(safe-area-inset-top) + 8px), 24px)
        16px
        10px;
      border-bottom-color: rgba(255,255,255,.08);
    }
    .layout.step-coin #coinCardAction {
      position: relative;
    }
    .layout.step-coin #coinCardAction .tuningHead {
      margin-bottom: 0;
    }
    .layout.step-coin #coinCardAction .tuningHeadTitle {
      font-size: 11px;
    }
    .layout.step-coin #coinCardAction .tuningGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px 6px;
    }
    .layout.step-coin #coinCardAction .tuningRowWide { grid-column: 1 / -1; }
    .layout.step-coin #coinCardAction .tuningRow { margin-bottom: 0; }
    .layout.step-coin #coinCardAction .tuningRow label {
      font-size: 11px; margin-bottom: 0; letter-spacing: .03em;
      color: rgba(255,255,255,.42);
    }
    .layout.step-coin #coinCardAction .tuningRow label span {
      color: rgba(255,255,255,.55); font-size: 11px;
    }
    .layout.step-coin #coinCardAction .iosSlider {
      height: 26px;
    }
    .layout.step-coin #coinCardAction .tuningColors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
    }
    .layout.step-coin #coinCardAction .tuningColors .tuningRow label {
      font-size: 11px;
      margin-bottom: 1px;
      color: rgba(255,255,255,.42);
    }
    .layout.step-coin #coinCardAction .tuningRow input[type=color] {
      height: 28px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.18);
      background: transparent;
    }
    .layout.step-coin #coinCardAction .tuningIconBtn {
      width: 26px; height: 26px;
    }
    .layout.step-coin #coinCardAction .tuningIcon {
      width: 13px; height: 13px;
    }
    .coinNavBtn, .tuningToggle, .interpOverlayClose { z-index: 30; }
    .layout.step-form .cardAction #getInterpretation { display: none; }
    .layout.step-coin .cardAction #build { display: none; }
    .layout.step-coin .cardAction #error { display: none; }
    .mobileInterp {
      display: flex;
      flex-direction: column;
      gap: 10px;
      scrollbar-width: thin;
    }
  }

  body.embed-coin {
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    overflow: hidden;
  }
  body.embed-coin .layout {
    max-width: none;
    height: 100dvh;
    gap: 0;
  }
  body.embed-coin aside,
  body.embed-coin .cardAction,
  body.embed-coin #appHeader,
  body.embed-coin .landingCardAction,
  body.embed-coin #landingCardAction,
  body.embed-coin .landingHero,
  body.embed-coin .interpOverlay,
  body.embed-coin .landingInfoOverlay,
  body.embed-coin .layout.step-landing #landingCardAction,
  body.embed-coin .layout.step-landing #appHeader,
  body.embed-coin .layout.step-landing .landingHero { display: none !important; }
  body.embed-coin main,
  body.embed-coin .layout.step-landing main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    height: 100dvh !important;
    width: 100% !important;
    padding: 0 !important;
  }
  body.embed-coin .coinStage {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
  body.embed-coin .coinStage canvas,
  body.embed-coin .layout.step-landing .coinStage canvas,
  body.embed-coin #chart {
    display: block !important;
    visibility: visible !important;
  }
  body.embed-coin .coinStage canvas {
    transform: scale(2.35);
    transform-origin: 50% 50.5%;
  }
  body.qr-lab-embed .coinStage canvas {
    transform: scale(1.05);
    transform-origin: 50% 50%;
  }
  body.qr-lab-embed .tuningPanel { display: none !important; }

  #desktopStub {
    display: none;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: max(24px, env(safe-area-inset-top))
             max(24px, env(safe-area-inset-right))
             max(24px, env(safe-area-inset-bottom))
             max(24px, env(safe-area-inset-left));
    text-align: center;
    background: var(--landing-bg);
    background-color: var(--landing-bg-top);
  }
  #desktopStubLogo {
    width: min(200px, 60vw);
    height: auto;
    opacity: .92;
  }
  #desktopStubIcon {
    width: 56px;
    height: 56px;
    color: rgba(255,255,255,.35);
  }
  #desktopStubTitle {
    margin: 0;
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: rgba(255,255,255,.92);
  }
  #desktopStubText {
    margin: 0;
    max-width: 360px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,.55);
  }
  #desktopStubHint {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,.35);
  }
  /* TEMP: desktop stub disabled — re-enable to block desktop again */
  /* @media (min-width: 1050px) {
    body:not(.embed-coin) .layout { display: none !important; }
    body:not(.embed-coin) #desktopStub { display: flex; }
  } */

  /* Desktop layout overrides (must stay after mobile/base rules) */
  @media (min-width: 1050px) {
    body.desktop-layout .layout {
      position: relative;
      max-width: none;
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      display: grid;
      grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      gap: clamp(16px, 2vw, 32px);
      align-items: stretch;
    }
    body.desktop-layout.has-interpretation .layout {
      grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(300px, 400px);
    }
    body.desktop-layout aside {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      height: auto;
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 4px clamp(12px, 1.5vw, 20px) 16px;
    }
    body.desktop-layout aside .formCardMain,
    body.desktop-layout aside .formCardBottom {
      flex: 0 0 auto;
      min-height: auto;
    }
    body.desktop-layout main {
      grid-column: 2;
      grid-row: 1;
      order: 0;
      min-height: 0;
      height: 100%;
      max-height: none;
      aspect-ratio: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      align-items: stretch;
      justify-content: center;
    }
    body.desktop-layout .interpPanel {
      grid-column: 3;
      grid-row: 1;
      display: none;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 4px clamp(12px, 1.5vw, 20px) 16px;
      border-left: 1px solid var(--line);
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.15) transparent;
    }
    body.desktop-layout.has-interpretation .interpPanel {
      display: flex;
    }
    body.desktop-layout #appHeader {
      grid-column: 2;
      grid-row: 1;
      place-self: start end;
      position: relative;
      top: auto;
      right: auto;
      left: auto;
      width: max-content;
      height: max-content;
      margin: 16px 16px 0 0;
      z-index: 30;
      pointer-events: none;
      display: block !important;
      padding: 0;
    }
    body.desktop-layout #appHeader .appHeaderLeft,
    body.desktop-layout #appHeaderLogo,
    body.desktop-layout #appHeaderClose,
    body.desktop-layout .appHeaderLandingBtn {
      display: none !important;
    }
    body.desktop-layout #vehicleToggle {
      display: none !important;
    }
    body.desktop-layout .appHeaderRight.showVehicleToggle {
      display: none;
    }
    body.desktop-layout #appHeader .appHeaderRight {
      position: static;
      width: auto;
      height: auto;
      display: block;
    }
    body.desktop-layout #appHeader .tuningPanel {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
      inset: auto;
      width: 40px;
      min-height: 40px;
      height: auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      pointer-events: auto;
      margin: 0;
    }
    body.desktop-layout #appHeader .tuningPanel.open {
      width: 520px;
      min-width: 520px;
      padding-top: 48px;
    }
    body.desktop-layout #appHeader > .tuningPanel {
      justify-content: flex-start;
      align-items: stretch;
    }
    body.desktop-layout #appHeader .tuningToggle {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      align-self: auto;
      flex-shrink: 0;
    }
    body.desktop-layout #appHeader .tuningBody {
      width: 100%;
      min-width: 0;
      margin-top: 0;
      align-self: stretch;
    }
    body.desktop-layout #appHeader .tuningPanel.open .tuningToggle {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.22);
    }
    body.desktop-layout #appHeader .tuningGrid {
      gap: 8px 16px;
    }
    body.desktop-layout #desktopStub { display: none !important; }
    body.desktop-layout .formActions .buttons:first-of-type {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.desktop-layout #downloadQr:not([hidden]) {
      grid-column: 1 / -1;
    }
    body.desktop-layout .coinStage {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  body.desktop-layout .coinStage canvas,
  body.desktop-layout main canvas {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    object-position: center center;
  }
}