body { font-family: Arial, sans-serif; margin:0; background:#f6f7fb; }
.topbar { display:flex; justify-content:space-between; padding:12px 16px; background:#111827; color:#fff; }
.topbar a { color:#fff; margin-left:12px; text-decoration:none; opacity:.9; }
.container { max-width: 900px; margin: 20px auto; padding: 0 14px; }
.container.small { max-width: 420px; }
h1,h2 { margin: 10px 0; }
.card { background:#fff; border-radius:10px; padding:14px; box-shadow:0 1px 8px rgba(0,0,0,.06); margin:12px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 12px; margin-top: 14px; }
.tile { display:block; background:#fff; padding:18px; border-radius:12px; text-decoration:none; color:#111; box-shadow:0 1px 8px rgba(0,0,0,.06); }
label { display:block; margin-top:10px; font-size: 13px; }
input { width:100%; padding:10px; margin-top:5px; border:1px solid #d1d5db; border-radius:8px; }
button { margin-top: 12px; width:100%; padding:10px; border:none; border-radius:10px; background:#111827; color:#fff; cursor:pointer; }
.error { background:#fee2e2; color:#991b1b; padding:10px; border-radius:10px; margin:10px 0; }
select { width:100%; padding:10px; margin-top:5px; border:1px solid #d1d5db; border-radius:8px; }
button { color: white; }

/* table quick style (optional) */
.diagram-table { width: 100%; border-collapse: collapse; }
.diagram-table th, .diagram-table td { padding: 10px; border-top: 1px solid #e5e7eb; text-align: left; }
.diagram-table thead th { border-top: none; background: #f9fafb; }

/* linky button */
.iid-linkbtn {
  background: transparent;
  border: none;
  color: #2563eb;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-size: 14px;
}

/* modal */
.iid-modal {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.iid-modal-content {
  background: white;
  width: min(900px, 92vw);
  max-height: 90vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.iid-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
}
.iid-modal-title { font-weight: 600; }
.iid-modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
}
.iid-modal-body { padding: 12px; overflow: auto; max-height: 82vh; }
.iid-modal-image { width: 100%; height: auto; display: block; }

.hybrid-warning {
  color: #b30000;
  font-weight: 700;
}

/* === IIDInsight Logo === */

.iid-logo {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  font-size: 22px;
  letter-spacing: .5px;
}

.iid-logo .iid {
  font-weight: 800;
  color: #ffffff; /* IID in white */
}

.iid-logo .insight {
  font-weight: 600;
  color: #1DA1F2; /* Electric blue */
  margin-left: 2px;
}

/* Optional slight italic motion */
.iid-logo .insight {
  font-style: italic;
}