/* Sdílený vzhled nástrojů (Razítko /podpis, QR generátor /qrcode) — kostra stránky, karty, tlačítka, tarify, modaly. */
/* Původně inline <style> v podpis.php; přesunuto beze změn 2026-09-11. */

body { min-height: 100vh; }
.rz-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(20px,3vw,40px) clamp(16px,4vw,32px) 80px; }
.rz-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.rz-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; text-decoration: none; color: inherit; }
.rz-logo .bi { color: var(--color-accent, #f2b5c0); }
.rz-acct { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.rz-pill { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(242,181,192,.15); color: var(--color-accent, #f2b5c0); }
.rz-head { text-align: center; margin-bottom: clamp(24px,3vw,40px); }
.rz-head h1 { font-size: clamp(26px,4vw,42px); margin: 0 0 8px; }
.rz-head p { color: var(--color-text-secondary,#9aa); max-width: 600px; margin: 0 auto; }
.rz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,36px); align-items: start; }
@media (max-width: 920px){ .rz-grid { grid-template-columns: 1fr; } }
.rz-card { background: var(--color-surface, rgba(255,255,255,.04)); border: 1px solid var(--color-glass-border, rgba(255,255,255,.12)); border-radius: 20px; padding: clamp(18px,3vw,30px); }
.rz-sect { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent,#f2b5c0); font-weight: 700; margin: 22px 0 12px; }
.rz-sect:first-child { margin-top: 0; }
.rz-f { margin-bottom: 14px; }
.rz-f label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.rz-f input { width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); background:rgba(255,255,255,.03); color:inherit; font:inherit; font-size:14px; }
.rz-f input:focus { outline:none; border-color: var(--color-accent,#f2b5c0); }
.rz-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .rz-row{ grid-template-columns:1fr; } }
.rz-tpls { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:520px){ .rz-tpls{ grid-template-columns:repeat(2,1fr); } }
.rz-tpl { padding:12px 10px; border-radius:12px; cursor:pointer; text-align:left; background:rgba(255,255,255,.03); color:inherit; border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); transition:all .2s; }
.rz-tpl:hover { border-color: var(--color-accent,#f2b5c0); }
.rz-tpl.is-active { border-color: var(--color-accent,#f2b5c0); background:rgba(242,181,192,.12); }
.rz-tpl b { display:block; font-size:13px; }
.rz-tpl small { display:block; font-size:10.5px; color:var(--color-text-secondary,#9aa); margin-top:3px; line-height:1.3; }
.rz-tpl .rz-rec { display:inline-block; margin-top:6px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; }
/* Styl mimo tarif — vidí ho každý, ale nejde vybrat */
.rz-tpl.is-locked { opacity:.5; cursor:not-allowed; filter:saturate(.4); }
.rz-tpl.is-locked:hover { border-color: var(--color-glass-border,rgba(255,255,255,.15)); }
.rz-rec--lock { background:rgba(255,255,255,.10); color:var(--color-text-secondary,#9aa); }
.rz-tpl-upsell { margin-top:10px; font-size:12px; color:var(--color-text-secondary,#9aa); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rz-rec--mobile { background:rgba(56,248,242,.14); color:#38f8f2; }
.rz-rec--desktop { background:rgba(124,92,255,.18); color:#b9a8ff; }
.rz-rec--both { background:rgba(120,230,150,.15); color:#7fe6a0; }
.rz-seg { display:inline-flex; gap:4px; background:rgba(255,255,255,.04); padding:4px; border-radius:12px; }
.rz-seg button { padding:7px 14px; border-radius:9px; cursor:pointer; font:inherit; font-size:13px; font-weight:600; background:transparent; color:inherit; border:none; }
.rz-seg button.is-active { background:rgba(242,181,192,.18); color:var(--color-accent,#f2b5c0); }
.rz-color { display:flex; align-items:center; gap:12px; }
.rz-color input[type=color]{ width:48px; height:38px; padding:2px; border-radius:10px; border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); background:transparent; cursor:pointer; }
.rz-cmyk { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11px; color:var(--color-text-secondary,#9aa); }
.rz-cmyk input { width:52px; padding:6px 6px; border-radius:8px; border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); background:rgba(255,255,255,.03); color:inherit; font:inherit; font-size:12px; text-align:center; }
.rz-cmyk input:focus { outline:none; border-color: var(--color-accent,#f2b5c0); }
[data-theme="light"] .rz-cmyk input { background:#ffffff; }
.rz-upload { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rz-upload .rz-mini { font-size:12px; color:var(--color-text-secondary,#9aa); }
.rz-preview-wrap { position:sticky; top:18px; }
.rz-pl { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-secondary,#9aa); margin-bottom:10px; display:flex; justify-content:space-between; }
.rz-preview { background:#fff; border-radius:14px; padding:28px; min-height:130px; overflow-x:auto; box-shadow:0 20px 50px -30px rgba(0,0,0,.6); }
.rz-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.rz-btn { padding:12px 18px; border-radius:999px; cursor:pointer; font:inherit; font-size:14px; font-weight:600; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; transition:transform .2s; overflow:hidden; background-clip:padding-box; }
.rz-btn:hover{ transform:translateY(-2px); }
.rz-btn--primary{ background:linear-gradient(135deg,rgba(242,181,192,.95),rgba(92,31,47,.95)); color:#fff; }
.rz-btn--ghost{ background:rgba(255,255,255,.04); color:inherit; border-color:var(--color-glass-border,rgba(255,255,255,.18)); }
.rz-saved { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.rz-saved-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--color-glass-border,rgba(255,255,255,.1)); font-size:14px; }
.rz-saved-item .rz-link { cursor:pointer; color:var(--color-accent,#f2b5c0); background:none; border:none; font:inherit; }
/* oddělení sekcí (jejich nadpis je first-child → má margin-top:0) */
#rzSavedWrap{ margin-top:28px; }
.rz-guide{ margin-top:28px; }
.rz-guide details{ background:var(--color-surface,rgba(255,255,255,.04)); border:1px solid var(--color-glass-border,rgba(255,255,255,.12)); border-radius:14px; padding:4px 18px; margin-bottom:10px; }
.rz-guide summary{ cursor:pointer; font-weight:600; padding:14px 0; list-style:none; display:flex; gap:10px; align-items:center; }
.rz-guide summary::-webkit-details-marker{ display:none; }
.rz-guide ol{ margin:0 0 16px; padding-left:20px; color:var(--color-text-secondary,#9aa); font-size:14px; line-height:1.7; }
.rz-tarify{ margin-top:60px; }
.rz-tarify .faq-list{ margin-top:24px; }
.rz-tarify h2{ text-align:center; font-size:clamp(22px,3vw,32px); margin-bottom:8px; }
.rz-tarify > p{ text-align:center; color:var(--color-text-secondary,#9aa); margin-bottom:30px; }
.rz-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .rz-plans{ grid-template-columns:1fr; } }
.rz-plan{ background:var(--color-surface,rgba(255,255,255,.04)); border:1px solid var(--color-glass-border,rgba(255,255,255,.12)); border-radius:18px; padding:26px; display:flex; flex-direction:column; }
.rz-plan.is-current{ border-color:var(--color-accent,#f2b5c0); box-shadow:0 0 0 1px var(--color-accent,#f2b5c0) inset; }
.rz-plan h3{ margin:0 0 4px; font-size:20px; }
.rz-plan .rz-price{ font-size:24px; font-weight:700; margin-bottom:16px; color:var(--color-accent,#f2b5c0); }
.rz-plan ul{ list-style:none; padding:0; margin:0; font-size:14px; }
.rz-plan li{ padding:6px 0 6px 24px; position:relative; color:var(--color-text-secondary,#cdd); }
.rz-plan li::before{ content:"✓"; position:absolute; left:0; color:#7fe6a0; font-weight:700; }
.rz-plan .rz-cur-tag{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent,#f2b5c0); margin-bottom:10px; }
.rz-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:#16331f; color:#d6ffe0; padding:12px 22px; border-radius:999px; font-weight:600; font-size:14px; transition:all .3s; pointer-events:none; z-index:60; }
.rz-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.rz-toast.err{ background:#3a1620; color:#ffd6de; }
.rz-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:70; padding:20px; }
.rz-modal.show{ display:flex; }
.rz-modal-card{ background:#15151f; border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); border-radius:18px; padding:28px; width:100%; max-width:380px; }
.rz-modal-card h3{ margin:0 0 16px; }
.rz-modal .rz-tabs{ display:flex; gap:6px; margin-bottom:18px; }
.rz-modal .rz-tabs button{ flex:1; padding:9px; border-radius:10px; cursor:pointer; font:inherit; font-weight:600; background:rgba(255,255,255,.04); border:1px solid var(--color-glass-border,rgba(255,255,255,.12)); color:inherit; }
.rz-modal .rz-tabs button.is-active{ border-color:var(--color-accent,#f2b5c0); color:var(--color-accent,#f2b5c0); }
.rz-modal-close{ background:none; border:none; color:var(--color-text-secondary,#9aa); cursor:pointer; font-size:22px; float:right; }
/* světlý motiv – dorovnání míst s natvrdo tmavými hodnotami */
[data-theme="light"] .rz-f input,
[data-theme="light"] .rz-tpl,
[data-theme="light"] .rz-seg,
[data-theme="light"] .rz-saved-item,
[data-theme="light"] .rz-color input[type=color],
[data-theme="light"] .rz-modal-card{ background:#ffffff; }
[data-theme="light"] .rz-modal-card{ border-color:rgba(0,0,0,.12); }
[data-theme="light"] .rz-seg button.is-active,
[data-theme="light"] .rz-tpl.is-active{ background:rgba(242,181,192,.2); }

/* ---------- Doplňky sdílené kostry (2026-09-11) ---------- */
.rz-foot{ margin-top:60px; padding-top:22px; border-top:1px solid var(--color-glass-border,rgba(255,255,255,.12)); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--color-text-secondary,#9aa); }
.rz-foot p{ margin:0; }
.rz-foot p a{ color:inherit; text-decoration:none; }
.rz-foot p a:hover{ color:var(--color-accent,#f2b5c0); }
.rz-foot-links{ display:flex; gap:16px; flex-wrap:wrap; }
.rz-foot-links a{ color:inherit; text-decoration:none; }
.rz-foot-links a:hover{ color:var(--color-accent,#f2b5c0); }
.rz-plans--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .rz-plans--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .rz-plans--4{ grid-template-columns:1fr; } }
.rz-plan .rz-expiry{ display:block; font-size:11.5px; color:var(--color-text-secondary,#9aa); margin-top:4px; }
.rz-modal-err{ color:#ff8a9b; font-size:13px; margin:-6px 0 12px; display:none; }
.rz-modal-err.show{ display:block; }
.rz-link{ cursor:pointer; color:var(--color-accent,#f2b5c0); background:none; border:none; font:inherit; padding:0; }
.rz-lock-box{ margin-top:16px; padding:16px 18px; border-radius:14px; background:rgba(242,181,192,.08); border:1px solid rgba(242,181,192,.25); text-align:center; }
.rz-lock-box p{ margin:0 0 12px; font-size:13.5px; line-height:1.55; color:var(--color-text-secondary,#9aa); }
.rz-notice{ margin-top:12px; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5; background:rgba(127,230,160,.10); border:1px solid rgba(127,230,160,.28); }
.rz-notice--warn{ background:rgba(255,193,7,.10); border-color:rgba(255,193,7,.32); }
.rz-notice--err{ background:rgba(255,107,107,.10); border-color:rgba(255,107,107,.32); }

/* ---------- QR generátor (/qrcode) — sladění vnitřních prvků generátoru s kostrou Razítka ---------- */
.qr-tool .qr-type-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:0; }
@media (max-width:1100px){ .qr-tool .qr-type-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .qr-tool .qr-type-grid{ grid-template-columns:repeat(2,1fr); } }
.qr-tool .qr-type-btn{ padding:12px 10px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); color:inherit; font-size:13px; font-weight:600; gap:2px; transition:all .2s; }
.qr-tool .qr-type-btn:hover{ border-color:var(--color-accent,#f2b5c0); }
.qr-tool .qr-type-btn.active{ border-color:var(--color-accent,#f2b5c0); background:rgba(242,181,192,.12); }
.qr-tool .qr-type-btn i{ font-size:1.1rem; margin-bottom:2px; }
.qr-tool .qr-type-btn .qr-type-hint{ font-size:10.5px; font-weight:400; color:var(--color-text-secondary,#9aa); opacity:1; }
.qr-tool .qr-fields{ gap:14px; }
.qr-tool .qr-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:inherit; }
.qr-tool .qr-field input,
.qr-tool .qr-field textarea,
.qr-tool .qr-field select,
.qr-tool .rz-f select{ width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); background:rgba(255,255,255,.03); color:inherit; font:inherit; font-size:14px; }
.qr-tool .qr-field input:focus,
.qr-tool .qr-field textarea:focus,
.qr-tool .qr-field select:focus,
.qr-tool .rz-f select:focus{ outline:none; border-color:var(--color-accent,#f2b5c0); }
.qr-tool .qr-field input[type="file"],
.qr-tool .rz-f input[type="file"]{ padding:8px 10px; font-size:13px; }
.qr-tool .qr-field input[type="range"]{ padding:0; border:none; background:transparent; }
.qr-tool .qr-field select option,
.qr-tool .rz-f select option{ color:#111; }
.qr-tool .qr-hint-box{ margin:14px 0 0; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.5; background:rgba(255,255,255,.03); border:1px solid var(--color-glass-border,rgba(255,255,255,.12)); color:var(--color-text-secondary,#9aa); }
.qr-tool .qr-hint-box strong{ color:var(--color-accent,#f2b5c0); }
.qr-tool .qr-field-help{ display:block; margin-top:6px; font-size:12px; color:var(--color-text-secondary,#9aa); }
.qr-tool .qr-logo-preview{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.qr-tool .qr-logo-preview img{ width:56px; height:56px; object-fit:contain; background:#fff; border-radius:10px; padding:4px; }
.qr-tool .qr-logo-note{ font-size:12.5px; line-height:1.5; color:var(--color-text-secondary,#9aa); margin:0; }
.qr-tool .qr-logo-note strong{ color:var(--color-accent,#f2b5c0); }
.qr-tool .rz-preview{ display:flex; align-items:center; justify-content:center; padding:24px; }
.qr-tool .qr-canvas-wrap{ background:#fff; padding:0; min-width:0; min-height:240px; width:100%; display:flex; align-items:center; justify-content:center; }
.qr-tool .qr-canvas-wrap canvas.qr-output-canvas{ width:100%; max-width:300px; height:auto; aspect-ratio:1/1; }
.qr-tool .qr-preview-placeholder{ color:#999; font-size:14px; text-align:center; }
.qr-tool .qr-encoded-preview{ margin-top:12px; width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; word-break:break-all; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--color-glass-border,rgba(255,255,255,.12)); color:var(--color-text-secondary,#9aa); max-height:80px; overflow-y:auto; }
.qr-tool .qr-encoded-preview.is-trackable{ border-color:rgba(127,230,160,.4); color:inherit; }
.qr-tool .qr-track-notice{ margin:10px 0 0; padding:10px 12px; font-size:12.5px; line-height:1.5; border-radius:12px; background:rgba(127,230,160,.10); border:1px solid rgba(127,230,160,.28); color:inherit; }
.qr-tool .qr-track-notice .bi{ color:#7fe6a0; margin-right:4px; }
.qr-tool .qr-btn{ padding:12px 18px; border-radius:999px; cursor:pointer; font:inherit; font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.04); color:inherit; border:1px solid var(--color-glass-border,rgba(255,255,255,.18)); transition:transform .2s; }
.qr-tool .qr-btn:hover{ transform:translateY(-2px); border-color:var(--color-glass-border,rgba(255,255,255,.18)); }
.qr-tool .qr-btn-primary{ background:linear-gradient(135deg,rgba(242,181,192,.95),rgba(92,31,47,.95)); color:#fff; border-color:transparent; }
.qr-tool .qr-btn:disabled,
.qr-tool .rz-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
/* Uložené QR kódy pod náhledem */
.qr-tool .qr-save-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-bottom:12px; }
@media (max-width:520px){ .qr-tool .qr-save-row{ grid-template-columns:1fr; } }
.qr-tool .qr-save-row .rz-f{ margin:0; }
.qr-tool .qr-item{ padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--color-glass-border,rgba(255,255,255,.1)); font-size:14px; }
.qr-tool .qr-item.is-analytics-off{ opacity:.7; }
.qr-tool .qr-item-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.qr-tool .qr-item-head strong{ font-size:14px; }
.qr-tool .qr-item-meta{ display:block; font-size:12px; color:var(--color-text-secondary,#9aa); margin-top:2px; }
.qr-tool .qr-item-scans{ font-size:13px; color:var(--color-text-secondary,#9aa); white-space:nowrap; }
.qr-tool .qr-item-acts{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:13px; }
.qr-tool .qr-item-acts .rz-link.is-danger{ color:#ff8a9b; }
.qr-tool .qr-item-track{ margin-top:8px; font-size:11.5px; color:var(--color-text-secondary,#9aa); word-break:break-all; }
.qr-tool .qr-item-track code{ font-size:11px; color:inherit; }
.qr-tool .qr-mini-chart{ display:flex; align-items:flex-end; gap:2px; height:56px; margin-top:10px; }
.qr-tool .qr-mini-bar{ flex:1; display:flex; align-items:flex-end; height:100%; }
.qr-tool .qr-mini-bar span{ display:block; width:100%; min-height:2px; border-radius:3px 3px 0 0; background:var(--color-accent,#f2b5c0); }
.qr-tool .qr-portal-membership{ padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5; margin-bottom:12px; background:rgba(255,255,255,.04); border:1px solid var(--color-glass-border,rgba(255,255,255,.12)); }
.qr-tool .qr-portal-membership-warning{ background:rgba(255,193,7,.10); border-color:rgba(255,193,7,.32); }
.qr-tool .qr-portal-membership-lapsed{ background:rgba(255,107,107,.10); border-color:rgba(255,107,107,.32); }
/* Dar (kafe) */
.qr-tool .qr-donate{ margin-top:36px; padding:0; }
.qr-tool .qr-donate-inner{ box-shadow:none; }
/* Platební / dárcovský modal (generuje JS) — stejný vzhled jako rz-modal-card */
.qr-tool .qr-payment-modal-backdrop{ background:rgba(0,0,0,.6); }
.qr-tool .qr-payment-modal-panel{ background:#15151f; color:inherit; border:1px solid var(--color-glass-border,rgba(255,255,255,.15)); box-shadow:none; }
.qr-tool .qr-payment-modal-head{ border-bottom-color:var(--color-glass-border,rgba(255,255,255,.12)); }
.qr-tool .qr-payment-modal-head .qr-portal-close{ background:none; border:none; color:var(--color-text-secondary,#9aa); cursor:pointer; font-size:18px; padding:4px; }
.qr-tool .qr-payment-canvas{ background:#fff; padding:14px; border-radius:12px; width:fit-content; margin:0 auto 14px; }
.qr-tool .qr-payment-details li{ border-bottom-color:var(--color-glass-border,rgba(255,255,255,.1)); }
.qr-tool .qr-payment-details span:first-child,
.qr-tool .qr-payment-hint,
.qr-tool .qr-donate-modal-lead{ color:var(--color-text-secondary,#9aa); }
/* světlý motiv */
[data-theme="light"] .qr-tool .qr-type-btn,
[data-theme="light"] .qr-tool .qr-field input,
[data-theme="light"] .qr-tool .qr-field textarea,
[data-theme="light"] .qr-tool .qr-field select,
[data-theme="light"] .qr-tool .rz-f select,
[data-theme="light"] .qr-tool .qr-item,
[data-theme="light"] .qr-tool .qr-hint-box,
[data-theme="light"] .qr-tool .qr-encoded-preview,
[data-theme="light"] .qr-tool .qr-payment-modal-panel{ background:#ffffff; }
[data-theme="light"] .qr-tool .qr-type-btn.active{ background:rgba(242,181,192,.2); }
[data-theme="light"] .qr-tool .qr-payment-modal-panel{ border-color:rgba(0,0,0,.12); }
.rz-pill{ white-space:nowrap; }
.qr-tool #qrSavedWrap{ margin-top:28px; }
.qr-tool .qr-acct-mail{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }