:root { --blue:#1f6feb; --ink:#111; --muted:#666; --bg:#fff; --line:#ddd; --ok:#1a7f37; --warn:#b54708; --bad:#c0392b; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); font:18px/1.4 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2; }
h1 { font-size:22px; margin:0; }
h2 { font-size:26px; margin:0 0 8px; }
p { margin:0 0 16px; color:var(--muted); }
nav { display:flex; gap:4px; }
nav .tab { display:inline-block; width:auto; margin:0; background:none; border:0; border-bottom:3px solid transparent; border-radius:0; font-size:18px; padding:12px 14px; min-height:56px; color:var(--muted); }
nav .tab.active { color:var(--blue); font-weight:700; border-bottom:3px solid var(--blue); }
.pane { padding:20px 16px 40px; max-width:560px; margin:0 auto; }
label { display:block; font-weight:700; margin:18px 0 6px; }
textarea, input[type=password] { width:100%; font:inherit; padding:14px; border:2px solid var(--line); border-radius:12px; min-height:56px; }
textarea:focus, input:focus { outline:none; border-color:var(--blue); }
button, .primary, .secondary { display:block; width:100%; font:inherit; font-size:20px; min-height:56px; border-radius:14px; border:2px solid var(--line); background:#f6f8fa; color:var(--ink); padding:14px; margin-top:14px; text-align:center; text-decoration:none; cursor:pointer; }
.primary { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700; }
.primary.big { font-size:24px; min-height:72px; }
.secondary { background:#fff; }
button:disabled { opacity:.4; }
.thumbs { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.thumbs img { width:96px; height:96px; object-fit:cover; border-radius:12px; border:2px solid var(--line); }
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.choices button { margin:0; font-size:18px; }
.choices button span { display:block; font-size:22px; font-weight:700; }
.choices button.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.price-big { font-size:56px; font-weight:800; text-align:center; margin:4px 0 12px; }
.bar { height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:6px; }
.bar div { height:100%; width:0; background:var(--ok); transition:width .2s; }
.bar div.warn { background:var(--warn); } .bar div.bad { background:var(--bad); }
.toggle { display:flex; align-items:center; gap:14px; min-height:56px; font-weight:400; }
.toggle input { width:28px; height:28px; }
.banner { margin:12px 16px 0; padding:14px; border-radius:12px; background:#fde8e8; color:var(--bad); font-weight:700; }
.spinner { width:56px; height:56px; border:6px solid var(--line); border-top-color:var(--blue); border-radius:50%; margin:60px auto 24px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.listed { list-style:none; padding:0; margin:0; }
.listed li { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.listed img { width:72px; height:72px; object-fit:cover; border-radius:10px; }
.listed a { color:var(--blue); font-weight:700; text-decoration:none; }
.listed .price { margin-left:auto; font-weight:800; }
.danger { background:var(--bad); color:#fff; border-color:var(--bad); }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin-top:8px; }
.actions button { margin:0; }
.actions > :only-child { grid-column: 1 / -1; }
.sr-only { position:absolute; left:-9999px; }