:root {
  --navy:#061a3d;
  --blue:#58b7ff;
  --green:#19a765;
  --red:#ef3b36;
  --orange:#f59e0b;
  --purple:#7c3aed;
  --line:#e5eaf3;
  --text:#081226;
}

body {
  margin:0;
  background:#f6f8fc;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ig-page {
  max-width:1180px;
  margin:0 auto;
  padding:14px;
}

.ig-hero {
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:32px;
  background:linear-gradient(135deg,#031633,#061f4e);
  color:white;
  border-radius:16px;
  padding:34px 40px;
  box-shadow:0 20px 45px rgba(6,26,61,.18);
}

.ig-kicker {
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  font-size:24px;
}

.ig-hero h1 {
  margin:12px 0;
  font-size:52px;
  line-height:1;
}

.ig-url {
  font-size:25px;
  font-weight:800;
  margin:18px 0;
}

.ig-hero p {
  font-size:22px;
  line-height:1.45;
  margin:0;
}

.ig-workspace {
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:22px 26px;
}

.ig-workspace div {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  font-size:20px;
}

.ig-workspace div:last-child {
  border-bottom:0;
}

.ig-workspace b {
  color:#7bc9ff;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.ig-score-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:18px 6px;
}

.ig-score-card,
.ig-panel {
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.ig-score-card {
  text-align:center;
  padding:20px;
}

.ig-score-card h3 {
  margin:0 0 12px;
  font-size:22px;
}

.ig-score-card { --ring: var(--green); }
.ig-score-card.warn { --ring: var(--orange); }
.ig-score-card.bad { --ring: var(--red); }

.ig-ring {
  width:120px;
  height:120px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
}

.ig-ring::before {
  content:"";
  position:absolute;
}

.ig-ring span {
  width:88px;
  height:88px;
  border-radius:50%;
  background:white;
  display:grid;
  place-items:center;
  font-size:42px;
  font-weight:900;
  color:var(--ring);
}

.ig-score-card strong {
  color:var(--ring);
  font-size:18px;
}

.ig-main-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr .95fr;
  gap:14px;
}

.ig-panel {
  padding:18px;
}

.ig-panel h2 {
  margin:0 0 14px;
  font-size:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#1d2d50;
}

.ig-check {
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:8px;
  font-size:17px;
}

.ig-check-icon {
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px solid currentColor;
  font-weight:900;
}

.ig-check.pass { color:#061226; }
.ig-check.pass .ig-check-icon,
.ig-check.pass strong { color:var(--green); }

.ig-check.fail .ig-check-icon,
.ig-check.fail strong { color:var(--red); }

.ig-check strong {
  border-radius:999px;
  padding:7px 13px;
  background:currentColor;
  color:white !important;
  font-size:13px;
}

.ig-check.pass strong {
  background:#dff8ea;
  color:var(--green) !important;
}

.ig-metric {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px;
  border-radius:14px;
  border:1px solid #f0caca;
  margin-bottom:14px;
  background:#fff8f8;
  font-size:20px;
}

.ig-platform-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.ig-platform-grid div {
  border-radius:16px;
  border:1px solid #bee8cd;
  background:#effaf3;
  padding:18px;
  font-size:18px;
  font-weight:800;
}

.ig-platform-grid b {
  display:inline-block;
  margin-top:10px;
  color:var(--green);
  background:#dff8ea;
  border-radius:999px;
  padding:7px 10px;
  font-size:13px;
}

.ig-ai-score {
  width:100px;
  height:100px;
  border-radius:50%;
  border:8px solid var(--red);
  display:grid;
  place-items:center;
  margin-bottom:16px;
  color:var(--red);
  font-size:36px;
  font-weight:900;
}

.ig-ai-score b {
  font-size:12px;
  margin-top:-22px;
}

.ig-feed {
  background:var(--navy);
  color:white;
  border-radius:16px;
  padding:18px;
  margin-top:16px;
  line-height:1.6;
}

.ig-bottom-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.ig-take {
  display:grid;
  grid-template-columns:54px 140px 1fr;
  gap:10px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:14px 0;
}

.ig-rec {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:12px;
  margin-bottom:12px;
  line-height:1.45;
}

.ig-rec b {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--red);
  color:white;
  display:grid;
  place-items:center;
}

.ig-rec:nth-child(2) b { background:var(--orange); }
.ig-rec:nth-child(3) b { background:var(--green); }
.ig-rec:nth-child(4) b { background:#2563eb; }

.ig-summary {
  margin-top:16px;
  background:linear-gradient(135deg,#031633,#062661);
  color:white;
  border-radius:16px;
  padding:24px 36px;
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  align-items:center;
  font-size:18px;
}

.ig-summary div {
  font-size:38px;
}

.ig-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin:22px 0;
}

.ig-actions button,
#generate-infographic-btn {
  border:0;
  background:#061f4e;
  color:white;
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
}

.ig-floating-btn {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
}

@media print {
  .no-print { display:none !important; }
  body { background:white; }
  .ig-page { max-width:none; }
}

/* Print infographic reorder mode */
.ig-reorder-note {
  margin: 18px 0 6px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #eef6ff;
  border: 1px dashed #60a5fa;
  color: #0f2a4a;
  font-weight: 800;
  text-align: center;
}

.ig-draggable {
  cursor: grab;
}

.ig-draggable:active {
  cursor: grabbing;
}

.ig-dragging {
  opacity: 0.48;
  outline: 3px dashed #60a5fa;
  outline-offset: 4px;
}

@media print {
  .ig-reorder-note {
    display: none !important;
  }

  .ig-draggable {
    cursor: default;
  }
}

/* Generated report timestamp enhancement */
.ig-hero-meta div strong{
  display:block;
  margin-top:6px;
  font-size:1.05rem;
  letter-spacing:.02em;
}

.ig-hero-meta div span{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  opacity:.82;
}

.ig-hero-meta{
  backdrop-filter: blur(10px);
}


/* Generated report timestamp enhancement */
.ig-hero-meta div strong{
  display:block;
  margin-top:6px;
  font-size:1.05rem;
  letter-spacing:.02em;
}

.ig-hero-meta div span{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  opacity:.82;
}

.ig-hero-meta{
  backdrop-filter: blur(10px);
}


/* Generated report date/time cards */
.ig-generated-workspace {
  position: relative;
  overflow: hidden;
}

.ig-generated-workspace::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(88,183,255,.16), transparent 45%),
    radial-gradient(circle at bottom left, rgba(124,58,237,.12), transparent 45%);
  pointer-events: none;
}

.ig-generated-workspace > div {
  position: relative;
}

.ig-generated-card span {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .02em;
}

.ig-generated-card b {
  color: #7bc9ff;
}


/* Generated report timestamp card */
.ig-generated-workspace {
  position: relative;
  overflow: hidden;
}

.ig-generated-workspace::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(88,183,255,.18), transparent 46%),
    radial-gradient(circle at bottom left, rgba(124,58,237,.13), transparent 46%);
  pointer-events: none;
}

.ig-generated-workspace > div {
  position: relative;
}

.ig-generated-card span {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .02em;
}

.ig-generated-card b {
  color: #7bc9ff;
}