:root{
  --bg:#0d0f12; --fg:#ecf1f6; --muted:#9aa6b2; --card:#141820; --border:#252b34;
  --accent:#7dd3fc; --accent-2:#a78bfa; --max:1120px;
  --r:16px; --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem;
}

*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--max); margin:auto; padding:0 var(--s2)}
.site-header,.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--s2) var(--s2); border-bottom:1px solid var(--border);
}
.site-footer{border-top:1px solid var(--border); border-bottom:0; margin-top:var(--s6)}

.brand{
  display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px;
  background:linear-gradient(160deg,#10141b, #0b0e13 60%, #07090d);
  color:var(--fg); text-decoration:none; font-weight:800; letter-spacing:.02em;
  border:1px solid var(--border);
}
.site-nav a{color:var(--muted); text-decoration:none; margin-left:var(--s3)}
.site-nav a:hover{color:var(--fg)}

.hero{padding:var(--s6) 0 var(--s4)}
h1{font-size:clamp(2rem,4.8vw,3.3rem); line-height:1.1; margin:0 0 var(--s2)}
.lede{font-size:1.125rem; color:var(--muted); max-width:62ch}

.grid{
  display:grid; gap:var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  margin-bottom:var(--s6);
}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.card img{width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--border)}
.card h3{margin:var(--s2) var(--s2) 0}
.card .meta{color:var(--muted); margin:var(--s1) var(--s2) 0; font-size:.9rem}
.card p{margin:var(--s1) var(--s2) var(--s2)}
.btn{
  align-self:flex-start; margin:0 var(--s2) var(--s2);
  display:inline-block; padding:.6rem .9rem; border-radius:12px;
  color:#041b22; background:var(--accent); font-weight:700; text-decoration:none;
}
.btn.secondary{background:var(--accent-2); color:#0c0a12}
.btn:hover{filter:brightness(1.06)}

.kbd{font:600 .85rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); background:#0f1319; border:1px solid var(--border); padding:.25rem .4rem; border-radius:8px}

.panel{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s2); margin:var(--s3) 0;
}

input,select,textarea,button{
  background:#0f1319;
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.5rem .6rem;
  font: inherit;
}
select,
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="text"]{
  background:#0f1319;
  color:var(--fg);
}
button{
  cursor:pointer;
  background:var(--accent);
  color:#041b22;
  border:1px solid var(--border);
  font-weight:700;
}
button:hover{filter:brightness(1.06)}
label{display:inline-flex; flex-direction:column; gap:.25rem}
.row{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}

.badge{display:inline-block; padding:.25rem .5rem; border-radius:999px; background:#10141b; border:1px solid var(--border); color:var(--muted); font-size:.8rem}
.badge.ok{background:#09231e; color:#34d399; border-color:rgba(52,211,153,.25)}
.badge.warn{background:#2a2418; color:#fbbf24; border-color:rgba(251,191,36,.25)}
.badge.err{background:#2b1a1d; color:#f87171; border-color:rgba(248,113,113,.25)}

table{width:100%; border-collapse:separate; border-spacing:0; margin:.5rem 0}
th,td{padding:.5rem .75rem; border-bottom:1px solid var(--border); text-align:left}
th{color:var(--muted); font-weight:600}
tr:last-child td{border-bottom:0}

.controls{margin-top:var(--s2)}
.controls button{background:var(--accent-2); color:#0c0a12}

.help{color:var(--muted); font-size:.9rem}

/* --- Nav active indicator */
.site-nav a.active{ color:var(--fg); border-bottom:2px solid var(--accent); padding-bottom:2px }

/* --- Breadcrumbs */
.breadcrumbs{ font-size:.9rem; color:var(--muted); margin: var(--s2) 0 }
.breadcrumbs a{ color:var(--muted); text-decoration:none }
.breadcrumbs a:hover{ color:var(--fg) }

/* --- Back to top button */
.back-to-top{
  position:fixed; right:16px; bottom:16px; z-index:1000; display:none;
  background:var(--accent); color:#041b22; border:1px solid var(--border);
  border-radius:999px; width:40px; height:40px; font-weight:800;
}
.back-to-top.show{ display:inline-grid; place-items:center }