*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#f1f5f9;color:#1e293b;min-height:100vh}
a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}

/* Top bar */
.topbar{background:linear-gradient(135deg,#1e3a5f,#2563eb);padding:16px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff}
.topbar h1{font-size:18px;font-weight:600}.topbar .sub{margin-left:auto;font-size:12px;opacity:.8}
.topbar a{color:#fff;font-size:12px;background:rgba(255,255,255,.15);padding:5px 12px;border-radius:6px;text-decoration:none}
.topbar a:hover{background:rgba(255,255,255,.25)}
.topbar .user{font-size:12px;opacity:.7;margin-right:8px}

/* Container */
.container{max-width:960px;margin:20px auto;padding:0 16px}

/* Cards */
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.card h2{font-size:16px;color:#1e3a5f;margin-bottom:12px}

/* KPI row */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:#fff;border-radius:10px;padding:16px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.06);border-top:3px solid #2563eb}
.kpi.green{border-color:#22c55e}.kpi.orange{border-color:#f59e0b}.kpi.red{border-color:#ef4444}.kpi.gray{border-color:#94a3b8}
.kpi .val{font-size:28px;font-weight:800;color:#1e293b}.kpi .lbl{font-size:11px;color:#64748b;margin-top:2px;text-transform:uppercase;letter-spacing:.3px}

/* Room list */
.room-list{display:flex;flex-direction:column;gap:8px}
.room-item{display:flex;align-items:center;gap:12px;background:#fff;padding:14px 16px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.05);cursor:pointer;transition:all .15s;text-decoration:none;color:inherit}
.room-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1);text-decoration:none}
.room-badge{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.room-badge.ok{background:#dcfce7;color:#16a34a}
.room-badge.warn{background:#fef3c7;color:#d97706}
.room-badge.bloquant{background:#fee2e2;color:#dc2626}
.room-badge.none{background:#f1f5f9;color:#94a3b8}
.room-info{flex:1;min-width:0}
.room-info .name{font-weight:600;font-size:15px;color:#1e293b}
.room-info .meta{font-size:12px;color:#64748b;margin-top:2px}
.room-score{font-size:14px;font-weight:700;padding:4px 12px;border-radius:20px}
.room-score.ok{background:#dcfce7;color:#16a34a}
.room-score.warn{background:#fef3c7;color:#d97706}
.room-score.bloquant{background:#fee2e2;color:#dc2626}
.room-score.none{background:#f1f5f9;color:#94a3b8}

/* Checklist */
.check-group{display:flex;flex-direction:column;gap:8px}
.check-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:#f8fafc;border-radius:10px;border:2px solid #e2e8f0;transition:all .2s;cursor:pointer}
.check-item.ok{border-color:#22c55e;background:#f0fdf4}
.check-item.ko{border-color:#ef4444;background:#fef2f2}
.check-toggle{width:36px;height:36px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:all .2s}
.check-item.ok .check-toggle{background:#22c55e;border-color:#22c55e;color:#fff}
.check-item.ko .check-toggle{background:#ef4444;border-color:#ef4444;color:#fff}
.check-body{flex:1}
.check-body .equip-name{font-weight:600;font-size:14px}
.check-body .comment-input{width:100%;margin-top:8px;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;font-family:inherit;resize:none;display:none}
.check-item.ko .comment-input{display:block}

/* Buttons */
.btn{padding:12px 24px;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}
.btn-primary:disabled{background:#94a3b8;cursor:wait}
.btn-secondary{background:#e2e8f0;color:#475569}.btn-secondary:hover{background:#cbd5e1}
.btn-danger{background:#fef2f2;color:#ef4444;border:1px solid #fecaca}.btn-danger:hover{background:#fee2e2}
.btn-block{width:100%;justify-content:center}

/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:#22c55e;color:#fff;padding:14px 24px;border-radius:10px;font-size:14px;font-weight:600;z-index:1000;box-shadow:0 4px 16px rgba(0,0,0,.15);animation:slideUp .3s}
.toast.error{background:#ef4444}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Bar chart */
.bar-chart{display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-label{width:180px;font-size:12px;color:#64748b;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;background:#f1f5f9;border-radius:4px;height:20px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:700;color:#fff;min-width:24px;transition:width .5s}

/* Table */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{background:#f1f5f9;color:#64748b;padding:8px 12px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.data-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9}
.data-table tr:hover td{background:#f8fafc}

/* Status pills */
.pill{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700}
.pill-ok{background:#dcfce7;color:#16a34a}
.pill-warn{background:#fef3c7;color:#d97706}
.pill-none{background:#f1f5f9;color:#94a3b8}

/* Loader */
.loader{text-align:center;padding:40px;color:#64748b;font-size:14px}

/* Responsive */
@media(max-width:640px){
  .topbar{padding:12px 16px}.topbar h1{font-size:16px}
  .container{padding:0 10px;margin:12px auto}
  .kpis{grid-template-columns:1fr 1fr}
  .bar-label{width:100px}
}