/* ===========================================================
   Monito v3 — Les Foldingueurs de l'Alliance Francophone
   Thème carte, sombre, responsive.
   =========================================================== */

:root{
	--bg:#0a1120;
	--surface:#111b30;
	--surface-2:#16223c;
	--border:#22304c;
	--border-soft:#1a2740;
	--text:#e7edf7;
	--text-dim:#8b98b3;
	--text-faint:#5c6a87;
	--accent:#33d6c0;
	--accent-2:#7c9bff;
	--good:#33d6c0;
	--warn:#f2ab3d;
	--danger:#ef5b6b;
	--mono:'IBM Plex Mono', ui-monospace, monospace;
	--sans:'Inter', system-ui, sans-serif;
	--display:'Space Grotesk', system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html, body{
	margin:0;
	padding:0;
	background:
		radial-gradient(circle at 12% -10%, rgba(51,214,192,0.14), transparent 45%),
		radial-gradient(circle at 100% 0%, rgba(124,155,255,0.10), transparent 40%),
		var(--bg);
	color:var(--text);
	font-family:var(--sans);
	font-size:14px;
}

img{ max-width:100%; }

.page-wrap{
	max-width:1180px;
	margin:0 auto;
	padding:24px 16px 60px;
	display:flex;
	flex-direction:column;
	gap:20px;
}

/* ---------- header ---------- */
.site-header{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:16px;
	flex-wrap:wrap;
}
.brand-card{
	background:#ffffff;
	border-radius:14px;
	padding:10px 18px;
	display:inline-flex;
	align-items:center;
	box-shadow:0 10px 30px -14px rgba(0,0,0,0.5);
}
.brand-card img{ display:block; height:56px; width:auto; }

.live-chip{
	display:flex;
	align-items:center;
	gap:8px;
	font-family:var(--mono);
	font-size:12px;
	color:var(--text-dim);
	background:var(--surface);
	border:1px solid var(--border-soft);
	border-radius:999px;
	padding:7px 14px;
	white-space:nowrap;
}
.live-dot{
	width:7px; height:7px; border-radius:50%;
	background:var(--good);
	box-shadow:0 0 0 3px rgba(51,214,192,0.18);
	animation:pulse 2.2s ease-in-out infinite;
	flex-shrink:0;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- stat tiles ---------- */
.stat-tiles{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:12px;
}
@media (max-width:760px){ .stat-tiles{ grid-template-columns:repeat(2, 1fr); } }

.stat-tile{
	background:var(--surface);
	border:1px solid var(--border-soft);
	border-radius:14px;
	padding:16px 18px;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.stat-tile .label{
	font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint);
}
.stat-tile .value{
	font-family:var(--mono); font-size:21px; font-weight:600;
	font-variant-numeric:tabular-nums;
}
.stat-tile .value.value-sm{ font-size:15px; }
.stat-tile .value.accent{ color:var(--accent); }
.stat-tile .value-dim{ color:var(--text-faint); font-size:14px; }
.stat-tile .sub{ font-size:11.5px; color:var(--text-dim); }

/* ---------- user panel ---------- */
.user-panel{
	background:var(--surface);
	border:1px solid var(--border-soft);
	border-radius:16px;
	padding:18px;
	display:flex;
	flex-direction:column;
	gap:14px;
}
.user-panel-head{
	display:flex;
	align-items:center;
	gap:12px;
}
.avatar{
	width:36px; height:36px; border-radius:10px;
	background:linear-gradient(135deg, var(--accent-2), var(--accent));
	display:flex; align-items:center; justify-content:center;
	font-family:var(--display); font-weight:700; font-size:15px; color:#08111f;
	flex-shrink:0;
}
.user-name{
	font-family:var(--display); font-size:16px; font-weight:600;
}

.flux-head{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	padding-top:4px;
}
.flux-name{
	font-family:var(--display); font-weight:600; font-size:13px; color:var(--text-dim);
}
.flux-eff{ font-size:11px; }
.flux-updated{
	font-family:var(--mono); font-size:11px; color:var(--text-faint);
}

/* ---------- stream banner (flux cassé / périmé) ---------- */
.stream-banner{
	display:flex; align-items:center; gap:10px;
	background:rgba(242,171,61,0.1);
	border:1px solid rgba(242,171,61,0.3);
	color:var(--warn);
	border-radius:10px;
	padding:10px 14px;
	font-size:12.5px;
}

/* ---------- slot cards ---------- */
.slot-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
	gap:12px;
}

.slot-card{
	background:var(--surface-2);
	border:1px solid var(--border-soft);
	border-radius:14px;
	padding:14px;
	display:flex;
	flex-direction:column;
	gap:10px;
	transition:border-color .15s;
}
.slot-card:hover{ border-color:var(--border); }
.slot-card.is-active{
	border-color:rgba(51,214,192,0.35);
	box-shadow:0 0 0 1px rgba(51,214,192,0.08), 0 10px 26px -16px rgba(51,214,192,0.4);
}

.slot-card-top{
	display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.slot-name{ font-family:var(--display); font-size:14px; font-weight:600; }
.slot-proc{ font-size:11px; color:var(--text-dim); margin-top:2px; }

.pill{
	display:inline-flex; align-items:center; gap:6px;
	font-size:11px; font-weight:600;
	padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.pill-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.pill-dot.pulse{ animation:pulse 1.6s ease-in-out infinite; }
.pill-good{ background:rgba(51,214,192,0.14); color:var(--good); }
.pill-warn{ background:rgba(242,171,61,0.14); color:var(--warn); }
.pill-danger{ background:rgba(239,91,107,0.14); color:var(--danger); }
.pill-accent2{ background:rgba(124,155,255,0.14); color:var(--accent-2); }
.pill-idle{ background:rgba(139,152,179,0.14); color:var(--text-dim); }

.progress-row{ display:flex; align-items:center; gap:10px; }
.progress-track{
	flex:1; height:7px; border-radius:99px; background:var(--border); overflow:hidden;
}
.progress-fill{
	height:100%; border-radius:99px;
	background:linear-gradient(90deg, var(--accent-2), var(--accent));
	transition:width .4s ease;
}
.progress-pct{
	font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
	color:var(--text-dim); min-width:32px; text-align:right;
}

.slot-meta{
	display:grid; grid-template-columns:1fr 1fr; gap:8px 12px;
}
.meta-item .k{
	display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
}
.meta-item .v{
	display:block; font-family:var(--mono); font-size:12px; margin-top:2px; font-variant-numeric:tabular-nums;
	word-break:break-word;
}
.meta-item .v a{ color:var(--accent-2); text-decoration:none; }
.meta-item .v a:hover{ text-decoration:underline; }

.slot-type{
	display:inline-flex; align-items:center; gap:4px; color:var(--accent-2);
	font-family:var(--mono); font-size:11px;
}
.slot-type svg{ width:14px; height:14px; }

.slot-card-foot{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	border-top:1px dashed var(--border-soft); padding-top:10px;
}
.slot-card-foot-left, .slot-card-foot-right{ display:flex; align-items:center; gap:8px; }
.proj-tag{
	font-family:var(--mono); font-size:11px; color:var(--accent-2);
	background:rgba(124,155,255,0.1); padding:3px 8px; border-radius:6px;
}
.proj-tag a{ color:inherit; text-decoration:none; }
.proj-tag a:hover{ text-decoration:underline; }
.proj-tag-empty{ color:var(--text-faint); background:transparent; padding:0; }
.slot-ver{ font-family:var(--mono); font-size:11px; color:var(--text-faint); }
.log-link{ display:inline-flex; opacity:.85; }
.log-link:hover{ opacity:1; }

/* ---------- bottom panels ---------- */
.bottom-panels{
	display:grid;
	grid-template-columns:1.4fr 1fr;
	gap:14px;
}
@media (max-width:700px){ .bottom-panels{ grid-template-columns:1fr; } }

.stats-panel, .versions-panel{
	background:var(--surface);
	border:1px solid var(--border-soft);
	border-radius:16px;
	padding:16px 18px;
}
.stats-panel h2, .versions-panel h2{
	font-family:var(--display); font-size:13px; font-weight:600;
	margin:0 0 12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em;
}

.stats-cards{ display:flex; flex-direction:column; gap:10px; }
.stat-card{
	display:flex; align-items:center; gap:12px;
	background:var(--surface-2); border:1px solid var(--border-soft);
	border-radius:12px; padding:10px 12px;
}
.stat-card img{ width:28px; height:28px; flex-shrink:0; }
.stat-card-k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); }
.stat-card-v{ font-family:var(--display); font-size:14px; font-weight:600; margin-top:1px; }
.stat-card-sub{ font-family:var(--mono); font-size:12px; color:var(--accent); margin-top:1px; }

.versions-list{ display:flex; flex-direction:column; gap:8px; }
.version-chip{
	display:flex; align-items:center; justify-content:space-between;
	background:var(--surface-2); border:1px solid var(--border-soft);
	border-radius:10px; padding:8px 12px; font-size:12.5px;
}
.version-chip b{ font-family:var(--mono); color:var(--accent-2); }

/* ---------- footer ---------- */
.site-footer{
	display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
	padding-top:6px;
}
.foot-line{
	font-family:var(--mono); font-size:11px; color:var(--text-faint);
}
.foot-logo{
	background:#ffffff; border-radius:12px; padding:6px 14px; display:inline-flex; align-items:center;
}
.foot-logo img{ display:block; height:34px; width:auto; }

::selection{ background:rgba(51,214,192,0.3); }

.user-ppd{
	margin-left:auto; font-family:var(--mono); font-size:20px; font-weight:600; color:var(--good);
	display:inline-flex; align-items:baseline; gap:8px;
}
.user-ppd .k{ font-size:11px; font-weight:400; letter-spacing:.08em; color:var(--text-faint); }

.os-badge{
	display:inline-block; vertical-align:middle; margin-left:6px; padding:1px 7px; border-radius:6px;
	font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.04em;
}
.os-windows{ background:rgba(124,155,255,0.14); color:var(--accent-2); }
.os-linux{ background:rgba(242,171,61,0.14); color:var(--warn); }
.os-mac{ background:rgba(139,152,179,0.14); color:var(--text-dim); }