/* GriGsi QR — paste a link/code on one device, scan with another. */
:root{
  --bg:#EEF1EF; --surface:#FFFFFF; --ink:#16201E; --muted:#5E6B68; --line:#D5DCDA;
  --accent:#0F6B66; --accent-ink:#FFFFFF;
  --display:"Unbounded", "Golos Text", system-ui, sans-serif;
  --body:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0F1514; --surface:#18201F; --ink:#E6ECEA; --muted:#93A19D; --line:#2A3533;
  --accent:#3FB8AE; --accent-ink:#06201E; color-scheme:dark}
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  padding:max(14px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}

.app.qrapp{max-width:560px;margin:14px auto 0;display:flex;flex-direction:column;gap:12px}
.qr-head h1{font-family:var(--display);font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--ink)}
.qr-head h1 span{color:var(--accent)}
.sub{margin:0;color:var(--muted);font-size:14px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0;font-weight:600}

.qrmain label{font-weight:600;font-size:14px}
.qrmain textarea{width:100%;resize:vertical;min-height:70px;font:15px var(--body);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.qrmain textarea:focus{outline:2px solid var(--accent);outline-offset:1px}

.qrbtns{display:flex;gap:8px;flex-wrap:wrap}
.qrbtns button, .qractions button, .qractions .btn-like{
  font:600 14px var(--body);color:var(--accent-ink);background:var(--accent);border:0;
  border-radius:999px;padding:9px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.qrbtns button.ghost{background:none;color:var(--muted);border:1px solid var(--line)}
.qractions [hidden]{display:none}

.qrresult{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding-top:4px}
.qrresult[hidden]{display:none}
.qr{background:#fff;padding:12px;border-radius:14px;display:inline-block;line-height:0;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.qr img{display:block;width:auto;height:auto;max-width:100%}
.qrcaption{margin:0;color:var(--muted);font-size:13px}
.qractions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

.qrempty{color:var(--muted);font-size:14px;text-align:center;padding:18px 8px}

.rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink);font-size:14px}
.faint{margin:0;color:var(--muted);font-size:12.5px}