/* QRing Link — design system (Apple-inspired, orange). Același limbaj vizual ca qring.click */
:root {
  --bg: #fbfbfd; --gray: #f5f5f7; --ink: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7;
  --orange: #ff7a00; --orange-ink: #d94f00;
  --grad: linear-gradient(135deg, #ffa31a 0%, #ff7a00 45%, #f05a00 100%);
  --btn: linear-gradient(180deg, #f26b0f 0%, #d94f00 100%);
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI",
          Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Thai",
          "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Malgun Gothic", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
svg { flex: none; }
button, input { font: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 22px; }
.wrap.narrow { max-width: 720px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(255,122,0,.55); outline-offset: 2px; border-radius: 10px; }

/* ---------- Bara de navigare ---------- */
.suggest { text-align: center; padding: 11px 20px; background: var(--gray); font-size: 14px; }
.suggest a { color: var(--orange-ink); font-weight: 600; text-decoration: none; }
.nav { position: sticky; top: 0; z-index: 30; background: rgba(251,251,253,.72);
       -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid rgba(0,0,0,.07); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 34px; height: 25px; color: var(--ink); }
.word { font-size: 20px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.word b { font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.word em { font-style: normal; font-weight: 500; color: var(--muted); letter-spacing: -.01em; }
.langmenu { position: relative; }
.langmenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
                    font-weight: 500; padding: 7px 12px; border-radius: 980px; transition: background .2s; }
.langmenu summary:hover, .langmenu[open] summary { background: rgba(0,0,0,.05); }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary svg { width: 17px; height: 17px; color: var(--muted); }
.langmenu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40; list-style: none; margin: 0; padding: 8px;
               border-radius: 18px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
               box-shadow: 0 24px 60px -18px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
               display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px;
               max-height: 70vh; overflow: auto; width: max-content; max-width: calc(100vw - 32px); }
.langmenu li a { display: block; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; }
.langmenu li a:hover { background: rgba(0,0,0,.05); }
.langmenu li a[aria-current] { background: var(--ink); color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: 72px 0 56px; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -2; left: 50%; top: -60px; width: min(1100px, 150vw); aspect-ratio: 1;
                transform: translateX(-50%) rotate(-7deg); background: var(--qr-bg) center / contain no-repeat; opacity: .05;
                -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(900px, 120vw); height: 560px;
               transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,140,0,.18), rgba(255,140,0,0)); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--orange-ink);
           background: rgba(255,122,0,.09); padding: 7px 14px; border-radius: 980px; }
.eyebrow svg { width: 16px; height: 16px; }
.display { font-size: clamp(38px, 6.6vw, 74px); font-weight: 700; line-height: 1.05; letter-spacing: -.038em; margin: 0 auto 20px; max-width: 15em; }
.display span { display: inline-block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
:lang(ja) .display, :lang(zh-Hans) .display, :lang(ko) .display, :lang(th) .display, :lang(ar) .display,
:lang(fa) .display, :lang(he) .display, :lang(hi) .display { letter-spacing: 0; line-height: 1.22; }
.lead { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.45; color: var(--muted); margin: 0 auto; max-width: 34em; }

/* ---------- Card aplicație ---------- */
.appcard { max-width: 640px; margin: 40px auto 0; text-align: start; padding: 26px 30px 30px;
           background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
           border-radius: 30px; box-shadow: 0 40px 90px -40px rgba(80,40,0,.35), 0 0 0 1px rgba(0,0,0,.05); }
.pane { animation: in .35s ease both; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 8px; }
.pane > label:first-child { margin-top: 0; }
input[type=text], input[type=url], input[type=search] {
  width: 100%; padding: 14px 16px; font-size: 17px; color: var(--ink); background: var(--gray);
  border: 1px solid transparent; border-radius: 14px; transition: background .15s, border-color .15s, box-shadow .15s; }
input::placeholder { color: #a1a1a6; }
input:focus { outline: none; background: #fff; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,0,.16); }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 2px 0; line-height: 1.45; }
.err { background: #fff2ec; color: #b42318; padding: 11px 14px; border-radius: 12px; font-size: 14px; margin: 0 0 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; font-size: 16px; font-weight: 600;
       border: 0; border-radius: 980px; cursor: pointer; text-decoration: none; background: var(--btn); color: #fff; white-space: nowrap;
       box-shadow: 0 8px 20px -8px rgba(217,79,0,.55); transition: transform .15s ease, filter .15s ease, opacity .15s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn svg { width: 18px; height: 18px; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--gray); filter: none; }
.btn.sm { padding: 10px 14px; font-size: 14px; }
.btn.wide { width: 100%; margin-top: 22px; padding: 16px 22px; font-size: 17px; }
.btn.wide { white-space: normal; text-align: center; line-height: 1.25; }
.btn.xl { padding: 19px 24px; font-size: 19px; }
.btn.loading { pointer-events: none; opacity: .75; }
.btn.loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
           color: var(--orange-ink); font-weight: 600; font-size: 15px; }
.linkbtn svg { width: 17px; height: 17px; }
.linkbtn.center { display: flex; margin: 18px auto 0; }

/* beneficii */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 56px auto 0; text-align: start; }
.tile { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 12px 30px -20px rgba(0,0,0,.18); }
.tile .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; margin-bottom: 16px;
            box-shadow: 0 8px 18px -8px rgba(255,110,0,.7); }
.tile .ic svg { width: 22px; height: 22px; }
.tile h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tile p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* secțiuni */
.section { padding-block: 96px; }
.section.alt { background: var(--gray); }
.section h2 { text-align: center; font-size: clamp(32px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 48px; }
:lang(ja) .section h2, :lang(zh-Hans) .section h2, :lang(ko) .section h2, :lang(ar) .section h2, :lang(fa) .section h2,
:lang(he) .section h2, :lang(hi) .section h2, :lang(th) .section h2 { letter-spacing: 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li { position: relative; background: #fff; border-radius: 26px; padding: 30px 28px 32px; font-size: 17px; line-height: 1.5; color: #424245; }
.steps .n { display: block; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.04em; margin-bottom: 14px;
            background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps .s-ic { position: absolute; top: 30px; inset-inline-end: 28px; width: 44px; height: 44px; border-radius: 13px; background: var(--gray);
               display: grid; place-items: center; color: var(--orange-ink); }
.steps .s-ic svg { width: 22px; height: 22px; }
.steps p { margin: 0; }
.faq .wrap { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
               padding: 24px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; flex: none; transition: transform .25s ease;
  background: linear-gradient(var(--orange-ink),var(--orange-ink)) center/14px 2px no-repeat, linear-gradient(var(--orange-ink),var(--orange-ink)) center/2px 14px no-repeat; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 24px; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 40em; }

footer.site { background: var(--gray); border-top: 1px solid rgba(0,0,0,.06); padding-block: 28px 40px; color: var(--muted); font-size: 12px; }
footer.site .row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
footer.site .row .word { font-size: 16px; color: var(--ink); }
footer.site .sister { margin: 0 0 16px; font-size: 13px; }
footer.site .sister a { color: var(--orange-ink); text-decoration: none; font-weight: 600; }
footer.site nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer.site nav a { text-decoration: none; color: #424245; }
footer.site nav a:hover { text-decoration: underline; }

.seg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--gray); border-radius: 14px; margin-bottom: 18px; }
.seg-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; padding: 10px 8px;
                   border-radius: 11px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.seg-tabs button svg { width: 18px; height: 18px; }
.seg-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg-tabs button.on svg { color: var(--orange-ink); }
.privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); margin: 16px 2px 0; line-height: 1.45; }
.privacy svg { width: 16px; height: 16px; margin-top: 1px; color: var(--green); }
footer.site .family { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; font-size: 13px; }
footer.site .family a { color: var(--orange-ink); text-decoration: none; font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 60;
         background: rgba(29,29,31,.92); color: #fff; padding: 11px 18px; border-radius: 980px; font-size: 14px; font-weight: 500;
         transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ===================== QRing Link ===================== */
:root { --green: #1a9f4b; --red: #b42318; --red-bg: #fff2ec; --yellow-bg: #fff6e5; --yellow-ink: #7a4b00; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 10px; }
.chips { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #424245; background: #fff;
            padding: 7px 13px 7px 10px; border-radius: 980px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.chips svg { width: 16px; height: 16px; color: var(--green); stroke-width: 2.6; }

/* generatorul: intrare în stânga, codul QR în dreapta (pe telefon unul sub altul) */
.appcard.gen { max-width: 940px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "in out" "foot foot";
               gap: 8px 34px; padding: 28px 32px 26px; scroll-margin-top: 72px; }
.appcard.gen:focus { outline: none; }
.gen-in { grid-area: in; min-width: 0; }
.gen-out { grid-area: out; min-width: 0; }
.gen-foot { grid-area: foot; border-top: 1px solid rgba(0,0,0,.07); margin-top: 14px; padding-top: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.gen-foot .privacy { margin-top: 14px; }
.gen-foot .privacy:nth-child(2) svg { color: var(--orange-ink); }

.seg-tabs.two { grid-template-columns: 1fr 1fr; }
.seg-tabs { display: grid; gap: 4px; padding: 4px; background: var(--gray); border-radius: 14px; margin-bottom: 18px; }
.seg-tabs button { color: var(--muted); }

.inrow { position: relative; }
.inrow input { padding-inline: 46px 44px; font-size: 18px; height: 56px; }
.in-ic { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.in-ic svg { width: 20px; height: 20px; display: block; }
.clear { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0;
         background: rgba(0,0,0,.08); color: var(--muted); cursor: pointer; font-size: 12px; display: grid; place-items: center; }
.clear:hover { background: rgba(0,0,0,.14); color: var(--ink); }
textarea { width: 100%; padding: 14px 16px; font: inherit; font-size: 17px; line-height: 1.45; color: var(--ink); background: var(--gray);
           border: 1px solid transparent; border-radius: 14px; resize: vertical; min-height: 128px; max-height: 420px; }
textarea::placeholder { color: #a1a1a6; }
textarea:focus { outline: none; background: #fff; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,0,.16); }
.counter { margin: 6px 4px 0; font-size: 12px; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; min-height: 1em; }
.counter.near { color: var(--orange-ink); font-weight: 600; }

/* mesaje: blocat / de verificat */
.msg:empty { display: none; }
.msg { margin-top: 14px; display: grid; gap: 10px; }
.blocked, .warns { border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.5; animation: in .25s ease both; }
.blocked { background: var(--red-bg); color: #7a1a10; box-shadow: inset 0 0 0 1px rgba(180,35,24,.18); }
.blocked strong, .warns strong { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.blocked strong { color: var(--red); }
.blocked strong::before, .warns strong::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; }
.blocked strong::before { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat; }
.warns strong::before { background: #f0a000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 19h.01'/%3E%3C/svg%3E") center/12px no-repeat; }
.blocked p { margin: 0; overflow-wrap: anywhere; }
.blocked .found { margin-top: 8px; font-size: 13px; color: #8a2a1e; }
.blocked code, .warns code { font: 12.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: rgba(255,255,255,.7); padding: 2px 6px; border-radius: 6px;
                             overflow-wrap: anywhere; unicode-bidi: plaintext; }
.warns { background: var(--yellow-bg); color: var(--yellow-ink); box-shadow: inset 0 0 0 1px rgba(240,160,0,.25); }
.warns strong { color: #6b4200; }
.warns ul { margin: 2px 0 0; padding-inline-start: 26px; display: grid; gap: 4px; }
.warns li { overflow-wrap: anywhere; }
.warns .linkbtn { margin: 0; padding: 0; font-size: 14px; display: inline; text-decoration: underline; text-underline-offset: 3px; }

/* stil */
.style { margin-top: 18px; border-radius: 16px; background: var(--gray); }
.style summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 600; font-size: 15px; border-radius: 16px; }
.style summary::-webkit-details-marker { display: none; }
.style summary svg { width: 19px; height: 19px; color: var(--orange-ink); }
.style summary .chev { margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
.style[open] summary .chev { transform: rotate(180deg); }
.style-body { padding: 0 16px 16px; display: grid; gap: 16px; }
.opt { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt legend { font-weight: 600; font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { position: relative; margin: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--c); cursor: pointer;
      box-shadow: 0 0 0 1px rgba(0,0,0,.12); transition: box-shadow .15s, transform .15s; }
.sw:hover { transform: scale(1.06); }
.sw input[type=radio] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw:has(input:checked), .sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--orange); }
.sw:has(input:focus-visible) { outline: 3px solid rgba(255,122,0,.55); outline-offset: 4px; }
.sw.custom { background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de, #ff3b30); overflow: hidden; }
.sw.custom input { position: absolute; inset: -8px; width: 50px; height: 50px; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.pills.four { grid-template-columns: repeat(4, 1fr); }
.pills label { margin: 0; position: relative; font-weight: 500; font-size: 14px; }
.pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pills span { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 8px 6px; border-radius: 9px; cursor: pointer; text-align: center;
              transition: background .15s, color .15s; color: #424245; }
.pills small { font-size: 11px; color: var(--muted); }
.pills input:checked + span { background: var(--ink); color: #fff; }
.pills input:checked + span small { color: rgba(255,255,255,.7); }
.pills input:focus-visible + span { outline: 3px solid rgba(255,122,0,.55); outline-offset: 1px; }
.note { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.note.bad { color: var(--red); font-weight: 600; }

/* previzualizare */
.qrstage { position: relative; aspect-ratio: 1; border-radius: 24px; background: #fff; display: grid; place-items: center; overflow: hidden;
           box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 24px 50px -30px rgba(0,0,0,.35); }
.qrstage.transparent { background: repeating-conic-gradient(#f0f0f2 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.qr-svg { width: 100%; height: 100%; padding: 6px; animation: pop .28s ease both; }
.qr-svg svg { width: 100%; height: 100%; display: block; }
@keyframes pop { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }
.qr-empty { display: grid; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: #a1a1a6; font-size: 14px; line-height: 1.4; }
.qr-empty svg { width: 64px; height: 64px; stroke-width: 1.4; color: #d2d2d7; }
.qrstage.blocked { background: #fff7f5; box-shadow: 0 0 0 1px rgba(180,35,24,.15); }
.qrstage.blocked .qr-empty svg { color: #f2b8b0; }
.contains { margin-top: 14px; display: grid; gap: 4px; }
.contains span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
:lang(ar) .contains span, :lang(fa) .contains span, :lang(he) .contains span, :lang(hi) .contains span, :lang(th) .contains span,
:lang(ja) .contains span, :lang(zh-Hans) .contains span, :lang(ko) .contains span { letter-spacing: 0; }
.contains code { font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--gray); padding: 8px 11px; border-radius: 10px;
                 overflow-wrap: anywhere; white-space: pre-wrap; max-height: 7.4em; overflow: auto; unicode-bidi: plaintext; }
.sizeinfo { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.gen-out .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.gen-out .actions .btn { padding: 11px 10px; font-size: 14px; white-space: normal; line-height: 1.2; text-align: center; }
.gen-out .actions .btn svg { width: 17px; height: 17px; }
.gen-out .actions .btn.ghost { flex-direction: column; gap: 4px; font-size: 12.5px; padding: 10px 6px; hyphens: auto; overflow-wrap: anywhere; }
.splitbtn { grid-column: 1 / -1; display: flex; border-radius: 980px; box-shadow: 0 8px 20px -8px rgba(217,79,0,.55); }
.splitbtn .btn { flex: 1; border-start-end-radius: 0; border-end-end-radius: 0; box-shadow: none; padding: 14px 16px !important; font-size: 16px !important; }
.splitbtn select { appearance: none; -webkit-appearance: none; border: 0; border-start-end-radius: 980px; border-end-end-radius: 980px; padding: 0 30px 0 14px;
                   font: 600 13px/1 var(--font); color: #fff; cursor: pointer; border-inline-start: 1px solid rgba(255,255,255,.3);
                   background: #c94900 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 12px no-repeat; }
.splitbtn select option { color: var(--ink); background: #fff; }
.splitbtn select:disabled, .btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.btn.ghost:disabled:hover { background: #fff; }
.hint.center { text-align: center; margin-top: 12px; }
.hint.center svg { width: 15px; height: 15px; color: var(--orange-ink); vertical-align: -3px; margin-inline-end: 5px; }

/* foaia de tipărit: doar codul QR și conținutul lui */
.print-sheet { display: none; }
@media print {
  @page { margin: 18mm; }
  body > *:not(.print-sheet) { display: none !important; }
  body { background: #fff; }
  .print-sheet { display: flex !important; flex-direction: column; align-items: center; gap: 8mm; padding-top: 20mm; }
  .print-sheet img { width: 90mm; height: 90mm; image-rendering: pixelated; }
  .print-sheet p { margin: 0; max-width: 150mm; font: 11pt/1.4 ui-monospace, Menlo, Consolas, monospace; color: #444; text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; }
}

@media (max-width: 860px) {
  .tiles, .steps { grid-template-columns: 1fr; }
  .tiles.six { grid-template-columns: 1fr 1fr; }
  .section { padding-block: 64px; }
  .section h2 { margin-bottom: 32px; }
  .appcard.gen { grid-template-columns: minmax(0, 1fr) 280px; gap: 8px 24px; padding: 24px; }
}
@media (max-width: 720px) {
  .appcard.gen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "out" "foot"; max-width: 560px; }
  .gen-out { margin-top: 14px; }
  .qrstage { max-width: 340px; margin: 0 auto; width: 100%; }
  .gen-foot { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding: 40px 0 40px; }
  .appcard.gen { padding: 18px 16px 20px; border-radius: 24px; margin-top: 28px; }
  .wrap { padding-inline: 16px; }
  .tiles.six { grid-template-columns: 1fr; }
  .chips li { font-size: 13px; }
  .gen-out .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .pills.four small { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }