:root { --bg:#0b0d12; --card:#111522; --text:#e9edf3; --muted:#aab3c2; --line:#232a3b; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:18px}
.top{position:sticky;top:0;background:rgba(11,13,18,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:baseline}
.logo{font-weight:800;letter-spacing:.2px}
.tag{color:var(--muted)}
.nav{display:flex;gap:14px}
.top .container{display:flex;justify-content:space-between;align-items:center}
.hero{padding:28px 0 10px}
h1{font-size:42px;margin:0 0 10px}
.lead{color:var(--muted);max-width:720px;line-height:1.45}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.badges span{border:1px solid var(--line);color:var(--muted);padding:6px 10px;border-radius:999px;font-size:13px}
.actions{display:flex;gap:12px;margin:18px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;background:#ffffff;color:#0b0d12;font-weight:650}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.grid{display:grid;gap:14px;margin:18px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.card h2{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);line-height:1.45}
.terminal{margin-top:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0a0c11}
.terminal-title{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}
pre{margin:0;padding:12px;white-space:pre-wrap;color:#d7e3ff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}
.contact{margin-top:14px}
.footer{border-top:1px solid var(--line);margin-top:24px}
.muted{color:var(--muted)}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.pill{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}

/* Clickable cards */
.card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.card-link:hover{
  transform: translateY(-1px);
}

.card-link:focus-visible{
  outline:2px solid rgba(255,255,255,.25);
  outline-offset:3px;
}

.card-link .card-cta{
  margin-top:10px;
  opacity:.85;
}

/* ---- DevCraft Lab: CSP-safe utilities (no inline styles) ---- */
.ui-h1 { margin: 0 0 8px; font-size: 28px; }
.ui-h2 { margin: 0 0 10px; }
.ui-section-mt { margin-top: 14px; }

.ui-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.ui-row-sm { display: flex; gap: 10px; flex-wrap: wrap; }

.ui-label { display: flex; gap: 8px; align-items: center; }

.ui-control {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.ui-error { margin-top: 6px; color: #ffb4b4; }

.ui-table-wrap {
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ui-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.ui-thead-row { background: #0a0c11; }
.ui-th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }

.ui-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-grid-full { grid-column: 1 / -1; }
.ui-muted-small { font-size: 13px; }

.ui-pre { max-height: 260px; overflow: auto; white-space: pre-wrap; }
.ui-modal-title { margin: 0; }


/* DevCraft CSP-safe utilities */
.ui-m0 { margin: 0; }
.ui-mt-6 { margin-top: 6px; }
.ui-mt-8 { margin-top: 8px; }
.ui-m0mb12 { margin: 0 0 12px; }
.ui-error { color: #ffb4b4; }


/* Contact form (DevCraft Studio) */
.contact-form { display: grid; gap: 10px; margin-top: 10px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-msg { font-size: 13px; color: var(--muted); }
.contact-msg.is-error { color: #ffb4b4; }

.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* UI helpers (keep CSP strict: no inline styles) */
.ui-mt-4 { margin-top: 4px; }
.ui-flex-10-center { display: flex; gap: 10px; align-items: center; }
.ui-ellipsis-320 { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================
   Mobile nav (DevCraft)
   ========================= */

.top .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.nav a[aria-current="page"]{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

/* mobile */
@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; }

  .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    padding-top:10px;
  }

  body[data-nav-open="1"] .nav{ display:flex; }

  .nav a{
    width:100%;
    padding:12px 10px;
  }
}

/* safety: long content should not break layout */
pre, .mono{
  max-width:100%;
  overflow-x:auto;
}

/* ===== Mobile menu button: consistent on iOS + Android ===== */
.top .nav-toggle{
  -webkit-appearance: none;
  appearance: none;

  /* iOS sometimes paints link/button text blue */
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  text-decoration: none;

  /* make it obviously clickable */

  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 8px 12px;
  min-height: 40px;
  border-radius: 12px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* if nav-toggle is <a> — keep it not-blue */
.top .nav-toggle:link,
.top .nav-toggle:visited{color:var(--text);-webkit-text-fill-color:var(--text)}

/* show a clean focus only for keyboard users */
.top .nav-toggle:focus{ outline: none; }
.top .nav-toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 2px;
}

/* if there is label/icon inside — make them visible on Android */
.top .nav-toggle .nav-label{ display: inline; }
.top .nav-toggle .nav-icon{ display: inline; }