body { background:#000; color:#fff; }
.wrap { max-width:1100px; margin:0 auto; padding:12px 12px 90px; }

.topRow { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.pageTitle { margin:0; font-size:22px; }
.sectionTitle { font-size:18px; margin:10px 0; }
.divider { border-color:#1f1f1f; margin:16px 0; }

.muted { color:#a5a5a5; }
.small { font-size:13px; }
.tiny { font-size:12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#4ea1ff; }

.seg { display:inline-flex; border:1px solid #222; border-radius:10px; overflow:hidden; }
.seg button { padding:8px 12px; background:#0e0e0e; color:#bbb; border:0; cursor:pointer; }
.seg button.active { background:#1a1a1a; color:#fff; }

.grid { display:grid; gap:16px; }
.card { background:#0d0d0d; border:1px solid #1f1f1f; border-radius:14px; overflow:hidden; }
.card .body { padding:12px; }
.card .img { width:100%; height:320px; background:#1a1a1a; }
.card .img.contain { object-fit:contain; } /* ✅ no crop */
.title { font-weight:800; margin-bottom:4px; }
.h3 { margin:6px 0 6px; }

.row { display:flex; gap:10px; align-items:center; }
.row.between { justify-content:space-between; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.btn { border:1px solid #2a2a2a; background:#121212; color:#fff; border-radius:10px; padding:9px 12px; cursor:pointer; }
.btn.primary { background:#1a62ff; border-color:#295cff; }
.btn.danger { background:#7d1414; border-color:#a11e1e; }
.btn.warn { background:#a05a00; border-color:#b96c0a; }

.fab { position:fixed; left:16px; bottom:84px; z-index:1000; background:#1a62ff; border:0; color:#fff;
  border-radius:999px; padding:14px 16px; box-shadow:0 8px 24px rgba(0,0,0,.5); cursor:pointer; }

dialog { border:1px solid #2a2a2a; border-radius:14px; background:#0e0e0e; color:#fff; width:min(720px, 92vw); }
dialog::backdrop { background:rgba(0,0,0,.65); }

.dlgHead { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 14px 0; }
.dlgTitle { margin:0; font-size:18px; }
.dlgSub { margin-top:2px; font-size:12px; }

.iconBtn { border:1px solid #2a2a2a; background:#121212; color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; }

.form-grid { display:grid; gap:10px; padding:12px 14px 14px; }
input, textarea { background:#101010; border:1px solid #262626; color:#fff; border-radius:10px; padding:10px; }
label { font-size:13px; color:#bbb; display:grid; gap:6px; }

.fieldset { border:1px dashed #333; border-radius:12px; padding:10px; }
.error { background:#2a0000; border:1px solid #3a0a0a; color:#ffb3b3; border-radius:10px; padding:10px; margin:10px 14px 0; }

.payBox { padding:12px 14px 16px; }
.cardMount { padding:12px; border-radius:12px; border:1px solid #2a2a2a; background:#0b0b0b; }

.flyerViewer { display:grid; grid-template-columns: 44px 1fr 44px; align-items:center; gap:10px; padding:12px 14px 16px; }
.flyerImg { width:100%; max-height:78vh; object-fit:contain; background:#060606; border-radius:12px; border:1px solid #1f1f1f; }
.navBtn { border:1px solid #2a2a2a; background:#121212; color:#fff; border-radius:12px; padding:10px; cursor:pointer; font-size:20px; }

.dots { display:flex; justify-content:center; gap:8px; padding:0 14px 16px; }
.dot { width:10px; height:10px; border-radius:999px; border:1px solid #2a2a2a; background:#111; cursor:pointer; }
.dot.active { background:#1a62ff; border-color:#295cff; }