/* ══════════════════════════════════════════
   oXben HardwareCheck – Neon Green Dark Theme
   ══════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#080810;
  --bg2:#0e0e1a;
  --bg3:#141422;
  --bg4:#1a1a2e;
  --accent:#39ff14;
  --accent-dim:#39ff1466;
  --accent-glow:0 0 12px #39ff1444,0 0 40px #39ff1418;
  --good:#39ff14;
  --warn:#ffcc00;
  --danger:#ff4444;
  --info:#00b4ff;
  --text:#e0e8e0;
  --text-dim:#7a8a7a;
  --text-muted:#4a5a4a;
  --border:#1e2e1e;
  --border-bright:#2a3e2a;
  --radius:10px;
  --font:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

html,body{
  width:100%;height:100%;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.5;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:3px}

/* ── App Wrapper ── */
.app-wrapper{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px 30px;
}

/* ── Sidebar Ads ── */
.ad-sidebar{
  position:fixed;top:50%;transform:translateY(-50%);
  width:160px;height:600px;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px dashed var(--border);
  font-size:10px;color:var(--text-muted);border-radius:var(--radius);
}
.ad-sidebar-left{left:10px}
.ad-sidebar-right{right:10px}
@media(max-width:1440px){.ad-sidebar{display:none}}

/* ── Ad Slots ── */
.ad-center,.ad-bottom-full{
  margin:20px auto;padding:10px;
  background:var(--bg2);border:1px dashed var(--border);
  border-radius:var(--radius);text-align:center;
  font-size:10px;color:var(--text-muted);
}

/* ── Header ── */
.site-header{
  padding:18px 0 14px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.header-inner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.header-logo{
  display:flex;align-items:center;gap:8px;
  font-size:1.3em;font-weight:700;color:var(--text);
}
.header-logo svg{flex-shrink:0}
.brand-accent{color:var(--accent);text-shadow:var(--accent-glow)}
.header-tagline{
  font-size:.78em;color:var(--text-dim);
  letter-spacing:1px;text-transform:uppercase;
}

/* ── Hero / Score Section ── */
.hero-section{
  display:flex;align-items:center;gap:32px;
  padding:30px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:20px;
}
.score-ring-wrap{
  position:relative;width:140px;height:140px;flex-shrink:0;
}
.score-ring{width:100%;height:100%}
.score-text{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.score-value{
  font-size:2.4em;font-weight:800;
  color:var(--accent);
  text-shadow:0 0 16px #39ff1444;
  line-height:1;
}
.score-label{
  font-size:.65em;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:1px;
  margin-top:4px;
}
.hero-info{flex:1}
.hero-info h1{
  font-size:1.6em;margin-bottom:6px;
  color:var(--text);
}
.hero-desc{
  font-size:.85em;color:var(--text-dim);
  margin-bottom:16px;line-height:1.6;
}
.btn-scan{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 32px;
  background:var(--accent);
  color:#080810;
  border:none;border-radius:8px;
  font-size:1em;font-weight:700;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 0 20px #39ff1444;
}
.btn-scan:hover{box-shadow:0 0 30px #39ff1466;transform:translateY(-1px)}
.btn-scan:active{transform:translateY(0)}
.btn-scan:disabled{
  opacity:.5;cursor:not-allowed;
  box-shadow:none;transform:none;
}
.btn-icon{font-size:1.1em}
.scan-status{
  font-size:.75em;color:var(--text-muted);
  margin-top:10px;min-height:1.2em;
}

/* ── Diagnostic Grid ── */
.diag-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:20px;
}
.diag-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s;
}
.diag-card:hover{border-color:var(--border-bright)}
.diag-card.status-good{border-color:#39ff1444}
.diag-card.status-warn{border-color:#ffcc0044}
.diag-card.status-danger{border-color:#ff444444}
.card-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg3);
}
.card-icon{font-size:1.1em}
.card-header h3{flex:1;font-size:.85em;font-weight:600}
.card-badge{
  padding:2px 10px;border-radius:10px;
  font-size:.65em;font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;
  background:var(--bg4);color:var(--text-muted);
}
.card-badge.good{background:#39ff1422;color:#39ff14}
.card-badge.warn{background:#ffcc0022;color:#ffcc00}
.card-badge.danger{background:#ff444422;color:#ff4444}
.card-badge.scanning{background:#00b4ff22;color:#00b4ff}
.card-body{
  padding:14px 16px;
  font-size:.8em;
  min-height:80px;
}
.card-placeholder{color:var(--text-muted);font-style:italic}

/* Info rows */
.info-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;
  border-bottom:1px solid var(--border);
}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--text-dim);font-size:.85em}
.info-value{font-weight:600;color:var(--text);font-size:.85em;text-align:right;max-width:60%;word-break:break-word;overflow-wrap:break-word}

/* Progress bar in cards */
.card-progress{
  width:100%;height:6px;
  background:var(--bg);
  border-radius:3px;
  margin-top:8px;overflow:hidden;
}
.card-progress-fill{
  height:100%;
  background:var(--accent);
  border-radius:3px;
  transition:width .6s ease;
}

/* ── Benchmark ── */
.bench-section{margin-bottom:20px}
.bench-section h2{
  text-align:center;font-size:1.3em;
  color:var(--accent);margin-bottom:16px;
}
.bench-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
}
.bench-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;text-align:center;
}
.bench-card h4{
  font-size:.85em;color:var(--text);margin-bottom:12px;
}
.bench-bar-wrap{
  width:100%;height:10px;
  background:var(--bg);
  border-radius:5px;overflow:hidden;
  margin-bottom:8px;
}
.bench-bar{
  height:100%;
  background:linear-gradient(90deg,#39ff14,#00ff88);
  border-radius:5px;
  transition:width 1s ease;
}
.bench-bar.gpu{background:linear-gradient(90deg,#00b4ff,#39ff14)}
.bench-bar.mem{background:linear-gradient(90deg,#ffcc00,#39ff14)}
.bench-score{
  font-size:1.5em;font-weight:800;
  color:var(--accent);
}

/* ── Recommendations ── */
.reco-section{margin-bottom:20px}
.reco-section h2{
  text-align:center;font-size:1.3em;
  color:var(--accent);margin-bottom:16px;
}
.reco-list{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:16px;
}
.reco-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 18px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.reco-icon{font-size:1.4em;flex-shrink:0;margin-top:2px}
.reco-content{flex:1}
.reco-title{font-weight:600;font-size:.88em;margin-bottom:4px}
.reco-desc{font-size:.78em;color:var(--text-dim);line-height:1.5}
.reco-link{
  display:inline-block;margin-top:6px;
  font-size:.75em;color:var(--accent);font-weight:600;
}
.reco-item.reco-good{border-left:3px solid var(--good)}
.reco-item.reco-warn{border-left:3px solid var(--warn)}
.reco-item.reco-danger{border-left:3px solid var(--danger)}
.reco-item.reco-info{border-left:3px solid var(--info)}

.btn-export{
  display:block;margin:0 auto;
  padding:10px 28px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-size:.85em;font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.btn-export:hover{border-color:var(--accent);color:var(--accent)}

/* ── FAQ ── */
.faq-section{margin:30px 0}
.faq-section h2{
  text-align:center;font-size:1.4em;
  color:var(--accent);margin-bottom:20px;
}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-item{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 18px;
  transition:border-color .2s;
}
.faq-item[open]{border-color:var(--accent-dim)}
.faq-item summary{
  font-weight:600;font-size:.88em;
  cursor:pointer;color:var(--text);
  list-style:none;
  display:flex;align-items:center;gap:8px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'▸';color:var(--accent);transition:transform .2s}
.faq-item[open] summary::before{transform:rotate(90deg)}
.faq-item p{margin-top:10px;font-size:.82em;color:var(--text-dim);line-height:1.6}
.faq-item code{
  background:var(--bg3);padding:2px 6px;
  border-radius:4px;font-size:.9em;color:var(--accent);
}

/* ── Footer ── */
.site-footer{
  text-align:center;padding:20px;
  border-top:1px solid var(--border);
  color:var(--text-muted);font-size:.75em;
}
.site-footer a{color:var(--text-dim)}
.site-footer a:hover{color:var(--accent)}

/* ══════════════════
   Responsive
   ══════════════════ */

@media(max-width:900px){
  .hero-section{flex-direction:column;text-align:center;gap:20px}
  .diag-grid{grid-template-columns:1fr}
  .bench-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .app-wrapper{padding:0 10px 20px}
  .header-inner{gap:8px}
  .header-logo{font-size:1.05em}
  .header-tagline{display:none}
  .hero-section{padding:16px;gap:16px}
  .score-ring-wrap{width:100px;height:100px}
  .score-value{font-size:1.8em}
  .hero-info h1{font-size:1.2em}
  .hero-desc{font-size:.8em}
  .btn-scan{padding:10px 24px;font-size:.9em;width:100%}
  .scan-status{font-size:.7em}

  /* Cards */
  .card-header{padding:10px 12px}
  .card-header h3{font-size:.8em}
  .card-body{padding:10px 12px;min-height:60px}
  .info-row{flex-wrap:wrap;gap:2px}
  .info-label{font-size:.8em;flex:1 1 auto}
  .info-value{
    font-size:.78em;
    max-width:100%;
    word-break:break-word;
    overflow-wrap:break-word;
    text-align:right;
    flex:1 1 auto;
  }

  /* Benchmark */
  .bench-card{padding:14px}
  .bench-score{font-size:1.2em}

  /* Recommendations */
  .reco-item{padding:12px;gap:10px;flex-wrap:wrap}
  .reco-title{font-size:.82em}
  .reco-desc{font-size:.74em}
  .btn-export{font-size:.8em;padding:10px 20px;width:100%}

  /* FAQ */
  .faq-item{padding:12px 14px}
  .faq-item summary{font-size:.82em;gap:6px}
  .faq-item p{font-size:.76em}

  /* Ads */
  .ad-center,.ad-bottom-full{margin:14px auto;padding:8px}
}

@media(max-width:380px){
  .app-wrapper{padding:0 8px 16px}
  .score-ring-wrap{width:80px;height:80px}
  .score-value{font-size:1.4em}
  .hero-info h1{font-size:1.05em}
  .hero-desc{font-size:.75em}
  .btn-scan{padding:10px 16px;font-size:.85em}
  .card-header h3{font-size:.75em}
  .card-badge{font-size:.6em;padding:2px 7px}
  .info-row{
    flex-direction:column;
    align-items:flex-start;
    gap:1px;padding:5px 0;
  }
  .info-value{text-align:left;font-size:.75em}
  .bench-grid{gap:10px}
  .bench-card{padding:12px}
  .bench-score{font-size:1em}
  .reco-item{padding:10px}
  .faq-item{padding:10px 12px}
}

/* ── Scan animation ── */
@keyframes pulse-border{
  0%,100%{border-color:var(--border)}
  50%{border-color:var(--accent)}
}
.diag-card.scanning{animation:pulse-border 1.5s ease infinite}