:root{--bg:#f5f7fb;--surface:#fff;--surface-2:#eef2f7;--text:#111827;--muted:#64748b;--line:#dbe3ee;--brand:#2864e6;--brand-2:#173a96;--good:#07815c;--warn:#a15c00;--bad:#c43d4b;--shadow:0 14px 40px rgba(15,23,42,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}html[data-theme=dark]{--bg:#0b1220;--surface:#111b2d;--surface-2:#17243a;--text:#e5edf8;--muted:#94a7c1;--line:#263852;--brand:#6d9bff;--brand-2:#a9c1ff;--good:#42d7a0;--warn:#f5bd69;--bad:#ff8691;--shadow:0 16px 45px rgba(0,0,0,.25)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);line-height:1.6}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.container{width:min(1160px,calc(100% - 40px));margin:auto}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:16px;top:16px;z-index:100;background:var(--surface);padding:10px;border-radius:8px}.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav-wrap{min-height:72px;display:flex;align-items:center;gap:32px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none!important}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;font-weight:800}.brand strong{display:block;letter-spacing:.12em;font-size:14px}.brand small{display:block;font-size:9px;letter-spacing:.15em;color:var(--muted)}.desktop-nav{display:flex;gap:25px;margin-left:auto}.desktop-nav a,.mobile-nav a{color:var(--muted);font-weight:600}.desktop-nav a:hover,.mobile-nav a:hover{color:var(--text);text-decoration:none}.nav-actions{display:flex;align-items:center;gap:10px}.nav-user{font-weight:600;color:var(--text);font-size:14px}.icon-button,.mobile-menu{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;width:36px;height:36px;cursor:pointer}.mobile-menu{display:none}.mobile-nav{display:none;gap:14px;padding:0 20px 18px}.site-main{min-height:calc(100vh - 300px);padding:52px 0 90px}.site-footer{border-top:1px solid var(--line);padding:42px 0 24px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer-grid h3{font-size:13px;text-transform:uppercase;letter-spacing:.1em}.footer-grid a:not(.brand){display:block;color:var(--muted);margin:7px 0}.footer-bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.muted{color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 17px;border:0;border-radius:9px;background:var(--brand);color:white;font-weight:700;cursor:pointer;text-decoration:none!important;box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 22%,transparent)}.button:hover{filter:brightness(1.08)}.button-small{padding:8px 12px;font-size:13px}.button-ghost{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none}.button-danger{background:var(--bad)}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;padding:45px 0 70px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--brand);font-weight:800}.hero h1{font-size:clamp(38px,6vw,72px);letter-spacing:-.06em;line-height:1.02;margin:14px 0 18px}.hero p{font-size:18px;color:var(--muted);max-width:640px}.hero-panel{background:linear-gradient(145deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}.signal{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}.signal:last-child{border:0}.signal-label{display:flex;align-items:center;gap:10px}.dot{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 15%,transparent)}.search-box{display:flex;gap:10px;margin-top:28px}.search-box input{flex:1}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:28px 0 18px}.section-head h2{margin:0;font-size:25px;letter-spacing:-.03em}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tool-card{display:flex;gap:13px;align-items:flex-start;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:13px;color:var(--text);transition:.18s;text-decoration:none!important}.tool-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow)}.tool-icon{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--brand) 13%,transparent);color:var(--brand);font-size:11px;font-weight:800}.tool-card-body{display:grid;gap:3px;min-width:0}.tool-card-body strong{font-size:14px}.tool-card-body span{font-size:12px;color:var(--muted);line-height:1.45}.arrow{margin-left:auto;color:var(--muted)}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.category-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--text);text-decoration:none!important}.category-card strong{display:block}.category-card span{font-size:12px;color:var(--muted)}.page-head{max-width:790px;margin:8px 0 35px}.page-head h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.055em;line-height:1.05;margin:10px 0}.page-head p{font-size:17px;color:var(--muted)}.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:18px}.tool-shell{max-width:900px}.tool-interface{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);margin:25px 0 36px}.tool-interface h2{margin-top:0;font-size:18px}.field{display:grid;gap:7px;margin:14px 0;font-size:14px;font-weight:700}.field input,.field textarea,.field select,.search-box input{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);padding:11px 12px;font:inherit;font-weight:400}.field textarea{min-height:150px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid color-mix(in srgb,var(--brand) 22%,transparent);border-color:var(--brand)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.check-grid label{display:flex;align-items:center;gap:7px;font-size:13px}.result{margin-top:20px;padding:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;overflow:auto}.result:empty{display:none}.result pre{white-space:pre-wrap;word-break:break-word}.result h3{margin-top:0}.result-table{width:100%;border-collapse:collapse;font-size:14px}.result-table th,.result-table td{text-align:left;padding:9px;border-bottom:1px solid var(--line);vertical-align:top}.status-good{color:var(--good)}.status-warn{color:var(--warn)}.status-bad{color:var(--bad)}.score{font-size:48px;font-weight:800;letter-spacing:-.06em}.notice{padding:13px 15px;border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--text);font-size:14px}.tool-copy{display:grid;grid-template-columns:1fr 1fr;gap:26px}.prose{max-width:800px}.prose h2{margin-top:35px}.prose li{margin:8px 0}.faq{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line);padding:13px 0}.faq summary{cursor:pointer;font-weight:700}.flash-stack{padding-top:16px}.flash{border-radius:9px;padding:11px 14px;font-size:14px;margin-bottom:8px}.flash-success{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)}.flash-error{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}.empty-state{text-align:center;padding:80px 0}.status-code{font-size:90px;letter-spacing:-.08em;color:var(--brand);font-weight:900}.auth-card{width:min(460px,100%);margin:30px auto;background:var(--surface);border:1px solid var(--line);padding:28px;border-radius:16px;box-shadow:var(--shadow)}.auth-card h1{margin-top:0}.admin-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:var(--surface);border:1px solid var(--line);padding:18px;border-radius:12px}.stat strong{display:block;font-size:30px}.stat span{color:var(--muted);font-size:12px}.data-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}.data-table th,.data-table td{padding:12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}.data-table th{color:var(--muted);font-weight:700}.hidden{display:none!important}@media(max-width:850px){.hero{grid-template-columns:1fr;gap:25px}.tool-grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(2,1fr)}.tool-copy{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.desktop-nav{display:none}.mobile-menu{display:block}.mobile-nav.open{display:grid}}@media(max-width:560px){.container{width:min(100% - 28px,1160px)}.site-main{padding-top:30px}.nav-wrap{min-height:64px;gap:8px}.nav-actions{margin-left:auto}.nav-user{display:none}.hero{padding:25px 0 42px}.hero h1{font-size:44px}.search-box{display:grid}.tool-grid,.category-grid,.form-grid{grid-template-columns:1fr}.check-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:grid;gap:8px}.status-code{font-size:68px}}

/* ==========================================================================
   BITCOPS BRAND THEME
   Overrides the stock indigo palette so tools.bitcops.net matches the rest
   of bitcops.net: near-black surfaces, neon-green accent, JetBrains Mono
   for headings and UI chrome. Implemented purely as variable overrides plus
   a few chrome rules, so the underlying component CSS is untouched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bc-bg-void:#05070a;
  --bc-bg:#0a0d12;
  --bc-surface:#0d1117;
  --bc-elevated:#161b24;
  --bc-elevated-2:#1d232e;
  --bc-line:rgba(255,255,255,.08);
  --bc-line-strong:rgba(255,255,255,.16);
  --bc-text:#eef2f6;
  --bc-text-2:#c3cad4;
  --bc-muted:#8891a0;
  --bc-green:#2ee6a6;
  --bc-green-dim:#1fcf93;
  --bc-blue:#4dc9ff;
  --bc-danger:#ff4d4d;
  --bc-warn:#f5bd69;
  --bc-glow:0 0 24px rgba(46,230,166,.35);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Dark is the default theme and the canonical BitCops look. */
html[data-theme="dark"], html[data-theme=""], html:not([data-theme="light"]){
  --bg:var(--bc-bg);
  --surface:var(--bc-surface);
  --surface-2:var(--bc-elevated);
  --text:var(--bc-text);
  --muted:var(--bc-muted);
  --line:var(--bc-line);
  --brand:var(--bc-green);
  --brand-2:var(--bc-green-dim);
  --good:var(--bc-green);
  --warn:var(--bc-warn);
  --bad:var(--bc-danger);
  --shadow:0 16px 45px rgba(0,0,0,.45);
  font-family:var(--font-sans);
}

/* Light mode stays available via the toggle, but on-brand rather than indigo. */
html[data-theme="light"]{
  --bg:#f4f7f9;
  --surface:#ffffff;
  --surface-2:#eaf2ee;
  --text:#0a0d12;
  --muted:#5a6572;
  --line:#d7e2db;
  --brand:#0f9f74;
  --brand-2:#0b7d5a;
  --good:#0f9f74;
  --warn:#a15c00;
  --bad:#c43d4b;
  --shadow:0 14px 40px rgba(10,13,18,.10);
  font-family:var(--font-sans);
}

html:not([data-theme="light"]) body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(46,230,166,.08), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(77,201,255,.07), transparent 55%),
    var(--bc-bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Monospace chrome, matching the main site's terminal feel. */
h1,h2,h3,h4,h5,
.brand strong,.brand small,.eyebrow,.signal-label,
.section-head h2,.tool-card h3,.category-card h3,
.breadcrumbs,.status-code,.score{
  font-family:var(--font-mono);
  letter-spacing:-.01em;
}

.eyebrow,.signal-label{
  color:var(--bc-green);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.brand-mark{
  background:var(--bc-green);
  color:#05070a;
  font-family:var(--font-mono);
  font-weight:700;
}

html:not([data-theme="light"]) .site-header{
  background:rgba(10,13,18,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bc-line);
}

/* Primary action: neon green with dark text, like the main site's buttons. */
.button,.search-box button,button[type="submit"]{
  font-family:var(--font-mono);
  font-weight:700;
  background:var(--brand);
  color:#05070a;
  border:1px solid transparent;
  border-radius:8px;
}
.button:hover,.search-box button:hover,button[type="submit"]:hover{
  background:var(--brand-2);
  box-shadow:var(--bc-glow);
}
.button-ghost{
  background:transparent;
  color:var(--brand);
  border:1px solid var(--bc-line-strong);
}
.button-ghost:hover{
  background:rgba(46,230,166,.08);
  box-shadow:none;
}
.button-danger{ background:var(--bad); color:#fff; }

html:not([data-theme="light"]) .tool-card,
html:not([data-theme="light"]) .category-card,
html:not([data-theme="light"]) .hero-panel,
html:not([data-theme="light"]) .auth-card,
html:not([data-theme="light"]) .result{
  background:var(--bc-surface);
  border:1px solid var(--bc-line);
}
html:not([data-theme="light"]) .tool-card:hover,
html:not([data-theme="light"]) .category-card:hover{
  border-color:rgba(46,230,166,.35);
  box-shadow:0 0 0 1px rgba(46,230,166,.15), 0 12px 32px rgba(0,0,0,.4);
}

.tool-icon{ background:rgba(46,230,166,.12); color:var(--bc-green); font-family:var(--font-mono); }
.dot{ background:var(--bc-green); }
.status-good{ color:var(--bc-green); }
.status-warn{ color:var(--bc-warn); }
.status-bad{ color:var(--bc-danger); }

:focus-visible{ outline:2px solid var(--bc-green); outline-offset:2px; }

html:not([data-theme="light"]) input,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select{
  background:var(--bc-elevated);
  color:var(--bc-text);
  border:1px solid var(--bc-line);
  border-radius:8px;
}
html:not([data-theme="light"]) input:focus,
html:not([data-theme="light"]) textarea:focus,
html:not([data-theme="light"]) select:focus{
  border-color:var(--bc-green);
  box-shadow:0 0 0 3px rgba(46,230,166,.15);
  outline:none;
}

html:not([data-theme="light"]) .site-footer{
  background:var(--bc-bg-void);
  border-top:1px solid var(--bc-line);
}

/* ==========================================================================
   LEGAL DROPDOWN
   Built on <details>/<summary> so it works with no JavaScript and is
   keyboard operable. The links stay in the DOM, so crawlers still see them.
   ========================================================================== */

.nav-dropdown{ position:relative; }

.nav-dropdown > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:.35em;
  color:inherit;
}
.nav-dropdown > summary::-webkit-details-marker{ display:none; }
.nav-dropdown > summary::marker{ content:''; }

/* caret */
.nav-dropdown > summary::after{
  content:'';
  width:.42em;
  height:.42em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-.1em);
  transition:transform .18s ease;
  opacity:.7;
}
.nav-dropdown[open] > summary::after{
  transform:rotate(-135deg) translateY(-.1em);
  opacity:1;
}
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary{ color:var(--brand); }
.nav-dropdown > summary:focus-visible{ outline:2px solid var(--bc-green,#2ee6a6); outline-offset:3px; border-radius:4px; }

.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + .6em);
  right:0;
  min-width:200px;
  padding:.4em;
  display:flex;
  flex-direction:column;
  gap:.1em;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  z-index:60;
}
.nav-dropdown-menu a{
  padding:.55em .7em;
  border-radius:6px;
  white-space:nowrap;
  text-decoration:none;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible{
  background:rgba(46,230,166,.10);
  color:var(--brand);
  text-decoration:none;
}

/* The mobile drawer lists everything flat, so the dropdown never appears there. */
@media (max-width: 900px){
  .nav-dropdown{ display:none; }
}

/* ==========================================================================
   ADMIN DASHBOARD + EDITOR
   ========================================================================== */

.admin-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.85rem;
  margin-bottom:2rem;
}
.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1rem 1.1rem;
}
.stat-card .stat-label{ display:block; color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.35rem; }
.stat-card strong{ font-family:var(--font-mono); font-size:1.7rem; color:var(--brand); }

.admin-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.75rem;
  margin-bottom:2rem;
}
.admin-cols h2{ font-size:1.05rem; margin-bottom:.7rem; }

/* 14-day sparkline */
.spark{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:120px;
  padding:.75rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
}
.spark-bar{
  flex:1;
  background:linear-gradient(180deg,var(--brand),rgba(46,230,166,.25));
  border-radius:3px 3px 0 0;
  min-height:4px;
  transition:opacity .15s ease;
}
.spark-bar:hover{ opacity:.7; }

/* Editor */
.editor-form .field{ display:block; margin-bottom:1.1rem; }
.editor-form .field > span{ display:block; margin-bottom:.35rem; font-weight:600; }
.editor-seo{
  border:1px solid var(--line);
  border-radius:10px;
  padding:.85rem 1rem;
  margin-bottom:1.1rem;
  background:var(--surface);
}
.editor-seo summary{ cursor:pointer; font-weight:600; }
.editor-seo[open] summary{ margin-bottom:.9rem; color:var(--brand); }
.editor-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.5rem; }

/* Quill, themed to match the site instead of its default white */
#editor{ min-height:420px; }
.ql-toolbar.ql-snow,
.ql-container.ql-snow{ border-color:var(--line) !important; }
.ql-toolbar.ql-snow{ border-radius:8px 8px 0 0; background:var(--surface-2); }
.ql-container.ql-snow{ border-radius:0 0 8px 8px; background:var(--surface); font-size:1rem; }
.ql-editor{ min-height:420px; color:var(--text); font-family:var(--font-sans); line-height:1.7; }
.ql-editor.ql-blank::before{ color:var(--muted); font-style:normal; }
.ql-editor h2,.ql-editor h3,.ql-editor h4{ font-family:var(--font-mono); }
.ql-editor pre.ql-syntax{ background:var(--bc-bg-void,#05070a); color:var(--text); border:1px solid var(--line); border-radius:8px; }
.ql-snow .ql-stroke{ stroke:var(--muted); }
.ql-snow .ql-fill{ fill:var(--muted); }
.ql-snow .ql-picker{ color:var(--muted); }
.ql-snow .ql-picker-options{ background:var(--surface); border-color:var(--line) !important; }
.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke{ stroke:var(--brand) !important; }
.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill{ fill:var(--brand) !important; }

/* Published article body */
.article-body{ line-height:1.75; }
.article-body h2{ margin:2rem 0 .75rem; }
.article-body h3{ margin:1.5rem 0 .6rem; }
.article-body ul,.article-body ol{ margin:0 0 1rem 1.25rem; }
.article-body li{ margin-bottom:.4rem; }
.article-body pre{
  background:var(--bc-bg-void,#05070a);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1rem;
  overflow-x:auto;
}
.article-body blockquote{
  margin:1.25rem 0;
  padding:.5rem 0 .5rem 1.1rem;
  border-left:3px solid var(--brand);
  color:var(--text);
}
.article-body img{ border-radius:10px; }

@media (max-width: 700px){
  .stat-card strong{ font-size:1.35rem; }
  #editor,.ql-editor{ min-height:320px; }
}

/* EDITOR WEIGHT FIX + sparkline sizing */
.ql-editor,
.ql-editor p,
.ql-editor li{ font-weight:400; }
.ql-editor strong,
.ql-editor b{ font-weight:700; }
.editor-form .field{ display:block; }
.editor-form .field > span{ display:block; margin-bottom:.35rem; font-weight:600; }

/* with only a day or two of data a flexed bar spans the whole panel */
.spark{ justify-content:flex-start; }
.spark-bar{ flex:1 1 auto; max-width:48px; min-width:10px; }

/* ==========================================================================
   POST GRID + COMMENTS + UPLOAD
   ========================================================================== */

.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.4rem;
  margin-top:1.5rem;
}
.post-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.post-card:hover{
  border-color:rgba(46,230,166,.35);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.post-card-link{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.post-card-link:hover{ text-decoration:none; }

.post-card-media{ display:block; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card-media--empty{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(46,230,166,.12),rgba(77,201,255,.08));
}
.post-card-media--empty span{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.22em;
  color:var(--brand); opacity:.65;
}

.post-card-body{ display:flex; flex-direction:column; gap:.5rem; padding:1.1rem 1.2rem 1.3rem; flex:1; }
.post-card-date{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.post-card-title{ font-family:var(--font-mono); font-size:1.05rem; line-height:1.4; color:var(--text); }
.post-card-excerpt{ color:var(--muted); font-size:.94rem; line-height:1.6; flex:1; }
.post-card-more{ font-family:var(--font-mono); font-size:.85rem; color:var(--brand); margin-top:.2rem; }

/* Article hero */
.article-hero{ margin:0 0 2rem; }
.article-hero img{ width:100%; border-radius:12px; border:1px solid var(--line); }

/* Comments */
.comments{ margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line); }
.comments h2{ margin-bottom:1.2rem; }
.comments h3{ margin:2.5rem 0 .5rem; }

.comment-list{ list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:1rem; }
.comment{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1rem 1.15rem;
}
.comment p{ margin:0; }
.comment-admin{ border-color:rgba(46,230,166,.35); background:rgba(46,230,166,.05); }
.comment-reply{ margin-top:.9rem; margin-left:1.1rem; border-left:2px solid var(--brand); }
.comment-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:.45rem; font-size:.92rem; }
.comment-tag{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:#05070a; background:var(--brand); padding:.12em .5em; border-radius:4px;
}

.comment-form{ margin-top:1rem; }
.comment-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.comment-form .field{ display:block; margin-bottom:1rem; }
.comment-form .field > span{ display:block; margin-bottom:.35rem; font-weight:600; }
.captcha-field{ max-width:220px; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* Moderation */
.mod-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1rem 1.15rem;
  margin-bottom:1rem;
}
.mod-head{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center; }
.mod-body{
  background:var(--bc-bg-void,#05070a);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.8rem 1rem;
  margin:.7rem 0;
}
.mod-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mod-reply{ margin-top:.8rem; }
.mod-reply summary{ cursor:pointer; color:var(--brand); font-weight:600; }
.mod-reply form{ margin-top:.7rem; }

/* Upload preview */
.image-preview{ margin-bottom:.8rem; }
.image-preview img{ max-width:320px; width:100%; border-radius:10px; border:1px solid var(--line); display:block; }
.image-remove{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; font-size:.9rem; color:var(--muted); }
.image-remove input{ width:auto; }

@media (max-width: 600px){
  .post-grid{ grid-template-columns:1fr; }
  .comment-reply{ margin-left:.5rem; }
}


/* ==========================================================================
   SUBSCRIBE BAND
   ========================================================================== */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.subscribe-band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(46,230,166,.07), transparent 70%),
    var(--surface);
  padding:2.5rem 0;
  margin-top:3.5rem;
}
.subscribe-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2rem;
  align-items:center;
}
.subscribe-copy h2{ font-size:1.25rem; margin-bottom:.4rem; }
.subscribe-copy p{ color:var(--muted); margin:0; font-size:.95rem; max-width:46ch; }

.subscribe-form{ display:flex; gap:.6rem; align-items:stretch; }
.subscribe-form input[type="email"]{
  flex:1;
  min-width:0;
  padding:.7em .9em;
  border-radius:8px;
}
.subscribe-form .button{ white-space:nowrap; }

@media (max-width: 820px){
  .subscribe-inner{ grid-template-columns:1fr; gap:1.2rem; }
}
@media (max-width: 520px){
  .subscribe-form{ flex-direction:column; }
  .subscribe-form .button{ width:100%; }
}