*{box-sizing:border-box;}
:root{
  --brand-blue:#8EAFDA;
  --brand-blue-hover:#637b99;
  --brand-green:#92DBA5;
  --brand-green-hover:#7ac58d;
  --bg:#f2f2f2;
  --text:#2e3440;
  --muted:#6b7280;
  --border:#d1d5db;
  --control-height:44px;
  --radius:8px;
}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:var(--bg);
  margin:0;
  padding:2rem;
  color:var(--text);
}
.container{
  position:relative;
  max-width:945px;
  margin:5px auto;
  padding:20px;
  background-color:#fff;
  border-radius:var(--radius);
  box-shadow:0 0 15px rgba(0,0,0,.1);
}
.header{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}
.header img{max-width:50px;height:auto;user-select:none;}
h1{
  text-align:center;
  font-weight:700;
  margin:10px 0;
  color:#1f2937;
}
.subtitle{
  text-align:center;
  font-size:0.9em;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  color:var(--muted);
  margin:-6px 0 28px;
}
.form-grid{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.form-grid > div{
  width: min(260px, 100%);
}

@media (max-width:720px){
  .form-grid{justify-content:stretch;}
}
label{font-weight:700;margin-bottom:.35rem;display:block;}
input[type="text"], select{
  height:var(--control-height);
  padding:0 12px;
  width:100%;
  font-size:1rem;
  border:1px solid var(--border);
  border-radius:6px;
  transition:border-color .3s ease, box-shadow .3s ease;
  background:#fff;
}
input[type="text"]:focus, select:focus{
  outline:none;
  border-color:var(--brand-blue);
  box-shadow:0 0 6px #2563ebaa;
}
.actions{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
}
.btn{
  height:var(--control-height);
  padding:0 18px;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  background:var(--brand-blue);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:background-color .3s ease;
}
.btn:hover{background:var(--brand-blue-hover);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-secondary{
  background:var(--brand-green);
}
.btn-secondary:hover{background:var(--brand-green-hover);}
.help-text{
  text-align:center;
  color:var(--muted);
  margin-top:1.5rem;
}
.help-text a{color:var(--muted);text-decoration:underline;}
/* Errors */
.error{
  display:none;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #fca5a5;
  background:#fef2f2;
  border-radius:10px;
  color:#991b1b;
  font-weight:600;
}
/* Results */
.result-section{
  display:none;
  margin-top:2rem;
  animation: fadeIn .35s ease;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.table-wrapper{
  overflow-x:auto;
  margin-top:14px;
  border-radius:10px;
  box-shadow:0 0 10px rgba(0,0,0,.1);
  background:#fff;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:10px;
}
thead{background:#f8f9fa;}
th, td{
  padding:15px;
  text-align:left;
  vertical-align:top;
  word-break:break-word;
}
tbody tr:nth-child(even){background:#f6f6f6;}
th:first-child{white-space:nowrap;}

/* Network result: bold labels, normal values */
.result-section table tbody td:first-child{
  font-weight:700;
  color:#111827;
  text-decoration:none;
}
.result-section table tbody td:last-child{
  font-weight:400;
  color:var(--text);
}
/* Tooltip (used in the generated results table) */
.tooltip{
  position:relative;
  cursor:help;
  text-decoration:none;
  font-weight:700;
  color:#111827;
}
.tooltip .tooltip-text{
  font-weight:400;
  visibility:hidden;
  opacity:0;
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  width:min(360px, 70vw);
  background:#8EAFDA;
  color:#ffffff;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.35;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  transition:opacity .15s ease;
  z-index:20;
}
.tooltip:hover .tooltip-text,
.tooltip:focus-within .tooltip-text{
  visibility:visible;
  opacity:1;
}

/* Make the terms (left column) bold, values normal */
.result-section table tbody td:first-child{font-weight:700;color:#111827;}
.result-section table tbody td:last-child{font-weight:400;color:var(--text);}
/* Footer */
.footer{
  text-align:center;
  font-size:9px;
  color:#777;
  margin-top:40px;
}
.footer a{color:#777;text-decoration:none;}
.footer a:hover{color:#777;text-decoration:none;}
@media (max-width:480px){
  body{padding:1rem;}
  .container{margin:20px auto;}
  .btn{width:100%;}
}


/* Learn more button */
.learn-btn{background:#fca5a5;color:#fff;}
.learn-btn:hover{filter:brightness(0.95);}


/* Spacer between network results and reference section */
.section-spacer{height:40px;}


/* Collapsible reference section */
.ref-details{margin-top:0;}
.ref-details > summary{
  list-style:none;
  cursor:pointer;
  font-weight:700;
  margin:0;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ref-details > summary::-webkit-details-marker{display:none;}
.ref-details > summary::after{
  content:'▸';
  font-weight:900;
  color:#111827;
  transform:translateY(0);
}
.ref-details[open] > summary::after{content:'▾';}
.ref-details[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0;}
.ref-details .reference-table{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;}
.ref-details:not([open]) .reference-table{display:none;}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://justinverstijnen.nl/wp-content/uploads/2026/01/Tool_Background_Blurred.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.69;
    z-index: -1;
}

body {
    position: relative;
    min-height: 100vh;
}

.container {
    background: rgba(255, 255, 255, 0.85);
}