/* Core layout */
.ijs-wrap{ max-width: 95% !important; margin: 0 auto 28px; }
.ijs-title{ margin:0 0 10px; font-size:32px; line-height:1.2; font-weight:800; color:#6F2DA8; }
.ijs-sub{ margin:0 0 18px; color:#6c5aa1; }

.ijs-label{ display:block; font-weight:700; margin:16px 0 8px; color:#6F2DA8; }
.ijs-input{ width:100%; height:54px; border-radius:14px; border:1px solid #6F2DA8 !important; background:#FBF8FF; padding:20px 22px !important; font-size:16px; outline:0; }
.ijs-input:focus{ border-color:#C7B2F2; background:#fff; box-shadow:0 0 0 4px rgba(111,45,168,.12); }
.ijs-actions{ display:flex; gap:14px; margin-top:16px; }
.ijs-btn{ height:48px; padding:0 22px; border-radius:16px; border:0; font-weight:800; cursor:pointer; color:#fff; background:linear-gradient(90deg,#7E3AF2,#D946EF); box-shadow:0 10px 22px rgba(111,45,168,.18); }
.ijs-btn.-ghost{ background:#EFE7FB; color:#6F2DA8; box-shadow:none; }

.ijs-result{ margin-top:26px; padding-top:18px; border-top:1px solid #EEE6FA; }
.ijs-score{ display:inline-block; padding:8px 12px; border-radius:12px; font-size:14px; font-weight:800; background:#F5ECFF; color:#3a1e7e; margin-bottom:12px; }
.badge{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#f1e9ff; color:#3d1e7f; }
.badge.good{ background:#e9fff3; color:#197a3a; }
.badge.warn{ background:#fff6da; color:#8b6800; }
.badge.bad{  background:#ffe9ee; color:#a3002b; }

/* Timeline */
.tl{ margin-top:12px; }
.tl-legend{ display:flex; align-items:center; gap:10px; color:#6b5c8a; font-size:12px; margin-bottom:6px; }
.tl-bar{ position:relative; height:12px; background:#f6f0ff; border-radius:999px; overflow:hidden; border:1px solid #efe6ff; }
.tl .seg{ display:inline-block; height:100%; }
.tl .seg.dns{ background:#c9b6ff; } .tl .seg.tcp{ background:#a68cff; } .tl .seg.tls{ background:#87d7ff; } .tl .seg.wait{ background:#ffd37a; } .tl .seg.recv{ background:#7ee0a3; }
.tl-ms{ color:#6b5c8a; font-size:12px; margin-top:6px; text-align:right; }

/* KPIs */
.ijs-kpis{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:10px; }
@media (min-width:720px){ .ijs-kpis{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.ijs-kpi{ background:#F0FFF5; border:1px solid #E0F5E8; border-radius:14px; padding:14px; box-shadow:0 8px 20px rgba(86,36,155,.06); }
.ijs-kpi .label{ color:#7A63B7; font-size:12px; font-weight:700; }
.ijs-kpi .value{ font-size:20px; font-weight:800; color:#241a3d; }
.kpi-bad{ background:#FFF1F2 !important; border-color:#FFD7DE !important; }
.kpi-good{ background:#EEFDF4 !important; border-color:#D6F5E2 !important; }

/* Mobiel */
.ijs-mobile{ margin-top:18px; }
.mob-title{ font-weight:800; color:#2c1f4a; margin-bottom:6px; }
.mob-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.mob-card{ background:#fbf9ff; border:1px solid #efe6ff; border-radius:12px; padding:12px; }
.mob-card.good{ background:#eefdf4; border-color:#d6f5e2; } .mob-card.warn{ background:#fff8e6; border-color:#ffe7b5; } .mob-card.bad{ background:#fff1f2; border-color:#ffd7de; }
.mob-card .m-label{ color:#6e5d9a; font-size:12px; } .mob-card .m-value{ font-size:18px; font-weight:800; color:#2d1b5b; }
.mob-note{ margin-top:6px; font-size:12px; color:#6e5d9a; }
@media (max-width:680px){ .mob-grid{ grid-template-columns:1fr; } }

/* Meta & lists */
.ijs-meta{ margin-top:32px; }
.ijs-notes, .ijs-recos{ margin:6px 0 0 0; padding-left:18px; font-size:14px; color:#2d1b5b; }
.ijs-recos li{ position:relative; padding-left:22px; }
.ijs-recos li .ico{ position:absolute; left:0; top:0; font-size:14px; }
.ijs-recos li.warn .ico{ color:#eab308; } .ijs-recos li.bad .ico{ color:#dc2626; } .ijs-recos li.neutral .ico{ color:#2d1b5b; }

/* Assets list */
.ijs-assets{ margin-top:16px; border:1px solid #efe6ff; background:#fbf9ff; border-radius:12px; padding:12px; }
.ijs-assets .assets-head{ font-weight:700; color:#2d1b5b; margin-bottom:6px; }
.ijs-assets .assets-list{ display:block; border-top:1px dashed #e8ddff; margin-top:8px; }
.asset-row{ display:grid; grid-template-columns: 40px 90px 60px 1fr; gap:8px; padding:8px 0; border-bottom:1px dashed #efe6ff; font-size:13px; align-items:center; }
.asset-row .t{ text-transform:uppercase; font-weight:800; color:#6f2da8; }
.asset-row .t-css{ color:#0ea5e9; } .asset-row .t-js{ color:#f59e0b; } .asset-row .t-img{ color:#16a34a; }
.asset-row .b{ font-weight:700; color:#2d1b5b; } .asset-row .s{ color:#6e5d9a; } .asset-row .u{ color:#4b3f74; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.ijs-error{ margin-top:16px; padding:12px; border:1px solid #ffd0d8; background:#fff1f4; color:#8a0030; border-radius:12px; }