* { box-sizing: border-box; margin:0;padding:0;}
body,html { font-size: 16px; font-family: 'Consolas', monospace; background:#111; color:#eee; padding:0; }
h1,h2 { color:#4caf50; }
section { margin-bottom: 1em; border:1px solid #44444449; padding:9px; border-radius:5px; background-color: #38333310; box-shadow: 8px 8px 14px -5px rgba(5, 5, 5, 0.84);}
pre { background:#222; padding:4px; word-wrap: break-word; word-break: break-all; font-size: 11px;}
#progress-bar {
    background: #4caf50;
    width: 0%;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, opacity 1s ease; /* smooth width + fade */
}
#progress-bar.fade-out {
    opacity: 0;
}
#progress-container {
    background:#222; width:100%; height:16px; border-radius:4px;
}
.scanBtn{
  max-height: 120px;
  box-shadow:inset 0px 1px 0px 0px #dcecfb;
  background:linear-gradient(to bottom, #20ac7d 5%, #25831d 100%);
  background-color:#bddbfa;
  border-radius:6px;
  border:1px solid #0d4e2e;
  outline: none;
  display:inline-block;
  cursor:pointer;
  color: #dcecfbf1;
  font-family: "Lucida Console", monospace;
  font-size:14px;
  font-weight:bold;
  padding:6px;
  text-decoration:none;
  text-shadow:2px 2px 2px #04080cc0;
  transition: 0.3s;
  max-width: 200px;
}
.scanBtn:hover {
	background:linear-gradient(to bottom, #59be7270 5%, #7dd0db75 100%);
	background-color:#80b5ea;
}
.scanBtn:active {
	position:relative;
	top:1px;
}

section h2 {
    text-align: center;
    text-shadow: 4px 4px 3px rgba(8, 8, 39, 1);
    border-bottom: 2px dashed #0b8b162d;
}
.grid {
  display: grid;
  gap: 0.3em 1em;
  margin-top: 8px;
}

.grid-key span {
  font-weight: bold;
  color: #4caf50;
text-shadow: 4px 4px 2px rgba(8, 8, 39, 1);
  display: block;
}

.grid-value span {
  color: #eee;
  display: block;
}

.row {
  display: grid;
  grid-template-columns: minmax(170px, auto) 1fr; 
  gap: 0.5em;
  margin-bottom: 0.1em;
}

.grid-key {
  font-weight: bold;
  color: #4caf50;
}

.grid-value {
  color: #eee;
  word-break: break-word;
}

#wrapper {
width: 100%;
min-height: 100vh;
flex-direction: column;
display:flex;
}

#client-info { display: flex;}

section {
    display: grid;
}

#subsection {
display: flex;
gap: 8px;
}