:root{
  --bg:#eef0f4; --panel:#ffffff; --ink:#1b2233; --muted:#5d6678; --line:#d5d9e2;
  --accent:#e0521f; --accent-ink:#fff; --row:#f6f7fa; --danger:#b3261e; --good:#1a9c5b;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#12151d; --panel:#1b202b; --ink:#e8ebf2; --muted:#98a1b3; --line:#2d3444; --row:#202633; --danger:#ff8a80; --good:#4fd08e;
}}
:root[data-theme="dark"]{ --bg:#12151d; --panel:#1b202b; --ink:#e8ebf2; --muted:#98a1b3; --line:#2d3444; --row:#202633; --danger:#ff8a80; --good:#4fd08e; }
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif}
button{font:inherit;cursor:pointer;color:inherit}
input,select{width:100%;font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:6px;padding:6px}
input:hover,select:hover{border-color:var(--line)}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.wrap{max-width:1000px;margin:0 auto;padding:24px 16px 64px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
h1{font:700 2rem/1.1 "Space Grotesk",system-ui,sans-serif;margin:0}
h1{font-family:"Press Start 2P","Space Grotesk",monospace;font-size:1.35rem;line-height:1.4;letter-spacing:.02em;text-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 45%,transparent)}
.grand{font-family:"Space Grotesk",system-ui,sans-serif;text-align:right}
.grand b{display:block;line-height:1;color:var(--accent);font-family:"Press Start 2P","Space Grotesk",monospace;font-size:1.5rem;letter-spacing:-.02em}
.grand span{color:var(--muted);font-size:.9rem}
.tools{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.tool{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:1rem}
.tool[aria-pressed="false"]{opacity:.45}

.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:3px;margin-bottom:12px}
.seg button{border:0;background:none;color:var(--ink);padding:7px 16px;border-radius:999px;font:500 .95rem "Space Grotesk",sans-serif}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.tab{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 12px;border-radius:999px;cursor:pointer;font:500 .9rem "Space Grotesk",sans-serif;transition:transform .15s}
.tab small{color:var(--muted);margin-left:6px}
.tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tab[aria-selected="true"] small{color:var(--accent-ink);opacity:.85}
.tab:active,.btn:active,.tool:active{transform:scale(.94)}

.badge{display:inline-block;min-width:34px;padding:2px 6px;margin-right:8px;border-radius:5px;color:#fff;font:700 .72rem "Space Grotesk",sans-serif;text-align:center;vertical-align:middle}
.logo{height:22px;max-width:70px;object-fit:contain;vertical-align:middle;margin-right:8px}
.bar h2 .badge{font-size:.85rem;padding:3px 8px}
.bar h2 .logo{height:30px;max-width:110px}
.cover .logo{height:34px;max-width:100px;margin:0}

.panel{background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-top:4px solid var(--accent);border-radius:10px;overflow:hidden}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--line)}
.bar h2{margin:0;font:700 1.2rem "Space Grotesk",sans-serif;display:inline}
.bar .sub{color:var(--muted)}
.bar .filters{display:flex;gap:8px;flex-wrap:wrap}
.bar .filters input,.bar .filters select{border-color:var(--line);background:var(--panel);width:auto}
#search{width:180px}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:900px}
th{text-align:left;font:500 .85rem "Space Grotesk",sans-serif;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
td{padding:6px 10px;border-bottom:1px solid var(--line)}
tr:nth-child(even) td{background:var(--row)}
tbody tr{cursor:pointer}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nmw{display:flex;align-items:center;gap:10px}
.nmbtn{border:0;background:none;padding:0;text-align:left;font-weight:500}
.thumb{flex:none;width:42px;height:42px;border-radius:6px;overflow:hidden;background:var(--row);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
.dim{color:var(--muted)}
.empty{padding:32px;text-align:center;color:var(--muted)}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 12px;border-radius:6px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.note{color:var(--muted);font-size:.85rem;margin-top:16px}
.alert{background:var(--danger);color:#fff;border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:.9rem;display:flex;gap:12px;align-items:center;justify-content:space-between}
.alert button{border:1px solid #fff;background:none;color:#fff;border-radius:6px;padding:4px 10px}

body.crt::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
body.crt .wrap{text-shadow:0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes swap{from{opacity:.2;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}}
#rows tr,.card,.kpi,.brow{animation:pop .35s both;animation-delay:calc(var(--i,0) * 25ms)}
.panel.swap,#stats.swap{animation:swap .3s both}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:14px}
.card{position:relative;background:var(--row);border:2px solid transparent;border-radius:10px;overflow:hidden;transition:transform .15s,border-color .15s;display:flex;flex-direction:column;cursor:pointer}
.card:hover{transform:translateY(-4px) rotate(-.4deg);border-color:var(--accent)}
.cover{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,var(--panel)),var(--panel));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;padding:10px;color:var(--ink);width:100%}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .ph{font:.62rem/1.6 "Press Start 2P",monospace;text-align:center}
.card .meta{padding:8px 10px}
.card .nm{font-weight:500;line-height:1.25;margin-bottom:4px}
.card .pr{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:.9rem}
.card .pr b{color:var(--accent)}
.card .pr span,.card .sm{color:var(--muted);font-size:.85rem}

#stats{display:flex;flex-direction:column;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:10px;padding:14px}
.kpi small{display:block;color:var(--muted);font-size:.8rem}
.kpi b{display:block;font:1.1rem/1.6 "Press Start 2P",monospace;margin-top:6px}
.kpi em{font-style:normal;font-size:.8rem;color:var(--muted)}
.box2{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.box2 h3{margin:0 0 12px;font:700 1.05rem "Space Grotesk",sans-serif}
.brow{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center;margin:7px 0;font-size:.9rem}
.btrack{background:var(--row);border-radius:4px;height:16px;overflow:hidden}
.bfill{height:100%;border-radius:4px;transform-origin:left;animation:grow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.brow .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.toplist{margin:0;padding:0;list-style:none;counter-reset:t}
.toplist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);counter-increment:t}
.toplist li::before{content:counter(t);font:.7rem "Press Start 2P",monospace;color:var(--muted);width:26px}
.toplist li span.n{flex:1}
.toplist li b{font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal.open{display:flex}
.box{background:var(--panel);color:var(--ink);border-radius:10px;padding:18px;width:min(560px,100%);max-height:92%;overflow:auto;display:flex;flex-direction:column;gap:12px;position:relative}
.fiche{width:min(860px,100%);flex-direction:row;gap:20px;align-items:flex-start}
.fpic{flex:0 0 min(46%,340px);border-radius:8px;overflow:hidden;background:var(--row);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;min-height:200px}
.fpic img{width:100%;max-height:70vh;object-fit:contain;display:block}
.finfo{flex:1;min-width:0}
.finfo h3{margin:0 0 8px;font:700 1.3rem/1.25 "Space Grotesk",sans-serif;padding-right:36px}
.finfo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0}
.finfo dt{color:var(--muted);font:500 .8rem "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.03em;padding-top:2px}
.finfo dd{margin:0}
.finfo dd.pr{font-variant-numeric:tabular-nums;font-weight:500}
.fnav{display:flex;gap:8px;margin-top:18px}
.x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);z-index:2}

@media (max-width:680px){
  .wrap{padding:16px 12px 48px}
  h1{font-size:1rem}
  .grand b{font-size:1.1rem}
  .bar{flex-direction:column;align-items:stretch}
  .bar .filters{flex-direction:column}
  #search,.bar .filters select{width:100%!important}
  table{min-width:0}
  thead{display:none}
  tbody,tr,td{display:block}
  tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:12px;border-bottom:1px solid var(--line);position:relative}
  tr:nth-child(even) td{background:transparent}
  tr:nth-child(even){background:var(--row)}
  td{border:0;padding:0}
  td::before{content:attr(data-label);display:block;font:500 .72rem "Space Grotesk",sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
  td.c-name{grid-column:1/-1}
  td.c-name::before,td.empty::before{content:none}
  td.c-wide{grid-column:1/-1}
  td.empty{grid-column:1/-1}
  td.num,th.num{text-align:left}
  .fiche{flex-direction:column;align-items:stretch}
  .fpic{flex:none}
  .fpic img{max-height:50vh}
}