/* ==========================================================================
   Thunderboost — visual theme
   Storm-dark by default, light available through [data-theme="light"].
   ========================================================================== */

:root {
  /* --- dark (default) --- */
  --bg: #0c0a07;                     /* deep charcoal, warm */
  --bg-glow-1: rgba(245, 192, 74, .19);
  --bg-glow-2: rgba(201, 138, 30, .12);
  --ray-line: rgba(240, 185, 60, .075);
  --surface: rgba(23, 18, 8, .82);
  --surface-solid: #171208;
  --surface-2: rgba(255, 225, 160, .045);
  --surface-3: rgba(255, 225, 160, .075);
  --border: rgba(240, 185, 60, .13);
  --border-strong: rgba(240, 185, 60, .26);

  /* Panels that float over the page — the bell, the "something is new" bar —
     were written against --panel, --panel-2 and --line, and those names were
     never given a value. The result was a notification panel with no background
     at all: the page read straight through it, which is the mess in the corner
     everybody kept pointing at. They are aliases of the real tokens, and being
     solid is the whole point of them. */
  --panel: var(--surface-solid);
  --panel-2: var(--surface-2);
  --line: var(--border);
  --card: var(--surface-solid);

  --text: #f3ece0;
  --muted: #b3a58c;
  --faint: #877a63;
  --ico: #e7dcc6;                    /* one light tone for every mark in the sidebar */

  --accent: #f0b93c;                 /* gold */
  --accent-2: #f5c04a;               /* lighter gold */
  --spark: #ffe08a;                  /* bright spark */
  --accent-soft: rgba(240, 185, 60, .14);
  --accent-border: rgba(240, 185, 60, .38);
  --accent-hover: #ffcb55;
  --accent-grad: linear-gradient(135deg, #f5c04a 0%, #e0a52e 50%, #c98a1e 100%);
  --on-accent: #2a1d05;              /* text that sits on gold */

  --green: #34d399;
  --green-soft: rgba(52, 211, 153, .13);
  --green-border: rgba(52, 211, 153, .3);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, .13);
  --amber-border: rgba(251, 191, 36, .3);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, .13);
  --red-border: rgba(248, 113, 113, .32);
  --blue: #60a5fa;
  --blue-soft: rgba(96, 165, 250, .13);
  --blue-border: rgba(96, 165, 250, .3);
  --slate: #9aa5b1;
  --slate-soft: rgba(154, 165, 177, .13);
  --slate-border: rgba(154, 165, 177, .3);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
  --ring: 0 0 0 3px rgba(240, 185, 60, .28);
  --sidebar: 256px;
  --topbar: 64px;

  /* Nothing is fetched from another host: whichever of these the machine has is
     the one it draws with. The first two are used where somebody has them
     installed, and everything after that is on every desktop and phone there
     is — so the site looks like itself and needs nobody's permission to load. */
  --font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "DejaVu Sans Mono", "Liberation Mono", monospace;

  /* A real outline around a bright figure, the way a name is drawn on a health
     bar in the game: eight hairlines of solid black laid around the glyph, not
     a blur behind it. Heavy white on a dark row stops glaring and the figure is
     still read at a glance. The last, softer one beds it into the row. Both
     pages — the site's own schedule and the one shops are given — use this. */
  --ink-outline:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    0 0 3px rgba(0, 0, 0, .75);
}

[data-theme="light"] {
  /* Dark text on a pale row: black around it would be the thing that cuts, so
     the outline becomes a hairline of the page's own light instead. */
  --ink-outline: 0 0 2px rgba(255, 255, 255, .95), 0 1px 0 rgba(255, 255, 255, .9);

  --bg: #faf7f0;
  --bg-glow-1: rgba(201, 138, 30, .13);
  --bg-glow-2: rgba(240, 185, 60, .10);
  --ray-line: rgba(140, 100, 20, .06);
  --surface: rgba(255, 255, 255, .94);
  --surface-solid: #ffffff;
  --surface-2: rgba(60, 45, 10, .035);
  --surface-3: rgba(60, 45, 10, .06);
  --border: rgba(60, 45, 10, .12);
  --border-strong: rgba(60, 45, 10, .2);

  /* Panels that float over the page — the bell, the "something is new" bar —
     were written against --panel, --panel-2 and --line, and those names were
     never given a value. The result was a notification panel with no background
     at all: the page read straight through it, which is the mess in the corner
     everybody kept pointing at. They are aliases of the real tokens, and being
     solid is the whole point of them. */
  --panel: var(--surface-solid);
  --panel-2: var(--surface-2);
  --line: var(--border);
  --card: var(--surface-solid);

  --text: #1b1509;
  --muted: #6b5c40;
  --faint: #9a8c72;
  --ico: #6b5c40;

  --accent: #a8760c;
  --accent-2: #c98a1e;
  --spark: #d99b00;
  --accent-soft: rgba(168, 118, 12, .1);
  --accent-border: rgba(168, 118, 12, .3);
  --accent-hover: #8c6108;
  --accent-grad: linear-gradient(135deg, #e0a52e 0%, #c98a1e 55%, #a8760c 100%);
  --on-accent: #2a1d05;

  --green: #0d9f6e;
  --green-soft: rgba(13, 159, 110, .1);
  --green-border: rgba(13, 159, 110, .26);
  --amber: #b45309;
  --amber-soft: rgba(180, 83, 9, .09);
  --amber-border: rgba(180, 83, 9, .24);
  --red: #dc4b4b;
  --red-soft: rgba(220, 75, 75, .09);
  --red-border: rgba(220, 75, 75, .26);
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, .09);
  --blue-border: rgba(37, 99, 235, .24);
  --slate: #64748b;
  --slate-soft: rgba(100, 116, 139, .1);
  --slate-border: rgba(100, 116, 139, .26);

  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px -10px rgba(16, 24, 40, .18);
  --shadow-lg: 0 24px 60px -24px rgba(16, 24, 40, .3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Shafts of gold light falling from the top — the brand backdrop.
   Two layers: the rays themselves, faded out with a mask, and a warm pool of light. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(115deg, var(--ray-line) 0 2px, transparent 2px 46px);
  -webkit-mask-image: radial-gradient(78% 62% at 50% -4%, #000 18%, transparent 78%);
  mask-image: radial-gradient(78% 62% at 50% -4%, #000 18%, transparent 78%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 380px at 50% -12%, var(--bg-glow-1), transparent 68%),
    radial-gradient(620px 380px at 92% 104%, var(--bg-glow-2), transparent 70%);
}

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* ------------------------------- layout ---------------------------------- */

.layout { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2), transparent 60%);
  border-right: 1px solid var(--border);
  /* No blur here: nothing ever moves behind the sidebar, so a blur showed
     nothing, and it was worked out again on every frame of every scroll — on a
     computer without a graphics card (the remote desktop) that is what made the
     page stutter. */
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 22px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.35px;
}
.brand .mark {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--accent-grad);
  display: grid; place-items: center;
  color: var(--on-accent);
  flex: 0 0 36px;
  box-shadow: 0 6px 20px -6px rgba(240, 185, 60, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  position: relative;
}
.brand .mark svg { width: 20px; height: 20px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
/* a faint charge ring around the mark */
.brand .mark::after {
  content: ""; position: absolute; inset: -3px; border-radius: 15px;
  background: var(--accent-grad); opacity: .25; filter: blur(7px); z-index: -1;
}
.brand .word { font-weight: 800; letter-spacing: -.4px; }
.brand .word b { font-weight: 800; }
.brand .word i {
  font-style: normal; font-weight: 800;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
  padding: 11px 12px 4px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-family: inherit;
  position: relative;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--text);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--accent-grad);
}
.nav-item .ico { width: 18px; text-align: center; opacity: .9; font-size: 15px; }
.nav-item .badge { margin-left: auto; }

.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-radius: 12px; transition: background .16s;
}
.user-chip:hover { background: var(--surface-2); text-decoration: none; }
.avatar {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--accent-grad); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 700; font-size: 13.5px;
  flex: 0 0 34px;
  box-shadow: 0 4px 14px -5px rgba(240, 185, 60, .7);
}
.user-chip .meta { min-width: 0; }
.user-chip .name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .role { font-size: 12px; color: var(--faint); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 16px; font-weight: 750; margin: 0; letter-spacing: -.2px; white-space: nowrap; }
.topbar .spacer { flex: 1; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pill b { color: var(--text); font-weight: 650; }

/* The clocks in the header are buttons: the one lit is the clock every time on
   the page is shown in. The others are dimmed, but still read at a glance. */
.zone-clock { gap: 6px; padding: 3px 6px; }
.zone-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 3px 8px; color: var(--muted); font: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.zone-btn b { color: var(--muted); font-weight: 600; }
.zone-btn:hover { color: var(--text); border-color: var(--border); }
.zone-btn.on { color: var(--accent); border-color: var(--accent-border, var(--border)); background: var(--accent-soft, transparent); }
.zone-btn.on b { color: var(--text); font-weight: 700; }
.zone-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Which clock a column of times is on, small beside its heading. */
.zone-tag { font-size: 9px; letter-spacing: .06em; color: var(--accent); margin-left: 3px; }

/* "live" tag in the header: lit while the update channel is connected. */
.live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--green-soft); border: 1px solid var(--green-border);
  transition: color .2s, background .2s, border-color .2s;
}
.live-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px -1px currentColor;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot.off {
  color: var(--faint); background: var(--surface-2); border-color: var(--border);
}
.live-dot.off::before { animation: none; box-shadow: none; }
@media (max-width: 860px) { .live-dot { display: none; } }

.theme-toggle {
  width: 36px; height: 36px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); cursor: pointer; font-size: 15px;
  display: grid; place-items: center; transition: all .16s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }

.content { padding: 26px 28px 60px; max-width: 1560px; width: 100%; animation: rise .32s cubic-bezier(.22,1,.36,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* -------------------------------- cards ---------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* No blur behind the cards either: their background is almost solid, so it
     could not be seen, and every card on the page was one more blur per frame. */
  overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.card-head {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--surface-2), transparent);
}
.card-head h2 {
  margin: 0; font-size: 12px; font-weight: 750;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text);
}
.card-head .spacer { flex: 1; }
.card-body { padding: 14px 16px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 780px)  { .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* stat cards get a quiet gradient sheen and a big number */
.stat { position: relative; }
.stat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px 90px at 100% 0%, var(--accent-soft), transparent 70%);
}
.stat .label {
  font-size: 11.5px; color: var(--faint); font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
}
.stat .value {
  font-size: 24px; font-weight: 800; letter-spacing: -1px; margin-top: 3px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat .sub { font-size: 12px; color: var(--faint); margin-top: 4px; }

/* ------------------------------ controls --------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s, box-shadow .16s, opacity .16s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 8px 22px -10px rgba(240, 185, 60, .85);
  text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; font-weight: 750;
}
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 12px 30px -10px rgba(240, 185, 60, .95); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { color: var(--red); border-color: var(--red-border); background: var(--red-soft); }
.btn.danger:hover { background: var(--red-soft); filter: brightness(1.15); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }

.seg {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 3px;
}
.seg button {
  border: none; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); padding: 6px 13px; border-radius: 9px; cursor: pointer;
  transition: all .16s;
}
.seg button:hover { color: var(--text); }
.seg button.active {
  background: var(--surface-solid); color: var(--accent);
  box-shadow: var(--shadow);
}

/* A field with a search button tucked inside its right edge. */
.with-search { position: relative; display: block; }
.with-search input { padding-right: 42px; }
.with-search .search-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-3);
  color: var(--muted); font-size: 14px; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: all .16s;
}
.with-search .search-btn:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.with-search .search-btn:disabled { opacity: .5; cursor: default; }

.lookup-good { color: var(--green); }
.lookup-bad  { color: var(--red); }

/* Status on the raid page: every state visible at once, one click to switch. */
.status-seg { padding: 3px; gap: 2px; }
.status-seg button { padding: 5px 11px; font-size: 12.5px; }
/* The row of status buttons carries the same colours as the badges. */
.status-seg button[data-status="Active"].active    { color: var(--green); }
.status-seg button[data-status="Locked"].active    { color: var(--slate); }
.status-seg button[data-status="Done"].active      { color: var(--blue); }
.status-seg button[data-status="Cancelled"].active { color: var(--red); }

label.field { display: block; }
label.field > span {
  display: block; font-size: 12px; font-weight: 650; color: var(--muted);
  margin-bottom: 6px; letter-spacing: .01em;
}
input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface-3);
}
input:disabled { opacity: .55; }
textarea { min-height: 76px; resize: vertical; }
input[type="checkbox"] { width: auto; accent-color: var(--accent); }

/* The list a native <select> drops down, and the calendar a date input opens, are
   drawn by the operating system, not by this stylesheet. "color-scheme" is the one
   switch that tells it which palette to use — without it both come out white on a
   dark page. The option colours below are for the browsers that do honour them. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
select { appearance: none; background-image: none; cursor: pointer; }
select option, select optgroup {
  background: var(--surface-solid);
  color: var(--text);
}
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; color: var(--muted); }
.check:hover { color: var(--text); }
input[type="date"], input[type="datetime-local"] { color-scheme: dark; }
[data-theme="light"] input[type="date"], [data-theme="light"] input[type="datetime-local"] { color-scheme: light; }

/* -------------------------------- table ---------------------------------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--faint);
  font-weight: 700;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
  /* Solid instead of blurred: a blur on every header cell of a wide table was a
     dozen blurs a frame while the table scrolled under it. */
  background: linear-gradient(var(--surface-2), var(--surface-2)), var(--surface-solid);
}
/* Rows are kept tight: a raid schedule is read a screenful at a time, and every
   extra pixel of padding is one fewer raid in front of the reader. */
tbody td { padding: 6px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; line-height: 1.35; }
tbody tr { transition: background .14s; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* A buyer who never answered and was passed over — the row should be impossible
   to miss when the lead scans the list during an invite. */
tbody tr.row-skipped { background: var(--red-soft); }
tbody tr.row-skipped:hover { background: color-mix(in srgb, var(--red) 18%, transparent); }
tbody tr.row-skipped td { border-bottom-color: var(--red-border); }
tbody tr.row-skipped td:first-child { box-shadow: inset 3px 0 0 var(--red); }

/* A buyer who is already in the group reads green across the whole row, so the
   lead can see at a glance who is still missing. */
tbody tr.row-in-group { background: var(--green-soft); }
tbody tr.row-in-group:hover { background: color-mix(in srgb, var(--green) 18%, transparent); }
tbody tr.row-in-group td { border-bottom-color: var(--green-border); }
tbody tr.row-in-group td:first-child { box-shadow: inset 3px 0 0 var(--green); }

.empty { padding: 28px 16px; text-align: center; color: var(--faint); }
.empty .big { font-size: 26px; margin-bottom: 6px; opacity: .8; }

/* -------------------------------- badges --------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
/* A badge tinted by whatever colour the thing it names uses — difficulty, loot type. */
.badge.tint {
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  border-color: color-mix(in srgb, var(--tint) 42%, transparent);
  font-weight: 700;
}

/* The short raid code and the start time carry the weight in their rows. */
.raid-code { font-family: var(--mono); font-size: 13.5px; letter-spacing: .03em; color: var(--accent); }
.starts-at { font-size: 15px; font-weight: 750; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.countdown { font-variant-numeric: tabular-nums; }

/* The collect box: an empty square that becomes a green tick once the gold is in. */
.collect-box {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  border: 2px solid var(--border-strong); border-radius: 7px;
  background: var(--surface-2); color: transparent;
  font-size: 15px; font-weight: 800; cursor: default;
  transition: all .15s;
}
button.collect-box { cursor: pointer; }
button.collect-box:hover { border-color: var(--green-border); background: var(--green-soft); }
button.collect-box:disabled { opacity: .5; cursor: default; }
.collect-box.done {
  border-color: var(--green); background: var(--green-soft); color: var(--green);
}

/* "In group" is a good outcome, so it reads green rather than gold. */
.btn.in-group {
  background: var(--green-soft); color: var(--green); border-color: var(--green-border); font-weight: 700;
}
.btn.in-group:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
.badge.green  { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.badge.amber  { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.badge.red    { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }
.badge.blue   { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-border); }
.badge.slate  { background: var(--slate-soft); color: var(--slate); border-color: var(--slate-border); }

.slots { display: inline-flex; align-items: center; gap: 11px; min-width: 130px; }
.slots .bar { flex: 1; height: 9px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.slots .bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .3s; }
.slots .txt { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }

.cls { font-weight: 650; }
/* The class colours. Written in lower case with hyphens: a class attribute is
   split on spaces, so "cls-Death Knight" was two classes and neither of them was
   ever styled. Both spellings are kept for a moment in case anything still
   writes the old one. */
.cls-warrior,.cls-Warrior{color:#C69B6D}
.cls-paladin,.cls-Paladin{color:#F48CBA}
.cls-hunter,.cls-Hunter{color:#AAD372}
.cls-rogue,.cls-Rogue{color:#FFF468}
.cls-priest,.cls-Priest{color:#c9ccd4}
.cls-shaman,.cls-Shaman{color:#3B9CFF}
.cls-mage,.cls-Mage{color:#3FC7EB}
.cls-warlock,.cls-Warlock{color:#8788EE}
.cls-monk,.cls-Monk{color:#00FF98}
.cls-druid,.cls-Druid{color:#FF7C0A}
.cls-demon-hunter{color:#A330C9}
.cls-evoker,.cls-Evoker{color:#33937F}
.cls-death-knight{color:#C41E3A}
[data-theme="light"] .cls-rogue,[data-theme="light"] .cls-Rogue{color:#b39100}
[data-theme="light"] .cls-priest,[data-theme="light"] .cls-Priest{color:#6b7280}
[data-theme="light"] .cls-monk,[data-theme="light"] .cls-Monk{color:#00a865}

/* --------------------------------- tiers --------------------------------- */

.tier {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
  white-space: nowrap;
}
.tier i {
  width: 8px; height: 8px; border-radius: 3px; display: block;
  background: linear-gradient(135deg, var(--tier), color-mix(in srgb, var(--tier) 45%, #ffffff));
  box-shadow: 0 0 8px -1px var(--tier);
}
.tier-sm { padding: 1px 7px 1px 6px; font-size: 10.5px; gap: 5px; }
.tier-sm i { width: 6px; height: 6px; border-radius: 2px; }

.tier-tile {
  flex: 1 1 190px; min-width: 180px;
  padding: 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tier) 26%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tier) 9%, transparent), transparent 70%);
}
.tier-count {
  font-size: 26px; font-weight: 750; letter-spacing: -.8px;
  margin: 8px 0 2px; font-variant-numeric: tabular-nums;
}

/* -------------------------------- modal ---------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5, 7, 14, .62);
  display: grid; place-items: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(6px);
  animation: fade .18s;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px; max-height: 88vh; overflow: auto;
  animation: pop .22s cubic-bezier(.22,1,.36,1);
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal.wide { max-width: 900px; }
.modal.xwide { max-width: min(1500px, 96vw); }
/* A «File away» that has been pressed: the page is in Drafts. */
.btn.filed { color: var(--green); border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent); }
.btn.filed:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 24px; }
.modal-foot { padding: 18px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ------------------------------- toasts ---------------------------------- */

#toasts { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--surface-solid); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 13px 18px;
  font-size: 13.5px; max-width: 400px; animation: slide .24s cubic-bezier(.22,1,.36,1);
  transition: opacity .25s;
}
.toast.err { border-left-color: var(--red); }
.toast.ok  { border-left-color: var(--green); }
@keyframes slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* -------------------------------- notes ---------------------------------- */

.note {
  background: var(--amber-soft); border: 1px solid var(--amber-border); color: var(--amber);
  padding: 13px 16px; border-radius: 12px; font-size: 13px;
}
.note b { color: inherit; }
.note.info { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
[data-theme="light"] .note { color: #8a5a06; }

/* ---------------------------------- chat --------------------------------- */

.chat-layout { display: grid; grid-template-columns: 270px 1fr; gap: 20px; }
@media (max-width: 960px) { .chat-layout { grid-template-columns: 1fr; } }

.chat-threads {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 440px; overflow-y: auto;
  border-right: 1px solid var(--border); padding-right: 14px;
}
@media (max-width: 960px) { .chat-threads { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 14px; } }

.chat-thread {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 6px 10px; border: 1px solid transparent; border-radius: 12px;
  background: none; font: inherit; cursor: pointer; width: 100%;
  transition: background .16s, border-color .16s;
}
.chat-thread:hover { background: var(--surface-2); }
.chat-thread.active { background: var(--accent-soft); border-color: var(--accent-border); }
.chat-thread .meta { min-width: 0; flex: 1; }
.chat-thread .name { display: block; font-weight: 650; font-size: 13px; }
.chat-thread .preview {
  display: block; font-size: 12px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chat-title { font-size: 13px; color: var(--muted); margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }

.chat-log { display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; padding: 4px; }
.msg { max-width: 76%; align-self: flex-start; animation: rise .2s; }
.msg.mine { align-self: flex-end; }
.msg-head { font-size: 11px; color: var(--faint); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.msg.mine .msg-head { justify-content: flex-end; }
.msg-body {
  background: var(--surface-3); border: 1px solid var(--border);
  padding: 10px 14px; border-radius: 14px 14px 14px 5px;
  font-size: 13.5px; white-space: pre-wrap; word-break: break-word;
}
.msg.mine .msg-body {
  background: var(--accent-soft); border-color: var(--accent-border);
  border-radius: 14px 14px 5px 14px; color: var(--text);
}

.chat-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
.chat-form textarea { flex: 1; min-height: 46px; }

/* A message that has been shown but not yet acknowledged by the server. */
.msg.pending { opacity: .55; }
.msg-body a { text-decoration: underline; word-break: break-all; }

/* --------------------------------- auth ---------------------------------- */

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { justify-content: center; font-size: 22px; padding-bottom: 8px; }
.auth-sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 13.5px; }
.auth-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 22px; }
.auth-tabs button {
  flex: 1; border: none; background: none; font: inherit; font-weight: 600;
  padding: 8px; border-radius: 9px; cursor: pointer; color: var(--muted); transition: all .16s;
}
.auth-tabs button.active { background: var(--surface-solid); color: var(--accent); box-shadow: var(--shadow); }

.hidden { display: none !important; }

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

/* A quiet line at the top of a conversation, saying how long it is kept. */
.chat-note { text-align: center; padding: 4px 0 10px; }

/* A day's heading inside a history table: the date on the left, that day's
   totals on the right, with the lines of the day underneath it. */
tbody tr.day-head td {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding-top: 7px; padding-bottom: 5px; font-size: 12.5px;
}
tbody tr.day-head td b { letter-spacing: .01em; }
tbody tr.day-head + tr td { padding-top: 7px; }

/* The navigation is not shown until the account is known. Its entries read
   differently for a raid lead and for a booker, and a booker who works in gold
   must never see the word "Balance" at all — not even for the one frame between
   the page arriving and the account being fetched. */
.nav-booting { visibility: hidden; }

/* The Discord button on the sign-in page, in Discord's own colour so it reads as
   theirs rather than as ours. */
.btn.discord {
  width: 100%; justify-content: center; gap: 10px; padding: 11px;
  background: #5865f2; border-color: #5865f2; color: #fff; font-weight: 650;
}
.btn.discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }

/* The same colour, small, for the button in a table that opens a chat with
   somebody. It sits in a row, so it never stretches and never wraps. */
.btn.discord-dm {
  background: #5865f2; border-color: #5865f2; color: #fff; font-weight: 600;
  text-decoration: none; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.btn.discord-dm:hover { background: #4752c4; border-color: #4752c4; color: #fff; }

/* "or" with a rule either side of it. */
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }


/* ------------------------------ the card table ---------------------------
   An oval table with a wooden rail, seen from above: the other player's box at
   the top, yours at the bottom, the shoe and the two buttons down the side.
   Cards are drawn rather than pictured — a rank, a suit and a corner. */
.ptable {
  border-radius: 999px / 44%;
  padding: 14px;
  background: linear-gradient(180deg, #8a5a34, #6b4325 45%, #4e3019);
  box-shadow: inset 0 2px 0 rgba(255, 226, 186, .35), inset 0 -3px 6px rgba(0, 0, 0, .5), var(--shadow);
}
.pfelt {
  position: relative;
  border-radius: 999px / 46%;
  min-height: 300px;
  padding: 22px 18px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(120% 90% at 50% 38%, #2a8f77 0%, #166a52 45%, #0d4a3a 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .10), inset 0 12px 40px rgba(0, 0, 0, .35);
}

/* wins, losses and pushes, off to one side the way a table keeps score */
.pcount { display: flex; flex-direction: column; gap: 8px; min-width: 62px; }
.pcount span { display: flex; flex-direction: column; align-items: center; }
.pcount i {
  font-style: normal; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.pcount b {
  font-family: var(--mono); font-size: 14px; color: #fff; min-width: 46px; text-align: center;
  background: rgba(0, 0, 0, .28); border-radius: 6px; padding: 1px 0;
}

/* the two marked-out boxes the cards are laid in */
.pboxes { display: flex; flex-direction: column; gap: 12px; }
.pbox {
  position: relative;
  border: 2px solid rgba(255, 255, 255, .30);
  border-radius: 10px;
  min-height: 92px;
  padding: 20px 54px 8px 12px;
  display: flex; align-items: center;
  transition: border-color .2s, box-shadow .2s;
}
.pbox.turn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 185, 60, .22); }
.pbox-label {
  position: absolute; top: 5px; left: 12px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); font-weight: 700;
  max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbox-empty { font-size: 12px; color: rgba(255, 255, 255, .45); }
.pbox-score {
  position: absolute; right: -6px; top: 50%; transform: translate(100%, -50%);
  min-width: 38px; text-align: center;
  font-family: var(--mono); font-size: 15px; color: #fff;
  background: rgba(0, 0, 0, .32); border-radius: 8px; padding: 3px 0;
}
.pbox-score.bust { color: #ffb4b4; }
.pbox-score.best { color: #8ef0c4; }

/* the dealer: a shoe and a label, at the head of the table */
.pmiddle { flex: 1; display: flex; flex-direction: column; gap: 12px; max-width: 400px; }
.pdealer {
  display: flex; align-items: center; gap: 10px;
  align-self: center;
  background: rgba(0, 0, 0, .22); border-radius: 10px; padding: 6px 12px 6px 8px;
}
.pdealer-t { display: flex; flex-direction: column; line-height: 1.25; }
.pdealer-t b { color: #fff; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.pdealer-t i { font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, .6); }
.pdealer .pshoe { width: 34px; height: 46px; }
.pbox.free { border-style: dashed; }

/* what you can do about it */
.pright { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; width: 104px; }
.pshoe {
  height: 74px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #a12a2a 0 6px, #8d2222 6px 12px);
  border: 2px solid #f0e3cf;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}
.pbtn { width: 100%; justify-content: center; padding: 7px 10px; }
.pwait {
  text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .7);
  background: rgba(0, 0, 0, .22); border-radius: 8px; padding: 6px 4px;
}

.pcard {
  position: relative; display: inline-block;
  width: 44px; height: 62px; border-radius: 6px; margin-right: 6px;
  background: linear-gradient(160deg, #fffdf8 0%, #f2ece0 100%);
  color: #14110c; border: 1px solid #cfc6b2;
  font-family: var(--font); line-height: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: dealt .22s ease-out;
}
/* the rank in the corner and the suit across the face, the way a card is printed */
.pcard b { position: absolute; top: 4px; left: 5px; font-size: 15px; font-weight: 800; letter-spacing: -.5px; }
.pcard i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 25px; font-style: normal; opacity: .92; padding-top: 6px;
}
.pcard.red { color: #c0261c; }
.pcard.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .18) 0 4px, transparent 4px 8px),
    linear-gradient(160deg, #b03434, #7d1d1d);
  border-color: #f0e3cf; color: transparent;
}
.pcard.back::after {
  content: ""; position: absolute; inset: 5px; border-radius: 4px;
  border: 1px solid rgba(255, 235, 210, .55);
}
@keyframes dealt {
  from { transform: translate(26px, -34px) rotate(9deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.phand { display: flex; flex-wrap: wrap; }

@media (max-width: 720px) {
  .pfelt { flex-direction: column; border-radius: 26px; padding: 16px 12px; }
  .ptable { border-radius: 34px; }
  .pcount { flex-direction: row; }
  .pright { width: 100%; flex-direction: row; }
  .pshoe { width: 52px; height: 52px; }
  .pbox { padding-right: 12px; }
  .pbox-score { position: static; transform: none; margin-left: auto; }
}


/* --------------------------------- durak ---------------------------------
   The same felt, laid out for a different game: the other player's hand face
   down along the top, the talon and the trump at the left, what is being fought
   over in the middle, and your own hand across the bottom. */
.dufelt { flex-direction: column; align-items: stretch; gap: 10px; min-height: 340px; padding: 14px 18px; }

/* Everybody else across the top — several of them side by side if it ever comes
   to that — and you in the middle at the bottom, where you are sitting. */
.duseats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.duseat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 12px; border: 1px solid transparent; min-width: 180px;
  transition: border-color .2s, background .2s;
}
.duseat.turn { border-color: rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .16); }
.dumine { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; }
.duwho { display: flex; align-items: center; gap: 9px; }
.duwho .pav {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .3); color: #fff; font-weight: 700; font-size: 12px;
}
.duwho .pwho-t { display: flex; flex-direction: column; line-height: 1.2; color: #fff; font-size: 12.5px; }
.duwho .pwho-t .faint { color: rgba(255, 255, 255, .6) !important; }

.duhand { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; }
.duhand.small .pcard { width: 30px; height: 42px; margin-right: 4px; }
.duhand.small .pcard b { font-size: 12px; }
.duhand.small .pcard i { font-size: 11px; }
.duhand.mine { gap: 2px; }

.ducard-btn {
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 0;
  transition: transform .12s;
}
.ducard-btn.can:hover { transform: translateY(-8px); }
.ducard-btn[disabled] { cursor: default; }
.pcard.dim { opacity: .45; filter: saturate(.6); }
.pcard.sm { width: 30px; height: 42px; }

/* the middle: talon and trump on the left, the fight in the centre, what has
   been beaten stacked on the right */
.dumid {
  flex: 1; display: flex; align-items: center; gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 12px 0; min-height: 108px;
}
.dutalon { position: relative; display: flex; align-items: center; min-width: 104px; }

/* The two moves you can make, right by the talon in the middle of the felt. */
.duactions { display: flex; flex-direction: column; gap: 6px; min-width: 84px; }
.duactions .btn { padding: 4px 10px; font-size: 12px; justify-content: center; }
.dutalon-back { position: absolute; left: 22px; top: -4px; transform: rotate(4deg); z-index: 1; }
.dutrump { position: relative; z-index: 2; }
.dutrump .pcard { transform: rotate(-90deg); }
.dutalon-n {
  position: absolute; bottom: -16px; left: 0; font-size: 10.5px; color: rgba(255, 255, 255, .62); white-space: nowrap;
}

.dubattle { flex: 1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.dupair { position: relative; display: inline-block; padding: 0 16px 14px 0; }
.dubeat { position: absolute; left: 16px; top: 14px; transform: rotate(12deg); }

.dudiscard {
  display: flex; flex-direction: column; align-items: center; min-width: 54px;
  color: rgba(255, 255, 255, .7);
}
.dudiscard-n { font-family: var(--mono); font-size: 16px; color: #fff; }
.dudiscard .faint { color: rgba(255, 255, 255, .55) !important; }

@media (max-width: 720px) {
  .dumid { flex-direction: column; align-items: stretch; gap: 18px; }
  .dutalon { justify-content: center; }
  .dutalon-n { position: static; text-align: center; }
}

/* ------------------------- the rest of the card room ----------------------
   A real table, seen from above: a wooden rail around a green oval, players
   seated at the rim with their name and chips under them, the pot in the middle.
   The game decides what lies on the felt; the table around it never changes. */
.arena-felt { flex-direction: column; align-items: stretch; gap: 0; padding: 6px; background: none; box-shadow: none; }
.oval-wrap { padding: 34px 0 40px; display: flex; justify-content: center; }
.oval {
  position: relative;
  width: min(660px, 100%);
  min-height: 330px;
  border-radius: 50% / 42%;
  background:
    radial-gradient(120% 90% at 50% 34%, #2f9b7f 0%, #17795e 42%, #0c4c3b 100%);
  box-shadow:
    0 0 0 16px #6b4325,
    0 0 0 19px #4a2d18,
    inset 0 0 0 2px rgba(255, 255, 255, .14),
    inset 0 26px 60px rgba(0, 0, 0, .38),
    0 26px 60px -18px rgba(0, 0, 0, .8);
  display: grid; place-items: center;
  padding: 34px 26px;
}
/* the house name across the felt, and the light coming off the rail */
.oval::before {
  content: "THUNDERBOOST";
  position: absolute; top: 26%; left: 50%; transform: translateX(-50%);
  font-size: 15px; letter-spacing: .42em; font-weight: 700;
  color: rgba(255, 255, 255, .085); pointer-events: none; white-space: nowrap;
}
.oval::after {
  content: ""; position: absolute; inset: -16px; border-radius: 50% / 42%;
  background: linear-gradient(180deg, rgba(255, 226, 186, .22), transparent 22%, transparent 78%, rgba(0, 0, 0, .3));
  pointer-events: none;
}

/* the seats around the rim */
.oseat {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 150px; text-align: center;
}
.oseat.top { top: -30px; }
/* three or more at the table: everybody else lines up along the top */
.oseats-top {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; justify-content: center;
}
.oseats-top .oseat { position: static; transform: none; width: 118px; }
.ocode { font-family: var(--mono); letter-spacing: .18em; color: var(--accent); font-size: 16px; }
.oseat.bottom { bottom: -36px; }
.oseat .oav {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(180deg, #3a3129, #221c16);
  border: 3px solid #8a5a34;
  display: grid; place-items: center; color: #f3ece0; font-weight: 700; font-size: 19px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
/* Whose turn it is: the whole disc lights up rather than a thin ring around it,
   and the letter stays legible on top of the gold. */
.oseat.turn .oav {
  background: radial-gradient(circle at 34% 26%, #ffe9ab, #f0b93c 58%, #cf9319);
  border-color: #fff3d0; color: #2a1d05;
  box-shadow: 0 0 0 5px rgba(240, 185, 60, .30), 0 0 26px rgba(240, 185, 60, .55),
    0 6px 16px rgba(0, 0, 0, .55);
  animation: seatpulse 1.8s ease-in-out infinite;
}
@keyframes seatpulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(240, 185, 60, .30), 0 0 26px rgba(240, 185, 60, .5),
    0 6px 16px rgba(0, 0, 0, .55); }
  50% { box-shadow: 0 0 0 9px rgba(240, 185, 60, .16), 0 0 34px rgba(240, 185, 60, .75),
    0 6px 16px rgba(0, 0, 0, .55); }
}
.oturn-tag {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: #2a1d05; background: var(--accent-grad); border-radius: 999px; padding: 1px 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5); white-space: nowrap;
}
.oseat.bottom .oturn-tag { top: auto; bottom: -14px; }
.oname {
  color: #f3ece0; font-size: 12.5px; font-weight: 600; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ochips, .onote {
  font-family: var(--mono); font-size: 11.5px; color: #ffe08a;
  background: rgba(0, 0, 0, .5); border-radius: 6px; padding: 1px 9px;
}
.onote { color: rgba(255, 255, 255, .66); font-family: var(--font); }

/* the pot, with a little stack of chips beside it */
.opot { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0; }
.opot b { color: #fff; font-family: var(--mono); font-size: 17px; }
.opot .faint { color: rgba(255, 255, 255, .6) !important; }
.ostack { display: inline-flex; }
.ochip {
  position: relative; width: 22px; height: 22px; border-radius: 50%; margin-left: -9px;
  background:
    conic-gradient(from 0deg, var(--c) 0 10%, #fff8ea 0 20%, var(--c) 0 30%, #fff8ea 0 40%,
      var(--c) 0 50%, #fff8ea 0 60%, var(--c) 0 70%, #fff8ea 0 80%, var(--c) 0 90%, #fff8ea 0 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55), inset 0 -2px 0 rgba(0, 0, 0, .28);
}
.ochip::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.ochip:first-child { margin-left: 0; }
.ochip.c1 { --c: #d94f4f; }
.ochip.c2 { --c: #e8c34a; }
.ochip.c3 { --c: #4a8fd9; }

.ocentre { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ocentre .faint { color: rgba(255, 255, 255, .62) !important; }
.ofree { color: rgba(255, 255, 255, .8); text-align: center; line-height: 1.5; }
.board-centre { padding: 4px 0; }
/* The seats hang over the rim of the table, so the board is held clear of them —
   a chess board that runs under somebody's face is unreadable. */
.oval.chess .board-centre, .oval.checkers .board-centre { margin: 30px 0 42px; }
.oval.chess, .oval.checkers { padding: 44px 26px 50px; }
.odice { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ohand { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
/* the five in the middle, with the ones still to come marked out */
.oboard { display: flex; gap: 6px; justify-content: center; }
.pcard.slot {
  background: rgba(0, 0, 0, .18); border: 1px dashed rgba(255, 255, 255, .28);
  box-shadow: none; animation: none;
}
/* what a player has pushed in on this street, sitting in front of them */
.obet {
  font-family: var(--mono); font-size: 12px; color: #2a1d05;
  background: var(--accent-grad); border-radius: 999px; padding: 1px 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
/* The seats hang over the rim, so what sits at the top and the bottom of the
   felt is held clear of them — otherwise a player's cards land on their name. */
.oval.poker .ohand.top { margin-top: 34px; }
.oval.poker .ohand.bottom { margin-bottom: 24px; }
.oval.dice .ocentre > .odice:first-child { margin-top: 30px; }

.orow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* the date a Today/Tomorrow chip stands for, quieter than the word itself */
.chipdate { opacity: .7; font-size: .92em; margin-left: 2px; }

/* the coefficient sheet: a line per booster, a narrow column per day */
table.coef { font-size: 12.5px; }
table.coef th, table.coef td { padding: 3px 5px; }
.coef-day { text-align: center; font-size: 10.5px; line-height: 1.2; white-space: nowrap; }
/* The line number down the left of the sheet: narrow, quiet, and never wider
   than the two digits it usually holds. */
/* The line that says a part of the run starts here: a thicker rule and the
   name of the part, so a lead reads "everybody below is only TG". */
tr.part-head td {
  background: var(--surface-2, rgba(255,255,255,.03));
  border-top: 2px solid var(--accent);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 10px;
}

.coef-no { width: 34px; text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.coef-name { min-width: 150px; }
.coef-name input { width: 100%; font-weight: 700; }
table.coef input {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: inherit; font: inherit; padding: 2px 4px; text-align: center;
}
table.coef input:hover { border-color: var(--border); }
table.coef input:focus { border-color: var(--accent); background: var(--surface-3); outline: none; }
.coef-cell { padding: 1px 2px !important; }
/* The box: a step down, the coefficient, a step up, and the day-off letter in
   the corner of it. */
.cc { position: relative; display: inline-block; }
.cc .coef-in { width: 56px; padding-right: 14px; font-size: 13.5px; }
/* Chill days: typed in, or stepped one at a time either side of the number. */
.chillbox { display: inline-flex; align-items: center; gap: 1px; }
.chillbox .coef-chill { width: 40px; }
.cstep {
  width: 13px; height: 18px; padding: 0; line-height: 16px; text-align: center;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  color: var(--faint); font-size: 12px; cursor: pointer; opacity: .5;
}
.cstep:hover { opacity: 1; color: var(--accent); border-color: var(--border); }
.cmk {
  position: absolute; right: 2px; top: 1px;
  width: 11px; height: 11px; line-height: 11px;
  text-align: center; font-size: 8.5px; font-weight: 700; border-radius: 3px;
  color: var(--faint); opacity: .35; cursor: pointer; user-select: none;
}
.cmk:hover { opacity: .85; }
.cmk.on { opacity: 1; color: #0d1b12; background: var(--green); }
.coef-cell.off { background: rgba(52, 211, 153, .12); }
.coef-ro { display: inline-block; min-width: 40px; text-align: center; }
.coef-chill { width: 54px; }
.coef-bonus { width: 54px; }

/* a team's purse and the two cuts taken off it, read as one line */
.teamcut { display: flex; gap: 8px; flex: 1 1 340px; min-width: 300px; }
.mini {
  flex: 1; padding: 9px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); min-width: 0;
}
.mini.keep { border-color: var(--accent-border); background: var(--accent-soft); }
.mini-label {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-value { font-size: 17px; font-weight: 700; margin-top: 2px; }
.mini.keep .mini-value { color: var(--accent); }
.mini-note { font-size: 10.5px; color: var(--faint); margin-top: 1px; }

/* the clock on a turn, and on a table waiting for somebody */
.movetick { font-family: var(--mono); letter-spacing: .02em; }
.movetick.red { background: rgba(220, 70, 70, .18); color: #ff9d9d; border-color: rgba(220, 70, 70, .5); }

/* the end of a game, said in the middle of the screen */
.shout {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px);
  cursor: pointer; animation: shout-in .2s ease-out;
}
.shout.going { opacity: 0; transition: opacity .25s; }
.shout-card {
  text-align: center; padding: 30px 54px; border-radius: 22px;
  background: var(--surface-solid); border: 1px solid var(--border);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
  animation: shout-pop .34s cubic-bezier(.2, 1.5, .4, 1);
}
.shout.won .shout-card { border-color: var(--green); }
.shout.lost .shout-card { border-color: var(--red); }
.shout-face { font-size: 54px; line-height: 1; }
.shout-line { margin-top: 10px; font-size: 21px; font-weight: 700; letter-spacing: .02em; }
.shout-sum { margin-top: 6px; font-family: var(--mono); font-size: 30px; font-weight: 800; }
.shout.won .shout-sum { color: var(--green); }
.shout.lost .shout-sum { color: var(--red); }
.shout.draw .shout-sum { color: var(--faint); font-size: 18px; }
.shout-why { margin-top: 8px; color: var(--faint); font-size: 12.5px; }
.shout-why:empty { display: none; }
@keyframes shout-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shout-pop {
  from { transform: scale(.82) translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* a toast that takes you somewhere when you press it */
.toast.clickable { cursor: pointer; }
.toast.clickable:hover { border-color: var(--accent); }
.toast-go {
  margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

/* what beats what, at the foot of the poker page */
.pguide { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 8px 22px; }
.pgrow {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
}
.pgrank {
  width: 22px; flex: none; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--faint);
}
.pgcards { flex: none; display: flex; }
.pgcards .pcard { margin-right: 3px; }
.pgname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pgname b { color: var(--accent); font-size: 13px; }
.pgname span { line-height: 1.35; }
@media (max-width: 720px) {
  .pgrow { flex-wrap: wrap; }
  .pgname { flex-basis: 100%; }
}
.arena-log { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* what a hand is worth, called out beside the cards the way a casino does */
.combo {
  background: rgba(0, 0, 0, .45); color: #ffe08a; border-radius: 999px;
  padding: 3px 12px; font-size: 12px; letter-spacing: .04em; white-space: nowrap;
}
.ducard-btn.picked .pcard { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--accent), 0 8px 16px rgba(0, 0, 0, .5); }

/* dice, drawn as pips rather than numbers */
.dice-row { display: inline-flex; gap: 10px; }
.die {
  width: 48px; height: 48px; border-radius: 10px; background: #f7f4ec;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); animation: dealt .25s ease-out;
}
.die i { width: 8px; height: 8px; border-radius: 50%; background: transparent; justify-self: center; align-self: center; }
.die i.on { background: #14110c; }
.die.waiting {
  display: grid; place-items: center; color: #b3a58c; font-size: 20px; font-family: var(--mono);
  background: rgba(0, 0, 0, .25); box-shadow: none; border: 1px dashed rgba(255, 255, 255, .3);
}
.dtotal { color: #fff; font-family: var(--mono); font-size: 17px; }

/* the board, for draughts and chess */
.board {
  display: inline-block; border-radius: 6px; overflow: hidden;
  border: 5px solid #4e3019;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 226, 186, .25);
}
.sq { transition: filter .12s; }
.sq.live { cursor: pointer; }
.sq.live:hover { filter: brightness(1.1); }
.brow { display: flex; }
.sq {
  width: 40px; height: 40px; border: 0; padding: 0; cursor: default;
  background: #e8d9bd; display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 27px; line-height: 1;
}
.sq.d { background: #9a6a41; }
/* The square you have picked up, and nothing else — no moves are marked out. */
.sq.from::after { content: ""; position: absolute; inset: 0; background: rgba(240, 185, 60, .35); }
.sq:disabled { cursor: default; }

/* ------------------------ the rail beside the board -----------------------
   Whose move it is, and the minute counting down, kept off the felt so it can be
   read at a glance without hunting for it. */
.playbox { display: flex; align-items: center; gap: 16px; }
.playbox .ptable { flex: 1; min-width: 0; }
.turnrail {
  flex: 0 0 148px; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 12px; border-radius: 18px;
  background: var(--panel-2, rgba(255, 255, 255, .04));
  border: 1px solid var(--line); text-align: center;
}
.turnrail.mine { border-color: rgba(240, 185, 60, .55); background: rgba(240, 185, 60, .08); }
.tr-who { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.tr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.turnrail.mine .tr-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(240, 185, 60, .22);
  animation: seatpulse 1.8s ease-in-out infinite; }
.turnrail.mine .tr-who b { color: var(--accent); }
/* the clock: a ring that empties, with the seconds in the middle of it */
.tr-clock {
  --p: 100%;
  position: relative; width: 88px; height: 88px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p)), rgba(255, 255, 255, .08) 0);
  display: grid; place-items: center;
  transition: background .4s linear;
}
.tr-clock::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
}
.tr-clock.low { background: conic-gradient(var(--red) calc(var(--p)), rgba(255, 255, 255, .08) 0); }
.tr-secs {
  position: relative; z-index: 1; font-family: var(--mono); font-size: 21px; font-weight: 700;
}
.tr-clock.low .tr-secs { color: var(--red); }
.tr-note { font-size: 11.5px; color: var(--muted); }
.tr-miss { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tr-pip {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); margin: 0 2px;
}
.tr-pip.gone { background: var(--red); }
.tr-misstext { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 820px) {
  .playbox { flex-direction: column; }
  .turnrail { flex: none; width: 100%; flex-direction: row; justify-content: space-around; }
  .tr-clock { width: 62px; height: 62px; }
  .tr-secs { font-size: 15px; }
}

.cpiece { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.cpiece.mine { color: #fffdf7; }
.cpiece.theirs { color: #16120b; }

.dpiece {
  width: 28px; height: 28px; border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 2px 5px rgba(0, 0, 0, .5);
}
.dpiece.light {
  background: radial-gradient(circle at 34% 28%, #fffaf0, #e2d3b4 62%, #c8b795);
  border: 1px solid #b8a684;
}
.dpiece.dark {
  background: radial-gradient(circle at 34% 28%, #4a3a2a, #241a10 62%, #120c06);
  border: 1px solid #0b0704;
}
.dpiece.king::after {
  content: "★"; display: grid; place-items: center; height: 100%;
  font-size: 14px; color: var(--accent);
}

@media (max-width: 720px) {
  .oval { min-height: 300px; border-radius: 40px; box-shadow: 0 0 0 10px #6b4325, 0 0 0 12px #4a2d18,
    inset 0 0 0 2px rgba(255, 255, 255, .12); }
  .sq { width: 34px; height: 34px; font-size: 23px; }
  .dpiece { width: 24px; height: 24px; }
  .die { width: 40px; height: 40px; }
}


/* the chip purse, at the top of its own page */
.chip-hero { display: flex; align-items: center; gap: 12px; }
.chip-hero b { font-family: var(--mono); font-size: 30px; color: var(--accent); }
.chip-hero .ostack { transform: scale(1.3); margin-right: 8px; }


/* the state of a game an administrator is watching, printed as it stands */
.tb-state {
  margin: 6px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2, rgba(255, 255, 255, .04)); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; line-height: 1.45;
  max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  color: var(--muted);
}


/* --------------------------------- the bell -------------------------------
   A count on the button, and a panel hanging under it with what happened while
   nobody was looking. */
.bellwrap { position: relative; display: inline-flex; }
.bell-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.bellbox {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(380px, 92vw); max-height: min(460px, 70vh); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 46px -12px rgba(0, 0, 0, .65);
}
.bell-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.bell-list { overflow: auto; }
.bell-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.bell-item {
  display: flex; gap: 10px; width: 100%; text-align: left; align-items: flex-start;
  padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: inherit; cursor: pointer;
}
.bell-item:hover { background: var(--panel-2, rgba(255, 255, 255, .04)); }
.bell-item.unread { background: rgba(240, 185, 60, .07); }
.bell-item.unread::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  margin: 7px 0 0 -4px; flex: none;
}
.bell-ico { font-size: 15px; line-height: 1.3; flex: none; }
.bell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-text b { font-size: 13px; font-weight: 600; }
.bell-body {
  font-size: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bell-when { font-size: 11px; color: var(--muted); opacity: .8; }


/* poker with more than two at the table: everybody else along the top */
.pseats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.pseat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 8px; border-radius: 12px; min-width: 92px;
  background: rgba(0, 0, 0, .18);
}
.pseat.turn { box-shadow: 0 0 0 2px rgba(240, 185, 60, .55); background: rgba(240, 185, 60, .12); }
.pseat.out { opacity: .45; }
.pseat .faint { color: rgba(255, 255, 255, .72) !important; }
.pseat .ohand { gap: 3px; }


/* a word from the administration, on the messages page */
.admsg {
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2, rgba(255, 255, 255, .03));
}
.admsg.unread { border-color: rgba(240, 185, 60, .55); background: rgba(240, 185, 60, .08); }
.admsg .msg-body { margin-top: 4px; white-space: pre-wrap; }


/* ------------------------- the raid page, for a lead ----------------------
   The details are a reference and stay narrow on the left; the buyers — the
   thing the raid is actually run from — take the rest of the width and start
   level with them. The booking form, when there is one, drops onto its own row
   underneath. */
.raidtop { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.raidtop > .raidleft { flex: 0 0 300px; max-width: 300px; }
.raidtop > .raidright { flex: 1 1 520px; min-width: 0; }
.raidtop > .raidright > .card { margin: 0; }
.raidtop > .raidwide { flex: 1 1 100%; }
@media (max-width: 900px) {
  .raidtop > .raidleft { flex: 1 1 100%; max-width: none; }
}

/* the three figures at the top of a raid, said small */
.card.mini { padding: 0; }
.card-body.stat.mini { padding: 8px 12px; }
.card-body.stat.mini .label { font-size: 10px; letter-spacing: .1em; }
.card-body.stat.mini .value { font-size: 18px; line-height: 1.2; }
.card-body.stat.mini .sub { font-size: 10.5px; }

/* ready, at a table that is still filling */
.oready { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.oready .btn { white-space: nowrap; }

/* «Есть новое» — вместо того, чтобы дёргать страницу под руками */
.stale-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 24px);
  display: none; align-items: center; gap: 10px;
  padding: 8px 10px 8px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); z-index: 60;
  font-size: 13px; opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.stale-bar.on { display: flex; opacity: 1; transform: translate(-50%, 0); }

/* ------------------- уведомления не лезут на страницу ---------------------
   Панель колокольчика — это окно, а не плёнка: под ней ничего не должно
   просвечивать, и всплывающие сообщения не должны падать поверх неё. Поэтому
   у панели плотный фон и свой слой, а тосты уехали в левый нижний угол, где
   они никому не мешают. */
.bellbox {
  /* Solid, whatever the theme, and above anything that might drift under it.
     A little off the right edge so it is not glued to the side of the screen. */
  background: var(--surface-solid);
  backdrop-filter: none;
  z-index: 300;
  right: -6px;
  box-shadow: 0 24px 60px -14px rgba(0, 0, 0, .75);
}
.bell-head, .bell-list, .bell-item { background: var(--surface-solid); }
.bell-item:hover { background: var(--surface-2); }
#toasts {
  right: auto;
  left: 22px;
  bottom: 22px;
  z-index: 180;
  max-width: min(420px, calc(100vw - 44px));
}
@keyframes slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* --------------------- админка без горизонтальной прокрутки ---------------
   Таблицы в панели были шире экрана, и чтобы увидеть баланс приходилось
   листать вбок. Здесь всё то же самое, только плотнее: мельче шрифт, уже поля,
   роли — в две строки вместо одной длинной. */
#view .card .table-wrap { overflow-x: auto; }
.admin-tight table { font-size: 12px; }
.admin-tight th, .admin-tight td { padding: 5px 7px; }
.admin-tight .check { font-size: 11.5px; margin-right: 4px !important; white-space: nowrap; }
.admin-tight .rolecell { display: flex; flex-wrap: wrap; gap: 2px 6px; max-width: 240px; }
.admin-tight select { font-size: 12px; padding: 3px 6px; }
.admin-tight input[type="number"] { font-size: 12px; padding: 3px 6px; }
.admin-tight .btn.sm { padding: 3px 7px; font-size: 11.5px; }
.admin-tight .badge { font-size: 10.5px; padding: 1px 6px; }
.admin-tight .discord-pill { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

/* ------------------- бронь и чат рядом, а не друг под другом --------------- */
.raidpair { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.raidpair > * { flex: 1 1 420px; min-width: 0; margin: 0; }
.raidpair .chat-list { max-height: 340px; }
@media (max-width: 960px) { .raidpair > * { flex: 1 1 100%; } }


/* ------------------- the raid details, said in fewer pixels ---------------
   It is a reference card, not the work: narrow, tight rows, small type. The
   seats beside it are what the page is actually for. */
.raidtop > .raidleft { flex: 0 0 268px; max-width: 268px; }
.raidleft .card-head h2 { font-size: 13px; }
.raidleft .card-body { padding: 8px 12px; }
.raidleft .info-row,
.raidleft .row { padding: 3px 0; font-size: 12px; }
.raidleft .badge { font-size: 10.5px; padding: 1px 6px; }
.raidleft .note { padding: 8px 10px; font-size: 12px; }
@media (max-width: 900px) {
  .raidtop > .raidleft { flex: 1 1 100%; max-width: none; }
}

/* резерв: место в очереди, а не в рейде */
.row-reserve > td { opacity: .82; }
.row-reserve { background: rgba(240, 185, 60, .045); }

/* таблица слотов в рейде — плотно, чтобы влезала без прокрутки вбок */
#spots-card table { font-size: 12px; }
#spots-card th, #spots-card td { padding: 5px 7px; }
#spots-card .btn.sm { padding: 3px 7px; font-size: 11.5px; }
#spots-card .badge { font-size: 10.5px; padding: 1px 6px; }
#spots-card .tier { font-size: 10px; }
.copyable { font: inherit; padding: 1px 6px !important; }

/* ------------------------- the booked spots, tighter -----------------------
   Whoever runs the place sees every column there is — the shop, who sold it,
   the tick that moves buyers — and on a laptop that used to run off the edge
   into a scrollbar that never went away. The same table, written smaller: less
   air in the cells, smaller badges and buttons, and the columns that hold a
   word rather than a sentence given only the width of the word. */
#spots-card table { font-size: 12.5px; }
#spots-card thead th { padding: 5px 6px; font-size: 9.5px; letter-spacing: .05em; }
#spots-card tbody td { padding: 4px 6px; }
#spots-card .badge, #spots-card .cls { font-size: 10.5px; padding: 1px 5px; }
#spots-card .btn.sm { padding: 2px 6px; font-size: 11px; }
#spots-card td.pick, #spots-card th.pick { width: 22px; padding-left: 8px; padding-right: 0; }
#spots-card td.pick input { margin: 0; cursor: pointer; }
#spots-card .faint.small, #spots-card .small { font-size: 10.5px; }

/* The panel is kept in four drawers rather than one very long page; the row of
   buttons above says which one is open, and the rest are simply not drawn. */
#admin-tabs { position: sticky; top: 0; z-index: 3; padding: 6px 0; background: var(--bg); }
.admin-sec[hidden] { display: none; }
.admin-sec > .card + .card, .admin-sec > .grid + .card { margin-top: 14px; }

/* An order with something still owed on it: a warm line down the side, so a
   page of them can be read at a glance rather than cell by cell. */
tr.todo-row > td:first-child { box-shadow: inset 3px 0 0 var(--amber, #f0b93c); }
tr.todo-row { background: rgba(240, 185, 60, .05); }
.tick-done { color: var(--green, #4caf7d); font-weight: 700; }

/* A run nobody can book onto any more reads as closed from across the table: the
   whole row goes quiet rather than only the badge at the end of it. */
tr.row-locked > td, tr.row-done > td, tr.row-off > td {
  color: var(--muted);
  background: rgba(255, 255, 255, .022);
}
tr.row-locked .raid-code, tr.row-done .raid-code, tr.row-off .raid-code { color: var(--muted); }
tr.row-locked .badge, tr.row-done .badge, tr.row-off .badge { opacity: .75; }
tr.row-locked > td b, tr.row-done > td b, tr.row-off > td b { font-weight: 500; }
tr.row-off > td { text-decoration-color: var(--red); opacity: .8; }
tr.row-locked:hover > td, tr.row-done:hover > td, tr.row-off:hover > td {
  color: var(--text);
  background: var(--panel-2, rgba(255, 255, 255, .05));
}

/* ------------------------------- notes in a row ---------------------------
   A note is the thing people actually read off this table, so it is written in
   the same ink as everything else rather than whispered in grey. It keeps to one
   line — a long note used to push the row down and the table out of shape — and
   the whole of it opens under the pointer, or under the keyboard focus. */

/* A width, not a suggestion: max-width on a table cell is advice the browser is
   free to ignore, and it did — one long note widened the whole table and the
   scrollbar at the bottom moved with it. */
.notecell { width: 240px; min-width: 240px; max-width: 240px; }
.notecell .noteline { max-width: 224px; }
.noteline {
  position: relative;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: default;
  outline: none;
}
.noteline .notetext.lock { color: var(--amber, #f0b93c); }

/* The whole note, in a box fixed to the window rather than hung inside the cell.
   That is the whole trick: it lives on <body>, outside every scrolling area, so
   opening it can neither widen the table nor shove the horizontal scrollbar
   under somebody's hand. It is read, not poked at — pointer-events are off, and
   a press on the line itself copies the note. */
.note-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  display: none;
  max-width: min(460px, 90vw);
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--panel, #17140e);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  /* Kept as it was typed: the line breaks in a note mean something. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  pointer-events: none;
}
.note-tip.on { display: block; }

/* The line under the pointer says it can be read and copied. */
.noteline[data-note] { cursor: pointer; }

/* ---------------------------- clients in reserve --------------------------
   A sheet, kept on the site. Every cell is edited where it stands, so a cell
   looks like a cell until the pointer is on it — and the colour down the left of
   a row says where that row stands without anybody reading a word. */

table.reserve td { vertical-align: middle; }
.rcell {
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rcell:hover { border-color: var(--border); background: rgba(255, 255, 255, .03); }
.rcell:focus {
  border-color: var(--accent, #f0b93c);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 2px rgba(240, 185, 60, .18);
}
table.reserve .rnote .rcell { font-weight: 600; color: var(--text); }
table.reserve select.rpick,
table.reserve input.rpick {
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

/* Where a row stands, said in colour along its edge. */
table.reserve tr[data-row] > td:first-child { border-left: 3px solid transparent; }
table.reserve tr.r-waiting  > td:first-child { border-left-color: #f0b93c; }
table.reserve tr.r-reserved > td:first-child { border-left-color: #6ea8fe; }
table.reserve tr.r-booked   > td:first-child { border-left-color: #7fd8a0; }
table.reserve tr.r-done     > td:first-child { border-left-color: #4caf7d; }
table.reserve tr.r-refused  > td:first-child { border-left-color: var(--red); }
table.reserve tr.r-done > td { opacity: .7; }
table.reserve tr.r-refused > td { opacity: .6; }

/* ---------------------------- the seats of a VIP run ----------------------
   Four or five people, and which classes they are is the shape of the run. The
   letters sit above the counter in the class colours, an empty seat is a dot,
   and the whole thing takes no more room in the table than the counter did. */
.vipseats { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.vipline { display: inline-flex; gap: 3px; align-items: center; line-height: 1; }
.vipseat {
  min-width: 15px;
  padding: 1px 2px;
  border-radius: 3px;
  font: 700 11px/1.2 var(--mono, ui-monospace), monospace;
  text-align: center;
  background: rgba(255, 255, 255, .05);
}
.vipseat.free { color: var(--muted); background: none; font-weight: 400; }

/* Where a run has got to. A live pull pulses gently; a kill is quiet and green,
   because a boss that is down is news that has already happened. */
.bossnow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  font: 600 11px/1.5 system-ui, sans-serif;
  color: var(--text);
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bossnow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.bossnow.pull { border-color: rgba(240, 185, 60, .5); color: var(--amber, #f0b93c); }
.bossnow.pull .dot { background: var(--amber, #f0b93c); animation: bosspulse 1.6s ease-in-out infinite; }
.bossnow.done { border-color: rgba(90, 200, 130, .45); color: var(--green, #4caf7d); }
.bossnow.done .dot { background: var(--green, #4caf7d); }
@keyframes bosspulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- the same buyer twice on one run ------------------------------------ */
/* A duplicate is money the run cannot deliver, so it is not a subtle mark: the
   name goes red and wears an exclamation, and a line above the roster says how
   many there are before anybody reads the seats. */
.copyable.is-dupe,
.copyable.is-dupe .faint { color: #ff5f56 !important; font-weight: 700; }
.dupe-mark {
  display: inline-block;
  margin-left: 4px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(220, 38, 32, .9);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: help;
}
.dupe-bar {
  margin: 0 14px 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 95, 86, .45);
  background: rgba(190, 32, 26, .16);
  color: #ffb4ae;
  font-size: 13px;
  font-weight: 600;
}

/* ---- what changed, update by update -------------------------------------- */
.update-notes { margin: 0; padding-left: 20px; }
.update-notes li { margin: 5px 0; line-height: 1.5; }

/* How far a run got is read down the column, so it is set in the ordinary
   colour and a little heavier rather than greyed out. */
.bosses-cell { font-weight: 700; color: var(--text); }

/* ---------------------- the spots table, and no scrollbar ------------------
   The table had columns of its own choosing: an order number, a shop and a note
   each took whatever width their longest value wanted, and the whole thing ran
   off the side of the screen. A bar along the bottom of a table people read from
   left to right all evening is not a fix, it is the problem. So the columns are
   given widths, the long ones ellipsis, and the table is told to fit. */
/* The columns take the width their contents need — a name is read, not guessed
   at, and "Уловлен…" is no use to anybody inviting somebody. Only the two that
   have no natural width are pinned: the note, which can be a paragraph, and the
   buttons, which must never be cut. */
#spots-card table { table-layout: auto; width: 100%; }
#spots-card td.notecell, #spots-card th.notecell,
#spots-card .notecell { width: 190px; min-width: 0; max-width: 190px; }
#spots-card .notecell .noteline { max-width: 176px; }
/* Nothing is allowed out of the note's column any more: the whole note is drawn
   in a box fixed to the window, so the cell itself only ever holds the one
   clipped line it has room for. */
#spots-card td.notecell { overflow: hidden; }
/* The wrapper keeps its ordinary scrolling: with the table laid out to fit there
   is nothing to scroll, so no bar is drawn — and on a very narrow screen there
   is one, which is better than a column of buttons nobody can reach. */

/* What each column is worth, in the order they are drawn. Anything not named
   here shares what is left. The buttons at the end are never cut: they are what
   the row is worked with, so the column is given room for all of them and is
   allowed to hold its own width whatever else is on the row. */
#spots-card th.pick { width: 26px; }
/* Room for every button that can be on a row at once: message, the two nudges,
   the clear, the two arrows that move the row, and either Reserve or Give a
   spot — with the pencil and the cross after them on a row of one's own. The
   arrows were added after this width was set, and the buttons spilled past the
   column and pushed the table wider, which is where the scrollbar came back
   from. */
#spots-card th.acts, #spots-card td.acts { width: 240px; min-width: 240px; overflow: visible; }
#spots-card td.acts { white-space: nowrap; text-overflow: clip; }
#spots-card td.acts .btn.sm { padding: 2px 6px; }
#spots-card thead th.collect { width: 66px; }

/* Every column but the note takes only the width its contents need, so the
   price sits right beside "pays in" instead of half a screen away, and all the
   room left over goes to the note. The note's cell is told it needs no room of
   its own (max-width: 0) so a long note cannot widen the table — it is cut to
   the space it is given and opens in full under the pointer. */
#spots-card thead th:not(.notecell):not(.acts) { width: 1%; white-space: nowrap; }
#spots-card td.notecell, #spots-card th.notecell { width: auto; min-width: 160px; max-width: 0; }
#spots-card .notecell .noteline { max-width: 100%; }

/* ------------------------- the price panel on the board -------------------
   What spots have been going for, floating over the corner of the board so a
   booker can quote without leaving the page. See-through on purpose: it sits on
   top of the list and must not hide it. Management sets the size, the colour and
   the lettering; everything else here is only how it holds together. */
.price-panel {
  /* The two the panel is painted with, given values here so they are never
     nothing: management overwrites them on the element itself. */
  --panel-ink: #f2d585;
  --panel-fade: .72;
  --pp-sub: .82em;   /* the parts line under a bundle; management may set it in px */
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(14, 12, 8, var(--panel-fade, 0.72));
  color: var(--panel-ink, #f2d585);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}
.price-panel .price-head { display: flex; align-items: center; gap: 6px; }
.price-panel .price-head .spacer { flex: 1; }
.price-panel .price-body { overflow: auto; margin-top: 6px; }
.price-panel table { width: 100%; border-collapse: collapse; font-size: inherit; }
.price-panel td { padding: 2px 6px 2px 0; white-space: nowrap; }
.price-panel td.num { text-align: right; }
.price-panel .faint { opacity: 0.65; }
.price-panel.shut .price-body { display: none; }
.price-panel.shut { max-height: none !important; }
.price-panel .pp-days { display: inline-flex; gap: 3px; margin-left: 4px; }
.price-panel .pp-day { font: inherit; font-size: .85em; line-height: 1.4; padding: 1px 7px; border-radius: 999px; cursor: pointer;
  background: transparent; color: inherit; opacity: .6; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.price-panel .pp-day:hover { opacity: .9; }
.price-panel .pp-day.on { opacity: 1; color: var(--panel-ink, #f2d585); border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); }
.price-panel tr.pp-main td { padding-top: 5px; }
/* The name may wrap when the letters are big; the price and the count never do,
   so they are never pushed out past the edge of the panel. */
.price-panel tr.pp-main td:first-child { white-space: normal; width: 100%; }
.price-panel tr.pp-main:has(+ tr.pp-sub) td { border-bottom: 0; }
.price-panel tr.pp-sub td { white-space: normal; font-size: var(--pp-sub); line-height: 1.35; padding: 0 0 5px 10px; opacity: .85; }
.price-panel .pp-foot { margin-top: 6px; font-size: .8em; }
.price-panel .price-head b { font-size: 1.05em; }
.price-panel .pp-bit { white-space: nowrap; }
.price-panel .pp-bit b { font-weight: 600; }
.price-panel .pp-n { opacity: .5; margin-left: 2px; font-size: .9em; }
.price-panel .pp-loot { font-size: .82em; font-weight: 600; }
.price-panel .pp-loot-vip { color: #7cc4ff; }
.price-panel .pp-loot-saved { color: #7ddc9a; }
.price-panel .pp-loot-unsaved { color: #f0a868; }

/* The compact table (Oct 2026): the numbers in a column of their own, set in
   figures of one width and a little heavier, so they line up and read first. */
.price-panel { --pp-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; }
.price-panel .price-body { margin: 6px -12px 0; }
.price-panel table { table-layout: auto; }
.price-panel tr.pp-main td, .price-panel tr.pp-sub td { padding-left: 0; padding-right: 8px; }
.price-panel tr > td:first-child { padding-left: 12px; }
.price-panel tr > td:last-child { padding-right: 12px; }
.price-panel tr.pp-main td { padding-top: 6px; padding-bottom: 6px; border-top: 1px solid rgba(242, 213, 133, 0.10); vertical-align: baseline; }
.price-panel tr.pp-main.pp-has-sub td { padding-bottom: 2px; }
.price-panel td { border-bottom: 0; }
.price-panel tr.pp-sub td { border-top: 0; }
.price-panel tr.pp-odd td { background: rgba(255, 240, 200, 0.035); }
.price-panel tr.pp-sub td { padding: 1px 8px 1px 0; opacity: 1; font-size: var(--pp-sub); line-height: 1.35; }
.price-panel tr.pp-sub:not(:has(+ tr.pp-sub)) td { padding-bottom: 6px; }
.price-panel tr.pp-sub td.pp-subname { padding-left: 25px; color: #b3a98e; white-space: nowrap; }
.price-panel .pp-mark { display: inline-block; width: 3px; height: .95em; border-radius: 2px; margin-right: 7px; vertical-align: -0.12em; background: #8a7f63; }
.price-panel .pp-mark-saved { background: #7ddc9a; }
.price-panel .pp-mark-unsaved { background: #f0a868; }
.price-panel .pp-mark-vip { background: #7cc4ff; }
.price-panel .pp-name { font-weight: 700; color: #fff4d6; }
.price-panel .pp-diff { color: #9c9277; font-size: .88em; }
.price-panel .pp-price { font-family: var(--pp-num); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--panel-ink, #f2d585); }
.price-panel tr.pp-main .pp-price { font-size: 1.12em; }
.price-panel .pp-subprice { font-weight: 700; color: #efe6cf; }
.price-panel .pp-count { font-family: var(--pp-num); font-variant-numeric: tabular-nums; font-weight: 600; color: #9c9277; font-size: .88em; min-width: 2.6em; }
.price-panel tr.pp-sub .pp-count { color: #7d755f; }
.price-panel .pp-colhead { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: #7d755f; }
.price-panel .pp-foot { padding: 0 12px 2px; }

/* The single-boss list is a table of its own under the run, so its head is
   marked apart from the halves above it. */
.part-head.single-head td { border-top: 2px solid var(--border); }

/* ------------------------ my buyers, on the schedule ----------------------
   A small square between the raid number and the date saying how many of the
   reader's own buyers are on that run. A booker reads down thirty rows looking
   for the one they sold into; this is what they are looking for. Empty rows
   carry nothing at all, so the column reads as a handful of marks rather than a
   column of zeroes. */
th.minecell, td.minecell { width: 34px; min-width: 34px; padding-left: 2px; padding-right: 2px; }
th.minecell { font-size: 10px; opacity: .6; }
.minebox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--accent, #f5c04a);
  background: color-mix(in srgb, var(--accent, #f5c04a) 16%, transparent);
  color: var(--accent, #f5c04a);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* Somebody of theirs still waiting for a seat, said quietly beside the number. */
.minewait { font-size: 10px; font-weight: 600; opacity: .75; }

/* ---------------------- the run's own page, full width --------------------
   Everywhere else the page is held to a comfortable reading width. One run is
   the exception: the office and the raid lead are shown fifteen columns of
   booked spots on it — the tick, the shop, the money, who sold it, the note and
   a row of buttons — and squeezing that into 1560px left a horizontal scrollbar
   to be dragged back and forth all evening.

   Only this page is widened. The schedule was widened once by mistake along
   with it and had to be put back, so the rule is tied to the page rather than
   to the table. */
body.on-raid .content { max-width: none; }
/* The details stay a reference card; the seats take everything that is left. */
body.on-raid .raidtop > .raidleft { flex: 0 0 320px; max-width: 320px; }

/* With the room to do it, the spots table lays itself out to fit and the bar
   under it goes away. It stays scrollable for a narrow window, which is better
   than a column of buttons nobody can reach. */
body.on-raid #spots-card .table-wrap { overflow-x: auto; }
body.on-raid #spots-card table { width: 100%; }

/* --------------------------- the buyer's own name -------------------------
   Written in the colour of the class they play and heavier than the rest of the
   row. A lead reading an invite list is looking for classes as much as for
   names, and the game writes them this way — so the roster reads the way the
   group frame will. The realm after it stays grey: it is not part of the name
   anybody is looking for. */
.buyer-name b { font-weight: 800; letter-spacing: .005em; }
.buyer-name .faint { font-weight: 500; color: var(--muted); }
/* Two spots the same buyer is still the loudest thing on the row, whatever
   class they play. */
.buyer-name.is-dupe b, td.buyer-name.is-dupe b { color: var(--red, #ff6b6b) !important; }

/* The name and the realm are one word with a hyphen in it, not two things side
   by side — so the button's own gap is taken off between them. It is an
   inline-flex button with a 7px gap, which is what was putting air around the
   hyphen and making "Boostarr-Burning Legion" read as two names. */
.buyer-name { gap: 0; }
.buyer-name b + .faint { margin-left: 0; }

/* ------------------------ how full a run is, in colour --------------------
   Gold while there is room, amber once a fifth of the seats or fewer are left,
   red when there are none. A lead working the floor reads the colour; the
   numbers are for when they stop to look. */
.slots.nearly .bar i { background: linear-gradient(90deg, #f0a93c, #ff8c1a); }
.slots.nearly .txt { color: #f0a93c; }
.slots.full .bar i { background: linear-gradient(90deg, #e0452f, #c41e3a); }
.slots.full .txt { color: #ff6b6b; font-weight: 700; }

/* ------------------------- the schedule, read at a glance -----------------
   The columns a lead scans down — the number, the day, the hour, the raid and
   how full it is — are set heavier than the rest of the row, so the eye lands
   on them rather than on the badges beside them. */
#raids-table td:nth-child(1),   /* the number */
#raids-table td:nth-child(3),   /* the day */
#raids-table td:nth-child(4),   /* the hour */
#raids-table td:nth-child(5) {  /* the raid */
  font-weight: 700;
}
#raids-table td .raid-code { font-weight: 800; letter-spacing: .01em; }
#raids-table td .starts-at { font-weight: 800; }
/* The two counts a lead reads off a row — how many bosses are down and how many
   seats are gone — are the point of the row, so they are set as heavily as the
   rest of it rather than whispered in grey.

   Heavy white on a dark row glares, so each of them is given a thin dark outline
   the way a name is on a health bar in the game: the figure stays as readable at
   a glance and stops cutting into the eye. The hour is given the same, since it
   is read down the column in the same way. */
#raids-table td.bosses-cell,
#raids-table .slots .txt,
#raids-table td .starts-at {
  text-shadow: var(--ink-outline);
}
#raids-table td.bosses-cell { font-weight: 800; color: var(--text); }
#raids-table .slots .txt { font-weight: 800; color: var(--text); }
#raids-table .slots.nearly .txt { color: #f0a93c; }
#raids-table .slots.full .txt { color: #ff6b6b; }

/* On a light theme a black outline would be the thing that glares, so --ink-outline
   is turned the other way round there, in the theme itself: see the light block
   near the top of this file. Nothing here needs to know which theme is on. */

/* ------------------- the booked spots, closer together --------------------
   Fifteen columns of a run, and most of them hold three characters. The air
   between them was making the table twice as wide as it needed to be, so the
   padding is taken down for every column except the note, which is the one
   thing on the row somebody actually reads a sentence of. */
#spots-card th, #spots-card td { padding-left: 6px; padding-right: 6px; }
#spots-card th:first-child, #spots-card td:first-child { padding-left: 12px; }
#spots-card th.notecell, #spots-card td.notecell { padding-left: 10px; }
#spots-card th.acts, #spots-card td.acts { padding-left: 10px; padding-right: 12px; }
/* The money columns sit tighter still: they are three characters and a sign. */
#spots-card th.num, #spots-card td.num { padding-left: 4px; padding-right: 4px; }

/* ------------------------- the shops, foldable away -----------------------
   A shop that is finished with, or one that comes up twice a year, is noise on
   a row of eighteen. The little cross beside each tab folds it away; the ones
   folded away are listed after them, one press from coming back. */
.shoptab { display: inline-flex; align-items: stretch; gap: 2px; }
.shoptab .shophide {
  padding: 2px 6px;
  opacity: 0;
  transition: opacity .12s;
}
.shoptab:hover .shophide, .shoptab .shophide:focus { opacity: .7; }
.shoptab .shophide:hover { opacity: 1; }

/* ------------------------ putting a figure right ------------------------- */
/* The pencil in the corner of a figure. Out of the way until the pointer is on
   the card, so three small numbers do not read as three buttons. */
.mini { position: relative; }
.mini-fix {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s;
}
.mini:hover .mini-fix, .mini-fix:focus { opacity: .85; }
.mini-fix:hover { opacity: 1; color: var(--text); }

/* And the cross that takes a line out of a book, kept quiet until wanted. */
.rowdrop { margin-left: 8px; padding: 1px 6px; opacity: 0; transition: opacity .12s; }
tr:hover .rowdrop, .rowdrop:focus { opacity: .8; }
.rowdrop:hover { opacity: 1; }

/* ------------------- shops further down the orders book -------------------
   A page with eighteen shops on it is a page where seventeen of them are below
   the fold. The browser is told it may leave their rows unlaid-out until they
   are scrolled near — the height to hold in the meantime is written on each card
   from its own row count, so nothing collapses and the scrollbar does not jump.

   The first card is deliberately not deferred: deferring what is already on
   screen makes the first paint slower, not faster. Where the property is not
   supported the rule is simply ignored and the page behaves as it did. */
.shopcard-deferred {
  content-visibility: auto;
}

/* ------------------------------ hot offers -------------------------------
   The column of offers in big letters: beside the schedule on the shop page,
   and beside the schedule on the site for the people who sell. The contact
   cards are the shop page's own. */
.hot-head h2 { font-size: 15px; letter-spacing: .12em; color: var(--accent); }
.hot-list { display: flex; flex-direction: column; }
.hot-item { padding: 14px 18px; border-top: 1px solid var(--border); }
.hot-item:first-child { border-top: 0; }
.hot-title { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: .02em;
  color: var(--text); text-transform: uppercase; overflow-wrap: anywhere; text-shadow: var(--ink-outline); }
.hot-price { margin-top: 5px; font-size: 18px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.hot-note { margin-top: 5px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.contact-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.contact-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  color: var(--text); text-decoration: none; font-weight: 700; overflow-wrap: anywhere; }
a.contact-link:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.contact-link .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  flex: none; color: #fff; }
.contact-link.discord .ic { background: #5865f2; }
.contact-link.telegram .ic { background: #229ed9; }
.contact-link .what { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.contact-link .go { margin-left: auto; color: var(--accent); font-size: 18px; }

/* On the site: a column to the right of the schedule when there is room for
   one, and under it when there is not. */
.content:has(> .hot-grid) { max-width: 1880px; }
.hot-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.hot-side { position: sticky; top: 76px; }
.hot-side .hot-title { font-size: 18px; }
.hot-side .hot-price { font-size: 16px; }
@media (max-width: 1500px) {
  .hot-grid { grid-template-columns: minmax(0, 1fr); }
  .hot-side { position: static; }
}

/* ------------------------------ team rosters ------------------------------ */
.team-chip { font: inherit; font-size: 11.5px; cursor: pointer; border: 1px solid var(--border); transition: border-color .15s, background .15s; }
.team-chip:hover { border-color: var(--accent, #f2b441); background: color-mix(in srgb, var(--accent, #f2b441) 12%, transparent); }
.modal.roster-modal { max-width: 1240px; }
.rs-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 12px; }
.rs-free-count b { color: var(--green, #4ade80); }
.rs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 18px; align-items: start; }
.rs-grid.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .rs-grid { grid-template-columns: minmax(0, 1fr); } }
.rs-table td, .rs-table th { padding-top: 5px; padding-bottom: 5px; }
.rs-table td.center, .rs-table th.center { text-align: center; }
.rs-saved { color: var(--green, #4ade80); font-weight: 700; white-space: nowrap; }
.rs-saved.rs-hand { color: var(--amber, #f5b942); font-weight: 600; font-size: .92em; }
.rs-free { color: var(--muted); opacity: .6; }
/* A half of a name whose lockout is closed. */
.rs-name .rs-dim { color: #6f6a62 !important; opacity: .75; }
/* The lockout boxes: green while free, grey once closed. */
.rs-cell { white-space: nowrap; }
.rs-box { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 3px;
  font-size: 10px; font-weight: 800; line-height: 1; vertical-align: middle; transition: background .12s, color .12s, border-color .12s; }
.rs-box.is-free { background: color-mix(in srgb, var(--green, #4ade80) 22%, transparent); border: 1px solid var(--green, #4ade80); color: var(--green, #4ade80); }
.rs-box.is-done { background: color-mix(in srgb, #8a857c 22%, transparent); border: 1px solid #6f6a62; color: #8a857c; }
.rs-toggle:hover .rs-box { filter: brightness(1.25); }
/* The boss count sits above its box, so a column is as wide with 8/8 as without. */
.rs-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
.rs-cnt { font-size: 9px; color: var(--muted); min-height: 9px; line-height: 9px; white-space: nowrap; }
.rs-list .rs-table td.rs-cell { width: 30px; padding-left: 2px; padding-right: 2px; }
.rs-list .rs-table .rs-x { font-size: 10px; padding: 0 3px; line-height: 1.2; }
.rs-avg { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rs-avg b { color: var(--text, inherit); }
.rs-toggle { cursor: pointer; }
.rs-toggle:hover { background: color-mix(in srgb, var(--accent, #f2b441) 10%, transparent); }
.rs-logs h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; }
.rs-err { color: var(--red, #f87171); font-size: 11px; }
.rs-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.rs-confirm { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2, rgba(255,255,255,.03)); }
.rs-confirm p { margin: 0 0 8px; }

/* The "Logs & chars" page: one tab per team, with how many are still free. */
.rs-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-tab { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; color: inherit; text-decoration: none; min-width: 150px; }
.rs-tab:hover { border-color: var(--accent); }
.rs-tab.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Several lists side by side, like the columns of the old sheet. */
.rs-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.rs-list { border: 1px solid var(--border); border-radius: 12px; padding: 8px 8px 4px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); min-width: 0; }
.rs-list-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.rs-list-head .spacer { flex: 1; }
.rs-list-name { font-size: 14px; color: var(--accent); white-space: nowrap; }
.rs-list-head { flex-wrap: wrap; row-gap: 2px; }
.rs-list-head .rs-counts { order: 5; flex-basis: 100%; }
.rs-rename { font: inherit; width: 140px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--accent); background: transparent; color: inherit; }
.rs-list .rs-table { font-size: 12.5px; }
.rs-list .rs-table th, .rs-list .rs-table td { padding: 3px 4px; }
.rs-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.rs-name a.rs-rio { color: inherit; text-decoration: none; }
.rs-name a.rs-rio:hover b { text-decoration: underline; }
.rs-x { padding: 0 6px; min-height: 0; line-height: 1.4; }
.rs-edit { margin-top: 10px; }
.rs-h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; }
.rs-datebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.rs-day { font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit; }
.rs-day:hover { border-color: var(--accent); }
.rs-day.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; }
.rs-datebar input[type=date] { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: inherit; color-scheme: dark; }
.rs-daylist { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rs-daylist a { color: inherit; text-decoration: none; opacity: .8; }
.rs-daylist a.on, .rs-daylist a:hover { color: var(--accent); opacity: 1; }

/* Dragging a character between the roster lists. */
.rs-list .rs-table td.rs-drag { width: 12px; padding: 0 0 0 2px; cursor: grab; color: var(--muted); opacity: .45;
  user-select: none; touch-action: none; font-size: 13px; line-height: 1; }
.rs-list .rs-table th.rs-drag-h { width: 12px; padding: 0; }
.rs-list .rs-table tr:hover td.rs-drag { opacity: 1; color: var(--accent); }
.rs-table tr.rs-dragging > td { opacity: .3; }
body.rs-drag-on, body.rs-drag-on * { cursor: grabbing !important; user-select: none !important; }
.rs-list.rs-over { border-color: var(--accent); }
.rs-ghost { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; padding: 4px 10px; border-radius: 8px;
  background: var(--surface-solid, #1c1a17); border: 1px solid var(--accent); color: var(--text, #eee); font-weight: 700;
  font-size: 12.5px; box-shadow: 0 6px 20px rgba(0,0,0,.45); white-space: nowrap; }
.rs-dropline { position: fixed; z-index: 9998; height: 2px; pointer-events: none; display: none; border-radius: 2px;
  background: var(--accent, #f2b441); box-shadow: 0 0 6px var(--accent, #f2b441); }

/* The players' count beside the lists: 0 free red, 1 orange, 2 yellow, 3+ green. */
.rs-playersbox { margin-top: 18px; }
.rs-players { font-size: 12.5px; }
.rs-players th, .rs-players td { padding: 3px 6px; }
.rs-players td.rs-pc { font-weight: 800; width: 44px; border-left: 1px solid var(--border); }
.rs-players td.rs-n0 { background: rgba(239, 68, 68, .30); color: #fecaca; }
.rs-players td.rs-n1 { background: rgba(245, 158, 11, .26); color: #fde68a; }
.rs-players td.rs-n2 { background: rgba(234, 179, 8, .20); color: #fef08a; }
.rs-players td.rs-n3 { background: rgba(34, 197, 94, .24); color: #bbf7d0; }
.rs-pname { font: inherit; font-weight: 700; width: 100%; min-width: 110px; padding: 2px 6px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: inherit; }
.rs-pname:hover { border-color: var(--border); }
.rs-pname:focus { border-color: var(--accent); outline: none; background: rgba(255,255,255,.03); }

/* ---- Logs & chars, in tabs: players first, then every list in one row ---- */
.content:has(#rs-root) { max-width: none; }
.rs-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rs-mode { font: inherit; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: transparent; color: inherit; }
.rs-mode b { font-size: 14px; }
.rs-mode:hover { border-color: var(--accent); }
.rs-mode.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rs-mode.on b { color: var(--accent); }
.rs-strip { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.rs-strip-lists { display: contents; }
.rs-strip .rs-list { flex: 0 0 214px; width: 214px; min-width: 0; padding: 6px 6px 2px; }
.rs-strip .rs-plist { flex-basis: 224px; width: 224px; }
.rs-strip .rs-players th { white-space: nowrap; }
.rs-strip .rs-list-head { flex-wrap: wrap; gap: 2px 6px; padding: 2px 2px 5px; }
.rs-strip .rs-list-head .rs-counts { order: 5; flex-basis: 100%; font-size: 10.5px; }
.rs-hbtn { font: inherit; font-size: 11px; line-height: 1; padding: 2px 4px; border: 0; border-radius: 5px; background: transparent;
  color: var(--muted); cursor: pointer; }
.rs-hbtn:hover { color: var(--accent); background: rgba(255,255,255,.05); }
.rs-strip .rs-table { font-size: 12px; table-layout: auto; width: 100%; }
.rs-strip .rs-table th { font-size: 9.5px; padding: 3px 3px; }
.rs-strip .rs-table td { padding: 3px 3px; }
.rs-strip .rs-table td.rs-num { width: 16px; padding-right: 2px; font-size: 10.5px; }
.rs-strip .rs-name { max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
.rs-strip .rs-ilvl { width: 28px; }
.rs-strip .rs-name .rs-dimname { color: #6f6a62 !important; opacity: .8; }
.rs-bosses { width: 34px; white-space: nowrap; }
.rs-kills { font-weight: 800; color: var(--amber, #f5b942); font-size: 11.5px; }
.rs-kills.full { color: #8a857c; }
.rs-strip .rs-table td.rs-xcell { width: 12px; padding: 0 1px; }
.rs-strip .rs-x { font: inherit; font-size: 10px; line-height: 1; padding: 1px 2px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; opacity: 0; }
.rs-strip tr:hover .rs-x { opacity: .9; }
.rs-strip .rs-x:hover { color: var(--red, #f87171); }
.rs-strip .rs-players td.rs-pc { width: 34px; }
.rs-strip .rs-pname { min-width: 0; width: 100%; padding: 1px 4px; }
.rs-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 14px; align-items: start; }
.rs-below.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .rs-below { grid-template-columns: minmax(0, 1fr); } }

/* Every table of the row the same height, head and rows alike, so row 1 of
   "Players" sits level with row 1 of every list; fixed column widths keep a
   long name inside its card instead of pushing the lines past its edge. */
.rs-strip .rs-list-head { height: 44px; box-sizing: border-box; overflow: hidden; align-content: flex-start; }
.rs-strip .rs-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.rs-strip .rs-table th { height: 20px; box-sizing: border-box; padding: 0 3px; line-height: 20px; overflow: hidden; white-space: nowrap;
  letter-spacing: 0; font-size: 9px; }
.rs-strip .rs-table td { height: 22px; box-sizing: border-box; padding: 0 3px; line-height: 21px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; }
.rs-strip .rs-table .rs-c-drag { width: 13px; padding: 0 0 0 2px; }
.rs-strip .rs-table .rs-c-num { width: 22px; }
.rs-strip .rs-table .rs-c-ilvl { width: 30px; }
.rs-strip .rs-table .rs-c-boss { width: 44px; }
.rs-strip .rs-table .rs-c-x { width: 14px; padding: 0; }
.rs-strip .rs-table .rs-c-chars { width: 42px; }
.rs-strip .rs-table .rs-c-free { width: 58px; }
.rs-strip .rs-name { max-width: none; }
.rs-strip .rs-name b { display: block; overflow: hidden; text-overflow: ellipsis; }
.rs-strip .rs-pname { height: 19px; line-height: 17px; padding: 0 4px; box-sizing: border-box; font-size: 12px; }

/* The payments sheet. */
.pay-table { font-size: 13px; min-width: 1420px; }
.pay-table th, .pay-table td { padding: 3px 5px; vertical-align: middle; }
.pay-table .pay-in { font: inherit; width: 100%; box-sizing: border-box; padding: 3px 6px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: inherit; }
.pay-table .pay-in:hover { border-color: var(--border); }
.pay-table .pay-in:focus { border-color: var(--accent); outline: none; background: rgba(255,255,255,.04); }
.pay-table select.pay-in { color-scheme: dark; }
.pay-table input.pay-in[readonly] { cursor: copy; caret-color: transparent; }
.pay-table input.pay-in[readonly]:focus { background: transparent; border-color: var(--border); }
.pay-table input.pay-in.pay-editing { cursor: text; caret-color: auto; border-color: var(--accent); background: rgba(255,255,255,.06); }
.pay-table .pay-copy, .pay-table .pay-rowcopy { cursor: copy; }
.pay-table .pay-rowcopy:hover { color: var(--accent); }
.pay-table .pay-copied { animation: pay-copied .7s ease-out; }
@keyframes pay-copied { from { background: rgba(34, 197, 94, .35); } to { background: transparent; } }
.pay-table .pay-name { width: 150px; } .pay-table .pay-name .pay-in { font-weight: 700; }
.pay-table .pay-acc { width: 150px; }
.pay-table .pay-amount { width: 90px; } .pay-table .pay-amount .pay-in { text-align: right; font-weight: 700; }
.pay-table .pay-bank { width: 90px; }
.pay-table .pay-card { width: 175px; } .pay-table .pay-card .pay-in, .pay-table .pay-usdt .pay-in, .pay-table .pay-uid .pay-in { font-family: var(--mono, monospace); font-size: 12px; }
.pay-table .pay-phone { width: 130px; }
.pay-table .pay-usdt { width: 280px; }
.pay-table .pay-uid { width: 190px; }
.pay-table .pay-note { width: 170px; } .pay-table .pay-note .pay-in { font-size: 12px; color: var(--muted); }
.pay-table .pay-note .pay-in:focus { color: inherit; }
.pay-table .pay-tick { width: 17px; height: 17px; accent-color: #22c55e; cursor: pointer; }
.pay-table tr.pay-paid > td { background: rgba(34, 197, 94, .16); }
.pay-table tr.pay-paid .pay-name .pay-in, .pay-table tr.pay-paid .pay-amount .pay-in { color: #86efac; }

/* Logins — the office's vault. The values sit in <code> so the page's
   translation never touches them, but read like ordinary text. */
.vlt-table td { vertical-align: middle; }
.vlt-table .vlt-val { font: inherit; background: none; padding: 0; color: inherit; white-space: pre-wrap; word-break: break-word; }
.vlt-table .vlt-where { font-weight: 700; }
.vlt-table .vlt-pw { font-family: var(--mono, monospace); font-size: 12.5px; letter-spacing: .5px; }
.vlt-table .vlt-copy { cursor: copy; }
.vlt-table .vlt-copy:hover { background: rgba(227, 179, 65, .07); }
.vlt-table .vlt-comment .vlt-val { color: var(--muted); font-size: 12.5px; }
.vlt-table .vlt-eye { padding: 0 6px; margin-left: 4px; }
.vlt-table .vlt-in { font: inherit; width: 100%; box-sizing: border-box; padding: 3px 6px; }
.vlt-table .pay-copied { animation: pay-copied .7s ease-out; }
.vlt-table .vlt-where, .vlt-table .vlt-pw { white-space: nowrap; word-break: normal; }
.vlt-table td.vlt-copy[data-copy="password"] { white-space: nowrap; }

/* A booster's coefficient pay, in brackets after the balance in the header. */
#top-balance .top-pay { color: #e3b341; font-weight: 700; margin-left: 2px; }
.coefpay .card-head .badge { margin-left: 6px; }
#top-balance .top-fixed { color: #7dd3fc; font-weight: 700; margin-left: 2px; }

/* --------------- a team's three figures open what is behind them ---------- */
.mini.opens { cursor: pointer; transition: border-color .12s, transform .12s; }
.mini.opens:hover, .mini.opens:focus-visible { border-color: var(--accent-border); transform: translateY(-1px); outline: none; }
.tc-col { font: inherit; color: inherit; text-align: left; cursor: pointer; flex: 1 1 200px; }
.tc-col.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* Who booked what — the small log in the right-hand corner, for the office. */
.booking-feed {
  position: fixed; right: 16px; top: calc(var(--topbar) + 14px); z-index: 30;
  max-height: 46vh; display: flex; flex-direction: column;
  background: var(--card, #17130d); border: 1px solid var(--border, #2a2418); border-radius: 10px;
  padding: 8px 10px; font-size: 10.5px; line-height: 1.35; color: var(--muted, #b9ab90);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.booking-feed[hidden] { display: none; }
.booking-feed .bf-head { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text, #efe6d2); margin-bottom: 4px; }
.booking-feed .bf-list { overflow: auto; }
.booking-feed .bf-row { display: block; padding: 3px 0; border-top: 1px solid var(--border, #2a2418); color: inherit; text-decoration: none; }
.booking-feed .bf-row:first-child { border-top: none; }
.booking-feed .bf-row:hover { color: var(--text, #efe6d2); }
.booking-feed .bf-row b { color: var(--text, #efe6d2); font-weight: 600; }
.booking-feed .bf-buyer { color: var(--text, #efe6d2); }
.booking-feed .bf-price { color: var(--accent, #f0b93c); font-weight: 600; }
.booking-feed .bf-faint { opacity: .65; }

/* Who is here now — the row of circles in the top bar. */
.presence { position: relative; display: inline-flex; align-items: center; margin-right: 4px; }
.presence.hidden { display: none; }
.presence .pres-row { display: inline-flex; align-items: center; padding: 0 0 0 6px; background: none; border: 0; cursor: default; }
.presence .pres-btn { cursor: pointer; }
.presence .pres-dot {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -7px; flex: 0 0 auto;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background-size: cover; background-position: center; border: 2px solid var(--surface-solid, #14110b);
}
.presence .pres-more { background: var(--surface-3, #2a2418); color: var(--text); font-size: 10px; }
.presence .presence-list {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300; width: 260px; max-height: min(420px, 70vh); overflow: auto;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  box-shadow: 0 24px 60px -14px rgba(0, 0, 0, .75);
}
.presence .presence-list.hidden { display: none; }
.presence .pres-head { font-weight: 700; font-size: 12.5px; padding: 4px 6px 8px; }
.presence .pres-item { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; font-size: 13px; }
.presence .pres-item:hover { background: var(--surface-2); }
.presence .pres-item .pres-dot { margin-left: 0; width: 24px; height: 24px; }
.presence .pres-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .presence { display: none; } }

/* FunPay's own notices in a FunPay chat (an order paid, a review left): set
   apart in the middle, not as if the buyer had written them. */
.msg.fp-system { align-self: center; max-width: 90%; }
.msg.fp-system .msg-body { background: transparent; border-style: dashed; color: var(--muted); font-size: 12.5px; }
.msg.fp-system .msg-head { justify-content: center; margin: 4px 0 0; }

/* ------------------------------ Chats clients ------------------------------ */
/* FunPay's chats on one page: the list, the conversation, the booking panel. */
.ccp {
  display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px);
  height: calc(100vh - 150px); min-height: 560px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.cc-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.cc-tools { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border); }
.cc-tools .seg { flex-wrap: wrap; }
.cc-rows { flex: 1; overflow-y: auto; }
.cc-row {
  display: flex; gap: 10px; align-items: center; padding: 11px 14px; color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(240, 185, 60, .07);
}
.cc-row:hover { background: var(--surface-2); }
/* Three hundred chats in the list: the ones out of sight are not drawn until
   they are scrolled to, so the list opens and redraws at once. */
.cc-rows-list > .cc-row { content-visibility: auto; contain-intrinsic-size: auto 66px; }
.cc-row.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cc-ava {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px;
}
.cc-ava.big { width: 38px; height: 38px; font-size: 15px; }
.cc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-top { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.cc-prev { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue);
  border: 1px solid var(--blue-border); border-radius: 6px; padding: 1px 5px; white-space: nowrap;
}
.cc-count {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: var(--red); color: #1a0606; font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.cc-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cc-head { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 64px; flex: none; border-bottom: 1px solid var(--border); }
.cc-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-orders { position: relative; }
.cc-orders summary { list-style: none; cursor: pointer; color: var(--green); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-orders summary::-webkit-details-marker { display: none; }
.cc-orders-list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 320px; max-height: 260px; overflow-y: auto;
  background: var(--surface-solid); border: 1px solid var(--accent-border); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); display: flex; flex-direction: column;
}
.cc-orders-list a { padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.cc-orders-list a:hover { background: var(--accent-soft); }
.cc-logwrap { position: relative; flex: 1; min-height: 0; display: flex; }
.cc-logwrap .cc-log { flex: 1; overflow-anchor: none; }
.cc-jump {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5;
  height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--accent-border);
  background: var(--surface-solid); color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.cc-img img { display: block; margin-top: 4px; width: 240px; height: 180px; object-fit: cover; border-radius: 8px; background: var(--surface-3); }
.cc-count.none { visibility: hidden; }
.cc-seg button { padding-left: 10px; padding-right: 10px; }
.cc-hint { align-self: center; font-size: 11px; color: var(--blue); font-weight: 700; margin-right: 2px; }
.cc-chip.hit { border-color: var(--blue-border); background: var(--blue-soft); color: #bfdbfe; }
.cc-offers {
  max-height: 220px; overflow-y: auto; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--surface-solid);
  padding: 4px; display: flex; flex-direction: column;
}
.cc-offer {
  display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.cc-offer:hover { background: var(--accent-soft); }
.cc-offer-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-booked { display: inline-block; margin-right: 8px; color: var(--green); text-decoration: none; font-weight: 600; }
.cc-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cc-compose { flex: none; position: relative; border-top: 1px solid var(--border); padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.cc-compose > .cc-offers { position: absolute; z-index: 15; left: 18px; right: 18px; bottom: calc(100% - 6px); box-shadow: 0 -12px 32px rgba(0, 0, 0, .45); }
.cc-macros { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.cc-macros > * { flex: none; }
.cc-chip {
  height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cc-chip:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.cc-chip.add { border-style: dashed; color: var(--accent); background: transparent; font-weight: 700; }
.cc-chip.var { font-family: var(--mono); color: var(--blue); border-color: var(--blue-border); background: var(--blue-soft); }
.cc-book { border-left: 1px solid var(--border); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.cc-h { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cc-runs { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.cc-run {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.cc-run.on { border-color: var(--accent-border); background: var(--accent-soft); }
.cc-run.full { opacity: .55; }
.cc-book .seg { flex-wrap: wrap; }
.cc-free { font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; }
.cc-run.full .cc-free { color: var(--red); }
@media (max-width: 1100px) {
  .ccp { grid-template-columns: 1fr; height: auto; }
  .cc-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: 340px; overflow: hidden; }
  .cc-log { max-height: 60vh; min-height: 280px; }
  .cc-book { border-left: 0; border-top: 1px solid var(--border); }
}

/* FunPay's notices in Chats clients stand out in a light frame, and the order
   numbers in them copy with a click. */
.cc-log .msg.fp-system .msg-body {
  background: rgba(255, 236, 190, .09); border: 1px solid rgba(255, 224, 138, .45); border-style: solid;
  color: #fff4dc; box-shadow: 0 0 0 1px rgba(255, 224, 138, .08), 0 0 22px rgba(255, 210, 110, .10);
}
.cc-order {
  display: inline; padding: 0 4px; margin: 0 1px; border-radius: 5px; border: 1px dashed rgba(255, 224, 138, .7);
  background: rgba(255, 224, 138, .16); color: #ffe08a; font: inherit; font-family: var(--mono); font-weight: 700; cursor: copy;
}
.cc-order:hover { background: rgba(255, 224, 138, .28); }
.cc-order.copied { border-style: solid; border-color: var(--green-border); background: var(--green-soft); color: var(--green); }

/* A run in the booking panel: name and time on the left, room on the right,
   never spilling into the next one. */
.cc-run { height: auto; align-items: center; }
.cc-run-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cc-run-main > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-free { flex: none; max-width: 45%; text-align: right; }
.cc-free.part { color: var(--amber); }
.cc-parts button.none { opacity: .5; }

.cc-tag.wait { color: var(--amber); border-color: var(--amber-border); }
.cc-tag.bad { color: var(--red); border-color: var(--red-border); }

/* ------------------------- the section's chat window ------------------------ */
/* In the empty room on the right of Chats clients, under the bookings list. */
.cc-sec {
  position: fixed; right: 16px; top: calc(var(--topbar) + 14px); bottom: 16px; z-index: 30;
  display: flex; flex-direction: column; min-height: 220px;
}
.cc-sec-fab { display: none; }
.cc-sec-box {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--card, #17130d); border: 1px solid var(--border, #2a2418); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 12px; line-height: 1.4; overflow: hidden;
}
.cc-sec-head { display: flex; align-items: center; gap: 4px; padding: 7px 8px 6px 10px; border-bottom: 1px solid var(--border, #2a2418); }
.cc-sec-title {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text, #efe6d2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cc-sec-head .spacer { flex: 1; }
.cc-sec-ic {
  border: 1px solid transparent; background: none; color: var(--muted, #b9ab90); border-radius: 6px;
  min-width: 24px; height: 22px; padding: 0 5px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.cc-sec-ic:hover { color: var(--text); background: var(--surface-2); }
.cc-sec-ic.on { color: var(--accent, #f0b93c); border-color: rgba(240,185,60,.4); background: var(--accent-soft); }
.cc-sec-x { display: none; }
.cc-sec-state { padding: 6px 10px; font-size: 11px; color: var(--amber, #fbbf24); border-bottom: 1px solid var(--border, #2a2418); }
.cc-sec-state[hidden] { display: none; }
.cc-sec-log { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; overscroll-behavior: contain; }
.cc-sec-msg { padding: 3px 10px; color: var(--muted, #b9ab90); word-wrap: break-word; overflow-wrap: anywhere; }
.cc-sec-msg.hit { background: rgba(240,185,60,.09); box-shadow: inset 2px 0 0 var(--accent, #f0b93c); color: var(--text, #efe6d2); }
.cc-sec-msg.mine { color: var(--text, #efe6d2); }
.cc-sec-msg.pending { opacity: .8; }
.cc-sec-time { font-size: 10px; opacity: .55; font-variant-numeric: tabular-nums; }
.cc-sec-who {
  border: 0; background: none; padding: 0; margin-right: 5px; font: inherit; font-weight: 700;
  color: #93c5fd; cursor: pointer;
}
.cc-sec-who:hover { text-decoration: underline; }
b.cc-sec-who { cursor: default; }
b.cc-sec-who.me, .cc-sec-who.me { color: var(--accent, #f0b93c); }
b.cc-sec-who:hover { text-decoration: none; }
.cc-sec-who::after { content: ':'; font-weight: 400; color: var(--muted); }
.cc-sec-text { white-space: pre-wrap; }
mark.sec-hit { background: rgba(240,185,60,.28); color: #ffd98a; border-radius: 3px; padding: 0 2px; font-weight: 700; }
.cc-sec-bad { color: #f87171; }
.cc-sec-wait { color: var(--muted); font-style: italic; }
.cc-sec-link { border: 0; background: none; padding: 0 3px; font: inherit; color: var(--accent, #f0b93c); cursor: pointer; text-decoration: underline; }
.cc-sec-empty { padding: 18px 10px; text-align: center; color: var(--muted); opacity: .7; }
.cc-sec-dm { border-top: 1px solid var(--border, #2a2418); padding: 7px 8px; background: rgba(96,165,250,.06); }
.cc-sec-dm[hidden] { display: none; }
.cc-sec-dm-to { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.cc-sec-dm-to b { color: #93c5fd; }
.cc-sec-dm-to .cc-sec-ic { margin-left: auto; }
.cc-sec-dm-row, .cc-sec-form { display: flex; gap: 6px; }
.cc-sec-form { border-top: 1px solid var(--border, #2a2418); padding: 7px 8px; }
.cc-sec-dm-row input, .cc-sec-form input { flex: 1; min-width: 0; height: 30px; font-size: 12px; padding: 0 9px; }
.cc-sec-form .btn, .cc-sec-dm-row .btn { height: 30px; padding: 0 10px; }

/* No room on the right: a button in the corner that opens the window over the page. */
.cc-sec.float { top: auto; bottom: 16px; right: 16px; min-height: 0; width: auto; }
.cc-sec.float .cc-sec-fab {
  display: inline-flex; align-items: center; gap: 6px; position: relative; height: 38px; padding: 0 14px; border-radius: 19px;
  border: 1px solid rgba(240,185,60,.4); background: var(--card, #17130d); color: var(--text); font: inherit; font-weight: 700; font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); cursor: pointer;
}
.cc-sec-dot { position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #f0b93c); }
.cc-sec-dot[hidden] { display: none; }
.cc-sec.float .cc-sec-box { display: none; }
.cc-sec.float.open .cc-sec-fab { display: none; }
.cc-sec.float.open .cc-sec-box { display: flex; width: min(380px, calc(100vw - 32px)); height: min(520px, 70vh); }
.cc-sec.float .cc-sec-x { display: inline-block; }
.cc-price-note { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); min-height: 1em; }
.cc-price-note:empty { display: none; }
/* Answers on their way sit in the conversation like the rest: ours on the right. */
#cc-pending { display: contents; }

/* ===================== Chats clients — design A, "messenger" =====================
   A calm blue-grey messenger: round pictures, soft bubbles with the time inside,
   gold only on what is pressed most (Send, Book). Four columns on a wide screen —
   the chats, the conversation, the booking panel and the section's chat; the
   section's chat folds into a corner button where there is no room. The page
   takes the full width of the screen. Dark theme only; the light one keeps the
   site's own colours. */
body.on-chats .content { max-width: none; }
/* The few colours of the page that are its own, for each theme. */
:is(.ccp, .cc-sec) {
  --cc-compose: var(--surface-2); --cc-row-on: var(--accent-soft); --cc-chip-ink: var(--text); --cc-sys-ink: var(--text);
  --cc-ok: var(--green); --cc-mark-ink: var(--text); --cc-warn: var(--amber);
}
html:not([data-theme="light"]) :is(.ccp, .cc-sec) {
  --surface: #0d1217; --surface-solid: #121a21; --surface-2: #121a21; --surface-3: #1a242d;
  --card: #121a21; --border: #22303b; --border-strong: #2c3a46;
  --text: #e6edf3; --muted: #a9b6c2; --faint: #8b98a5;
  --accent-soft: rgba(240, 185, 60, .12); --accent-border: rgba(240, 185, 60, .45);
  --blue: #7cc0f2; --blue-soft: rgba(90, 169, 230, .12); --blue-border: rgba(90, 169, 230, .35);
  --cc-mine: #24384d; --cc-theirs: #1a242d; --cc-ink: #0d1217;
  --cc-compose: #0f161c; --cc-row-on: #1c2a37; --cc-chip-ink: #c9d4de; --cc-sys-ink: #f1e6cf;
  --cc-ok: #8fd6a8; --cc-mark-ink: #ffd98a; --cc-warn: #e9c46a;
  color: var(--text);
  font-family: "Manrope", "Segoe UI Variable Text", "Segoe UI", var(--font);
}
.ccp {
  height: calc(100vh - 128px); min-height: 600px; border-radius: 16px;
  background: var(--cc-ink, var(--surface)); border-color: var(--border);
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) minmax(290px, 340px);
}
.ccp.with-sec { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(290px, 330px) minmax(260px, 320px); }
.ccp input, .ccp select, .ccp textarea, .cc-sec input {
  background: var(--cc-ink, var(--surface-2)); border-color: var(--border-strong); border-radius: 10px; color: var(--text);
}
.ccp input:focus, .ccp select:focus, .ccp textarea:focus, .cc-sec input:focus { border-color: #4a6a86; box-shadow: 0 0 0 3px rgba(90, 169, 230, .15); }

/* The list */
.cc-list { background: var(--surface-solid); }
.cc-tools { padding: 16px 16px 12px; gap: 12px; border-bottom: 0; }
.cc-tools #cc-q { height: 40px; border-radius: 12px; padding-left: 14px; }
.cc-seg.seg { background: none; border: 0; padding: 0; gap: 6px; flex-wrap: wrap; }
.cc-seg.seg button {
  height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border); background: none;
  color: var(--muted); font-weight: 600; font-size: 13px; box-shadow: none;
}
.cc-seg.seg button.active { background: var(--cc-mine, var(--accent-soft)); border-color: transparent; color: var(--text); font-weight: 700; }
.cc-row { gap: 12px; padding: 10px 16px; border-bottom: 0; }
.cc-row:hover { background: rgba(255, 255, 255, .03); }
.cc-row.on { background: var(--cc-row-on); box-shadow: none; }
.cc-ava { width: 44px; height: 44px; font-size: 16px; color: #eef3f7; background: #2a3f55; }
.cc-ava.big { width: 40px; height: 40px; font-size: 15px; }
.cc-ava.a0 { background: #2a3f55; } .cc-ava.a1 { background: #3a2f55; } .cc-ava.a2 { background: #2f4a3a; }
.cc-ava.a3 { background: #55402a; } .cc-ava.a4 { background: #4a2a3a; } .cc-ava.a5 { background: #2a4a4f; } .cc-ava.a6 { background: #4f4a2a; }
.cc-meta { gap: 3px; }
.cc-top { font-size: 14px; }
.cc-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-when { font-size: 12px; color: var(--faint); white-space: nowrap; }
.cc-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cc-prev { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.cc-count { background: #3d8bd4; color: #fff; font-size: 12px; font-weight: 700; }
.cc-count.none { display: none; }
.cc-tag { border: 0; border-radius: 6px; padding: 1px 6px; font-size: 10.5px; color: #1b1304; background: var(--accent); }
.cc-tag.wait { color: #1b1304; background: #e9c46a; }
.cc-tag.bad { color: #fff; background: #c2453d; }

/* The conversation */
.cc-chat { background: var(--cc-ink, transparent); }
.cc-head { height: 68px; padding: 0 22px; gap: 12px; }
.cc-head-name { font-size: 16px; font-weight: 800; }
.cc-orders summary { color: var(--accent); }
.cc-fplink { font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; }
.cc-fplink:hover { color: #a9d6f7; }
.cc-log { padding: 22px 28px; gap: 8px; }
.cc-log .msg { max-width: min(62%, 560px); }
.cc-log .msg .msg-body {
  position: relative; background: var(--cc-theirs, var(--surface-2)); border: 0; border-radius: 16px 16px 16px 6px;
  padding: 9px 13px 8px; line-height: 1.45; color: var(--text); font-size: 14px;
}
.cc-log .msg.mine .msg-body { background: var(--cc-mine, var(--accent-soft)); border-radius: 16px 16px 6px 16px; }
.cc-log .msg.pending .msg-body { opacity: .7; }
.cc-log .msg .msg-head { font-size: 11px; color: var(--faint); margin: 0 4px 3px; }
.cc-time { display: block; text-align: right; font-size: 11px; color: var(--faint); margin-top: 3px; line-height: 1; }
.cc-log .msg.fp-system { max-width: min(78%, 680px); align-self: center; }
.cc-log .msg.fp-system .msg-body {
  border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  background: rgba(240, 185, 60, .07); border: 1px solid rgba(240, 185, 60, .32); box-shadow: none; color: var(--cc-sys-ink);
}
.cc-sys { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.cc-compose { padding: 12px 22px 16px; gap: 10px; background: var(--cc-compose); }
.cc-macros .cc-chip, .cc-chip {
  height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-solid);
  color: var(--cc-chip-ink); font-size: 13px; font-weight: 600;
}
.cc-chip:hover { border-color: var(--border-strong); background: var(--surface-3); }
.cc-chip.hit { border-color: var(--accent); background: rgba(240, 185, 60, .12); color: var(--accent); }
.cc-chip.add { border-style: dashed; color: var(--accent); background: none; }
.cc-hint { color: var(--accent); }
.cc-form { display: flex; align-items: flex-end; gap: 10px; }
.cc-input {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; min-height: 48px; box-sizing: border-box;
  padding: 4px 14px 4px 4px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 24px;
}
.cc-input:focus-within { border-color: #4a6a86; }
.ccp .cc-input textarea {
  flex: 1; min-width: 0; resize: none; border: 0; background: none; box-shadow: none; padding: 10px 2px; min-height: 40px;
  max-height: 160px; line-height: 1.45; font-size: 14px; border-radius: 0;
}
.ccp .cc-input textarea:focus { box-shadow: none; }
.cc-round {
  width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: #1b1304;
}
.cc-round:hover { background: var(--accent-hover); }
.cc-round.ghost { width: 40px; height: 40px; background: none; color: var(--muted); }
.cc-round.ghost:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.cc-round.sm { width: 40px; height: 40px; background: var(--cc-mine, var(--accent-soft)); color: var(--text); }
.cc-compose > .cc-offers { left: 22px; right: 22px; }
.cc-jump { border-color: var(--border-strong); background: var(--surface-solid); color: var(--blue); }

/* The booking panel */
.cc-book { background: var(--surface-solid); padding: 18px; gap: 14px; }
.cc-h { font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 800; }
.cc-run { border-radius: 12px; background: var(--cc-ink, var(--surface-2)); border-color: var(--border); padding: 10px 12px; }
.cc-run:hover { border-color: var(--border-strong); }
.cc-run.on { border-color: var(--accent); background: rgba(240, 185, 60, .1); }
.cc-free { color: var(--cc-ok); }
.cc-parts.seg { background: none; border: 0; padding: 0; gap: 6px; flex-wrap: wrap; }
.cc-parts.seg button {
  height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border-strong); background: none;
  color: var(--muted); font-size: 13px; font-weight: 600; box-shadow: none;
}
.cc-parts.seg button.active { background: var(--cc-mine, var(--accent-soft)); border-color: transparent; color: var(--text); font-weight: 700; }
.cc-price-note { color: var(--cc-ok); }
#cc-book-go { height: 48px; border-radius: 12px; font-size: 15px; font-weight: 800; }

/* The section's chat as the fourth column */
.cc-sec:not(.float) { position: static; inset: auto; z-index: auto; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.cc-sec:not(.float) .cc-sec-box { border: 0; border-radius: 0; box-shadow: none; background: var(--cc-compose); }
.cc-sec-box { font-size: 13px; }
.cc-sec-head { padding: 16px 14px 8px 16px; border-bottom: 0; gap: 8px; align-items: baseline; }
.cc-sec-name { font-size: 16px; font-weight: 800; color: var(--text); white-space: nowrap; }
.cc-sec-title { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--faint); }
.cc-sec-words { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; border-bottom: 1px solid var(--border); }
.cc-sec-words:empty { display: none; }
.cc-sec-word { font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(240, 185, 60, .1); border-radius: 8px; padding: 2px 8px; }
.cc-sec-log { padding: 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.cc-sec-msg { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; color: var(--text); }
.cc-sec-msg.hit { background: rgba(240, 185, 60, .09); box-shadow: none; }
.cc-sec-msg.mine { color: var(--text); }
.cc-sec-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cc-sec-who { color: var(--blue); font-size: 13px; margin-right: 0; }
.cc-sec-who::after { content: none; }
.cc-sec-time { font-size: 11px; opacity: 1; color: var(--faint); }
.cc-sec-text { line-height: 1.45; }
mark.sec-hit { background: rgba(240, 185, 60, .28); color: var(--cc-mark-ink); border-radius: 4px; padding: 0 3px; }
.cc-sec-form { padding: 12px; gap: 8px; align-items: center; }
.cc-sec-form input { height: 40px; border-radius: 20px; padding: 0 14px; font-size: 13px; }
.cc-sec-dm-row input { height: 36px; border-radius: 18px; }
.cc-sec-state { color: var(--cc-warn); }
@media (max-width: 1100px) {
  .ccp, .ccp.with-sec { grid-template-columns: 1fr; height: auto; }
}
[data-theme="light"] .cc-order { color: #7a4f00; border-color: #c9a24a; background: #fff3cf; }
/* "Покупатель смотрит" — under the chat's header, and an eye on the list. */
.cc-viewing {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 22px; font-size: 13px;
  background: rgba(90, 169, 230, .08); border-bottom: 1px solid var(--border); color: var(--muted); min-width: 0;
}
.cc-viewing[hidden] { display: none; }
.cc-viewing svg { flex: none; color: var(--blue); }
.cc-viewing-k { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cc-viewing a, .cc-viewing > span:last-child {
  min-width: 0; overflow: hidden; color: var(--blue); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.cc-eye { display: inline-flex; color: var(--blue); flex: none; }
/* Online / last seen, beside the buyer's name; the offer they last looked at, quieter. */
.cc-head-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cc-status { font-size: 12px; color: var(--faint); white-space: nowrap; }
.cc-status:empty { display: none; }
.cc-status.on { color: var(--cc-ok, var(--green)); }
.cc-status.on::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
.cc-viewing.past { background: none; }
.cc-viewing.past svg { color: var(--faint); }
.cc-tochat { text-decoration: none; padding: 0 6px; }
/* The schedule for the buyer, under the booking panel. */
.cc-sched { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.cc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-pills button {
  height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border-strong); background: none;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cc-pills button.on { background: var(--cc-mine, var(--accent-soft)); border-color: transparent; color: var(--text); font-weight: 700; }
.cc-sched-text {
  margin: 0; max-height: 180px; overflow: auto; white-space: pre-wrap; font: inherit; font-size: 12.5px; line-height: 1.5;
  background: var(--cc-ink, var(--surface-2)); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text);
}
.cc-sched-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Folding the bookings list and the hot offers away. */
.booking-feed .bf-head { display: flex; align-items: center; gap: 6px; }
.bf-fold, .hot-fold {
  border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; padding: 0 4px; line-height: 1;
}
.bf-fold:hover, .hot-fold:hover { color: var(--text); }
.booking-feed.folded { max-height: none; padding: 6px 10px; }
.booking-feed.folded .bf-head { margin: 0; }
.booking-feed.folded .bf-list { display: none; }
.hot-grid.folded { grid-template-columns: minmax(0, 1fr) 44px; }
.hot-tab {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-solid);
  font-size: 18px; cursor: pointer;
}
.hot-tab:hover { border-color: var(--accent-border); }
/* Unread FunPay chats, from any other page. */
.fp-bubble {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; min-width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box;
  border-radius: 22px; display: grid; place-items: center; text-decoration: none;
  background: #3d8bd4; color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 4px rgba(61, 139, 212, .25), 0 0 22px rgba(61, 139, 212, .65);
  animation: fp-glow 1.6s ease-in-out infinite;
}
.fp-bubble[hidden] { display: none; }
.fp-bubble:hover { background: #4f9ce3; color: #fff; }
@keyframes fp-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61, 139, 212, .25), 0 0 18px rgba(61, 139, 212, .5); }
  50% { box-shadow: 0 0 0 7px rgba(61, 139, 212, .12), 0 0 30px rgba(61, 139, 212, .85); }
}
@media (prefers-reduced-motion: reduce) { .fp-bubble { animation: none; } }
/* A buyer's record beside their name. */
.cc-stat { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.cc-stat:empty { display: none; }
.cc-rank { font-size: 14px; line-height: 1; }
/* An unread chat glows gold on the list until it is read. */
.cc-row.unread { background: rgba(240, 185, 60, .10); box-shadow: inset 3px 0 0 var(--accent); }
.cc-row.unread:hover { background: rgba(240, 185, 60, .15); }
.cc-row.unread .cc-top b { color: var(--accent); }
.cc-row.unread .cc-prev { color: var(--text); font-weight: 600; }
.cc-row.unread .cc-count { background: var(--accent); color: #1b1304; box-shadow: 0 0 10px rgba(240, 185, 60, .55); }
.cc-row.unread.on { background: rgba(240, 185, 60, .16); }
/* Chats clients: the FunPay tab runs an old script. */
.cc-old-script { margin: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber); }
/* Chats clients: how bold the page is written ("Aa" over the list). */
.cc-fw.seg { flex: none; }
.cc-fw.seg button { padding: 4px 9px; font-size: 13px; }
.cc-fw.seg button.active { background: var(--cc-mine, var(--accent-soft)); border-color: transparent; color: var(--text); }
.ccp.fw-1 { font-weight: 600; }
.ccp.fw-2 { font-weight: 700; }
.ccp.fw-1 :where(input, select, textarea, button) { font-weight: 600; }
.ccp.fw-2 :where(input, select, textarea, button) { font-weight: 700; }
.ccp.fw-2 :where(.faint, .small, small) { font-weight: 600; }
.ccp.fw-1 :where(b, strong) { font-weight: 800; }
.ccp.fw-2 :where(b, strong) { font-weight: 800; }
.ccp.fw-1, .ccp.fw-2 { -webkit-font-smoothing: auto; }
.cc-run-kinds { margin-bottom: 2px; }
.cc-run-kinds button { height: 27px; padding: 0 10px; font-size: 12px; }
/* An order number: the run it is booked on, or that it is on none. */
.cc-order-run { display: inline-block; margin: 2px 0 2px 4px; padding: 1px 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
  color: var(--green); background: rgba(52, 199, 89, .1); border: 1px solid rgba(52, 199, 89, .3); text-decoration: none; white-space: nowrap; }
.cc-order-run:hover { background: rgba(52, 199, 89, .18); }
.cc-order-none { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
  color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-border); white-space: nowrap; }
.cc-find { margin: 8px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--accent-border); background: var(--accent-soft); display: flex; flex-direction: column; gap: 6px; }
.cc-find-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-find-chat { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none; }
.cc-find-run { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 9px; background: var(--surface-solid, rgba(0,0,0,.2));
  border: 1px solid rgba(52, 199, 89, .3); color: var(--text); text-decoration: none; }
.cc-find-run b { color: var(--green); }
.cc-find-run:hover { border-color: var(--green); }
/* The booking an order number led to, lit up for a moment. */
tr.row-flash > td { animation: rowflash 3.2s ease-out; }
@keyframes rowflash { 0%, 30% { background: rgba(240, 185, 60, .28); } 100% { background: transparent; } }
/* A message of ours on its way: a clock where the time goes, then a tick. */
.cc-time .cc-clock { display: inline-block; vertical-align: -1px; opacity: .85; }
.cc-time .cc-tick { font-weight: 700; }
.cc-log .msg.failed .msg-body { border: 1px solid var(--red); }
/* Chats clients: messages appear in place, without sliding in — nothing on the
   page moves when one is sent or comes in. The line under each keeps one height
   whether it shows the time, a clock or a tick. */
.cc-log .msg { animation: none; }
.cc-log .cc-time { height: 12px; line-height: 12px; white-space: nowrap; }
/* The buyer's FunPay picture, over the initial. */
.cc-ava { position: relative; overflow: hidden; }
.cc-ava > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: inherit; }
/* Chats clients: the bell and its settings. */
.cc-bell { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-strong); background: none; cursor: pointer; font-size: 15px; line-height: 1; }
.cc-bell:hover { border-color: var(--accent-border); }
.cs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.cs-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.cs-opt span { flex: 1; }
.cs-opt.on { border-color: var(--accent-border); background: var(--accent-soft); }
.cs-opt input { width: auto; }
/* customers-goldenbot: a Discord role and the shop it books for, on one line. */
.sb-role { display: flex; flex-wrap: nowrap; }
.sb-role select { flex: 1 1 0; width: auto; min-width: 0; }
.sb-user { display: flex; flex-wrap: nowrap; }
.sb-user select { flex: 1 1 0; width: auto; min-width: 0; }

/* The Discord chats owed the closing message, under the flag in the top bar. */
.sbp-item { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.sbp-main { flex: 1; min-width: 0; }
.sbp-main > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-conf { padding: 0 6px; font-weight: 700; font-size: 10.5px; color: #8b93ff; letter-spacing: .02em; }

#sbp-box { width: min(470px, 94vw); }
.sbp-zero #sbp { opacity: .5; }
.sbp-zero #sbp:hover { opacity: .85; }
.dc-find { opacity: .6; }
.dc-find:hover { opacity: 1; }

/* The chats list and the booking panel a step lighter than the conversation
   between them, so the middle reads as its own column. */
html:not([data-theme="light"]) :is(.ccp, .cc-sec) { --cc-side: #182430; --cc-row-on: #24384b; }
html:not([data-theme="light"]) .cc-list,
html:not([data-theme="light"]) .cc-book { background: var(--cc-side); }
html:not([data-theme="light"]) .cc-list { border-right-color: var(--border-strong); }
html:not([data-theme="light"]) .cc-book { border-left-color: var(--border-strong); }
html[data-theme="light"] .cc-list, html[data-theme="light"] .cc-book { background: var(--surface-2); }

/* Kingboost: several sections picked at once for a rule. */
.kb-secs > summary { list-style: none; max-width: 420px; white-space: normal; text-align: left; }
.kb-secs > summary::-webkit-details-marker { display: none; }
.kb-secs-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 260px; overflow: auto;
  padding: 6px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-solid); }
.kb-sec { display: flex; gap: 8px; align-items: center; padding: 3px 4px; border-radius: 6px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.kb-sec:hover { background: var(--surface-3); }
.kb-sec input { margin: 0; }

/* ---------------- Balance: the two large figures and the raid cards ---------------- */
.bheroes { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.bal-gold { display: flex; flex-wrap: wrap; gap: 12px; }
.bal-gold .teamcut { max-width: 620px; }
.bhero { flex: 1 1 420px; min-width: 0; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.bhero.main { border-color: var(--accent-border); }
.bhero-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bhero-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.bhero-value { font-size: 40px; font-weight: 700; line-height: 1.05; position: relative; align-self: flex-start; }
.bhero-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; }
.bhero-legend i, .bal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bhero-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btile { position: relative; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.btile span { font-size: 12px; font-weight: 600; }
.btile b { font-size: 20px; }
.btile.cut1 { background: rgba(224, 119, 47, .12); } .btile.cut1 span { color: #e8833d; }
.btile.cut2 { background: rgba(233, 191, 110, .12); } .btile.cut2 span { color: #c9973a; }
html:not([data-theme="light"]) .btile.cut2 span { color: #f0cf8a; }
.bal-opens { cursor: pointer; }
.bal-opens:hover { filter: brightness(1.12); }
.bhero .mini-fix { opacity: 0; }
.bhero-value:hover .mini-fix, .btile:hover .mini-fix, .bhero .mini-fix:focus { opacity: .85; }
.bal-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.bal-bar.thin { height: 10px; }
.bal-bar i { display: block; height: 100%; }
.seg-con { background: #7f9ff2; } .seg-cut1 { background: #e0772f; } .seg-cut2 { background: #e9bf6e; } .seg-purse { background: #2fbf7f; }
.seg-free { background: var(--accent); } .seg-held { background: #7d6a45; }
.c-con { color: #6f8fe6; } .c-cut1 { color: #e8833d; } .c-cut2 { color: #c9973a; } .c-purse { color: var(--green); }
html:not([data-theme="light"]) .c-con { color: #a3bcff; }
html:not([data-theme="light"]) .c-cut2 { color: #f0cf8a; }
.bal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.bal-days { display: flex; flex-direction: column; gap: 18px; }
.bal-day { display: flex; flex-direction: column; gap: 10px; }
.bal-day-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--border-strong); }
.bal-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.bal-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bal-card-sum { display: flex; align-items: baseline; gap: 12px; }
.bal-card-sum b { font-size: 19px; }
.bal-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; font-size: 13px; }
.bal-figs div { display: flex; flex-direction: column; gap: 1px; }
.bal-lines { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; font-size: 13px; }
.bal-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bal-line .rowdrop { padding: 0 6px; line-height: 1.2; }
.bal-line .rowdrop { margin-left: 4px; }

/* ---------------- Chats clients → Undercut ---------------- */
.uc-switch { display: inline-flex; }
.uc-switch a { padding: 6px 12px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 13px; border-radius: 8px; }
.uc-switch a.active { background: var(--accent); color: var(--on-accent); }
.uc { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 128px); min-height: 600px; }
.uc-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.uc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.uc-chip { background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.uc-chip span { opacity: .65; font-weight: 500; margin-left: 4px; }
.uc-chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.uc-q { flex: 1 1 220px; max-width: 360px; margin-left: auto; }
.uc-cols { flex: 1; min-height: 0; display: flex; gap: 12px; }
.uc-col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--cc-ink, var(--surface)); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.uc-col.wide { flex: 1.35 1 0; }
.uc-colhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.uc-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.uc-scroll::-webkit-scrollbar { width: 12px; }
.uc-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.uc-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
.uc-ghead { position: sticky; top: 0; z-index: 1; padding: 7px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-solid); border-bottom: 1px solid var(--border); }
.uc-rival { border-bottom: 1px solid var(--border); padding: 0 0 8px; }
.uc-rival:hover { background: var(--surface-2); }
.uc-rpick { display: flex; gap: 12px; align-items: center; width: 100%; padding: 11px 14px 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.uc-rfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 14px; }
.uc-gsel { font-size: 12px !important; padding: 3px 6px !important; max-width: 190px; color: var(--muted) !important; border-radius: 8px !important; }
.uc-gsel.set { color: var(--accent) !important; border-color: var(--accent-border) !important; }
.uc-otitle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.uc-rival.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.uc-rival.off { opacity: .55; }
.uc-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.uc-who { font-size: 12px; font-weight: 700; }
.uc-who .up { color: var(--red, #f87171); font-weight: 500; margin-left: 4px; }
.uc-who .down { color: var(--green); font-weight: 500; margin-left: 4px; }
.uc-title { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); text-decoration: none; }
a.uc-title:hover { text-decoration: underline; }
.uc-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12px; }
.uc-price b { font-size: 17px; }
.uc-rival .uc-price b { color: #e8833d; }
html:not([data-theme="light"]) .uc-rival .uc-price b { color: #f2934a; }
.uc-own { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.uc-own.changed { background: var(--accent-soft); }
.uc-orow { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.uc-orow .uc-title { font-weight: 600; }
.uc-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.uc-in { display: inline-flex; align-items: center; gap: 4px; }
.uc-in input { width: 92px; padding: 6px 8px; font-size: 14px; }
.uc-under { border-color: rgba(47, 191, 127, .45); color: var(--green); }
.c-cheap { color: var(--green); } .c-dear { color: #e8833d; }
.uc-job { font-size: 12.5px; color: var(--muted); }
.uc-job.ok { color: var(--green); } .uc-job.bad { color: var(--red, #f87171); } .uc-job.wait { color: var(--amber); }
@media (max-width: 860px) {
  .uc { height: auto; }
  .uc-cols { flex-direction: column; }
  .uc-scroll { max-height: 60vh; }
}

/* ---------------- Shop schedule: every run on every shop ------------------ */
.ssb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ssb-tabs button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.ssb-tabs button:hover { border-color: var(--accent); }
.ssb-tabs button.on { background: var(--accent); border-color: var(--accent); color: #2a1d05; }
.ssb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.ssb-dot.ok { background: var(--green); } .ssb-dot.warn { background: var(--amber); }
.ssb-dot.bad { background: var(--red); } .ssb-dot.off { background: var(--faint); }
.ssb-tabs button.on .ssb-dot { box-shadow: 0 0 0 2px rgba(42, 29, 5, .35); }
.ssb-health { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
@media (max-width: 600px) { .ssb-health { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ssb-tile { min-height: 0; padding: 10px 12px; } }
.ssb-tile {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; min-height: 78px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.ssb-tile:hover { border-color: var(--accent); }
.ssb-tile.bad { border-color: var(--red-border); }
.ssb-tile-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.ssb-tile-state { font-size: 12.5px; font-weight: 600; color: var(--green); }
.ssb-tile.bad .ssb-tile-state { color: var(--red); } .ssb-tile.warn .ssb-tile-state { color: var(--amber); }
.ssb-tile.off .ssb-tile-state { color: var(--muted); }
.ssb-tile-sub { font-size: 12px; color: var(--faint); }
.ssb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ssb-chip {
  min-height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ssb-chip:hover { border-color: var(--accent); }
.ssb-chip.on { background: var(--accent); border-color: var(--accent); color: #2a1d05; }
.ssb-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.ssb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.ssb-legend i.open, .ssb-cell.open { background: var(--green-soft); }
.ssb-legend i.sold, .ssb-cell.sold { background: var(--amber-soft); }
.ssb-legend i.paused, .ssb-cell.paused { background: rgba(160, 150, 130, .14); }
.ssb-legend i.bad, .ssb-cell.bad { background: var(--red-soft); }
.ssb-main { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.ssb-table { flex: 999 1 640px; min-width: 0; padding: 0; }
.ssb-table table { min-width: 860px; }
.ssb-table td { padding: 5px 6px; }
.ssb-table th { padding-left: 8px; }
.ssb-run { min-width: 200px; padding-left: 14px !important; }
.ssb-run a { color: inherit; text-decoration: none; }
.ssb-run a:hover b { color: var(--accent); }
.ssb-here { white-space: nowrap; }
.ssb-cell {
  width: 100%; min-width: 108px; min-height: 46px; padding: 4px 9px; border-radius: 10px; border: 2px solid transparent;
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.ssb-cell small { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ssb-cell.open { color: var(--green); } .ssb-cell.sold { color: var(--amber); } .ssb-cell.bad { color: var(--red); }
.ssb-cell.none { color: var(--faint); border-color: var(--border); border-style: dashed; border-width: 1px; }
.ssb-cell.paused { color: var(--muted); }
.ssb-cell:hover { border-color: var(--accent); }
.ssb-cell.sel { border: 2px solid var(--accent); border-style: solid; }
.ssb-side { flex: 1 1 300px; max-width: 400px; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-color: var(--accent-soft); }
.ssb-side-plat, .ssb-side-h { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ssb-side-run { font-size: 17px; }
.ssb-side-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ssb-side-nums > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.ssb-side-nums span { font-size: 11.5px; color: var(--faint); }
.ssb-side-nums b { font-size: 16px; }
.ssb-side-nums small { font-size: 11.5px; color: var(--muted); }
.ssb-tone-open { color: var(--green); } .ssb-tone-sold { color: var(--amber); } .ssb-tone-bad { color: var(--red); } .ssb-tone-paused, .ssb-tone-none { color: var(--muted); }
.ssb-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ssb-acts .btn { flex: 1 1 140px; justify-content: center; }
.ssb-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.ssb-log li { display: flex; gap: 10px; }
.ssb-log li > span:first-child { flex: 0 0 40px; }
@media (max-width: 900px) { .ssb-side { max-width: none; } .ssb-legend { display: none; } }

/* ------------------- Raids and shops: one part at a time ------------------ */
.fl { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.fl-nav {
  flex: 0 0 290px; display: flex; flex-direction: column; gap: 4px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto;
}
.fl-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 10px;
  border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.fl-item:hover { background: var(--surface-2); }
.fl-item.on { background: var(--accent-soft); border-color: rgba(240, 185, 60, .45); }
.fl-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-item-text b { font-size: 13.5px; font-weight: 650; }
.fl-item-text small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-pill { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-pill.ok { background: var(--green-soft); color: var(--green); }
.fl-pill.warn { background: var(--amber-soft); color: var(--amber); }
.fl-pill.bad { background: var(--red-soft); color: var(--red); }
.fl-pill.off { background: var(--surface-2); color: var(--muted); }
.fl-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fl-main > [data-fl-sec][hidden] { display: none !important; }
.fl-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fl-filter input[type="search"] { flex: 1 1 240px; min-height: 38px; }
.fl-filter select { min-height: 38px; width: auto; }
tr[data-fpr][hidden], tr[data-rvr][hidden] { display: none; }
@media (max-width: 900px) {
  .fl-nav { flex: 1 1 100%; position: static; max-height: none; flex-direction: row; overflow-x: auto; }
  .fl-item { flex: 0 0 auto; width: auto; min-width: 190px; }
}

/* ------------- Chats clients: full screen, and the booking column ---------- */
body.cc-full .sidebar, body.cc-full .topbar, body.cc-full .booking-feed, body.cc-full #price-panel { display: none !important; }
body.cc-full .content { padding: 0; max-width: none; animation: none; }
body.cc-full .ccp { height: 100vh; min-height: 0; border-radius: 0; border-width: 0; }
body.cc-full .uc { padding: 12px; }
.cc-full-btn { min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); display: inline-grid; place-items: center; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 0 8px; }
.cc-full-btn:hover { border-color: var(--accent); }
body.cc-full .cc-full-btn { border-color: var(--accent); color: var(--accent); }
.cc-book.ccb { padding: 0; gap: 0; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.ccb-top { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 8px; }
.ccb-top .cc-pills button .n { opacity: .7; font-variant-numeric: tabular-nums; margin-left: 3px; }
.ccb-copy { display: flex; flex-wrap: wrap; gap: 6px; }
.ccb-copy .btn { flex: 1 1 130px; min-width: 0; justify-content: center; min-height: 36px; font-size: 12.5px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-book.ccb .cc-runs { flex: 1 0 260px; min-height: 260px; max-height: none; padding: 0 10px 10px; }
.ccb-form .cc-parts button { padding: 4px 8px; font-size: 12px; min-height: 0; }
.ccb-form { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; background: var(--surface-2); }
.ccb-row { display: flex; gap: 8px; }
.ccb-row > .field { flex: 1; margin: 0; }
.ccb-picked { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccb-picked b { color: var(--text); }
.ccb-more summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.ccb-more[open] { display: flex; flex-direction: column; gap: 8px; }
.cc-run.ccr { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 10px; text-align: left; }
.ccr-team { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: #0b0f13; background: var(--ccr, #9fb0c2); }
.ccr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ccr-main b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccr-when { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccr-when.soon { color: #ffb27a; }
.ccr-when.live { color: var(--green); }
.cc-nick-wrap { position: relative; }
.cc-realms { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 20; background: var(--surface-solid, #182230); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 -12px 30px rgba(0, 0, 0, .5); overflow: hidden; }
.cc-realms button { display: flex; width: 100%; gap: 8px; align-items: center; padding: 9px 12px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cc-realms button.on, .cc-realms button:hover { background: rgba(124, 178, 255, .16); }
.cc-realms small { color: var(--muted); }
.cc-realms kbd { margin-left: auto; font-size: 11px; color: var(--muted); font-family: inherit; }
.cc-tag-x { margin-left: 5px; padding: 0 4px; border: 0; border-radius: 4px; background: rgba(0, 0, 0, .25); color: inherit; font: inherit; font-size: 10px; line-height: 1.4; cursor: pointer; }
.cc-tag-x:hover { background: rgba(0, 0, 0, .5); }
.ccb-top .cc-pills button.ccb-gold { font-weight: 800; color: #f5c95e; border-color: rgba(240, 185, 60, .5); min-width: 34px; }
.ccb-top .cc-pills button.ccb-gold.on { background: #f0b93c; color: #2a1d05; }
.cc-book.gold-mode .ccb-form, .cc-book.gold-mode #cc-runq, .cc-book.gold-mode .ccb-copy { display: none; }
.ccb-goldbox { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 0; }
.ccb-golds { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ccb-goldrow { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid rgba(240, 185, 60, .3); }
.ccb-goldrow b, .cc-gold-link b { color: #2a1d05; background: #f0b93c; border-radius: 5px; padding: 0 5px; font-weight: 800; }
.ccb-goldrow a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-gold-link { font-size: 12.5px; text-decoration: none; margin-right: 6px; }

/* Chats clients: find an order from the top bar (and from the chat list in full screen). */
.osearch { position: relative; width: 300px; max-width: 42vw; }
@media (max-width: 760px) { .topbar .osearch { width: 150px; } }
.osearch.hidden { display: none; }
.osearch-q { width: 100%; height: 36px; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; }
.osearch-box { position: absolute; top: calc(100% + 6px); left: 0; width: min(440px, 92vw); z-index: 60; padding: 12px; border-radius: 12px;
  background: var(--surface-solid, var(--bg)); border: 1px solid var(--border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: grid; gap: 8px; }
.osearch-box.hidden { display: none; }
.osearch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.osearch-chat { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osearch-runs { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.osearch-run { position: relative; display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13px; }
.osearch-run:hover { border-color: var(--accent-border, var(--border-strong)); background: var(--accent-soft, transparent); }
.osearch-when { font-size: 12px; }
.osearch-price { position: absolute; top: 8px; right: 10px; font-weight: 700; font-size: 14px; color: var(--accent, #e6b33a); }
.osearch-line { font-size: 13px; }
.osearch-chats { display: flex; flex-wrap: wrap; gap: 6px; }
.osearch-sep { height: 1px; background: var(--border); margin: 2px 0; }
.osearch-in { display: none; width: 100%; max-width: none; }
body.cc-full .osearch-in { display: block; }

/* Logs & chars, the page: one table — a row per player, three cells per list. */
.rs-gridscroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; scrollbar-width: thin; }
.rs-onetable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-onetable th, .rs-onetable td { padding: 5px 7px; border-bottom: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; }
.rs-onetable thead th { position: sticky; top: 0; background: var(--surface-solid, #171208); z-index: 2; }
.rs-onetable thead tr:first-child th { font-size: 13px; text-transform: none; letter-spacing: 0; }
.rs-onetable .rs-gsub th { font-size: 10px; letter-spacing: .4px; color: var(--muted); top: 38px; }
.rs-onetable .rs-gl-head, .rs-onetable td.rs-gfirst, .rs-onetable .rs-gc-name { border-left: 1px solid var(--border); }
.rs-gl-top { display: flex; align-items: center; gap: 8px; }
.rs-gl-top .rs-list-name { color: #ffd166; font-size: 14px; }
.rs-gl-meta { font-size: 11px; font-weight: 600; color: #c9bb9f; }
.rs-gp-head { color: #ffd166; }
.rs-g-ok { color: #4ade80; } .rs-g-no { color: #ff8a80; }
.rs-onetable td.rs-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; position: relative; }
.rs-onetable td.rs-name b { font-weight: 700; }
.rs-gdrag { cursor: grab; color: var(--muted); opacity: .35; margin-right: 4px; user-select: none; touch-action: none; }
.rs-onetable tr:hover .rs-gdrag { opacity: .9; }
.rs-onetable .rs-x { font: inherit; font-size: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; margin-left: 4px; padding: 0 2px; }
.rs-onetable tr:hover .rs-x { opacity: .9; }
.rs-onetable .rs-x:hover { color: var(--red, #f87171); }
.rs-onetable .rs-gilvl b { font-weight: 800; }
.rs-q5 { color: #ff8000; } .rs-q4 { color: #c26bff; } .rs-q3 { color: #3b9bff; } .rs-q2 { color: #2fd36b; } .rs-q1 { color: #d8d2c4; } .rs-q0 { color: var(--muted); }
.rs-onetable .rs-kills { color: #ffc233; font-size: 12.5px; }
.rs-onetable .rs-kills.full { color: #ff6b5e; }
.rs-onetable .rs-free { color: #7d7362; opacity: 1; }
.rs-onetable td.rs-pc { font-weight: 800; width: 40px; border-left: 1px solid var(--border); }
.rs-onetable td.rs-n0 { background: #7f1d1d; color: #fecaca; }
.rs-onetable td.rs-n1 { background: rgba(245, 158, 11, .30); color: #fde68a; }
.rs-onetable td.rs-n2 { background: rgba(234, 179, 8, .24); color: #fef08a; }
.rs-onetable td.rs-n3 { background: #14532d; color: #86efac; }
.rs-onetable .rs-pname { width: 120px; padding: 2px 6px; }
.rs-onetable td.rs-gover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.rs-below-page.show-none { display: none; }
.rs-below-page.show-add { grid-template-columns: minmax(0, 1fr); } .rs-below-page.show-add .rs-right { display: none; }
.rs-below-page.show-logs { grid-template-columns: minmax(0, 1fr); } .rs-below-page.show-logs .rs-edit { display: none; }
#rs-headbox .rs-head { flex-wrap: wrap; }
/* The tabs above it, in colour. */
.rs-tab.on { border-color: #f2c14e; background: linear-gradient(180deg, rgba(242, 193, 78, .22), rgba(242, 193, 78, .08)); box-shadow: inset 0 0 0 1px #f2c14e; }
.rs-tab.on b { color: #ffd166; }
.rs-mode[data-rs-mode="heroic"] b { color: #f2c14e; } .rs-mode[data-rs-mode="mythic"] b { color: #a78bfa; } .rs-mode[data-rs-mode="tg"] b { color: #f472b6; }
.rs-mode[data-rs-mode="kh"] b { color: #38bdf8; } .rs-mode[data-rs-mode="km"] b { color: #fb923c; }
.rs-mode.on[data-rs-mode="heroic"] { background: #f2c14e; border-color: #f2c14e; } .rs-mode.on[data-rs-mode="heroic"] b, .rs-mode.on[data-rs-mode="heroic"] .faint { color: #1d1404; opacity: 1; }
.rs-mode.on[data-rs-mode="mythic"] { background: rgba(167, 139, 250, .2); border-color: #a78bfa; }
.rs-mode.on[data-rs-mode="tg"] { background: rgba(244, 114, 182, .2); border-color: #f472b6; }
.rs-mode.on[data-rs-mode="kh"] { background: rgba(56, 189, 248, .2); border-color: #38bdf8; }
.rs-mode.on[data-rs-mode="km"] { background: rgba(251, 146, 60, .2); border-color: #fb923c; }
.rs-onetable th.rs-c-num, .rs-onetable th.rs-c-chars, .rs-onetable th.rs-c-free { width: 1%; }
.rs-onetable th.rs-gp-head { width: 140px; }

/* Admin → People: the list on the left, the picked person on the right. */
.pe-split { display: flex; gap: 14px; padding: 12px; align-items: flex-start; }
.pe-list { width: 460px; flex: none; max-height: 72vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; scrollbar-width: thin; }
.pe-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 104px; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 9px 12px; cursor: pointer; }
.pe-row:last-child { border-bottom: 0; }
.pe-row:hover { background: var(--surface-2); }
.pe-row.on { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.pe-row[hidden] { display: none; }
.pe-who { display: flex; flex-direction: column; min-width: 0; }
.pe-who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-team { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-money { text-align: right; display: flex; flex-direction: column; align-items: flex-end; font-size: 13.5px; }
.pe-gold { font-size: 11.5px; }
.pe-neg { color: var(--red, #f87171); } .pe-pos { color: var(--green, #4ade80); } .pe-zero { color: var(--muted); font-weight: 500; }
.pe-detail { flex: 1; min-width: 0; }
.pe-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); }
.pe-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pe-ava { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800;
  color: var(--accent); border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); flex: none; }
.pe-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pe-name { font-size: 21px; }
.pe-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; }
.pe-bal { text-align: right; }
.pe-big { font-size: 24px; line-height: 1.2; }
.pe-big .small { font-size: 12px; }
.pe-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pe-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pe-box { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pe-h { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.pe-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.pe-box .field { margin: 0; }
@media (max-width: 1100px) { .pe-split { flex-direction: column; } .pe-list { width: 100%; max-height: 50vh; } .pe-boxes { grid-template-columns: minmax(0, 1fr); } }
.pe-card[hidden] { display: none; }
.pe-top .spacer, .pe-acts .spacer { flex: 1; }

/* Coefficients: the booster's class and role before the name. */
.coef-who { display: flex; align-items: center; gap: 6px; }
.coef-who .coef-nm { flex: 1; min-width: 0; font-weight: 700; }
.coef-look { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px dashed var(--border-strong); background: transparent;
  display: inline-grid; place-items: center; font: inherit; font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0; }
.coef-look.set { border-style: solid; border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); font-weight: 800; }
span.coef-look { cursor: default; }
.coef-lookmenu { position: absolute; z-index: 90; width: 300px; padding: 10px; border-radius: 12px; background: var(--surface-solid, #171208);
  border: 1px solid var(--border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); display: grid; gap: 8px; }
.coef-lookmenu .clm-h { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.coef-lookmenu .clm-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.coef-lookmenu .clm-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.coef-lookmenu button { font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; cursor: pointer; }
.coef-lookmenu .clm-roles button { color: var(--text); text-align: center; }
.coef-lookmenu button:hover { background: var(--surface-2); }
.coef-lookmenu .clm-clear { color: var(--muted); font-weight: 500; text-align: center; }
.topbar .osearch { min-width: 220px; }

/* Coefficients, tidier: today's column marked, the days to come quieter, one
   line per booster, the ✕ quiet until wanted. */
table.coef tbody td { padding-top: 2px; padding-bottom: 2px; }
table.coef th.coef-day.today { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); border-radius: 6px 6px 0 0; }
table.coef th.coef-day.today .faint { color: var(--accent); opacity: .9; }
table.coef th.coef-day.future { opacity: .55; }
table.coef td.coef-cell.today { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
table.coef td.coef-cell.future .coef-in, table.coef td.coef-cell.future .coef-ro { opacity: .6; }
table.coef tr .cmk:not(.on) { opacity: .18; }
table.coef tr:hover .cmk:not(.on) { opacity: .5; }
.coef-name .coef-who { white-space: nowrap; }
.coef-name .coef-nm { text-align: left !important; }
.coef-x { font: inherit; font-size: 12px; border: 1px solid transparent; background: transparent; color: var(--faint); cursor: pointer; border-radius: 6px; padding: 2px 7px; }
.coef-x:hover { color: var(--red, #f87171); border-color: var(--red-border, rgba(248,113,113,.4)); }
.coef-newbox > summary { list-style: none; display: inline-flex; cursor: pointer; }
.coef-newbox > summary::-webkit-details-marker { display: none; }
.coef-newbox[open] > summary { border-color: var(--accent); }

/* The price panel's week: the cheapest–dearest under the middle price. */
.price-panel .pp-range { display: block; font-size: .62em; font-weight: 600; color: #b3a98e; line-height: 1.2; }
.price-panel .pp-byparts { font-size: .7em; font-weight: 600; color: #b3a98e; font-family: inherit; }

/* Payments, as it always looked — only crisper: firmer lines between the
   rows and the columns, a clearer green on a paid line, brighter figures. */
.pay-table { border-collapse: collapse; border: 1px solid rgba(255, 255, 255, .14); }
.pay-table thead th { border-bottom: 2px solid rgba(242, 193, 78, .45); color: #d9cbb0; font-weight: 800; }
.pay-table tbody td { border-bottom: 1px solid rgba(255, 255, 255, .12); border-right: 1px solid rgba(255, 255, 255, .06); }
.pay-table tbody td:last-child { border-right: 0; }
.pay-table tr.pay-paid > td { background: rgba(34, 197, 94, .22); border-bottom-color: rgba(34, 197, 94, .38); }
.pay-table tr.pay-paid .pay-name .pay-in, .pay-table tr.pay-paid .pay-amount .pay-in { color: #4ade80; }
.pay-table .pay-amount .pay-in { color: #fff3d6; }
.pay-table .pay-name .pay-in { color: #fff3d6; }
.pay-table .pay-in { color: #efe6cf; }
.pay-table .pay-tick { width: 19px; height: 19px; }

/* The Reserve button on the top bar, and its window. */
.topres { font: inherit; font-size: 13px; font-weight: 700; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.topres.hidden { display: none; }
.topres b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); font-size: 12px; text-align: center; }
.topres.has b { background: var(--accent); color: #1d1404; }
.topres:hover { border-color: var(--accent); }
.resq-modal { width: min(1100px, 96vw); }
.resq-list { display: flex; flex-direction: column; gap: 8px; max-height: 64vh; overflow-y: auto; }
.resq-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(240px, 1.1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.resq-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resq-who b { font-size: 14.5px; }
.resq-note { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resq-price { text-align: right; font-size: 15px; color: var(--accent); }
.resq-run { width: 100%; min-width: 0; }
.resq-acts { display: flex; gap: 6px; }
@media (max-width: 800px) { .resq-row { grid-template-columns: minmax(0, 1fr); } }

/* A person's ± Balance history, under their card in the admin panel. */
.pe-log { margin-top: 14px; }
.pe-log-body { max-height: 320px; overflow-y: auto; }
.pe-logt { width: 100%; border-collapse: collapse; font-size: 13px; }
.pe-logt th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; background: var(--surface); }
.pe-logt td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pe-logt .right { text-align: right; }
.pe-log-note { color: var(--muted); word-break: break-word; }

/* Booked spots, crisper — the same table and the same places, only clearer:
   firmer lines between rows, a brighter header and part bars, in-group rows a
   plainer green, prices and classes stronger, and the row's buttons quiet until
   the mouse is on that row. */
#spots-card table { font-size: 13px; border-collapse: collapse; }
#spots-card thead th { font-size: 10.5px; font-weight: 800; color: #d9cbb0; border-bottom: 2px solid rgba(242,193,78,.45); }
#spots-card tbody td { border-bottom: 1px solid rgba(255,255,255,.07); }
#spots-card tbody tr:not(.part-head):hover > td { background: rgba(255,255,255,.035); }
#spots-card tbody tr.row-in-group > td { background: rgba(34,197,94,.065); border-bottom-color: rgba(34,197,94,.16); }
#spots-card tbody tr.row-in-group:hover > td { background: rgba(34,197,94,.11); }
#spots-card tbody tr.row-reserve > td { background: rgba(242,193,78,.08); }
#spots-card tr.part-head td { background: rgba(242,193,78,.07); border-top: 2px solid #f2c14e; border-bottom: 1px solid rgba(242,193,78,.35); color: #ffd166; font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
#spots-card tr.part-head .faint { color: #d9cbb0; font-weight: 600; letter-spacing: 0; text-transform: none; }
#spots-card td.num { font-weight: 700; color: #e6dcc4; font-variant-numeric: tabular-nums; }
#spots-card .cls { font-weight: 700; }
#spots-card td.acts .btn.sm { opacity: .5; transition: opacity .12s; }
#spots-card td.acts .btn.sm.primary, #spots-card tbody tr:hover td.acts .btn.sm { opacity: 1; }
#spots-card tbody tr.row-in-group td:first-child { box-shadow: inset 3px 0 0 rgba(34,197,94,.55); }
#spots-card .btn.in-group { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); color: #5fcf8d; }
#spots-card tbody tr.row-in-group, #spots-card tbody tr.row-in-group:hover { background: transparent; }

/* The gold rule in the DawnHub and OBC cards. */
.sg-box { border: 1px solid rgba(242,193,78,.35); border-radius: 12px; padding: 12px 14px; background: rgba(242,193,78,.05); }
.sg-head { margin-bottom: 8px; }
/* The row's buttons sit right after "In group": the column is only as wide as
   the buttons on this run, with no empty room before them. */
#spots-card th.acts, #spots-card td.acts { width: 1%; min-width: 0; }
#spots-card td.acts { padding-left: 4px; text-align: left; }

/* The row's buttons in fixed slots, so each kind stands in its own column. */
#spots-card .acts-slots { display: inline-grid; grid-template-columns: 26px 26px 26px 96px 28px 28px; gap: 4px; align-items: center; }
#spots-card .acts-slots > span { display: flex; justify-content: center; }
#spots-card .acts-slots > span.s-res { justify-content: flex-start; }
#spots-card .acts-slots .btn.sm { margin: 0; }
/* The gold tick and its ⏳ side by side, never one under the other. */
#spots-card td.shop-collect { white-space: nowrap; }
#spots-card .shop-tick { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
#spots-card .shop-tick .small { font-size: 11px; line-height: 1; }