:root{--bg:#f6f7f9;--fg:#1c1f24;--card:#fff;--line:#d9dde3;--acc:#0b63ce;--ok:#1a9b5a;--warn:#c0392b}
@media (prefers-color-scheme:dark){:root{--bg:#14171b;--fg:#e8eaed;--card:#1d2127;--line:#343a42;--acc:#5aa2ff}}
*{box-sizing:border-box}body{margin:0;font:15px system-ui,sans-serif;background:var(--bg);color:var(--fg)}
button,select,input{font:inherit;color:inherit}
button{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer}
button.on,button.primary{background:var(--acc);color:#fff;border-color:var(--acc)}
input,select{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:5px 8px;max-width:100%}
h1,h2,h3{margin:.4em 0}h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.home{max-width:560px;margin:0 auto;padding:24px 16px}.home a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin:12px 0;color:inherit;text-decoration:none}
.home a b{display:block;font-size:17px}
/* editor */
.app{display:grid;grid-template-columns:300px 1fr;height:100vh}
.side{overflow:auto;padding:10px;border-right:1px solid var(--line);background:var(--card)}
.side section{margin-bottom:14px}.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0}
.row label{min-width:70px;opacity:.8}
.main{display:flex;flex-direction:column;min-width:0}
.tabs{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line);background:var(--card);flex-wrap:wrap}
#stage{flex:1;position:relative;overflow:hidden;background:#cfd4da}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hint{position:absolute;left:8px;bottom:8px;background:#000a;color:#fff;padding:4px 8px;border-radius:6px;font-size:13px}
#qrpane{display:none;flex:1;overflow:auto;padding:12px}
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.qrcard{background:#fff;color:#000;border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;break-inside:avoid}
.qrcard img{width:170px;height:170px;image-rendering:pixelated}
.qrcard small{display:block;color:#555;word-break:break-all}
@media print{.side,.tabs,.noprint{display:none!important}.app{display:block;height:auto}#qrpane{display:block!important;overflow:visible}}
@media (max-width:760px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto}.side{max-height:45vh}#stage{height:70vh}}
/* viewer */
.v{max-width:640px;margin:0 auto;padding:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin:10px 0}
.card button{margin:3px 3px 3px 0}
#ar{position:fixed;inset:0;background:#000;display:none;z-index:10}
#ar video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#ar canvas{position:absolute;inset:0;width:100%;height:100%}
#arhud{position:absolute;left:0;right:0;top:0;padding:12px;color:#fff;background:linear-gradient(#000c,#0000);font-size:18px}
#arbtn{position:absolute;left:0;right:0;bottom:0;padding:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;background:linear-gradient(#0000,#000c)}
#scanvideo{width:100%;border-radius:8px;background:#000;max-height:50vh}