:root{
  --bg:#07111f;
  --bg2:#102947;
  --panel:rgba(16,28,46,.92);
  --panel2:rgba(19,35,58,.9);
  --text:#eaf2ff;
  --muted:#9db0cb;
  --line:rgba(255,255,255,.13);
  --accent:#6bb7ff;
  --green:#38d99e;
  --danger:#ff6b7a;
  --warning:#ffd166;
  --shadow:0 22px 70px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html{min-height:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 15% 0%,rgba(107,183,255,.22),transparent 32%),
    radial-gradient(circle at 90% 5%,rgba(56,217,158,.14),transparent 28%),
    linear-gradient(145deg,var(--bg2),var(--bg) 52%,#050914);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
h1,h2,h3,p{margin-top:0}

.lab-shell{min-height:100svh;display:flex}
.lab-side{
  width:250px;
  background:rgba(5,10,20,.72);
  border-right:1px solid var(--line);
  padding:18px;
  position:sticky;
  top:0;
  height:100svh;
  z-index:5;
  backdrop-filter:blur(14px);
}
.brand{
  padding:14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(107,183,255,.18),rgba(56,217,158,.09));
  margin-bottom:18px;
}
.brand b{display:block;font-size:20px;letter-spacing:-.03em}
.brand span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.lab-side a{
  display:block;
  padding:13px 14px;
  border-radius:15px;
  color:var(--muted);
  margin:6px 0;
  white-space:nowrap;
}
.lab-side a:hover,.lab-side a.active{
  background:rgba(107,183,255,.16);
  color:var(--text);
}

.lab-main{flex:1;padding:24px;min-width:0}
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.topbar h1{font-size:clamp(26px,4vw,34px);margin-bottom:6px;letter-spacing:-.04em}
.topbar p,.muted{color:var(--muted);line-height:1.5}
.user-pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(255,255,255,.06);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.grid,.settings-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.card h2{font-size:36px;margin-bottom:5px;letter-spacing:-.05em}
.card p{color:var(--muted);margin-bottom:0}
.steps{display:flex;flex-wrap:wrap;gap:8px}
.steps span{
  padding:9px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  font-size:13px;
}
.alert{
  padding:12px 14px;
  border-radius:16px;
  margin-bottom:12px;
  border:1px solid var(--line);
  line-height:1.45;
}
.alert.success{background:rgba(56,217,158,.12);color:#bfffe7}
.alert.danger{background:rgba(255,107,122,.12);color:#ffd1d6}

label{display:block;font-weight:800;margin:12px 0 7px}
input,textarea{
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.075);
  color:var(--text);
  border-radius:16px;
  padding:13px 14px;
  outline:none;
}
input:focus,textarea:focus{
  border-color:rgba(107,183,255,.72);
  box-shadow:0 0 0 4px rgba(107,183,255,.14);
}
textarea{resize:vertical}
button{
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--green));
  color:#03101c;
  font-weight:900;
  padding:13px 16px;
  cursor:pointer;
  min-height:46px;
}
button:hover{filter:brightness(1.05)}
button:active{transform:translateY(1px)}
.danger-btn{background:linear-gradient(135deg,var(--danger),var(--warning))}
.stack-form button{width:100%;margin-top:14px}

.checker-layout{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  gap:16px;
  align-items:start;
}
.big-script{
  min-height:62svh;
  font-family:Consolas,Monaco,monospace;
  font-size:13px;
  line-height:1.45;
  white-space:pre;
  overflow:auto;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.report-panel{
  height:calc(100svh - 130px);
  display:flex;
  flex-direction:column;
  min-height:520px;
  position:sticky;
  top:20px;
}
.report-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.report-head h2{margin-bottom:0}
.score{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-weight:900;
  white-space:nowrap;
}
.score.warning{color:var(--warning)}
.score.danger{color:var(--danger)}
.score.pass{color:var(--green)}
.copy-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.report-box{
  white-space:pre-wrap;
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}
.report-box.mini{max-height:120px;overflow:auto;color:#ffd1d6}
.report-scroll{
  flex:1;
  min-height:0;
  font-family:Consolas,Monaco,monospace;
  font-size:13px;
  line-height:1.45;
  overflow:auto;
  resize:none;
}
.empty-report{
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:18px;
  padding:18px;
}
.secret-box{
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  margin:12px 0;
}
.secret-box code{display:block;word-break:break-all;margin:8px 0;color:#bfffe7}
.secret-box small{display:block;color:var(--muted)}
.secret-box textarea{height:90px;margin-top:8px;font-size:12px}


.progress-modal[hidden],
[hidden].progress-modal{
  display:none!important;
}

.progress-modal{
  position:fixed;
  inset:0;
  background:rgba(1,5,12,.72);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  z-index:50;
  padding:16px;
}
.progress-card{
  width:min(360px,92vw);
  text-align:center;
  background:rgba(16,28,46,.96);
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
}
.radar{
  width:120px;
  height:120px;
  border-radius:50%;
  margin:0 auto 18px;
  background:conic-gradient(from 0deg,transparent,rgba(107,183,255,.95),transparent);
  animation:spin 1.2s linear infinite;
  position:relative;
}
.radar:after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:#101c2e;
  border:1px solid var(--line);
}
.progress-line{height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.progress-line span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--green))}
@keyframes spin{to{transform:rotate(360deg)}}

/* Login page support */
body.login-body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,4vw,28px);
}
.login-card{
  width:min(460px,100%);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow);
}
.login-brand{text-align:center;margin-bottom:20px}
.login-brand h1{margin-bottom:4px}

/* Mobile */
@media(max-width:980px){
  .lab-shell{display:block}
  .lab-side{
    width:100%;
    height:auto;
    min-height:0;
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    padding:10px;
    border-right:0;
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
  }
  .lab-side::-webkit-scrollbar{display:none}
  .brand{
    min-width:166px;
    margin:0;
    padding:11px 12px;
    border-radius:17px;
  }
  .brand b{font-size:17px}
  .brand span{font-size:12px}
  .lab-side a{
    margin:0;
    padding:11px 13px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.045);
    font-size:14px;
  }
  .lab-main{padding:14px}
  .topbar{
    display:block;
    margin-bottom:14px;
  }
  .user-pill{
    display:inline-flex;
    margin-top:8px;
    max-width:100%;
  }
  .grid,.settings-grid,.checker-layout{
    grid-template-columns:1fr;
  }
  .card,.panel{
    border-radius:20px;
    padding:15px;
  }
  .card h2{font-size:30px}
  .checker-layout{gap:12px}
  .big-script{
    min-height:52svh;
    font-size:12.5px;
  }
  .report-panel{
    position:relative;
    top:auto;
    height:68svh;
    min-height:430px;
  }
  .actions button,.copy-row button{
    width:100%;
  }
}

@media(max-width:520px){
  .lab-main{padding:12px}
  .topbar h1{font-size:25px}
  .topbar p{font-size:14px}
  .card,.panel{padding:14px;border-radius:18px}
  .steps span{font-size:12px}
  input,textarea,button{font-size:16px}
  .big-script{min-height:50svh}
  .report-panel{height:64svh;min-height:390px}
  .report-head{align-items:flex-start}
  .report-head h2{font-size:18px}
  body.login-body{
    align-items:stretch;
    padding:12px;
  }
  .login-card{
    border-radius:23px;
    padding:20px;
    margin:auto 0;
  }
}

@media(max-width:360px){
  .brand{min-width:150px}
  .lab-side a{font-size:13px;padding:10px 11px}
  .lab-main{padding:10px}
  .card,.panel{padding:12px}
  .report-panel{height:62svh}
}


/* =========================================================
   Select / Dropdown visibility fix
   ========================================================= */
select,
select option,
select optgroup {
  color: #eaf2ff;
  background-color: #17263d;
}

select option {
  color: #06111f;
  background-color: #ffffff;
}

select option:checked,
select option:hover {
  color: #06111f;
  background-color: #dbeafe;
}

select:focus {
  border-color: rgba(107,183,255,.72);
  box-shadow: 0 0 0 4px rgba(107,183,255,.14);
}