:root{--bg:#14161a;--card:#1f232a;--tx:#eee;--ac:#f5b301;--mut:#8a93a0}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:15px system-ui,sans-serif}
[hidden]{display:none!important}
button,input,select{font:inherit;border-radius:8px;border:1px solid #333;background:var(--card);color:var(--tx);padding:8px 12px}
button{cursor:pointer;background:var(--ac);color:#111;border:0;font-weight:600}button.alt{background:#333;color:var(--tx)}
#auth{display:grid;place-items:center;min-height:100vh}#authForm{display:flex;flex-direction:column;gap:10px;width:300px}
.row{display:flex;gap:8px}.row button{flex:1}.err{color:#ff6b6b;min-height:1em}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card);flex-wrap:wrap}
nav{display:flex;gap:6px}nav button{background:#333;color:var(--tx)}nav button.on{background:var(--ac);color:#111}
main{padding:16px;max-width:1200px;margin:auto}
.bar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.bar input{flex:1;min-width:160px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{background:var(--card);border-radius:12px;padding:10px;text-align:center;cursor:pointer;border:2px solid transparent;position:relative}
.card.on{border-color:#3ecf6e}.card.on::after{content:"✓";position:absolute;top:6px;right:8px;color:#3ecf6e;font-weight:900}
.card img,.ph{width:100%;aspect-ratio:1;object-fit:contain}.ph{display:grid;place-items:center;font-size:48px}
.card span{display:block;font-size:13px;margin-top:6px}
.tr{display:flex;margin-bottom:6px;background:var(--card);border-radius:8px;overflow:hidden}
.lbl{width:56px;display:grid;place-items:center;font-size:24px;font-weight:900;color:#111;flex:none}
.zone{flex:1;min-height:84px;display:flex;flex-wrap:wrap;gap:6px;padding:6px;align-content:flex-start}
#pool{background:var(--card);border-radius:8px}
.mini{width:72px;text-align:center;font-size:10px;cursor:grab;border-radius:6px;padding:2px}.mini.sel{outline:2px solid var(--ac)}
.mini img,.mini .ph{width:72px;height:72px;font-size:30px}.hint{color:var(--mut)}
.zone.over{background:#2c3340}
table{width:100%;border-collapse:collapse}td,th{padding:6px;border-bottom:1px solid #2a2f37;text-align:left}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}
.stat{background:var(--card);padding:12px;border-radius:10px}.stat b{font-size:24px;display:block;color:var(--ac)}
.same{color:#3ecf6e}.diff{color:#ff9f43}

/* Habillage connexion + logo */
#auth{background:radial-gradient(circle at 50% 0%,#2a2410 0%,var(--bg) 60%)}
#authForm{background:var(--card);padding:28px 24px;border-radius:16px;border:1px solid #2a2f37;box-shadow:0 10px 40px #0008;width:340px;max-width:92vw}
.logo{width:100%;height:auto;margin-bottom:4px}
.tag{margin:0 0 6px;text-align:center;color:var(--mut)}
.brand{display:flex;align-items:center;gap:8px;font-size:17px}
.mini-logo{height:30px;width:auto}
#authForm{padding-bottom:20px}
.err{min-height:0;margin:0}
.err:empty{display:none}

/* Fondu des bords du logo dans la carte */
.logo{
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 52%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 82% at 50% 52%,#000 55%,transparent 100%);
  clip-path:inset(4px 0 0 0);
  margin-bottom:0;
}
.tag{margin-top:-6px}