/* 8ContentPro — shared theme (black · brushed steel · lime). Linked by every page. */
:root{
  --bg:#000000; --panel:#0a0a0b; --panel2:#0e0f11;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --ink:#ededf0; --mut:#8b8f98; --mut2:#6b6f78; --lime:#e9fc00; --radius:16px;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* author display rules must not defeat the hidden attribute */
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system, system-ui, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing:antialiased; }
a{ color:#cfd4dc; text-decoration:none; }
a:hover{ color:#fff; }

/* brushed-steel / metallic text */
.steel{ background:linear-gradient(178deg,#ffffff 0%,#f2f4f7 22%,#c3c9d2 55%,#8b93a0 82%,#6c7481 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.05); }
.lime{ color:var(--lime); }
.muted{ color:var(--mut); }

/* nav */
.nav{ position:sticky; top:0; z-index:40; backdrop-filter:blur(12px);
  background:rgba(0,0,0,.55); border-bottom:1px solid var(--line); }
.navi{ display:flex; align-items:center; justify-content:space-between; height:64px;
  max-width:1120px; margin:0 auto; padding:0 24px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ height:30px; display:block; }
.navlinks{ display:flex; align-items:center; gap:8px; }
.navlinks a.txt{ color:var(--mut); font-size:14px; padding:8px 12px; border-radius:9px; }
.navlinks a.txt:hover{ color:var(--ink); }

/* buttons — Resend style */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600;
  font-size:14px; padding:10px 18px; border-radius:10px; cursor:pointer; transition:.15s;
  white-space:nowrap; border:0; font-family:inherit; }
.btn.primary{ color:#0a0a0a; background:linear-gradient(180deg,#ffffff,#d7dbe2);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px rgba(255,255,255,.08); }
.btn.primary:hover{ background:linear-gradient(180deg,#ffffff,#e7eaef); }
.btn.primary:disabled{ opacity:.5; cursor:default; }
.btn.ghost{ color:var(--ink); background:#141416; border:1px solid var(--line2); }
.btn.ghost:hover{ background:#1b1b1e; border-color:rgba(255,255,255,.22); }
.btn.lg{ padding:13px 22px; font-size:15px; border-radius:12px; }
.btn.block{ width:100%; }

/* form controls */
.field{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line2);
  background:#0c0d0f; color:var(--ink); font-size:15px; font-family:inherit; }
.field:focus{ outline:none; border-color:rgba(233,252,0,.5); box-shadow:0 0 0 3px rgba(233,252,0,.08); }
.field::placeholder{ color:var(--mut2); }

/* card */
.card{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; }

/* code */
code,pre{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
pre{ background:#0c0d0f; border:1px solid var(--line2); border-radius:10px; padding:14px 16px;
  overflow-x:auto; font-size:14px; color:#cfd4dc; }
code.inl{ background:#0c0d0f; border:1px solid var(--line2); border-radius:5px; padding:1px 6px;
  font-size:14px; color:#cfd4dc; }

/* footer */
.foot{ border-top:1px solid var(--line); margin-top:56px; padding:30px 24px;
  color:var(--mut2); font-size:13px; text-align:center; }
.foot a{ color:var(--mut); }
.foot a:hover{ color:var(--ink); }