:root {
  --ink: #14161b;
  --panel: #1b1e26;
  --panel-2: #222630;
  --line: #2c313d;
  --paper: #ece9e1;
  --muted: #98a0ae;
  --amber: #e2a63c;
  --amber-deep: #b6801f;
  --violet: #8a7bff;
  --green: #4fbf8b;
  --blue: #4f9bff;
  --danger: #e06666;
  --prism: linear-gradient(100deg, #5ed6d0, #6fa8ff 45%, #b07bff);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

/* The [hidden] attribute must always win, even over .auth { display:grid }. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* --- Wordmark -------------------------------------------------------------- */
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--paper);
  position: relative;
  display: inline-block;
}
.wordmark span {
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), var(--amber-deep));
}
.wordmark--lg { font-size: 54px; letter-spacing: 0.04em; }
.wordmark--lg span { height: 6px; width: 70%; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--paper);
  padding: 9px 15px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { border-color: #3a414f; }
.btn:active { transform: translateY(1px); }
.btn--accent {
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  border-color: var(--amber-deep);
  color: #1a1400;
}
.btn--accent:hover { filter: brightness(1.05); border-color: var(--amber); }
.btn--ghost { background: transparent; }
.btn--link {
  background: none; border: none; color: var(--muted);
  padding: 4px 2px; font-size: 13px; text-decoration: underline;
}
.btn--link:hover { color: var(--paper); }

/* --- Auth ----------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
/* Subtle hardwood floorboards behind the login card. */
.auth__floor {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(226,166,60,0.05) 118px 120px),
    radial-gradient(1200px 600px at 50% -10%, rgba(226,166,60,0.10), transparent 60%),
    var(--ink);
}
.auth__card {
  position: relative;
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 30px 26px;
  box-shadow: var(--shadow);
}
.auth__tag { color: var(--muted); margin: 14px 0 22px; font-size: 15px; }

.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; color: var(--muted);
  padding: 8px 4px 12px; margin-right: 16px;
  font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent;
}
.tab.is-active { color: var(--paper); border-bottom-color: var(--amber); }

.authform { display: grid; gap: 14px; }
.authform label, .dlg label {
  display: grid; gap: 6px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}
.authform input, .dlg input, .dlg select, .dlg textarea {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.authform input:focus, .dlg input:focus, .dlg select:focus, .dlg textarea:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-color: var(--amber);
}
.authform .btn { margin-top: 6px; }
.formerror { color: var(--danger); font-size: 13px; min-height: 1em; margin: 10px 0 0; }

/* --- Top bar -------------------------------------------------------------- */
.app { max-width: 1160px; margin: 0 auto; padding: 20px 22px 60px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.topbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.whoami { display: flex; flex-direction: column; align-items: flex-end; margin-left: 6px; }
.whoami span { font-weight: 600; font-size: 14px; }

/* --- Toolbar -------------------------------------------------------------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 22px 0 14px;
}
.segment { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg {
  background: none; border: none; color: var(--muted);
  padding: 7px 14px; border-radius: 7px; font-weight: 600; font-size: 13px;
}
.seg.is-active { background: var(--panel-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.search {
  background: var(--panel); border: 1px solid var(--line); color: var(--paper);
  border-radius: 10px; padding: 9px 13px; min-width: 260px; flex: 1; max-width: 380px; font-size: 14px;
}
.search:focus { outline: 2px solid var(--amber); border-color: var(--amber); }

/* --- Board / groups ------------------------------------------------------- */
.board { display: grid; gap: 16px; margin-top: 6px; }
.group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  border-left: 4px solid var(--gcolor, var(--amber));
}
.group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 13px 18px; gap: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gcolor, var(--amber)) 12%, transparent), transparent 60%);
}
.group__title { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; }
.group__count { font-size: 12px; color: var(--muted); font-weight: 600; }

.rowhead, .cardrow {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 0.9fr 0.7fr 44px;
  gap: 10px; align-items: center;
  padding: 9px 18px;
}
.rowhead {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); border-top: 1px solid var(--line); font-weight: 600;
}
.cardrow { border-top: 1px solid var(--line); }
.cardrow:hover { background: var(--panel-2); }
.cardrow:hover .card-actions { opacity: 1; }
.cell-player { font-weight: 600; }
.cell-sub { color: var(--muted); font-size: 13px; }
.cell-meta { color: var(--muted); font-size: 13px; }

/* Chips */
.chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.03em;
  border: 1px solid var(--line); color: var(--muted); text-transform: uppercase;
}
.chip--Base { color: var(--paper); }
.chip--Insert { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.chip--Rookie { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.chip--Relic { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.chip--Autographe { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); }
.chip--Parallèle {
  color: transparent; border: 1px solid transparent;
  background: var(--prism) border-box;
  -webkit-background-clip: text; background-clip: text;
  position: relative;
}
.chip--Parallèle::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; padding: 1px;
  background: var(--prism);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tag-num { font-family: var(--mono); font-size: 12px; color: var(--amber); }
.tag-rc { font-family: var(--mono); font-size: 11px; color: var(--blue); font-weight: 600; }

.card-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity 0.12s; }
.iconbtn { background: none; border: none; color: var(--muted); font-size: 15px; padding: 2px 4px; border-radius: 6px; }
.iconbtn:hover { color: var(--paper); background: var(--line); }
.iconbtn.del:hover { color: var(--danger); }

/* Empty state */
.empty {
  text-align: center; padding: 60px 20px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty h3 { font-family: var(--display); font-size: 24px; color: var(--paper); margin: 0 0 8px; letter-spacing: 0.03em; }

/* --- Dialogs -------------------------------------------------------------- */
.dlg {
  border: 1px solid var(--line); background: var(--panel);
  color: var(--paper); border-radius: 16px; padding: 0;
  width: min(560px, 94vw); box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.dlg__form { padding: 24px 26px 22px; }
.dlg h2 { font-family: var(--display); font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 4px; }
.muted { color: var(--muted); font-size: 13px; margin: 6px 0 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.span2 { grid-column: 1 / -1; }
.check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; color: var(--paper); font-weight: 500; }
.check input { width: auto; }
.dlg__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.row-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; margin-bottom: 16px; }
.row-form input { background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 8px; padding: 9px 10px; }
.sets-list { display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.setitem { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.setitem__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.setitem__name { font-weight: 700; }
.setitem__season { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.typelist { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.type-add { display: flex; gap: 8px; margin-top: 8px; }
.type-add input, .type-add select { background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 7px; padding: 7px 9px; font-size: 13px; }
.type-add input { flex: 1; }

/* --- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--paper);
  padding: 11px 18px; border-radius: 10px; box-shadow: var(--shadow);
  font-size: 14px; z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- Cascade & detail grids ---------------------------------------------- */
.detailgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.detailgrid .span2full { grid-column: 1 / -1; }
.detailgrid label, #cascade label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.detailgrid input, #cascade select { background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 8px; padding: 10px 11px; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal; }
#cascade select:disabled { opacity: 0.5; }
.detailgrid input:focus, #cascade select:focus { outline: 2px solid var(--amber); border-color: var(--amber); }
.opt { text-transform: none; color: var(--muted); font-weight: 400; letter-spacing: normal; }
.summary { background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 4px; line-height: 1.5; }
.tag-par { font-family: var(--mono); font-size: 12px; color: var(--violet); }

/* --- Referential panel ---------------------------------------------------- */
.refbar { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.addprod { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.addprod summary { cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; }
.addprod .row-form { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.addprod .row-form input:first-child { grid-column: 1 / -1; }

/* --- Add page (replaces the popup) --------------------------------------- */
.addpage { max-width: 760px; margin: 8px auto 0; }
.addpage__head { display: flex; align-items: center; gap: 14px; margin: 14px 0 20px; }
.addpage__head h2 { font-family: var(--display); font-size: 30px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; }
.addpage__body { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; }
.addpage__sub { font-family: var(--display); font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 22px 0 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.addpage__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.cascade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cascade label, .detailgrid label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cascade__player { grid-column: 1 / -1; }
.cascade select, .detailgrid input {
  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 9px; padding: 12px 12px; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal;
}
.cascade select:disabled { opacity: 0.45; }
.cascade select:focus, .detailgrid input:focus { outline: 2px solid var(--amber); border-color: var(--amber); }

/* --- Searchable combobox ------------------------------------------------- */
.combo { position: relative; }
.combo__input {
  width: 100%; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 9px; padding: 12px 12px; font-size: 15px; font-weight: 400;
}
.combo__input:disabled { opacity: 0.45; }
.combo__input:focus { outline: 2px solid var(--amber); border-color: var(--amber); }
.combo.is-open .combo__input { border-color: var(--amber); }
.combo__list {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow: auto; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px;
}
.combo__opt { padding: 9px 10px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.combo__opt:hover, .combo__opt.is-hi { background: var(--line); }
.combo__opt.is-sel { color: var(--amber); }
.combo__group {
  padding: 9px 10px 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 700;
}
.combo__empty { padding: 10px; color: var(--muted); font-size: 14px; }

/* --- Staging cart -------------------------------------------------------- */
.cart { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.cart__head { font-family: var(--display); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.cart__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; }
.cart__item .muted { font-size: 12px; margin: 2px 0 0; }

/* --- JSON import --------------------------------------------------------- */
.jsonbar { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; flex-wrap: wrap; }
.jsonbar input[type=file] { color: var(--muted); font-size: 13px; }
.jsonarea { width: 100%; background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 10px; padding: 12px; font-family: var(--mono); font-size: 13px; line-height: 1.5; resize: vertical; }
.jsonarea:focus { outline: 2px solid var(--amber); border-color: var(--amber); }
.jsonresult { margin-top: 6px; }
.jsonok { color: var(--green); font-weight: 600; }
.jsonbad { margin: 8px 0 0; padding-left: 18px; color: var(--danger); font-size: 13px; }
.jsonbad li { margin: 2px 0; }

/* --- Admin page: users & backups ------------------------------------------ */
/* Wider than the add/JSON pages: the user rows carry more on one line. */
#adminpage { max-width: 900px; }
/* The lists were sized for a dialog; on a full page they scroll with it. */
#adminpage .sets-list { max-height: none; overflow: visible; }
#adminpage .tabs { margin-top: -4px; }

#form-newuser { grid-template-columns: 1fr 1fr auto auto; align-items: center; }
.checkline { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.checkline input { width: auto; }

.userrow__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.userrow__actions .btn--link { padding: 0; font-size: 13px; }
.act-del { color: var(--danger); }

.badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.badge--ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.badge--wait { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.badge--admin { color: var(--paper); background: var(--panel-2); }

.invitebox { border: 1px solid var(--amber); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--amber) 8%, transparent); }
.invitebox__title { font-weight: 700; margin-bottom: 8px; }
.invitebox__url { width: 100%; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 8px; padding: 8px 10px; font-family: var(--mono); font-size: 12px; }
.invitebox__foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; }


/* --- JSON import: target collection --------------------------------------- */
.jsonuser {
  display: grid; gap: 6px; max-width: 420px; margin-bottom: 16px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.jsonuser select {
  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 9px; padding: 11px 12px;
  font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal;
  /* A select sizes to its widest option: a long display name would otherwise
     stretch it past the viewport. */
  width: 100%; min-width: 0; max-width: 100%;
}
.jsonuser select:focus { outline: 2px solid var(--amber); border-color: var(--amber); }

.whoami__links { display: flex; gap: 12px; }

/* --- Responsive ----------------------------------------------------------- */
/* Touch devices have no hover: row actions must be visible without one. */
@media (hover: none) {
  .card-actions { opacity: 1; }
}

/* Tablet and below: every multi-column form collapses to a single column. */
@media (max-width: 820px) {
  .cascade, .detailgrid, .grid2, .row-form, .addprod .row-form, #form-newuser { grid-template-columns: 1fr; }
  .addprod .row-form input:first-child { grid-column: auto; }
  .addpage__body { padding: 18px 16px; }
  .addpage__head h2 { font-size: 24px; }
}

@media (max-width: 640px) {
  .app { padding: 14px 14px 48px; }

  /* Top bar: wordmark on its line, actions sharing a full-width row below. */
  .topbar { gap: 10px; padding-bottom: 14px; }
  .topbar__right { width: 100%; gap: 8px; }
  .topbar__right > .btn { flex: 1 1 auto; }
  .whoami { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin-left: 0; }
  .whoami__links { gap: 18px; }
  /* Reachable tap targets. !important because per-context rules (.userrow__actions
     .btn--link, …) are more specific and would otherwise keep the desktop size. */
  .btn--link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px !important; }

  /* Four equal cells rather than a row that overflows the screen. */
  .toolbar { gap: 10px; margin: 16px 0 12px; }
  .segment { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .seg { padding: 11px 4px; font-size: 12px; }
  .search { min-width: 0; width: 100%; max-width: none; }

  /* Collection rows: stacked, actions always tappable. */
  .group__head { padding: 11px 14px; }
  .group__title { font-size: 19px; }
  .rowhead { display: none; }
  .cardrow { grid-template-columns: 1fr auto; grid-auto-rows: min-content; row-gap: 4px; padding: 11px 14px; }
  .cardrow > .cell-type { grid-column: 1 / -1; }
  .cardrow > .cell-meta { grid-column: 1; }
  .card-actions { opacity: 1; grid-column: 2; grid-row: 1; gap: 2px; }
  .iconbtn { font-size: 18px; padding: 8px 10px; }

  .wordmark--lg { font-size: 42px; }
  .auth__card { padding: 24px 20px 20px; }

  .addpage__actions { flex-wrap: wrap; }
  .addpage__actions .btn { flex: 1 1 auto; }
  .cart__item { align-items: flex-start; }

  .setitem__head { flex-wrap: wrap; }
  .userrow__actions { gap: 10px 16px; }
  .invitebox__foot { flex-wrap: wrap; gap: 8px; }
  .jsonuser { max-width: none; }

  .dlg__form { padding: 20px 18px 18px; }
  .dlg__actions .btn { flex: 1 1 auto; }

  /* Four admin tabs no longer fit on one line at this width: let them wrap
     rather than push the page into a horizontal scroll. */
  .tabs { flex-wrap: wrap; }
  .tab { margin-right: 12px; padding-bottom: 10px; }

  /* iOS Safari zooms into any focused field whose text is under 16px. !important
     because most fields are styled through more specific contextual selectors
     (.search, .detailgrid input, .jsonarea, …) that would win otherwise. */
  input, select, textarea, .combo__input { font-size: 16px !important; }
}

/* --- Statistics page ------------------------------------------------------ */
#statspage { max-width: 900px; }
.statsbody { display: grid; gap: 18px; }

.statshead {
  display: flex; align-items: center; gap: 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px;
}
.statshead__num { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 0.9; color: var(--amber); }
.statshead__label { font-family: var(--display); font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; }
.statshead__sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

.statsec { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; }
.statsec__title {
  font-family: var(--display); font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0 0 12px; color: var(--paper);
}
.statsec .muted { margin-top: -6px; }

/* A row: name, proportional bar, copies + distinct cards behind them. */
.statbars { display: grid; gap: 7px; }
.statbar { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2.4fr auto; gap: 12px; align-items: center; }
.statbar__label { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.statbar__track { background: var(--ink); border-radius: 999px; height: 12px; overflow: hidden; }
.statbar__fill { height: 100%; border-radius: 999px; min-width: 3px; }
.statbar__val { font-family: var(--mono); font-size: 13px; color: var(--paper); text-align: right; white-space: nowrap; }
.statbar__uniq { color: var(--muted); font-size: 11px; margin-left: 8px; }

.confcards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.confcard {
  flex: 1 1 160px; border: 1px solid var(--line); border-left: 4px solid var(--ccolor);
  border-radius: 12px; padding: 14px 16px; background: var(--ink);
}
.confcard__name { font-family: var(--display); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ccolor); }
.confcard__num { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1.1; }
.confcard__sub { color: var(--muted); font-size: 12px; }
.confblock { margin-top: 16px; }
.confblock__title { font-family: var(--display); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 8px; }

/* --- Admin: conference map ------------------------------------------------ */
.auditbox { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--ink); }
.auditbox--ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.auditbox--warn { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.auditbox ul { margin: 8px 0 0; padding-left: 20px; }
.auditbox .muted { margin: 8px 0 0; }
.auditbox code { font-family: var(--mono); font-size: 12px; color: var(--amber); }
.conflists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.conflist h4 { font-family: var(--display); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 6px; }
.conflist ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }

@media (max-width: 640px) {
  .statshead { gap: 14px; padding: 18px; }
  .statshead__num { font-size: 46px; }
  .statshead__label { font-size: 18px; }
  .statsec { padding: 16px; }
  .statbar { grid-template-columns: minmax(72px, 1fr) 1.6fr auto; gap: 8px; }
  .statbar__label { font-size: 13px; }
  .conflists { grid-template-columns: 1fr; }
}

/* --- Manual card entry ---------------------------------------------------- */
#add-modes { margin-bottom: 14px; }
#manualform input, #manualform select {
  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 9px; padding: 12px; font-size: 15px; font-weight: 400;
  text-transform: none; letter-spacing: normal; width: 100%;
  line-height: 1.25;
}
/* Chrome renders a select ~2px taller than an input at equal padding, which
   knocks it out of line with the field beside it — trim it back. */
#manualform select { padding-block: 11px; }
#manualform input:focus, #manualform select:focus { outline: 2px solid var(--amber); border-color: var(--amber); }
.tag-man {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}
#admintab-json .checkline { margin-bottom: 12px; align-items: flex-start; white-space: normal; line-height: 1.4; }

/* Two grid rows per field: caption on top, control pinned to the bottom. The
   labels of one row stretch to the same height, so a caption that wraps onto a
   second line (an "(optionnel)" hint) no longer pushes its control below its
   neighbour's. */
.cascade label, .detailgrid label { grid-template-rows: 1fr auto; }
.cascade label > .cap, .detailgrid label > .cap { align-self: start; }
.opt { display: inline; }

/* --- Members page --------------------------------------------------------- */
#memberspage { max-width: 1160px; }
.memberlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.membercard {
  text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; color: var(--paper);
  display: grid; gap: 2px; transition: border-color 0.15s ease, transform 0.06s ease;
}
.membercard:hover { border-color: var(--amber); }
.membercard:active { transform: translateY(1px); }
.membercard.is-me { border-left: 4px solid var(--amber); }
.membercard__name { font-weight: 700; font-size: 15px; }
.membercard__sub { color: var(--muted); font-size: 12px; }
.membercard__num {
  font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1.1;
  color: var(--amber); margin-top: 6px;
}
#member-note:empty { display: none; }

/* --- Catalogue ------------------------------------------------------------ */
#catalogpage { max-width: 1160px; }
.catalog__search { width: 100%; max-width: none; min-width: 0; margin-bottom: 16px; }

.cat-season, .cat-set, .cat-type { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cat-season { margin-bottom: 12px; }
.cat-set, .cat-type { background: var(--ink); margin-bottom: 8px; }
.cat-season > summary, .cat-set > summary, .cat-type > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.cat-season > summary::-webkit-details-marker, .cat-set > summary::-webkit-details-marker,
.cat-type > summary::-webkit-details-marker { display: none; }
.cat-season > summary::before, .cat-set > summary::before, .cat-type > summary::before {
  content: "▸"; color: var(--muted); font-size: 12px; transition: transform 0.12s ease;
}
.cat-season[open] > summary::before, .cat-set[open] > summary::before,
.cat-type[open] > summary::before { transform: rotate(90deg); }
.cat-season > summary { background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 12%, transparent), transparent 60%); }
.cat-season__name { font-family: var(--display); font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; }
.cat-set__name { font-weight: 700; }
.cat-type__name { font-weight: 600; font-size: 14px; }
.cat-sets, .cat-types { padding: 0 14px 12px; }
.cat-types { padding-top: 4px; }

.catcount { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.catcount__sep { opacity: 0.5; margin: 0 1px; }
.catbar { width: 90px; height: 7px; border-radius: 999px; background: var(--panel-2); overflow: hidden; flex: none; }
.catbar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--amber-deep)); border-radius: 999px; }

.cat-cards { padding: 0 14px 12px; display: grid; gap: 2px; }
.catcard {
  display: grid; grid-template-columns: 18px 62px 1fr 190px 42px 34px;
  gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px;
}
.catcard:hover { background: var(--panel-2); }
.catcard.is-owned .catcard__player { color: var(--paper); }
.catcard:not(.is-owned) .catcard__player { color: var(--muted); }
.catcard__mark { color: var(--green); font-weight: 700; }
.catcard__id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.catcard__player { font-weight: 600; font-size: 14px; }
.catcard__qty { font-family: var(--mono); font-size: 12px; color: var(--amber); text-align: right; }
.catadd { font-size: 18px; text-decoration: none; text-align: center; }
.catadd:disabled { opacity: 0.4; }

@media (max-width: 640px) {
  .cat-season__name { font-size: 18px; }
  .cat-sets, .cat-types, .cat-cards { padding-left: 8px; padding-right: 8px; }
  .catbar { width: 56px; }
  .catcard { grid-template-columns: 16px 52px 1fr 40px 34px; }
  .catcard__team { display: none; }
}