.observe-page{display:flex;flex-direction:column;gap:16px}
.observe-top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:linear-gradient(135deg,#1F3864,#2E4F8E);color:#fff;border-radius:18px;padding:20px 24px}
.observe-top h1{color:#fff;font-size:38px;margin:0}
.observe-top .code{font-size:52px;letter-spacing:6px;font-weight:800;color:#E89C2C;line-height:1}
.observe-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:16px;align-items:start}
.factory-canvas{display:block;width:100%;max-height:320px;border-radius:12px}
.factory-legend{display:flex;gap:14px;flex-wrap:wrap;padding:8px 4px 2px;font-size:12px;color:#6B7480}
.factory-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle}
.observe-leader{display:flex;flex-direction:column;gap:8px}
.observe-leader .rowline{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-weight:700}
.observe-leader .rowline .score{color:var(--navy2)}
.event-banner{background:var(--amber-soft);border:1px solid #efcf9f;border-left:6px solid var(--amber);border-radius:12px;padding:14px 16px}
.event-banner h3{margin:0 0 4px}
.debrief-hero{background:linear-gradient(135deg,#1F3864,#2E4F8E);color:#fff;border-radius:18px;padding:24px}
.debrief-hero h1{color:#fff;font-size:36px;margin:0 0 6px}
.debrief-hero p{color:#DCE6F6;max-width:900px}
.debrief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.debrief-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.debrief-card h3{display:flex;justify-content:space-between;gap:10px;align-items:center}
.archetype{border-left:5px solid var(--amber);background:var(--card);border-radius:0 12px 12px 0;padding:11px 13px;margin:8px 0}
.archetype b{color:var(--navy)}
.cost-line{display:grid;grid-template-columns:1fr auto;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.cost-line:last-child{border-bottom:0;font-weight:800;color:var(--navy)}
.debrief-table td,.debrief-table th{font-size:13px}
@media(max-width:1000px){.observe-grid{grid-template-columns:1fr}.debrief-grid{grid-template-columns:1fr}.observe-top{grid-template-columns:1fr}.observe-top .code{font-size:38px}}