/* digitalcyberia CMS — brushed-chrome dark theme.
   Extends the DC mark (brushed steel + electric-blue edge glow, faceted
   diagonal cuts) across the site: near-black canvas, cool steel surfaces,
   a circuit-blue interactive color, and a cyan glow reserved for active /
   important states. Chamfered (cut-corner) shapes echo the mark's blade
   facets in a few signature places rather than on every box.
   All themed via CSS variables so settings can swap palettes. */
:root {
  --bg:            #07090c;
  --bg-panel:      #0e1218;
  --surface:       #141922;
  --surface-2:     #1a212c;
  --hover:         #182029;
  --border:        rgba(180,205,235,0.08);
  --border-strong: rgba(180,205,235,0.14);
  --text:          #eef2f7;
  --text-2:        #c3cddb;
  --text-3:        #85919f;
  --text-4:        #5b6570;
  --primary:       #2f6fed;
  --primary-2:     #4f8dff;
  --primary-3:     #8ec4ff;
  --primary-rgb:   47,111,237;
  --accent:        #22d3ee;
  --accent-rgb:    34,211,238;
  --green:         #10b981;
  --amber:         #fbbf24;
  --danger:        #f87171;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-xs:     6px;
  --cut:           10px;   /* chamfer size for the mark's cut-corner motif */
  --cut-sm:        6px;
  --sidebar-w:     242px;
  --header-h:      40px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Chakra Petch', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  --shadow: 0 1px 0 rgba(0,0,0,0.3), 0 8px 30px rgba(0,0,0,0.4);
  --glow-line: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.55), rgba(var(--primary-rgb),0.35), transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(47,111,237,0.10), transparent 60%),
    radial-gradient(900px 600px at -8% 110%, rgba(34,211,238,0.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "cv01", "ss03";
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--primary-2); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-3); text-decoration: none; }

::selection { background: rgba(79,141,255,0.28); }

/* decoration: faint grid + top accent line */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background:
    repeating-linear-gradient(113deg, rgba(180,210,255,0.014) 0px, rgba(180,210,255,0.014) 1px, transparent 1px, transparent 5px),
    rgba(13,15,19,0.86);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--border);
  box-shadow: inset -60px 0 70px -66px rgba(var(--accent-rgb),0.22);
  padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 20;
}

.sidebar .brand {
  display: flex; align-items: center; gap: 11px;
  position: relative;
  padding: 4px 6px 24px;
  margin-bottom: 6px;
}
.sidebar .brand::after {
  content: "";
  position: absolute; left: 4px; right: 4px; bottom: 0; height: 1px;
  background: var(--glow-line);
}
.sidebar .brand-link {
  display: block; text-decoration: none; width: 100%;
}
.sidebar .brand-link:hover .brand-logo {
  filter: drop-shadow(0 0 9px rgba(var(--accent-rgb),0.4));
}
.sidebar .brand-logo {
  /* Fills the sidebar width in %, keeps the logo's true 3:1 ratio so it
     scales cleanly on any device; clamp caps the height so wide sidebars
     never render it oversized/tall. */
  width: 100%; max-height: clamp(40px, 4.5vw, 64px);
  aspect-ratio: 2172 / 724;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  transition: filter .2s;
}
.sidebar .brand .mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(47,111,237,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.sidebar .brand .name {
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.15;
}
.sidebar .brand .name small {
  display: block; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-4); margin-top: 3px;
}

.sidebar .nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-4);
  padding: 14px 10px 8px;
}
.sidebar nav a.navlink {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px 9px 12px; border-radius: var(--radius-xs);
  color: var(--text-2); font-weight: 510; font-size: 13.5px;
  font-family: var(--font-head); letter-spacing: 0.01em;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0 transparent;
}
.sidebar nav a.navlink:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.sidebar nav a.navlink.active {
  background: linear-gradient(90deg, rgba(var(--primary-rgb),0.18), rgba(var(--accent-rgb),0.05) 70%, transparent);
  color: #fff;
  border-color: rgba(var(--accent-rgb),0.22);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.sidebar nav a.navlink .glyph {
  width: 22px; text-align: center; font-size: 14px; color: var(--text-3);
}
.sidebar nav a.navlink.active .glyph { color: var(--accent); text-shadow: 0 0 8px rgba(var(--accent-rgb),0.55); }

.sidebar .spacer { flex: 1; }
.sidebar .side-foot {
  font-size: 11.5px; color: var(--text-3);
  padding: 12px 10px 2px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

/* ---------- top bar ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  height: var(--header-h);
  padding: 0 26px;
  border-bottom: 1px solid var(--border);
  background: rgba(7,9,11,0.72);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 15;
}
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--glow-line);
  opacity: .8;
}
.topbar .hamburger { display: none; background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer; padding: 6px; }

.topbar .searchbox {
  flex: 1; max-width: 420px; position: relative;
}
.topbar .searchbox input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px 8px 34px;
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-family: var(--font);
}
.topbar .searchbox input::placeholder { color: var(--text-4); }
.topbar .searchbox input:focus {
  border-color: rgba(79,141,255,0.5);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(79,141,255,0.14);
}
.topbar .searchbox .mag {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-4); pointer-events: none; font-size: 13px;
}

.topbar .topright { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar .topright .user-chip { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-2); }
.topbar .topright .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  border-radius: var(--radius-xs);
  padding: 7px 15px;
  font-size: 13px; font-weight: 510;
  cursor: pointer;
  font-family: var(--font);
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); color: var(--text); text-decoration:none; }
.btn.primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 60%, var(--accent) 140%);
  border-color: transparent; color: #fff;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  transition: filter .16s, background .16s;
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--primary-2) 0%, var(--accent) 140%);
  color:#fff;
  filter: drop-shadow(0 3px 14px rgba(var(--primary-rgb),0.45));
}

/* search dialog (mobile) */
.search-dialog { display:none; position:fixed; inset:0; background:rgba(4,5,8,.7); backdrop-filter:blur(8px); z-index:50; align-items:flex-start; justify-content:center; padding-top:11vh; }
.search-dialog.open { display:flex; }
.search-dialog .panel { width:min(560px,92vw); background:var(--bg-panel); border:1px solid var(--border-strong); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.search-dialog input { width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border-strong); color:var(--text); border-radius:var(--radius-xs); padding:12px 16px; font-size:15px; outline:none; font-family:var(--font); }
.search-dialog input:focus { border-color:rgba(79,141,255,0.5); }
.sdialog-results { margin-top:12px; display:flex; flex-direction:column; gap:4px; max-height:50vh; overflow-y:auto; }
.sdialog-results a { color:var(--text-2); padding:9px 11px; border-radius:var(--radius-xs); font-size:14px; }
.sdialog-results a:hover { background:var(--hover); color:var(--text); text-decoration:none; }

/* ---------- content ---------- */
.content {
  flex: 1; min-width: 0;
  padding: 24px 8px 80px;
  width: 100%;
}

.breadcrumb {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--text-4);
  margin: 0 0 26px; letter-spacing:.01em;
}
.breadcrumb a { color:var(--text-4); }
.breadcrumb a:hover { color:var(--primary-2); }
.breadcrumb .sep { opacity:.4; }
.breadcrumb .here { color:var(--text-2); font-weight:510; }

h1.title {
  font-family: var(--font-head);
  font-size: 34px; line-height:1.14;
  letter-spacing:-0.01em; font-weight:600;
  margin:0 0 8px;
  color:var(--text);
}
.page-meta { color:var(--text-3); font-size:13px; margin-bottom:26px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.page-meta .dot { color:var(--text-4); }
.lead { color:var(--text-2); font-size:16px; max-width:72ch; line-height:1.65; }

/* hero / editable home block — the top-right facet echoes the mark's cut blade tips */
.hero {
  --hero-cut: 46px;
  position: relative;
  border: 1px solid var(--border);
  clip-path: polygon(0 0, calc(100% - var(--hero-cut)) 0, 100% var(--hero-cut), 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(113deg, rgba(180,210,255,0.02) 0px, rgba(180,210,255,0.02) 1px, transparent 1px, transparent 6px),
    linear-gradient(135deg, rgba(var(--primary-rgb),0.18), rgba(var(--accent-rgb),0.07) 60%, transparent),
    var(--bg-panel);
  padding: 30px 44px 30px 34px;
  margin-bottom: 40px;
  overflow: hidden;
}
.hero::before {
  /* thin glowing seam along the cut facet */
  content: "";
  position: absolute; top:0; right:0; width: calc(var(--hero-cut) * 1.42); height: calc(var(--hero-cut) * 1.42);
  background: linear-gradient(135deg, transparent calc(50% - 1px), rgba(var(--accent-rgb),0.65) 50%, transparent calc(50% + 1px));
  filter: blur(.3px);
  pointer-events:none;
}
.hero::after {
  content: "";
  position: absolute; right:-60px; top:-60px;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.22), transparent 70%);
  pointer-events:none;
}
.hero h2 { margin:0 0 8px; font-size:24px; font-weight:600; letter-spacing:-0.01em; font-family: var(--font-head); }
.hero p { margin:0; color:var(--text-2); font-size:15px; max-width:60ch; line-height:1.65; }

/* Homepage region that isn't the hero — plain content flow. */
.page-region { margin-bottom: 8px; }

/* section index: reverse-chron summary cards */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.section-head .count { font-size:12px; color:var(--text-4); font-weight:510; }

.cardlist { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.article-card {
  display:flex; gap:20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color .16s, transform .16s, background .16s, box-shadow .16s;
  align-items:flex-start;
}
.article-card:hover {
  border-color: rgba(var(--accent-rgb),0.35);
  background: rgba(255,255,255,0.035);
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(0,0,0,0.35), 0 1px 0 rgba(var(--accent-rgb),0.14);
  text-decoration:none;
}
.article-card .thumb {
  width: 92px; height: 92px; border-radius: var(--radius-xs);
  object-fit: cover; flex: 0 0 92px;
  background: linear-gradient(135deg, var(--bg-panel), var(--surface-2));
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-3); font-size: 24px;
}
/* release-date badge (month/day) — a small HUD-style chip, cut corner like the mark */
.article-card .thumb.date-badge {
  flex-direction: column; gap: 0;
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: relative;
  background:
    repeating-linear-gradient(120deg, rgba(180,210,255,0.03) 0px, rgba(180,210,255,0.03) 1px, transparent 1px, transparent 5px),
    linear-gradient(150deg, var(--surface-2), var(--bg-panel));
  border-color: rgba(var(--accent-rgb),0.16);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
  transition: border-color .16s;
}
.article-card:hover .thumb.date-badge { border-color: rgba(var(--accent-rgb),0.4); }
.article-card .date-badge .db-month {
  font-size: 13px; line-height: 1.1; color: var(--accent);
  letter-spacing: 0.14em;
}
.article-card .date-badge .db-day {
  font-size: 38px; line-height: 1.02; font-weight: 650;
  color: var(--text);
}
.article-card .ac-body { flex:1; min-width:0; }
.article-card .ac-kicker {
  font-family: var(--font-head);
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--primary-3); margin-bottom:6px;
}
.article-card h3 { margin:0 0 6px; font-size:17px; font-weight:590; letter-spacing:-0.01em; color:var(--text); }
.article-card .ac-sum { color:var(--text-2); font-size:13.5px; margin:0 0 12px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-card .ac-meta { color:var(--text-4); font-size:12px; display:flex; align-items:center; gap:10px; }

/* page body / blocks — article measure: 80% of the content column on
   desktop/tablet, 95% on phones (see the 640px media query below).
   --article-w lives here so both text and figure blocks share one knob. */
.page-body { margin-top: 10px; --article-w: 80%; }
.block { margin-bottom: 28px; }
figure.block { margin: 0 0 28px; max-width: var(--article-w); }  /* reset UA default 40px side margins so images align with text */
.block.richtext, .block.text { max-width: var(--article-w); color: var(--text-2); font-size: 15.5px; line-height:1.7; }
.block.richtext p { margin: 0 0 1em; }
.block.richtext h2, .block.richtext h3 { color: var(--text); letter-spacing:-0.01em; }
.block img { max-width: 100%; width: 100%; height: auto; border-radius: var(--radius-sm); border:1px solid var(--border); }
.block .caption { color:var(--text-4); font-size:12.5px; margin-top:8px; }
.block.quote {
  border-left:3px solid var(--accent);
  background: rgba(255,255,255,0.02);
  padding: 18px 24px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-style: italic; font-size:17px; color:var(--text-2);
}
.block.banner {
  background: linear-gradient(135deg, rgba(var(--primary-rgb),0.12), rgba(var(--accent-rgb),0.07));
  border:1px solid var(--border); border-radius:var(--radius-xs);
  padding: 15px 20px;
}
.block.banner a { font-weight:600; color:var(--primary-2); }

.sources { border-top:1px solid var(--border); margin-top:38px; padding-top:18px; font-size:13px; color:var(--text-3); }
.sources h4 { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--text-4); }
.sources ul { margin:0; padding-left:18px; }
.sources li { margin-bottom:3px; }

.related { margin-top:42px; border-top:1px solid var(--border); padding-top:20px; }
.related h4 { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--text-4); margin:0 0 14px; }
.related .tags { display:flex; flex-wrap:wrap; gap:8px; }
.related .tag {
  background:rgba(255,255,255,0.03); border:1px solid var(--border); color:var(--text-2);
  border-radius:999px; padding:7px 15px; font-size:13px; font-weight:510;
  transition: border-color .14s, color .14s;
}
.related .tag:hover { border-color:var(--accent); color:var(--accent); }

/* home: "Latest" heading */
.sec-title { display:flex; align-items:center; gap:12px; margin:0 0 4px; font-size:15px; font-weight:600; letter-spacing:-0.005em; color:var(--text); font-family: var(--font-head); }
.sec-title .bar { width:22px; height:2px; border-radius:1px; background:linear-gradient(90deg,var(--primary),var(--accent)); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.55); }

/* admin */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:10px; }
.stat { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.stat .num { font-size:30px; font-weight:510; letter-spacing:-0.02em; }
.stat .lbl { color:var(--text-3); font-size:12px; margin-top:3px; }

/* auth */
.auth-wrap { display:flex; justify-content:center; padding-top:9vh; }
.auth-card { width:min(380px,100%); background:rgba(255,255,255,0.02); border:1px solid var(--border-strong); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.auth-card h1 { font-size:22px; font-weight:510; margin:0 0 24px; letter-spacing:-0.02em; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:12.5px; font-weight:510; color:var(--text-2); margin-bottom:7px; }
.field input { width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--border-strong); color:var(--text); border-radius:var(--radius-xs); padding:11px 14px; font-size:14px; outline:none; font-family:var(--font); }
.field input:focus { border-color:rgba(79,141,255,0.55); box-shadow:0 0 0 3px rgba(79,141,255,0.12); }

/* Dark-native dropdowns: CMS selects mirror inputs instead of the white OS default. */
select,
.field select {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-strong);
  color:var(--text);
  border-radius:var(--radius-xs);
  padding:9px 12px;
  font-size:13px;
  font-family:var(--font);
  outline:none;
  cursor:pointer;
}
select:focus, .field select:focus {
  border-color:rgba(79,141,255,0.55);
  box-shadow:0 0 0 3px rgba(79,141,255,0.12);
}
option { background:#16181d; color:var(--text); }
.flash { background:rgba(248,113,113,0.1); border:1px solid rgba(248,113,113,0.3); color:var(--danger); border-radius:var(--radius-xs); padding:11px 15px; margin-bottom:16px; font-size:13.5px; }

.results .res-item { padding:14px 0; border-bottom:1px solid var(--border); text-decoration:none; display:block; }
.results .res-item:hover { text-decoration:none; }
.results .res-item h3 { margin:0 0 4px; font-size:16px; font-weight:590; color:var(--text); }
.results .res-sum { color:var(--text-2); font-size:13.5px; margin:0; }

.empty { color:var(--text-4); padding:26px 0; }

/* ---------- responsive / hamburger ---------- */
@media (max-width: 860px) {
   .sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .22s ease; box-shadow:12px 0 44px rgba(0,0,0,.5); }
   .sidebar.open { transform:translateX(0); }
  .topbar .hamburger { display:block; }
  .topbar .searchbox { display:none; }
  .topbar .mag-btn { display:flex; }
  .content { padding:20px 8px 70px; }
  .article-card { flex-direction:row; padding:16px; }
}
@media (min-width: 861px) { .topbar .mag-btn { display:none; } }
/* Phones only: the logo is a desktop/tablet nicety — drop it from the drawer. */
@media (max-width: 640px) {
  .sidebar .brand { display:none; }
  .page-body { --article-w: 95%; }
}
.mag-btn { background:none; border:none; color:var(--text-3); font-size:18px; cursor:pointer; padding:6px; display:flex; align-items:center; justify-content:center; }
.sidebar-mask { display:none; }
@media (max-width:860px) { .sidebar-mask.open { display:block; position:fixed; inset:0; background:rgba(3,4,7,.55); z-index:19; } }

/* thin scrollbars */
.sidebar::-webkit-scrollbar, .sdialog-results::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-thumb, .sdialog-results::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:8px; }

/* ---------- auth ---------- */
.auth-card { max-width:420px; margin:40px auto; }
.sso-divider { display:flex; align-items:center; gap:12px; color:var(--text-4); font-size:12px; margin:20px 0 12px; }
.sso-divider::before, .sso-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.sso-row { display:flex; gap:10px; }
.sso-row .sso-btn { flex:1; text-align:center; }

/* ---------- Comments (Merl #1781) ---------- */
.comments { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border); }
.comments h4 { margin: 0 0 18px; }
.c-count { color: var(--text-4); font-weight: 400; }
.c-empty, .c-login { color: var(--text-4); font-size: 14px; }
.comment { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.comment .comment, .c-reply { margin-top: 12px; margin-left: 28px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-xs); border-bottom: 1px solid var(--border); }
.c-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.c-author { font-size: 14px; }
.c-badge { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.c-badge.human { color: var(--green, #10b981); border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.07); }
.c-badge.ai { color: #53d8e8; border-color: rgba(83,216,232,.35); background: rgba(83,216,232,.08); }
.c-date { color: var(--text-4); font-size: 12px; }
.c-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.c-reply-form { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; }
.c-reply-form textarea { flex: 1; }
.c-form { margin-top: 22px; }
.c-form textarea { width: 100%; min-height: 84px; resize: vertical; }
.c-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.c-hint { color: var(--text-4); font-size: 12px; }

/* article table typesetting — generous whitespace (Merl #1785, 2026-10-17) */
.block.richtext table {
  border-collapse: collapse; width: 100%;
  margin: 2.4em 0 2.8em; font-size: 14.5px;
}
.block.richtext caption {
  caption-side: top; text-align: left;
  color: var(--text-4); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 0 0 1.1em; line-height: 1.5;
}
.block.richtext th, .block.richtext td {
  text-align: left; vertical-align: top;
  padding: 0.9em 1.6em 0.9em 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
.block.richtext thead th {
  color: var(--text); font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1.05em;
}
.block.richtext tbody tr:last-child td { border-bottom: none; }
.block.richtext td.num, .block.richtext th.num {
  text-align: right; padding-right: 0;
  font-variant-numeric: tabular-nums;
}

/* column-gap fix (Merl #1785): the first pass zeroed left padding, so adjacent
   columns ran together ("30,27216.9 s"). Symmetric gaps; flush only at edges. */
.block.richtext th, .block.richtext td { padding: 0.9em 1.4em; }
.block.richtext th:first-child, .block.richtext td:first-child { padding-left: 0; }
.block.richtext th:last-child, .block.richtext td:last-child { padding-right: 0; }