:root {
    --bg: #0f172a;
    --card: #111827;
    --table: #1f2933;
    --border: #334155;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --accent: #38bdf8;
    --green: #22c55e;
    --red: #ef4444;
    --font-weight: 200;
}

* { box-sizing: border-box; font-family: "Segoe UI", Roboto, Arial, sans-serif; }
body { margin: 0; padding: 20px; background: linear-gradient(180deg, #020617, var(--bg)); color: var(--text); }

table {
    width: 100%; max-width: 1200px; margin: 30px auto; border-collapse: collapse; background: var(--table);
    border-radius: 14px; overflow: hidden; box-shadow: 0 12px 45px rgba(0,0,0,0.45);
}

th, td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border); }

th { background: #020617; color: var(--accent); font-size: 0.95rem; }

td { color: var(--text); font-size: 0.95rem; }

.cellID { text-align: left; color: var(--text); white-space: nowrap; }

tbody tr:hover td { background: rgba(56,189,248,0.06); }

label { display: inline-block; min-width: 60px; }

button {
    padding: 6px 10px; font-size: 0.85rem; color: var(--text); background-color: var(--card);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: all 0.2s ease;
}

button:hover { background-color: var(--accent); color: #000; }

.passerelle-ok { background-color: rgba(34,197,94,0.2); color: var(--green); }
.passerelle-defaut { background-color: rgba(239,68,68,0.2); color: var(--red); }

#errorBox { background: rgba(239,68,68,0.15); border: 1px solid var(--red); color: var(--red);
    padding: 10px 14px; border-radius: 8px; margin: 10px auto; max-width: 600px; text-align: center; 
}
.hidden { display: none; }

@media (max-width:900px){
    table { font-size:0.85rem; }
    th, td { padding:8px 6px; }
    button { padding:4px 8px; font-size:0.75rem; }
}