/* ================================================================
   aiSnooker.app — Shared Design System
   All pages import this file.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --green:      #1db954;
  --green-d:    #0e8c3a;
  --green-l:    #4eff8c;
  --green-lo:   rgba(29,185,84,0.10);
  --green-glow: 0 0 28px rgba(29,185,84,0.30);
  --gold:       #f5c518;
  --gold-lo:    rgba(245,197,24,0.12);
  --red:        #e53935;
  --red-lo:     rgba(229,57,53,0.12);
  --blue:       #60a5fa;
  --white:      #f0f4f0;
  --off:        #8a9e8a;
  --bg:         #060d06;
  --bg2:        #0a140a;
  --bg3:        #0f1c0f;
  --panel:      #111a11;
  --panel2:     #162016;
  --border:     rgba(29,185,84,0.16);
  --border2:    rgba(255,255,255,0.08);
  --radius:     10px;
  --radius-sm:  6px;
  --nav-h: 62px;
  --font:       'Exo 2', sans-serif;
  --font-head:  'Rajdhani', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── SHARED NAV ───────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) 28px 0;
  background: rgba(6,13,6,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-decoration: none;
}
.nav-brand-row { display: flex; align-items: center; gap: 8px; }
.nav-brand-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;   /* makes black bg transparent on dark nav */
}
.nav-brand-text { display: none; }  /* logo already contains the name */
.nav-brand-sub {
  font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--off); margin-top: 2px;
}
/* Club branding to the LEFT of our logo on club sites */
.nav-brand .nav-club-name { font-weight: 700; font-size: 0.7rem; line-height: 1.1; color: #cdd8e8; letter-spacing: .3px; text-align: left; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-brand .nav-club-logo { height: 34px; width: auto; max-width: 84px; object-fit: contain; }
.nav-brand .nav-brand-div { width: 1px; height: 24px; background: var(--border); display: inline-block; opacity: .55; }
/* 慧眼ai — the Chinese brand (rendered as text so CJK glyphs are reliable) */
.nav-brand-zh { display: flex; align-items: center; gap: 8px; }
.nav-zh-mark { height: 40px; width: auto; object-fit: contain; mix-blend-mode: screen; }
.nav-zh-txt { font-size: 1.4rem; font-weight: 800; color: var(--white, #fff); letter-spacing: 1px; }
.nav-zh-txt b { color: var(--gold, #e9b949); font-weight: 800; }
.nav-lang { background: transparent; color: var(--off); border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; font-size: .8rem; cursor: pointer; }
.nav-lang option { background: #0a1120; color: #fff; }

.nav-links {
  display: flex; align-items: center; gap: 6px; list-style: none;
}
.nav-links a {
  padding: 6px 14px; border-radius: var(--radius-sm);
  color: var(--off); text-decoration: none;
  font-size: 0.88rem; font-weight: 500;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--white); background: var(--green-lo);
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.88rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: all 0.18s; white-space: nowrap;
}
.btn-primary {
  background: var(--green); color: #000;
  box-shadow: 0 3px 16px rgba(29,185,84,0.28);
}
.btn-primary:hover { background: var(--green-l); transform: translateY(-1px); }

.btn-outline {
  background: transparent; color: var(--white);
  border: 1px solid var(--border2);
}
.btn-outline:hover { border-color: var(--green); color: var(--green); background: var(--green-lo); }

.btn-ghost {
  background: var(--panel2); color: var(--white);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--green); background: var(--green-lo); }

.btn-danger {
  background: var(--red-lo); color: #fca5a5;
  border: 1px solid rgba(229,57,53,0.35);
}
.btn-danger:hover { background: rgba(229,57,53,0.22); }

.btn-sm { padding: 6px 13px; font-size: 0.8rem; }
.btn-lg { padding: 13px 28px; font-size: 1rem; }

/* ── PAGE WRAPPER ─────────────────────────────────────────── */
.page-body {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  min-height: 100vh;
}
/* Pages with custom content wrappers (not .page-body) get the same fixed-nav offset.
   main.<class> out-specifies the pages' inline `.<class>{padding:…}` shorthand. */
main.adm, main.cw, main.sw {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}
.container {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
}
.container-sm { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.container-xs { max-width: 480px; margin: 0 auto; padding: 0 24px; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.card:hover { border-color: rgba(29,185,84,0.28); }
.card-flat { background: var(--panel2); border-radius: var(--radius); padding: 20px 22px; }

/* ── SECTION LABELS ───────────────────────────────────────── */
.section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 3px;
  color: var(--green); text-transform: uppercase;
  margin-bottom: 10px;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
.text-green  { color: var(--green); }
.text-gold   { color: var(--gold); }
.text-off    { color: var(--off); }
.text-mono   { font-family: var(--font-mono); }

/* ── FORMS ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--off); letter-spacing: 0.4px; margin-bottom: 7px;
}
.form-control {
  width: 100%; padding: 10px 14px;
  background: var(--panel2); border: 1px solid var(--border);
  color: var(--white); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.93rem;
  outline: none; transition: border-color 0.2s;
  appearance: none;
}
.form-control:focus { border-color: var(--green); }
.form-control::placeholder { color: rgba(255,255,255,0.22); }
.form-control option { background: var(--panel2); }

/* ── BADGES ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
}
.badge-green { background: var(--green-lo); color: var(--green); border: 1px solid var(--border); }
.badge-gold  { background: var(--gold-lo);  color: var(--gold);  border: 1px solid rgba(245,197,24,0.25); }
.badge-red   { background: var(--red-lo);   color: #fca5a5;      border: 1px solid rgba(229,57,53,0.3); }
.badge-live  { background: var(--green-lo); color: var(--green); border: 1px solid var(--border); }
.badge-live::before {
  content: ''; width: 6px; height: 6px; background: var(--green);
  border-radius: 50%; animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.7); }
}

/* ── DIVIDER ──────────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.78rem; color: var(--off); margin: 18px 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert {
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 0.88rem; display: none;
}
.alert-error   { background: var(--red-lo); border: 1px solid rgba(229,57,53,0.3); color: #fca5a5; }
.alert-success { background: var(--green-lo); border: 1px solid var(--border); color: var(--green); }
.alert.show { display: block; }

/* ── PAGE HEADER ──────────────────────────────────────────── */
.page-header {
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.page-header-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.page-title { margin-bottom: 4px; }
.page-subtitle { color: var(--off); font-size: 0.92rem; line-height: 1.5; }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 28px;
  margin-top: 60px;
}
.site-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  font-size: 0.82rem; color: var(--off);
}
.site-footer-brand {
  display: flex; align-items: center; gap: 9px;
}
.site-footer-brand img { height: 28px; opacity: 0.7; }

/* ── SCOREBOARD SUB-NAV ───────────────────────────────────── */
.sb-subnav {
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--border2);
  padding: 0 24px;
}
.sb-subnav-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 2px; align-items: center; height: 42px;
  overflow-x: auto; scrollbar-width: none;
}
.sb-subnav-inner::-webkit-scrollbar { display: none; }
.sb-nav-link {
  padding: 6px 13px; border-radius: 6px;
  font-size: 0.83rem; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,0.55); white-space: nowrap;
  transition: all 0.18s;
}
.sb-nav-link:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.sb-nav-link.active { background: rgba(255,255,255,0.13); color: var(--white); }

/* ── MATCH CARD ───────────────────────────────────────────── */
.match-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.match-card:hover { border-color: rgba(29,185,84,0.3); }
.match-card-players {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600;
  margin-bottom: 5px;
}
.match-card-players .pa { color: var(--blue); }
.match-card-players .pb { color: var(--gold); }
.match-card-meta { font-size: 0.8rem; color: var(--off); line-height: 1.6; }
.match-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.match-card-score {
  font-family: var(--font-mono); font-size: 1.1rem;
  color: var(--white); letter-spacing: 1px;
}

/* ── TABLE GROUP HEADER ───────────────────────────────────── */
.table-group-head {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--green);
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 8px;
}
.table-group-head::after {
  content: ''; flex: 1; height: 1px; background: rgba(29,185,84,0.15);
}

/* ── MODAL ────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 9000; display: none; }
.modal.open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.65);
}
.modal-card {
  position: relative; z-index: 2;
  width: min(540px, calc(100vw - 24px));
  margin: 60px auto;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; }
.modal-close {
  background: none; border: none; color: var(--off);
  font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 2px 6px;
  border-radius: 4px; transition: color 0.2s;
}
.modal-close:hover { color: var(--white); }
.modal-body { padding: 18px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 0 18px 18px;
}

/* ── UTILITIES ────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.mt-1   { margin-top: 4px; }
.mt-2   { margin-top: 8px; }
.mt-3   { margin-top: 12px; }
.mt-4   { margin-top: 16px; }
.mt-6   { margin-top: 24px; }
.mb-2   { margin-bottom: 8px; }
.mb-3   { margin-bottom: 12px; }
.mb-4   { margin-bottom: 16px; }
.mb-6   { margin-bottom: 24px; }
.w-full { width: 100%; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.font-bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ── RESPONSIVE ───────────────────────────────────────────── */

/* ── Stat cards ────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .18s;
}
.stat-card:hover { border-color: rgba(29,185,84,.3); }
.stat-card .sv {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card .sl {
  font-size: .72rem;
  color: var(--off);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stat-card .sh {
  font-size: .68rem;
  color: var(--off);
  margin-top: 3px;
  line-height: 1.3;
}
.sv.green { color: var(--green); }
.sv.gold  { color: var(--gold); }
.sv.blue  { color: #60a5fa; }

@media (max-width: 700px) {
  .site-nav { padding: env(safe-area-inset-top, 0px) 16px 0; }
  .nav-links { display: none; }
  .container, .container-sm, .container-xs { padding: 0 14px; }
  .hide-mobile { display: none !important; }
  h1 { font-size: 2rem; }
  /* shrink the (wide) brand wordmark so it doesn't shove the club name off-screen */
  .nav-brand-logo { height: 34px; max-width: 56vw; }
  .nav-brand-sub { font-size: 0.6rem; letter-spacing: 1px; }
}

/* ── Hamburger (mobile nav) ──────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: all .25s; transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mob-only { display: none; }

@media (max-width: 700px) {
  .site-nav { flex-wrap: wrap; position: relative; }
  /* Nav is in-flow (relative) on mobile, so it already occupies its height at the
     top. Drop the fixed-nav offset here — otherwise content is pushed down a second
     nav-height, leaving a big empty gap under the nav on every page. */
  .page-body,
  main.adm, main.cw, main.sw { padding-top: 0; }
  .nav-hamburger { display: flex; }
  .nav-actions { display: none !important; }
  .nav-mob-only { display: block; }

  /* Dropdown panel — floats over page content */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 300;
    background: #fff;
    border-bottom: 3px solid var(--green);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    padding: 8px 0;
    order: 3;
  }
  .nav-links.nav-open { display: flex; }

  .nav-links li { width: 100%; list-style: none; }

  .nav-links a {
    display: block;
    padding: 14px 24px;
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background .12s;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a:hover,
  .nav-links a.active {
    background: #f0fdf4;
    color: #16a34a;
  }

  /* Sign out / admin inside menu */
  .nav-mob-only a {
    color: #555;
    font-weight: 500;
  }
  .nav-mob-only a[href*="logout"] {
    color: #dc2626;
  }
  /* Username label in menu */
  .nav-mob-only span {
    padding: 10px 24px 2px;
    display: block;
    font-size: .78rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid #f0f0f0;
  }
}

/* ══════════════════════════════════════════════════════════════
   v1.4 — dark native menus + colour polish
   ══════════════════════════════════════════════════════════════ */
:root { color-scheme: dark; }                 /* native selects/scrollbars/date-pickers render dark */

/* Dropdowns: dark option lists everywhere (incl. inline-styled selects) */
select { color-scheme: dark; }
select option, select optgroup { background: var(--panel2); color: var(--white); }

/* Focus glow on all form controls */
select:focus, input:focus, textarea:focus, .form-control:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px var(--green-lo);
  outline: none;
}

/* Nav: clearer, more colourful active / hover */
.nav-links a { position: relative; }
.nav-links a:hover  { color: var(--white);   background: var(--green-lo); }
.nav-links a.active { color: var(--green-l);  background: var(--green-lo); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--gold)); border-radius: 2px;
}

/* Primary buttons: gradient + lift */
.btn-primary { background: linear-gradient(135deg, var(--green-l), var(--green)); color: #05210f; }
.btn-primary:hover { background: linear-gradient(135deg, var(--green-l), #17a44a); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(29,185,84,0.42); }

/* Cards: hover glow; clickable cards lift */
.card { transition: border-color .18s, box-shadow .2s, transform .18s; }
.card:hover { border-color: rgba(29,185,84,0.38); box-shadow: 0 6px 24px rgba(0,0,0,0.32); }
a.card:hover, .admin-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 22px rgba(29,185,84,0.10); }
.admin-card { transition: border-color .18s, box-shadow .2s, transform .18s; }
.admin-card:hover { border-color: rgba(29,185,84,0.45); }

/* Badges: a touch more pop */
.badge { font-weight: 700; letter-spacing: .3px; }

/* ══ Admin pages — shared responsive layer ═══════════════════════════════════
   Every admin page carries its own <style> block with near-identical rules, and
   none of them handled narrow screens: wide data tables pushed the whole page
   sideways, grids stayed multi-column, and long values overflowed their cards.
   These rules live here so all 20 admin pages get the same behaviour without
   touching each file. Selectors are one level more specific than the per-page
   blocks (which are inline, so they win on a tie).                            */

/* Desktop: use the width that is there. Pages cap themselves at 960px while the
   rest of the site runs to 1100px, so wide tables were cramped for no reason. */
main.adm, main.cw, main.sw, .admin-wrap, .av-wrap { max-width: 1100px; }

/* A data table scrolls inside its own box instead of widening the page. */
main.adm table, main.cw table, main.sw table, .admin-wrap table, .av-wrap table { max-width: 100%; }

/* Nothing in a card may exceed it — long emails, keys and URLs were the usual
   culprits for a page that scrolled sideways on a phone. */
main.adm input, main.adm select, main.adm textarea,
main.cw input, main.cw select, main.cw textarea,
main.sw input, main.sw select, main.sw textarea,
.admin-wrap input, .admin-wrap select, .admin-wrap textarea,
.av-wrap input, .av-wrap select, .av-wrap textarea { max-width: 100%; box-sizing: border-box; }
main.adm code, main.cw code, main.sw code, .admin-wrap code, .av-wrap code { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  main.adm, main.cw, main.sw, .admin-wrap, .av-wrap { padding-left: 12px; padding-right: 12px; }

  /* display:block turns the table into its own scroll container. Columns no
     longer stretch to full width, which is the trade for the page not moving. */
  main.adm table, main.cw table, main.sw table, .admin-wrap table, .av-wrap table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  main.adm table th, main.adm table td, main.cw table th, main.cw table td,
  main.sw table th, main.sw table td, .admin-wrap table th, .admin-wrap table td,
  .av-wrap table th, .av-wrap table td { padding-left: 8px; padding-right: 8px; }

  /* Every admin page defines these; only a few collapsed them on mobile. */
  main.adm .grid2, main.adm .grid3, main.adm .grid4,
  main.cw .grid2, main.cw .grid3, main.sw .grid2, main.sw .grid3,
  .admin-wrap .grid2, .admin-wrap .grid3, .admin-wrap .grid4,
  .av-wrap .grid2, .av-wrap .grid3 { grid-template-columns: 1fr; }

  /* Action rows: wrap rather than run off the edge. */
  main.adm .flex, main.cw .flex, main.sw .flex, .admin-wrap .flex, .av-wrap .flex { flex-wrap: wrap; }
  main.adm .card, main.cw .card, main.sw .card, .admin-wrap .card, .av-wrap .card { padding: 14px; }
  main.adm h1, main.cw h1, main.sw h1, .admin-wrap h1, .av-wrap h1 { font-size: 1.5rem; }
  main.adm h2, main.cw h2, main.sw h2, .admin-wrap h2, .av-wrap h2 { font-size: 1.25rem; }
}