:root{--bg:#f5f5f7;--fg:#1d1d1f;--card:#fff;--border:#d2d2d7;--muted:#86868b;--accent:#0071e3;--gap:16px}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;overflow:hidden}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}.app{justify-content:center;align-items:center;gap:var(--gap);height:100svh;padding:var(--gap);padding-top:calc(var(--gap) + env(safe-area-inset-top));padding-bottom:calc(var(--gap) + env(safe-area-inset-bottom));--col-size:min(100vw - 2 * var(--gap), 55svh, 360px);flex-direction:column;display:flex}.input-area{width:var(--col-size);flex:none;height:clamp(140px,28svh,240px);display:flex;position:relative}textarea{resize:none;border:1px solid var(--border);background:var(--card);width:100%;color:var(--fg);font:inherit;border-radius:14px;outline:none;flex:1;padding:14px 14px 34px;font-size:16px;line-height:1.5}textarea:focus{border-color:var(--accent)}.char-count{color:var(--muted);pointer-events:none;font-size:12px;position:absolute;bottom:10px;right:14px}.char-count.limit{color:#ff3b30}.qr-col{gap:var(--gap);flex-direction:column;flex:none;display:flex}.qr-area{width:var(--col-size);height:var(--col-size);background:var(--card);border:1px solid var(--border);border-radius:14px;justify-content:center;align-items:center;display:flex;overflow:hidden}#qr-canvas{display:block;width:100%!important;height:100%!important}#qr-canvas[hidden],.qr-placeholder[hidden]{display:none!important}.qr-placeholder{color:var(--muted);margin:0;font-size:14px}.save-btn{width:var(--col-size);background:var(--accent);color:#fff;font:inherit;cursor:pointer;border:none;border-radius:14px;flex:none;padding:12px;font-size:16px}.save-btn:active{opacity:.8}.save-btn[hidden]{display:none}@media (width>=768px){.app{flex-direction:row;max-width:900px;margin:0 auto}.input-area{width:auto;height:var(--col-size);flex:1}}