:root { --bg:#0f172a; --fg:#e2e8f0; --card:#111827; --accent:#10b981; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,Segoe UI,Roboto,Ubuntu}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #1f2937}
header h1{margin:0;font-size:20px}
header nav{display:flex;flex-wrap:wrap}
nav a{color:var(--fg);text-decoration:none;margin-left:16px;opacity:.9}
nav a:hover{opacity:1;color:var(--accent)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding:24px}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 1px 0 #000}
label{display:block;margin:8px 0}
input,button{padding:8px 12px;border-radius:8px;border:1px solid #334155;background:#0b1220;color:var(--fg)}
button{cursor:pointer;background:var(--accent);border-color:transparent;color:#052e1f}
button:hover{filter:brightness(1.05)}
.error{color:#ef4444}
.list{padding:0;margin:0}
.list li{list-style:none;padding:4px 0;border-bottom:1px solid #1f2937}
main{padding:24px}
footer{opacity:.6;padding:16px 24px;border-top:1px solid #1f2937}

/* Affichage des boules */
.balls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ball{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#0b1220;border:1px solid #334155}
.ball.star{background:#f59e0b;color:#1f2937;border-color:#92400e}
.ball.chance{background:#10b981;color:#052e1f;border-color:#065f46}
.actions{margin-top:8px}

/* Champs dans la ligne des boules */
.balls input[type="number"]{width:64px}

/* Métadonnées (date) et boutons de suppression façon lien */
.meta{opacity:.75;font-size:.875rem;margin-left:.5rem}
.linklike{background:transparent;border:0;color:var(--accent);padding:0;cursor:pointer}
.linklike:hover{text-decoration:underline}

/* Responsive mobile */
@media (max-width: 600px){
  body{font-size:15px}
  header{flex-direction:column;align-items:flex-start;gap:8px}
  header nav{gap:12px}
  nav a{margin-left:0}
  main{padding:12px}
  .grid{grid-template-columns:1fr;padding:12px}
  .ball{width:32px;height:32px;font-size:14px}
  input,button{padding:12px 14px}
  .list li{padding:8px 0}
  .meta{display:block;margin:.25rem 0 0}
}


