/* =========================================================
   SYNTHPAPER — CORE THEME
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Dark (default) */
  --bg:#0e0f12;
  --surface:#111318;          /* header/footer bg */
  --card:#17181c;
  --hairline:#242833;
  --hairline-2:#2a2f38;
  --hairline-soft:#26282e;
  --text:#e9ecf1;
  --muted:#9aa6b2;
  --muted-2:#a7b0bd;
  --link:#cdd8ff;
  --link-hover:#e5ecff;
  --link-visited:#c3b7ff;
  --acc:#35a2ff;
  --ring:#4c78ff55;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Light theme overrides (via data attribute) */
:root[data-theme='light']{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --card:#ffffff;
  --hairline:#e6e9ef;
  --hairline-2:#d8dde7;
  --hairline-soft:#e6e9ef;
  --text:#101217;
  --muted:#667085;
  --muted-2:#596275;
  --link:#1a73e8;
  --link-hover:#0b5ed7;
  --link-visited:#4e46e5;
  --acc:#1a73e8;
  --ring:#1a73e84d;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
a{ color:var(--link); text-decoration:none }
a:hover{ color:var(--link-hover); text-decoration:underline }
a:visited{ color:var(--link-visited) }
:focus-visible{ outline:2px solid var(--acc); box-shadow:0 0 0 4px var(--ring); border-radius:8px }

/* Layout container */
.container{ max-width:1180px; padding:16px; margin:0 auto }

/* =========================================================
   TOP BAR / NAV
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px;
}
.topbar .inner{ display:flex; align-items:center; gap:16px }
.brand{ font-weight:900; font-size:20px; color:#fff; text-decoration:none; margin-right:8px }
:root[data-theme='light'] .brand{ color:#0d0f14 }

.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1 }
.nav-links a{ color:#cbd3df; margin-right:14px }
.nav-links a:hover{ color:#fff; text-decoration:none }
:root[data-theme='light'] .nav-links a{ color:#3b4050 }
:root[data-theme='light'] .nav-links a:hover{ color:#000 }

.auth{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap }
.auth .hello{ color:var(--muted-2) }
.auth .ghost{
  color:#cbd3df; border:1px solid var(--hairline-2); border-radius:8px; padding:6px 10px; text-decoration:none; background:transparent;
}
.auth .ghost:hover{ background:#161a22 }
:root[data-theme='light'] .auth .ghost{ color:#3b4050; border-color:var(--hairline-2) }
:root[data-theme='light'] .auth .ghost:hover{ background:#f3f5f9 }

.hamburger{ display:none; flex-direction:column; gap:5px; background:transparent; border:0; padding:8px; margin-left:auto; cursor:pointer }
.hamburger span{ width:22px; height:2px; background:#cbd3df; border-radius:2px }
@media (max-width:880px){
  .hamburger{ display:flex }
  .nav-wrap{
    position:fixed; left:0; right:0; top:56px; background:#0f1218; border-top:1px solid #1f232c;
    display:none; flex-direction:column; gap:14px; padding:14px 16px
  }
  .nav-wrap.show{ display:flex }
  .nav-links{ display:flex; flex-direction:column; gap:8px }
  .auth{ justify-content:flex-start }
}

/* Theme toggle */
.theme-toggle{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; border:1px solid var(--hairline-2); background:transparent; color:#cbd3df }
.theme-toggle:hover{ background:#161a22 }
:root[data-theme='light'] .theme-toggle{ border-color:var(--hairline-2); color:#3b4050 }
:root[data-theme='light'] .theme-toggle:hover{ background:#f3f5f9 }
.theme-toggle .icon{ font-size:16px; line-height:1 }

/* =========================================================
   CARDS, GRID, BYLINES
   ========================================================= */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }
.card{
  grid-column:span 6;
  background:var(--card); padding:16px; border-radius:14px; border:1px solid var(--hairline);
  box-shadow:0 1px 0 rgba(255,255,255,.02); transition:transform .08s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
.card img{ width:100%; border-radius:10px; object-fit:cover; display:block }
@supports (aspect-ratio:16/9){ .card img{ aspect-ratio:16/9; height:auto } }
.card h2{ margin:.6rem 0; font-size:22px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card h2 a{ color:var(--text); text-decoration:none }
.card a{ color:inherit; text-decoration:none } /* headlines not blue */
.card a:hover{ text-decoration:none }
.card p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
@media (min-width:1200px){ .card{ grid-column:span 4 } }
@media (max-width:720px){ .card{ grid-column:span 12 } }

.byline{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; margin:.3rem 0 .6rem }
.byline .avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--hairline-2) }

/* =========================================================
   STORY PAGE
   ========================================================= */
.story h1{ font-size:34px; line-height:1.15; margin:.2rem 0 .6rem }
.story .dek{ color:#c0c8d6; font-size:18px; margin:.4rem 0 1rem }
.story .hero{ border-radius:12px; margin:10px 0 14px; max-height:520px; object-fit:cover; width:100% }
.story .body{ font-size:18px; color:var(--text) }
.story .body p{ margin:0 0 1rem }
.story .body img{ max-width:100%; border-radius:10px }
@media (max-width:720px){
  .story h1{ font-size:28px }
  .story .dek{ font-size:16px }
}

/* =========================================================
   FORMS / FLASH
   ========================================================= */
textarea,input{
  width:100%; background:#0f1116; border:1px solid var(--hairline-2); color:var(--text);
  border-radius:8px; padding:10px
}
.flash.ok{ background:#103b24; color:#b6ffd8; padding:10px; border-radius:8px; margin:10px 0 }
.flash.err{ background:#401616; color:#ffb6b6; padding:10px; border-radius:8px; margin:10px 0 }

/* Buttons */
.btn{
  background:var(--acc); color:#0b0e14; padding:8px 12px; border-radius:8px; border:1px solid transparent;
  text-decoration:none; font-weight:600; display:inline-block
}
.btn:hover{ filter:brightness(1.08) }
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:transparent; color:#cbd3df; border:1px solid var(--hairline-2) }



/* =========================================================
   ADMIN / TABLES
   ========================================================= */
.adminbar{
  display:flex; gap:14px; align-items:center; background:#101216; border-bottom:1px solid var(--hairline);
  padding:10px 16px; border-radius:10px; margin:12px 0
}
.adminbar .brand{ font-weight:700; color:#fff; text-decoration:none; margin-right:8px }
.adminbar a{ color:#c7cfdb; text-decoration:none }

.admin-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:12px 0 }
.card.stat{ background:#16181d; border:1px solid #262a33; border-radius:12px; padding:14px }
.card.stat .k{ font-size:26px; font-weight:800 }
.card.stat .l{ color:#9aa6b2 }

.table{
  width:100%; border-collapse:collapse; background:#16181d; border:1px solid #262a33; border-radius:12px; overflow:hidden
}
.table th,.table td{ padding:10px; border-bottom:1px solid #262a33; vertical-align:top }
.table tr:last-child td{ border-bottom:none }
.tright{ text-align:right }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ margin-top:32px; background:var(--surface); border-top:1px solid var(--hairline) }
.footer-grid{ display:grid; grid-template-columns:2fr 3fr; gap:24px; padding:24px 16px }
.footer-brand .logo{ font-weight:900; font-size:22px; margin-bottom:6px }
.footer-brand .tagline{ color:var(--muted-2); margin:0 0 8px }
.footer-brand .disclaimer{ color:#8c96a3; font-size:14px; margin:8px 0 0 }
.footer-links{ display:grid; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:16px }
.footer-links h4{ font-size:14px; color:#cbd3df; margin:0 0 8px }
.footer-links ul{ list-style:none; padding:0; margin:0 }
.footer-links a{ color:var(--muted-2); text-decoration:none }
.footer-links a:hover{ text-decoration:underline }
.footer-bottom{ border-top:1px solid var(--hairline); padding:10px 0; color:#8c96a3; font-size:13px }
.pager{ display:flex; gap:10px; align-items:center; justify-content:center; margin:16px 0; color:var(--muted-2) }

.footer-grid, .footer-links, .footer-links .col, .footer-links ul{ min-width:0 }
.footer-links ul li{ overflow-wrap:anywhere }
@media (max-width:880px){
  .footer-grid{ grid-template-columns:1fr; gap:18px; padding:18px 16px }
  .footer-links{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
}
@media (max-width:420px){
  .footer-links{ grid-template-columns:1fr }
}

/* =========================================================
   ARTICLE BODY SAFEGUARDS
   ========================================================= */
.article-body{ overflow-wrap:break-word }
.article-body pre{
  max-width:100%; box-sizing:border-box; overflow-x:auto; overflow-y:hidden; white-space:pre;
  margin:1rem 0; padding:.85rem 1rem; border:1px solid var(--hairline-2); border-radius:8px; background:#0f1320
}
.article-body pre>code{ white-space:inherit; display:block }
.article-body code{ white-space:pre-wrap; overflow-wrap:anywhere }
@media (max-width:720px){
  .article-body pre{ white-space:pre-wrap; word-break:break-word; overflow-x:auto }
}
.article-body pre{ margin-left:0; margin-right:0 }

/* =========================================================
   SHARE BLOCK
   ========================================================= */
.share-block{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.5rem 0 1.25rem }
.share-title{ font-weight:600; margin-right:.25rem }
.share-list{ display:flex; gap:.5rem; flex-wrap:wrap; list-style:none; padding:0; margin:0 }
.share-btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .65rem;
  border:1px solid var(--hairline-2); border-radius:9999px;
  text-decoration:none; font-size:.9rem; line-height:1; background:transparent; color:inherit;
}
.share-btn:hover{ filter:brightness(1.06) }
.share-btn svg{ width:16px; height:16px; display:block; fill:currentColor }

/* =========================================================
   SUPPORT PAGE
   ========================================================= */

/* Hero */
.support-hero{ position:relative; overflow:hidden; border-radius:16px; margin:8px 0 16px }
.support-hero__media{ position:relative; height:240px }
.support-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; max-width:100% }
.support-hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.55)) }
:root[data-theme='light'] .support-hero__scrim{ background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35)) }
.support-hero__copy{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:#fff
}
.support-hero__copy h1{ margin:0 0 .35rem; font-size:1.8rem; line-height:1.15 }
.support-hero__dek{ margin:0 0 .75rem; opacity:.95; max-width:60ch }
.support-hero__ctas{ display:flex; gap:.5rem }
.btn-pill{
  display:inline-block; padding:.55rem .9rem; border-radius:9999px;
  background:rgba(255,255,255,.9); color:#111; text-decoration:none; border:1px solid rgba(255,255,255,.8)
}
.btn-pill--primary{ background:#0ea5e9; color:#fff; border-color:#0ea5e9 }
.btn-pill:hover{ filter:brightness(.98) }

/* Tiers layout (no overflow) */
.support-tiers{ display:grid; grid-template-columns:1fr; gap:16px; margin:20px 0; max-width:100% }
@media (min-width:720px){ .support-tiers{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* Cards inherit theme surface; ONLY border is explicit to avoid white leaks */
.support-page .card{
  border:1px solid var(--hairline); border-radius:12px; padding:16px; background:transparent;
}

/* Support buttons match theme; never force white */
.support-page .btn-option{
  display:block; width:100%; box-sizing:border-box; padding:.75rem 1rem;
  border:1px solid var(--hairline-2); border-radius:9999px; background:transparent; color:inherit; text-align:left;
  overflow-wrap:anywhere;
}
.support-page .btn-option:hover{ filter:brightness(1.06) }

/* Notes & notices */
.support-notes{ margin:10px 0 0; opacity:.85 }
.support-notes li{ margin:.25rem 0 }
.notice-cancel{
  margin-top:12px; padding:10px; border:1px solid #5f3e3e; border-radius:8px; background:#2a1e1e; color:#f5dada
}
:root[data-theme='light'] .notice-cancel{ background:#fff6f6; border-color:#f0c9c9; color:#7a1f1f }

/* Safety net for any rogue overflow */
.page, .page-wrap{ overflow-x:hidden }

/* =========================================================
   WRITERS / MISC
   ========================================================= */
.writers .writer{ text-align:left }
.avatar.xl{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:1px solid var(--hairline-2); display:block }
.author-hero{ display:flex; align-items:flex-start; gap:16px; margin:10px 0 18px }
.author-hero h1{ margin:0 }
.author-stats{ color:var(--muted); margin-top:6px }
.mt{ margin-top:22px }
@media (max-width:720px){ .author-hero{ flex-direction:column; align-items:flex-start } }

/* Error page */
.error{ text-align:center; padding:48px 0 }
.error h1{ font-size:28px; margin:0 0 10px }
.error .muted{ color:var(--muted) }







/* ===== Admin Classifieds Styles ===== */
.adminbar strong { margin-left: 8px; }

.table td form {
  display: inline-block;
  margin: 0;
}

.table td form .btn {
  margin: 2px 0;
  padding: 4px 8px;
  font-size: 0.85rem;
  line-height: 1.2;
}

.table td form .btn.danger {
  background: #e65a5a;
  color: #fff;
}

.table td form .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Bulk action toolbar */
.actions select {
  padding: .45rem .6rem;
  border-radius: 6px;
  border: 1px solid #2a2f38;
  background: var(--card);
  color: var(--text);
}
:root[data-theme='light'] .actions select {
  border-color: #d8dde7;
  background: #fff;
  color: #111;
}

/* Pager alignment */
.pager { justify-content: flex-start; margin-top: 12px; }
/* Admin tabs */
.admin-tabs{
  display:flex; gap:8px; align-items:center; margin:10px 0 8px;
}
.admin-tabs a{
  padding:.4rem .7rem; border:1px solid var(--hairline-2);
  border-radius:9999px; text-decoration:none; color:var(--text);
  background:transparent;
}
.admin-tabs a.on{
  background:var(--acc); color:#0b0e14; border-color:var(--acc);
}

/* Filter row */
.admin-filter{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 10px;
}
.af-input{
  flex:1 1 320px; min-width:220px;
  padding:.55rem .75rem; border:1px solid var(--hairline-2);
  border-radius:8px; background:transparent; color:var(--text);
}
.af-select{
  padding:.5rem .7rem; border:1px solid var(--hairline-2);
  border-radius:8px; background:transparent; color:var(--text);
}

/* Bulk row */
.admin-bulk-row{
  display:flex; gap:8px; align-items:center; margin:8px 0;
}
.admin-bulk-row select{
  padding:.45rem .6rem; border:1px solid var(--hairline-2);
  border-radius:8px; background:var(--card); color:var(--text);
}

/* Table action buttons neat */
.table td form{ display:inline-block; margin:0 }
.table td form .btn{ margin:0; padding:4px 8px; font-size:.85rem; line-height:1.2 }
.table td form .btn.danger{ background:#e65a5a; color:#fff }
.table td form .btn:disabled{ opacity:.5; cursor:not-allowed }

/* Optional: pill status labels */
.table td.status-pill{ white-space:nowrap }
.status-pill .pill{
  display:inline-block; padding:.2rem .5rem; border-radius:9999px; font-size:.8rem; font-weight:700;
}
.pill.pending{ background:#3b3b28; color:#f6f0c0 }
.pill.approved{ background:#123a28; color:#b6ffd8 }
.pill.rejected{ background:#3a2222; color:#ffb6b6 }

@media (max-width: 880px){
  .admin-filter{ flex-direction:column; align-items:stretch }
  .admin-bulk-row{ flex-wrap:wrap }
}
.admin-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.admin-filter .af-input{padding:.5rem .7rem;border:1px solid var(--hairline-2);border-radius:8px;background:transparent;color:var(--text)}
.admin-filter .af-select{padding:.45rem .6rem;border:1px solid var(--hairline-2);border-radius:8px;background:transparent;color:var(--text)}
.table code{background:rgba(255,255,255,.06);padding:.1rem .3rem;border-radius:4px}