/* ═══════════════════════════════════════════════════════════════════════
   JagChess — Core design system
   Light-first, tactile, rounded. Shared by the student + admin consoles.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────── */

/* The same system as the homepage (welcome.css): white paper, ink type,
   and one colour per part of a club. Ink does the work of "primary" —
   buttons, the selected tab, the thing you're on — so colour is free to
   mean something: coral is meetings, iris is puzzles, sky is games, rose
   is tournaments, mint is points and anything that went right, gold is
   the club itself.

   The --green names are kept because hundreds of rules use them for
   "primary" and "selected"; they now resolve to ink. Real success colour
   is --mint. */

:root {
  --ink:          #1a1d24;
  --ink-hi:       #2c303a;

  --green:        var(--ink);
  --green-hi:     var(--ink-hi);
  --green-dark:   var(--ink);
  --green-soft:   #f0f2f6;
  --green-ink:    var(--ink);

  --mint:         #18bf86;
  --mint-dark:    #0a8a5e;
  --mint-soft:    #e3fbf1;

  --blue:         #2d8cff;
  --blue-dark:    #1a6fd6;
  --blue-soft:    #eaf3ff;

  --purple:       #6e5bff;
  --purple-dark:  #4a37e0;
  --purple-soft:  #efedff;

  --orange:       #ff6a4d;
  --orange-dark:  #d9472b;
  --orange-soft:  #fff0ec;

  --gold:         #e9a93a;
  --gold-dark:    #8f600b;
  --gold-soft:    #fff4dd;

  --rose:         #f0508c;
  --rose-dark:    #c21d5f;
  --rose-soft:    #ffe8f1;

  --red:          #ef4444;
  --red-dark:     #c62828;
  --red-soft:     #feeceb;

  --teal:         var(--mint);
  --teal-soft:    var(--mint-soft);

  /* the one dark surface: ink, not felt */
  --felt:         #1a1d24;
  --felt-2:       #121419;
  --felt-text:    #eef0f4;

  /* neutrals, cool and quiet */
  --bg:           #fbfbfd;
  --card:         #ffffff;
  --surface:      #f7f8fa;
  --surface-2:    #f1f3f7;
  --border:       #e8ebf0;
  --border-2:     #dde1e8;
  --text:         #1a1d24;
  --text-2:       #4a5160;
  --muted:        #7b8394;
  --faint:        #b0b6c2;

  /* sidebar */
  --nav-bg:       #fbfbfd;
  --nav-bg-2:     #fbfbfd;
  --nav-text:     #4a5160;
  --nav-text-hi:  #1a1d24;
  --nav-active:   #ffffff;
  --nav-rule:     #eef0f4;
  --topbar-bg:    rgba(251,251,253,0.74);

  /* legacy aliases kept so older rules resolve to the new palette */
  --primary:      var(--ink);
  --accent:       #2d8cff;
  --shadow:       0 1px 2px rgba(26,29,36,0.04), 0 10px 28px -12px rgba(26,29,36,0.14);
  --radius:       16px;

  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  --lift:      0 1px 2px rgba(26,29,36,0.06);
  --lift-card: 0 1px 2px rgba(26,29,36,0.03), 0 10px 30px -18px rgba(26,29,36,0.16);
  --pop:       0 30px 70px -22px rgba(26,29,36,0.32), 0 6px 18px rgba(26,29,36,0.06);
  --glass:     rgba(255,255,255,0.66);

  --font:      'Geist', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:   'Geist', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  /* What a newsletter is written in, and what the email it becomes is set
     in. The stack ends on faces every machine has, because no mail client
     is obliged to fetch a webfont and Gmail never does. */
  --font-mail: 'PT Serif', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', Times, serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.5,.64,1);
}

/* Dark stays available from the theme switch. Ink can't be "primary" on
   a dark page, so there it hands the job to sky. */
[data-theme="dark"] {
  --bg:        #0e1015;
  --card:      #16181e;
  --surface:   #1b1e25;
  --surface-2: #22252d;
  --border:    #2a2e37;
  --border-2:  #353a45;
  --text:      #eef0f4;
  --text-2:    #aab0bc;
  --muted:     #858c99;
  --faint:     #5d6370;
  --nav-bg:    #121419;
  --nav-bg-2:  #121419;
  --nav-text:  #aab0bc;
  --nav-text-hi: #eef0f4;
  --nav-active: #22252d;
  --nav-rule:  #1f222a;
  --topbar-bg: rgba(14,16,21,0.74);
  --glass:     rgba(22,24,30,0.7);
  --ink:       #2d8cff;
  --ink-hi:    #4a9dff;
  --green-dark:  #8cc0ff;
  --green-ink:   #8cc0ff;
  --green-soft:  rgba(45,140,255,0.16);
  --mint-soft:   rgba(24,191,134,0.15);
  --mint-dark:   #4fe0aa;
  --blue-soft:   rgba(45,140,255,0.16);
  --purple-soft: rgba(110,91,255,0.18);
  --orange-soft: rgba(255,106,77,0.15);
  --gold-soft:   rgba(233,169,58,0.15);
  --rose-soft:   rgba(240,80,140,0.16);
  --red-soft:    rgba(239,68,68,0.16);
  --lift:      0 1px 2px rgba(0,0,0,0.3);
  --lift-card: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -14px rgba(0,0,0,0.55);
  --pop:       0 30px 70px -20px rgba(0,0,0,0.65);
}

/* ── THE WORDMARK ────────────────────────────────────────────────────
   The lion mark and the name set in type, the same as the homepage. It
   lives here because this is the one stylesheet the hub, the guide and
   the legal pages all load.
   ─────────────────────────────────────────────────────────────────── */

.hub-logo, .doc-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand-mark-img { width: 28px; height: 28px; flex: none; display: block; }
.brand-word { font: 700 17px/1 var(--font); letter-spacing: -0.035em; color: var(--text); white-space: nowrap; }

/* ── RESET / BASE ───────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* flex/grid display rules must never resurrect a hidden element */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}

a { color: var(--blue); text-decoration: none; }

::selection { background: rgba(45,140,255,.2); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── APP SHELL ──────────────────────────────────────────────────────── */

/* the shell owns the viewport; only .app-main scrolls, so the sidebar
   can never scroll away and leave a gap beneath it */
.app {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-main {
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

/* drawer scrim — fixed at every width so it never joins the grid */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(12,32,42,0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}

/* ── SIDEBAR ────────────────────────────────────────────────────────── */

.sidebar {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(178deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
  color: var(--nav-text);
  padding: 20px 14px 14px;
  z-index: 60;
  overflow: hidden;
}

/* faint board texture in the sidebar */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(rgba(255,255,255,0.022) 0% 25%, transparent 0% 50%) 0 0 / 44px 44px;
  pointer-events: none;
}
.sidebar > * { position: relative; z-index: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 10px 22px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--green-hi), var(--green-dark));
  box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4), inset 0 1px 0 rgba(255,255,255,0.35);
  display: grid;
  place-items: center;
  font-size: 21px;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
}

.brand-text { min-width: 0; }

.brand h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}

.brand-role {
  display: block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255,255,255,0.42);
  margin-top: 1px;
}

.nav-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -4px;
  padding: 0 4px 8px;
  scrollbar-width: thin;
}
.nav-scroll::-webkit-scrollbar { width: 6px; }
.nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border: none; }

.nav-group + .nav-group { margin-top: 18px; }

.nav-group-label {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255,255,255,0.3);
  padding: 0 12px 8px;
}

.tabs { display: flex; flex-direction: column; gap: 3px; }

.tab {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--nav-text);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}

.tab[hidden] { display: none; }

.tab svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  stroke-width: 1.9;
  opacity: .85;
  transition: transform .28s var(--ease);
}

.tab span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tab:hover { background: rgba(255,255,255,0.07); color: #fff; }
.tab:hover svg { transform: translateY(-1px) scale(1.06); }

.tab.active {
  background: var(--nav-active);
  border-color: rgba(255,255,255,0.13);
  color: #fff;
}
.tab.active svg { opacity: 1; color: var(--green-hi); }

.tab-badge {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--green);
  color: #06340a;
}
.tab-badge.blue { background: var(--blue); color: #05293a; }
.tab-badge.live {
  background: var(--red);
  color: #fff;
  animation: pulse-live 1.8s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  60%      { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}

/* sidebar footer */
.nav-foot {
  border-top: 1px solid var(--nav-rule);
  padding-top: 10px;
  margin-top: 6px;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 13px;
  transition: background .18s var(--ease);
}
.nav-user:hover { background: rgba(255,255,255,0.06); }

.nav-user-info { min-width: 0; flex: 1; }

.nav-user-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-user-mail {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-foot-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.nav-mini {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.nav-mini:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); }
.nav-mini svg { width: 15px; height: 15px; }
.nav-mini.icon-only { flex: 0 0 40px; }

/* ── TOPBAR ─────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-head { min-width: 0; flex: 1; }

.topbar-title {
  font-family: var(--font);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.topbar-title .dim { color: var(--muted); font-weight: 700; }

.topbar-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 1px;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}
.menu-btn svg { width: 20px; height: 20px; }

/* stat chips in the topbar */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}
.chip svg { width: 17px; height: 17px; }
.chip small {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}
.chip.gold   { color: var(--gold-dark);   background: var(--gold-soft);   border-color: rgba(255,200,0,0.32); }
.chip.orange { color: var(--orange-dark); background: var(--orange-soft); border-color: rgba(255,150,0,0.28); }
.chip.blue   { color: var(--blue-dark);   background: var(--blue-soft);   border-color: rgba(45,140,255,0.28); }

/* ── CONTAINER / SECTIONS ───────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 26px 30px 60px;
  flex: 1;
}

.section { display: none; }
.section.active { display: block; animation: section-in .32s var(--ease) both; }

@keyframes section-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.grid { display: grid; gap: 16px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.danger { color: var(--red); }

/* ── CARDS ──────────────────────────────────────────────────────────── */

.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--lift-card);
}

.tile h3, .tile h4 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 14px;
}

.list { display: grid; gap: 8px; }

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 11px 14px;
  font-size: 14px;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 28px 12px;
}

/* ── BUTTONS ────────────────────────────────────────────────────────── */

.btn {
  --btn-shadow: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.012em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4);
  transition: transform .08s var(--ease), box-shadow .08s var(--ease),
              background .16s var(--ease), border-color .16s var(--ease), filter .16s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn.primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  --btn-shadow: var(--green-dark);
  text-shadow: none;
}
.btn.primary:hover { background: var(--green-hi); border-color: var(--green-hi); }

.btn.blue {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  --btn-shadow: var(--blue-dark);
}
.btn.blue:hover { filter: brightness(1.06); }

.btn.subtle {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-2);
}
.btn.subtle:hover { color: var(--text); border-color: var(--border-2); }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-2);
}
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.ghost:active { transform: none; }

.btn.danger,
.btn.subtle.danger {
  color: var(--red-dark);
  background: var(--card);
  border-color: rgba(239,68,68,0.35);
  --btn-shadow: rgba(239,68,68,0.28);
}
.btn.danger:hover { background: var(--red-soft); }

.btn.sm { padding: 6px 12px; font-size: 12.5px; border-radius: 999px; box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4); }
.btn.sm:active { transform: scale(.97); }
.btn.lg {
  padding: 14px 28px;
  font-size: 16px;
  border-radius: 999px;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4);
}
.btn.lg:active { transform: scale(.98); }
.btn.block { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.icon-btn svg { width: 17px; height: 17px; }

.filter-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  border-radius: 999px;
  padding: 6px 15px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.filter-btn:hover { border-color: var(--border-2); color: var(--text); }
.filter-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

/* ── FORMS ──────────────────────────────────────────────────────────── */

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(45,140,255,0.14);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; line-height: 1.6; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238296a4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}
select option { background: var(--card); color: var(--text); }

/* ── CUSTOM SELECT (ui-select.js) ───────────────────────────────────── */

.jc-select { position: relative; width: 100%; }

/* the real <select> stays for scripts to read — just out of sight */
.jc-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.jc-select-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.jc-select-btn:hover { border-color: var(--border-2); }
.jc-select-btn:focus-visible,
.jc-select.open .jc-select-btn {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(45,140,255,0.14);
}
.jc-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-select.is-placeholder .jc-select-label { color: var(--faint); }
.jc-select-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .24s var(--ease);
}
.jc-select.open .jc-select-btn svg { transform: rotate(180deg); }

.jc-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 120;
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.jc-select.up .jc-select-menu {
  top: auto;
  bottom: calc(100% + 7px);
  transform-origin: bottom center;
  transform: translateY(6px) scale(.98);
}
.jc-select.open .jc-select-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.jc-select-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.jc-select-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-select-opt svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0; color: var(--green-dark); }
.jc-select-opt:hover:not(:disabled) { background: var(--surface-2); }
.jc-select-opt.on { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.jc-select-opt.on svg { opacity: 1; }
.jc-select-opt:disabled { opacity: .45; cursor: not-allowed; }

label {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-2);
  margin-bottom: 6px;
}

.form-inline { display: grid; gap: 12px; }

input[type="checkbox"] { width: auto; accent-color: var(--green); }
input[type="color"] { padding: 2px; }

input[type="date"], input[type="time"] { font-family: var(--font-ui); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  padding: 4px;
  border-radius: 7px;
  opacity: .45;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--surface-2);
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ── TAGS & BADGES ──────────────────────────────────────────────────── */

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--surface-2);
  color: var(--text-2);
}

.tag-classic    { background: var(--gold-soft);   color: #a37c00; }
.tag-tournament { background: var(--blue-soft);   color: #0f7fb5; }
.tag-practice   { background: var(--mint-soft); color: var(--mint-dark); }
.tag-meeting    { background: var(--orange-soft); color: #b56b00; }
.tag-lesson     { background: var(--purple-soft); color: var(--purple-dark); }
.tag-match      { background: var(--red-soft);    color: #cf3838; }

[data-theme="dark"] .tag-classic    { color: #ffd84d; }
[data-theme="dark"] .tag-tournament { color: #6fd0ff; }
[data-theme="dark"] .tag-practice   { color: #93e35c; }
[data-theme="dark"] .tag-meeting    { color: #ffb54d; }
[data-theme="dark"] .tag-lesson     { color: #c79cff; }
[data-theme="dark"] .tag-match      { color: #ff8f8f; }

/* ── CALENDAR ───────────────────────────────────────────────────────── */

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}

.calendar-card { display: grid; gap: 14px; }

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-title {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.day-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 92px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  transition: border-color .15s, background .15s;
}
.day-cell:hover { border-color: var(--border-2); background: var(--surface); }
.day-cell.is-outside { opacity: .42; }
.day-cell.is-today {
  border-color: var(--green);
  background: var(--green-soft);
}

.day-num {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.day-cell.is-today .day-num { color: var(--green-dark); }

.day-events { display: grid; gap: 3px; }

.event-pill {
  display: block;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 3px 7px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text-2);
  transition: filter .14s, transform .12s var(--ease);
}
.event-pill:hover { transform: translateX(1px); filter: brightness(.96); }

/* tag colors must beat the .event-pill default fill */
.event-pill.tag-classic    { background: var(--gold-soft);   color: #a37c00; }
.event-pill.tag-tournament { background: var(--blue-soft);   color: #0f7fb5; }
.event-pill.tag-practice   { background: var(--mint-soft); color: var(--mint-dark); }
.event-pill.tag-meeting    { background: var(--orange-soft); color: #b56b00; }
.event-pill.tag-lesson     { background: var(--purple-soft); color: var(--purple-dark); }
.event-pill.tag-match      { background: var(--red-soft);    color: #cf3838; }

.events-side { display: grid; gap: 14px; align-content: start; }
.events-side-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.events-side-header h3 { margin: 0; }
.list-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.show-all-btn:not([hidden]) { display: flex; width: 100%; }

/* ── PUZZLE ─────────────────────────────────────────────────────────── */

.puzzle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}

.puzzle-board { display: grid; gap: 16px; }

.puzzle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.puzzle-header h3 { margin: 0; }

.puzzle-status {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
}
.puzzle-status[data-status="success"] { background: var(--green-soft); color: var(--green-dark); }
.puzzle-status[data-status="error"]   { background: var(--red-soft);   color: var(--red-dark); }
.puzzle-status[data-status="info"]    { background: var(--blue-soft);  color: var(--blue-dark); }

/* A dark frame so the light squares don't bleed into the page — painted on
   the board itself rather than on the box around it.

   Two reasons it has to be the board. chessboard.js rounds the square size
   down to a whole pixel, so the board is usually a few pixels narrower than
   its container: a frame on the container ends up thicker on one side than
   the other. And when spare-piece trays are on (the position editor) they
   live inside that same container, so a frame around it wraps the loose
   pieces too. A spread box-shadow draws the frame without taking part in
   layout, which keeps chessboard.js's own measurements honest. */
.chessboard {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  /* room for the frame below, which is a spread shadow and would otherwise be
     clipped by any scrolling ancestor — a modal card, for one */
  padding: 8px;
}
.chessboard .board-b72b1 {
  margin: 0 auto;                 /* centre the rounded-down board */
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 5px var(--felt),
    0 9px 0 #0a2c21,
    0 24px 36px -16px rgba(15,59,45,0.5);
}

/* chessboard.js parks the piece you are dragging on <body> with no z-index
   of its own, so inside a modal it disappears behind the overlay and the
   move looks like a teleport. It is the only thing in the document that
   needs to sit above everything. */
body > .piece-417db {
  z-index: 10050;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(8,22,30,.45));
}

.puzzle-controls { display: flex; flex-wrap: wrap; gap: 9px; }

.puzzle-sequence h4 { margin: 0 0 10px; }
.puzzle-side { display: grid; gap: 14px; align-content: start; }
.puzzle-side-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.puzzle-side-header h3 { margin: 0; }
.puzzle-list-item { display: grid; gap: 5px; }

.puzzle-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 9px;
}

.puzzle-points-count {
  font-family: var(--font);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-dark);
  text-align: center;
}

/* chessboard.js theming */
.chessboard .white-1e1d7 { background: #eef1f8 !important; color: #8e9cc8 !important; }
.chessboard .black-3c85d { background: #a9b6dc !important; color: #eef1f8 !important; }
.chessboard .board-b72b1 { border: none !important; }
.chessboard .highlight-white,
.chessboard .highlight-black { box-shadow: inset 0 0 0 4px rgba(45,140,255,0.6) !important; }
[data-theme="dark"] .chessboard .white-1e1d7 { background: #c9d0e0 !important; }
[data-theme="dark"] .chessboard .black-3c85d { background: #6f7ea8 !important; }

/* ── MODALS ─────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12,32,42,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in .2s var(--ease) both;
}
.modal[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--pop);
  display: grid;
  gap: 14px;
  animation: modal-in .28s var(--ease) both;
}
.modal-card h3 { font-size: 20px; margin: 0; }
.modal-meta { color: var(--text-2); font-size: 13.5px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-tag { min-height: 4px; }

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
}
.modal-close:hover { background: var(--border); color: var(--text); }

/* ── DASHBOARD PRIMITIVES (shared) ──────────────────────────────────── */

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dash-heading {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.dash-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  transition: opacity .15s;
}
.dash-link:hover { opacity: .7; }

.dash-ev-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.dash-ev-row:last-child { border-bottom: none; padding-bottom: 0; }

.dash-ev-date {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.dash-ev-day {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.dash-ev-mon {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 2px;
}
.dash-ev-info { flex: 1; min-width: 0; }
.dash-ev-title {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.dash-ev-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-ev-time { font-size: 12.5px; color: var(--muted); }

.dash-leader-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.dash-leader-row:last-child { border-bottom: none; padding-bottom: 0; }
.dash-leader-rank {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dash-leader-rank.top { color: var(--gold-dark); }
.dash-leader-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-leader-pts {
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.dash-news-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.dash-news-row:last-child { border-bottom: none; padding-bottom: 0; }
.dash-news-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-news-date { flex-shrink: 0; font-size: 11.5px; color: var(--muted); }

/* stat cards */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 22px;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--green-soft), transparent);
}
.stat-card:nth-child(2)::after { background: radial-gradient(closest-side, var(--blue-soft), transparent); }
.stat-card:nth-child(3)::after { background: radial-gradient(closest-side, var(--purple-soft), transparent); }
.stat-card:nth-child(4)::after { background: radial-gradient(closest-side, var(--orange-soft), transparent); }

.stat-icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin-bottom: 14px;
  color: var(--green-dark);
  stroke-width: 2;
}
.stat-card:nth-child(2) .stat-icon { color: var(--blue-dark); }
.stat-card:nth-child(3) .stat-icon { color: var(--purple-dark); }
.stat-card:nth-child(4) .stat-icon { color: var(--orange-dark); }

.stat-num {
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 7px;
}

.dash-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.dash-main > .tile { display: flex; flex-direction: column; }
#dash-events-list, #dash-leaders-list, #dash-news-list { flex: 1; }
.dash-col { display: grid; gap: 16px; grid-template-rows: 1fr 1fr; }
.dash-col > .tile { display: flex; flex-direction: column; }

.dash-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.dash-act {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-card);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s, box-shadow .16s;
}
.dash-act:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 8px 0 var(--green-soft);
}
.dash-act svg { width: 20px; height: 20px; color: var(--green-dark); flex-shrink: 0; stroke-width: 2; }

/* ── USERS TABLE ────────────────────────────────────────────────────── */

.users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.users-meta { font-size: 13px; color: var(--text-2); font-weight: 600; }
.users-filters { display: flex; gap: 7px; }

.users-tile { padding: 0; overflow: hidden; }

.users-table-head {
  display: grid;
  grid-template-columns: 46px 46px minmax(0,1fr) 110px 70px;
  gap: 12px;
  align-items: center;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.users-table-head span {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}

.user-row {
  display: grid;
  grid-template-columns: 46px 46px minmax(0,1fr) 110px 70px;
  gap: 12px;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  transition: background .14s;
}
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--surface); }

.user-rank {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.user-rank.top { color: var(--gold-dark); }

.user-avatar-circle,
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.14);
}

.user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-uid {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-role {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.user-role.admin { color: var(--purple-dark); font-weight: 700; }
.user-uid-tiny { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }

.user-pts-col { display: flex; align-items: baseline; gap: 4px; justify-content: flex-end; }
.user-pts-num {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.user-pts-label { font-size: 11px; color: var(--muted); font-weight: 600; }

.user-edit-btn {
  justify-self: end;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  border-radius: 10px;
  padding: 5px 11px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.user-edit-btn:hover { border-color: var(--blue); color: var(--blue); }

.user-deleted-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--red-dark);
  background: var(--red-soft);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 7px;
  vertical-align: middle;
}

/* ── LEADERBOARD ────────────────────────────────────────────────────── */

.lb-page-head { margin-bottom: 16px; }
.lb-title { font-size: 26px; font-weight: 700; margin: 0 0 3px; }
.lb-sub { margin: 0; font-size: 14px; color: var(--text-2); }

.lb-tile { padding: 0; overflow: hidden; }

.lb-row {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) 100px;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  transition: background .14s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:not(.lb-row-head):hover { background: var(--surface); }

.lb-row-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 11px 22px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}

.lb-row-me { background: var(--green-soft) !important; }

.lb-col-rank {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lb-rank-gold   { color: #e0a800; }
.lb-rank-silver { color: #97a8b3; }
.lb-rank-bronze { color: #c07b3f; }

.lb-col-player { display: flex; align-items: center; gap: 13px; min-width: 0; }
.lb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.14);
}
.lb-player-info { display: flex; flex-direction: column; min-width: 0; }
.lb-player-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.lb-player-email {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-me-badge {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--green-dark);
  background: rgba(24,191,134,0.16);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
}
.lb-col-pts {
  text-align: right;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── RICH TEXT EDITOR ───────────────────────────────────────────────── */

.rte-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
}
.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.rte-group { display: flex; align-items: center; gap: 2px; }
.rte-sep { width: 1px; height: 18px; background: var(--border-2); margin: 0 4px; flex-shrink: 0; }
.rte-btn {
  display: grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  padding: 4px 7px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.rte-btn:hover { background: var(--surface-2); color: var(--text); }

/* The face picker. Each option is drawn in the font it names, which is the
   only preview a native select can give and the only one it needs. */
.rte-font {
  height: 28px;
  max-width: 156px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-family: var(--font-mail);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.rte-font:focus { outline: none; border-color: var(--blue); }
.rte-btn.active { background: var(--blue-soft); color: var(--blue-dark); }
.rte-btn.on { background: var(--blue-soft); color: var(--blue-dark); }

/* ── emoji menu ──────────────────────────────────────────────────────
   Fixed to the viewport rather than the toolbar: the editor it hangs off
   can sit inside a scrolling tile, and a panel that scrolls away from its
   own button is worse than no panel.
   ─────────────────────────────────────────────────────────────────── */

.emoji-panel {
  position: fixed;
  z-index: 260;
  width: 318px;
  max-height: 322px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--pop);
  overflow: hidden;
  animation: emoji-in .14s var(--ease) both;
}
@keyframes emoji-in { from { opacity: 0; transform: translateY(-6px); } }

.emoji-search { padding: 10px 10px 8px; border-bottom: 1px solid var(--border); }
.emoji-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  padding: 8px 11px;
  font-family: var(--font-ui);
  font-size: 13.5px;
}
.emoji-search input:focus { outline: none; border-color: var(--blue); }

.emoji-scroll { overflow-y: auto; padding: 6px 10px 10px; overscroll-behavior: contain; }

.emoji-group + .emoji-group { margin-top: 10px; }
.emoji-group-name {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 2px 5px;
  background: var(--card);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}

.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-cell {
  border: none;
  background: none;
  border-radius: 8px;
  padding: 0;
  height: 32px;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.emoji-cell:hover { background: var(--surface-2); transform: scale(1.18); }

.emoji-none { padding: 18px 4px; text-align: center; font-size: 13px; color: var(--muted); }
/* The editor is a preview as much as an input: what is typed here is
   what lands in an inbox, so it is set in the same face at the same
   measure the email uses. */
.rte-editor {
  padding: 18px 22px;
  min-height: 320px;
  max-height: 600px;
  overflow-y: auto;
  font-family: var(--font-mail);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  outline: none;
}
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--faint); }
.rte-editor h1 { font-size: 25px; margin: 12px 0 6px; }
.rte-editor h2 { font-size: 20px; margin: 10px 0 5px; }
.rte-editor h3 { font-size: 17px; margin: 8px 0 4px; }
.rte-editor p { margin: 0 0 10px; }
.rte-editor ul, .rte-editor ol { padding-left: 22px; margin: 6px 0 8px; }
.rte-editor img { max-width: 100%; border-radius: 10px; margin: 6px 0; }
.rte-editor a { color: var(--blue); text-decoration: underline; }

.rte-size-control {
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--card);
}
.rte-size-step {
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 8px;
  transition: background .12s;
}
.rte-size-step:hover { background: var(--surface-2); }
.rte-size-input {
  width: 36px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 0;
  -moz-appearance: textfield;
}
.rte-size-input:focus { box-shadow: none; }
.rte-size-input::-webkit-outer-spin-button,
.rte-size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rte-color-wrap { position: relative; flex-direction: column; gap: 1px; }
.rte-color-a { font-weight: 700; font-size: 13px; line-height: 1; border-bottom: 3px solid #14262f; padding-bottom: 1px; }
.rte-color-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }

.rte-emoji-picker {
  position: fixed;
  z-index: 260;
  width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--pop);
}
.rte-emoji-search { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.rte-emoji-search input { padding: 7px 11px; font-size: 13px; border-radius: 9px; }
.rte-emoji-cats { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.rte-emoji-cats::-webkit-scrollbar { display: none; }
.rte-emoji-cat {
  border: none;
  background: transparent;
  padding: 7px 11px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  border-bottom: 2.5px solid transparent;
  line-height: 1;
}
.rte-emoji-cat:hover { background: var(--surface-2); }
.rte-emoji-cat.active { border-bottom-color: var(--green); }
.rte-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; max-height: 210px; overflow-y: auto; }
.rte-emoji-item {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  padding: 4px 2px;
  border-radius: 7px;
  line-height: 1;
}
.rte-emoji-item:hover { background: var(--surface-2); }

/* ── NEWS CARDS (shared) ────────────────────────────────────────────── */

.news-list-wrap, .stu-news-wrap { display: grid; gap: 14px; margin-top: 16px; }

.news-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-card);
  padding: 22px 24px;
  transition: border-color .16s, transform .16s var(--ease);
}
.news-card:hover { border-color: var(--border-2); }

.news-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.news-card-date {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.news-card-actions { display: flex; gap: 7px; flex-shrink: 0; }
.news-card-title {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}
.news-card-body { font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.news-card-body img { max-width: 100%; border-radius: 10px; margin: 8px 0; }
.news-card-body a { color: var(--blue); text-decoration: underline; }
.news-post-editing { border-color: var(--blue) !important; box-shadow: 0 0 0 4px rgba(45,140,255,0.12) !important; }

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

@media (max-width: 1180px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-main { grid-template-columns: 1fr; }
  .dash-col { grid-template-rows: none; }
  .calendar-layout, .puzzle-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 272px;
    transform: translateX(-100%);
    transition: transform .32s var(--ease);
    box-shadow: 0 0 60px rgba(0,0,0,0.4);
  }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .menu-btn { display: grid; }
  .topbar { padding: 14px 18px; }
  .container { padding: 20px 18px 48px; }
  .dash-actions { grid-template-columns: 1fr; }
}

@media (max-width: 740px) {
  /* stack the topbar: title row, then the stat chips */
  .topbar { flex-wrap: wrap; row-gap: 12px; padding: 12px 18px; }
  .topbar-head { flex: 1 1 0; }
  .topbar-sub { display: none; }
  .topbar-title {
    font-size: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions { flex: 1 1 100%; }
  .topbar-actions .btn { flex: 1; }
}

@media (max-width: 620px) {
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .chip { height: 36px; padding: 0 12px; font-size: 14px; }
  .chip small { display: none; }
  .tile { padding: 18px; }
  .lb-row, .user-row, .users-table-head { padding-left: 14px; padding-right: 14px; }
  .user-row, .users-table-head { grid-template-columns: 30px 40px minmax(0,1fr) 74px 56px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── a club's own picture ─────────────────────────────────────────────
   Every club avatar on the site is a sized box with a radius already, so
   the picture only has to fill one. `inherit` on the radius is what lets
   one rule serve the sidebar mark, the card grid, the Network and the
   check-in card without any of them knowing about it.
   ─────────────────────────────────────────────────────────────────── */

.has-photo {
  overflow: hidden;
  padding: 0;
  /* Nothing behind it. A picture that is not square shows the page through
     the rest of the box, and a logo on transparency keeps its transparency
     instead of gaining a card it never had. */
  background: none !important;
  box-shadow: none;
}
.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  /* The whole picture, at its own proportions. `cover` filled the square
     by cutting the edges off, which is exactly what a logo cannot spare. */
  object-fit: contain;
  border-radius: inherit;
}

/* ── choosing one ─────────────────────────────────────────────────── */

.se-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* A checker behind the preview, and only the preview: it is the one place
   somebody needs to see where their picture ends and nothing begins. */
.se-photo-now {
  border-radius: 22px;
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, rgba(130,150,164,.16) 25%, transparent 25%, transparent 75%, rgba(130,150,164,.16) 75%),
    linear-gradient(45deg, rgba(130,150,164,.16) 25%, transparent 25%, transparent 75%, rgba(130,150,164,.16) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.se-photo-now { flex-shrink: 0; }
.se-photo-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.se-photo-tools .field-hint { flex-basis: 100%; margin: 0; }

.club-avatar.lg {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  font-size: 40px;
}