:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --nav:#e5e7eb;
  --link:#1f4fff;
  --card:#f8fafc;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  line-height:1.6;
}
.container{ width:min(960px,92%); margin:0 auto; padding:1rem; }

/* Header / Nav */
.site-header{ background:var(--nav); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:700; text-decoration:none; color:var(--text); }
.main-nav a{
  text-decoration:none; color:var(--text);
  padding:.5rem .75rem; border-radius:8px; transition:background .15s ease;
}
.main-nav a:hover{ background:#dbe1ea; }

/* Footer (left-aligned, low profile) */
.site-footer{
  margin-top: 3rem;
  padding: 2rem 0;
  text-align: left;
  font-size: .9rem;
  color: var(--muted);
  background: var(--bg);
}
.site-footer p{ margin:0; }
.site-footer a{
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color .2s ease, border-color .2s ease;
}
.site-footer a:hover{ color: var(--link); border-color: var(--link); }

/* Typography helpers */
.prose h1{ font-size: clamp(1.8rem, 3vw, 2.2rem); margin: .5rem 0 1rem; }
.prose h2{ font-size: clamp(1.4rem, 2.4vw, 1.6rem); margin: 1.25rem 0 .5rem; }
.prose p{ margin:.5rem 0; }
a{ color: var(--link); }

/* Codey blocks */
.code-block{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1rem;
  overflow:auto;
}

/* Cards & forms */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}
.form{ display:grid; gap:.75rem; max-width:420px; }
.form label span{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.25rem; }
.form input{
  width:100%;
  padding:.625rem .75rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--text);
}
.form button{
  border:1px solid var(--border);
  background:#111;
  color:#fff;
  padding:.6rem .9rem;
  border-radius:8px;
  cursor:pointer;
}
.form button:hover{ opacity:.9; }

/* Blog list */
.post-list{ display: grid; gap: 1rem; }
.post-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}
.post-card h3, .post-card h2{ margin: 0 0 .25rem; }
.meta{ color: var(--muted); font-size:.9rem; margin-bottom:.5rem; }
.read-more{ text-decoration:none; }

/* Blog post body */
.post-body img{ max-width:100%; height:auto; border-radius:8px; }
.post-body pre{
  background:#0b0b0b; color:#f4f4f4;
  padding:.75rem 1rem; border-radius:10px; overflow:auto;
}
.post-body code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* ASCII + list styles */
.logo{
  font-size:12px;
  color:#000000;
  margin-bottom:20px;
  margin-top: 40px;
  white-space:pre-wrap;
  font-family:monospace;
}
.command-list{
  font-family:monospace;
  font-size:14px;
  line-height:1.5;
  margin:1rem 0 2rem;
}
.command-list a{ color: var(--link); text-decoration:none; }
.command-list a:hover{ color:#555; }
.curl-command{ color:#000000; }
.comment{ color:gray; }

/* Auth page */
.auth-wrap{ display:flex; justify-content:center; padding:clamp(1rem,3vw,2rem) 0; }
.auth-form{ width:100%; max-width:420px; margin:0 auto; }
.auth-title{ margin:0 0 .25rem; }
.subtle{ color:var(--muted); margin:0 0 1rem; font-size:.95rem; }
.form.form-vertical label{ display:flex; flex-direction:column; gap:.35rem; }
.input-with-button{ display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:center; }
button.ghost{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:.5rem .7rem;
  border-radius:8px;
  cursor:pointer;
}
button.ghost:hover{ background:#f3f4f6; }
.actions{ margin-top:.25rem; }
button.primary{
  width:100%;
  border:1px solid var(--border);
  background:#111;
  color:#fff;
  padding:.7rem .9rem;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
button.primary:hover{ opacity:.92; }

/* Remove any box/border from admin form */
.form.no-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* === Header/Nav dark makeover === */
.site-header{
  background:#222 !important;           /* dark gray bar */
}
.brand{
  color:#39ff14 !important;             /* neon green logo text */
}
.main-nav a{
  color:#ffffff !important;             /* white links */
  background: transparent !important;
  transition: color .15s ease, background .15s ease;
}
.main-nav a:hover{
  color:#d1d5db !important;             /* light gray hover */
  background: rgba(255,255,255,0.06) !important;
}
.main-nav a:focus{
  outline: 2px solid #39ff14;
  outline-offset: 2px;
  border-radius: 8px;
}

pre {
  line-height: 1.2;     /* tighter line spacing */
  margin: 0;            /* remove extra spacing around */
  font-family: monospace;
}