:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #080b11;
  color: #edf2f8;
  --bg: #080b11;
  --surface: #111722;
  --surface-strong: #171f2c;
  --line: #2b3647;
  --muted: #91a0b6;
  --text: #edf2f8;
  --cyan: #54d7ef;
  --green: #48d597;
  --gold: #f1bd55;
  --red: #ff718c;
  --violet: #a58bfa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  overflow-x: hidden;
}

button, input, select { font: inherit; }

button, select, input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--text);
}

button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
input, select { padding: 8px 10px; }
input { min-width: 220px; }

[hidden] { display: none !important; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(84, 215, 239, .18), transparent 38%),
    radial-gradient(circle at 10% 90%, rgba(72, 213, 151, .09), transparent 32%),
    var(--bg);
}
.auth-card {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid #2f5264;
  border-radius: 14px;
  background: rgba(13, 18, 27, .97);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.auth-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 13px;
  background: #10251e;
  color: var(--green);
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 0 28px rgba(72, 213, 151, .15);
}
.auth-eyebrow, .panel-eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
}
.auth-submit { min-height: 46px; margin-top: 5px; }
.form-field { display: grid; gap: 6px; }
.form-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.form-field input, .form-field textarea { width: 100%; min-width: 0; }
.form-field textarea {
  min-height: 96px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
}
.inline-error {
  padding: 9px 10px;
  border: 1px solid #83394b;
  border-radius: 6px;
  background: #30171f;
  color: #ff9daf;
  font-size: 12px;
}

.app-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px clamp(14px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: #0d121b;
}
.app-header > div { min-width: 0; }
.app-header .button { flex: 0 0 auto; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-identity {
  padding: 7px 9px;
  border: 1px solid #2b6957;
  border-radius: 6px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

h1, h2, p { margin: 0; }
h1 { font-size: 23px; letter-spacing: 0; }
h2 { font-size: 18px; letter-spacing: 0; }
p { color: var(--muted); font-size: 13px; margin-top: 4px; }

.header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  display: flex;
  gap: 0;
  padding: 0 clamp(14px, 3vw, 34px);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: #0d121b;
}

.tab {
  min-width: max-content;
  min-height: 46px;
  padding: 0 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.ranking-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d121b;
}

.ranking-subtab {
  padding: 8px 14px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.ranking-subtab.active {
  border-color: #238ca2;
  background: #123943;
  color: #adf2ff;
}

.ranked-leagues { display: grid; gap: 16px; }
.ranked-league { border-left: 3px solid #66758a; }
.ranked-league-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #111927;
}
.ranked-league-heading h3 { font-size: 15px; }
.ranked-league-heading span { color: var(--muted); font-size: 12px; }
.ranked-league-dart-legend { border-left-color: #e4c761; }
.ranked-league-master { border-left-color: #b980ff; }
.ranked-league-diamond { border-left-color: #64d7ff; }
.ranked-league-gold { border-left-color: #d7a52f; }
.ranked-league-silver { border-left-color: #aeb9c7; }
.ranked-league-bronze { border-left-color: #b57a4b; }
.ranked-division { color: var(--text); font-weight: 700; }
.ranked-positive { color: #6ee7a8; }
.ranked-negative { color: #ff879d; }

main {
  width: min(1480px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 20px clamp(14px, 3vw, 34px) 44px;
}

.view { display: none; }
.view.active { display: block; }

.message {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #735c27;
  border-radius: 6px;
  background: #2f2716;
  color: #ffe19a;
}
.message.error { border-color: #83394b; background: #30171f; color: #ff9daf; }

.button {
  padding: 8px 12px;
  font-weight: 700;
}
.button:hover, .link-button:hover { border-color: #586981; }
.button-primary { border-color: #238ca2; background: #123943; color: #adf2ff; }
.button-warning { border-color: #886a26; background: #382d15; color: #ffd780; }
.button-danger { border-color: #8e3850; background: #3a1822; color: #ff9db1; }
.button-small { min-height: 30px; padding: 5px 8px; font-size: 12px; }

.maintenance-panel {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.4fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #5b4b28;
  border-radius: 8px;
  background: linear-gradient(120deg, #211d14, var(--surface));
}
.maintenance-panel.is-active {
  border-color: #a04459;
  background: linear-gradient(120deg, #321720, var(--surface));
  box-shadow: inset 3px 0 0 var(--red);
}

.dartcast-panel {
  margin-top: 14px;
  border-color: #6b4db5;
  background: linear-gradient(135deg, rgba(27, 19, 49, .96), rgba(10, 31, 37, .94));
}
.version-policy-panel {
  border-color: #238ca2;
  background: linear-gradient(135deg, rgba(13, 43, 50, .96), rgba(18, 24, 37, .94));
}
.ai-policy-panel {
  border-color: #6b4db5;
  background: linear-gradient(135deg, rgba(32, 22, 58, .96), rgba(13, 38, 45, .94));
}
.app-news-panel {
  border-color: #7b4bc4;
  background: linear-gradient(135deg, rgba(43, 24, 66, .96), rgba(10, 31, 37, .94));
}
.app-news-panel.is-active {
  border-color: #d54ba0;
  background: linear-gradient(135deg, rgba(61, 24, 56, .96), rgba(12, 35, 42, .94));
  box-shadow: inset 3px 0 0 #e256b2;
}
.app-news-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.version-policy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
}
.maintenance-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.maintenance-message {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.maintenance-message input { width: 100%; text-transform: none; }

.pricing-form { display: grid; gap: 20px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
}
.pricing-card {
  display: grid;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(231, 190, 74, .32);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(34, 29, 17, .92), rgba(15, 24, 31, .96));
}
.pricing-card-heading { display: flex; align-items: center; gap: 14px; }
.pricing-card-heading h3 { margin: 0 0 4px; font-size: 20px; }
.pricing-card-heading p { margin: 0; color: var(--muted); }
.pricing-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(231, 190, 74, .58);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(231, 190, 74, .10);
  font-weight: 900;
}
.pricing-card label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.pricing-input { display: flex; align-items: center; gap: 10px; }
.pricing-input input { width: 120px; min-width: 0; font-size: 22px; font-weight: 900; }
.pricing-input strong { color: var(--gold); }
.pricing-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pricing-actions p { margin: 0; color: var(--muted); }

.link-button {
  min-height: 32px;
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--cyan);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.metric {
  min-height: 88px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { margin-top: 5px; font-size: 25px; font-weight: 800; }
.metric-detail { margin-top: 3px; color: var(--muted); font-size: 11px; }
.metric-cyan .metric-value { color: var(--cyan); }
.metric-green .metric-value { color: var(--green); }
.metric-gold .metric-value { color: var(--gold); }
.metric-red .metric-value { color: var(--red); }
.metric-violet .metric-value { color: var(--violet); }
/* Metrique portant un identifiant plutot qu'un nombre : le corps standard la
   ferait deborder de sa carte ou la casserait sur trois lignes. */
.metric-text .metric-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.live-matches-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  margin-bottom: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(110, 231, 168, .55);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(18, 72, 54, .72), rgba(14, 22, 34, .96));
  box-shadow: inset 3px 0 0 var(--green), 0 10px 28px rgba(0, 0, 0, .18);
}
.live-matches-panel.is-busy {
  border-color: rgba(255, 135, 157, .7);
  background: linear-gradient(120deg, rgba(91, 30, 48, .82), rgba(19, 22, 34, .97));
  box-shadow: inset 3px 0 0 var(--red), 0 10px 28px rgba(0, 0, 0, .22);
}
.live-matches-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(110, 231, 168, .8);
}
.live-matches-panel.is-busy .live-matches-indicator {
  background: var(--red);
  box-shadow: 0 0 18px rgba(255, 135, 157, .8);
}
.live-matches-copy strong {
  display: block;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live-matches-copy span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.live-matches-value {
  min-width: 76px;
  color: var(--green);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.live-matches-panel.is-busy .live-matches-value { color: var(--red); }

.statistics-section { margin: 18px 0; }
.statistics-section > h3 { margin: 0 0 10px; color: var(--text); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.statistics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 20px;
}
.statistics-card { min-width: 0; }
.statistics-card .section-heading { margin-bottom: 12px; }
.statistics-mini-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.distribution-list { display: grid; gap: 9px; margin-top: 14px; }
.distribution-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 12px; }
.distribution-row span { color: var(--muted); font-variant-numeric: tabular-nums; }
.distribution-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.distribution-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #8067ff); box-shadow: 0 0 12px rgba(45, 221, 255, .32); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .statistics-grid { grid-template-columns: 1fr; }
}
.split > * { min-width: 0; }

.surface {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.surface-line {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.surface-line:last-child { border-bottom: 0; }
.surface-line span { color: var(--muted); }
.surface-line b {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.pub-table-cleanup-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}
.pub-table-cleanup-form p { margin: 5px 0 0; }
.pub-table-cleanup-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.pub-table-cleanup-form input { width: 100%; }

.section-heading {
  min-height: 40px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  margin-bottom: 9px;
}

.toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.toolbar-controls, .actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.actions { margin: 8px 0 10px; }

.profile-metrics { margin-top: 2px; }
.profile-filters {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(5, minmax(145px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
}
.profile-filters label {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.profile-filters label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.profile-filters input,
.profile-filters select { width: 100%; }

@media (max-width: 1280px) {
  .profile-filters { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}

@media (max-width: 760px) {
  .profile-filters { grid-template-columns: 1fr; }
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th, td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #151d29; }

.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.status-active, .status-finished, .status-read { color: var(--green); border-color: #267a5a; }
.status-waiting, .status-new, .status-pending { color: var(--gold); border-color: #7d6328; }
.status-cancelled, .status-error { color: var(--red); border-color: #84384b; }
.status-paused, .status-archived { color: var(--violet); border-color: #5c4b94; }
.status-blocked { color: var(--red); border-color: #84384b; background: #30171f; }
.status-actioned { color: var(--green); border-color: #267a5a; }
.status-reviewed { color: var(--violet); border-color: #5c4b94; }
.status-dismissed { color: var(--muted); border-color: var(--line); }
.status-muted { color: var(--muted); }

.count-badge {
  min-width: 19px;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--red);
  color: #19080c;
  font-size: 10px;
  text-align: center;
}

.rank {
  display: inline-grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-weight: 800;
}
.rank-1 { color: #231b08; border-color: var(--gold); background: var(--gold); }
.rank-2 { color: #12171d; border-color: #b6c1ce; background: #b6c1ce; }
.rank-3 { color: #25140c; border-color: #d68a5d; background: #d68a5d; }

.player-name { font-weight: 750; }
.profile-identity { display: flex; align-items: center; gap: 9px; min-width: 165px; }
.profile-avatar-link {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: var(--surface);
}
.profile-avatar-preview { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-avatar-link:hover { box-shadow: 0 0 12px rgba(47, 220, 255, .35); }
.profile-avatar-empty {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
}
.muted { color: var(--muted); }
.numeric { font-variant-numeric: tabular-nums; }

.network-cell { min-width: 210px; }
.network-country {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.country-flag { font-size: 18px; line-height: 1; }
.ip-address {
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.network-seen { margin-top: 3px; font-size: 11px; }
.network-history { margin-top: 7px; }
.network-history summary {
  color: var(--cyan);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.network-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.network-history-row:first-of-type { margin-top: 6px; }
.network-history-row time { color: var(--muted); white-space: nowrap; }

.popularity {
  min-width: 150px;
}
.bar-track {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #263140;
}
.bar-fill { height: 100%; background: var(--cyan); }
.bar-value { margin-top: 4px; color: var(--muted); font-size: 11px; }

.chart-surface { margin-bottom: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; }
.legend-throws { background: var(--cyan); }
.legend-games { background: var(--gold); }
.legend-cyan { background: var(--cyan); }
.legend-green { background: var(--green); }
.legend-gold { background: var(--gold); }
.legend-red { background: var(--red); }
.legend-violet { background: var(--violet); }

.usage-chart {
  height: 250px;
  display: grid;
  grid-template-columns: repeat(15, minmax(12px, 1fr));
  align-items: end;
  gap: 4px;
  margin-top: 18px;
  padding-top: 10px;
  border-bottom: 1px solid var(--line);
}
.day-bars {
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2px;
}
.day-bar {
  width: min(8px, 45%);
  min-height: 1px;
  border-radius: 2px 2px 0 0;
}
.day-bar-throws { background: var(--cyan); }
.day-bar-games { background: var(--gold); }
.compact-table { margin-top: 12px; }
.ai-usage-surface { margin-top: 18px; }
.ai-usage-metrics {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 14px;
}
.ai-usage-table-wrap { margin-top: 14px; }
.ai-usage-cell { min-width: 132px; }
.ai-usage-cell b { color: var(--text); font-size: 16px; }
.usage-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.performance-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.performance-toolbar { align-items: center; }
.performance-metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.performance-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.performance-chart-card {
  min-height: 310px;
  overflow: hidden;
}
.performance-chart-wide { grid-column: 1 / -1; }
.chart-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.performance-chart {
  width: 100%;
  height: 230px;
  margin-top: 12px;
  color: var(--muted);
}
.performance-chart svg { width: 100%; height: 100%; overflow: visible; }
.performance-chart .chart-grid-line { stroke: #263140; stroke-width: 1; }
.performance-chart .chart-axis-label {
  fill: var(--muted);
  font-size: 10px;
  font-family: Inter, system-ui, sans-serif;
}
.performance-chart .chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.performance-chart .chart-area { opacity: .09; }
.performance-chart .chart-last-dot { stroke: var(--surface); stroke-width: 2; }
.performance-chart .chart-empty {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.performance-details { margin-top: 12px; }
.performance-details h2 { margin-bottom: 8px; }
.performance-details .surface-line b { font-variant-numeric: tabular-nums; }
.performance-recent-errors { margin-top: 12px; }
.recent-error-heading {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.recent-error-heading h2 { margin-bottom: 4px; }
.recent-error-heading p { color: var(--muted); font-size: 12px; }
.performance-error-table table { min-width: 650px; }
.performance-error-table th,
.performance-error-table td { padding: 8px 9px; font-size: 12px; }
.http-error-route {
  color: var(--cyan);
  overflow-wrap: anywhere;
  white-space: normal;
}

.feedback-list {
  display: grid;
  gap: 9px;
}
.feedback-item {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(260px, 2fr) minmax(180px, .8fr);
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.feedback-item.feedback-new { border-left-color: var(--gold); }
.feedback-item.feedback-read { border-left-color: var(--green); }
.feedback-item.feedback-archived { border-left-color: var(--violet); opacity: .78; }
.feedback-author, .feedback-meta { display: grid; align-content: start; gap: 5px; }
.feedback-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.category { color: var(--cyan); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.reports-list { display: grid; gap: 9px; }
.report-item {
  display: grid;
  grid-template-columns: minmax(165px, .75fr) minmax(300px, 2fr) minmax(170px, .8fr);
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.report-item.report-new { border-left-color: var(--red); }
.report-item.report-reviewed { border-left-color: var(--violet); }
.report-item.report-actioned { border-left-color: var(--green); }
.report-item.report-dismissed { opacity: .76; }
.report-party, .report-content, .report-actions { display: grid; align-content: start; gap: 6px; }
.report-target { padding: 8px 0; }
.report-actions { justify-items: stretch; }
.resolution-note {
  margin-top: 5px;
  padding: 8px;
  border-left: 2px solid var(--green);
  background: #10251d;
  color: #a9e8cb;
  font-size: 12px;
}
/*
 * Les actions d'une ligne tiennent sur une ligne.
 *
 * Un bouton coupe en deux au milieu d'un tableau se lit mal et decale toute la
 * rangee. La colonne prend la largeur qu'il faut et ne renvoie jamais a la
 * ligne ; le tableau, lui, defile horizontalement s'il le faut.
 */
.table-actions { display: flex; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
.table-actions .button { white-space: nowrap; }
.catalog-price-stepper { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.catalog-price-stepper strong { min-width: 54px; text-align: center; }
.catalog-price-stepper .button { min-width: 30px; padding-inline: 8px; }
.dartcoin-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dartcoin-bulk-toolbar span { color: var(--muted); font-weight: 800; }
.selection-cell { width: 30px; padding-inline: 6px; text-align: center; }
.selection-cell input { width: 13px; height: 13px; margin: 0; accent-color: var(--cyan); }
.table-sort {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.table-sort:hover { color: var(--cyan); }
.sort-indicator { display: inline-block; min-width: 12px; color: var(--cyan); font-size: 10px; }
table thead th.sortable-column {
  cursor: pointer;
  user-select: none;
  transition: color .16s ease, background-color .16s ease;
}
table thead th.sortable-column:hover,
table thead th.sortable-column:focus-visible { color: var(--cyan); background: rgba(45, 221, 255, .06); outline: none; }
table thead th.sortable-column::after {
  content: "\2195";
  display: inline-block;
  min-width: 12px;
  margin-left: 6px;
  color: var(--cyan);
  font-size: 10px;
}
table thead th.sortable-column[aria-sort="ascending"]::after { content: "\25B2"; }
table thead th.sortable-column[aria-sort="descending"]::after { content: "\25BC"; }
.dartcoin-detail {
  width: min(1380px, 100%);
  max-height: calc(100vh - 36px);
  margin: 0;
  overflow: auto;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .65);
}
.dartcoin-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dartcoin-balance { margin: 10px 0 18px; color: var(--gold); font-size: 30px; font-weight: 900; }
.dartcoin-adjustment-form {
  display: grid;
  grid-template-columns: minmax(150px, .5fr) minmax(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}
.dartcoin-adjustment-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.dartcoin-filters { justify-content: flex-start; margin-bottom: 12px; }
.dartcoin-credit { color: var(--green); font-weight: 900; }
.dartcoin-debit { color: var(--red); font-weight: 900; }
.empty {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  text-align: center;
}

.stack-form { display: grid; gap: 12px; margin-top: 16px; }
.form-hint { margin: -4px 0 2px; font-size: 11px; }
.admin-settings-grid { align-items: start; }
.audit-list {
  max-height: 390px;
  display: grid;
  gap: 7px;
  margin-top: 14px;
  overflow: auto;
}
.audit-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0c121b;
  font-size: 12px;
}
.audit-entry time { color: var(--muted); white-space: nowrap; font-size: 11px; }

.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 5, 9, .78);
  backdrop-filter: blur(5px);
}
.confirmation-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid #3c5166;
  border-radius: 13px;
  background: #0e151f;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .65);
}
/* Une fiche qui porte un gabarit de cible et ses reglages a besoin de large. */
.confirmation-panel.is-wide { width: min(880px, 100%); }
.panel-tone { height: 4px; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.confirmation-panel.is-danger { border-color: #824052; }
.confirmation-panel.is-danger .panel-tone { background: linear-gradient(90deg, #ff526f, var(--gold)); }
.confirmation-panel.is-danger .panel-eyebrow { color: var(--red); }
.panel-content { padding: 23px; }
.panel-content h2 { margin-top: 8px; font-size: 22px; }
.panel-content > p { margin-top: 9px; line-height: 1.5; }
.panel-fields { display: grid; gap: 12px; }
#panelFields { display: grid; gap: 12px; }
.confirmation-token {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #6c4851;
  border-radius: 4px;
  background: #28151b;
  color: #ffadc0;
  font-family: Consolas, monospace;
  font-weight: 800;
}
#panelMessage {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Fiche de consultation : colonnes alignees a l'espace, donc chasse fixe. */
.panel-message-sheet {
  max-height: 46vh;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: auto;
  background: var(--surface);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.panel-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.panel-actions .button { min-width: 108px; }

.email-error {
  max-width: 330px;
  color: var(--red);
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .maintenance-panel { grid-template-columns: 1fr; align-items: stretch; }
  .version-policy-fields { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-controls > * { flex: 1; }
  .feedback-item { grid-template-columns: 1fr; gap: 9px; }
  .report-item { grid-template-columns: 1fr; gap: 9px; }
  .performance-chart-grid { grid-template-columns: 1fr; }
  .performance-chart-wide { grid-column: auto; }
  .dartcoin-adjustment-form { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 620px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .header-actions { justify-content: flex-start; }
  .app-header .button { min-width: 44px; padding-inline: 9px; }
  main { padding-top: 14px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-height: 82px; padding: 11px; }
  .metric-value { font-size: 22px; }
  .section-heading { align-items: flex-start; }
  .usage-chart { height: 190px; gap: 2px; }
  .performance-chart-card { min-height: 280px; }
  .performance-chart { height: 200px; }
  .chart-card-heading { align-items: flex-start; flex-direction: column; }
  input { min-width: 100%; }
  .pub-table-cleanup-form { grid-template-columns: 1fr; }
}

/* Apercu du rendu d'un article : l'image reelle, servie par la meme route que
   celle qu'Android telechargera. Fond damier pour que la transparence se voie -
   un sprite sans canal alpha se remarque alors immediatement. */
.catalog-asset-preview {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #262d42;
  background-color: #11151f;
  background-image:
    linear-gradient(45deg, #1a2030 25%, transparent 25%),
    linear-gradient(-45deg, #1a2030 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a2030 75%),
    linear-gradient(-45deg, transparent 75%, #1a2030 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

/* Cadence IA DartCast : un nombre, son unite et son bouton sur une ligne.
   Le champ reste etroit - c'est un entier a un ou deux chiffres, pas un texte. */
.dartcast-interval-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dartcast-interval-row input {
  width: 84px;
  flex: 0 0 auto;
}
.dartcast-interval-unit {
  color: #8e97b3;
  font-size: 13px;
}

/* Selecteur de point d'impact.
   L'image est montree sur un damier pour que la transparence se voie, et le
   marqueur indique le pixel qui viendra se planter sur la cible. */
.anchor-picker {
  position: relative;
  display: block;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #262d42;
  background-color: #11151f;
  background-image:
    linear-gradient(45deg, #1a2030 25%, transparent 25%),
    linear-gradient(-45deg, #1a2030 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a2030 75%),
    linear-gradient(-45deg, transparent 75%, #1a2030 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  cursor: crosshair;
  overflow: hidden;
  /* De la hauteur pour qu'une image pivotee ait ou tourner. Le point d'impact
     est le pivot : il reste toujours visible, meme quand un objet tres allonge
     deborde aux angles extremes. */
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Le cadre borne l'image et ne subit jamais de transformation : c'est lui qui
   sert de repere au clic et au marqueur. L'image tourne a l'interieur, autour
   du point d'impact, comme en jeu.
   Il est volontairement plus etroit que le cadre exterieur pour qu'une image
   pivotee ait de la place et ne soit pas rognee des le premier degre. */
.anchor-frame {
  position: relative;
  width: min(74%, 300px);
  flex: 0 0 auto;
}
.anchor-picker img {
  display: block;
  width: 100%;
  height: auto;
}
.anchor-picker img[hidden] {
  display: none;
}
.anchor-picker .empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
}
.anchor-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid #53d8ff;
  box-shadow: 0 0 0 2px rgba(5, 8, 15, 0.8);
  pointer-events: none;
}
.anchor-marker::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #ff5470;
}
.anchor-fields {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.anchor-fields label {
  flex: 1;
}
/* La valeur courante se lit dans l'etiquette du curseur : on regle a l'oeil
   sur l'image, le chiffre confirme. */
.anchor-fields b {
  color: #53d8ff;
  font-variant-numeric: tabular-nums;
}
.anchor-fields input[type="range"] {
  width: 100%;
  accent-color: #53d8ff;
}

/* ---------------------------------------------------------------------------
   Calibration d'un habillage de cible.

   Le cadre EST la boite de la cible dans le jeu. Le gabarit y est fixe, aux
   rayons du moteur ; l'image glisse dessous jusqu'a coincider. C'est la regle
   du produit rendue physique : la geometrie ne s'adapte jamais a une image.
   --------------------------------------------------------------------------- */
.board-stage {
  position: relative;
  border-radius: 10px;
  border: 1px solid #262d42;
  background-color: #11151f;
  background-image:
    linear-gradient(45deg, #1a2030 25%, transparent 25%),
    linear-gradient(-45deg, #1a2030 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a2030 75%),
    linear-gradient(-45deg, transparent 75%, #1a2030 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
/* Carre : c'est la boite dans laquelle le jeu dessine la cible. */
.board-viewport {
  position: relative;
  width: min(88%, 360px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
}
.board-viewport:active {
  cursor: grabbing;
}
.board-stage img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.board-stage img[hidden] {
  display: none;
}
.board-stage .empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
}
/* Le gabarit se superpose au cadre, jamais a l'image : il ne bouge pas. */
.board-template {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.board-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.board-band {
  fill: none;
}
.board-band-double {
  stroke: rgba(255, 212, 59, 0.34);
}
.board-band-triple {
  stroke: rgba(83, 216, 255, 0.30);
}
.board-band-bull {
  stroke: rgba(45, 212, 132, 0.34);
}
.board-band-bull-inner {
  stroke: rgba(255, 122, 176, 0.40);
}
.board-ring {
  fill: none;
  stroke: rgba(83, 216, 255, 0.9);
  stroke-width: 0.35;
}
/* Le bord exterieur des doubles est le repere a caler : tout le reste en decoule. */
.board-ring-outer {
  stroke: #ffd43b;
  stroke-width: 0.7;
}
.board-ring-bull {
  stroke: rgba(255, 122, 176, 0.9);
}
.board-spoke {
  stroke: rgba(83, 216, 255, 0.5);
  stroke-width: 0.22;
}
.board-cross {
  fill: none;
  stroke: #ffd43b;
  stroke-width: 0.45;
}
/* Le choix du mode de calibration : deux gestes, deux outils. */
.board-modes {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.board-modes .button.is-active {
  border-color: #238ca2;
  background: #123943;
  color: #adf2ff;
}
/* Les reperes se dessinent dans le repere de l'image, pas dans celui du cadre. */
.board-marks {
  position: absolute;
  pointer-events: none;
}
.board-marks circle {
  fill: none;
  stroke: #ffd43b;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.board-marks .board-mark-center {
  fill: #ffd43b;
  stroke: none;
}
.board-steps {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}
.board-steps li.is-done {
  color: #adf2ff;
}
.board-steps li.is-current {
  color: #ffd43b;
  font-weight: 700;
}
.board-viewport.is-marking {
  cursor: crosshair;
}
/*
 * La loupe : un repere se pose au pixel.
 *
 * A l'echelle du cadre, le fil d'un triple fait moins d'un pixel d'ecran. La
 * croix marque l'endroit exact ou le clic tombera.
 */
.board-loupe {
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 2px solid #ffd43b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  background-repeat: no-repeat;
  background-color: #11151f;
  pointer-events: none;
  z-index: 3;
}
.board-loupe::before,
.board-loupe::after {
  content: "";
  position: absolute;
  background: rgba(255, 212, 59, .85);
}
.board-loupe::before {
  left: 50%;
  top: 40%;
  width: 1px;
  height: 20%;
  transform: translateX(-50%);
}
.board-loupe::after {
  top: 50%;
  left: 40%;
  height: 1px;
  width: 20%;
  transform: translateY(-50%);
}

/* Les deux cadrages courants, a portee de clic. */
.board-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.board-presets > span {
  color: #7c8aa5;
  font-size: 12px;
}

/* Notifications Matchmaking : formulaire propre a l'onglet. */
.nudge-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #238ca2;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(13, 43, 50, .96), rgba(18, 24, 37, .94));
}
.nudge-panel.is-active { box-shadow: inset 3px 0 0 var(--green); }
.nudge-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.nudge-panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.nudge-switches { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nudge-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.nudge-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  opacity: 0;
}
.nudge-switch-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 19px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  transition: background .18s, border-color .18s;
}
.nudge-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .18s, background .18s;
}
.nudge-switch input:checked + .nudge-switch-track { border-color: var(--green); background: rgba(72, 213, 151, .22); }
.nudge-switch input:checked + .nudge-switch-track::after { transform: translateX(15px); background: var(--green); }
.nudge-switch input:focus-visible + .nudge-switch-track { outline: 2px solid var(--cyan); outline-offset: 2px; }
.nudge-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.nudge-group {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 11, 17, .45);
}
.nudge-group legend {
  padding: 0 6px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nudge-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  color: var(--text);
  font-size: 12px;
}
.nudge-field small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.nudge-input { display: inline-flex; align-items: center; gap: 6px; }
.nudge-input input { width: 78px; min-width: 0; text-align: right; }
.nudge-input em { width: 24px; color: var(--muted); font-size: 11px; font-style: normal; }
@media (max-width: 600px) {
  .nudge-panel-head { flex-direction: column; }
  .nudge-panel-head .button { width: 100%; }
}

/* Catalogue : rubriques et rubrique encore vide. */
.catalog-subtabs { margin-top: 18px; flex-wrap: wrap; max-width: 100%; }
.catalog-empty {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 34px 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(13, 18, 27, .6);
  text-align: center;
}
.catalog-empty strong { color: var(--text); font-size: 15px; }
.catalog-empty span { max-width: 460px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Packs de cible : scene fond + cible + FX, identique a l'ordre du jeu. */
.skin-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 45%, #102331, #050a10 72%);
}
.skin-scene-background,
.skin-scene-fx,
.skin-scene video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.skin-scene-background,
.skin-scene video { object-fit: cover; }
.skin-scene-fx { pointer-events: none; }
.skin-scene-board {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}
.skin-scene-board img { width: 100%; height: 100%; object-fit: contain; }
.skin-scene-board-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  border: 2px dashed rgba(145, 160, 182, .35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.skin-scene-raw .skin-scene-board-placeholder { width: 46%; }
.skin-scene-status {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 11, 17, .8);
  color: var(--gold);
  font-size: 11px;
}
.skin-pack {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.4fr);
  gap: 16px;
  align-items: start;
}
.skin-pack-controls { display: grid; gap: 14px; }
.skin-pack-block,
.skin-pack-preview { display: grid; gap: 6px; font-size: 12px; }
.skin-pack-block input[type="file"],
.skin-pack-new-fx input { min-width: 0; width: 100%; }
.skin-pack-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.skin-pack-check input { min-width: 0; width: auto; }
.skin-pack-fx-row { display: flex; gap: 8px; align-items: center; }
.skin-pack-fx-row select { flex: 1; min-width: 0; }
.skin-pack-new-fx {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.fx-file-field { display: grid; gap: 8px; }
.fx-file-field input[type="file"] { min-width: 0; }
.fx-file-field .skin-scene { max-width: 520px; }
.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.fx-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.fx-card.is-disabled .skin-scene { opacity: .45; }
.fx-card-body { display: grid; gap: 5px; font-size: 12px; }
.fx-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (max-width: 900px) {
  .skin-pack { grid-template-columns: 1fr; }
}
.skin-pack-title { display: flex; align-items: baseline; gap: 8px; }
.skin-pack-title b { color: var(--text); font-size: 13px; }
.table-wrap > .fx-grid { padding: 12px; }
.fx-tool-status {
  display: grid;
  gap: 3px;
  margin: 12px 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 11, 17, .5);
  font-size: 12px;
}
.fx-tool-status span { color: var(--muted); overflow-wrap: anywhere; }
.fx-tool-status.is-ready { border-color: rgba(72, 213, 151, .45); }
.fx-tool-status.is-ready b { color: var(--green); }
.fx-tool-status.is-missing { border-color: rgba(255, 113, 140, .5); }
.fx-tool-status.is-missing b { color: var(--red); }

/* Packs de sons : les sons de l'application face a leurs remplacants. */
.sound-pack { display: grid; gap: 14px; }
.sound-pack-import {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(8, 11, 17, .45);
  font-size: 12px;
}
.sound-pack-import input[type="file"] { min-width: 0; width: 100%; }
.sound-unmatched { display: grid; gap: 6px; }
.sound-orphan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: center; }
.sound-orphan span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold); }
.sound-orphan select { min-width: 0; }
.sound-pack-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sound-pack-toolbar input[type="search"] { flex: 1; min-width: 200px; }
.sound-group { display: grid; gap: 4px; }
.sound-group h4 {
  margin: 6px 0 2px;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sound-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12px;
}
.sound-row.is-changed { border-color: rgba(72, 213, 151, .45); background: rgba(72, 213, 151, .06); }
.sound-row-label { display: grid; gap: 1px; min-width: 0; }
.sound-row-label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-row-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.sound-row-state.is-replaced { color: var(--green); }
.sound-row-state.is-pending { color: var(--gold); }
.sound-row-state.is-removed { color: var(--red); }
.sound-play.is-playing { border-color: var(--cyan); color: var(--cyan); }
.sound-pick { cursor: pointer; }
@media (max-width: 760px) {
  .sound-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sound-row-state { grid-column: 1 / -1; }
}