/* Snipers Sports Academy — mobile-first, dependency-free CSS. */
:root {
  --ink:#15202b; --muted:#5b6b7a; --line:#e2e8f0; --bg:#f6f8fb;
  --brand:#e8581c; --brand-d:#c8460f; --ok:#1f9d55; --okbg:#e6f6ee;
  --err:#d23b3b; --errbg:#fdeaea; --warn:#b7791f; --warnbg:#fdf6e3;
  --card:#fff; --radius:12px; --shadow:0 1px 3px rgba(16,24,40,.08);
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5; font-size:16px;
}
a { color:var(--brand-d); }

/* Header / footer */
.site-header {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.75rem 1rem; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:.5rem; font-weight:700; text-decoration:none; color:var(--ink); }
.brand-mark { font-size:1.3rem; }
.site-footer { text-align:center; color:var(--muted); padding:2rem 1rem; }
.topnav { display:flex; gap:.25rem; flex-wrap:wrap; }
.topnav a { padding:.4rem .6rem; border-radius:8px; text-decoration:none; color:var(--muted); font-size:.92rem; }
.topnav a:hover, .topnav a.active { background:var(--bg); color:var(--ink); }

/* Layout container */
.container { max-width:760px; margin:0 auto; padding:1rem; }
.container.wide { max-width:1080px; }

/* Cards */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.25rem; margin-bottom:1rem;
}
.card h2 { margin-top:0; }
h1 { font-size:1.5rem; } h2 { font-size:1.2rem; }
.muted { color:var(--muted); }
.right { text-align:right; }

/* Forms */
label { display:block; font-weight:600; margin:.75rem 0 .25rem; font-size:.95rem; }
input, select, textarea {
  width:100%; padding:.7rem .75rem; border:1px solid var(--line); border-radius:10px;
  font-size:16px; background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand); border-color:var(--brand); }
.req:after { content:" *"; color:var(--err); }
.hint { color:var(--muted); font-size:.85rem; margin-top:.25rem; }
fieldset { border:1px solid var(--line); border-radius:10px; padding:1rem; margin:0 0 1rem; }
legend { font-weight:700; padding:0 .4rem; }

/* Buttons */
.btn {
  display:inline-block; padding:.7rem 1.1rem; border-radius:10px; border:1px solid transparent;
  background:var(--brand); color:#fff; font-weight:600; font-size:1rem; cursor:pointer;
  text-decoration:none; text-align:center;
}
.btn:hover { background:var(--brand-d); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-block { width:100%; }
.btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ok { background:var(--ok); } .btn-ok:hover { filter:brightness(.95); }
.btn-danger { background:var(--err); }
.btn-sm { padding:.4rem .7rem; font-size:.9rem; }
.btn-wa { background:#25d366; color:#073; }

/* Flash + alerts */
.flash, .alert { padding:.75rem 1rem; border-radius:10px; margin-bottom:1rem; border:1px solid; }
.flash-success, .alert-ok  { background:var(--okbg); border-color:#bfe6cf; color:#13653a; }
.flash-error, .alert-err   { background:var(--errbg); border-color:#f3c2c2; color:#8f2020; }
.flash-info, .alert-info   { background:#eaf2fd; border-color:#cfe0f7; color:#1a4d8f; }
.alert-warn { background:var(--warnbg); border-color:#f0e0b0; color:#7a5510; }

/* Tables */
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.table-wrap { overflow-x:auto; }

/* Badges */
.badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.78rem; font-weight:600; }
.badge-ok { background:var(--okbg); color:#13653a; }
.badge-warn { background:var(--warnbg); color:#7a5510; }
.badge-err { background:var(--errbg); color:#8f2020; }
.badge-muted { background:var(--bg); color:var(--muted); }

/* Grid helpers */
.grid2 { display:grid; gap:1rem; }
@media (min-width:600px){ .grid2 { grid-template-columns:1fr 1fr; } }
.stat { display:flex; flex-direction:column; gap:.2rem; }
.stat .n { font-size:1.6rem; font-weight:700; }

/* Pay box */
.pay-amount { font-size:2rem; font-weight:800; color:var(--brand-d); }
.qr { max-width:240px; width:100%; border:1px solid var(--line); border-radius:10px; }
.kv { display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; border-bottom:1px dashed var(--line); }
.msgbox { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.75rem; font-size:.9rem; }
.inline-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }