* { box-sizing: border-box; }
body {
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  margin: 0; background: #f4f5f7; color: #1d1f23; direction: rtl;
}
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; font-weight: 600; margin: 8px 0 16px; }
.muted { color: #6b6f76; }

/* shop picker */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.shopcard {
  display: block; background: #fff; border: 1px solid #e3e5e9; border-radius: 14px;
  padding: 18px; text-decoration: none; transition: border-color .15s;
}
.shopcard:hover { border-color: #2f6fed; }
.shopcard .nm { font-size: 19px; font-weight: 600; }
.bar { height: 8px; background: #eef0f3; border-radius: 6px; overflow: hidden; margin-top: 12px; }
.bar > i { display: block; height: 100%; background: #2f6fed; }
.namefield { margin: 14px 0 24px; }
.namefield input { font-size: 16px; padding: 10px 12px; border: 1px solid #d6d9de; border-radius: 10px; width: 280px; }

/* tag layout */
.cols { display: flex; gap: 20px; align-items: flex-start; }
.main { flex: 1 1 auto; min-width: 0; }
.side { flex: 0 0 260px; }
@media (max-width: 820px){ .cols{ flex-direction: column; } .side{ flex-basis:auto; width:100%; } }

.card { background: #fff; border: 1px solid #e3e5e9; border-radius: 16px; padding: 18px; }
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery .hero { width: 100%; max-height: 360px; object-fit: contain; background: #fafbfc; border-radius: 12px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid #e3e5e9; cursor: pointer; }
.thumbs img.active { border-color: #2f6fed; }
.noimg { background:#fafbfc; border:1px dashed #d6d9de; border-radius:12px; height:240px; display:flex; align-items:center; justify-content:center; color:#9aa0a8; }

.ptitle { font-size: 20px; font-weight: 600; margin: 14px 0 4px; }
.price { font-size: 16px; color: #1d8a52; font-weight: 600; }

.variant { border-top: 1px solid #eef0f3; padding: 14px 0; }
.variant:first-of-type { border-top: 0; }
.vlabel { font-size: 14px; font-weight: 600; margin-bottom: 8px; color:#3a3f47; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px){ .opts{ grid-template-columns: 1fr; } }
.opt { position: relative; border: 1px solid #d6d9de; border-radius: 10px; padding: 12px 12px; cursor: pointer; font-size: 14px; display:flex; align-items:center; gap:8px; background:#fff; }
.opt input { accent-color: #2f6fed; width:18px; height:18px; }
.opt:has(input:checked) { border-color: #2f6fed; background: #eef4ff; }
.opt.green:has(input:checked) { border-color:#1d8a52; background:#e8f6ee; }
.opt.amber:has(input:checked) { border-color:#c98a00; background:#fff6e3; }
.opt.gray:has(input:checked)  { border-color:#6b6f76; background:#f0f1f3; }
.hint { font-size: 12px; color:#9aa0a8; margin: 6px 2px 0; }
.bc { margin-top: 10px; }
.bc input { font-size: 16px; padding: 11px 12px; border: 1px solid #2f6fed; border-radius: 10px; width: 100%; letter-spacing: 1px; font-family: ui-monospace, monospace; }
.submit { margin-top: 18px; }
.submit button { font-size: 17px; font-weight: 600; background: #2f6fed; color:#fff; border:0; border-radius: 12px; padding: 14px 22px; cursor: pointer; width:100%; }
.submit button:active { transform: scale(.99); }
.err { background:#fdecec; color:#b42318; border:1px solid #f3c0bd; padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:14px; }

/* leaderboard */
.lb { background:#fff; border:1px solid #e3e5e9; border-radius:16px; padding:16px; position: sticky; top: 16px; }
.lb h2 { font-size:16px; margin:0 0 12px; }
.lbrow { display:flex; align-items:center; gap:8px; padding:7px 0; font-size:14px; }
.lbrow .rank { width:20px; color:#9aa0a8; font-weight:600; }
.lbrow .nm { flex:1; }
.lbrow.me { font-weight:700; color:#2f6fed; }
.lbrow .pct { color:#6b6f76; font-variant-numeric: tabular-nums; }
.progress-top { font-size:14px; color:#6b6f76; margin-bottom:10px; }

/* login + edit + mine additions */
.editbadge { display:inline-block; background:#fff6e3; color:#8a5a00; border:1px solid #f0d28a; border-radius:8px; padding:4px 10px; font-size:13px; margin-bottom:10px; }
.bcnote { color:#6b6f76; font-weight:400; font-size:13px; }
.myrow { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e3e5e9; border-radius:12px; padding:10px 12px; margin-bottom:8px; text-decoration:none; color:inherit; }
.myrow:hover { border-color:#2f6fed; }
.myrow img, .myimg-x { width:48px; height:48px; border-radius:8px; object-fit:cover; background:#fafbfc; border:1px solid #e3e5e9; flex:0 0 auto; }
.myinfo { flex:1; min-width:0; }
.mytitle { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
optgroup { font-weight:700; }

/* admin */
.tbl { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e3e5e9; border-radius:12px; overflow:hidden; font-size:14px; }
.tbl th, .tbl td { text-align:right; padding:9px 10px; border-bottom:1px solid #eef0f3; }
.tbl th { background:#f7f8fa; font-weight:600; font-size:13px; color:#3a3f47; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tr.lazy { background:#fff6f5; }
.flag { background:#fdecec; color:#b42318; border:1px solid #f3c0bd; border-radius:6px; padding:1px 7px; font-size:11px; }
.rthumb { width:40px; height:40px; object-fit:cover; border-radius:6px; border:1px solid #e3e5e9; }
.btn { display:inline-block; border:1px solid #d6d9de; background:#fff; border-radius:8px; padding:6px 12px; font-size:13px; cursor:pointer; text-decoration:none; color:inherit; }
.btn:hover { border-color:#2f6fed; }
.btn.danger { border-color:#f3c0bd; color:#b42318; }
.btn.danger:hover { background:#fdecec; }
.chip { display:inline-block; border:1px solid #d6d9de; border-radius:20px; padding:5px 12px; font-size:13px; text-decoration:none; color:inherit; margin-inline-start:4px; }
.chip.on { background:#2f6fed; color:#fff; border-color:#2f6fed; }