:root {
  --page: #0c0c11;
  --ink: #f1f0f7;
  --text-muted: #a6a3b5;
  --text-secondary: #cbc8d8;
  --surface: #15151e;
  --sidebar: #101016;
  --input: #101018;
  --border: #2a2836;
  --border-strong: #454052;
  --button: #22212d;
  --button-hover: #302c41;
  --purple: #8f76ff;
  --purple-hover: #a895ff;
  --on-accent: #fff;
  --selected: #292044;
  --selected-border: #65508c;
  --selected-ink: #daceff;
  --focus-wash: #8f76ff26;
  --empty-a: #201a32;
  --empty-b: #15151e;
  --info-bg: #1a1c2a;
  --info-ink: #bfc5e8;
  --info-border: #8787c4;
  --warning-bg: #30271c;
  --warning-ink: #eed3a3;
  --warning-border: #d8af6a;
  --error-bg: #34202a;
  --error-ink: #ffb1be;
  --success-bg: #183129;
  --success-ink: #a0e3bd;
  --success-border: #396b52;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 16px;
  color-scheme: dark;
  --muted: var(--text-muted);
  --line: var(--border);
  --accent: var(--purple);
  --panel: var(--surface);
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f5f4f9;
  --ink: #252234;
  --text-muted: #666076;
  --text-secondary: #514a63;
  --surface: #fff;
  --sidebar: #fcfbff;
  --input: #fff;
  --border: #e1ddea;
  --border-strong: #c2b8d3;
  --button: #eeebf5;
  --button-hover: #e4dcf3;
  --purple: #6941d8;
  --purple-hover: #7a52e8;
  --selected: #ede6fc;
  --selected-border: #b7a0e7;
  --selected-ink: #5a31bc;
  --focus-wash: #6941d815;
  --empty-a: #efebf9;
  --empty-b: #fff;
  --info-bg: #eeedf8;
  --info-ink: #4d496f;
  --info-border: #8c81b3;
  --warning-bg: #fff5df;
  --warning-ink: #755021;
  --warning-border: #b88425;
  --error-bg: #fff0f2;
  --error-ink: #a72a42;
  --success-bg: #eaf7ee;
  --success-ink: #23643c;
  --success-border: #82b692;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button {
  cursor: pointer;
  background: var(--button);
  color: inherit;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 15px;
  font-weight: 550;
  font-size: 0.875rem;
  transition: background 0.15s;
}
button:hover {
  background: var(--button-hover);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
button.primary:hover {
  background: var(--purple-hover);
}
button.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
button.danger {
  color: var(--error-ink);
}
a {
  color: var(--accent);
}
input,
textarea,
select {
  background: var(--input);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--ink);
  max-width: 100%;
  min-width: 0;
}
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}
textarea {
  font-family: ui-monospace, monospace;
  min-height: 110px;
  resize: vertical;
  width: 100%;
  font-size: 0.875rem;
}
label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: grid;
  gap: 8px;
}
.shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
aside {
  padding: 35px 20px 24px;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.85rem;
  letter-spacing: -1px;
  font-weight: 700;
  padding: 0 10px;
}
.brand-logo {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.brand-sub {
  display: block;
  letter-spacing: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}
nav {
  display: grid;
  gap: 8px;
  margin-top: -13px;
}
nav button {
  text-align: left;
  border: 0;
  background: transparent;
  display: flex;
  gap: 12px;
  padding: 13px 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
nav button span:not(.nav-label) {
  font-size: 1.15rem;
  width: 18px;
}
nav button.active {
  color: var(--accent);
  background: var(--selected);
}
.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}
.app-version {
  margin-left: auto;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.app-version:hover {
  color: var(--accent);
}
.side-social {
  display: flex;
  gap: 10px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--text-muted);
  background: var(--selected);
  transition: color 0.15s, background 0.15s;
}
.social-btn:hover {
  color: var(--accent);
  background: var(--line);
}
.small {
  font-size: 0.7rem;
  letter-spacing: 1.6px;
  color: var(--muted);
}
main {
  min-width: 0;
}
header {
  height: 85px;
  border-bottom: 1px solid var(--line);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.breadcrumb span {
  margin-left: 12px;
}
.badge {
  font-size: 0.75rem;
  color: var(--accent);
  background: var(--selected);
  border: 1px solid var(--selected-border);
  padding: 6px 10px;
  border-radius: 6px;
}
.badge.neutral {
  background: var(--button);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
#content {
  padding: 36px 40px 60px;
  max-width: 1550px;
  margin: auto;
}
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.title-row h1 {
  font-size: 1.8rem;
  letter-spacing: -0.7px;
  margin: 0 0 10px;
  font-weight: 620;
}
.muted {
  color: var(--muted);
  line-height: 1.6;
}
.title-row p {
  margin: 0;
  font-size: 0.9rem;
}
.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
}
.panel h2 {
  font-size: 1.05rem;
  margin: 0 0 16px;
}
.panel h3 {
  font-size: 0.95rem;
}
.empty {
  padding: 55px 24px;
  text-align: center;
  max-width: 760px;
  margin: 45px auto;
  border: 1px dashed var(--border-strong);
  background: linear-gradient(135deg, var(--empty-a), var(--empty-b));
  border-radius: 14px;
}
.empty h2 {
  font-size: 1.45rem;
}
.empty p {
  max-width: 490px;
  margin: 15px auto 24px;
}
.empty-symbol {
  font-size: 2.8rem;
  color: var(--accent);
}
.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.account-bar select {
  min-width: 240px;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.profile-card {
  padding: 22px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 13px;
}
.profile-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--focus-wash);
}
.avatar {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--selected);
  color: var(--selected-ink);
  font-size: 1.3rem;
}
.profile-name {
  font-size: 1.05rem;
  font-weight: 600;
}
.profile-card .muted {
  font-size: 0.8rem;
}
.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  flex-wrap: wrap;
}
.tabs button {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.tabs button.active {
  background: var(--selected);
  color: var(--accent);
}
.nuvio-history-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 2px 4px;
}
.nuvio-history-heading h2 {
  margin: 0 0 7px;
  font-size: 1.55rem;
}
.nuvio-history-heading p {
  margin: 0;
}
.history-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0 26px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.history-tabs button {
  flex: 0 0 auto;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}
.history-tabs button.active {
  border-color: var(--selected-border);
  background: var(--selected);
  color: var(--selected-ink);
  box-shadow: 0 0 0 1px var(--focus-wash);
}
#history-content > h2 {
  margin-bottom: 6px;
}
.settings-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 22px 0;
}
.settings-top input {
  min-width: 200px;
}
.setting-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 16px 0;
  background: var(--panel);
}
.setting-group summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 550;
  font-size: 0.95rem;
}
.setting-row {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 1fr);
  gap: 22px;
  align-items: center;
  border-top: 1px solid var(--border);
}
.setting-row .key {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  word-break: break-word;
  margin-top: 6px;
}
.setting-row input:not([type="checkbox"]) {
  width: 100%;
}
.hint {
  padding: 13px 16px;
  background: var(--info-bg);
  color: var(--info-ink);
  border-left: 3px solid var(--info-border);
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 20px 0;
}
.warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.error {
  color: var(--error-ink);
  background: var(--error-bg);
  padding: 15px;
  border-radius: 8px;
  white-space: pre-wrap;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form {
  display: grid;
  gap: 18px;
}
.check-label {
  display: flex;
  gap: 10px;
  align-items: center;
  line-height: 1.6;
}
.list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.addon {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.addon-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.addon-name {
  font-weight: 600;
}

.library-addon-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.library-addon-copy {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.library-addon-identity .url {
  margin: 6px 0 0;
}

.addon-logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--selected), var(--button));
  color: var(--selected-ink);
  font-size: 1.35rem;
  font-weight: 750;
}

.addon-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface);
}
.url {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 9px 0 14px;
}

.library-addon .actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

/* Addon library: tout sur une ligne (identité · avatars + nombre · boutons). */
.lib-row-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.lib-usage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.lib-avatar-stack { display: flex; align-items: center; }
.lib-avatar-stack .avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-left: -8px;
  border: 2px solid var(--surface);
  flex: 0 0 auto;
}
.lib-avatar-stack .avatar:first-child { margin-left: 0; }
.lib-avatar-stack .avatar-fallback { font-size: 0.78rem; }
.lib-avatar-more {
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.lib-count { white-space: nowrap; }
.lib-count-empty { opacity: 0.75; }
.lib-loading { padding: 8px 2px; }

/* Fenêtre de gestion des profils d'un addon. */
.lib-usage-list { gap: 0; }
.lib-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.lib-profile:last-child { border-bottom: 0; }
.lib-profile .avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.lib-profile .avatar-fallback { font-size: 0.95rem; }
.lib-profile-meta { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.lib-profile-name { font-weight: 600; }
.lib-profile-meta .muted { font-size: 0.78rem; }
.mode-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.mode-toggle button {
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--border);
  padding: 7px 11px;
  font-size: 0.82rem;
  background: transparent;
}
.mode-toggle button:first-child { border-left: 0; }
.mode-toggle button.active {
  background: var(--purple);
  color: #fff;
}
.icon-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.icon-btn.active { color: var(--danger, #e05a5a); border-color: var(--danger, #e05a5a); }
.lib-profile.removing { opacity: 0.5; }
.lib-profile.removing .lib-profile-name { text-decoration: line-through; }

/* Attribution multiple : liste à cocher des addons. */
.lib-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.lib-picklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.lib-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
}
.lib-pick:hover { background: var(--selected); }
.lib-pick-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-drag { flex: 0 0 auto; cursor: grab; color: var(--text-muted); font-size: 1rem; line-height: 1; user-select: none; }
.lib-pick.dragging { opacity: 0.5; background: var(--selected); }
.addon-logo.addon-logo-sm {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}
.addon-logo.addon-logo-md {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 700;
}
/* Fallback letter only shows without an image: hide it when a logo is present so
   a transparent PNG doesn't reveal the letter behind it (the <img> is removed on
   error, so the letter reappears as a true fallback). */
.addon-logo:has(> img) > span { display: none; }
.addon-row-meta { display: flex; flex-direction: column; gap: 2px; }
.addon-row-meta .addon-name { font-weight: 600; }
/* Addons editor: the name/URL column shrinks (flex 1 1 0 + min-width:0 on every
   ancestor) so the long manifest URL ellipsises on its own line under the name,
   instead of stretching the row and pushing the action buttons off-screen. */
#integration-list .addon { overflow: hidden; }
#integration-list .addon-top { min-width: 0; }
#integration-list .check-label { flex: 1 1 0; min-width: 0; overflow: hidden; }
#integration-list .addon-row-meta { flex: 1 1 0; min-width: 0; overflow: hidden; }
#integration-list .addon-top .actions { flex: 0 0 auto; }
#integration-list .addon-name,
#integration-list .addon-row-meta .url { display: block; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-pick .avatar { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; }
.lib-pick .avatar-fallback { font-size: 0.85rem; }
.assign-group { margin-bottom: 4px; }
.assign-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 3px;
}
.assign-group-head span { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.assign-group-head button { padding: 3px 8px; }
@media (max-width: 720px) {
  .lib-profile { flex-wrap: wrap; }
  .lib-mode { width: 100%; max-width: none; order: 3; }
  .lib-profile-meta { flex: 1 1 60%; }
}
.pill-row {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}
.empty-inline {
  padding: 25px;
  color: var(--muted);
  text-align: center;
}
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: var(--page);
}
.auth-card {
  width: min(420px, 100%);
  padding: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.auth-card .login-brand {
  margin-bottom: 22px;
}
.auth-hint {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.08);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.auth-hint-logos {
  display: inline-flex;
  gap: 10px;
  flex: 0 0 auto;
}
.auth-logo {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}
.auth-logo-svg svg {
  width: 30px;
  height: 30px;
  display: block;
}
.auth-admin-note {
  font-size: 0.8rem;
  margin: 0 0 10px;
}
.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.auth-sep::before,
.auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-admin summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 6px 0;
}
.auth-admin[open] summary {
  margin-bottom: 10px;
}
#nuvio-login button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.btn-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  width: min(750px, calc(100% - 30px));
  max-height: 85vh;
  padding: 28px;
}
dialog::backdrop {
  background: #03080cbb;
  backdrop-filter: blur(4px);
}
dialog h2 {
  margin-top: 0;
  font-size: 1.35rem;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.login-brand img {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.login-brand h2,
.login-brand p {
  margin: 0;
}

.login-brand p {
  margin-top: 6px;
}
.diff {
  overflow: auto;
  max-height: 45vh;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.diff-row {
  padding: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
}
.diff-row code {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}
.diff-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 9px;
  word-break: break-word;
}
.old {
  color: var(--error-ink);
}
.new {
  color: var(--success-ink);
}
.diff-group + .diff-group {
  border-top: 1px solid var(--line);
}
.diff-group-title {
  padding: 10px 13px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--button);
}
.diff-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.diff-item-name {
  font-weight: 600;
}
.diff-item-note {
  font-size: 0.78rem;
}
.diff-badge {
  padding: 3px 9px;
  font-size: 0.72rem;
}
.diff-badge.add {
  color: var(--success-ink);
  background: transparent;
  border-color: var(--success-ink);
}
.diff-badge.del {
  color: var(--error-ink);
  background: transparent;
  border-color: var(--error-ink);
}
.diff-badge.mod {
  color: var(--accent);
}
.diff-label {
  font-weight: 600;
  color: var(--text);
}
#toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  max-width: 520px;
  border: 1px solid var(--success-border);
  background: var(--success-bg);
  padding: 18px 22px;
  box-shadow: 0 12px 35px #0008;
  border-radius: 10px;
  z-index: 50;
}
code.pair-code {
  font-size: 1.15rem;
  letter-spacing: 2px;
  display: block;
  text-align: center;
  padding: 24px;
  color: var(--accent);
  overflow-wrap: anywhere;
}

/* Connexion d'un compte Nuvio */
dialog:has(> .nuvio-pair) {
  width: min(560px, calc(100% - 30px));
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.nuvio-pair {
  --ink: #f1f0f7;
  --text-muted: #a6a3b5;
  --text-secondary: #cbc8d8;
  --surface: #15151e;
  --input: #101018;
  --border: #2a2836;
  --border-strong: #454052;
  --button-hover: #302c41;
  --purple: #8f76ff;
  --selected-ink: #daceff;
  --focus-wash: #8f76ff26;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(560px, 100%);
  margin: 0;
  padding: 42px 46px 34px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--purple) 18%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #19122c), var(--surface));
  border: 1px solid color-mix(in srgb, var(--purple) 72%, var(--border));
  border-radius: 18px;
  box-shadow: 0 28px 80px #05020f80, inset 0 1px #ffffff0a;
}

.nuvio-pair::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, #ffffff08, transparent 32%);
}

.nuvio-pair-close {
  position: absolute;
  z-index: 1;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1;
}

.nuvio-pair-close:hover {
  background: var(--button-hover);
  color: var(--ink);
}

.nuvio-pair-logo {
  position: relative;
  z-index: 1;
  width: min(260px, 70%);
  height: 82px;
  margin: 2px 0 24px;
  object-fit: contain;
}

.tracker-pair-logo {
  width: 104px;
  height: 104px;
  margin-bottom: 20px;
  border-radius: 24px;
  filter: drop-shadow(0 12px 24px #0006);
}

.tracker-pair-simkl .tracker-pair-logo {
  border: 1px solid #ffffff14;
}

.nuvio-pair h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2rem);
  letter-spacing: -0.035em;
}

.nuvio-pair-intro,
.nuvio-pair-loading > p {
  position: relative;
  z-index: 1;
  max-width: 450px;
  margin: 12px auto 24px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.nuvio-pair-code {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  width: 100%;
  margin-bottom: 14px;
  padding: 13px 18px;
  background: color-mix(in srgb, var(--input) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: 11px;
}

.nuvio-pair-code span {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.nuvio-pair-code strong {
  color: var(--ink);
  font-size: 1.12rem;
  letter-spacing: .1em;
}

.nuvio-pair-primary {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 13px 20px;
  color: #fff;
  background: linear-gradient(115deg, #864cff, #6534e8);
  border: 1px solid #a77cff;
  border-radius: 12px;
  box-shadow: 0 10px 30px #6334e933;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.nuvio-pair-primary:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px #6334e94d;
}

.nuvio-pair-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: 26px 0;
  padding: 0;
  list-style: none;
}

.nuvio-pair-steps::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 16%;
  left: 16%;
  height: 1px;
  background: var(--border-strong);
}

.nuvio-pair-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: .75rem;
}

.nuvio-pair-steps li span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  background: var(--surface);
  border: 1px solid var(--purple);
  border-radius: 50%;
  color: var(--selected-ink);
  box-shadow: 0 0 0 6px var(--surface);
}

.nuvio-pair-steps li:first-child span {
  background: var(--purple);
  color: #fff;
}

.nuvio-pair-steps strong {
  font-weight: 550;
}

.nuvio-pair-secondary {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 52px;
  border-color: color-mix(in srgb, var(--purple) 72%, var(--border));
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.nuvio-pair-secondary:hover {
  background: var(--focus-wash);
}

.nuvio-pair-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 22px;
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: .82rem;
}

.nuvio-pair-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--warning-border);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning-border) 13%, transparent);
  animation: nuvio-pair-pulse 1.6s ease-in-out infinite;
}

.nuvio-pair-status.connected { color: var(--success-ink); }
.nuvio-pair-status.connected .nuvio-pair-status-dot { background: var(--success-border); }
.nuvio-pair-status.error { color: var(--error-ink); }
.nuvio-pair-status.error .nuvio-pair-status-dot { background: var(--error-ink); animation: none; }

.nuvio-pair-loading {
  min-height: 400px;
  justify-content: center;
}

.nuvio-pair-loading .nuvio-pair-logo {
  margin-bottom: 32px;
}

.nuvio-pair-spinner {
  width: 32px;
  height: 32px;
  margin-bottom: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: nuvio-pair-spin .8s linear infinite;
}

@keyframes nuvio-pair-spin { to { transform: rotate(360deg); } }
@keyframes nuvio-pair-pulse { 50% { opacity: .45; transform: scale(.8); } }

@media (prefers-reduced-motion: reduce) {
  .nuvio-pair-spinner,
  .nuvio-pair-status-dot { animation: none; }
  .nuvio-pair-primary { transition: none; }
  .acct-choice { transition: none; }
}

/* Tuvora provider variant of the pairing dialog (amber instead of purple). */
.nuvio-pair.provider-tuvora {
  --purple: #f0b429;
  --purple-hover: #f6c451;
  --selected-ink: #f7dc9a;
  --focus-wash: #f0b42926;
}
.nuvio-pair.provider-tuvora .nuvio-pair-primary {
  color: #141414;
  background: linear-gradient(115deg, #f6c451, #f0b429);
  border-color: #f7d27a;
  box-shadow: 0 10px 30px #f0b42933;
}
.nuvio-pair.provider-tuvora .nuvio-pair-primary:hover {
  color: #141414;
  box-shadow: 0 14px 34px #f0b4294d;
}

.nuvio-pair-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  text-align: left;
}
.nuvio-pair-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.nuvio-pair-form input {
  padding: 12px 14px;
  background: color-mix(in srgb, var(--input) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--ink);
  font-size: .95rem;
}
.nuvio-pair-form input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--focus-wash);
}
.nuvio-pair-form .nuvio-pair-primary { margin-top: 6px; }
.nuvio-pair-form .error { margin: 2px 0 0; }
.nuvio-pair-note {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.5;
}

.nuvio-pair-logo-svg {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
}
.nuvio-pair-logo-svg svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 22px #0007);
}

/* Account provider chooser (Nuvio vs Tuvora). */
dialog:has(> .acct-chooser) {
  width: min(520px, calc(100% - 30px));
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}
.acct-chooser {
  --ink: #f1f0f7;
  --text-muted: #a6a3b5;
  --surface: #15151e;
  --border: #2a2836;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 40px 34px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #19122c), var(--surface));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 80px #05020f80, inset 0 1px #ffffff0a;
}
.acct-chooser h2 {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  letter-spacing: -0.03em;
}
.acct-chooser-intro {
  margin: 10px 0 24px;
  color: var(--text-muted);
}
.acct-chooser-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
@media (max-width: 460px) {
  .acct-chooser-options { grid-template-columns: 1fr; }
}
.acct-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 16px 22px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #101018;
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.acct-choice:hover { transform: translateY(-3px); }
.acct-choice-logo {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  object-fit: contain;
}
.acct-choice-logo-svg svg { width: 100%; height: 100%; }
.acct-choice-name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.acct-choice-desc {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.acct-choice-nuvio {
  background: color-mix(in srgb, #8f76ff 12%, #101018);
  border-color: color-mix(in srgb, #8f76ff 45%, var(--border));
}
.acct-choice-nuvio .acct-choice-name { color: #b9a7ff; }
.acct-choice-nuvio:hover { border-color: #8f76ff; box-shadow: 0 16px 40px #8f76ff33; }
.acct-choice-tuvora {
  background: color-mix(in srgb, #f0b429 12%, #101018);
  border-color: color-mix(in srgb, #f0b429 45%, var(--border));
}
.acct-choice-tuvora .acct-choice-name { color: #f0b429; }
.acct-choice-tuvora:hover { border-color: #f0b429; box-shadow: 0 16px 40px #f0b42933; }

/* Tuvora Sports Centre (leagues + teams) */
.sport-section { margin-top: 18px; }
.sport-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.sport-section-head h3 { margin: 0; font-size: 1rem; }
.sport-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  background: var(--surface-2, var(--input, #101018));
}
.sport-badge {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 8px;
}
.sport-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sport-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sport-row .actions { flex: 0 0 auto; }
.sport-results {
  max-height: 340px;
  overflow-y: auto;
  margin: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sport-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.sport-result:hover:not([disabled]) { border-color: var(--accent); }
.sport-result[disabled] { opacity: .55; cursor: default; }
.sport-result .sport-info { flex: 1; }
.footer-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 25px;
  line-height: 1.65;
}
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.status-grid .panel {
  margin: 0;
}
.status-value {
  font-size: 1.25rem;
  margin: 18px 0;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body.busy button {
  cursor: progress;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}
@media (min-width: 1600px) {
  #content {
    padding-top: 45px;
  }
}
@media (max-width: 1000px) {
  .shell {
    grid-template-columns: 200px 1fr;
  }
  aside {
    padding: 28px 10px;
  }
  header {
    padding: 0 24px;
  }
  #content {
    padding: 28px 24px;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .brand {
    font-size: 1.6rem;
  }
}
@media (max-width: 720px) {
  .shell {
    display: block;
  }
  aside {
    border: 0;
    padding: 18px 16px;
    gap: 18px;
  }
  .brand {
    font-size: 1.4rem;
  }
  .brand-sub {
    display: none;
  }
  nav {
    display: flex;
    overflow: auto;
    margin: 0;
    gap: 4px;
  }
  nav button {
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 10px;
  }
  nav button span:not(.nav-label) {
    display: none;
  }
  header {
    height: 58px;
    padding: 0 18px;
  }
  .breadcrumb {
    font-size: 0.75rem;
  }
  #content {
    padding: 24px 18px;
  }
  .title-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .title-row h1 {
    font-size: 1.55rem;
  }
  .account-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .account-bar select {
    min-width: 0;
  }
  .setting-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .settings-top {
    flex-wrap: wrap;
  }
  .profile-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .profile-card {
    padding: 16px;
  }
  .diff-values {
    grid-template-columns: 1fr;
  }
  .addon-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .library-addon-identity {
    flex: 0 0 auto;
    width: 100%;
  }

  .addon-logo {
    flex-basis: 76px;
    width: 76px;
    height: 76px;
  }

  .library-addon .actions {
    width: 100%;
    justify-content: flex-start;
  }
  .panel {
    padding: 18px;
  }
  dialog {
    padding: 20px;
  }

  .nuvio-pair {
    margin: 0;
    padding: 38px 20px 28px;
    border-radius: 14px;
  }

  .nuvio-pair-logo {
    width: min(220px, 70%);
    height: 70px;
  }

  .nuvio-pair-steps strong {
    max-width: 82px;
  }
}
/* Cinematic direction, shared by dark and light dashboard themes. */
.header-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
#theme-toggle { white-space:nowrap; background:var(--surface); color:var(--ink); border-color:var(--border-strong); }
header { min-height:106px; height:auto; padding-top:22px; padding-bottom:22px; background:radial-gradient(ellipse at 75% 0%,var(--focus-wash),transparent 70%); }
.brand { letter-spacing:2px; font-size:1.65rem; font-weight:650; }
.brand-sub { letter-spacing:4px; font-size:.68rem; }
nav button.active { box-shadow:inset 3px 0 var(--purple); }
.title-row h1 { font-size:2rem; letter-spacing:-.8px; }
button.primary { background:linear-gradient(115deg,#7546f0,#6233df); border-color:#976cfc; color:white; box-shadow:0 4px 16px var(--focus-wash); }
button.primary:hover { background:linear-gradient(115deg,#875bfd,#7245eb); }
.profile-grid { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.profile-card { position:relative; grid-template-columns:88px 1fr; grid-template-rows:1fr 1fr; column-gap:20px; row-gap:4px; align-items:center; padding:20px; min-height:130px; overflow:hidden; }
.profile-card:hover { border-color:var(--purple); background:var(--surface); }
.profile-card.selected { background:linear-gradient(115deg,var(--selected),var(--surface) 85%); box-shadow:0 0 0 1px var(--focus-wash); }
.profile-card.selected::after { content:'✓'; position:absolute; top:12px; right:12px; color:var(--selected-ink); font-size:.85rem; }
.avatar { position:relative; grid-row:1 / 3; width:88px; height:88px; border-radius:50%; overflow:hidden; background:var(--selected); border:1px solid var(--border); }
.avatar-fallback { position:absolute; inset:0; display:grid; place-items:center; font-size:1.8rem; color:var(--selected-ink); }
.profile-avatar { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--surface); }
.profile-name { align-self:end; padding-right:13px; }
.profile-card .muted { align-self:start; line-height:1.7; }
.tabs { margin-top:32px; padding-bottom:0; gap:12px; }
.tabs button { border-radius:6px 6px 0 0; padding:15px 16px; border-bottom:2px solid transparent; }
.tabs button.active { border-bottom-color:var(--purple); }
.setting-group { overflow:hidden; }
.setting-group summary { background:linear-gradient(100deg,var(--focus-wash),transparent); }
.setting-row { padding-top:18px; padding-bottom:18px; }
.setting-row input[type=checkbox] { appearance:none; width:40px; height:23px; padding:0; border-radius:20px; background:var(--button); border:1px solid var(--border-strong); cursor:pointer; position:relative; }
.setting-row input[type=checkbox]::before { content:''; position:absolute; width:15px; height:15px; top:3px; left:3px; background:var(--text-muted); border-radius:50%; transition:transform .15s; }
.setting-row input[type=checkbox]:checked { background:var(--purple); border-color:var(--purple); }
.setting-row input[type=checkbox]:checked::before { transform:translateX(17px); background:#fff; }
@media(max-width:720px) { .profile-grid {grid-template-columns:1fr;} .profile-card {min-height:112px;grid-template-columns:72px 1fr;} .avatar {width:72px;height:72px;} header {min-height:95px;gap:12px;flex-wrap:wrap;} .header-actions {gap:8px;} .title-row h1 {font-size:1.7rem;} .tabs {gap:4px;} .tabs button {padding:12px 10px;} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {transition:none!important;scroll-behavior:auto!important;} }

.range-control { display:flex; align-items:center; gap:12px; }
.range-control input { flex:1; min-width:80px; }
.range-control output { min-width:65px; font-variant-numeric:tabular-nums; }
.setting-row select[multiple] { min-height:130px; }

.settings-section-tabs {
  display:flex;
  gap:8px;
  margin:24px 0 18px;
  padding-bottom:8px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.settings-section-tabs button {
  flex:0 0 auto;
  background:var(--button);
  color:var(--text-muted);
  border-color:var(--border);
}
.settings-section-tabs button.active {
  color:var(--selected-ink);
  border-color:var(--purple);
  background:var(--selected);
  box-shadow:0 0 0 1px var(--focus-wash);
}
.settings-section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:18px 2px 8px;
}
.settings-section-heading h2 { margin:3px 0 7px; font-size:1.55rem; }
.settings-section-heading p { margin:0; color:var(--text-muted); line-height:1.55; }
.section-count {
  flex:0 0 auto;
  padding:7px 10px;
  color:var(--selected-ink);
  background:var(--selected);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.76rem;
}
.setting-group summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.setting-group-description {
  margin:0;
  padding:15px 20px;
  color:var(--text-muted);
  background:var(--surface);
  border-top:1px solid var(--border);
  line-height:1.55;
  font-size:.86rem;
}
.setting-input { min-width:0; }
.setting-default { background:transparent; }
.default-badge {
  display:inline-flex;
  margin-top:8px;
  padding:3px 7px;
  border-radius:999px;
  color:var(--text-muted);
  border:1px solid var(--border);
  font-size:.66rem;
  letter-spacing:.02em;
}
.segmented-control {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:8px;
}
.swatch-control {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:10px;
}
.choice-card { position:relative; min-width:0; cursor:pointer; }
.choice-card input {
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
.segmented-control .choice-card>span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 10px;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background:var(--button);
  color:var(--ink);
  text-align:center;
  font-size:.82rem;
}
.segmented-control .choice-card input:checked+span {
  border-color:var(--purple);
  color:var(--selected-ink);
  background:var(--selected);
  box-shadow:0 0 0 2px var(--focus-wash);
}
.choice-card input:focus-visible+span { outline:2px solid var(--purple); outline-offset:2px; }
.choice-card small {
  display:block;
  margin-top:5px;
  color:var(--text-muted);
  font-size:.68rem;
  line-height:1.35;
}
.supporter-choice small:first-of-type { color:#c79200; }
.theme-swatch {
  display:block;
  width:44px;
  height:44px;
  margin:0 auto 6px;
  border:3px solid var(--panel);
  border-radius:50%;
  background:#777;
  box-shadow:0 0 0 1px var(--border-strong);
}
.swatch-crimson { background:#e53935; }
.swatch-ocean { background:#1e88e5; }
.swatch-violet { background:#7e57c2; }
.swatch-emerald { background:#43a047; }
.swatch-amber { background:#ffb300; }
.swatch-rose { background:#ec407a; }
.swatch-white { background:#f7f7f4; }
.swatch-gold { background:#ffd45c; }
.swatch-jade { background:#7bf08d; }
.swatch-rose_gold { background:#ffb37a; }
.swatch-arctic_blue { background:#4de3ff; }
.swatch-graphite { background:#aab2be; }
.choice-card input:checked+.theme-swatch {
  box-shadow:0 0 0 3px var(--purple),0 0 0 6px var(--focus-wash);
}
.swatch-control .choice-label {
  display:block;
  color:var(--text-muted);
  text-align:center;
  font-size:.7rem;
}
.color-setting { display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:center; }
.color-preview { width:38px; height:38px; padding:2px; border-radius:50%; border:1px solid var(--border-strong); opacity:1; }
.secret-setting { -webkit-text-security:disc; font-family:ui-monospace,monospace; }
.raw-settings { margin-top:28px; }

@media(max-width:720px) {
  .settings-section-heading { flex-direction:column; gap:10px; }
  .setting-row { grid-template-columns:1fr; }
  .segmented-control { grid-template-columns:1fr; }
  .swatch-control { grid-template-columns:repeat(4,minmax(58px,1fr)); }
}

.activity-list {display:grid;gap:14px;}
.activity-row {display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:18px;align-items:center;margin:0;}
.activity-poster {width:84px;aspect-ratio:2/3;object-fit:cover;border-radius:9px;background:var(--button);border:1px solid var(--border);}
.activity-poster-empty {display:grid;place-items:center;color:var(--text-muted);font-size:1.4rem;}
.activity-details {min-width:0;}
.activity-title {display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:1.05rem;}
.activity-title a {font-size:.72rem;}
.activity-overview {display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.55;margin:.5rem 0;color:var(--ink);}
.activity-original {font-size:.82rem;color:var(--text-muted);margin:.3rem 0;}
.activity-progress {min-width:170px;text-align:right;}
.activity-row progress {accent-color:var(--accent);max-width:100%;}
.activity-row .key{overflow-wrap:anywhere;}
@media(max-width:650px){.activity-row{grid-template-columns:68px minmax(0,1fr);align-items:start;padding:14px;}.activity-poster{width:68px}.activity-progress{grid-column:1/-1;text-align:left;min-width:0}.activity-overview{-webkit-line-clamp:2;}}

.stats-controls {display:flex;align-items:end;gap:10px;flex-wrap:wrap;}
.stats-controls>label,.stats-control-label {font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;}
.stats-controls select {display:block;margin-top:6px;min-width:150px;}
.stats-days-input {margin-top:6px;width:120px;}
.stats-days-input[hidden] {display:none;}
.admin-accounts {display:grid;gap:8px;margin-top:6px;}
.admin-account-row {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--input);cursor:pointer;}
.admin-account-id {display:flex;flex-direction:column;gap:2px;min-width:0;}
.admin-account-id small {color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-control-label {display:block;}
.stats-profile-filter {position:relative;min-width:250px;}
.stats-profile-menu {position:relative;margin-top:6px;}
.stats-profile-menu summary {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:7px;background:var(--input);color:var(--ink);cursor:pointer;list-style:none;user-select:none;}
.stats-profile-menu summary::-webkit-details-marker {display:none;}
.stats-profile-menu[open] summary {border-color:var(--purple);box-shadow:0 0 0 3px var(--focus-wash);}
.stats-profile-chevron {font-size:1rem;transition:transform .16s ease;}
.stats-profile-menu[open] .stats-profile-chevron {transform:rotate(180deg);}
.stats-profile-popover {position:absolute;z-index:35;top:calc(100% + 7px);right:0;width:max(100%,310px);padding:10px;border:1px solid var(--border-strong);border-radius:10px;background:var(--panel);box-shadow:0 18px 45px rgba(0,0,0,.32);}
.stats-profile-actions {display:flex;gap:7px;padding-bottom:9px;border-bottom:1px solid var(--line);}
.stats-profile-actions button {flex:1;padding:7px 9px;font-size:.7rem;}
.stats-profile-list {display:grid;gap:3px;max-height:280px;overflow-y:auto;padding-top:8px;}
.stats-profile-option {display:flex;grid-template-columns:none;align-items:center;gap:10px;padding:9px;border-radius:7px;color:var(--ink);cursor:pointer;text-transform:none;letter-spacing:normal;}
.stats-profile-option:hover {background:var(--selected);}
.stats-profile-option input {flex:0 0 18px;margin:0;}
.stats-profile-option span {min-width:0;}
.stats-profile-option strong,.stats-profile-option small {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-profile-option strong {font-size:.82rem;}
.stats-profile-option small {margin-top:3px;color:var(--text-muted);font-size:.68rem;}
.stats-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0;}
.metric {padding:20px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(140deg,var(--focus-wash),var(--surface));}
.metric span {display:block;color:var(--text-muted);font-size:.8rem;margin-bottom:8px;}
.metric strong {font-size:1.55rem;letter-spacing:-.04em;}
.lang-menu {position:relative;}
.lang-menu summary {display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:.85rem;border:1px solid var(--border-strong);border-radius:8px;background:var(--button);color:inherit;cursor:pointer;list-style:none;user-select:none;}
.lang-menu summary::-webkit-details-marker {display:none;}
.lang-menu summary:hover {background:var(--button-hover);}
.lang-menu[open] summary {border-color:var(--accent);}
.lang-caret {font-size:1rem;transition:transform .16s ease;margin-left:2px;}
.lang-menu[open] .lang-caret {transform:rotate(180deg);}
.lang-flag {flex:none;width:22px;height:16px;border-radius:3px;overflow:hidden;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.12);}
.lang-flag svg {width:100%;height:100%;display:block;object-fit:cover;}
.lang-list {position:absolute;z-index:60;top:calc(100% + 6px);right:0;min-width:160px;padding:6px;border:1px solid var(--border-strong);border-radius:10px;background:var(--panel);box-shadow:0 18px 45px rgba(0,0,0,.32);display:grid;gap:2px;}
.lang-option {display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:inherit;font-size:.9rem;text-align:left;cursor:pointer;}
.lang-option:hover {background:var(--selected);}
.lang-option[aria-selected="true"] {background:var(--selected);color:var(--accent);}

/* Custom account selector (name left, provider icon + type right). */
/* Lift the whole bar above the profile grid while the menu is open so the
   dropdown overlays the profile tiles instead of rendering behind them. */
.account-bar:has(.acct-menu[open]) {position:relative;z-index:70;}
.acct-menu {position:relative;min-width:280px;}
.acct-menu summary {display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:.9rem;border:1px solid var(--border-strong);border-radius:7px;background:#0f1626;color:var(--ink);cursor:pointer;list-style:none;user-select:none;}
.acct-menu summary::-webkit-details-marker {display:none;}
.acct-menu summary:hover {border-color:var(--accent);}
.acct-menu[open] summary {border-color:var(--accent);}
.acct-current-name, .acct-option-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-caret {font-size:1rem;transition:transform .16s ease;margin-left:2px;flex:none;}
.acct-menu[open] .acct-caret {transform:rotate(180deg);}
.acct-list {position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;padding:6px;border:1px solid var(--border-strong);border-radius:10px;background:#0f1626;box-shadow:0 18px 45px rgba(0,0,0,.45);display:grid;gap:2px;max-height:320px;overflow-y:auto;}
/* Opaque backgrounds so the dropdown never shows the profile tiles through it. */
:root[data-theme="light"] .acct-menu summary,
:root[data-theme="light"] .acct-list {background:#ffffff;}
.acct-option {display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:inherit;font-size:.9rem;text-align:left;cursor:pointer;}
.acct-option:hover {background:var(--selected);}
.acct-option[aria-selected="true"] {background:var(--selected);}
/* Push the provider badge to the far right of both the summary and each row. */
.acct-menu summary .acct-type, .acct-option .acct-type {margin-left:auto;}
.acct-type {display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 9px 3px 6px;border-radius:999px;font-size:.72rem;font-weight:650;letter-spacing:.02em;border:1px solid var(--border);background:var(--button);}
.acct-type-name {white-space:nowrap;}
.acct-type-nuvio {color:var(--purple);border-color:color-mix(in srgb,var(--purple) 45%,var(--border));}
.acct-type-tuvora {color:#f0b429;border-color:color-mix(in srgb,#f0b429 45%,var(--border));}
.acct-type-icon {width:18px;height:18px;flex:none;border-radius:5px;object-fit:contain;display:block;}
.acct-type-icon-svg {display:grid;place-items:center;overflow:hidden;}
.acct-type-icon-svg svg {width:100%;height:100%;display:block;}
@media (max-width:720px){.acct-menu{min-width:0;width:100%;}}
.metric.metric-home {grid-template-columns:56px minmax(0,1fr);align-content:center;}
.metric.metric-home::before {display:none;}
.metric.metric-home .metric-ic {grid-column:1;grid-row:1/3;align-self:center;justify-self:center;display:grid;place-items:center;}
.metric-ic {width:48px;height:48px;border-radius:50%;background:var(--focus-wash);border:1px solid rgba(132,101,255,0.24);}
.metric-ic svg {width:27px;height:27px;fill:var(--accent);display:block;}
.home-heading {margin:24px 0 12px;font-size:1.05rem;letter-spacing:-.01em;}
.home-heading:first-child {margin-top:4px;}
.home-heading + .stats-metrics {margin-top:0;}
.perf-panel {margin-top:14px;}
.perf-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.perf-head h3 {margin:0;font-size:1rem;}
.perf-legend {display:flex;align-items:center;gap:14px;color:var(--text-muted);font-size:.75rem;}
.perf-legend span {display:flex;align-items:center;gap:6px;}
.perf-legend i {width:10px;height:10px;border-radius:3px;display:block;}
.perf-legend .cpu {background:var(--accent);}
.perf-legend .ram {background:#22d3ee;}
.perf-plot {display:flex;gap:8px;}
.perf-yaxis {position:relative;width:34px;flex:none;height:170px;}
.perf-yaxis span {position:absolute;right:2px;transform:translateY(-50%);font-size:.68rem;color:var(--text-muted);}
.perf-canvas {position:relative;flex:1;height:170px;}
.perf-chart {width:100%;height:100%;display:block;overflow:visible;}
.perf-cursor {position:absolute;top:0;bottom:0;width:1px;background:var(--text-muted);opacity:.55;pointer-events:none;}
.perf-tip {position:fixed;z-index:60;pointer-events:none;padding:8px 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.4);font-size:.75rem;display:grid;gap:3px;}
.perf-tip[hidden] {display:none;}
.perf-tip .perf-tip-time {color:var(--text-muted);margin-bottom:2px;}
.perf-tip i {display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:baseline;}
.perf-tip i.cpu {background:var(--accent);}
.perf-tip i.ram {background:#22d3ee;}
.perf-tip b {color:var(--text);}
.perf-grid {stroke:var(--border);stroke-width:1;stroke-dasharray:3 5;opacity:.6;}
.perf-line {fill:none;stroke-width:2;}
.perf-cpu {stroke:var(--accent);}
.perf-ram {stroke:#22d3ee;}
.perf-hint {margin:8px 0 0;font-size:.75rem;}
.perf-legend {margin-left:auto;}
.perf-period {width:auto;padding:7px 11px;font-size:.78rem;}
.perf-legend b {color:var(--text);font-variant-numeric:tabular-nums;}
.stats-dashboard-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 20px;}
.stats-ranking-card {position:relative;min-height:210px;overflow:hidden;border:1px solid var(--border-strong);border-radius:11px;background:#17191d;color:#f8fafc;box-shadow:0 10px 25px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.035);outline:1px solid color-mix(in srgb,var(--border-strong) 78%,transparent);outline-offset:-1px;}
.stats-card-bg {position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);object-fit:cover;filter:blur(5px);opacity:.42;transform:scale(1.04);transition:opacity .18s ease;}
.stats-ranking-card::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,14,.93) 0%,rgba(10,11,14,.78) 48%,rgba(10,11,14,.56) 100%);}
.stats-card-content {position:absolute;z-index:1;inset:1px;padding:0;overflow:hidden;border-radius:9px;}
.stats-card-content header {position:relative;z-index:3;top:auto;display:flex;align-items:center;gap:8px;height:auto;min-height:34px;margin-left:130px;padding:9px 10px 7px 10px;border-bottom:1px solid rgba(255,255,255,.13);background:rgba(8,12,20,.2);box-shadow:none;backdrop-filter:blur(11px) saturate(1.12);-webkit-backdrop-filter:blur(11px) saturate(1.12);}
.stats-card-content header h2 {min-width:0;margin:0;color:#fff;font-size:.8rem;line-height:1.1;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stats-card-content header small {flex:none;margin-left:auto;color:var(--stats-card-accent,#38bdf8);font-size:.52rem;line-height:1.1;text-align:right;text-transform:uppercase;letter-spacing:.07em;}
.stats-info-btn {flex:none;width:15px;height:15px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-family:Georgia,"Times New Roman",serif;font-size:.6rem;font-weight:700;font-style:italic;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:.65;}
.stats-info-btn:hover {opacity:1;}
.stats-info-bubble {position:fixed;z-index:1200;max-width:250px;padding:9px 11px;border-radius:9px;background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);box-shadow:0 10px 28px rgba(0,0,0,.28);font-size:.78rem;line-height:1.45;}
.stats-ranking-body {display:block;margin-left:130px;padding:6px 10px 8px 0;}
.stats-lead-image {position:absolute;z-index:2;inset:0 auto 0 8px;width:112px;height:100%;display:grid;place-items:center;object-fit:contain;border-radius:6px;background:#0d0f14;color:var(--stats-card-accent,#38bdf8);box-shadow:5px 0 18px rgba(0,0,0,.28);opacity:1;visibility:visible;transition:opacity .18s ease,transform .18s ease;}
.stats-lead-image.round {top:50%;right:auto;bottom:auto;left:14px;width:92px;height:92px;border:2px solid rgba(255,255,255,.2);border-radius:50%;object-fit:cover;transform:translateY(-50%);}
.stats-lead-image.stats-source-logo {top:50%;right:auto;bottom:auto;left:14px;width:92px;height:92px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:16px;object-fit:contain;background:rgba(255,255,255,.12);transform:translateY(-50%);}
.stats-ranking-body ol {list-style:none;margin:0;padding:0;min-width:0;}
.stats-ranking-body li {display:grid;grid-template-columns:17px minmax(0,1fr) auto;gap:5px;align-items:center;min-width:0;padding:4px 5px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(255,255,255,.07),transparent);font-size:.67rem;cursor:pointer;transition:background .15s ease;}
.stats-ranking-body li:hover,.stats-ranking-body li:focus-visible {background:linear-gradient(90deg,color-mix(in srgb,var(--stats-card-accent,#38bdf8) 22%,transparent),rgba(255,255,255,.04));outline:1px solid color-mix(in srgb,var(--stats-card-accent,#38bdf8) 52%,transparent);outline-offset:-1px;}
.stats-ranking-body li>b {color:#aeb6c4;font-size:.58rem;text-align:center;}
.stats-ranking-body li>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1f5f9;font-size:.67rem;font-weight:450;transition:font-size .12s ease,font-weight .12s ease;}
.stats-ranking-body li:first-child>span {font-size:.79rem;font-weight:750;}
.stats-ranking-body li:hover>span,
.stats-ranking-body li:focus>span {font-size:.79rem;font-weight:750;}
.stats-ranking-body ol:has(li:not(:first-child):hover,li:not(:first-child):focus) li:first-child:not(:hover):not(:focus)>span {font-size:.67rem;font-weight:450;}
.stats-ranking-body li>strong {color:var(--stats-card-accent,#38bdf8);font-size:.63rem;white-space:nowrap;max-width:75px;overflow:hidden;text-overflow:ellipsis;}
.stats-card-empty {display:grid;place-items:center;min-height:130px;margin:0;color:#aeb6c4;font-size:.78rem;}
:root[data-theme="light"] .stats-ranking-card {background:#fbfaff;color:var(--ink);border-color:#d8d1e5;box-shadow:0 10px 25px rgba(69,50,105,.11);}
:root[data-theme="light"] .stats-card-bg {filter:blur(6px) saturate(1.08);opacity:.42;}
:root[data-theme="light"] .stats-ranking-card::after {background:linear-gradient(90deg,rgba(251,250,255,.9) 0%,rgba(251,250,255,.76) 48%,rgba(251,250,255,.52) 100%);}
:root[data-theme="light"] .stats-card-content header {border-bottom-color:rgba(64,48,88,.14);background:rgba(250,252,255,.2);}
:root[data-theme="light"] .stats-card-content header h2 {color:var(--ink);}
:root[data-theme="light"] .stats-ranking-card {--stats-card-accent:#0284c7;}
:root[data-theme="light"] .stats-card-content header small {color:var(--stats-card-accent);}
:root[data-theme="light"] .stats-lead-image {background:var(--selected);color:var(--stats-card-accent);box-shadow:0 5px 14px rgba(2,132,199,.16);}
:root[data-theme="light"] .stats-ranking-body li {border-bottom-color:rgba(64,48,88,.1);background:linear-gradient(90deg,color-mix(in srgb,var(--stats-card-accent) 7.5%,transparent),transparent);}
:root[data-theme="light"] .stats-ranking-body li:hover,
:root[data-theme="light"] .stats-ranking-body li:focus-visible {background:linear-gradient(90deg,color-mix(in srgb,var(--stats-card-accent) 17%,transparent),rgba(255,255,255,.42));outline-color:color-mix(in srgb,var(--stats-card-accent) 40%,transparent);}
:root[data-theme="light"] .stats-ranking-body li>b {color:var(--text-muted);}
:root[data-theme="light"] .stats-ranking-body li>span {color:var(--ink);}
:root[data-theme="light"] .stats-ranking-body li>strong {color:var(--stats-card-accent);}
:root[data-theme="light"] .stats-card-empty {color:var(--text-muted);}
.stats-section {margin:0 0 18px;min-width:0;}
.stats-section h2 {margin-top:0;}
.timeline-legend {display:flex;align-items:center;gap:14px;color:var(--text-muted);font-size:.75rem;}
.timeline-legend span {display:flex;align-items:center;gap:6px;}
.timeline-legend i {width:10px;height:10px;border-radius:3px;display:block;}
.timeline-legend .movie {background:#facc15;}
.timeline-legend .series {background:#ef4444;}
.timeline-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 7px;}
.timeline-summary>div {min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface) 74%,transparent);}
.timeline-summary span,.timeline-summary strong {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.timeline-summary span {color:var(--text-muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.055em;}
.timeline-summary strong {margin-top:5px;font-size:.82rem;}
.timeline-scroll {width:100%;overflow-x:auto;overflow-y:hidden;margin-top:8px;}
.timeline-chart {height:238px;display:block;max-width:none;}
.timeline-movie {fill:#facc15;}
.timeline-series {fill:#ef4444;}
.timeline-empty {fill:var(--border);}
.timeline-axis {stroke:var(--border);stroke-width:1;}
.timeline-gridline line {stroke:var(--border);stroke-width:1;stroke-dasharray:3 5;opacity:.65;}
.timeline-gridline text {fill:var(--text-muted);font-family:inherit;font-size:8px;text-anchor:end;}
.timeline-total,.timeline-date {fill:var(--text-muted);font-family:inherit;text-anchor:middle;}
.timeline-total {font-size:10px;font-weight:700;}
.timeline-date {font-size:9px;}
.timeline-year {fill:var(--text-muted);font-family:inherit;text-anchor:middle;font-size:8px;opacity:.7;}
.timeline-day rect {transition:filter .15s ease,opacity .15s ease;}
.timeline-day:hover rect,.timeline-day:focus rect {filter:brightness(1.22) drop-shadow(0 0 4px currentColor);}
.timeline-day:focus {outline:none;}
.timeline-hit {fill:transparent;}
#stats-timeline {position:relative;}
.stats-daytip {position:fixed;z-index:60;pointer-events:none;min-width:190px;max-width:270px;padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface);box-shadow:0 14px 34px rgba(0,0,0,.4);font-size:.8rem;}
.stats-daytip[hidden] {display:none;}
.stats-daytip-head {display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.stats-daytip-head span:first-child {font-weight:700;color:var(--text);text-transform:capitalize;}
.stats-daytip-head span:last-child {color:var(--text-muted);white-space:nowrap;}
.stats-daytip ul {list-style:none;margin:0;padding:0;display:grid;gap:7px;max-height:210px;overflow:auto;}
.stats-daytip li {display:flex;align-items:center;gap:9px;}
.stats-daytip-name {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.stats-daytip strong {font-variant-numeric:tabular-nums;color:var(--text);}
.stats-daytip-avatar {position:relative;width:22px;height:22px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--selected);color:var(--accent);font-size:.68rem;font-weight:700;}
.stats-daytip-avatar img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.top-row {display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);}
.top-row img,.top-poster {width:58px;aspect-ratio:2/3;object-fit:cover;border-radius:7px;background:var(--button);display:grid;place-items:center;}
.recent-row {display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid var(--border);}
.recent-row>img,.recent-poster {width:64px;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:var(--button);display:grid;place-items:center;color:var(--text-muted);}
.recent-row time {font-size:.7rem;color:var(--text-muted);text-align:right;white-space:nowrap;}
.stats-recent-shelf {position:relative;isolation:isolate;margin:0 0 18px;padding:16px;overflow:hidden;background:#17191d;color:#f8fafc;}
.stats-recent-shelf>.stats-card-bg {z-index:-2;filter:blur(7px) saturate(1.08);opacity:.62;transform:scale(1.05);}
.stats-recent-overlay {position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(10,11,14,.88),rgba(10,11,14,.68) 55%,rgba(10,11,14,.56));}
.stats-recent-content {position:relative;z-index:1;}
.stats-recent-header {position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-5px -5px 14px;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.13);border-radius:9px 9px 4px 4px;background:rgba(8,12,20,.2);box-shadow:none;backdrop-filter:blur(11px) saturate(1.12);-webkit-backdrop-filter:blur(11px) saturate(1.12);}
.stats-recent-header h2,.stats-recent-header p {margin:0;}
.stats-recent-header h2 {font-size:.95rem;text-transform:uppercase;letter-spacing:.035em;}
.stats-recent-header p {margin-top:4px;font-size:.72rem;}
.stats-recent-shelf .muted,.stats-recent-tile>span {color:#c4cbd5;}
:root[data-theme="light"] .stats-recent-header {border-bottom-color:rgba(64,48,88,.14);background:rgba(250,252,255,.2);}
.stats-recent-tools,.stats-recent-filters,.stats-recent-arrows {display:flex;align-items:center;gap:6px;}
.stats-recent-filters button {padding:7px 12px;border-radius:6px;font-size:.72rem;}
.stats-recent-filters button.active {border-color:var(--purple);background:var(--selected);color:var(--selected-ink);}
.stats-recent-arrows {margin-left:8px;}
.stats-recent-arrows button {width:34px;height:34px;padding:0;border:0;background:transparent;color:var(--text-muted);font-size:1.8rem;line-height:1;}
.stats-recent-arrows button:hover {background:rgba(255,255,255,.1);color:#fff;}
.stats-recent-track {display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;}
.stats-recent-tile {flex:0 0 142px;min-width:0;cursor:pointer;scroll-snap-align:start;border-radius:8px;outline:none;}
.stats-recent-poster {position:relative;width:100%;aspect-ratio:2/3;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--button);color:var(--text-muted);font-size:1.5rem;box-shadow:0 8px 20px rgba(0,0,0,.15);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;}
.stats-recent-poster::after {content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(4,5,8,.88));}
.stats-recent-poster img {width:100%;height:100%;object-fit:cover;}
.stats-recent-poster small {position:absolute;z-index:1;right:8px;bottom:7px;left:8px;overflow:hidden;color:#fff;font-size:.62rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #000;}
.stats-recent-tile:hover .stats-recent-poster,.stats-recent-tile:focus-visible .stats-recent-poster {transform:translateY(-3px);border-color:var(--purple);box-shadow:0 12px 25px rgba(77,43,164,.25);}
.stats-recent-tile>strong,.stats-recent-tile>span {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-recent-tile>strong {margin-top:9px;font-size:.76rem;}
.stats-recent-tile>span {margin-top:3px;font-size:.65rem;}
.stats-recent-tile[hidden] {display:none;}
:root[data-theme="light"] .stats-recent-shelf {background:#fbfaff;color:var(--ink);}
:root[data-theme="light"] .stats-recent-shelf>.stats-card-bg {opacity:.5;}
:root[data-theme="light"] .stats-recent-overlay {background:linear-gradient(90deg,rgba(251,250,255,.84),rgba(251,250,255,.65) 55%,rgba(251,250,255,.52));}
:root[data-theme="light"] .stats-recent-shelf .muted,
:root[data-theme="light"] .stats-recent-tile>span {color:var(--text-muted);}
:root[data-theme="light"] .stats-recent-arrows button:hover {background:rgba(255,255,255,.58);color:var(--ink);}
.stats-detail-modal {position:relative;margin:-28px;padding:28px;overflow:hidden;isolation:isolate;}
.stats-detail-backdrop {position:absolute;z-index:-2;inset:-16px;width:calc(100% + 32px);height:310px;object-fit:cover;filter:blur(8px) saturate(1.08);opacity:.48;}
.stats-detail-scrim {position:absolute;z-index:-1;inset:0 0 auto;height:330px;background:linear-gradient(180deg,rgba(15,13,23,.52),var(--surface) 92%);}
.stats-detail-content {display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start;}
.stats-detail-visual {width:150px;aspect-ratio:2/3;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:11px;background:var(--button);color:var(--text-muted);font-size:2rem;box-shadow:0 14px 32px rgba(0,0,0,.3);}
.stats-detail-visual img {width:100%;height:100%;object-fit:cover;}
.stats-detail-main {min-width:0;}
.stats-detail-kicker {margin:2px 0 5px;color:var(--purple-soft);font-size:.72rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;}
.stats-detail-main h2,.stats-profile-detail-header h2 {margin:0;font-size:1.65rem;line-height:1.15;}
.stats-detail-original {margin:6px 0;color:var(--text-muted);font-size:.78rem;}
.stats-detail-overview {margin:16px 0;line-height:1.55;color:var(--text-secondary);}
.stats-detail-facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0;}
.stats-detail-facts>div {padding:10px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface) 86%,transparent);}
.stats-detail-facts dt {color:var(--text-muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;}
.stats-detail-facts dd {margin:5px 0 0;font-size:.85rem;font-weight:700;}
.stats-detail-tags {display:flex;flex-wrap:wrap;gap:6px;margin:13px 0;}
.stats-detail-tags span {padding:5px 9px;border-radius:20px;background:var(--selected);color:var(--selected-ink);font-size:.69rem;font-weight:650;}
.stats-detail-sources,.stats-detail-id {color:var(--text-muted);font-size:.75rem;}
.stats-detail-id {margin-bottom:0;overflow-wrap:anywhere;}
.stats-detail-list {margin-top:18px;border-top:1px solid var(--border);padding-top:13px;}
.stats-detail-list h3,.stats-profile-recent h3 {margin:0 0 8px;font-size:.85rem;}
.stats-detail-list>div {display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.77rem;}
.stats-detail-list>div strong {text-align:right;}
.stats-detail-modal .dialog-actions a {display:inline-flex;align-items:center;padding:9px 14px;border:1px solid var(--border-strong);border-radius:8px;background:var(--button);color:var(--ink);font-size:.875rem;font-weight:550;text-decoration:none;}
/* Addon detail dialog: per-profile stream-open breakdown (tuiles) */
.stats-addon-detail-logo {overflow:hidden;background:var(--button);}
.stats-addon-detail-logo img {width:100%;height:100%;object-fit:contain;}
.stats-addon-tiles {margin-top:18px;border-top:1px solid var(--border);padding-top:13px;}
.stats-addon-tiles h3 {margin:0 0 12px;font-size:.85rem;}
.stats-addon-tile-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px;}
.stats-addon-tile {display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:14px 8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);min-width:0;}
.stats-addon-tile-avatar {width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--selected);color:var(--selected-ink);font-size:1rem;}
.stats-addon-tile-avatar img {width:100%;height:100%;object-fit:cover;}
.stats-addon-tile-name {font-size:.85rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-addon-tile-count {font-size:1.3rem;font-weight:700;line-height:1;}
.stats-addon-tile-sub {color:var(--text-muted);font-size:.72rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Clickable timeline day + its day-detail dialog */
.timeline-day-clickable {cursor:pointer;}
.stats-day-header {padding-bottom:16px;border-bottom:1px solid var(--border);}
.stats-day-header h2 {margin:0;font-size:1.5rem;line-height:1.15;text-transform:capitalize;}
.stats-day-header p.muted {margin:6px 0 0;font-variant-numeric:tabular-nums;}
.stats-day-profiles {display:flex;gap:12px;margin:16px 0 4px;padding-bottom:14px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.stats-day-profile {flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;width:74px;padding:2px 0;border:0;background:none;color:var(--text-muted);font-size:.72rem;font-weight:600;cursor:pointer;}
.stats-day-profile-av {position:relative;width:56px;height:56px;flex:none;border-radius:50%;overflow:visible;display:grid;place-items:center;background:var(--selected);color:var(--purple);font-size:1.3rem;font-weight:700;border:2px solid transparent;}
.stats-day-profile-av>img {width:100%;height:100%;border-radius:50%;object-fit:cover;}
.stats-day-profile-av>span:not(.stats-day-profile-count) {display:grid;place-items:center;width:100%;height:100%;}
.stats-day-profile-icon svg {width:26px;height:26px;}
.stats-day-profile-count {position:absolute;right:-3px;bottom:-3px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:10px;border:2px solid var(--surface);background:var(--purple);color:#fff;font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums;}
.stats-day-profile-name {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-day-profile.active {color:var(--text);}
.stats-day-profile.active .stats-day-profile-av {border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 38%,transparent);}
.stats-day-tabs {display:flex;gap:8px;margin:14px 0;}
.stats-day-item {cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.stats-day-item:hover,.stats-day-item:focus {border-color:var(--purple);background:var(--selected);outline:none;}
.stats-day-tabs button {display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--border);border-radius:9px;background:var(--button);color:var(--text-secondary);font-size:.82rem;font-weight:600;cursor:pointer;}
.stats-day-tabs button span {display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:var(--selected);color:var(--selected-ink);font-size:.68rem;font-variant-numeric:tabular-nums;}
.stats-day-tabs button.active {border-color:var(--purple);background:var(--selected);color:var(--selected-ink);}
.stats-day-list {display:grid;gap:9px;max-height:min(52vh,440px);overflow:auto;padding-right:4px;}
.stats-day-item {display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--surface) 86%,transparent);}
.stats-day-poster {flex:none;width:44px;aspect-ratio:2/3;display:grid;place-items:center;overflow:hidden;border-radius:6px;background:var(--button);color:var(--text-muted);font-size:1rem;}
.stats-day-poster img {width:100%;height:100%;object-fit:cover;}
.stats-day-item-main {min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.stats-day-source {flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:4px;}
.stats-day-source img {max-width:100%;max-height:100%;object-fit:contain;border-radius:5px;}
.stats-day-source-text {width:auto;padding:2px 8px;border-radius:20px;background:var(--selected);color:var(--selected-ink);font-size:.68rem;font-weight:650;}
.stats-day-item-main strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;}
.stats-day-sub {color:var(--purple-soft);font-size:.74rem;font-weight:650;font-variant-numeric:tabular-nums;}
.stats-day-meta {color:var(--text-muted);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-profile-detail-header {display:flex;align-items:center;gap:17px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.stats-profile-detail-header p {margin:5px 0 0;color:var(--text-muted);}
.stats-profile-detail-avatar {width:88px;height:88px;display:grid;place-items:center;flex:none;overflow:hidden;border:2px solid var(--border-strong);border-radius:50%;background:var(--selected);color:var(--purple);font-size:2rem;}
.stats-profile-detail-avatar img {width:100%;height:100%;object-fit:cover;}
.stats-profile-facts {margin-top:18px;}
.stats-profile-recent {margin-top:20px;}
.stats-profile-recent>div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.stats-profile-recent article {display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:center;min-width:0;padding:7px;border:1px solid var(--border);border-radius:8px;background:var(--panel);}
.stats-profile-recent img,.stats-mini-poster {width:38px;aspect-ratio:2/3;display:grid;place-items:center;object-fit:cover;border-radius:4px;background:var(--button);color:var(--text-muted);}
.stats-profile-recent article>span:last-child {min-width:0;}
.stats-profile-recent strong,.stats-profile-recent small {display:block;overflow:hidden;text-overflow:ellipsis;}
.stats-profile-recent strong {font-size:.72rem;white-space:nowrap;}
.stats-profile-recent small {margin-top:3px;color:var(--text-muted);font-size:.6rem;line-height:1.35;}
:root[data-theme="light"] .stats-detail-backdrop {opacity:.55;}
:root[data-theme="light"] .stats-detail-scrim {background:linear-gradient(180deg,rgba(255,255,255,.42),var(--surface) 92%);}
:root[data-theme="light"] .stats-detail-kicker {color:var(--purple);}
@media(max-width:1150px){.stats-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:950px){.stats-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.stats-dashboard-grid{grid-template-columns:1fr}}
@media(max-width:620px){.stats-recent-header{align-items:flex-start;flex-direction:column}.stats-recent-tools{width:100%;justify-content:space-between}.stats-recent-tile{flex-basis:124px}}
@media(max-width:750px){.timeline-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.stats-metrics{grid-template-columns:1fr}.timeline-legend{width:100%;margin-top:8px}.timeline-summary{grid-template-columns:1fr}.recent-row{grid-template-columns:52px minmax(0,1fr)}.recent-row>img,.recent-poster{width:52px}.recent-row time{grid-column:2;text-align:left}.stats-detail-content{grid-template-columns:92px minmax(0,1fr);gap:14px}.stats-detail-visual{width:92px}.stats-detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-profile-recent>div{grid-template-columns:1fr}.stats-detail-modal{margin:-20px;padding:20px}.stats-recent-filters button{padding:6px 9px}.stats-recent-arrows{margin-left:0}}

.connection-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.connection-card {display:grid;grid-template-columns:52px minmax(0,1fr);gap:15px;margin:0;}
.connection-card h3 {margin:2px 0 8px;}
.connection-logo {width:52px;height:52px;border-radius:13px;display:block;object-fit:cover;background:var(--button);border:1px solid var(--border);}
.stats-source-card .connection-logo {object-fit:contain;padding:7px;}
.connection-logo-svg {padding:0;display:grid;place-items:center;overflow:hidden;}
.connection-logo-svg svg {width:100%;height:100%;}
.stats-source-toggle {display:flex;align-items:center;gap:9px;margin-top:10px;cursor:pointer;font-size:.92rem;}
.stats-source-toggle input {width:18px;height:18px;accent-color:var(--accent);flex:none;}
.connection-ok {color:#4ecb71;font-weight:650;}
@media(max-width:900px){.connection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.connection-grid{grid-template-columns:1fr}}

.identity-customization {display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;}
.identity-avatar-preview {position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:2px solid var(--border-strong);box-shadow:0 12px 30px rgba(0,0,0,.25);color:#fff;font-size:3rem;font-weight:700;}
.identity-avatar-preview img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.profile-color-control {display:flex;align-items:center;gap:12px;}
.profile-color-control input {width:64px;height:42px;padding:3px;cursor:pointer;}
.profile-color-control output {font-family:ui-monospace,monospace;color:var(--text-muted);}
.profile-color-swatches {display:flex;gap:9px;flex-wrap:wrap;}
.profile-color-swatches button {position:relative;width:34px;height:34px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(0,0,0,.48);}
.profile-color-swatches button:nth-child(1) {background-color:#1E88E5;}
.profile-color-swatches button:nth-child(2) {background-color:#E53935;}
.profile-color-swatches button:nth-child(3) {background-color:#43A047;}
.profile-color-swatches button:nth-child(4) {background-color:#FB8C00;}
.profile-color-swatches button:nth-child(5) {background-color:#8E24AA;}
.profile-color-swatches button:nth-child(6) {background-color:#00ACC1;}
.profile-color-swatches button:nth-child(7) {background-color:#F4511E;}
.profile-color-swatches button:nth-child(8) {background-color:#3949AB;}
.profile-color-swatches button:nth-child(9) {background-color:#C0CA33;}
.profile-color-swatches button:nth-child(10) {background-color:#D81B60;}
.profile-color-swatches button:nth-child(11) {background-color:#00897B;}
.profile-color-swatches button:nth-child(12) {background-color:#5E35B1;}
.profile-color-swatches button:nth-child(13) {background-color:#7CB342;}
.profile-color-swatches button:nth-child(14) {background-color:#039BE5;}
.profile-color-swatches button:nth-child(15) {background-color:#FFB300;}
.profile-color-swatches button:nth-child(16) {background-color:#6D4C41;}
.profile-color-swatches button:hover {filter:brightness(1.14);transform:scale(1.08);}
.profile-color-swatches button.selected {box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--purple);transform:scale(1.08);}
.profile-color-swatches button.selected::after {content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.9rem;font-weight:900;text-shadow:0 1px 3px #000,0 0 2px #000;}
.auth-mode {display:grid;gap:8px;margin:0;padding:14px 18px;border:1px solid var(--border);border-radius:10px;min-width:0;}
.auth-mode legend {padding:0 7px;color:var(--text-secondary);font-size:.875rem;}
.auth-mode [hidden] {display:none;}
.proxy-diagnostics {margin:16px 0;padding:16px;border:1px solid var(--border);border-radius:10px;}
.proxy-candidate {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border);}
.proxy-candidate code {overflow-wrap:anywhere;}
.proxy-candidate p {margin:6px 0 0;}
.profile-avatar-fieldset {display:grid;gap:16px;margin:0;padding:18px;border:1px solid var(--border);border-radius:10px;min-width:0;}
.profile-avatar-fieldset legend {padding:0 7px;color:var(--text-secondary);font-size:.875rem;}
.profile-avatar-fieldset h3 {margin:0;font-size:.92rem;}
.avatar-gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:14px;max-height:336px;overflow:auto;padding:6px;}
.avatar-choice {width:82px;height:82px;padding:0;border-radius:50%;overflow:hidden;background:var(--button);justify-self:center;}
.xperience-avatar-gallery .avatar-choice {content-visibility:auto;contain-intrinsic-size:82px 82px;}
.avatar-choice img {width:100%;height:100%;display:block;object-fit:cover;}
.avatar-choice.selected {border-color:var(--purple);box-shadow:0 0 0 3px var(--focus-wash);}
.xperience-avatar-heading {display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:8px;border-top:1px solid var(--border);}
.avatar-source-note {margin:0;color:var(--text-muted);font-size:.75rem;text-align:right;}
.xperience-avatar-tools {display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);gap:12px;}
.xperience-avatar-gallery {max-height:480px;min-height:100px;}
#xperience-avatar-count {margin:0;font-size:.78rem;}
@media(max-width:620px){.identity-customization{grid-template-columns:1fr}.identity-avatar-preview{width:132px;height:132px;justify-self:center}.avatar-gallery{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:10px}.avatar-choice{width:66px;height:66px}}
@media(max-width:520px){.xperience-avatar-heading{display:grid}.avatar-source-note{text-align:left}.xperience-avatar-tools{grid-template-columns:1fr}}
/* Catalogues & collections */
.col-panel{margin-top:16px;}
.col-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.col-panel-head h3{margin:0;font-size:1.05rem;}
.col-panel-head p{margin:3px 0 0;}
.col-hide{margin:2px 0 12px;}
.col-home-list{display:flex;flex-direction:column;gap:6px;}
.col-home-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);}
.col-home-row.disabled{opacity:.5;}
#col-home-preview.active{background:var(--selected);border-color:var(--purple);color:var(--purple);}
.col-preview-area{display:flex;flex-direction:column;gap:18px;}
.col-home-list[hidden],.col-preview-area[hidden],.col-hide[hidden]{display:none;}
.col-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.col-preview-title{font-size:.95rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.col-preview-nav{display:flex;gap:6px;flex:none;}
.col-preview-nav button{width:30px;height:30px;padding:0;line-height:1;font-size:1.1rem;}
.col-preview-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;}
.col-preview-strip::-webkit-scrollbar{display:none;}
.col-poster{flex:0 0 118px;width:118px;margin:0;scroll-snap-align:start;}
.col-poster img,.col-poster-fallback{width:118px;height:177px;border-radius:9px;object-fit:cover;background:var(--selected);border:1px solid var(--border);display:block;}
.col-poster-fallback{display:grid;place-items:center;color:var(--selected-ink);font-size:2rem;font-weight:700;}
.col-poster figcaption{margin-top:6px;font-size:.78rem;line-height:1.25;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.col-preview-strip.covers .col-poster{flex:0 0 256px;width:256px;}
.col-preview-strip.covers .col-poster img,.col-preview-strip.covers .col-poster-fallback{width:256px;height:144px;}
.col-home-grip{flex:none;color:var(--text-muted);font-size:.9rem;}
.col-home-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.col-home-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;}
.col-home-actions{display:flex;align-items:center;gap:4px;flex:none;}
.col-home-actions button{min-width:30px;padding:4px 7px;}
.col-switch{position:relative;display:inline-flex;width:38px;height:22px;cursor:pointer;}
.col-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.col-switch span{flex:1;border-radius:22px;background:var(--button);border:1px solid var(--border-strong);transition:background .15s;}
.col-switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text-muted);transition:transform .15s,background .15s;}
.col-switch input:checked+span{background:color-mix(in srgb,var(--purple) 45%,transparent);border-color:var(--purple);}
.col-switch input:checked+span::after{transform:translateX(16px);background:#fff;}
.col-collections{display:flex;flex-direction:column;gap:10px;}
.col-card{border:1px solid var(--border);border-radius:11px;background:var(--surface);overflow:hidden;}
.col-card>summary{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;list-style:none;}
.col-card>summary::-webkit-details-marker{display:none;}
.col-card-title{font-weight:650;flex:none;}
.col-card-meta{flex:1;color:var(--text-muted);font-size:.78rem;}
.col-card-move{display:flex;gap:4px;}
.col-card-move button{min-width:30px;padding:3px 7px;}
.col-card-body{padding:0 13px 13px;border-top:1px solid var(--border);}
.col-card-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.col-folders{display:flex;flex-direction:column;gap:8px;}
.col-folder{border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb,var(--surface) 90%,transparent);}
.col-folder-head{display:flex;align-items:center;gap:10px;padding:8px 10px;flex-wrap:wrap;}
.col-folder-head>strong{flex:none;}
.col-folder-head .muted{flex:1;font-size:.76rem;}
.col-folder-actions{display:flex;gap:4px;flex-wrap:wrap;}
.col-folder-actions button{min-width:30px;padding:3px 7px;}
.col-sources{display:flex;flex-direction:column;gap:5px;padding:0 10px 10px;}
.col-source{display:flex;align-items:center;gap:9px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);}
.col-source-tag{flex:none;font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:12px;background:var(--selected);color:var(--selected-ink);font-weight:700;}
.col-source-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;}
.col-source-actions{display:flex;gap:3px;flex:none;}
.col-source-actions button{min-width:28px;padding:2px 6px;}
.col-src-list{width:100%;}
.col-note{margin:6px 0 0;font-size:.76rem;color:var(--purple-soft);}
.col-warn{margin:10px 0 4px;padding:11px 14px;border:2px solid #f59e0b;border-radius:9px;background:color-mix(in srgb,#f59e0b 18%,transparent);color:#fff3d6;font-size:.85rem;font-weight:600;line-height:1.45;animation:col-warn-flash 1.1s ease-in-out infinite;}
:root[data-theme="light"] .col-warn{color:#7a4a00;}
@keyframes col-warn-flash{0%,100%{border-color:#f59e0b;box-shadow:0 0 0 0 rgba(245,158,11,.55);}50%{border-color:#ffd166;box-shadow:0 0 14px 3px rgba(245,158,11,.65);}}
@media (prefers-reduced-motion:reduce){.col-warn{animation:none;}}
.copy-direction{margin:2px 0 10px;font-weight:650;color:var(--purple-soft);}
.copy-warning{margin:6px 0 12px;padding:10px 13px;border:2px solid #f59e0b;border-radius:9px;background:color-mix(in srgb,#f59e0b 16%,transparent);color:#fff3d6;font-size:.85rem;font-weight:600;line-height:1.45;}
:root[data-theme="light"] .copy-warning{color:#7a4a00;}

/* Lecture en cours (statistiques) — style d'origine + état, release et débit */
.stats-now-playing {margin-bottom:18px;padding:16px;overflow:hidden;}
.stats-now-playing-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-5px -5px 14px;padding:11px 12px;border-bottom:1px solid var(--border);border-radius:9px 9px 4px 4px;background:color-mix(in srgb,var(--panel) 48%,transparent);backdrop-filter:blur(11px) saturate(1.12);-webkit-backdrop-filter:blur(11px) saturate(1.12);}
.stats-now-playing-heading h2,.stats-now-playing-heading p {margin:0;}
.stats-now-playing-heading h2 {font-size:.95rem;text-transform:uppercase;letter-spacing:.035em;}
.stats-now-playing-heading p {margin-top:4px;font-size:.72rem;}
.stats-now-playing-heading small {color:var(--text-muted);font-size:.72rem;text-align:right;font-variant-numeric:tabular-nums;}
.stats-now-playing .empty-inline {margin:0;}
/* At most 3 tiles per row (each column ≥ a third of the row), never narrower than
   320px (fewer columns instead), and capped at 520px wide via the grid width;
   extra tiles wrap onto the next rows. */
.stats-now-playing-grid {--np-gap:14px;--np-max:520px;display:grid;gap:var(--np-gap);max-width:calc(3 * var(--np-max) + 2 * var(--np-gap));grid-template-columns:repeat(auto-fill,minmax(max(min(100%,320px),calc((100% - 2 * var(--np-gap)) / 3)),1fr));}
.stats-now-playing-grid:empty {display:none;}
.stats-now-playing-item {position:relative;isolation:isolate;min-height:190px;overflow:hidden;border:1px solid var(--border-strong);border-radius:11px;background:#17191d;color:#f8fafc;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.16);transition:opacity .3s;}
.stats-now-playing-item.is-ended {opacity:.62;}
.stats-now-playing-item>.stats-card-bg {position:absolute;z-index:-2;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;filter:blur(9px) saturate(1.15);opacity:.64;}
.stats-now-playing-overlay {position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(8,10,15,.93),rgba(8,10,15,.7));}
.stats-now-playing-content {display:grid;grid-template-columns:104px minmax(0,1fr);gap:17px;height:100%;padding:14px;}
.stats-now-playing-poster {width:104px;height:156px;display:grid;place-items:center;align-self:center;object-fit:cover;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.08);color:#dbeafe;font-size:1.5rem;box-shadow:0 9px 22px rgba(0,0,0,.3);}
.stats-now-playing-info {align-self:center;min-width:0;}
.stats-now-playing-top {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
.stats-now-playing-profile {display:flex;align-items:center;gap:8px;min-width:0;color:#d9e3f4;font-size:.72rem;font-weight:650;}
.stats-now-playing-profile>span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-now-playing-profile img,.stats-now-playing-profile>span:first-child {width:29px;height:29px;display:grid;place-items:center;flex:none;overflow:hidden;object-fit:cover;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.1);}
.np-state {flex:none;padding:3px 9px;border-radius:999px;font-size:.66rem;font-weight:650;white-space:nowrap;}
.np-state>span {font-size:.6rem;margin-right:2px;}
.np-playing {background:rgba(16,185,129,.18);color:#6ee7b7;border:1px solid rgba(110,231,183,.3);}
.np-paused {background:rgba(245,158,11,.18);color:#fcd34d;border:1px solid rgba(252,211,77,.3);}
.np-stopped {background:rgba(148,163,184,.16);color:#cbd5e1;border:1px solid rgba(203,213,225,.25);}
.np-completed {background:rgba(56,189,248,.16);color:#7dd3fc;border:1px solid rgba(125,211,252,.3);}
.stats-now-playing-info h3 {margin:0;overflow:hidden;font-size:1.05rem;text-overflow:ellipsis;white-space:nowrap;}
.np-sub {margin:4px 0 8px;color:#c4cbd5;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.np-addon {display:inline-flex;align-items:center;gap:5px;vertical-align:bottom;}
.np-addon img {width:15px;height:15px;flex:none;object-fit:contain;border-radius:3px;}
.np-release {margin-bottom:7px;overflow:hidden;color:#9fb0c6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap;}
.np-badges {display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.np-badges span {padding:1px 6px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:rgba(255,255,255,.09);color:#dbe4f0;font-size:.62rem;font-weight:650;}
.np-bar {height:7px;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.16);}
.np-bar i {display:block;height:100%;width:0;border-radius:10px;background:#38bdf8;transition:width .9s linear;}
.stats-now-playing-times {display:flex;justify-content:space-between;margin-top:5px;color:#c4cbd5;font-size:.66rem;font-variant-numeric:tabular-nums;}
.np-bw {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);color:#c4cbd5;font-size:.66rem;font-variant-numeric:tabular-nums;}
.np-bw b {color:#f8fafc;font-weight:650;}
.np-bw svg {flex:none;width:64px;height:16px;overflow:visible;}
.np-bw polyline {fill:none;stroke:#38bdf8;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
:root[data-theme="light"] .stats-now-playing-item {background:#fbfaff;color:var(--ink);border-color:#d8d1e5;}
:root[data-theme="light"] .stats-now-playing-overlay {background:linear-gradient(90deg,rgba(251,250,255,.92),rgba(251,250,255,.72));}
:root[data-theme="light"] .stats-now-playing-profile,:root[data-theme="light"] .np-sub,:root[data-theme="light"] .stats-now-playing-times,:root[data-theme="light"] .np-bw,:root[data-theme="light"] .np-release {color:var(--text-muted);}
:root[data-theme="light"] .np-bw b {color:var(--ink);}
:root[data-theme="light"] .np-badges span {background:rgba(37,34,52,.06);border-color:rgba(37,34,52,.14);color:var(--ink);}
:root[data-theme="light"] .np-bar {background:rgba(37,34,52,.12);}
:root[data-theme="light"] .np-playing {color:#047857;}
:root[data-theme="light"] .np-paused {color:#92400e;}
:root[data-theme="light"] .np-stopped {color:#475569;}
:root[data-theme="light"] .np-completed {color:#0369a1;}
@media(max-width:520px){.stats-now-playing-content{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:11px}.stats-now-playing-poster{width:76px;height:114px}.stats-now-playing-item{min-height:142px}}

/* Sauvegardes : un bloc par compte, une ligne par profil */
.bk-account {margin-bottom:12px;padding:12px 18px;}
.bk-account-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.bk-account.open .bk-account-head {padding-bottom:12px;border-bottom:1px solid var(--border);}
.bk-account-toggle {display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 260px;padding:4px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:none;}
.bk-account-toggle:hover,.bk-account-toggle:focus,.bk-account-toggle:active {background:none;box-shadow:none;transform:none;}
.bk-account-toggle:focus-visible {outline:2px solid var(--purple-soft,#9b7bff);outline-offset:4px;border-radius:6px;}
.bk-account-toggle:hover strong {text-decoration:underline;text-underline-offset:3px;}
.bk-account-toggle strong {font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bk-chevron {display:inline-block;width:14px;flex:none;color:var(--text-muted);font-size:1.1rem;line-height:1;transition:transform .15s;}
.bk-account.open .bk-chevron {transform:rotate(90deg);}
.bk-account-meta {font-size:.8rem;white-space:nowrap;}
.bk-account-head .actions {display:flex;gap:8px;flex-wrap:wrap;}
.bk-profiles > p {margin:12px 0 0;}
.bk-profile {display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.bk-profile:last-child {border-bottom:0;padding-bottom:0;}
.bk-profile .avatar {width:40px;height:40px;flex:none;}
.bk-profile-info {display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.bk-profile-info .muted {font-size:.8rem;}
.bk-label {margin:14px 0 6px;font-size:.8rem;}
.bk-choices {display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto;}
.bk-choice {display:flex;align-items:flex-start;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;}
.bk-choice:hover {background:color-mix(in srgb,var(--panel) 70%,transparent);}
.bk-choice input {margin-top:3px;}
.bk-all {font-weight:650;}
.bk-parts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:6px 0 4px 22px;}
.bk-parts .muted {opacity:.75;}
.bk-history {display:flex;flex-direction:column;max-height:420px;overflow:auto;}
.bk-history-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);}
.bk-history-row .actions {display:flex;align-items:center;gap:10px;flex:none;}
@media(max-width:620px){.bk-parts{grid-template-columns:1fr}.bk-history-row{flex-direction:column;align-items:flex-start}}