/* Ordinary form styling. Distinctive design would be a cue a bot could learn
   and would change how real people interact, biasing the comparison. */
:root{--ink:#1a1a1a;--muted:#6b6b6b;--line:#e2e2e2;--accent:#1f6fb2;--error:#c0392b;--star:#d9a300}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:#fff}
#app{max-width:34rem;margin:0 auto;padding:3rem 1.25rem 5rem}
h1{font-size:1.5rem;margin:0 0 .35rem}
h2{font-size:1.2rem;margin:0 0 .75rem}
.product{color:var(--muted);margin:0 0 2rem}
.panel[hidden],form[hidden]{display:none}
.field{border:0;margin:0 0 1.75rem;padding:0}
label,legend{display:block;font-weight:600;margin-bottom:.5rem;padding:0}
input[type=text],textarea{width:100%;font:inherit;color:inherit;background:#fff;
  padding:.6rem .7rem;border:1px solid var(--line);border-radius:6px}
textarea{resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.stars{display:flex;gap:.25rem}
.star{font-size:1.75rem;line-height:1;background:none;border:1px solid transparent;
  border-radius:6px;padding:.15rem .3rem;color:var(--line);cursor:pointer}
.star.on{color:var(--star)}
.star:hover{border-color:var(--line)}
.star:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.counter{font-size:.85rem;color:var(--muted);margin:.5rem 0 0}
.counter.ok{color:var(--muted)}
.error{color:var(--error);font-size:.9rem;margin:0 0 1rem}
.error[hidden]{display:none}
button{font:inherit;cursor:pointer;border-radius:6px;padding:.7rem 1.5rem}
.primary{background:var(--ink);border:1px solid var(--ink);color:#fff}
.primary:hover{background:#333;border-color:#333}
.primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-color-scheme:dark){
  :root{--ink:#ececec;--muted:#9a9a9a;--line:#3a3a3a;--error:#ef8b7f}
  body{background:#131313}
  input[type=text],textarea{background:#1c1c1c}
  .primary{background:#ececec;color:#131313;border-color:#ececec}
  .primary:hover{background:#fff;border-color:#fff}
}