:root { --bg:#0e1116; --panel:#161b22ee; --line:#30363d; --txt:#e6edf3; --mut:#8b949e; --acc:#00e5ff; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--txt);
  font:15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; overflow:hidden; }
body.ar { background:transparent; }

#c { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

#ui { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#ui > header, #ui > #sheet { pointer-events:auto; }
#mid { flex:1; position:relative; pointer-events:none; }

header { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--line); }
header h1 { font-size:17px; margin:0; }

button { font:inherit; color:var(--txt); background:#21262d; border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:var(--acc); color:#001318; border-color:var(--acc); font-weight:600; }

#hint { position:absolute; left:50%; top:10px; transform:translateX(-50%); max-width:90%;
  padding:6px 12px; border-radius:999px; background:#000a; font-size:13px; text-align:center; }
#toast { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); max-width:90%;
  padding:8px 14px; border-radius:10px; background:#b3261e; opacity:0; transition:opacity .25s; font-size:14px; }
#toast.show { opacity:1; }

#sheet { background:var(--panel); border-top:1px solid var(--line); padding:10px 12px 14px;
  border-radius:16px 16px 0 0; max-height:55vh; overflow:auto; }

#chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.chip { white-space:nowrap; padding:7px 11px; border-radius:999px; font-size:13px; }
.chip.out { opacity:.55; border-style:dashed; }
.chip.in::after { content:" ✓"; color:var(--acc); }
.chip.sel { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset; }

#card h2 { margin:4px 0; font-size:17px; }
#card p { margin:4px 0; color:var(--mut); }
#cSpecs { color:var(--acc) !important; font-size:13px; }
#toggleBtn { width:100%; margin-top:8px; }

#actions { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
#actions label { margin-left:auto; color:var(--mut); font-size:13px; }

#arTools { display:none; gap:12px; align-items:center; margin-bottom:8px; }
body.ar #arTools { display:flex; }
#arTools input { vertical-align:middle; width:110px; }