:root{
  --paper:#EEF0E7;
  --paper-card:#FBFBF7;
  --ink:#171A24;
  --ink-soft:#4B4E58;
  --muted:#7C7C6E;
  --accent:#2F3EE4;
  --accent-soft:#E4E6FB;
  --amber:#C97E1D;
  --amber-soft:#F7E7CF;
  --moss:#3C7A56;
  --moss-soft:#E1EFE6;
  --brick:#A23F2E;
  --brick-soft:#F3E1DC;
  --violet:#6B4FA0;
  --violet-soft:#EBE4F5;
  --line:#D9D8CC;
  --line-strong:#B9B8A8;
  --line-inverse:#3a3d4a;
  --accent-contrast:#fff;
  --muted-inverse:#b7bad8;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --radius:3px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Safety net for a specific, well-documented browser quirk, not a
   band-aid for navigation overflow (that's handled properly by the
   hamburger menu / mobile drawer CSS elsewhere in this file). A
   position:fixed element positioned off-screen via transform (like
   .drawer below, closed by default) can still expand
   document.body.scrollWidth in Chrome/Blink, even though it never
   visually causes a scrollbar or is reachable by scrolling. Confirmed
   directly: .drawer's own getBoundingClientRect() correctly reflects
   its transformed, off-screen position, yet body.scrollWidth still
   grew to include it until this was added. */
body{overflow-x:hidden;}
html{overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--accent-soft);}

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:var(--muted);
}
.hairline{border:none;border-top:1px solid var(--line);margin:0;}

/* ===== Masthead ===== */
.masthead{
  background:var(--paper-card);
  border-bottom:2px solid var(--ink);
}
.masthead-top{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px 14px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:12px;flex-shrink:0;}
.brand-mark{
  font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-0.01em;
}
.brand-mark em{font-style:italic;color:var(--accent);}
.brand-sub{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.brand-logo{max-height:48px;max-width:220px;width:auto;display:block;}
.masthead-banner-slot{flex:1 1 auto;display:flex;justify-content:center;min-width:0;}
.masthead-banner-img{max-width:728px;width:100%;height:auto;max-height:90px;object-fit:contain;border-radius:4px;}
.masthead-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.contact-btns{display:flex;gap:8px;}
.contact-btn{
  font-family:var(--font-mono);font-size:11px;font-weight:600;padding:7px 12px;border-radius:4px;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;
}
.contact-btn-telegram{background:#26A5E4;color:#fff;}
.contact-btn-telegram:hover{background:#1f8dc4;}
.contact-btn-whatsapp{background:#25D366;color:#fff;}
.contact-btn-whatsapp:hover{background:#20b858;}
@media(max-width:920px){
  .masthead-top{flex-wrap:wrap;justify-content:center;text-align:center;}
  .masthead-banner-slot{order:3;flex-basis:100%;}
  .masthead-right{order:2;}
}
@media(max-width:520px){
  .masthead-right{flex-direction:column;align-items:center;gap:8px;}
}

.navbar{
  max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:2px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.navbar::-webkit-scrollbar{display:none;}
.navbar-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;margin:0 auto;padding:0;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);
  cursor:pointer;
}
.navbar-hamburger span{display:block;width:18px;height:2px;background:var(--ink);margin:0 auto;}
/* Below the point where every nav item, the account link, and the search
   box can no longer fit in one row without scrolling (verified against
   this nav's actual item count — see header.php's $NAV_ITEMS — not an
   arbitrary guess), the row is replaced entirely by a hamburger-toggled
   vertical drawer, so every item is reachable with a tap and no
   horizontal scrolling anywhere is required. Above this width, nothing
   here changes from the existing desktop row. */
@media(max-width:920px){
  .masthead{position:relative;}
  .navbar-hamburger{display:flex;}
  .navbar-scroll-wrap{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:70;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:calc(100vh - 60px);overflow-y:auto;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  .navbar-scroll-wrap.mobile-open{display:block;}
  .navbar{
    max-width:none;overflow-x:visible;flex-direction:column;align-items:stretch;gap:0;padding:8px 0;
  }
  .navbtn{
    padding:13px 24px;border-bottom:1px solid var(--line);width:100%;text-align:left;
  }
  .navbtn.active{border-bottom:1px solid var(--line);background:var(--accent-soft);}
  .navbtn-group{flex-direction:row;flex-wrap:wrap;align-items:stretch;width:100%;border-bottom:1px solid var(--line);}
  .navbtn-group > .navbtn{flex:1;border-bottom:none;}
  .navbtn-caret{width:44px;flex-shrink:0;text-align:center;padding:0;border-bottom:none;}
  .navbtn-dropdown{flex-basis:100%;}
  .navbtn-dropdown{
    display:none;position:static;box-shadow:none;border:none;background:var(--paper-card);
    padding:0;min-width:0;
  }
  .navbtn-group.open .navbtn-dropdown{display:block;}
  .navbtn-dropdown a{padding:12px 24px 12px 40px;border-bottom:1px solid var(--line);}
  .navbar-spacer{display:none;}
  .search-wrap{width:100%;padding:12px 24px;margin:0;box-sizing:border-box;}
  .search-input{width:100%;box-sizing:border-box;}
}
.navbtn{
  padding:13px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);
  border-bottom:2px solid transparent;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;
}
.navbtn:hover{color:var(--ink);}
.navbtn.active{color:var(--accent);border-bottom-color:var(--accent);}
.navbar-spacer{flex:1;}

/* ===== Nav dropdown (e.g. Advertise > Promotion & Marketing) =====
   position:fixed on purpose — .navbar scrolls horizontally, and any
   element with overflow-x set to something other than visible also
   clips vertical overflow in every major browser. A dropdown positioned
   relative to the nav (position:absolute) would get clipped by that.
   Fixed positioning escapes it entirely; JS sets the actual top/left. */
.navbtn-group{position:relative;display:flex;align-items:center;}
.navbtn-caret{
  padding:13px 6px 13px 0;font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;
}
.navbtn-caret:hover{color:var(--ink);}
.navbtn-dropdown{
  display:none;position:fixed;min-width:210px;z-index:80;
  background:var(--paper-card);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:6px;
}
.navbtn-dropdown a{
  display:block;padding:9px 12px;font-size:13px;font-weight:600;color:var(--ink-soft);border-radius:3px;white-space:nowrap;
}
.navbtn-dropdown a:hover{background:var(--accent-soft);color:var(--accent);}
.navbtn-dropdown a.active{color:var(--accent);}
.navbtn-group.open .navbtn-dropdown{display:block;}

.notif-badge{
  position:absolute;top:6px;right:2px;background:var(--brick);color:#fff;font-size:10px;font-weight:700;
  line-height:1;padding:2px 5px;border-radius:10px;min-width:15px;text-align:center;font-family:var(--font-mono);
}
.notif-item{display:block;padding:10px 12px;border-radius:3px;white-space:normal;}
.notif-item:hover{background:var(--accent-soft);}
.notif-item.unread{background:var(--accent-soft);}
.notif-item .notif-title{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.notif-item .notif-body{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;}
.notif-item .notif-time{font-size:10.5px;color:var(--muted);margin-top:4px;font-family:var(--font-mono);}

.search-wrap{position:relative;margin:8px 0;}
.search-input{
  font-family:var(--font-body);font-size:13px;padding:7px 10px 7px 28px;
  border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper-card);width:190px;
}
.search-wrap svg{position:absolute;left:8px;top:9px;width:13px;height:13px;stroke:var(--muted);}

/* ===== Dateline ticker ===== */
.dateline{
  background:var(--ink);color:var(--paper);
  overflow:hidden;white-space:nowrap;
}
.dateline-inner{
  display:inline-flex;gap:0;
  animation:ticker 38s linear infinite;
  padding:8px 0;
}
.dateline:hover .dateline-inner{animation-play-state:paused;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.dateline-item{
  font-family:var(--font-mono);font-size:11.5px;padding:0 22px;border-right:1px solid var(--line-inverse);
  display:flex;gap:8px;align-items:center;
}
.dateline-item .dl-date{color:var(--amber);}
@media(prefers-reduced-motion:reduce){.dateline-inner{animation:none;overflow-x:auto;}}

/* ===== Layout ===== */
.wrap{max-width:1180px;margin:0 auto;padding:32px 24px 80px;}

/* ===== Top banner ad(s) (1000×150 recommended each) — sit just under the
   dateline ticker, with a small gap above the first and between each
   additional stacked slot ===== */
.top-banner-stack{margin-top:14px;}
.top-banner-wrap{
  max-width:1180px;margin:0 auto;padding:0 24px;text-align:center;
}
.top-banner-wrap + .top-banner-wrap{margin-top:12px;}
.top-banner-img{max-width:1000px;width:100%;height:auto;border-radius:4px;display:inline-block;}

/* ===== Right sidebar ad (300×300 recommended) — every page except Home,
   toggleable per page from Admin → Banners ===== */
.page-with-sidebar{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;}
.page-sidebar{position:sticky;top:20px;}
.sidebar-banner-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;}
@media(max-width:920px){
  .page-with-sidebar{grid-template-columns:1fr;}
  .page-sidebar{position:static;}
}

.grid-2{display:grid;grid-template-columns:1fr 320px;gap:36px;}
@media(max-width:920px){.grid-2{grid-template-columns:1fr;}}

/* ===== Hero (home) ===== */
.hero{padding:10px 0 34px;border-bottom:1px solid var(--line);margin-bottom:30px;}
.hero-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.hero h1{
  font-family:var(--font-display);font-weight:600;font-size:46px;line-height:1.06;letter-spacing:-0.01em;
  margin:0 0 16px;max-width:760px;
}
.hero h1 em{font-style:italic;color:var(--accent);}
.hero p{font-size:16px;color:var(--ink-soft);max-width:560px;line-height:1.55;margin:0 0 22px;}
.hero-actions{display:flex;gap:12px;}
.btn{
  font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:var(--radius);border:1px solid var(--ink);
  background:var(--ink);color:var(--paper-card);display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{opacity:.85;}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper-card);}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}

.statbar{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px;}
.stat{background:var(--paper-card);padding:14px 16px;}
.stat .n{font-family:var(--font-mono);font-size:21px;font-weight:600;}
.stat .l{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;}

/* ===== Section headers ===== */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}

/* ===== Admin panel: left sidebar + top function tabs + content =====
   .admin-shell is a two-column flex layout on desktop (sidebar fixed
   width, main area flexible) and stacks vertically on narrow screens —
   the sidebar becomes a horizontally-scrollable strip of category
   groups above the top tab bar and content, rather than a true
   collapsing drawer, so it stays simple and fully usable on mobile
   without extra toggle/overlay JS. */
.admin-shell{display:flex;gap:24px;align-items:flex-start;}
.admin-sidebar{
  width:210px;flex-shrink:0;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 10px;position:sticky;top:16px;
}
.admin-sidebar-standalone{display:block;width:100%;text-align:left;background:none;border:none;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:6px;
  cursor:pointer;margin-bottom:2px;
}
.admin-sidebar-standalone:hover{background:var(--paper);}
.admin-sidebar-standalone.active{background:var(--ink);color:var(--paper-card);}
.admin-sidebar-divider{height:1px;background:var(--line);margin:10px 4px;}
.admin-sidebar-cat{padding:10px 10px 4px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);
}
.admin-sidebar-link{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;
  font-size:13px;color:var(--ink-soft);padding:7px 10px;border-radius:6px;cursor:pointer;margin-bottom:1px;
}
.admin-sidebar-link:hover{background:var(--paper);color:var(--ink);}
.admin-sidebar-link.active{background:var(--ink);color:var(--paper-card);font-weight:600;}
.admin-main{flex:1;min-width:0;}
.admin-toptabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:20px;padding-bottom:0;}
.admin-toptab{background:none;border:none;font-family:inherit;font-size:13px;color:var(--ink-soft);
  padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;
}
.admin-toptab:hover{color:var(--ink);}
.admin-toptab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);}
.admin-sidebar-select{display:none;}
@media(max-width:760px){
  .admin-shell{flex-direction:column;gap:14px;}
  .admin-sidebar-scroll-wrap,.admin-sidebar{display:none;}
  .admin-sidebar-select{
    display:block;width:100%;box-sizing:border-box;padding:12px 14px;font-size:14px;font-weight:600;
    font-family:inherit;color:var(--ink);background:var(--paper-card);border:1px solid var(--line-strong);
    border-radius:var(--radius);
  }
  .admin-toptabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-width:none;-ms-overflow-style:none;}
  .admin-toptabs::-webkit-scrollbar{display:none;}
  .admin-main{width:100%;min-width:0;}
}
.section-head h2{font-family:var(--font-display);font-size:24px;font-weight:600;margin:0;}
.section-head .num{font-family:var(--font-mono);color:var(--accent);font-style:normal;margin-right:8px;}

.tabs{display:flex;gap:4px;flex-wrap:wrap;}
.tab{
  font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper-card);color:var(--ink-soft);
}
.tab.active{background:var(--ink);color:var(--paper-card);border-color:var(--ink);}

.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.chip{
  font-family:var(--font-mono);font-size:11px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:20px;
  background:transparent;color:var(--ink-soft);
}
.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}

/* ===== Calendar page: centered, prominent stage toggle ===== */
.stage-toggle{
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
  margin:4px 0 26px;
}
.stage-btn{
  font-family:var(--font-mono);font-size:15px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  padding:16px 28px;border:2px solid var(--line-strong);border-radius:var(--radius);
  background:var(--paper-card);color:var(--ink-soft);
  flex:1 1 220px;max-width:280px;text-align:center;
}
.stage-btn.active{background:var(--ink);color:var(--paper-card);border-color:var(--ink);}
@media(max-width:640px){
  .stage-btn{flex:1 1 100%;max-width:none;}
}

/* ===== Calendar page: centered, larger dropdown filters ===== */
.filter-row-select{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.filter-select{
  font-family:var(--font-mono);font-size:14px;padding:13px 16px;border:1.5px solid var(--line-strong);
  border-radius:var(--radius);background:var(--paper-card);color:var(--ink);min-width:220px;flex:1 1 240px;max-width:320px;
}
@media(max-width:640px){
  .filter-select{flex:1 1 100%;max-width:none;}
}

/* ===== Ledger table ===== */
.ledger{width:100%;border-collapse:collapse;background:var(--paper-card);}
.ledger thead th{
  text-align:left;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  padding:9px 12px;border-bottom:1px solid var(--ink);font-weight:500;
}
.ledger tbody tr{border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s;}
.ledger tbody tr:hover{background:var(--accent-soft);}
.ledger td{padding:12px;vertical-align:middle;font-size:13.5px;}
.proj-name{display:flex;align-items:center;gap:10px;}
.proj-logo{
  width:32px;height:32px;border-radius:7px;background:var(--ink);color:var(--paper-card);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:14px;flex-shrink:0;
}
.proj-title{font-weight:600;font-size:13.5px;}
.proj-ticker{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.tag{
  font-family:var(--font-mono);font-size:10px;text-transform:capitalize;letter-spacing:.04em;
  padding:2px 7px;border-radius:20px;display:inline-block;
}
.tag-active{background:var(--moss-soft);color:var(--moss);}
.tag-upcoming{background:var(--amber-soft);color:var(--amber);}
.tag-verified{background:var(--accent-soft);color:var(--accent);}

.comment-row{padding:14px 0;border-bottom:1px solid var(--line);}
.comment-row:last-child{border-bottom:none;}
.comment-head{display:flex;align-items:center;gap:10px;}
.comment-delete{
  margin-left:auto;background:none;border:none;color:var(--muted);font-size:11px;
  font-family:var(--font-mono);cursor:pointer;padding:2px 6px;
}
.comment-delete:hover{color:var(--brick);}
.comment-body{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word;}
.tag-ended{background:var(--brick-soft);color:var(--brick);}
.tag-presale{background:var(--accent-soft);color:var(--accent);}
.tag-launched{background:var(--violet-soft);color:var(--violet);}
.chaintag{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);}
.mono{font-family:var(--font-mono);font-size:12.5px;}
.muted{color:var(--muted);}
.right{text-align:right;}

/* star / watchlist */
.star-btn{background:none;border:none;font-size:16px;color:var(--line-strong);padding:2px;}
.star-btn.on{color:var(--amber);}

/* ink stamp vote */
.stamp-btn{
  position:relative;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:20px;
  padding:5px 12px;display:inline-flex;align-items:center;gap:6px;min-width:78px;justify-content:center;
}
.stamp-btn:hover{background:var(--accent-soft);}
.stamp-btn.stamped{
  border-color:var(--moss);color:var(--moss);
  animation:stamp .28s ease-out;
}
.stamp-btn.locked{opacity:.55;cursor:default;}
@keyframes stamp{
  0%{transform:scale(1.6) rotate(-14deg);opacity:0;}
  60%{transform:scale(0.94) rotate(-4deg);opacity:1;}
  100%{transform:scale(1) rotate(-3deg);}
}
.stamp-btn.stamped{transform:rotate(-3deg);}
.vote-count{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.view-link{font-family:var(--font-mono);font-size:11px;color:var(--accent);white-space:nowrap;}
.view-link:hover{text-decoration:underline;}

/* ===== Sidebar cards ===== */
/* Content-container background convention: any element that displays
   substantial text/content directly on the page (not just spacing or a
   row inside another container) must use one of these classes, or be
   nested inside one — never rely on the bare page background:
     .side-card, .form-card, .article-card, .article-content,
     .price-card, .ledger (table), .stat, .navbtn-dropdown
   Row-level helpers like .comment-row, .mini-row, .drawer-section, and
   .field-hint intentionally have no background of their own — they are
   meant to sit inside one of the containers above, not stand alone. If
   you add a new content container, give it one of the backgrounds
   above (or a new rule following the same background/border/padding
   pattern) rather than a bare `<div>` with only inline spacing. */
.side-card{background:var(--paper-card);border:1px solid var(--line);padding:18px;margin-bottom:20px;}
.side-card h3{font-family:var(--font-display);font-size:16px;margin:0 0 12px;font-weight:600;}
.mini-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
.mini-row:last-child{border-bottom:none;}
.mini-rank{font-family:var(--font-mono);color:var(--accent);font-size:11px;width:18px;}
.promo-slot{
  border:1.5px dashed var(--line-strong);padding:20px;text-align:center;color:var(--muted);font-size:12px;
  font-family:var(--font-mono);
}

/* ===== Detail drawer ===== */
.overlay{position:fixed;inset:0;background:rgba(23,26,36,.4);z-index:40;display:none;}
.overlay.open{display:block;}
.drawer{
  position:fixed;top:0;right:0;width:440px;max-width:92vw;height:100%;background:var(--paper-card);
  z-index:41;box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:transform .25s ease;overflow-y:auto;
  border-left:2px solid var(--ink);transform:translateX(100%);
}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:22px;border-bottom:1px solid var(--line);}
.drawer-close{float:right;background:none;border:none;font-size:20px;color:var(--muted);line-height:1;}
.drawer-body{padding:22px;}
.drawer-body h2{font-family:var(--font-display);font-size:26px;margin:14px 0 4px;}
.drawer-section{margin-bottom:20px;}
.drawer-section h4{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px;}
.backer-pill{
  display:inline-block;font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:4px 10px;margin:0 6px 6px 0;
}
.social-row{display:flex;gap:10px;margin-top:6px;}
.social-row a{font-family:var(--font-mono);font-size:12px;color:var(--accent);border-bottom:1px solid var(--accent-soft);}

/* ===== Forms ===== */
.form-card{background:var(--paper-card);border:1px solid var(--line);padding:28px;max-width:640px;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--radius);font-family:var(--font-body);font-size:13.5px;background:var(--paper-card);
}
.field textarea{resize:vertical;min-height:80px;}
.field input[type="file"]{
  padding:8px;background:var(--paper);cursor:pointer;
}
.field-hint{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:5px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.field-row{grid-template-columns:1fr;}}
.form-section-title{
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);
  margin:26px 0 14px;padding-top:18px;border-top:1px solid var(--line);
}
.form-section-title:first-child{margin-top:0;padding-top:0;border-top:none;}
.toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);
  padding:12px 20px;border-radius:var(--radius);font-size:13px;opacity:0;pointer-events:none;transition:all .25s;z-index:60;
  font-family:var(--font-mono);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== Pricing / advertise ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media(max-width:760px){.price-grid{grid-template-columns:1fr;}}
.price-card{background:var(--paper-card);padding:26px 22px;}
.price-card.featured{background:var(--ink);color:var(--paper-card);}
.price-card .tier{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.price-card.featured .tier{color:var(--muted-inverse);}
.price-card .amt{font-family:var(--font-display);font-size:34px;margin:6px 0 16px;}
.price-card ul{padding-left:18px;margin:0 0 18px;font-size:13px;line-height:1.9;}

/* ===== Journal ===== */
.article-card{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px;}
.article-card-row{display:flex;gap:20px;align-items:flex-start;}
.article-card-text{flex:1;min-width:0;}
.article-date{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:6px;}
.article-card h3{font-family:var(--font-display);font-size:19px;margin:0 0 6px;font-weight:600;}
.article-card p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.55;}
.article-thumb{width:160px;height:110px;object-fit:cover;border-radius:6px;display:block;flex-shrink:0;}
@media(max-width:560px){
  .article-card-row{flex-direction:column;}
  .article-thumb{width:100%;height:160px;}
}

/* ===== Article body content (rendered HTML from the rich text editor) =====
   background is set here deliberately, not left to inherit the plain page
   background — content pasted into the editor from Word, Google Docs, or
   another site frequently carries its own inline background/color styles,
   and sanitize_article_html() strips dangerous tags/attributes but doesn't
   touch style="" (by design, so legitimate formatting like bold/italic/
   color survives). Giving this container its own solid, opaque background
   and forcing every element inside it back to that background and the
   theme's own text color closes that gap for any content already saved
   with a bad style, not just new content going forward. */
.article-content{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;font-size:15px;line-height:1.75;color:var(--ink);}
.article-content *{background-color:transparent!important;color:inherit!important;}
.article-content p{margin:0 0 18px;}
.article-content h2{font-family:var(--font-display);font-size:24px;font-weight:600;margin:32px 0 14px;}
.article-content h3{font-family:var(--font-display);font-size:19px;font-weight:600;margin:26px 0 12px;}
.article-content ul,.article-content ol{margin:0 0 18px;padding-left:24px;}
.article-content li{margin-bottom:6px;}
.article-content a{color:var(--accent)!important;text-decoration:underline;}
.article-content blockquote{
  margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--accent);
  color:var(--ink-soft)!important;font-style:italic;
}
.article-content img{max-width:100%;border-radius:6px;margin:10px 0;}
.article-content table{border-collapse:collapse;margin:0 0 18px;width:100%;}
.article-content td,.article-content th{border:1px solid var(--line);padding:8px 10px;font-size:13.5px;}
.article-content code{font-family:var(--font-mono);background-color:var(--paper)!important;padding:2px 5px;border-radius:3px;font-size:13px;}
.article-content pre{background-color:var(--paper)!important;padding:14px;border-radius:6px;overflow-x:auto;margin:0 0 18px;}

/* ===== Rich text editor toolbar (admin article form) ===== */
.editor-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  border:1px solid var(--line-strong);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;
  background:var(--paper);padding:6px;
}
.editor-btn{
  font-family:var(--font-mono);font-size:12px;padding:6px 9px;border:1px solid transparent;border-radius:3px;
  background:transparent;color:var(--ink-soft);
}
.editor-btn:hover{background:var(--paper-card);border-color:var(--line-strong);}
.editor-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 4px;}
.rich-editor{
  min-height:260px;border:1px solid var(--line-strong);border-radius:0 0 var(--radius) var(--radius);
  padding:14px;font-family:var(--font-body);font-size:14px;line-height:1.6;background:var(--paper-card);
}
.rich-editor:focus{outline:none;border-color:var(--accent);}
.rich-editor h2{font-family:var(--font-display);font-size:20px;margin:16px 0 8px;}
.rich-editor h3{font-family:var(--font-display);font-size:17px;margin:14px 0 6px;}
.rich-editor blockquote{margin:0 0 12px;padding-left:14px;border-left:3px solid var(--accent);color:var(--ink-soft);}
.rich-editor ul,.rich-editor ol{padding-left:22px;}

/* empty state */
.empty{padding:50px 20px;text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:13px;border:1px dashed var(--line-strong);}

footer{border-top:2px solid var(--ink);background:var(--paper-card);padding:30px 24px;margin-top:40px;}
.footer-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.footer-legal-links a{color:var(--muted);text-decoration:none;}
.footer-legal-links a:hover{color:var(--accent);text-decoration:underline;}

.cookie-notice{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--ink);color:var(--paper);
  box-shadow:0 -4px 16px rgba(0,0,0,.15);
}
.cookie-notice-inner{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.cookie-notice p{margin:0;font-size:12.5px;line-height:1.5;color:var(--paper);}
.cookie-notice a{color:var(--paper);text-decoration:underline;}
@media(max-width:560px){
  .cookie-notice-inner{flex-direction:column;align-items:stretch;text-align:center;}
}

@media(max-width:640px){
  .hero h1{font-size:32px;}
  .statbar{grid-template-columns:repeat(2,1fr);}
  .field-row{grid-template-columns:1fr;}
  .ledger thead{display:none;}
  .ledger td{display:block;padding:4px 12px;}
  .ledger tr{padding:10px 0;display:block;}
}
/* ===== Added for live backend version ===== */
.form-error{
  background:var(--brick-soft);color:var(--brick);border:1px solid var(--brick);
  padding:9px 12px;border-radius:var(--radius);font-size:12.5px;margin-bottom:14px;font-family:var(--font-mono);
}
.form-note{
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);
  padding:9px 12px;border-radius:var(--radius);font-size:12.5px;margin-bottom:14px;font-family:var(--font-mono);
}
.btn[disabled]{opacity:.6;cursor:default;}
.small-link{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-top:10px;display:inline-block;cursor:pointer;}