:root {
  --navy: #081C33; --gold: #C0893D; --blue: #00AEFF; --deep: #004274; --pale: #EDF9FF;
  --ink: #14202e; --muted: #5d6b7a; --line: #dfe5ec; --bg: #f5f7fa; --card: #fff;
  --ok: #1d7a46; --ok-bg: #e6f4ec; --warn: #9a5b00; --warn-bg: #fff4e0; --err: #b3261e; --err-bg: #fdecea;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 15px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-weight: 500; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
a { color: var(--deep); }
.loading { padding: 40px; color: var(--muted); }

header.top { background: var(--navy); color: #fff; display: flex; align-items: center; gap: 24px; padding: 10px 24px; flex-wrap: wrap; }
header.top img { height: 34px; display: block; }
header.top nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
header.top nav a { color: #cfd8e3; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 500; }
header.top nav a.active, header.top nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
header.top .who { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #cfd8e3; }
header.top button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.banner { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.banner.err { background: var(--err-bg); color: var(--err); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.ok { background: var(--ok-bg); color: var(--ok); }

button, .btn { font: inherit; font-weight: 500; border-radius: 8px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; display: inline-block; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
button.approve { background: var(--ok); color: #fff; border-color: var(--ok); }
button.danger { color: var(--err); border-color: #f0c4c0; }
input, select, textarea { font: inherit; padding: 9px 12px; border: 1px solid #c9d2dc; border-radius: 8px; width: 100%; background: #fff; color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-weight: 500; margin: 14px 0 6px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 0; }
label.check input { width: auto; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; background: #eef1f5; color: var(--muted); }
.pill.run { background: #e3f4fd; color: #00669a; }
.pill.wait { background: var(--warn-bg); color: var(--warn); }
.pill.todo { background: #fbf3e6; color: #8a5a17; border: 1px solid var(--gold); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.err { background: var(--err-bg); color: var(--err); }

.missions { display: grid; gap: 10px; }
.mission { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; text-decoration: none; color: inherit; }
.mission:hover { border-color: var(--blue); }
.mission .code { font-weight: 700; color: var(--deep); }

.login { max-width: 380px; margin: 10vh auto; }
.login img { width: 240px; display: block; margin: 0 auto 24px; }

.slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.slide canvas { width: 100%; aspect-ratio: 4/5; display: block; border-radius: 6px; background: #e8edf2; }
.slide .meta { font-size: 13px; margin-top: 6px; }
.slide .meta b { display: block; }

.texts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.net { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; }
.net pre { white-space: pre-wrap; font: inherit; margin: 10px 0; }
.net .credit { color: var(--muted); }
.net .tags { color: var(--deep); }
.net textarea { min-height: 220px; }
.count.bad { color: var(--err); font-weight: 500; }

ul.checks { list-style: none; padding: 0; margin: 0; }
ul.checks li { padding: 6px 0 6px 26px; position: relative; border-bottom: 1px solid #f0f2f5; }
ul.checks li::before { position: absolute; left: 0; font-weight: 700; }
ul.checks.ok li::before { content: "✓"; color: var(--ok); }
ul.checks.warn li::before { content: "!"; color: var(--warn); left: 6px; }

.timeline { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.timeline li { padding: 6px 0; border-bottom: 1px solid #f0f2f5; display: grid; grid-template-columns: 50px 70px 1fr; gap: 8px; }
.timeline .alerte { color: var(--err); }
.agent-tag { font-weight: 500; color: var(--deep); }

.actions { position: sticky; bottom: 0; background: #fff; border-top: 2px solid var(--gold); padding: 14px 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -4px 16px rgba(8,28,51,.08); }
.panel { background: var(--pale); border-radius: var(--radius); padding: 16px; margin-top: 12px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--muted); font-size: 13px; }
.bar { height: 10px; background: #e8edf2; border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--deep); }
.working { display: flex; gap: 12px; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

@media (max-width: 640px) {
  header.top { padding: 10px 16px; gap: 10px; }
  .mission { grid-template-columns: 1fr; gap: 4px; }
  .kv { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 44px 1fr; }
  .timeline li .agent-tag { grid-column: 2; }
  .timeline li span:last-child { grid-column: 1 / -1; }
}