/* Tableau des dépôts : lisible de loin sur un écran de bureau, et correct sur téléphone. */
:root { --bg: #0b0f14; --panel: #121821; --panel2: #18202b; --line: #243040; --text: #e6edf3; --muted: #8b98a8; --brand: #19E3D2; --ok: #3fb950;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
#board { padding: clamp(16px, 2.5vw, 40px); display: grid; gap: clamp(16px, 2vw, 28px); font-size: clamp(14px, 1.15vw, 22px); }
header { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.6em; margin-right: auto; }
.dot { width: .7em; height: .7em; border-radius: 50%; background: var(--brand); }
.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tabs button { background: transparent; color: var(--muted); border: 0; padding: .45em .9em; font: inherit; cursor: pointer; }
.tabs button.on { background: var(--panel2); color: var(--text); }
.totals { display: flex; gap: 12px; }
.totals div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .5em .9em; min-width: 7em; }
.totals span { display: block; color: var(--muted); font-size: .75em; }
.totals b { font-size: 1.4em; font-variant-numeric: tabular-nums; }
main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
section { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(14px, 1.5vw, 24px); }
h2 { margin: 0 0 .7em; font-size: 1.05em; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
ol.ranking, ul.latest { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.ranking li { display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 1em; align-items: center; padding: .55em .7em; border-radius: 10px; background: var(--panel2); }
.ranking .rank { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--bg); font-weight: 800; font-variant-numeric: tabular-nums; }
.ranking li.r1 .rank { background: #b8860b; color: #1a1300; } .ranking li.r2 .rank { background: #8a96a3; color: #0b0f14; } .ranking li.r3 .rank { background: #8c5a2b; color: #fff; }
.ranking li.r1 { box-shadow: inset 0 0 0 1px #b8860b; }
.ranking .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .count { color: var(--muted); font-size: .85em; }
.ranking .sum, .latest .amount { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ok); }
.latest li { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: .8em; align-items: center; padding: .5em .7em; border-radius: 10px; background: var(--panel2); }
.latest li.new { animation: flash 2.4s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--ok) 45%, var(--panel2)); } 100% { background: var(--panel2); } }
@media (prefers-reduced-motion: reduce) { .latest li.new { animation: none; } }
.latest .agent { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest .time { color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.tag { font-size: .7em; border: 1px solid var(--brand); color: var(--brand); border-radius: 999px; padding: .1em .6em; white-space: nowrap; }
.flag { width: 1.6em; height: 1.2em; border-radius: 3px; object-fit: cover; }
.flag.none { display: inline-block; background: var(--line); }
.empty { color: var(--muted); padding: 1em; text-align: center; grid-template-columns: 1fr !important; }
.empty.big { font-size: 1.4em; padding: 3em; }
.status { color: #d29922; font-size: .85em; min-height: 1em; }
@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
  .totals { width: 100%; } .totals div { flex: 1; min-width: 0; }
  .ranking .count { display: none; } .ranking li { grid-template-columns: 2.2em 1fr auto; }
  .latest li { grid-template-columns: auto 1fr auto; } .latest .time, .latest .tag { display: none; }
}