/* ===========================================================
   DGTechQA — Testing Practice Lab
   Design: dark "editor console" theme. Accent colors are the
   same semantics testers already use — pass / fail / pending —
   applied consistently as the site's whole color system.
   =========================================================== */

:root{
  --bg:            #14181C;
  --bg-panel:      #1B2127;
  --bg-panel-2:    #202832;
  --border:        #2A323A;
  --border-soft:   #232B33;
  --text:          #E7EAED;
  --text-dim:      #97A1AB;
  --text-faint:    #5F6A74;

  --pass:   #3DDC84;
  --fail:   #FF5C5C;
  --warn:   #FFC24B;
  --info:   #4FC3F7;

  --pass-bg: rgba(61,220,132,.12);
  --fail-bg: rgba(255,92,92,.12);
  --warn-bg: rgba(255,194,75,.14);
  --info-bg: rgba(79,195,247,.12);

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --header-h: 96px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

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

html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(79,195,247,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(61,220,132,.05), transparent 60%);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{ font-family: var(--font-mono); font-weight: 700; margin: 0 0 .5em; letter-spacing: -.01em; }
p{ margin: 0 0 1em; }
code{ font-family: var(--font-mono); background: var(--bg-panel-2); border: 1px solid var(--border); padding: .1em .4em; border-radius: 4px; font-size: .9em; color: var(--info); }

a{ color: var(--info); }
:focus-visible{ outline: 2px solid var(--info); outline-offset: 2px; }

/* ---------------- Console bar (top strip) ---------------- */
.console-bar{
  display:flex; align-items:center; gap:1rem;
  background: #0F1215;
  border-bottom: 1px solid var(--border);
  padding: .4rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-faint);
}
.console-bar__dots{ display:flex; gap:6px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot--fail{ background: var(--fail); }
.dot--warn{ background: var(--warn); }
.dot--pass{ background: var(--pass); }
.console-bar__path{ flex:1; }
.console-bar__branch{ color: var(--warn); margin-left:.4em; }
.console-bar__status{ font-variant-numeric: tabular-nums; }

/* ---------------- Tab nav (editor tabs) ---------------- */
.tab-nav{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; gap: 1.5rem;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: .85rem 1.25rem;
}
.tab-nav__brand{
  font-family: var(--font-mono); font-weight: 800; font-size: 1.05rem;
  color: var(--text); text-decoration:none; display:flex; align-items:center; gap:.4rem;
  white-space: nowrap;
}
.tab-nav__bracket{ color: var(--pass); }
.tab-nav__tabs{ display:flex; gap: .35rem; flex:1; overflow-x:auto; }
.tab{
  font-family: var(--font-mono); font-size: .82rem; text-decoration:none;
  color: var(--text-dim); background: var(--bg-panel-2);
  border: 1px solid var(--border-soft); border-bottom: 2px solid transparent;
  padding: .5rem .85rem; border-radius: 6px 6px 0 0; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tab:hover{ color: var(--text); }
.tab:focus-visible{ color: var(--text); }
.tab.is-active{ color: var(--info); border-bottom-color: var(--info); background: var(--bg-panel); }
.tab__ext{ color: var(--text-faint); }

.hamburger{ display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span{ width:22px; height:2px; background: var(--text); display:block; }

/* ---------------- Hero ---------------- */
.hero{
  max-width: 1200px; margin: 0 auto;
  padding: 4.5rem 1.5rem 4rem;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items:center;
}
.eyebrow{
  font-family: var(--font-mono); color: var(--pass); font-size: .82rem;
  text-transform: none; letter-spacing: .02em; margin-bottom: .75rem;
}
.hero h1{ font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.12; color: var(--text); }
.hero__lede{ color: var(--text-dim); max-width: 46ch; font-size: 1.02rem; }
.hero__cta{ display:flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0 2.25rem; }

.btn{
  font-family: var(--font-mono); font-size: .85rem; font-weight: 600;
  padding: .7rem 1.15rem; border-radius: var(--radius); text-decoration:none;
  border: 1px solid transparent; cursor: pointer; display:inline-flex; align-items:center; gap:.4em;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--pass); color: #0B1410; }
.btn--primary:hover{ background:#54e698; }
.btn--ghost{ background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover{ border-color: var(--info); color: var(--info); }
.btn--small{ padding:.55rem .9rem; font-size:.78rem; }
.btn:disabled{ opacity:.45; cursor: not-allowed; }

.hero__stats{ display:flex; gap: 2.2rem; margin:0; }
.hero__stats dt{ font-family: var(--font-mono); font-size: 1.6rem; color: var(--info); font-weight:800; }
.hero__stats dd{ margin:0; color: var(--text-faint); font-size: .78rem; }

.terminal{
  background: #0F1215; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow:hidden;
}
.terminal__bar{
  display:flex; align-items:center; gap:8px; padding: .6rem .8rem;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.terminal__title{ margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); }
.terminal__body{
  margin:0; padding: 1.1rem 1.2rem 1.4rem; min-height: 260px;
  font-family: var(--font-mono); font-size: .82rem; color: var(--pass);
  white-space: pre-wrap; word-break: break-word;
}

/* ---------------- Sections ---------------- */
.section{ padding: 4.5rem 1.5rem; max-width: 1280px; margin: 0 auto; }
.section--alt{ background: var(--bg-panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); max-width:none; }
.section--alt > *{ max-width: 1280px; margin-left:auto; margin-right:auto; }
.section__head{ max-width: 720px; margin: 0 auto 2.75rem; text-align:center; }
.section__head h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); }
.section__lede{ color: var(--text-dim); }

.card-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem;
}
.test-card{
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.4rem; display:flex; flex-direction:column; gap: .9rem;
}
.section--alt .test-card{ background: var(--bg); }
.test-card--wide{ grid-column: 1 / -1; }
.test-card__head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.test-card__head h3{ margin:0; font-size: 1rem; flex:1; color: var(--text); }
.test-id{ font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); border:1px solid var(--border); padding: .15rem .5rem; border-radius: 4px; }

.status-badge{
  font-family: var(--font-mono); font-size: .68rem; font-weight:700; letter-spacing:.04em;
  padding: .25rem .55rem; border-radius: 999px; border: 1px solid transparent;
}
.status-badge--ready{ color: var(--info); background: var(--info-bg); border-color: rgba(79,195,247,.3); }
.status-badge--pass{ color: var(--pass); background: var(--pass-bg); border-color: rgba(61,220,132,.35); }
.status-badge--fail{ color: var(--fail); background: var(--fail-bg); border-color: rgba(255,92,92,.35); }
.status-badge--warn{ color: var(--warn); background: var(--warn-bg); border-color: rgba(255,194,75,.35); }
.status-badge--pending{ color: var(--warn); background: var(--warn-bg); border-color: rgba(255,194,75,.35); }

.widget{ display:flex; flex-direction:column; gap: .8rem; }
.widget--row{ flex-direction: row; flex-wrap: wrap; align-items:center; }
.widget__output{
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim);
  background: var(--bg-panel-2); border: 1px dashed var(--border); border-radius: 6px;
  padding: .6rem .75rem; min-height: 2.2em; margin:0;
}
.hint{ font-size: .78rem; color: var(--text-faint); margin:0; }

label{ font-size: .85rem; color: var(--text-dim); display:flex; flex-direction:column; gap:.35rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], select, textarea{
  font-family: var(--font-sans); font-size: .9rem; color: var(--text);
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: .6rem .7rem;
}
textarea{ font-family: var(--font-mono); resize: vertical; min-height: 120px; }
select[multiple]{ min-height: 120px; }
fieldset{ border:1px solid var(--border); border-radius:6px; padding: .7rem .9rem; margin:0; }
legend{ font-size:.75rem; color: var(--text-faint); padding: 0 .4em; }
.check{ flex-direction:row; align-items:center; gap:.5rem; font-size:.85rem; }

/* Drag and drop */
.dnd{ display:flex; gap: 1rem; align-items:center; }
.dnd__box{
  font-family: var(--font-mono); font-size: .75rem; font-weight:700;
  background: var(--info-bg); border:1px solid rgba(79,195,247,.4); color: var(--info);
  padding: .9rem 1.1rem; border-radius: 6px; cursor: grab; user-select:none;
}
.dnd__zone{
  flex:1; min-height: 62px; border: 2px dashed var(--border); border-radius: 8px;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; color: var(--text-faint);
}
.dnd__zone.is-over{ border-color: var(--pass); color: var(--pass); background: var(--pass-bg); }

/* Tooltip */
.tooltip-wrap{ position: relative; display:inline-block; }
.tooltip{
  position:absolute; bottom: 120%; left:50%; transform: translateX(-50%);
  background:#0F1215; border:1px solid var(--border); color: var(--text-dim);
  font-size:.75rem; padding:.5rem .7rem; border-radius:6px; width: 200px;
  opacity:0; pointer-events:none; transition: opacity .15s ease;
}
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip{ opacity:1; }

.hover-reveal{ position:relative; }
.hover-reveal__label{ font-size:.8rem; color: var(--text-dim); border:1px dashed var(--border); padding:.5rem .8rem; border-radius:6px; display:inline-block; }
.hover-reveal__panel{
  position:absolute; top:110%; left:0; width:220px; background: var(--bg-panel-2);
  border:1px solid var(--border); border-radius:6px; padding:.6rem .8rem; font-size:.78rem;
  color: var(--text-dim); opacity:0; visibility:hidden; transition: opacity .15s ease;
}
.hover-reveal:hover .hover-reveal__panel, .hover-reveal:focus-within .hover-reveal__panel{ opacity:1; visibility:visible; }

/* Table */
.table-toolbar{ display:flex; }
.data-table{ width:100%; border-collapse: collapse; font-size: .84rem; }
.data-table th, .data-table td{ text-align:left; padding: .6rem .7rem; border-bottom: 1px solid var(--border-soft); }
.data-table th{ font-family: var(--font-mono); font-size:.72rem; color: var(--text-faint); cursor:pointer; user-select:none; }
.data-table tbody tr:hover{ background: var(--bg-panel-2); }

/* Loader / progress */
.loader{
  width: 22px; height: 22px; border-radius:50%;
  border: 3px solid var(--border); border-top-color: var(--info);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.progress{ height: 10px; background: var(--bg-panel-2); border-radius: 999px; overflow:hidden; border:1px solid var(--border); }
.progress__bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--info), var(--pass)); transition: width .25s linear; }

/* Context menu target + menu */
.context-target{
  border: 1px dashed var(--border); border-radius: 8px; padding: 2rem 1rem; text-align:center;
  color: var(--text-faint); font-size: .85rem;
}
.custom-menu{
  position: fixed; z-index: 100; background: var(--bg-panel); border:1px solid var(--border);
  border-radius: 8px; list-style:none; margin:0; padding:.4rem; box-shadow: var(--shadow); min-width: 180px;
}
.custom-menu li{ padding:.55rem .7rem; font-size:.82rem; border-radius:5px; cursor:pointer; color: var(--text-dim); }
.custom-menu li:hover{ background: var(--bg-panel-2); color: var(--text); }

/* Misc */
.broken-img-row{ display:flex; align-items:center; gap: .8rem; font-size:.8rem; color: var(--text-faint); }
.broken-img-row img{ border:1px dashed var(--border); border-radius:6px; }

.lazy-list{ max-height: 160px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; }
.lazy-list__item{ padding: .6rem .8rem; border-bottom: 1px solid var(--border-soft); font-size:.82rem; color: var(--text-dim); }

/* Automation section extras */
iframe#practiceFrame{ width:100%; height: 90px; border: 1px solid var(--border); border-radius: 6px; }

/* API console */
.api-console{
  max-width: 1000px; margin: 0 auto; background: var(--bg-panel); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.api-console__request{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: 1.2rem; }
.api-console__request select{ font-family: var(--font-mono); }
.api-console__panels{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.api-panel h4{ font-size: .8rem; color: var(--text-dim); display:flex; align-items:center; gap:.5rem; }
.api-panel textarea{ width:100%; }
.api-response{
  margin:0; background: #0F1215; border:1px solid var(--border); border-radius:6px;
  padding: .9rem; font-family: var(--font-mono); font-size: .78rem; color: var(--pass);
  min-height: 160px; max-height: 320px; overflow:auto; white-space: pre-wrap; word-break: break-word;
}

/* Modal */
.modal-overlay{
  position: fixed; inset:0; background: rgba(6,8,10,.7); z-index: 200;
  display:flex; align-items:center; justify-content:center; padding: 1rem;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  background: var(--bg-panel); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem; max-width: 420px; box-shadow: var(--shadow);
}

/* Footer */
.site-footer{
  padding: 2rem 1.5rem; text-align:center; color: var(--text-faint); font-size: .78rem;
  border-top: 1px solid var(--border);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; padding-top: 3rem; }
  .api-console__panels{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .tab-nav__tabs{ position: fixed; top: var(--header-h); left:0; right:0;
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
    flex-direction: column; padding: .5rem 1rem 1rem; display:none; }
  .tab-nav__tabs.is-open{ display:flex; }
  .hamburger{ display:flex; }
  .console-bar{ font-size: .65rem; }
  .hero__stats{ gap: 1.2rem; flex-wrap:wrap; }
}