/* =========================================================
   Xまとめドン — デザイントークン
   アングラ・警告表示・ネット掲示板文化・ディスカウントストアの
   圧縮陳列をイメージした情報密度重視のUI。明るい紙面(白背景)に
   太い黒枠と警告色のステッカーを貼ったZINE/号外のようなトーン。
   既存企業の配色・ロゴ・店舗デザインの直接模倣はしない。

   トークン設計:
   - --yellow/--magenta/--cyan は「塗り(背景色)」専用。バッジ・ボタンなど
     色そのものに黒文字/白文字を乗せる自己完結した部品でのみ使う。
   - --yellow-ink/--magenta-ink/--cyan-ink は「文字色・枠線」専用。
     明るい紙面の上にそのまま乗せても読めるよう暗めに調整した色。
   - 管理画面(.admin-body)は下記でこれらの変数を丸ごと再定義し、
     暗いテーマのまま個別ルールを書き換えずに済むようにしている。
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-raise: #f2f1ec;
  --bg-card: #ffffff;
  --line: #dcdad2;
  --line-strong: #1a1a1a;

  --yellow: #ffd400;
  --yellow-ink: #6b5300;
  --magenta: #ff3fb8;
  --magenta-ink: #a3005f;
  --cyan: #00c2c2;
  --cyan-ink: #006d6d;
  --red: #d7263d;

  --text: #161616;
  --text-dim: #4a4a4a;
  --text-faint: #6c6c6c;

  --radius: 2px;
  --border-w: 3px;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
}

a { color: var(--magenta-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-4), 4vw, 48px);
}

/* skip link for keyboard/screen reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: #000;
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ---------- badges / warning tape ---------- */
/* .tapeは常に「塗り+それに合う文字色」の自己完結パーツなので、
   ページ全体のテーマが変わっても単体で可読性を保つ。 */
.tape {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border: 2px solid currentColor;
  background: repeating-linear-gradient(
    135deg, rgba(0,0,0,0.08) 0 6px, transparent 6px 12px
  );
  white-space: nowrap;
}
.tape-yellow { color: #000; background-color: var(--yellow); }
.tape-red { color: #fff; background-color: var(--red); }
.tape-magenta { color: #000; background-color: var(--magenta); }
.tape-cyan { color: #000; background-color: var(--cyan); }
.tape-outline { color: var(--yellow-ink); background: transparent; border-color: var(--yellow-ink); }

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  border-radius: var(--radius);
}

/* ---------- header ---------- */
.site-header {
  border-bottom: var(--border-w) solid var(--line-strong);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.wordmark svg { height: 40px; width: auto; }
.wordmark-text {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
}
.wordmark-tagline {
  font-size: 0.7rem;
  color: var(--text-dim);
  display: block;
}

.hot-keywords {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.hot-keywords-label {
  font-weight: 900;
  font-size: 0.7rem;
  color: #fff;
  background: var(--magenta-ink);
  padding: 2px 6px;
  flex-shrink: 0;
}
.hot-keywords a {
  color: var(--cyan-ink);
  font-size: 0.85rem;
  white-space: nowrap;
}

.search-box { display: flex; align-items: center; gap: var(--space-2); }
.search-box input[type="search"] {
  background: var(--bg-raise);
  border: 2px solid var(--line-strong);
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.85rem;
  width: 180px;
}
.search-box button {
  background: var(--yellow);
  border: 2px solid var(--line-strong);
  color: #000;
  font-weight: 900;
  padding: 6px 12px;
  cursor: pointer;
}

.menu-toggle {
  background: transparent;
  border: 2px solid var(--line-strong);
  color: var(--text);
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
}

.site-nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
}
.site-nav a {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.85rem;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--text);
  border-bottom-color: var(--magenta-ink);
  text-decoration: none;
}

/* ---------- breaking ticker ---------- */
/* 速報ティッカーは号外の見出し帯を意識して、あえて紙面より暗い帯を敷く */
.ticker {
  background: #1a0004;
  border-bottom: 2px solid var(--red);
  overflow: hidden;
  padding: 6px 0;
}
.ticker-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  flex-wrap: wrap;
  color: #fdf0f1;
}
.ticker-items {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.ticker-item { display: flex; gap: 6px; align-items: baseline; font-size: 0.85rem; color: #fdf0f1; }
.ticker-time { color: #e7a9b1; font-size: 0.75rem; }
.ticker-inner > a[href] { color: #fdf0f1; }

/* off-canvas menu */
.offcanvas {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: none;
}
.offcanvas.open { display: block; }
.offcanvas-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg);
  border-left: var(--border-w) solid var(--line-strong);
  padding: var(--space-4);
  overflow-y: auto;
}
.offcanvas-panel h3 { color: var(--magenta-ink); font-size: 0.85rem; margin: var(--space-4) 0 var(--space-2); }
.offcanvas-panel a { display: block; padding: 6px 0; color: var(--text); border-bottom: 1px solid var(--line); }
.offcanvas-close { background: none; border: 2px solid var(--line-strong); color: var(--text); padding: 4px 10px; cursor: pointer; }

/* ---------- layout ---------- */
.layout-3col {
  display: grid;
  grid-template-columns: 1.6fr 1.3fr 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
}
@media (max-width: 980px) {
  .layout-3col { grid-template-columns: 1fr; }
}

.section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  border-left: 6px solid var(--cyan-ink);
  padding-left: var(--space-2);
  margin: 0 0 var(--space-3);
}
.section-heading.magenta { border-color: var(--magenta-ink); }
.section-heading.yellow { border-color: var(--yellow-ink); }
.section-heading a.more { margin-left: auto; font-size: 0.75rem; color: var(--text-dim); }

/* ---------- cards ---------- */
.card-hero {
  border: var(--border-w) solid var(--line-strong);
  background: var(--bg-card);
  position: relative;
}
.card-hero-media {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #ececE6, #d6d4cb);
  position: relative;
  overflow: hidden;
}
.card-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.card-hero-body { padding: var(--space-4); }
.card-hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-2); }
.card-hero h2 {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.3;
  margin: var(--space-2) 0;
}
.card-hero h2 a { color: var(--text); }
.card-hero-summary { color: var(--text-dim); font-size: 0.9rem; }
.card-hero-stats { display: flex; gap: var(--space-4); font-size: 0.8rem; color: var(--text-faint); margin-top: var(--space-2); }

.list-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.list-item:last-child { border-bottom: none; }
.list-rank {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text-faint);
  min-width: 1.6em;
  text-align: center;
  flex-shrink: 0;
}
.list-item:nth-child(1) .list-rank { color: var(--yellow-ink); }
.list-item:nth-child(2) .list-rank { color: var(--cyan-ink); }
.list-item:nth-child(3) .list-rank { color: var(--magenta-ink); }
.list-body { min-width: 0; flex: 1; }
.list-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; font-size: 0.7rem; }
.list-title { font-weight: 700; font-size: 0.95rem; }
.list-title a { color: var(--text); }
.list-title a:hover { color: var(--magenta-ink); }
.list-sub { font-size: 0.75rem; color: var(--text-faint); margin-top: 2px; }

.col-panel {
  border: 2px solid var(--line-strong);
  background: var(--bg-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.list-thumb-link { flex-shrink: 0; }
.list-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  background: var(--bg-raise);
}

.news-card {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 0;
  overflow: hidden;
}
.news-card:hover { text-decoration: none; border-color: var(--magenta-ink); }
.news-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid var(--line-strong);
}
.news-card-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.news-card .list-title { color: var(--text); }
.news-card:hover .list-title { color: var(--magenta-ink); }

/* ---------- kurousagi don-hyou card ---------- */
.kurousagi-card {
  border: var(--border-w) solid var(--line-strong);
  background: var(--bg-card);
  padding: var(--space-4);
  margin: var(--space-5) 0;
}
.kurousagi-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.kurousagi-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 2px solid var(--line-strong);
  background: var(--yellow);
  border-radius: 50%;
  overflow: hidden;
}
.kurousagi-avatar svg, .kurousagi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kurousagi-card-title { font-weight: 900; color: var(--magenta-ink); font-size: 0.95rem; }
.kurousagi-card-byline { font-size: 0.75rem; color: var(--text-faint); }
.kurousagi-quote {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  margin: var(--space-2) 0;
  quotes: "「" "」";
}
.kurousagi-quote::before { content: open-quote; }
.kurousagi-quote::after { content: close-quote; }
.kurousagi-body { color: var(--text); font-size: 0.9rem; }

.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.meter { font-size: 0.75rem; }
.meter-label { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--text-dim); }
.meter-value { font-weight: 900; }
.meter-track {
  position: relative;
  height: 10px;
  background: repeating-linear-gradient(90deg, #e4e2da 0 2px, #efeee8 2px 4px);
  border: 1px solid var(--line-strong);
}
.meter-fill { height: 100%; background: var(--cyan); }
.meter.is-magenta .meter-fill { background: var(--magenta); }
.meter.is-magenta .meter-value { color: var(--magenta-ink); }
.meter.is-cyan .meter-value { color: var(--cyan-ink); }
.meter-scale { display: flex; justify-content: space-between; font-size: 0.6rem; color: var(--text-faint); margin-top: 2px; }

.kurousagi-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.fictional-notice {
  font-size: 0.65rem;
  color: var(--text-faint);
  border: 1px dashed var(--line-strong);
  padding: 3px 8px;
}
.don-verdict {
  font-weight: 900;
  color: #000;
  background: var(--yellow);
  border: 2px solid var(--line-strong);
  padding: 4px 10px;
  font-size: 0.8rem;
}

/* ---------- ad slot ---------- */
.ad-slot {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  margin: var(--space-4) 0;
  position: relative;
}
.ad-slot::before {
  content: "広告";
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.6rem;
  color: var(--text-faint);
  z-index: 1;
}
/* 広告が未設定(AdMax/AdSenseどちらも無効)の間だけ、枠線とプレースホルダー背景を表示する */
.ad-slot--empty {
  border: 2px dashed var(--line-strong);
  background: var(--bg-raise);
  color: var(--text-faint);
}
.pr-banner {
  background: var(--bg-raise);
  border-left: 4px solid var(--magenta-ink);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}

/* ---------- article detail ---------- */
.article-header { padding: var(--space-5) 0 var(--space-3); }
.article-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-2); }
.article-title { font-size: 1.9rem; font-weight: 900; line-height: 1.35; margin: var(--space-2) 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.8rem; color: var(--text-faint); margin-bottom: var(--space-3); }
.summary-box {
  border: 2px solid var(--cyan-ink);
  background: var(--bg-card);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 var(--space-5);
}
.summary-box-label { color: var(--cyan-ink); font-weight: 900; font-size: 0.75rem; margin-bottom: 6px; }

.article-body { max-width: 760px; }
.article-section { margin: var(--space-6) 0; }
.article-section h2 {
  font-size: 1.15rem;
  font-weight: 900;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 6px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-section h2::before { content: ""; width: 10px; height: 10px; background: var(--magenta); flex-shrink: 0; }
.label-fact { color: var(--cyan-ink); }
.label-claim { color: var(--magenta-ink); }
.label-unverified { color: var(--red); }

.fact-box, .notice-box {
  border-left: 4px solid var(--cyan-ink);
  background: var(--bg-raise);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  font-size: 0.9rem;
}
.notice-box { border-left-color: var(--red); }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-strong); }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-4); }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--magenta);
  border: 2px solid var(--bg);
}
.timeline-date { font-size: 0.75rem; color: var(--magenta-ink); font-weight: 900; }

.opinion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.opinion-col { padding: var(--space-3); border-top: 3px solid var(--line-strong); background: var(--bg-raise); }
.opinion-col.pro { border-top-color: var(--cyan-ink); }
.opinion-col.con { border-top-color: var(--red); }
.opinion-col.neutral { border-top-color: var(--text-faint); }
.opinion-col h3 { font-size: 0.8rem; margin: 0 0 var(--space-2); }

.article-body table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: var(--space-3) 0; }
.article-body th, .article-body td { border: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; }
.article-body th { background: var(--bg-raise); color: var(--text); }
.article-body blockquote { border-left: 3px solid var(--line-strong); margin: var(--space-3) 0; padding-left: var(--space-3); color: var(--text-dim); }
.article-body code { background: var(--bg-raise); padding: 1px 5px; }

.xpost-embed { margin: var(--space-3) 0; max-width: 500px; }
.xpost-embed .twitter-tweet { color: var(--text); }
.xpost-unavailable {
  border: 2px dashed var(--line-strong);
  padding: var(--space-3);
  color: var(--text-faint);
  font-size: 0.85rem;
}
.xpost-demo-card {
  border: 1px solid var(--line-strong);
  background: var(--bg-raise);
  padding: var(--space-3);
  max-width: 480px;
}
.xpost-demo-head { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; margin-bottom: 6px; }
.xpost-demo-handle { color: var(--text-faint); }

.source-list, .correction-list { font-size: 0.85rem; }
.source-list li, .correction-list li { margin-bottom: 6px; }

.related-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.related-card { border: 1px solid var(--line-strong); padding: var(--space-2); }
.related-card a { color: var(--text); font-size: 0.85rem; font-weight: 700; }

.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.affiliate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--line-strong);
  background: var(--bg-card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.affiliate-card:hover { text-decoration: none; border-color: var(--magenta-ink); }
.affiliate-pr-badge { position: absolute; top: 6px; left: 6px; z-index: 1; }
.affiliate-card-media {
  aspect-ratio: 1/1;
  background: var(--bg-raise);
  display: flex;
  align-items: center;
  justify-content: center;
}
.affiliate-card-media img { width: 100%; height: 100%; object-fit: cover; }
.affiliate-noimg { font-size: 0.7rem; color: var(--text-faint); }
.affiliate-card-body { padding: var(--space-2) var(--space-3) var(--space-3); flex: 1; display: flex; flex-direction: column; }
.affiliate-name { font-size: 0.85rem; font-weight: 700; line-height: 1.4; flex: 1; }
.affiliate-price { color: var(--magenta-ink); font-weight: 900; margin-top: 4px; }
.affiliate-buy { color: var(--cyan-ink); font-weight: 900; font-size: 0.8rem; margin-top: 8px; }

.share-row { display: flex; gap: var(--space-2); margin: var(--space-5) 0; }
.share-row a { border: 2px solid var(--line-strong); padding: 6px 12px; font-size: 0.8rem; color: var(--text); }

/* ---------- forms (public) ---------- */
.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 4px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  background: var(--bg-raise);
  border: 2px solid var(--line-strong);
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
}
.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; }
.btn {
  background: var(--yellow);
  color: #000;
  font-weight: 900;
  border: 2px solid var(--line-strong);
  padding: 9px 20px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--line-strong); }
.alert { padding: var(--space-3); border-left: 4px solid var(--cyan-ink); background: var(--bg-raise); margin-bottom: var(--space-3); font-size: 0.85rem; }
.alert-success { border-left-color: var(--cyan-ink); }
.alert-danger { border-left-color: var(--red); }
.alert-warning { border-left-color: var(--yellow-ink); }

/* ---------- footer ---------- */
.site-footer {
  border-top: var(--border-w) solid var(--line-strong);
  margin-top: var(--space-6);
  padding: var(--space-6) 0 var(--space-5);
  color: var(--text-faint);
  font-size: 0.8rem;
}
.footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.footer-links a { color: var(--text-dim); }
.footer-disclaimer { border-top: 1px solid var(--line); padding-top: var(--space-3); line-height: 1.8; }

/* ---------- static/legal pages ---------- */
.page-content { max-width: 760px; padding: var(--space-5) 0; }
.page-content h1 { color: var(--text); font-size: 1.6rem; }
.page-content h2 { color: var(--text); font-size: 1.1rem; border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; }

/* ---------- 404 / 500 ---------- */
.error-page { text-align: center; padding: var(--space-6) 0; }
.error-illustration { display: block; max-width: 320px; width: 100%; height: auto; margin: 0 auto var(--space-4); }
.error-code { font-size: 6rem; font-weight: 900; color: var(--magenta-ink); line-height: 1; }

/* ---------- pagination ---------- */
.pagination { display: flex; gap: var(--space-2); justify-content: center; padding: var(--space-5) 0; }
.pagination a, .pagination span { border: 2px solid var(--line-strong); padding: 6px 12px; font-size: 0.85rem; color: var(--text); }
.pagination .current { background: var(--yellow); color: #000; border-color: var(--line-strong); }

/* ---------- glitch / scanline (motion-safe only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ticker-items { animation: none; }
  .glitch-hover:hover { animation: glitch 0.3s steps(2) infinite; }
  @keyframes glitch {
    0% { text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan); }
    100% { text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan); }
  }
}

/* ---------- admin (常に暗いテーマ。トークンをこのスコープ内で再定義する) ---------- */
.admin-body {
  --bg: #0a0a0a;
  --bg-raise: #1c1c1c;
  --bg-card: #212121;
  --line: #3a3a3a;
  --line-strong: #5c5c5c;
  --text: #f5f5f5;
  --text-dim: #c9c9c9;
  --text-faint: #9d9d9d;
  --yellow-ink: var(--yellow);
  --magenta-ink: var(--magenta);
  --cyan-ink: var(--cyan);
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--bg-raise); border-right: 2px solid var(--line-strong); padding: var(--space-4); }
.admin-sidebar a { display: block; color: var(--text-dim); padding: 8px 6px; font-size: 0.85rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { color: var(--yellow); }
.admin-main { padding: var(--space-5); max-width: 1100px; }
.admin-card { border: 1px solid var(--line-strong); background: var(--bg-card); padding: var(--space-4); margin-bottom: var(--space-4); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; }
.status-pill { font-size: 0.7rem; padding: 2px 8px; border: 1px solid var(--line-strong); }
.status-pill.draft { color: var(--text-faint); }
.status-pill.review { color: var(--yellow); border-color: var(--yellow); }
.status-pill.scheduled { color: var(--cyan); border-color: var(--cyan); }
.status-pill.published { color: #000; background: var(--cyan); }

.checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; }
.checklist label { display: flex; gap: 6px; align-items: center; font-size: 0.8rem; }
.tone-hidden { display: none !important; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-2); }
.inline-form input, .inline-form select { padding: 6px; background: var(--bg-raise); border: 1px solid var(--line-strong); color: var(--text); }
.small-list { font-size: 0.85rem; }
.small-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); padding: 4px 0; }
.small-list form { display: inline; }
.link-btn { background: none; border: none; color: var(--red); cursor: pointer; font-size: 0.75rem; text-decoration: underline; }