/* Everything that is not the landing: sign in (/connexion), WAX account
   (/wax) and the dashboard (/app). */
.app-shell {
  --control: 44px;
  --gap: clamp(12px, 1.4vw, 16px);
  --pad: clamp(16px, 2vw, 24px);
  --card-bg: rgb(var(--panel-rgb) / 0.8);
  --card-line: rgb(var(--accent-light-rgb) / 0.15);
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text-soft);
  font-family: var(--sans);
}
.app-shell :focus-visible { outline: 2px solid var(--accent-pale); outline-offset: 3px; }

.eyebrow { margin: 0; color: var(--accent-light); font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.wordmark { display: inline-flex; align-items: center; gap: 0.3em; color: var(--text-soft); font: 700 20px/1 var(--display); letter-spacing: 0.045em; white-space: nowrap; }
.wordmark .mark { width: 1.9em; height: 1.9em; margin: -0.45em 0.05em -0.45em -0.2em; }
.wordmark b { color: var(--accent-light); font-weight: 700; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--control);
  padding: 0 18px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: transparent;
  font: 700 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.button:hover:not(:disabled) { border-color: var(--accent-light); color: var(--accent-light); }
.button--primary { border-color: var(--accent-light); color: var(--bg); background: var(--accent-light); }
.button--primary:hover:not(:disabled) { color: var(--bg); background: var(--accent-soft); transform: translateY(-1px); }
.button--wide { width: 100%; min-height: 48px; }
.button:disabled { cursor: not-allowed; opacity: 0.45; }
.link-button { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; color: var(--accent-light); background: none; font: 700 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.link-button:hover { color: var(--accent-pale); }
.icon-button {
  display: inline-grid;
  flex: none;
  width: var(--control);
  height: var(--control);
  padding: 0;
  place-items: center;
  border: 1px solid var(--card-line);
  color: var(--copy);
  background: transparent;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.icon-button:hover { border-color: var(--accent-light); color: var(--accent-light); background: rgb(var(--accent-light-rgb) / 0.06); }
.icon { display: grid; place-items: center; color: var(--muted); }
.icon svg, .icon-button svg { width: 18px; height: 18px; }

/* Forms */
.form { display: grid; gap: 16px; }
.field label, .form legend { display: block; margin: 0 0 8px; color: var(--text-2); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.field label small { color: var(--muted); letter-spacing: 0.04em; text-transform: none; }
.app-shell :where(input:not([type='checkbox'], [type='radio'], [type='color'], [type='range']), select) {
  width: 100%;
  height: var(--control);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-soft);
  background: rgb(var(--bg-rgb) / 0.82);
  font: 500 12px var(--sans);
  outline: none;
}
.app-shell input:focus, .app-shell select:focus { border-color: var(--accent-pale); }
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.check input { accent-color: var(--accent); }
.feedback { min-height: 0; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.feedback:empty { display: none; }
.feedback.is-error { color: var(--danger); }
.feedback.is-success { color: var(--live); }

/* Header of /connexion and /wax */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1220px, calc(100% - 2 * clamp(20px, 5vw, 74px)));
  height: 82px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.app-header nav { display: flex; align-items: center; gap: 28px; }
.app-header nav a, .app-header nav button { padding: 0; border: 0; color: var(--copy); background: none; font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.2s; }
.app-header nav a:hover, .app-header nav button:hover { color: var(--accent-pale); }
html:is([data-route='app'], [data-route='collection']) .app-header { display: none; }
html:not([data-auth='in']) [data-when='in'],
html[data-auth='in'] [data-when='out'] { display: none; }

/* Sign in and WAX pages: one centred panel */
.auth { display: grid; min-height: calc(100vh - 82px); place-items: center; padding: 40px 16px 64px; }
.auth__panel {
  position: relative;
  width: min(100%, 440px);
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgb(var(--accent-light-rgb) / 0.2);
  background: linear-gradient(145deg, rgb(var(--panel-rgb) / 0.93), rgb(var(--bg-rgb) / 0.96));
  box-shadow: 0 22px 80px rgb(0 0 0 / 0.5);
}
.auth__panel::before { position: absolute; top: -1px; left: -1px; width: 56px; height: 2px; content: ''; background: var(--accent-pale); }
.auth__panel h1 { margin: 12px 0 8px; color: var(--text-soft); font: 700 clamp(40px, 6vw, 52px)/0.9 var(--display); text-transform: uppercase; }
.auth__panel h1 span { color: var(--accent-light); }
.auth__intro { margin: 0 0 24px; color: var(--copy); font-size: 12px; line-height: 1.6; }
.auth__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--line); background: rgb(var(--bg-rgb) / 0.6); }
.auth__tabs button { min-height: 40px; padding: 0 8px; border: 1px solid transparent; color: var(--copy); background: transparent; font: 600 12px var(--sans); transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.auth__tabs button:hover { color: var(--text-soft); }
.auth__tabs button[aria-selected='true'] { border-color: rgb(var(--accent-light-rgb) / 0.3); color: var(--text-soft); background: rgb(var(--accent-rgb) / 0.14); }
.auth__panel .feedback { margin-top: 14px; }
.auth__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.6; }
.wax-linked { display: grid; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid rgb(var(--accent-light-rgb) / 0.3); background: rgb(var(--accent-rgb) / 0.08); color: var(--copy); font-size: 12px; line-height: 1.5; }
.wax-linked b { color: var(--text-soft); }

/* Dashboard layout: fixed sidebar + column */
html.menu-open { overflow: hidden; }
.dashboard { --sidebar: 17.5rem; --max: 1320px; --gutter: clamp(16px, 3vw, 40px); overflow-x: clip; }
.dashboard__scrim { display: none; }

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--sidebar);
  padding: 20px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--card-line);
  background: rgb(var(--bg-rgb) / 0.86);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.sidebar__top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--control); padding: 0 12px 20px; border-bottom: 1px solid var(--card-line); }
.sidebar__close { display: none; }
.sidebar__nav { display: flex; flex: 1; flex-direction: column; padding: 24px 0; }
.sidebar__label { margin: 0 0 8px; padding: 0 12px; color: var(--ghost); font: 700 9px var(--mono); letter-spacing: 0.15em; text-transform: uppercase; }
.sidebar__label:not(:first-child) { margin-top: 28px; }
.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.sidebar__tab {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  color: var(--copy);
  background: transparent;
  font: 600 13px var(--sans);
  text-align: left;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.sidebar__tab::before {
  position: absolute;
  top: 24%;
  bottom: 24%;
  left: -16px;
  width: 2px;
  content: '';
  background: var(--accent-light);
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 180ms ease, transform 220ms ease;
}
.sidebar__tab:hover { color: var(--text); background: rgb(255 255 255 / 0.03); }
.sidebar__tab[aria-current='page'] { border-color: rgb(var(--accent-light-rgb) / 0.16); color: var(--text); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.16), rgb(var(--accent-rgb) / 0.025)); }
.sidebar__tab[aria-current='page']::before { opacity: 1; transform: scaleY(1); }
.sidebar__tab[aria-current='page'] .icon { color: var(--accent-light); }

/* one entry per site: its colour, its state, what comes next */
.sidebar__site { min-height: 52px; padding-block: 7px; }
.sidebar__site-text { display: grid; min-width: 0; gap: 2px; }
.sidebar__site-text b, .sidebar__site-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__site-text b { font-weight: 600; }
.sidebar__site-text small { color: var(--muted); font: 500 11px var(--sans); font-variant-numeric: tabular-nums; }
.sidebar__empty { margin: 0; padding: 4px 12px; color: var(--muted); font-size: 12px; }
.site-dot { justify-self: center; width: 9px; height: 9px; border: 1.5px solid var(--ghost); border-radius: 50%; }
.sidebar__site[data-state='ready'] .site-dot { border-color: var(--site); background: var(--site); }
.sidebar__site[data-state='live'] .site-dot { border-color: var(--site); background: var(--site); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site) 22%, transparent); animation: pulse 1.8s ease-in-out infinite; }
.sidebar__site[data-state='down'] .site-dot { border-color: var(--warm); }
@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.sidebar__foot { display: grid; flex: none; gap: 12px; padding-top: 12px; border-top: 1px solid var(--card-line); }
.profile { display: grid; flex: none; grid-template-columns: 36px minmax(0, 1fr) var(--control); align-items: center; gap: 12px; padding: 0 4px; }
.profile__avatar { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgb(var(--accent-light-rgb) / 0.34); border-radius: 50%; color: var(--accent-pale); background: rgb(var(--accent-rgb) / 0.14); font: 700 14px var(--display); }
.profile > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.profile strong, .profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile strong { color: var(--text); font-size: 12px; }
.profile small { color: var(--muted); font-size: 10px; }

.dashboard__main { display: flex; min-width: 0; min-height: 100vh; min-height: 100dvh; flex-direction: column; margin-left: var(--sidebar); }
.topbar, .dashboard__content, .dashboard__footer { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
/* only where the sidebar is a drawer: the button that opens it, and the bots at a glance */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--card-line);
  background: rgb(var(--bg-rgb) / 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.topbar__brand { font-size: 16px; }
.topbar__status { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 32px; margin-left: auto; padding: 0 12px; border: 1px solid var(--card-line); color: var(--copy); background: rgb(var(--accent-light-rgb) / 0.04); font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.topbar__status i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ghost); }
.topbar__status[data-state='ready'] { border-color: rgb(var(--accent-light-rgb) / 0.3); color: var(--accent-light); }
.topbar__status[data-state='ready'] i { background: var(--accent-light); }
.topbar__status[data-state='live'] { border-color: rgb(var(--live-rgb) / 0.4); color: var(--live); background: rgb(var(--live-rgb) / 0.07); }
.topbar__status[data-state='live'] i { background: var(--live); box-shadow: 0 0 10px var(--live); animation: pulse 1.8s ease-in-out infinite; }
.topbar__status[data-state='paused'], .topbar__status[data-state='down'] { border-color: rgb(var(--warm-rgb) / 0.35); color: var(--warm); }
.topbar__status[data-state='paused'] i, .topbar__status[data-state='down'] i { background: var(--warm); }
.topbar__status[data-state='alert'] { border-color: rgb(var(--danger-rgb) / 0.35); color: var(--danger); }
.topbar__status[data-state='alert'] i { background: var(--danger); }

.dashboard__content { flex: 1; width: 100%; padding-block: clamp(24px, 3vw, 40px) 48px; }
.dashboard__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; border-top: 1px solid var(--card-line); color: var(--ghost); font: 9px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }

.page-heading { margin: 0 0 calc(var(--gap) + 8px); }
.page-heading h1 { margin: 10px 0 0; color: var(--text-soft); font: 700 clamp(36px, 4.6vw, 60px)/0.9 var(--display); text-transform: uppercase; }
.page-heading h1 .dot { color: var(--accent-pale); }
.page-heading > p:last-child { max-width: 60ch; margin: 12px 0 0; color: var(--copy); font-size: 13px; line-height: 1.5; }

.tab-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.tab-panel[hidden] { display: none; }

/* Motion. A tab or a page that opens: the old one fades across to the new (View Transitions,
   where the browser has them), then the blocks of the new one rise one after the other.
   Anything shown again (a hidden block, a page) replays its entrance, nothing else moves. */
:root { --ease-out: cubic-bezier(0.22, 0.75, 0.2, 1); }
.tab-panel > *, .page-heading, .auth__panel { animation: rise 460ms var(--ease-out) backwards; }
.tab-panel > :nth-child(2) { animation-delay: 45ms; }
.tab-panel > :nth-child(3) { animation-delay: 90ms; }
.tab-panel > :nth-child(4) { animation-delay: 135ms; }
.tab-panel > :nth-child(n + 5) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes row-in { from { opacity: 0; transform: translate3d(-10px, 0, 0); background: rgb(var(--accent-light-rgb) / 0.08); } }
@keyframes fade-in { from { opacity: 0; } }
/* blocks that come and go inside a card: the bot's plan, the rotation, a test result… */
:is(.plan, .rotation, .lot, .featured, .proxy-checks, .dashboard__scrim):not([hidden]) { animation: fade-in 260ms ease backwards; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: ease; }
/* a light press on everything clickable */
:is(.button, .icon-button, .chip, .sidebar__tab, .segmented button) { -webkit-tap-highlight-color: transparent; }
:is(.button, .icon-button, .chip, .sidebar__tab):active:not(:disabled) { transform: translateY(1px) scale(0.985); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) {
  .tab-panel > *, .page-heading, .auth__panel, .openings-log__row.is-new { animation: none; }
}

/* Cards */
.card, .stat, .setting { border: 1px solid var(--card-line); background: var(--card-bg); }
.card, .setting { padding: var(--pad); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--card-line); }
.card__head--plain { align-items: center; padding-bottom: 0; border-bottom: 0; }
.card__head .eyebrow { margin-bottom: 6px; }
.card__head h2 { margin: 0; color: var(--text-soft); font: 700 clamp(22px, 2.4vw, 28px)/1 var(--display); text-transform: uppercase; }
.card__note { margin: 20px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.pill { display: inline-flex; flex: none; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid rgb(var(--accent-light-rgb) / 0.3); color: var(--accent-light); background: rgb(var(--accent-light-rgb) / 0.05); font: 700 9px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; }
.pill.is-live { border-color: rgb(var(--live-rgb) / 0.4); color: var(--live); background: rgb(var(--live-rgb) / 0.07); }
.pill.is-paused { border-color: rgb(var(--warm-rgb) / 0.35); color: var(--warm); background: rgb(var(--warm-rgb) / 0.04); }
.notice { margin: 0; padding: 12px 16px; border-left: 2px solid var(--accent-pale); color: var(--copy); background: rgb(var(--bg-rgb) / 0.6); font-size: 12px; line-height: 1.6; }
.notice.is-error { border-color: var(--danger); color: var(--danger); }
.notice a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }

/* Overview */
.stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.stat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 6px; min-height: 96px; padding: 18px var(--pad); }
.stat::before { position: absolute; top: -1px; left: -1px; width: 38px; height: 2px; content: ''; background: var(--accent-light); }
.stat > span { align-self: end; color: var(--copy); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.stat small { align-self: start; color: var(--muted); font-size: 11px; }
.stat strong { grid-column: 2; grid-row: 1 / span 2; color: var(--text-soft); font: 700 44px/0.9 var(--display); font-variant-numeric: tabular-nums; }
.stat--warm::before { background: var(--warm); }
.stat--warm strong { color: var(--warm); }
/* "+N" when a counter grows */
.stat__delta { position: absolute; top: 10px; right: var(--pad); color: var(--accent-light); font: 700 11px var(--mono); letter-spacing: 0.04em; pointer-events: none; animation: stat-delta 1.4s ease-out forwards; }
.stat--warm .stat__delta { color: var(--warm); }
@keyframes stat-delta {
  0% { opacity: 0; transform: translateY(6px); }
  20% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.collection-bar__count span { font-variant-numeric: tabular-nums; }
.collection-bar__summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
/* what the cards shown are worth, next to their count */
.collection-bar__value { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--card-line); color: var(--text-soft); font: 10px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; text-transform: uppercase; }
.collection-bar__value[hidden] { display: none; }

/* Collection: my cards, the duplicates, or what's missing; and the export */
.collection-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.collection-views button[hidden] { display: none; }
.export { display: inline-flex; align-items: center; gap: 14px; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* "À compléter": one row per artist (WAX) or series (Kyara), opened on its cards */
.completion { display: grid; gap: 14px; }
.completion[hidden] { display: none; }
.completion__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.completion__item { border: 1px solid var(--card-line); background: var(--card-bg); }
.completion__item.is-done { border-color: rgb(var(--live-rgb) / 0.42); }
.completion__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(90px, 220px) 64px 20px; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px 10px 10px; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; transition: background-color 160ms; }
.completion__head:hover { background: rgb(var(--accent-light-rgb) / 0.04); }
.completion__pic { display: grid; width: 44px; height: 44px; place-items: center; overflow: hidden; border-radius: 50%; color: var(--accent-light); background: var(--panel); font: 700 16px var(--display); }
.completion__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.completion__text { display: grid; min-width: 0; gap: 3px; }
.completion__text strong { overflow: hidden; color: var(--text-soft); font: 600 14px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.completion__text small { color: var(--muted); font-size: 11px; }
.completion__count { color: var(--text-soft); font: 11px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.completion__chevron { color: var(--accent-light); font: 16px/1 var(--mono); text-align: center; }
.completion__item.is-done .completion__meter span { background: var(--live); }
.completion__detail { display: grid; gap: 4px; padding: 0 14px 16px; border-top: 1px solid var(--card-line); }
.completion__wait { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.completion__group { display: grid; gap: 10px; padding-top: 14px; }
.completion__group-head { display: flex; align-items: center; gap: 10px; }
.completion__group-head strong { min-width: 0; overflow: hidden; color: var(--text-soft); font: 600 13px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.completion__group-head small { flex: none; color: var(--muted); font: 10px var(--mono); }
.completion__cover { width: 32px; height: 32px; flex: none; object-fit: cover; }
.completion__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.completion__card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border: 1px solid var(--card-line); border-left: 3px solid var(--rc, var(--card-line)); background: rgb(var(--bg-rgb) / 0.35); }
.completion__card.is-owned { opacity: 0.55; }
.completion__thumb { width: 36px; height: 36px; overflow: hidden; background: var(--panel); }
.completion__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.completion__card-text { display: grid; min-width: 0; gap: 2px; }
.completion__card-text b { overflow: hidden; color: var(--text-soft); font: 600 12px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.completion__card-text small { color: var(--muted); font-size: 10px; }
.completion__state { color: var(--muted); font: 700 8px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.completion__card.is-missing .completion__state { color: var(--warm); }
.completion__more { justify-self: center; }
.completion__more[hidden] { display: none; }
@media (max-width: 600px) {
  .collection-top { flex-direction: column; align-items: stretch; }
  .collection-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-views button { padding: 0 6px; }
  .export { justify-content: flex-end; }
  .completion__head { grid-template-columns: 40px minmax(0, 1fr) auto 16px; grid-template-rows: auto auto; gap: 6px 12px; }
  .completion__pic { width: 40px; height: 40px; grid-row: 1 / 3; }
  .completion__meter { grid-column: 2 / -1; grid-row: 2; }
  .completion__cards { grid-template-columns: minmax(0, 1fr); }
}
/* under the free boosters, inside their card */
.stat__cooldown { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--card-line); color: var(--warm); font: 9px var(--mono); letter-spacing: 0.04em; }

.bot-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 20px; }
.bot-controls__buttons { display: grid; grid-template-columns: auto auto; gap: 8px; }

/* "Un seul / Rotation", then the rotation: its order as a loop, every booster as a button */
.booster-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.app-shell .booster-head label { margin: 0; }
.segmented { display: inline-flex; padding: 2px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.6); }
.segmented button { min-height: 30px; padding: 0 14px; border: 0; color: var(--copy); background: transparent; font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; transition: color 160ms, background-color 160ms; }
.segmented button:hover:not(:disabled) { color: var(--text-soft); }
.segmented button[aria-checked='true'] { color: var(--bg); background: var(--accent-light); }
.segmented button:disabled { cursor: default; opacity: 0.5; }
#set-select[hidden], .rotation-summary[hidden], .rotation[hidden] { display: none; }
.rotation-summary { display: flex; align-items: center; min-height: var(--control); margin: 0; padding: 0 14px; border: 1px solid var(--border-strong); color: var(--text-soft); background: rgb(var(--bg-rgb) / 0.82); font-size: 13px; }

.rotation { display: grid; gap: 14px; margin-bottom: 20px; padding: 16px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.4); }
.rotation__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rotation__top .link-button[hidden] { display: none; }
.rotation__title { margin: 0 auto 0 0; color: var(--text-2); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rotation__title small { margin-left: 6px; color: var(--muted); font: 11px var(--sans); letter-spacing: 0; text-transform: none; }
.rotation__saved { color: var(--live); font-size: 12px; }
.rotation__saved.is-error { color: var(--danger); }

/* ① A → ② B → ③ C ↺ */
.rotation__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rotation__step { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px 0 6px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.7); cursor: grab; user-select: none; transition: border-color 160ms, opacity 160ms, transform 160ms; }
.rotation__step + .rotation__step { margin-left: 18px; }
.rotation__step + .rotation__step::before { position: absolute; left: -22px; color: var(--muted); content: '→'; font: 13px var(--sans); pointer-events: none; }
.rotation__step[draggable='false'] { cursor: default; }
.rotation__step.is-next { border-color: var(--accent-light); background: rgb(var(--accent-rgb) / 0.16); }
.rotation__step.is-dragging { opacity: 0.4; }
.rotation__step.is-over { border-color: var(--warm); transform: translateY(-2px); }
.rotation__n { display: inline-grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 50%; color: var(--bg); background: var(--muted); font: 700 10px var(--mono); }
.rotation__step.is-next .rotation__n { background: var(--accent-light); }
.rotation__name { color: var(--text-soft); font-size: 13px; white-space: nowrap; }
.rotation__badge { color: var(--accent-light); font: 700 8px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.rotation__remove { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 0; color: var(--muted); background: transparent; font: 12px/1 var(--sans); transition: color 160ms; }
.rotation__remove:hover:not(:disabled) { color: var(--danger); }
.rotation__loop { color: var(--muted); font: 10px var(--mono); letter-spacing: 0.06em; }
/* smart: the boosters side by side, no order, each with the new cards it gives */
.rotation__smart { min-height: 30px; }
.rotation__flow.is-smart { gap: 8px; }
.rotation__flow.is-smart .rotation__step + .rotation__step { margin: 0; }
.rotation__flow.is-smart .rotation__step + .rotation__step::before { content: none; }
.rotation__stat { color: var(--copy); font: 9px var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.rotation__step.is-next .rotation__stat { color: var(--text-soft); }
.rotation__empty { margin: 0; color: var(--muted); font-size: 13px; }
.rotation__hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.rotation__hint:empty { display: none; }

/* every booster of the site: a click adds it at the end */
.rotation__picker { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--card-line); }
.app-shell .rotation__filter { width: min(100%, 240px); height: 36px; }
.rotation__sets { display: grid; gap: 14px; max-height: 360px; overflow: auto; padding-right: 4px; overscroll-behavior: contain; }
.rotation__family { display: grid; gap: 8px; }
.rotation__family-name { margin: 0; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rotation__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rotation__chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 9px; border: 1px solid var(--card-line); color: var(--text-soft); background: rgb(var(--bg-rgb) / 0.55); font: 500 12px var(--sans); transition: border-color 160ms, background-color 160ms, transform 160ms; }
.rotation__chip:hover:not(:disabled) { border-color: var(--accent-light); background: rgb(var(--accent-light-rgb) / 0.08); transform: translateY(-1px); }
.rotation__chip:active:not(:disabled) { transform: translateY(0); }
.rotation__chip:disabled { cursor: default; opacity: 0.5; }
.rotation__chip.is-in { border-color: rgb(var(--accent-light-rgb) / 0.45); }
.rotation__plus { color: var(--accent-light); font: 700 14px/1 var(--mono); }
.rotation__count { color: var(--accent-light); font: 700 10px var(--mono); }
@media (pointer: coarse) {
  .rotation__chip, .rotation__step { min-height: 44px; }
  .rotation__remove { width: 40px; height: 40px; }
}
/* narrow: the order reads top to bottom */
@media (max-width: 600px) {
  .rotation__flow { flex-direction: column; align-items: stretch; gap: 0; }
  .rotation__step + .rotation__step { margin: 22px 0 0; }
  .rotation__step + .rotation__step::before { top: -20px; left: 12px; content: '↓'; }
  .rotation__name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .rotation__loop, .rotation__empty { margin-top: 10px; }
  .rotation__flow.is-smart { gap: 6px; }
}

/* "Rythme" and "Garanties": two boxes under the buttons, side by side when there is room */
.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin-bottom: 20px; }
.plan[hidden], .lot[hidden] { display: none; }
.plan__box { display: grid; gap: 12px; min-width: 0; padding: 12px 16px 16px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.4); }
.plan__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }
.plan__title { margin: 0 auto 0 0; color: var(--text-2); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.plan__lead { margin: 0; color: var(--copy); font-size: 13px; line-height: 1.5; }
.plan__hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.plan__hint:empty, .rotation__saved:empty { display: none; }

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); background: rgb(var(--bg-rgb) / 0.82); }
.stepper button { width: 34px; min-height: 34px; padding: 0; border: 0; color: var(--accent-light); background: transparent; font: 700 15px/1 var(--mono); transition: background-color 160ms, color 160ms; }
.stepper button:hover:not(:disabled) { background: rgb(var(--accent-light-rgb) / 0.1); }
.stepper button:disabled { cursor: default; color: var(--muted); opacity: 0.45; }
.stepper output { display: grid; min-width: 36px; place-items: center; padding: 0 2px; color: var(--text); font: 700 14px var(--mono); font-variant-numeric: tabular-nums; }
.stepper--small button { width: 28px; min-height: 28px; font-size: 13px; }
.stepper--small output { min-width: 26px; font-size: 12px; }

.lot { display: grid; gap: 12px; }
.lot__size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--text-soft); font-size: 13px; }
.lot__presets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.lot__preset { min-height: 28px; padding: 0 10px; border: 1px solid var(--card-line); color: var(--copy); background: transparent; font: 700 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; transition: border-color 160ms, color 160ms, background-color 160ms; }
.lot__preset:hover:not(:disabled) { border-color: var(--accent-light); color: var(--accent-light); }
.lot__preset[aria-pressed='true'] { border-color: var(--accent-light); color: var(--bg); background: var(--accent-light); }
.lot__preset:disabled { cursor: default; opacity: 0.5; }
/* the next batch: one pip per booster in the colour of its booster (--hue, in degrees, from app.js), filled once it's there */
.pip, .lot__share { --booster: var(--accent-light); }
@supports (color: hsl(from red h s l)) {
  .pip, .lot__share { --booster: hsl(from var(--accent-light) calc(h + var(--hue, 0)) s l); }
}
.lot__pips { display: grid; grid-template-columns: repeat(var(--pips, 10), minmax(0, 1fr)); gap: 4px; }
.pip { position: relative; height: 16px; border: 1px solid color-mix(in srgb, var(--booster) 70%, transparent); background: color-mix(in srgb, var(--booster) 10%, transparent); transition: background-color 240ms; }
.pip.is-in { border-color: var(--booster); background: var(--booster); }
.pip.is-done { border-color: transparent; background: color-mix(in srgb, var(--booster) 30%, transparent); }
.lot__pips.is-many { gap: 2px; }
.lot__pips.is-many .pip { height: 12px; }
/* the booster a guarantee falls on */
.pip.is-bonus { border-color: var(--rarity); box-shadow: 0 0 0 1px var(--rarity), 0 0 12px color-mix(in srgb, var(--rarity) 60%, transparent); }
.pip.is-bonus::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--rarity); content: '★'; font: 9px/1 var(--sans); }
.pip.is-bonus.is-in::after { color: var(--bg); }
.lot__eta { margin: -4px 0 0; color: var(--copy); font: 10px var(--mono); letter-spacing: 0.04em; }
.lot__eta.is-live { color: var(--live); }
.lot__split { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lot__split:empty { display: none; }
.lot__share { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 3px 4px 3px 10px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); }
.lot__swatch { width: 10px; height: 10px; background: var(--booster); }
.lot__name { overflow: hidden; color: var(--text-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lot__count { padding-right: 8px; color: var(--text); font: 700 12px var(--mono); }
.lot__share.is-none { opacity: 0.6; }
.lot__share.is-none .lot__swatch { background: transparent; box-shadow: inset 0 0 0 1px var(--booster); }
.lot__note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.lot__reset { display: flex; justify-content: flex-end; }

/* a guarantee: its rarity, how far it is, the booster it goes to (--rarity: the site's colour of the rarity) */
.bonus { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bonus__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: 'gem text left' '. target target'; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--card-line); border-left: 2px solid var(--rarity); background: rgb(var(--bg-rgb) / 0.55); }
.bonus__row.is-due { border-color: color-mix(in srgb, var(--rarity) 55%, transparent); border-left-color: var(--rarity); background: color-mix(in srgb, var(--rarity) 8%, rgb(var(--bg-rgb) / 0.55)); }
.bonus__gem { grid-area: gem; align-self: start; width: 8px; height: 8px; margin: 5px 0 0 1px; background: var(--rarity); transform: rotate(45deg); }
.bonus__text { display: grid; grid-area: text; gap: 7px; min-width: 0; }
.bonus__name { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.35; }
.bonus__name b { font-weight: 600; }
.bonus__name small { display: block; color: var(--muted); font-size: 11px; }
.meter.bonus__meter span { background: var(--rarity); }
.bonus__left { display: grid; grid-area: left; justify-items: end; gap: 3px; margin: 0; line-height: 1; }
.bonus__left strong { color: var(--text); font: 700 18px var(--mono); font-variant-numeric: tabular-nums; }
.bonus__left small { color: var(--muted); font: 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.bonus__row.is-due .bonus__left strong { color: var(--rarity); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.bonus__target { display: flex; grid-area: target; align-items: center; gap: 10px; min-width: 0; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.app-shell .bonus__target select { flex: 1; min-width: 0; height: 34px; font-size: 12px; }
.bonus__fixed { color: var(--copy); font: 12px var(--sans); letter-spacing: 0; text-transform: none; }
.bonus__warn { grid-column: 2 / -1; margin: 0; color: var(--warm); font-size: 11px; line-height: 1.4; }
.bonus__buy { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.bonus__buy b { color: var(--text-soft); font-weight: 600; }
.bonus__empty { color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) {
  .plan { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .stepper button { width: 42px; min-height: 42px; }
  .stepper--small button { width: 38px; min-height: 38px; }
  .lot__preset { min-height: 38px; }
  .app-shell .bonus__target select { height: 42px; }
}

/* one hue per site, turned from the theme colour. --site-shift (in degrees, without unit: h is a number here) comes from app.js */
.site-tag, .chip--site, .sidebar__site, .activity__part, .activity-legend__item { --site: var(--accent-light); }
@supports (color: hsl(from red h s l)) {
  .site-tag, .chip--site, .sidebar__site, .activity__part, .activity-legend__item { --site: hsl(from var(--accent-light) calc(h + var(--site-shift, 0)) s l); }
}
.site-tag { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 24px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--site) 40%, transparent); color: var(--site); background: color-mix(in srgb, var(--site) 8%, transparent); font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.site-tag::before, .chip--site::before { width: 6px; height: 6px; flex: none; border-radius: 50%; content: ''; background: var(--site); }

.latest-sites { display: grid; gap: 24px; }
.latest-site { display: grid; gap: 12px; }
.latest-site + .latest-site { padding-top: 24px; border-top: 1px solid var(--card-line); }
.latest-site__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.latest-site__head small { color: var(--muted); font-size: 11px; }
.latest-site__head .link-button { min-height: 24px; margin-left: auto; }
.latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.latest-card { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.6); }
.latest-card__cover { display: grid; width: 40px; height: 50px; flex: none; place-items: center; overflow: hidden; border: 2px solid var(--rc, var(--accent-light)); border-radius: 3px; color: var(--accent-pale); background: var(--panel); font: 700 16px var(--display); }
.latest-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.latest-card div { display: grid; min-width: 0; gap: 3px; }
.latest-card strong, .latest-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-card strong { color: var(--text-soft); font: 600 12px var(--sans); }
.latest-card span { color: var(--copy); font-size: 11px; }
.latest-card small { color: var(--rc, var(--accent-light)); font: 8px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.latest-empty { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }

/* the site "Le bot" and the account settings are about */
.bot-sites { margin: -4px 0 20px; }

/* Statistics */
.stats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats--four .stat strong { font-size: clamp(34px, 2.8vw, 44px); }
.activity-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; }
.activity-legend__item { display: inline-flex; align-items: center; gap: 7px; color: var(--copy); font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.activity-legend__item::before { width: 8px; height: 8px; content: ''; background: var(--site); }
.activity-legend__item.is-unknown::before { background: var(--ghost); }
.activity { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: clamp(3px, 0.9vw, 10px); height: 210px; }
.activity__day { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.activity__value { min-height: 12px; color: var(--copy); font: 9px var(--mono); font-variant-numeric: tabular-nums; }
.activity__track { display: flex; flex: 1; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--card-line); }
.activity__bar { display: flex; width: 100%; max-width: 30px; flex-direction: column-reverse; gap: 2px; transition: height 400ms ease; }
.activity__part { flex: 1 1 0; min-height: 3px; background: var(--site); }
.activity__part.is-unknown { background: var(--ghost); }
.activity__label { overflow: hidden; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.activity__day.is-today .activity__label { color: var(--accent-light); }
.insight-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: var(--gap); }
.rarity-sites { display: grid; gap: 24px; }
.rarity-site + .rarity-site { padding-top: 24px; border-top: 1px solid var(--card-line); }
.rarity-site__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.rarity-site__head small { color: var(--muted); font-size: 11px; }
.rarity-site__head .rarity-site__value { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--text-soft); font: 10px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; text-transform: uppercase; }
.rarity-site__catalog { display: grid; gap: 7px; margin-bottom: 16px; color: var(--copy); font-size: 11px; font-variant-numeric: tabular-nums; }
.meter { height: 4px; overflow: hidden; background: rgb(var(--accent-light-rgb) / 0.1); }
.meter span { display: block; height: 100%; background: var(--accent-light); }
.rarity-bar { display: flex; height: 10px; gap: 2px; margin-bottom: 14px; }
.rarity-bar span { flex: 1 1 0; min-width: 3px; background: var(--rc, var(--ghost)); }
/* read down each column, rarest first; app.js gives the number of rows */
.rarity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.rarity-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 46px; align-items: center; gap: 8px; color: var(--copy); font-size: 12px; }
.rarity-list i { width: 8px; height: 8px; background: var(--rc, var(--ghost)); }
.rarity-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rarity-list b { color: var(--text-soft); font: 600 11px var(--mono); font-variant-numeric: tabular-nums; }
.rarity-list small { color: var(--muted); font: 10px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.best { display: grid; gap: 8px; }
.latest-card__when { overflow: hidden; color: var(--muted); font: normal 10px var(--sans); text-overflow: ellipsis; white-space: nowrap; }

/* History */
.history-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 1px solid var(--card-line); color: var(--copy); background: var(--card-bg); font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color 160ms, color 160ms, background 160ms, transform 160ms; }
.chip:hover { border-color: rgb(var(--accent-light-rgb) / 0.4); color: var(--text-soft); }
.chip[aria-pressed='true'] { border-color: rgb(var(--accent-light-rgb) / 0.55); color: var(--text-soft); background: rgb(var(--accent-light-rgb) / 0.1); }
.chip--site[aria-pressed='true'] { border-color: color-mix(in srgb, var(--site) 60%, transparent); background: color-mix(in srgb, var(--site) 12%, transparent); }
.history { display: grid; gap: 10px; }
.history__day { margin: 14px 0 2px; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.history__day:first-child { margin-top: 0; }
.history-entry { display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px solid var(--card-line); background: var(--card-bg); }
/* a booster has 5 cards: one row of 5 on a wide screen */
.history-entry__cards { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.history-entry__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.history-entry__time { color: var(--text-soft); font: 700 13px var(--mono); font-variant-numeric: tabular-nums; }
.history-entry__what { min-width: 0; color: var(--copy); font-size: 12px; }
.history-entry__count { margin-left: auto; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.history__more { justify-self: center; }

/* Automation */
.automation-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); align-items: start; gap: var(--gap); }
.schedule__modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.schedule__modes legend { grid-column: 1 / -1; margin: 0 0 12px; padding: 0; }
.option { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease; }
.option:hover { border-color: rgb(var(--accent-light-rgb) / 0.34); }
.option:has(input:checked) { border-color: var(--accent-light); background: rgb(var(--accent-rgb) / 0.1); }
.option:has(input:focus-visible) { outline: 2px solid var(--accent-pale); outline-offset: 2px; }
.option input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent-light); cursor: pointer; }
.option b { display: block; color: var(--text-soft); font: 600 13px var(--sans); }
.option small { display: block; margin-top: 4px; color: var(--copy); font-size: 11px; line-height: 1.5; }
.schedule__window { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--card-line); }
.schedule.is-continuous .schedule__window, .schedule.is-continuous .schedule__footer button { display: none; }
.schedule__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 12px; }
.schedule__fields input { font-family: var(--mono) !important; }
.schedule__days { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; border: 0; }
.schedule__days legend { width: 100%; }
.schedule__days label { position: relative; display: grid; min-width: 48px; min-height: 40px; place-items: center; padding: 0 10px; border: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); cursor: pointer; }
.schedule__days input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.schedule__days label:has(input:checked) { border-color: var(--accent-light); color: var(--accent-light); background: rgb(var(--accent-light-rgb) / 0.08); }
.schedule__days label:has(input:focus-visible) { outline: 2px solid var(--accent-pale); outline-offset: 2px; }
.schedule__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--card-line); }
.schedule__footer p { margin: 0; color: var(--copy); font-size: 11px; line-height: 1.5; }
.schedule__footer button { flex: none; }

.resume { display: grid; gap: 8px; margin: 0; }
.resume > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); }
.resume dt { color: var(--copy); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.resume dd { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; }
.resume dd[data-on='true'] { color: var(--accent-light); }

/* Collection */
.collection-gate { display: grid; gap: 12px; padding: clamp(24px, 4vw, 48px); border: 1px solid rgb(var(--accent-light-rgb) / 0.28); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.12), rgb(var(--bg-rgb) / 0.55)); }
.collection-gate h2 { margin: 0; color: var(--text-soft); font: 700 clamp(26px, 3vw, 38px)/1 var(--display); text-transform: uppercase; }
.collection-gate p:not(.eyebrow) { max-width: 58ch; margin: 0; color: var(--copy); font-size: 13px; line-height: 1.6; }
.collection-gate ol { display: grid; gap: 6px; margin: 4px 0 8px; padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.collection-gate .button { justify-self: start; }
.missing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 12px 12px 16px; border: 1px solid rgb(var(--warm-rgb) / 0.32); color: var(--copy); background: rgb(var(--warm-rgb) / 0.06); font-size: 12px; }
.missing b { color: var(--warm); }
.collection-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.collection-bar__count { color: var(--copy); font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.app-shell .filters input { width: 240px; }
.app-shell .filters select { width: auto; min-width: 170px; }
.empty { grid-column: 1 / -1; padding: 48px 20px; border: 1px solid var(--card-line); color: var(--muted); background: var(--card-bg); font-size: 12px; text-align: center; }
.empty strong { display: block; margin-bottom: 8px; color: var(--text-soft); font: 600 30px var(--display); text-transform: uppercase; }

/* Settings */
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.setting { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: 20px; }
.setting--wide { grid-column: 1 / -1; }
.setting h3 { margin: 0 0 6px; color: var(--text-soft); font: 600 15px var(--sans); }
.setting p { margin: 0; color: var(--copy); font-size: 12px; line-height: 1.6; }
.setting__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; color: var(--copy); font-size: 12px; }
.setting__row b { color: var(--text-soft); font-weight: 600; }
.app-shell .setting__row select { width: auto; min-width: 160px; }
.setting__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.setting__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.setting__colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: center; gap: 12px 16px; padding-top: 16px; border-top: 1px solid var(--card-line); }
.setting__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.setting__head > div { max-width: 62ch; }
.rarity-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.rarity-legend span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--rc); color: var(--rc); background: color-mix(in srgb, var(--rc) 8%, transparent); font: 700 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

.invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgb(var(--accent-light-rgb) / 0.3); background: rgb(var(--accent-rgb) / 0.08); }
.invite span { color: var(--accent-light); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.invite code { overflow-wrap: anywhere; color: var(--text-soft); font: 12px/1.5 var(--mono); user-select: all; }
.admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.admin-columns h4 { margin: 0 0 8px; color: var(--copy); font: 400 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.admin-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.admin-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); }
.admin-list li > div { display: grid; min-width: 0; gap: 3px; }
.admin-list strong { overflow: hidden; color: var(--text-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-list small, .admin-list .admin-empty { color: var(--muted); font-size: 11px; line-height: 1.4; }
.admin-list .admin-empty { display: block; min-height: 0; border-style: dashed; }
.memory-bar { display: flex; height: 14px; margin: 4px 0 10px; overflow: hidden; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); }
.memory-bar span { height: 100%; transition: width 0.9s cubic-bezier(0.22, 0.75, 0.2, 1); }
.memory-bar .is-node { background: var(--accent-light); }
.memory-bar .is-chrome { background: var(--warm); }
.memory-bar .is-screen { background: var(--accent-pale); }
.memory-bar .is-others { background: var(--muted); opacity: 0.6; }
.memory-summary { margin: 0 0 10px; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.memory-summary:empty { display: none; }
.memory-at { display: flex; align-items: center; gap: 7px; margin: -4px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.memory-at:has(#memory-at:empty) { display: none; }
.memory-at i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--live); opacity: 0.5; }
/* each reading: the dot lights up */
.memory-at i.is-tick { animation: memory-tick 0.9s ease-out; }
@keyframes memory-tick { from { opacity: 1; box-shadow: 0 0 0 4px rgb(var(--live-rgb) / 0.25); } to { opacity: 0.5; box-shadow: 0 0 0 0 rgb(var(--live-rgb) / 0); } }
.admin-action { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--card-line); color: var(--copy); background: transparent; font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; transition: color 180ms ease, border-color 180ms ease; }
.admin-action:hover { border-color: var(--danger); color: var(--danger); }

/* Notifications */
.switch { position: relative; display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: var(--control); color: var(--copy); font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch__track { position: relative; width: 40px; height: 22px; flex: none; border: 1px solid var(--border-strong); border-radius: 11px; background: rgb(var(--bg-rgb) / 0.8); transition: background-color 180ms ease, border-color 180ms ease; }
.switch__track::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; content: ''; background: var(--muted); transition: transform 180ms ease, background-color 180ms ease; }
.switch input:checked + .switch__track { border-color: var(--accent-light); background: rgb(var(--accent-rgb) / 0.32); }
.switch input:checked + .switch__track::after { background: var(--accent-light); transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent-pale); outline-offset: 2px; }

.this-device { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid rgb(var(--accent-light-rgb) / 0.28); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.12), rgb(var(--bg-rgb) / 0.5)); }
.this-device__icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(var(--accent-light-rgb) / 0.3); color: var(--accent-light); }
.this-device__icon svg { width: 22px; height: 22px; }
.this-device__text { display: grid; min-width: 0; gap: 4px; }
.this-device__text strong { color: var(--text-soft); font: 600 14px var(--sans); }
.this-device__text small { color: var(--copy); font-size: 12px; line-height: 1.5; }
.this-device__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.this-device[data-state='on'] { border-color: rgb(var(--live-rgb) / 0.4); background: linear-gradient(135deg, rgb(var(--live-rgb) / 0.1), rgb(var(--bg-rgb) / 0.5)); }
.this-device[data-state='on'] .this-device__icon { border-color: rgb(var(--live-rgb) / 0.45); color: var(--live); }
.this-device:is([data-state='denied'], [data-state='unsupported'], [data-state='insecure'], [data-state='server']) { border-color: rgb(var(--warm-rgb) / 0.35); background: rgb(var(--warm-rgb) / 0.05); }
.this-device:is([data-state='denied'], [data-state='unsupported'], [data-state='insecure'], [data-state='server']) .this-device__icon { border-color: rgb(var(--warm-rgb) / 0.4); color: var(--warm); }
.this-device + .feedback { margin-top: 12px; }

.devices { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.devices__empty { padding: 14px 16px; border: 1px dashed var(--card-line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.device { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px 16px; padding: 10px 12px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); }
.device__icon { display: grid; place-items: center; color: var(--copy); }
.device__icon svg { width: 22px; height: 22px; }
.device__main { display: grid; min-width: 0; gap: 3px; }
.app-shell .device__name { height: 32px; padding: 0 8px; margin-left: -8px; border-color: transparent; background: transparent; color: var(--text-soft); font: 600 13px var(--sans); }
.app-shell .device__name:hover { border-color: var(--card-line); }
.app-shell .device__name:focus { border-color: var(--accent-pale); background: rgb(var(--bg-rgb) / 0.82); }
.device__main small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.device__main .device__error, .sent__main .device__error { color: var(--danger); white-space: normal; }
.device__kind .chip { min-height: 32px; padding: 0 12px; }
.device__actions { display: flex; gap: 8px; }
.device__actions .button { min-height: 36px; padding: 0 14px; }

.rules { display: grid; gap: 8px; }
.rule { border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); transition: border-color 180ms ease; }
.rule:has(.rule__body:not([hidden])) { border-color: rgb(var(--accent-light-rgb) / 0.34); }
.rule__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; padding: 0 4px 0 14px; }
.rule__open { display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px; border: 0; color: var(--copy); background: none; text-align: left; }
.rule__open:hover .rule__name { color: var(--accent-pale); }
.rule__icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--card-line); color: var(--accent-light); }
.rule__icon svg { width: 18px; height: 18px; }
.rule__text { display: grid; min-width: 0; gap: 3px; }
.rule__name { overflow: hidden; color: var(--text-soft); font: 600 13px var(--sans); text-overflow: ellipsis; white-space: nowrap; transition: color 180ms ease; }
.rule__summary { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.rule__chevron { display: grid; place-items: center; color: var(--muted); transition: transform 200ms ease; }
.rule__chevron svg { width: 18px; height: 18px; }
.rule__open[aria-expanded='true'] .rule__chevron { transform: rotate(180deg); }
.rule[data-enabled='false'] :is(.rule__icon, .rule__text) { opacity: 0.5; }
.rule__body { padding: 4px 16px 16px; border-top: 1px solid var(--card-line); }
.rule__body[hidden] { display: none; }
.rule__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); align-items: start; gap: 24px; padding-top: 16px; }
.rule__form { display: grid; gap: 16px; }
.rule-field { display: grid; gap: 8px; min-width: 0; }
.rule-field__label { color: var(--text-2); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rule-field__hint { color: var(--muted); font-size: 11px; line-height: 1.5; }
.app-shell .rule-field textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 0; color: var(--text-soft); background: rgb(var(--bg-rgb) / 0.82); font: 500 12px/1.5 var(--sans); outline: none; resize: vertical; }
.app-shell .rule-field textarea:focus { border-color: var(--accent-pale); }
.rule-rarities { display: grid; gap: 8px; }
.rule-rarity { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); align-items: center; gap: 12px; }
.rule-rarity .site-tag { justify-self: start; }
.rule-checks { display: grid; gap: 10px; }
.rule-checks .check { color: var(--copy); font-size: 12px; cursor: pointer; }
.rule-checks .check input { width: 16px; height: 16px; flex: none; }
.rule-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.rule-var { min-height: 30px; padding: 0 10px; border: 1px dashed rgb(var(--accent-light-rgb) / 0.35); color: var(--copy); background: transparent; font: 500 11px var(--sans); transition: color 160ms, border-color 160ms, background-color 160ms; }
.rule-var:hover { border-style: solid; border-color: var(--accent-light); color: var(--accent-light); background: rgb(var(--accent-light-rgb) / 0.06); }
.rule__side { position: sticky; top: 24px; display: grid; gap: 8px; }
.rule__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-line); }
.rule__status { min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.rule__status.is-saved { color: var(--live); }
.rule__status.is-error { color: var(--danger); }
.rule__buttons { display: flex; gap: 8px; margin-left: auto; }
.rule-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--card-line); }
.rule-add span { margin-right: 4px; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rule-add .chip::before { content: '+'; color: var(--accent-light); font-size: 12px; }
#rules-feedback { margin-top: 12px; }

/* what the phone or the PC will show: neutral, like the system's own notifications */
.push-preview { display: grid; gap: 8px; padding: 12px 14px 14px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 18px; color: #e8eaed; background: rgb(32 34 38 / 0.94); box-shadow: 0 18px 48px rgb(0 0 0 / 0.45); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.push-preview__bar { display: flex; align-items: center; gap: 8px; color: #aab0b6; font-size: 11px; }
.push-preview__bar img { width: 18px; height: 18px; border-radius: 5px; }
.push-preview__bar span { color: #e8eaed; font-weight: 600; }
.push-preview__bar small::before { margin-right: 6px; content: '·'; }
.push-preview__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.push-preview__title { display: block; overflow-wrap: anywhere; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; }
.push-preview__body { margin: 3px 0 0; overflow-wrap: anywhere; color: #c9cdd2; font-size: 13px; line-height: 1.4; }
.push-preview__body:empty { display: none; }
.push-preview__image { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.push-preview__image[hidden] { display: none; }

.sent { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sent__empty { color: var(--muted); font-size: 12px; }
.sent__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 12px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.55); }
.sent__item.is-failed .rule__icon { border-color: rgb(var(--danger-rgb) / 0.4); color: var(--danger); }
.sent__main { display: grid; min-width: 0; gap: 3px; }
.sent__main strong { color: var(--text-soft); font: 600 12px var(--sans); }
.sent__main p { margin: 0; color: var(--copy); font-size: 12px; line-height: 1.45; }
.sent__main small { color: var(--muted); font-size: 11px; }

/* Responsive */
@media (max-width: 1240px) {
  .automation-grid, .insight-grid { grid-template-columns: minmax(0, 1fr); }
  .stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the sidebar becomes a drawer */
@media (max-width: 1080px) {
  .sidebar { visibility: hidden; transform: translateX(-100%); transition: transform 260ms ease, visibility 0s linear 260ms; }
  .sidebar.is-open { visibility: visible; transform: none; box-shadow: 24px 0 80px rgb(0 0 0 / 0.6); transition: transform 260ms ease; }
  .sidebar__close { display: inline-grid; }
  .dashboard__scrim { position: fixed; inset: 0; z-index: 25; display: block; padding: 0; border: 0; background: rgb(0 0 0 / 0.6); }
  .dashboard__scrim[hidden] { display: none; }
  .dashboard__main { margin-left: 0; }
  .topbar { display: flex; }
}
@media (max-width: 960px) {
  .rule__grid { grid-template-columns: minmax(0, 1fr); }
  .rule__side { position: static; order: -1; }
  .device { grid-template-columns: 36px minmax(0, 1fr); }
  .device__kind, .device__actions { grid-column: 2; }
}
@media (max-width: 760px) {
  .settings, .admin-columns, .setting__fields { grid-template-columns: minmax(0, 1fr); }
  .this-device { grid-template-columns: 44px minmax(0, 1fr); }
  .this-device__actions { grid-column: 1 / -1; justify-content: stretch; }
  .this-device__actions .button { flex: 1; }
  .rule__head { padding-left: 10px; }
  .rule__open { grid-template-columns: minmax(0, 1fr) 24px; padding-right: 6px; }
  .rule__open .rule__icon { display: none; }
  .rule__summary { white-space: normal; }
  .rule__body { padding-inline: 12px; }
  .rule-rarity { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .setting--wide { grid-column: auto; }
  .bot-controls { grid-template-columns: minmax(0, 1fr); }
  .bot-controls__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-bar { flex-direction: column; align-items: stretch; }
  .filters { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .filters input { grid-column: 1 / -1; width: 100%; }
  .app-shell .filters select { width: 100%; min-width: 0; }
  .setting__colors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .setting__colors .button { grid-column: 1 / -1; }
  .invite { grid-template-columns: minmax(0, 1fr); }
  .app-header { height: 68px; }
  .auth { min-height: calc(100vh - 68px); }
}
@media (max-width: 600px) {
  .stat { display: flex; min-height: 92px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 14px 12px; }
  .stat strong { order: -1; font-size: 32px; }
  .stat > span { align-self: flex-start; font-size: 8px; line-height: 1.3; }
  .stat small { display: none; }
  .schedule__modes { grid-template-columns: minmax(0, 1fr); }
  .schedule__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule__zone { grid-column: 1 / -1; }
  .schedule__footer { flex-direction: column; align-items: stretch; }
  .schedule__footer button { width: 100%; }
  .missing { flex-direction: column; align-items: stretch; }
  /* the 4 newest of each site, the history has the rest */
  .latest-site .latest-card:nth-child(n + 5) { display: none; }
  .activity { height: 170px; }
  .rarity-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none !important; grid-auto-flow: row; }
  .activity__label span { display: none; }
  .activity__value { font-size: 8px; }
  .activity-legend { justify-content: flex-start; }
  .missing .button { width: 100%; white-space: normal; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  html[data-cards='compact'] .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .dashboard__footer { flex-direction: column; }
}
@media (max-width: 480px) {
  .topbar { gap: 10px; }
  .topbar__status { width: 32px; padding: 0; justify-content: center; }
  .topbar__status span { display: none; }
  .card__head { flex-wrap: wrap; }
  .auth { place-items: start center; padding-top: 24px; }
}
@media (max-width: 360px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; min-height: 64px; }
  .stat > span { align-self: center; }
  .stat strong { grid-row: 1; order: 0; font-size: 30px; }
  .bot-controls__buttons { grid-template-columns: minmax(0, 1fr); }
  .sidebar { width: min(var(--sidebar), 88vw); }
}
@media (pointer: coarse) {
  .admin-action, .device__kind .chip, .device__actions .button, .rule-var { min-height: 44px; }
}

/* Missions: one card per site, its money, the rewards waiting, what Orbit claimed */
.sidebar__tab--count { grid-template-columns: 20px minmax(0, 1fr) auto; }
.sidebar__count { display: inline-grid; min-width: 20px; height: 20px; padding: 0 6px; place-items: center; border-radius: 10px; color: var(--bg); background: var(--accent-light); font: 700 10px var(--mono); }
.sidebar__count[hidden] { display: none; }

.missions-sites { display: grid; gap: var(--gap); }
#missions-feedback:not(:empty) { margin-bottom: var(--gap); font-size: 12px; }
.mission-site { display: grid; gap: 18px; }
.mission-site .card__head { margin: 0; }
.mission-site__title { display: grid; justify-items: start; gap: 8px; }
.mission-site__title h2 { margin: 0; }
.mission-site__empty { margin: 0; color: var(--copy); font-size: 14px; }

.wallet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wallet__item { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border: 1px solid var(--card-line); background: rgb(var(--accent-light-rgb) / 0.04); }
.wallet__label { color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.wallet__amount { color: var(--text); font: 700 32px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.wallet__item--won { grid-column: span 2; }
.wallet__won { color: var(--live); font: 600 14px/1.4 var(--sans); }
.wallet__item--won small { color: var(--muted); font-size: 12px; }

.mission-site__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding-block: 14px; border-block: 1px solid var(--card-line); }
.mission-site__state { display: grid; gap: 2px; margin: 0; }
.mission-site__state b { color: var(--text-soft); font: 600 15px var(--sans); }
.mission-site__state small { color: var(--muted); font-size: 12px; }
.mission-site__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* columns rather than a grid: a one-line group doesn't leave a hole next to a long one */
.mission-groups { columns: 2 380px; column-gap: 28px; }
.mission-group { display: grid; align-content: start; gap: 10px; min-width: 0; margin-bottom: 24px; break-inside: avoid; }
.mission-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.mission-group__head h3 { margin: 0; color: var(--text-soft); font: 700 18px/1.1 var(--display); letter-spacing: 0.02em; }
.mission-group__head small { color: var(--muted); font: 10px var(--mono); letter-spacing: 0.06em; }
.mission-group__note { margin: 0; color: var(--copy); font-size: 12px; }
.mission-group__more { justify-self: start; }
.mission-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: 'main progress state' 'main reward state';
  align-items: center;
  gap: 2px 14px;
  padding: 10px 12px;
  border: 1px solid var(--card-line);
  background: rgb(var(--bg-rgb) / 0.35);
}
.mission__main { display: grid; grid-area: main; min-width: 0; gap: 4px; }
.mission__label { color: var(--text-soft); font-size: 13px; line-height: 1.35; }
.mission__hint { color: var(--muted); font-size: 11px; }
.mission__bar { height: 3px; overflow: hidden; border-radius: 2px; background: rgb(var(--accent-light-rgb) / 0.14); }
.mission__bar i { display: block; height: 100%; background: var(--accent-light); }
.mission__progress { grid-area: progress; justify-self: end; color: var(--copy); font: 10px var(--mono); font-variant-numeric: tabular-nums; }
.mission__reward { grid-area: reward; justify-self: end; color: var(--warm); font: 700 10px var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.mission__state { grid-area: state; min-width: 86px; padding: 4px 8px; border: 1px solid var(--card-line); color: var(--muted); font: 700 8px var(--mono); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }
.mission--claimable { border-color: rgb(var(--live-rgb) / 0.4); background: rgb(var(--live-rgb) / 0.05); }
.mission--claimable .mission__state { border-color: rgb(var(--live-rgb) / 0.5); color: var(--live); }
.mission--claimed { opacity: 0.62; }
.mission--claimed .mission__bar i { background: var(--muted); }

/* the money as each site shows it: its icons and colours, not the theme's */
.cur-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; font-size: 1em; line-height: 1; vertical-align: -0.12em; }
.cur-icon svg { width: 100%; height: 100%; }
.reward { white-space: normal; }
.reward__part { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.wallet__amount { display: flex; align-items: center; gap: 10px; }
.wallet__amount .cur-icon { width: 0.78em; height: 0.78em; }
.wallet__won .reward__part, .wallet__item--won small .reward__part { font-weight: inherit; }
.mission-group__icon { display: inline-grid; min-width: 26px; height: 26px; margin-right: 4px; padding: 0 4px; place-items: center; font: 400 15px/1 var(--sans); vertical-align: 2px; }
.mission-group__icon.is-kanji { border: 1px solid var(--card-line); color: var(--accent-light); font: 500 12px/1 'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif; letter-spacing: 0.04em; }
.mission--pic { grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: 'pic main progress state' 'pic main reward state'; }
.mission__pic { grid-area: pic; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--panel); }

/* duplicates recycled by the bot, in each site's missions */
.recycle { display: grid; gap: 12px; margin-bottom: 20px; padding: 16px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.35); }
.recycle.is-on { border-color: rgb(var(--accent-light-rgb) / 0.4); }
.recycle__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.recycle__head h3 { margin: 0; color: var(--text-soft); font: 700 18px/1.1 var(--display); letter-spacing: 0.02em; }
.recycle__icon { color: var(--live); font: 400 16px/1 var(--sans); }
.recycle__safe { margin: -4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.recycle__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.recycle__label { min-width: 150px; color: var(--text-2); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.recycle__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recycle__rarity[aria-pressed='true'] { border-color: var(--rc, var(--accent-light)); color: var(--text); background: color-mix(in srgb, var(--rc, var(--accent-light)) 14%, transparent); }
.recycle__rarity::before { width: 7px; height: 7px; flex: none; border-radius: 50%; content: ''; background: var(--rc, var(--muted)); }
.app-shell .recycle__keep input { width: 110px; height: 36px; }
.recycle__unit { display: inline-flex; align-items: center; gap: 4px; color: var(--copy); }
.recycle__unit small { color: var(--muted); font-size: 11px; }
.recycle__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--card-line); }
.recycle__preview { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; color: var(--copy); font-size: 13px; }
.recycle__preview b { color: var(--text-soft); font-weight: 600; }
.recycle__preview small { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.recycle__names { flex-basis: 100%; color: var(--muted); font-size: 11px; }
@media (max-width: 600px) {
  .recycle__label { min-width: 0; flex-basis: 100%; }
  .recycle__row .segmented { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .recycle__bar { display: grid; }
}

.mission-log { color: var(--copy); font-size: 12px; }
.mission-log summary { width: fit-content; color: var(--accent-light); font: 700 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.mission-log ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.mission-log li { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mission-log time { min-width: 140px; color: var(--muted); }

@media (max-width: 600px) {
  .wallet__item--won { grid-column: 1 / -1; }
  .wallet__amount { font-size: 26px; }
  .mission { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'main state' 'progress reward'; }
  .mission--pic { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'pic main state' 'pic progress reward'; }
  .mission__pic { width: 36px; height: 36px; }
  .mission__progress { justify-self: start; }
  .mission-site__bar { display: grid; justify-content: stretch; }
  .mission-site__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .mission-site__actions .button { padding-inline: 10px; }
}

/* Card viewer: a card shown big, its details, and the extract of WAX cards */
[data-card-view] { cursor: pointer; }
.latest-card[data-card-view] { transition: border-color 180ms ease, background-color 180ms ease; }
.latest-card[data-card-view]:hover { border-color: rgb(var(--accent-light-rgb) / 0.42); background: rgb(var(--accent-light-rgb) / 0.05); }
/* the cell is bigger than its card (room for the glow): the ring goes around the card */
.card-cell:focus-visible { outline: none; }
.card-cell:focus-visible > :first-child { outline: 2px solid var(--accent-pale); outline-offset: 4px; }

/* a class set by app.js rather than html:has(): opening a card would restyle the whole page */
html.is-viewing .cursor { opacity: 0; }
.viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 48px);
  border: 0;
  color: var(--text-soft);
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}
.viewer:popover-open { display: grid; place-items: center; }
.viewer::backdrop { background: rgb(var(--bg-rgb, 4 7 11) / 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.viewer__layout { display: grid; grid-template-columns: auto minmax(0, 340px); align-items: center; gap: clamp(24px, 4vw, 56px); }
/* as big as the screen allows, the WAX format (63:88) or the Kyara one (5:7) */
.viewer__card { width: min(380px, 44vw, calc((100dvh - 96px) * 63 / 88)); animation: viewer-card 460ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.viewer__card--kyara { width: min(400px, 44vw, calc((100dvh - 96px) * 5 / 7)); }
.viewer__info { display: grid; min-width: 0; gap: 14px; padding: var(--pad); border: 1px solid var(--card-line); background: var(--card-bg); animation: viewer-info 360ms ease-out 80ms backwards; }
.viewer__top { display: flex; min-height: var(--control); align-items: center; justify-content: space-between; gap: 12px; }
.viewer__close { background: rgb(var(--bg-rgb) / 0.6); }
.viewer__title { margin: 0; color: var(--text); font: 700 clamp(28px, 3vw, 40px)/1.02 var(--display); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.viewer__subtitle { margin: -6px 0 0; color: var(--copy); font-size: 15px; line-height: 1.4; }
.viewer__subtitle:empty { display: none; }
.viewer__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; margin: 0; padding-top: 14px; border-top: 1px solid var(--card-line); }
.viewer__facts dt { align-self: center; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.viewer__facts dd { min-width: 0; margin: 0; color: var(--text-soft); font-size: 14px; overflow-wrap: anywhere; }

/* what the card is worth, in large, right above the extract */
.viewer__value { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--card-line); background: rgb(var(--accent-light-rgb) / 0.05); }
.viewer__value[hidden] { display: none; }
.viewer__value-label { color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.viewer__value-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--text); font: 700 34px/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.viewer__value-amount .cur-icon { width: 0.72em; height: 0.72em; align-self: center; }
.viewer__value-amount small { color: var(--copy); font: 500 13px var(--sans); letter-spacing: 0; }
.viewer__value-detail { color: var(--copy); font-size: 12px; line-height: 1.5; }
.viewer__value-detail:empty { display: none; }
.viewer__value.is-unknown .viewer__value-amount { color: var(--muted); font-size: 18px; }
.trend { font: 700 11px var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.trend--up { color: var(--live); }
.trend--down { color: var(--danger); }
.trend--flat { color: var(--muted); }

.player { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--card-line); background: rgb(var(--accent-light-rgb) / 0.05); }
.player[hidden] { display: none; }
.player__toggle {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--bg);
  background: var(--accent-light);
  transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
}
.player__toggle:hover:not(:disabled) { background: var(--accent-soft); transform: scale(1.05); }
.player__toggle:disabled { cursor: default; opacity: 0.5; }
.player__toggle svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.player__pause, .player[data-state='playing'] .player__play { display: none; }
.player[data-state='playing'] .player__pause { display: block; }
.player[data-state='loading'] .player__toggle::after { position: absolute; inset: -5px; border: 2px solid transparent; border-top-color: var(--accent-light); border-radius: 50%; content: ''; animation: player-spin 0.9s linear infinite; }
.player__body { display: grid; min-width: 0; flex: 1; gap: 8px; }
.player__bar { height: 4px; overflow: hidden; border-radius: 2px; background: rgb(var(--accent-light-rgb) / 0.16); }
.player__bar span { display: block; height: 100%; background: var(--accent-light); transform: scaleX(0); transform-origin: left; transition: transform 250ms linear; }
.player__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--copy); font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.player__meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player[data-state='error'] .player__meta span:first-child { color: var(--danger); }

/* volume of the extracts: in the player and in the settings */
.volume { display: flex; min-width: 0; align-items: center; gap: 6px; }
.volume[hidden] { display: none; }
.volume__mute { display: grid; width: 30px; height: 30px; flex: none; place-items: center; margin-left: -6px; padding: 0; border: 0; border-radius: 50%; color: var(--text-2); background: transparent; transition: color 0.2s, background-color 0.2s; }
.volume__mute:hover { color: var(--accent-light); background: rgb(var(--accent-light-rgb) / 0.08); }
.volume__mute svg { width: 18px; height: 18px; }
.volume__mute path { transition: opacity 0.2s; }
.volume__off, .volume[data-level='0'] .volume__wave, .volume[data-level='1'] .volume__wave--far { opacity: 0; }
.volume[data-level='0'] .volume__off { opacity: 1; }
.volume[data-level='0'] .volume__mute { color: var(--muted); }
.volume__range { width: 100%; min-width: 0; height: 26px; flex: 1; margin: 0; padding: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
.volume__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent-light) var(--fill, 60%), rgb(var(--accent-light-rgb) / 0.16) var(--fill, 60%)); }
.volume__range::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(var(--accent-light-rgb) / 0.16); }
.volume__range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent-light); }
.volume__range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--accent-light); transition: box-shadow 0.2s; -webkit-appearance: none; }
.volume__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent-light); transition: box-shadow 0.2s; }
.volume__range:hover::-webkit-slider-thumb, .volume__range:active::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgb(var(--accent-light-rgb) / 0.18); }
.volume__range:hover::-moz-range-thumb, .volume__range:active::-moz-range-thumb { box-shadow: 0 0 0 5px rgb(var(--accent-light-rgb) / 0.18); }
.volume__range:focus-visible { outline-offset: 0; }
.volume--setting { width: min(100%, 240px); }
.volume__value { min-width: 6ch; color: var(--text-soft); font: 10px var(--mono); letter-spacing: 0.08em; text-align: right; text-transform: uppercase; }
.volume__fixed { color: var(--muted); font-size: 11px; line-height: 1.5; }

@keyframes viewer-card { from { opacity: 0; transform: translateY(18px) scale(0.86); } }
@keyframes viewer-info { from { opacity: 0; } }
@keyframes player-spin { to { transform: rotate(1turn); } }

@media (max-width: 760px) {
  .viewer:popover-open { place-items: start center; }
  .viewer__layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; width: 100%; padding-top: 44px; }
  .viewer__card, .viewer__card--kyara { width: min(320px, 74vw); }
  .viewer__info { width: 100%; max-width: 440px; }
  /* stays at hand above the card while the details scroll */
  .viewer__close { position: fixed; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__card, .viewer__info { animation: none; }
}

/* Overview: what needs you (a session to link again, a bot in trouble, rewards waiting) */
.alerts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.alerts[hidden] { display: none; }
.alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 16px; border: 1px solid var(--card-line); border-left: 2px solid var(--tone, var(--accent-light)); color: var(--copy); background: rgb(var(--bg-rgb) / 0.6); font-size: 12px; line-height: 1.5; }
.alert--warm { --tone: var(--warm); }
.alert--danger { --tone: var(--danger); }
.alert .link-button { min-height: 24px; }

/* Overview: one panel per site, in its own hue */
.site-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--gap); }
.site-panel { --site: var(--accent-light); display: flex; min-width: 0; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--card-line); border-top: 2px solid var(--site); background: rgb(var(--bg-rgb) / 0.5); }
@supports (color: hsl(from red h s l)) {
  .site-panel { --site: hsl(from var(--accent-light) calc(h + var(--site-shift, 0)) s l); }
}
.site-panel[data-state='idle'] { border-top-color: var(--ghost); }
.site-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.site-panel__name { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.site-panel__name small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.site-panel__next { margin: 0; color: var(--text-soft); font: 600 13px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.site-panel__next.is-error { color: var(--danger); font-weight: 500; }
.site-panel__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--card-line); background: var(--card-line); }
.site-panel__facts > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; background: var(--panel); }
.site-panel__facts > div[hidden] { display: none; }
.site-panel__facts dt { color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.site-panel__facts dd { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--text-soft); font: 700 24px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.site-panel__facts dd .cur-icon { width: 0.7em; height: 0.7em; }
.site-panel__facts small { overflow: hidden; color: var(--copy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.site-panel__catalog { display: grid; gap: 7px; color: var(--copy); font-size: 11px; font-variant-numeric: tabular-nums; }
.site-panel__catalog[hidden], .site-panel__missions[hidden], .site-panel__best[hidden], .site-panel__actions [hidden] { display: none; }
.site-panel__extra { display: grid; gap: 10px; }
.site-panel__extra:not(:has(> :not([hidden]))) { display: none; }
.site-panel__missions { justify-self: start; min-height: 24px; padding: 0; border: 0; color: var(--accent-light); background: none; font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.site-panel__missions:hover { color: var(--accent-pale); }
.site-panel__best { display: grid; gap: 6px; }
.site-panel__best-label { color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.site-panel__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.pill.is-alert { border-color: rgb(var(--danger-rgb) / 0.35); color: var(--danger); background: rgb(var(--danger-rgb) / 0.05); }
.pill.is-off { border-color: var(--card-line); color: var(--muted); background: transparent; }

/* the market value of a pulled card in a list */
.latest-card .latest-card__value { display: inline-flex; flex: none; align-items: center; gap: 3px; margin-left: auto; padding: 2px 6px; overflow: visible; border: 1px solid var(--card-line); color: var(--text-soft); font: 10px var(--mono); font-variant-numeric: tabular-nums; }

/* Openings: the last boosters of a site */
.openings-log { display: grid; margin: 0; padding: 0; list-style: none; }
.openings-log__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto minmax(72px, auto); align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--card-line); }
.openings-log__row:first-child { padding-top: 0; border-top: 0; }
.openings-log__time { color: var(--muted); font: 10px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.openings-log__what { display: grid; min-width: 0; gap: 2px; }
.openings-log__what strong { overflow: hidden; color: var(--text-soft); font: 600 13px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.openings-log__what small { color: var(--copy); font-size: 11px; }
.openings-log__cards { display: flex; flex-wrap: wrap; min-width: 0; gap: 4px; }
/* a whole lot opened on the site: its cards wrap on a line of their own, under the name */
.openings-log__row--lot .openings-log__cards { grid-column: 2 / -1; grid-row: 2; }
.openings-log__row--lot .openings-log__value { grid-column: -2; grid-row: 1; }
.openings-log__row.is-new { animation: row-in 520ms var(--ease-out) backwards; }
.openings-log__card { display: grid; width: 30px; height: 38px; flex: none; place-items: center; overflow: hidden; border: 2px solid var(--rc, var(--accent-light)); border-radius: 3px; color: var(--accent-pale); background: var(--panel); font: 700 12px var(--display); cursor: pointer; }
.openings-log__card img { width: 100%; height: 100%; object-fit: cover; }
.openings-log__value { display: inline-flex; align-items: center; justify-self: end; gap: 4px; padding: 3px 8px; border: 1px solid var(--card-line); color: var(--text-soft); font: 11px var(--mono); font-variant-numeric: tabular-nums; }

/* Discord: the sign-in button, the account in the settings, the picture in the menu */
.auth__discord { display: grid; gap: 12px; }
.auth__discord[hidden] { display: none; }
.auth__or { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.auth__or::before, .auth__or::after { height: 1px; flex: 1; content: ''; background: var(--line); }
.button--discord { border-color: #5865f2; color: #fff; background: #5865f2; }
.button--discord:hover:not(:disabled) { border-color: #4752c4; color: #fff; background: #4752c4; }
.discord-logo { width: 18px; height: 18px; flex: none; }
.profile__avatar { overflow: hidden; }
.profile__avatar img, .discord-account__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.discord-account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.discord-account__avatar { display: grid; width: 56px; height: 56px; flex: none; place-items: center; overflow: hidden; border: 1px solid rgb(var(--accent-light-rgb) / 0.34); border-radius: 50%; color: var(--accent-pale); background: rgb(var(--accent-rgb) / 0.14); font: 700 20px var(--display); }
.discord-account__who { display: grid; min-width: 0; flex: 1; gap: 3px; }
.discord-account__who strong { overflow: hidden; color: var(--text-soft); font: 600 15px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.discord-account__who small { color: var(--muted); font-size: 11px; }
.setting .discord-account__off { color: var(--muted); }

/* Admin: outbound proxy status and connection check */
.proxy-status { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.45); }
.proxy-status__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgb(var(--muted-rgb, 140 150 160) / 0.12); }
.proxy-status__dot.is-on { background: var(--live); box-shadow: 0 0 0 4px rgb(var(--live-rgb) / 0.14); }
.proxy-status__dot.is-off { background: var(--muted); }
.proxy-status > div { display: grid; gap: 3px; }
.proxy-status strong { color: var(--text-soft); font-size: 12px; }
.proxy-status small { color: var(--muted); font: 10px var(--mono); overflow-wrap: anywhere; }
.proxy { display: grid; gap: 18px; }
.proxy__group { display: grid; min-width: 0; gap: 14px; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--card-line); background: rgb(var(--bg-rgb) / 0.3); }
.proxy__group legend { padding: 0 6px; color: var(--text-2); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.proxy__pick { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.proxy__pick .field { min-width: min(100%, 300px); flex: 1; }
.proxy__server { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.proxy__protocol { grid-column: span 2; }
.proxy__host { grid-column: span 3; }
.proxy__port { grid-column: span 1; }
.proxy__user, .proxy__pass { grid-column: span 3; }
.proxy__server input, #proxy-url, #proxy-hosts { font-family: var(--mono) !important; }
.proxy__sites { display: flex; flex-wrap: wrap; gap: 8px; }
.proxy__sites label { position: relative; display: grid; min-width: 88px; min-height: 40px; place-items: center; padding: 0 14px; border: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.proxy__sites input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.proxy__sites label:has(input:checked) { border-color: var(--accent-light); color: var(--accent-light); background: rgb(var(--accent-light-rgb) / 0.08); }
.proxy__sites label:has(input:focus-visible) { outline: 2px solid var(--accent-pale); outline-offset: 2px; }
.proxy__sites label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.proxy__hint { padding-left: 12px; border-left: 2px solid var(--warm); }
#proxy-disable[hidden], #btn-remove-account[hidden] { display: none; }
.proxy-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.proxy-checks[hidden] { display: none; }
.proxy-check { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--card-line); color: var(--copy); font-size: 11px; }
.proxy-check strong { color: var(--text-soft); }
.proxy-check.is-ok span { color: var(--live); }
.proxy-check.is-error span { color: var(--danger); }

@media (max-width: 760px) {
  .openings-log__row { grid-template-columns: minmax(0, 1fr) auto; }
  .openings-log__time { grid-column: 1 / -1; }
  .openings-log__cards, .openings-log__row--lot .openings-log__cards { grid-column: 1 / -1; grid-row: 3; }
  .openings-log__row--lot .openings-log__value { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
  .site-panel { padding: 14px; }
  .site-panel__facts dd { font-size: 20px; }
  .site-panel__head { flex-wrap: wrap; }
}

/* Openings: a limited edition on now (a WAX banner), above the booster list */
.featured { display: grid; gap: 8px; margin: -4px 0 20px; }
.featured[hidden] { display: none; }
.featured__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid rgb(255 201 77 / 0.45); background: linear-gradient(100deg, rgb(255 201 77 / 0.12), rgb(255 201 77 / 0.02) 60%); }
.featured__cover { display: block; width: 56px; height: 56px; overflow: hidden; border: 2px solid #ffc94d; border-radius: 3px; background: var(--panel); box-shadow: 0 0 18px rgb(255 201 77 / 0.25); }
.featured__cover img { width: 100%; height: 100%; object-fit: cover; }
.featured__text { display: grid; min-width: 0; gap: 3px; }
.featured__eyebrow { color: #ffc94d; font: 700 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.featured__text strong { overflow: hidden; color: var(--text-soft); font: 600 14px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.featured__text small { color: var(--copy); font-size: 11px; }
@media (max-width: 600px) {
  .featured__item { grid-template-columns: 48px minmax(0, 1fr); }
  .featured__cover { width: 48px; height: 48px; }
  .featured__item .button { grid-column: 1 / -1; }
  .proxy-checks { grid-template-columns: minmax(0, 1fr); }
  .proxy__group { padding: 12px; }
  .proxy__protocol, .proxy__host, .proxy__user, .proxy__pass { grid-column: 1 / -1; }
  .proxy__port { grid-column: span 3; }
}

/* Elements hidden by their attribute, whatever display their class gives them */
.sidebar__tab[hidden], .setting__row[hidden], .field[hidden], .button[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sign up: an optional e-mail, the invite code folded away, a trap for robots */
.field__note { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth__invite { border: 1px solid var(--line); background: rgb(var(--bg-rgb) / 0.4); }
.auth__invite summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; color: var(--copy); font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; list-style: none; }
.auth__invite summary::-webkit-details-marker { display: none; }
.auth__invite summary::after { color: var(--accent-light); content: '+'; }
.auth__invite[open] summary::after { content: '\2212'; }
.auth__invite summary[hidden] { display: none; }
.auth__invite .field { padding: 0 12px 12px; }
.auth__invite:has(summary[hidden]) .field { padding-top: 12px; }
.auth__legal { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.auth__legal a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 0.2em; }

/* The waiting list page: the place in the file, the friend link, the e-mail */
.waitlist__panel { width: min(100%, 560px); }
.waitlist__place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 24px; padding: 18px 20px; border: 1px solid rgb(var(--accent-light-rgb) / 0.28); background: radial-gradient(circle at 100% 0%, rgb(var(--accent-rgb) / 0.2), transparent 65%), rgb(var(--bg-rgb) / 0.55); }
.waitlist__label { flex-basis: 100%; color: var(--copy); font: 9px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.waitlist__place strong { color: var(--text); font: 800 clamp(56px, 12vw, 76px)/0.9 var(--display); font-variant-numeric: tabular-nums; }
.waitlist__total { color: var(--copy); font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.waitlist__block { padding: 20px 0; border-top: 1px solid var(--line); }
.waitlist__block h2 { margin: 0 0 8px; color: var(--text-soft); font: 700 22px/1 var(--display); text-transform: uppercase; }
.waitlist__block p { margin: 0 0 14px; color: var(--copy); font-size: 12px; line-height: 1.6; }
.waitlist__block p b { color: var(--text-soft); }
.waitlist__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 10px; }
.waitlist__link code { display: flex; align-items: center; min-height: var(--control); padding: 0 12px; overflow: hidden; border: 1px solid var(--card-line); color: var(--accent-light); background: rgb(var(--bg-rgb) / 0.6); font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.waitlist__share { display: flex; flex-wrap: wrap; gap: 8px; }
.waitlist__share .button { flex: 1 1 auto; }
.waitlist__email { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.waitlist__email button[hidden] { display: none; }
.waitlist__block .feedback { margin-top: 10px; }
.waitlist__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.waitlist__leave { color: var(--muted); }
.waitlist__leave:hover { color: var(--danger); }
@media (max-width: 480px) {
  .waitlist__email { grid-template-columns: minmax(0, 1fr) auto; }
  .waitlist__email input { grid-column: 1 / -1; }
}

/* Admin tab */
.admin-kpis .stat strong { font-size: clamp(30px, 2.6vw, 40px); }
.admin-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap); }
.admin-chart__total { color: var(--copy); font: 700 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.admin-chart { display: grid; gap: 8px; }
.admin-chart__grid { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 2px; height: 150px; border-bottom: 1px solid var(--card-line); }
.admin-chart__day { display: flex; height: 100%; align-items: flex-end; justify-content: center; cursor: default; }
.admin-chart__day:hover { background: rgb(var(--accent-light-rgb) / 0.06); }
.admin-chart__bar { display: block; width: 100%; max-width: 14px; border-radius: 4px 4px 0 0; background: var(--accent-light); transition: height 400ms ease; }
.admin-chart--visits .admin-chart__bar { background: var(--cool); }
.admin-chart__day.is-today .admin-chart__bar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px rgb(var(--accent-light-rgb) / 0.35); }
.admin-chart__axis { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-subhead { margin: 18px 0 8px; color: var(--copy); font: 400 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.admin-tally { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.admin-tally li { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 26px; color: var(--copy); font-size: 12px; }
.admin-tally .admin-tally__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-tally__bar { display: block; height: 8px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--accent-light) calc(var(--share) * 100%), rgb(var(--accent-light-rgb) / 0.08) 0); }
.admin-tally b { color: var(--text-soft); font: 600 11px var(--mono); font-variant-numeric: tabular-nums; }
.admin-tally .admin-empty { display: block; color: var(--muted); font-size: 11px; }
.admin-waitlist__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; margin-bottom: 16px; }
.admin-waitlist__controls .field { grid-column: 1 / -1; }
.admin-admit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--copy); font-size: 12px; }
.admin-admit input { width: 6.5rem; min-height: var(--control); }
.admin-export { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.admin-waitlist__search { margin-bottom: 10px; }
.admin-waitlist__search input { width: 100%; }
.admin-waitlist .admin-list li > div { flex: 1; }
.admin-waitlist .button--wide { margin-top: 10px; }
.admin-actions { display: inline-flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-action[data-admit-user]:hover, .admin-action[data-multi-accounts]:hover:not(:disabled) { border-color: var(--accent-light); color: var(--accent-light); }
.admin-action[aria-pressed='true'] { border-color: rgb(var(--accent-light-rgb) / 0.4); color: var(--accent-light); }
.admin-action:disabled { cursor: default; opacity: 0.6; }
.admin-action:disabled:hover { border-color: var(--card-line); color: var(--accent-light); }
@media (max-width: 1240px) {
  .admin-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .admin-waitlist__controls { grid-template-columns: minmax(0, 1fr); }
  .admin-export { justify-content: flex-start; }
  .admin-list li:has(.admin-actions) { flex-direction: column; align-items: stretch; }
  .admin-actions { justify-content: flex-start; }
  .admin-chart__grid { height: 120px; gap: 1px; }
}

/* someone waiting has no dashboard link; the invite field shows only for an invitation link */
.app-header nav a[hidden], .auth__invite[hidden] { display: none; }