: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:flex-start;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{--circle-size:20px;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;padding:12px 14px 14px;padding-right:calc(14px + var(--circle-size) + 8px);border-radius:14px;outline:none;flex:1;padding-bottom:34px;font-size:16px;line-height:1.5}textarea:focus{border-color:var(--accent)}.clear-btn{--touch-size:44px;--circle-inset:calc((var(--touch-size) - var(--circle-size)) / 2);top:calc(14px - var(--circle-inset));right:calc(14px - var(--circle-inset));width:var(--touch-size);height:var(--touch-size);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.clear-btn:before{content:"";inset:var(--circle-inset);background:#ddd;border-radius:50%;transition:transform .1s,opacity .1s;position:absolute}.clear-btn svg{width:8px;height:8px;position:relative}.clear-btn:active:before{opacity:.7;transform:scale(.9)}.clear-btn[hidden]{display:none}.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;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden}#qr-image{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}#qr-image[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;justify-content:center;max-width:900px;margin:0 auto}.input-area{width:auto;height:var(--col-size);flex:1}.qr-col{height:var(--col-size)}}