/* Shared look for the 20 Oct feedback option pages (local files, opened in the browser). */
:root { --bg:#14121c; --card:#1f1c2b; --card2:#272338; --ink:#f4f0e6; --dim:#a9a3b8; --gold:#ffc531; --pink:#ff4fa3;
  --blue:#2f7bff; --teal:#18c3b0; --orange:#ff8a1f; --line:#332e44; --ok:#3ddc84; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:var(--gold); }
.wrap { max-width:1440px; margin:0 auto; padding:0 20px; }
header.page { padding:24px 0 6px; }
header.page h1 { margin:0 0 6px; font-size:26px; letter-spacing:.4px; }
header.page .sub { color:var(--dim); max-width:980px; }
nav.toc { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
nav.toc a { text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); padding:5px 10px; border-radius:999px; font-size:13px; }
nav.toc a.done { border-color:var(--gold); color:var(--gold); }
section.q { margin:34px 0 10px; scroll-margin-top:12px; }
section.q > h2 { margin:0 0 4px; font-size:20px; }
section.q > .why { color:var(--dim); margin:0 0 14px; max-width:1000px; }
.now { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:12px; margin-bottom:14px; }
.now h4 { margin:0; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); }
.now img { width:100%; border-radius:8px; display:block; }
.now .pair { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:10px; }
.opts { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:14px; }
.opt { position:relative; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:12px 12px 14px; cursor:pointer; transition:border-color .12s, transform .12s; }
.opt:hover { border-color:#4a4462; }
.opt.picked { border-color:var(--gold); box-shadow:0 0 0 3px #ffc53133; }
.opt .letter { position:absolute; top:10px; left:12px; width:28px; height:28px; border-radius:50%; background:var(--card2); display:grid; place-items:center; font-weight:800; }
.opt.picked .letter { background:var(--gold); color:#1a1600; }
.opt h3 { margin:2px 0 8px 38px; font-size:16px; min-height:28px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rec { font-size:11px; font-weight:800; letter-spacing:.6px; color:#1a1600; background:var(--gold); padding:2px 7px; border-radius:999px; }
.opt .vis { background:#0b0a10; border-radius:10px; overflow:hidden; margin-bottom:10px; }
.opt .vis svg, .opt .vis img, .opt .vis canvas { display:block; width:100%; height:auto; }
.opt p { margin:4px 0; color:var(--dim); font-size:14px; }
.opt .pro::before { content:"+ "; color:var(--ok); font-weight:800; }
.opt .con::before { content:"\2212 "; color:var(--pink); font-weight:800; }
.opts.multi .opt .letter { border-radius:6px; }
.note { background:var(--card2); border-left:3px solid var(--gold); padding:10px 14px; border-radius:6px; color:var(--ink); margin:12px 0; max-width:1100px; }
.bar { position:fixed; left:0; right:0; bottom:0; z-index:20; background:#0d0b14f2; border-top:1px solid var(--line); padding:10px 16px; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.bar .picks { font-size:14px; max-width:1100px; }
.bar .picks b { color:var(--gold); }
.bar button { background:var(--gold); color:#1a1600; border:0; border-radius:8px; padding:8px 14px; font-weight:800; cursor:pointer; }
.bar .ok { color:var(--ok); font-size:13px; display:none; }
body { padding-bottom:90px; }
.zoom { position:fixed; inset:0; background:#000d; display:none; align-items:center; justify-content:center; z-index:30; cursor:zoom-out; padding:20px; }
.zoom img { max-width:100%; max-height:100%; border-radius:8px; }
.zoom.on { display:flex; }
img.z { cursor:zoom-in; }
@media (max-width:600px) { .opts { grid-template-columns:minmax(0,1fr); } header.page h1 { font-size:21px; } }