:root{
  /* Unified: warmbar is what the topbar uses */
  --purple-soft:#f2f4ff;
  --warmbar:var(--purple-soft);

  --bg:#ffffff;
  --canvas:#ffffff;
  --card:#ffffff;
  --soft:#f2f3f8;
  --brand-purple:#705c83;

  --chip-border:#d7dce8;
  --badge-bg:#f7f7ff;
  --badge-border:#e4e6ff;

  --line:#e3e6ee;
  --line2:#edf0f7;
  --line3:var(--line2);

  --text:#0b0b10;
  --field:#fffff9;
  --muted:#606277;

  --black:#000000;
  --link:#2f6fed;
  --dot:#d92d20;

  --r:12px;
  --r-lg:14px;
  --r-xl:16px;

  --ctl:12px;
  --pill:10px;
  --max:1180px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--canvas);
  -webkit-text-size-adjust:100%;
}

input,textarea,select,button{ font:inherit; }
button{ touch-action:manipulation; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 12px 26px;
}

::placeholder{ color:rgba(11,11,16,.45); opacity:1; }

:focus-visible{
  outline:2px solid rgba(90,75,255,.28);
  outline-offset:2px;
  border-radius:10px;
}

/* Links (blue), but nav links stay neutral */
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
.nav a,
.brand a{ color:inherit; text-decoration:none; }

/* ── Topbar ─────────────────────────────────────────────── */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--warmbar);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:8px 12px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Brand */
.brand{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:210px;
}

.brand .logo{
  position:relative;
  font-weight:900;
  letter-spacing:-.6px;
  font-size:36px;
  line-height:1;
  white-space:nowrap;
  color:var(--black);
  display:inline-flex;
  align-items:baseline;
  gap:0;
  padding-bottom:6px;
}

.brand .logo::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:currentColor;
  opacity:0;
  transform:scaleX(.65);
  transform-origin:left;
  transition:opacity .12s ease, transform .18s ease;
  border-radius:999px;
}

.brand .logo:hover::after{
  opacity:.18;
  transform:scaleX(1);
}

.brand .logo .q{
  display:inline-block;
  margin-right:-1px;
  color:inherit;
  transform-origin:50% 55%;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
  animation:qSpinIn 1.05s cubic-bezier(.08,.92,.12,1) both;
}

.brand .logo .q:hover{
  animation:qSpinHover .55s cubic-bezier(.2,.9,.2,1) 1;
}

@keyframes qSpinIn{
  from{ transform:translateZ(0) rotate(0turn); }
  to{ transform:translateZ(0) rotate(4turn); }
}

@keyframes qSpinHover{
  from{ transform:translateZ(0) rotate(0turn); }
  to{ transform:translateZ(0) rotate(1turn); }
}

@media (prefers-reduced-motion: reduce){
  .brand .logo .q,
  .brand .logo .q:hover{ animation:none !important; }
}

@media (hover:hover) and (pointer:fine){
  .brand .logo:hover::after{
    opacity:.18;
    transform:scaleX(1);
  }
  .brand .logo .q:hover{
    animation:qSpinHover .55s cubic-bezier(.2,.9,.2,1) 1;
  }
}

.brand .sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.25;
}

/* Search */
.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--ctl);
  padding:9px 12px;
}

.search svg{ width:18px; height:18px; opacity:.75; }

.search input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  font-size:14px;
  color:var(--text);
}

/* Buttons */
.actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:var(--bg);
  padding:9px 11px;
  border-radius:var(--ctl);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn:hover{
  background:var(--purple-soft);
  border-color:rgba(11,11,16,.18);
}

.btn:active{ background:rgba(11,11,16,.06); }

/* .btn used on <a> tags shouldn't inherit blue link color */
a.btn{ color:var(--text); text-decoration:none; }
a.btn:hover{ text-decoration:none; }

.btn.primary{
  background:#0B0B10;
  border-color:#0B0B10;
  color:#ffffff;
}

.btn.primary:hover{
  background:#000000;
  border-color:#000000;
}

.btn.primary:active{
  background:#1a1a1a;
  border-color:#1a1a1a;
}

.btn.ghost{
  background:transparent;
  border-color:transparent;
  color:rgba(11,11,16,.62);
}

.btn.ghost:hover{
  background:rgba(11,11,16,.04);
  color:var(--text);
}

/* Topbar Post CTA visibility (only when composer is NOT visible) */
#focusComposer{ display:none; }
body.show-top-cta #focusComposer{ display:inline-flex; }

/* Hamburger: no border, flat */
.mobile-toggle{
  display:none;
  position:relative;
  width:42px;
  height:42px;
  padding:0;
  border-radius:var(--ctl);
  border:0;
  background:transparent;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  color:var(--text);
}

/* Dot: red */
.mobile-toggle.has-dot::after{
  content:"";
  position:absolute;
  top:7px;
  right:7px;
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--dot);
  border:2px solid var(--warmbar);
}

/* ── Layout ─────────────────────────────────────────────── */

.grid{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 320px;
  gap:12px;
  margin-top:12px;
  align-items:start;
}
.grid>*{ min-width:0; }

/* Panels */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:12px;
}
.panel.soft{ background:var(--soft); }

.panel h3{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.22px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Left nav */
.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nav a{
  padding:10px 10px;
  border-radius:var(--r);
  border:1px solid transparent;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:background .12s ease, border-color .12s ease;
}

.nav a:hover{
  background:rgba(255,255,255,.75);
  border-color:var(--line2);
}

.nav a.active{
  background:rgba(255,255,255,.92);
  border-color:var(--line);
}

.chip{
  font-size:12px;
  padding:4px 8px;
  border-radius:var(--pill);
  background:var(--bg);
  border:1px solid var(--chip-border);
  color:var(--muted);
}

/* ── Composer ───────────────────────────────────────────── */

#composer{
  background:var(--bg);
  border-color:rgba(90,75,255,.18);
}

.composer .title{
  font-weight:900;
  font-size:21px;
  color:var(--text);
  margin:0 0 8px;
  letter-spacing:-.3px;
}

.hint{
  margin:0 0 10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.notice{
  border:1px solid rgba(11,11,16,.12);
  background:rgba(255,255,255,.75);
  padding:10px 12px;
  border-radius:14px;
  margin:0 0 10px;
  font-size:13px;
  color:rgba(11,11,16,.86);
}

.notice.ok{ border-color:rgba(30,120,60,.25); }
.notice.err{ border-color:rgba(220,45,32,.25); }

.field{
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:11px;
}

textarea{
  width:100%;
  min-height:46px;
  resize:vertical;
  border:0;
  outline:none;
  background:transparent;
  font-size:14px;
  line-height:1.45;
  color:var(--text);
}

.row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

select{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--ctl);
  padding:9px 11px;
  font-size:13px;
  outline:none;
}

.toggle{
  display:flex;
  gap:8px;
  align-items:center;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--ctl);
  padding:8px 10px;
  user-select:none;
}

.toggle input{ accent-color:var(--brand-purple); }
.toggle label{
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
}

/* ── Posts ─────────────────────────────────────────────── */

#feed .post{
  margin-top:10px;
  padding:12px;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:var(--bg);
}

#feed .post:nth-child(even){
  background:rgba(11,11,16,.02);
}

#feed .post-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0 10px;
  margin:0 0 8px;
  border-bottom:1px solid var(--line3);
}

.post-meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.badge{
  font-size:12px;
  padding:4px 9px;
  border-radius:var(--pill);
  background:var(--badge-bg);
  border:1px solid var(--badge-border);
  color:var(--muted);
}

.time{ font-size:12px; color:var(--muted); }

.post-excerpt{
  margin:0;
  color:rgba(11,11,16,.86);
  line-height:1.55;
  font-size:14px;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;

  white-space:normal;
  word-break:break-word;
}

.post-excerpt strong{ font-weight:900; }
.readmore{ margin-top:6px; font-size:13px; }

.post-body-full{
  margin:0;
  color:rgba(11,11,16,.86);
  line-height:1.55;
  font-size:14px;
  white-space:pre-wrap;
}
.post-body-full strong{ font-weight:900; }

.reply-body{
  margin:0;
  color:rgba(11,11,16,.86);
  line-height:1.55;
  font-size:14px;
  white-space:pre-wrap;
}
.reply-body strong{ font-weight:900; }

.post-detail-body{
  margin-left:0;
  margin-right:0;
  padding:0 2px;
}

/* Actions */
.post-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.pill{
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:var(--pill);
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}

.pill:hover{
  background:var(--purple-soft);
  border-color:rgba(11,11,16,.18);
}

.pill:active{ background:rgba(11,11,16,.06); }

.pill.active{
  background:rgba(112,92,131,.10);
  border-color:rgba(112,92,131,.30);
}

/* If .pill is an <a>, don't inherit blue link color */
a.pill{ color:var(--text); text-decoration:none; }
a.pill:hover{ text-decoration:none; }

.counts{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

/* ── Load More (BASE / DESKTOP) ─────────────────────────── */
/* Matches your real markup: <button id="loadMoreBtn" class="loadmore-btn"> */
#loadMoreWrap{ margin-top:10px; }

#loadMoreWrap #loadMoreBtn,
#loadMoreWrap .loadmore-btn{
  -webkit-appearance:none;
  appearance:none;

  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px;
  border-radius:var(--r-xl);

  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);

  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;

  cursor:pointer;
  user-select:none;

  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}

#loadMoreWrap #loadMoreBtn::after,
#loadMoreWrap .loadmore-btn::after{
  content:"→";
  font-weight:900;
  opacity:.55;
}

#loadMoreWrap #loadMoreBtn:hover,
#loadMoreWrap .loadmore-btn:hover{
  background:var(--purple-soft);
  border-color:rgba(11,11,16,.18);
  transform:translateY(-1px);
}

#loadMoreWrap #loadMoreBtn:active,
#loadMoreWrap .loadmore-btn:active{
  background:rgba(11,11,16,.06);
  transform:translateY(0);
}

#loadMoreWrap #loadMoreBtn:disabled,
#loadMoreWrap .loadmore-btn:disabled{
  opacity:.65;
  cursor:default;
  transform:none;
}

/* Right widgets */
.widget p{
  margin:0;
  color:rgba(11,11,16,.86);
  line-height:1.5;
  font-size:14px;
}

.widget p+p{ margin-top:8px; }

.widget .small{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

.theme-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.theme-chips a{
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:var(--pill);
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
  color:inherit;
  text-decoration:none;
}

.theme-chips a:hover{
  background:var(--purple-soft);
  border-color:rgba(11,11,16,.18);
}

.theme-chips a:active{ background:rgba(11,11,16,.06); }

/* Optional “accent link” class */
.link-accent{
  color:var(--link);
  text-decoration:none;
  border-bottom:1px solid rgba(47,111,237,.22);
}

.link-accent:hover{
  border-bottom-color:rgba(47,111,237,.40);
}

/* ── Drawer ─────────────────────────────────────────────── */

.drawer-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(11,11,16,.22);
  z-index:80;
}

.drawer{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:340px;
  max-width:88vw;
  background:var(--bg);
  border-right:1px solid var(--line);
  z-index:90;
  transform:translateX(-102%);
  transition:transform .18s ease;
  padding:12px;
  padding-top:calc(12px + env(safe-area-inset-top));
  overflow:auto;
}

.drawer.open{ transform:translateX(0); }
.drawer-backdrop.open{ display:block; }

.drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

/* ── Tablet ─────────────────────────────────────────────── */
@media (max-width:1020px){
  .grid{ grid-template-columns:260px minmax(0,1fr); }
  .rightcol{
    display:block;
    grid-column:1 / -1;
  }
}

/* ── Mobile: EDGE-TO-EDGE (RESTORED) ───────────────────── */
@media (max-width:860px) {

    .grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 0;
    }

    .leftcol {
        display: none;
    }

    .wrap {
        padding: 0;
        max-width: 100%;
    }

    body {
        background: var(--bg);
    }

    .topbar {
        background: var(--warmbar);
    }

    /* Topbar grid layout (menu / brand / action + search row) */
    .topbar-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "menu brand action"
            "search search search";
        gap: 10px;
        padding: 10px 10px;
        padding-top: calc(10px + env(safe-area-inset-top));
        align-items: center;
    }

    .mobile-toggle {
        grid-area: menu;
        display: inline-flex;
    }

    .brand {
        grid-area: brand;
        min-width: 0;
    }

    .actions {
        grid-area: action;
        justify-self: end;
    }

    .search {
        grid-area: search;
        width: 100%;
        padding: 9px 12px;
    }

    .brand .sub {
        display: none;
    }

    .actions .btn.hide-sm {
        display: none;
    }

    .brand .logo {
        font-size: 36px;
    }

    /* Make panels edge-to-edge */
    .panel {
        border: 0;
        border-radius: 0;
        padding: 12px 12px;
        background: var(--bg);
    }

    #composer {
        background: var(--warmbar);
        border: 0;
        margin: 0;
        padding: 14px 12px;
        border-bottom: 1px solid var(--line);
    }

    .field {
        border-radius: 16px;
        padding: 10px;
    }

    #feed {
        background: var(--bg);
    }

    #feed .post {
        margin: 0;
        border: 0;
        border-radius: 0;
        padding: 12px 12px;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
    }

    #feed .post:nth-child(even) {
        background: rgba(11, 11, 16, .02);
    }

    #feed .post-head {
        padding: 8px 0 10px;
        margin: 0 0 8px;
        border-bottom: 1px solid var(--line3);
    }

    /* ✅ ONE-LINE action buttons (swipeable) */
    #feed .post-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 2px;
    }

    #feed .post-actions .pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #feed .post-actions::-webkit-scrollbar {
        height: 0;
    }

    #feed .post-actions {
        scrollbar-width: none;
    }

    /* Slightly tighter pills on mobile */
    .pill {
        padding: 7px 10px;
        font-size: 12px;
    }

    .rightcol {
        display: block;
        grid-column: auto;
        background: var(--bg);
    }

    .rightcol .panel {
        border-bottom: 1px solid var(--line);
    }

    /* ✅ Mobile: Load More = INSET “CARD” (NOT edge-to-edge) + black primary */
    /* Markup may have inline style="margin-top:10px" — neutralize and control rhythm here */
    #feed #loadMoreWrap {
        margin-top: 0 !important;

        /* creates the inset lane while the page remains edge-to-edge */
        padding: 10px 12px 12px;
        /* top gap + left/right inset + bottom breathing room */
        background: var(--bg);
    }

    #feed #loadMoreWrap .loadmore-btn,
    #feed #loadMoreWrap #loadMoreBtn {
        width: 100%;
        margin: 0;

        padding: 12px;
        border-radius: var(--r-xl) !important;

        background: #0B0B10 !important;
        border: 1px solid #0B0B10 !important;
        color: #fff !important;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        font-weight: 900;
        font-size: 13px;
        letter-spacing: .2px;

        cursor: pointer;
        user-select: none;

        transform: none !important;
        /* prevent any “jump” from global hover rules */
    }

    #feed #loadMoreWrap .loadmore-btn::after,
    #feed #loadMoreWrap #loadMoreBtn::after {
        content: "→";
        font-weight: 900;
        opacity: .55;
    }

    #feed #loadMoreWrap .loadmore-btn:hover,
    #feed #loadMoreWrap #loadMoreBtn:hover {
        background: #000 !important;
        border-color: #000 !important;
        transform: none !important;
    }

    #feed #loadMoreWrap .loadmore-btn:active,
    #feed #loadMoreWrap #loadMoreBtn:active {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
    }
}

/* Small */
@media (max-width:520px){
  .row{
    flex-wrap:nowrap;
    gap:8px;
  }

  #themeSelect{
    flex:1 1 auto;
    min-width:0;
  }

  .toggle{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    padding:8px 10px;
  }

  .toggle label{ white-space:nowrap; }

  #postBtn{
    flex:0 0 auto;
    padding:9px 11px;
    white-space:nowrap;
  }
}

@media (max-width:380px){
  .toggle label{ display:none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    scroll-behavior:auto !important;
  }
}