/* ============================================================
   NextPalm — Community (internal feed, X-style, brand colors)
   relies on nextpalm.css tokens (--green, --lime, fonts…)
   ============================================================ */

.up-body{ --np-header-h:80px; background:#F4F5F0; }

/* ---------- FIXED COMMUNITY HEADER ---------- */
.cx-header{
  position:fixed;
  z-index:90;
  top:0;
  left:50%;
  width:89%;
  max-width:1424px;
  height:var(--np-header-h);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:minmax(220px,22.472%) minmax(0,49.438%) minmax(0,28.09%);
  align-items:center;
}
.cx-header::before{
  content:"";
  position:fixed;
  z-index:-1;
  top:0;
  left:50%;
  width:100vw;
  height:var(--np-header-h);
  transform:translateX(-50%);
  background:color-mix(in srgb,#fff 92%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.cx-left,.cx-right{ display:flex; align-items:center; min-width:0; }
.cx-left{ gap:8px; padding-inline:16px 10px; }
.cx-right{ justify-content:flex-end; gap:8px; padding-inline:12px 16px; }
.cx-header .up-home{ width:38px; height:38px; border-radius:50%; }
.cx-logo{ display:inline-flex; align-items:center; gap:1px; min-width:0; color:var(--green); }
.cx-logo>.mark{ width:39px; height:39px; margin-inline:-5px -3px; flex:none; }
.cx-word{ display:flex; flex-direction:column; min-width:0; line-height:1; }
.cx-word>span{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.025em; white-space:nowrap; }
.cx-word .lt{ color:var(--ink-soft); }
.cx-word small{ margin-top:3px; color:var(--ink-soft); font-size:10.5px; font-weight:650; letter-spacing:.01em; }
.cx-search{
  display:flex;
  align-items:center;
  gap:9px;
  width:min(100% - 40px,520px);
  height:38px;
  margin-inline:auto;
  padding:0 14px;
  background:var(--soft-gray);
  border:1px solid transparent;
  border-radius:100px;
}
.cx-search:focus-within{ background:#fff; border-color:var(--fresh); }
.cx-search svg{ width:17px; height:17px; flex:none; color:var(--ink-soft); }
.cx-search input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:500 13.5px/1 var(--font-ui); }
.cx-ic{ position:relative; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--green); background:var(--soft-gray); flex:none; }
.cx-ic:hover,.cx-ic.active{ background:var(--lime); }
.cx-ic svg{ width:20px; height:20px; }
.cx-badge{ position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px; border:2px solid #fff; border-radius:100px; background:var(--lime); color:var(--green); font-size:9.5px; font-weight:800; line-height:14px; }
.cx-account{ min-width:0; }
.cx-account .acct-btn{ height:40px; }
.cx-account .nav-community{ display:none; }
.cx-av-letter{ font-family:var(--font-display); font-weight:700; }
.cx-menu-action{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:12px; color:var(--ink); text-align:start; font-size:14.5px; font-weight:600; }
.cx-menu-action:hover{ background:var(--soft-gray); }
.cx-menu-action .am-ic{ width:20px; height:20px; color:var(--ink-soft); flex:none; }

/* App shell — X/Twitter style three-column grid.
   Proportions: left nav ~25% · center feed fills (~43-48%) · right rail ~25%.
   Full-width and centered, capped at 1600px on very large screens. The left
   column carries an ~78px inner padding, the right column sits 30px off the
   center, and there's an 80px breathing margin on the far right. */
.app{
  display:grid;
  grid-template-columns: minmax(220px, 22.472%) minmax(0, 49.438%) minmax(0, 28.09%);
  width:89%;
  max-width:1424px;
  margin-inline:auto;
  min-height:100vh;
  padding-top:var(--np-header-h);
}

/* shared avatar */
.av{ border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; color:#fff; }
.av.s{ width:34px; height:34px; font-size:14px; }
.av.m{ width:40px; height:40px; font-size:16px; }
.av.l{ width:56px; height:56px; font-size:22px; }

/* ---------- LEFT COLUMN ---------- */
.col-left{ width:auto; min-width:0; position:sticky; top:var(--np-header-h); height:calc(100vh - var(--np-header-h)); display:flex; flex-direction:column; padding:6px 4px 8px 16px; background:#fff; }
.up-head{ display:none; }
.up-logo{ display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:6px; }
/* Soft rounded Home button → back to the main site */
.up-home{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; background:color-mix(in srgb, var(--lime) 28%, transparent); color:var(--green); flex:none; transition:background .15s ease, transform .15s ease; }
.up-home:hover{ background:color-mix(in srgb, var(--lime) 42%, transparent); transform:translateY(-1px); }
.up-home svg{ width:20px; height:20px; }
/* Community brand: palm mark + two-tone wordmark + subtitle */
.up-brand{ display:inline-flex; align-items:center; gap:2px; color:var(--green); }
.up-brand .mark{ width:42px; height:42px; color:var(--green); flex:none; margin-inline:-6px -2px; }
.up-brand .mark img{ width:100%; height:100%; display:block; object-fit:contain; }
.up-brand-text{ display:inline-flex; flex-direction:column; line-height:1; }
.up-brand .word{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--green); letter-spacing:-.02em; }
.up-brand .word .lt{ color:var(--ink-soft); }
.up-brand .sub{ font-family:var(--font-ui); font-weight:600; font-size:12px; letter-spacing:.01em; color:var(--ink-soft); margin-top:3px; }
.up-nav{ display:flex; flex-direction:column; gap:3px; margin-top:18px; }
.nav-item{ position:relative; display:flex; align-items:center; gap:16px; font-size:18px; font-weight:600; color:var(--ink); padding:11px 15px; border-radius:100px; width:max-content; max-width:100%; transition:background .15s; cursor:pointer; }
.nav-item:hover{ background:var(--soft-gray); }
.nav-item svg{ width:25px; height:25px; flex:none; }
/* Count floats above the label (top-right), not inline beside it. Absolute so
   the item shrinks to icon+word; in the collapsed rail it lands on the icon. */
.nav-item .badge{ position:absolute; top:-3px; right:2px; background:var(--lime); color:var(--green); font-size:11px; font-weight:700; line-height:1.5; padding:0 6px; border-radius:100px; pointer-events:none; }
.nav-item.active{ font-weight:700; color:var(--green); background:var(--soft-gray); }
.nav-item.active svg{ color:var(--green); }
.quick-actions{ display:flex; align-items:center; gap:8px; margin:12px 8px 0; }
.qa-btn{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--soft-gray); color:var(--green); transition:transform .18s var(--ease), background .18s, color .18s; }
.qa-btn:hover{ transform:translateY(-2px); }
.qa-btn:active{ transform:translateY(0); }
.qa-btn.active{ background:var(--lime); color:var(--green); }
.qa-btn svg{ width:21px; height:21px; }

.me-chip{ display:none; }
.me-chip:hover{ background:var(--soft-gray); }
.me-chip .meta{ line-height:1.2; min-width:0; }
.me-chip .meta b{ font-size:13.5px; display:block; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-chip .meta small{ font-size:12px; color:var(--ink-soft); }
.me-chip .dots{ margin-left:auto; color:var(--ink-soft); }
.me-chip .dots svg{ width:18px; height:18px; }

/* ---------- CENTER COLUMN ---------- */
.col-main{ width:auto; min-width:0; min-height:100vh; padding:0 16px 28px; background:#F5F6EF; }
[data-theme="white"] .col-main{ background:#F4F5F0; }
[dir="ltr"] .col-main{ border-left:16px solid #F5F6EF; }
[dir="rtl"] .col-main{ border-right:16px solid #F5F6EF; }
[data-theme="white"][dir="ltr"] .col-main{ border-left-color:#F4F5F0; }
[data-theme="white"][dir="rtl"] .col-main{ border-right-color:#F4F5F0; }
.main-head{ position:sticky; top:var(--np-header-h); z-index:20; padding:12px 0 10px; background:color-mix(in srgb,#F5F6EF 88%,transparent); backdrop-filter:blur(12px); }
[data-theme="white"] .main-head{ background:color-mix(in srgb,#F4F5F0 88%,transparent); }
.main-head .mh-top{ display:none; }
.main-head h1{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; }
.feed-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tabs{ display:flex; }
.seg-tabs{ width:max-content; padding:4px; border:1px solid var(--line); border-radius:100px; background:#fff; }
.tab{ min-width:86px; text-align:center; padding:8px 14px; border-radius:100px; font-weight:650; font-size:13px; color:var(--ink-soft); cursor:pointer; position:relative; }
.tab .lbl{ display:inline-block; position:relative; }
.tab.active{ color:var(--green); font-weight:750; background:color-mix(in srgb,var(--lime) 34%,#fff); }
.tab:hover{ background:var(--soft-gray); }
.tabs:not(.seg-tabs){ width:100%; }
.tabs:not(.seg-tabs) .tab{ flex:1; min-width:0; padding:12px 0 0; border-radius:0; font-size:14.5px; background:transparent; }
.tabs:not(.seg-tabs) .tab .lbl{ padding-bottom:12px; }
.tabs:not(.seg-tabs) .tab.active .lbl::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; border-radius:4px; background:var(--lime); }
.feed-filter{ position:relative; }
.ff-btn{ display:flex; align-items:center; gap:7px; height:38px; padding:0 13px; border:1px solid var(--line); border-radius:100px; background:#fff; color:var(--ink-soft); font-size:12.5px; font-weight:700; }
.ff-btn:hover,.feed-filter.open .ff-btn{ border-color:var(--fresh); color:var(--green); }
.ff-btn svg{ width:16px; height:16px; }
.ff-menu{ position:absolute; top:calc(100% + 7px); inset-inline-end:0; z-index:40; width:170px; padding:6px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 16px 38px -22px rgba(20,61,46,.45); opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity .16s,transform .16s,visibility .16s; }
.feed-filter.open .ff-menu{ opacity:1; visibility:visible; transform:none; }
.ff-opt{ display:block; width:100%; padding:9px 10px; border-radius:9px; color:var(--ink-soft); text-align:start; font-size:12.5px; font-weight:650; }
.ff-opt:hover,.ff-opt.on{ background:var(--soft-gray); color:var(--green); }

/* composer */
.composer{ display:flex; gap:11px; margin-bottom:18px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px -22px rgba(20,61,46,.55); }
.composer .cbox{ flex:1; min-width:0; }
.composer textarea{ width:100%; border:none; outline:none; resize:none; font-family:var(--font-ui); font-size:16.5px; color:var(--ink); background:none; padding:8px 0; min-height:26px; line-height:1.4; }
.composer textarea::placeholder{ color:#9aa79c; }
.composer .ctools{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; }
.composer .ctools .icons{ display:flex; gap:2px; color:var(--green); }
.composer .ctools .icons button{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--green); }
.composer .ctools .icons button:hover{ background:color-mix(in srgb, var(--lime) 28%, transparent); }
.composer .ctools .icons svg{ width:17px; height:17px; }
.cpost{ background:var(--green); color:var(--cream); font-weight:700; font-size:13.5px; padding:8px 18px; border-radius:100px; transition:background .2s; }
.cpost:hover{ background:var(--green-600); }
.cpost:disabled{ opacity:.45; }
.composer-link,.composer-file{ margin-top:9px; border:1px solid var(--line); border-radius:12px; min-height:40px; display:flex; align-items:center; gap:8px; padding:6px 10px; background:color-mix(in srgb,var(--soft-gray) 55%,transparent); }
.composer-link[hidden],.composer-file[hidden]{ display:none; }
.composer-link input{ min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:500 13.5px/1.4 var(--font-ui); }
.composer-link button,.composer-file button{ width:28px; height:28px; flex:none; border-radius:50%; color:var(--ink-soft); font-size:20px; line-height:1; }
.composer-link button:hover,.composer-file button:hover{ background:var(--line); color:var(--ink); }
.composer-file span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); font-size:13.5px; font-weight:600; }
.composer-message{ min-height:0; margin-top:6px; color:var(--green-600); font-size:12.5px; font-weight:600; }
.composer-message.error{ color:#c73f54; }

/* posts */
#feedView .feed{ display:flex; flex-direction:column; gap:18px; }
.feed .post{ display:flex; gap:11px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px -22px rgba(20,61,46,.55); cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s; }
.feed .post:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--fresh) 46%,var(--line)); box-shadow:0 14px 30px -22px rgba(20,61,46,.52); }
.feed .post[data-url]:focus-visible{ outline:2px solid var(--fresh); outline-offset:-2px; background:color-mix(in srgb, var(--soft-gray) 55%, transparent); }
.feed .post.is-expanded{ flex-wrap:wrap; row-gap:0; background:#fff; }
.post .pbody{ flex:1; min-width:0; }
.post .phead{ display:flex; align-items:center; gap:5px; font-size:14px; }
.post .phead .nm{ font-weight:700; color:var(--ink); }
.post .phead .vf{ width:15px; height:15px; color:var(--fresh); }
.post .phead .hd{ color:var(--ink-soft); font-weight:500; }
.post .phead .dot{ color:var(--ink-soft); }
.post .phead .more{ margin-left:auto; color:var(--ink-soft); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; }
.post .phead .more:hover{ background:var(--soft-gray); color:var(--green); }
.post .phead .more svg{ width:17px; height:17px; }
.post .ptext{ font-size:14.5px; line-height:1.5; color:var(--ink); margin:2px 0 0; white-space:pre-wrap; }
.post .ptext .tag{ color:var(--green-600); font-weight:600; }

/* embedded domain card inside a post */
.embed{ margin-top:10px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.embed-head{ height:80px; position:relative; display:grid; place-items:center; }
.embed-head::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 13px, color-mix(in srgb, var(--acc) 18%, transparent) 13px 15px); }
.embed-head .mk{ width:36px; color:var(--acc); position:relative; z-index:1; }
.embed-meta{ padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.embed-meta .en{ font-family:var(--font-display); font-weight:600; font-size:16px; }
.embed-meta .en .tld{ color:var(--fresh); }
.embed-meta .ep{ font-family:var(--font-display); font-weight:600; font-size:13.5px; background:var(--soft-gray); padding:4px 11px; border-radius:100px; }

/* post image (line-art banner) */
.pimg{ margin-top:10px; border-radius:16px; height:190px; position:relative; overflow:hidden; display:grid; place-items:center; }
.pimg .mk{ width:64px; position:relative; z-index:1; }
.pimg::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 18px, color-mix(in srgb, var(--acc) 16%, transparent) 18px 20px); }
.pimg-upload{ display:block; width:100%; max-height:480px; margin-top:10px; border-radius:16px; object-fit:cover; background:var(--soft-gray); }
.pfile,.plink{ margin-top:10px; border:1px solid var(--line); border-radius:14px; padding:11px 13px; display:flex; align-items:center; gap:11px; color:var(--ink); background:color-mix(in srgb,var(--soft-gray) 45%,transparent); }
.pfile:hover,.plink:hover{ border-color:var(--fresh); background:color-mix(in srgb,var(--lime) 10%,transparent); }
.pfile-type{ width:44px; height:34px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--green); color:#fff; font-size:10px; font-weight:800; text-transform:uppercase; }
.pfile-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:650; }
.pfile-action{ color:var(--green-600); font-size:12px; font-weight:700; }
.plink-icon{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:color-mix(in srgb,var(--lime) 30%,transparent); color:var(--green); }
.plink-icon svg{ width:17px; height:17px; }
.plink>span:last-child{ min-width:0; display:flex; flex-direction:column; }
.plink b,.plink small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plink b{ font-size:13.5px; }
.plink small{ color:var(--ink-soft); font-size:11.5px; }

/* actions */
.pacts{ display:flex; align-items:center; justify-content:space-between; max-width:390px; margin-top:9px; }
.pact{ display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:12.5px; font-weight:600; }
.pact svg{ width:16px; height:16px; transition:transform .15s; }
.pact .ic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin:-7px; transition:background .15s, color .15s; }
.pact.reply:hover, .pact.reply:hover .ic{ color:var(--green); }
.pact.reply:hover .ic{ background:color-mix(in srgb, var(--green) 12%, transparent); }
.pact.repost:hover, .pact.repost:hover .ic{ color:#1f8a5b; }
.pact.repost:hover .ic{ background:color-mix(in srgb, #1f8a5b 14%, transparent); }
.pact.like:hover, .pact.like:hover .ic{ color:#e0556b; }
.pact.like:hover .ic{ background:color-mix(in srgb, #e0556b 14%, transparent); }
.pact.like.on{ color:#e0556b; }
.pact.view:hover, .pact.view:hover .ic{ color:var(--green); }
.post-discussion{ flex:0 0 calc(100% - 51px); min-width:0; margin-left:51px; cursor:default; border-top:1px solid var(--line); }
.post-discussion[hidden]{ display:none; }
.post-discussion .npd{ margin:0; padding:0 0 8px; }
.post-discussion-loading,.post-discussion-error{ padding:22px 0; color:var(--ink-soft); font-size:13.5px; font-weight:600; }
.post-discussion-error{ color:#c73f54; }

/* ---------- RIGHT COLUMN ---------- */
.col-right{ width:100%; min-width:0; padding:10px 16px 36px; position:sticky; top:var(--np-header-h); height:calc(100vh - var(--np-header-h)); overflow-y:auto; background:#F5F6EF; }
[data-theme="white"] .col-right{ background:#F4F5F0; }
.col-right::-webkit-scrollbar{ width:0; }
.up-search{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:9px 16px; position:sticky; top:0; }
.up-search:focus-within{ background:#fff; border-color:var(--fresh); }
.up-search svg{ width:17px; height:17px; color:var(--ink-soft); flex:none; }
.up-search input{ flex:1; border:none; outline:none; background:none; font-family:inherit; font-size:14px; color:var(--ink); min-width:0; }
.widget{ background:#fff; border:1px solid var(--line); border-radius:18px; margin-top:14px; overflow:hidden; }
.widget h3{ font-family:var(--font-display); font-weight:600; font-size:17px; padding:13px 16px 6px; }
.witem{ display:flex; align-items:center; gap:11px; padding:9px 16px; cursor:pointer; transition:background .12s; }
.witem:hover{ background:var(--soft-gray); }
.witem .wt{ min-width:0; flex:1; }
.witem .wt .k{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.witem .wt .v{ font-family:var(--font-display); font-weight:600; font-size:14.5px; }
.witem .wt .s{ font-size:12.5px; color:var(--ink-soft); }
.witem .wt .v .tld{ color:var(--fresh); }
.witem .price{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--green); }
.follow-btn{ background:var(--green); color:var(--cream); font-weight:700; font-size:12.5px; padding:7px 14px; border-radius:100px; flex:none; transition:background .2s; }
.follow-btn:hover{ background:var(--green-600); }
.follow-btn.ing{ background:transparent; color:var(--green); box-shadow:inset 0 0 0 1.5px var(--line); }
.wmore{ padding:13px 18px; color:var(--green-600); font-weight:600; font-size:14.5px; cursor:pointer; }
.wmore:hover{ background:var(--soft-gray); }

/* market signals — Telegram chat style */
.signals .sig-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:11px 14px 4px; }
.signals .sig-head h3{ padding:0; font-size:17px; }
.sig-src{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:#2AABEE; white-space:nowrap; }
.sig-src svg{ width:13px; height:13px; }
#signals{ background:#fff; padding:8px 12px 12px; display:flex; flex-direction:column; gap:7px; }
[data-theme="white"] #signals{ background:#fff; }
.tg-msg{ display:flex; align-items:flex-end; gap:6px; }
.tg-av{ width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(160deg,#2AABEE,#229ED9); }
.tg-av svg{ width:12px; height:12px; }
.tg-bubble{ position:relative; background:#EAF3F7; border-radius:12px 12px 3px 12px; padding:6px 10px 4px; max-width:100%; min-width:0; flex:1; }
.tg-bubble::before{ content:""; position:absolute; right:-4px; bottom:0; width:8px; height:11px; background:#EAF3F7; clip-path:polygon(0 0,0 100%,100% 100%); border-bottom-right-radius:3px; }
[data-theme="white"] .tg-bubble{ background:#EEF4F7; }
[data-theme="white"] .tg-bubble::before{ background:#EEF4F7; }
.tg-row{ display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:2px; }
.sig-tag{ font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--green); white-space:nowrap; }
.sig-chg{ display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:700; padding:1px 7px; border-radius:100px; direction:ltr; }
.sig-chg svg{ width:11px; height:11px; }
.sig-chg.up{ color:#1f8a5b; background:color-mix(in srgb,#1f8a5b 12%,transparent); }
.sig-chg.down{ color:#e0556b; background:color-mix(in srgb,#e0556b 12%,transparent); }
.tg-text{ font-size:12.5px; line-height:1.5; color:var(--charcoal); }
.tg-text b{ font-weight:700; color:var(--green); }
.tg-time{ display:flex; align-items:center; gap:3px; font-size:9.5px; color:#90a4ad; margin-top:2px; }
.tg-ticks{ width:12px; height:12px; color:#4FAE4E; }
.rfoot{ padding:16px 18px; font-size:12.5px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px 12px; }
.rfoot a:hover{ color:var(--green); text-decoration:underline; }

/* ---------- SETTINGS VIEW ---------- */
.settings .set-sec{ border-bottom:1px solid var(--line); padding:18px; }
.settings .set-sec h2{ font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 4px; }
.settings .set-sec p{ color:var(--ink-soft); font-size:14px; margin:0 0 14px; }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.set-row:first-of-type{ border-top:none; }
.set-row .sr-l b{ font-size:15px; display:block; }
.set-row .sr-l small{ font-size:13px; color:var(--ink-soft); }
.toggle{ width:48px; height:28px; border-radius:100px; background:#cbd2c6; position:relative; cursor:pointer; flex:none; transition:background .2s; }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); }
.toggle.on{ background:var(--fresh); }
.toggle.on::after{ transform:translateX(20px); }
.seg{ display:flex; gap:8px; }
.seg button{ font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:100px; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-soft); }
.seg button.on{ background:var(--green); color:var(--lime); box-shadow:none; }
.set-logout{ padding:18px; }
.set-logout button{ color:#e0556b; font-weight:700; font-size:15px; padding:11px 20px; border-radius:100px; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#e0556b 40%,transparent); }
.set-logout button:hover{ background:color-mix(in srgb,#e0556b 10%,transparent); }

.hideview{ display:none!important; }

/* ---------- PROFILE VIEW ---------- */
.profile-view{ overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px -22px rgba(20,61,46,.55); }
.profile-cover{ height:118px; background:var(--green); position:relative; overflow:hidden; }
.profile-cover::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg,transparent 0 22px,color-mix(in srgb,var(--lime) 18%,transparent) 22px 24px); }
.profile-summary{ display:flex; align-items:flex-start; gap:14px; padding:0 18px 16px; }
.profile-avatar{ width:72px; height:72px; margin-top:-32px; z-index:1; border:4px solid #fff; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--fresh); color:#fff; font:700 24px/1 var(--font-display); }
.profile-copy{ min-width:0; padding-top:12px; flex:1; }
.profile-copy h2{ font:650 20px/1.2 var(--font-display); color:var(--ink); }
.profile-copy p{ margin-top:2px; color:var(--ink-soft); font-size:12.5px; font-weight:600; }
.profile-copy small{ display:block; max-width:54ch; margin-top:8px; color:var(--ink-soft); font-size:12.5px; line-height:1.5; }
.profile-edit{ margin-top:14px; padding:8px 14px; border:1px solid var(--line); border-radius:100px; color:var(--green); font-size:12.5px; font-weight:750; }
.profile-edit:hover{ border-color:var(--fresh); background:var(--soft-gray); }
.profile-stats{ display:flex; flex-wrap:wrap; gap:18px; padding:13px 18px 16px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:12.5px; }
.profile-stats b{ color:var(--ink); }

/* ---------- MARKET DATA VIEWS ---------- */
.data-view{ padding:16px; background:color-mix(in srgb,var(--soft-gray) 46%,transparent); min-height:calc(100vh - 55px); }
.data-intro{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.data-intro h2{ font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.02em; }
.data-intro p{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; max-width:58ch; margin-top:4px; }
.live-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:100px; color:#1f8a5b; background:color-mix(in srgb,#1f8a5b 10%,transparent); font-size:11.5px; font-weight:700; white-space:nowrap; }
.live-pill i{ width:7px; height:7px; border-radius:50%; background:#1f8a5b; }
.metric-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.metric-card,.data-panel{ background:#fff; border:1px solid var(--line); border-radius:17px; }
.metric-card{ padding:14px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:3px 8px; }
.metric-label{ grid-column:1/-1; color:var(--ink-soft); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.metric-card strong{ font-family:var(--font-display); color:var(--green); font-size:22px; font-weight:600; }
.metric-card small{ grid-column:1/-1; color:var(--ink-soft); font-size:10.5px; }
.move,.data-list em,.rate-table em,.coin-grid em{ display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:3px 7px; border-radius:100px; font-style:normal; font-size:10.5px; font-weight:700; white-space:nowrap; }
.up{ color:#1f8a5b!important; }
.down{ color:#d9435b!important; }
.move.up,.data-list em.up,.rate-table em.up,.coin-grid em.up{ background:color-mix(in srgb,#1f8a5b 11%,transparent); }
.move.down,.data-list em.down,.rate-table em.down,.coin-grid em.down{ background:color-mix(in srgb,#d9435b 11%,transparent); }
.data-panel{ padding:15px; margin-bottom:10px; }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.panel-head h3,.data-panel>h3{ font-family:var(--font-display); color:var(--green); font-size:16px; font-weight:600; }
.eyebrow{ display:block; color:var(--ink-soft); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }
.panel-note{ color:var(--ink-soft); font-size:10.5px; font-weight:600; white-space:nowrap; }
.pulse-chart{ height:116px; display:flex; align-items:flex-end; gap:8px; padding:8px 4px 0; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0 28px,color-mix(in srgb,var(--line) 60%,transparent) 28px 29px); }
.pulse-chart span{ flex:1; min-width:12px; border-radius:8px 8px 2px 2px; background:var(--green); position:relative; }
.pulse-chart span:last-child{ background:var(--lime); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 18%,transparent); }
.chart-axis{ display:flex; justify-content:space-around; color:var(--ink-soft); font-size:9.5px; padding-top:6px; }
.data-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.data-grid .data-panel{ margin-bottom:0; }
.data-list>div,.funding-list>div{ display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid var(--line); }
.data-list>div:first-child,.funding-list>div:first-child{ border-top:0; padding-top:0; }
.data-list>div>span,.funding-list>div>span{ flex:1; min-width:0; }
.data-list b,.funding-list b{ display:block; font-size:13px; color:var(--ink); }
.data-list small,.funding-list small{ display:block; color:var(--ink-soft); font-size:10.5px; margin-top:1px; }
.data-list strong,.funding-list strong{ color:var(--green); font-size:12.5px; white-space:nowrap; }
.signal-list{ display:grid; gap:10px; }
.signal-list p{ display:grid; grid-template-columns:8px 1fr; gap:7px; color:var(--ink-soft); font-size:12px; line-height:1.45; }
.signal-list p b{ color:var(--ink); }
.signal-dot{ width:7px; height:7px; border-radius:50%; margin-top:5px; background:currentColor; }
.rate-table>div{ display:grid; grid-template-columns:1.2fr repeat(3,.8fr); align-items:center; gap:8px; padding:9px 8px; border-top:1px solid var(--line); font-size:12px; }
.rate-table .rate-head{ border-top:0; padding-top:0; color:var(--ink-soft); font-size:10.5px; font-weight:700; }
.rate-table b{ color:var(--green); }
.coin-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.coin-grid article{ min-width:0; border-radius:14px; padding:11px; background:var(--soft-gray); display:grid; grid-template-columns:32px 1fr; gap:5px 8px; align-items:center; }
.coin-icon{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:var(--lime); font-family:var(--font-display); font-weight:600; }
.coin-grid b,.coin-grid small{ display:block; }
.coin-grid b{ font-size:12px; }
.coin-grid small{ color:var(--ink-soft); font-size:9.5px; }
.coin-grid strong{ grid-column:1/-1; color:var(--green); font-size:14px; }
.gold-panel{ background:color-mix(in srgb,#d8b756 10%,#fff); }
.gold-value{ display:block; color:var(--green); font-family:var(--font-display); font-size:23px; }
.gold-value small{ display:block; color:var(--ink-soft); font:600 10.5px/1.4 var(--font-ui); }
.gold-panel p{ color:var(--ink-soft); font-size:11.5px; margin-top:8px; }
.news-lead{ padding:18px; }
.news-lead h3{ font-size:20px; line-height:1.25; max-width:30ch; margin:5px 0 8px; }
.news-lead p{ color:var(--ink-soft); font-size:13px; line-height:1.55; max-width:67ch; }
.news-meta{ display:flex; gap:14px; color:var(--ink-soft); font-size:10.5px; font-weight:600; margin-top:12px; }
.news-list article{ display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.news-list article:first-child{ border-top:0; padding-top:0; }
.news-time{ flex:none; color:var(--ink-soft); font-size:9.5px; width:24px; padding-top:2px; }
.news-list b{ display:block; color:var(--ink); font-size:12.5px; line-height:1.35; }
.news-list p{ color:var(--ink-soft); font-size:10.5px; line-height:1.4; margin-top:3px; }
.calendar-list>div{ display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.calendar-list>div:first-child{ border-top:0; padding-top:0; }
.calendar-list time{ font-family:var(--font-display); color:var(--green); font-size:13px; font-weight:600; }
.calendar-list b,.calendar-list small{ display:block; }
.calendar-list b{ font-size:12.5px; }
.calendar-list small{ color:var(--ink-soft); font-size:10.5px; }
.impact{ padding:3px 7px; border-radius:100px; font-style:normal; font-size:9.5px; font-weight:700; }
.impact.high{ color:#d9435b; background:color-mix(in srgb,#d9435b 10%,transparent); }
.impact.medium{ color:#9a7418; background:color-mix(in srgb,#d8b756 18%,transparent); }

/* ---------- NOTIFICATIONS VIEW ---------- */
.notif-head{ font-family:var(--font-display); font-weight:600; font-size:16px; padding:14px 18px 10px; color:var(--ink); }
.notif-item{ display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.notif-item:hover{ background:color-mix(in srgb, var(--soft-gray) 55%, transparent); }
.notif-item.unread{ background:color-mix(in srgb, var(--lime) 12%, transparent); }
.notif-item.unread:hover{ background:color-mix(in srgb, var(--lime) 18%, transparent); }
.notif-item .nt-ic{ width:26px; height:26px; flex:none; display:grid; place-items:center; margin-top:2px; }
.notif-item .nt-ic svg{ width:22px; height:22px; }
.notif-item .av.s{ flex:none; }
.notif-item .nt-body{ flex:1; min-width:0; }
.notif-item .nt-text{ font-size:14.5px; line-height:1.45; color:var(--ink); }
.notif-item .nt-text b{ font-weight:700; }
.notif-item .nt-target{ color:var(--green-600); font-weight:700; }
.notif-item .nt-time{ color:var(--ink-soft); font-weight:500; }
.notif-item .nt-snip{ margin-top:5px; font-size:14px; color:var(--ink-soft); line-height:1.4; }
.notif-item .follow-btn{ align-self:center; }

/* ---------- BLOG VIEW ---------- */
.blog-intro{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px 12px; }
.blog-intro h2{ font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.01em; }
.blog-intro p{ color:var(--ink-soft); font-size:14px; margin:4px 0 0; max-width:42ch; line-height:1.45; }
.blog-intro .btn{ flex:none; }
.blog-cats{ display:flex; gap:8px; overflow-x:auto; padding:4px 18px 14px; scrollbar-width:none; }
.blog-cats::-webkit-scrollbar{ height:0; }
.blog-chip{ flex:none; font-weight:600; font-size:13px; padding:8px 14px; border-radius:100px; background:var(--soft-gray); color:var(--ink-soft); white-space:nowrap; transition:all .18s var(--ease); cursor:pointer; }
.blog-chip.active{ background:var(--green); color:var(--lime); }

/* white center column while browsing the blog */
.blog-mode .col-main{ background:#fff; }
[dir="ltr"] .blog-mode .col-main{ border-left-color:#fff; }
[dir="rtl"] .blog-mode .col-main{ border-right-color:#fff; }

/* each article is a separate white card with a hover lift */
.blog-grid{ display:flex; flex-direction:column; gap:14px; padding:4px 18px 26px; }
.bcard{ display:flex; gap:15px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(20,61,46,.05); cursor:pointer; transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.bcard:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(20,61,46,.32); border-color:color-mix(in srgb, var(--fresh) 55%, var(--line)); }
.bcard .bthumb{ width:118px; height:96px; border-radius:13px; flex:none; position:relative; overflow:hidden; display:grid; place-items:center; }
.bcard .bthumb::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 13px, color-mix(in srgb, var(--acc) 22%, transparent) 13px 15px); }
.bcard .bthumb .mk{ width:34px; color:var(--acc); position:relative; z-index:1; }
.bcard .bbody{ flex:1; min-width:0; display:flex; flex-direction:column; }
.bcard .btag{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-600); }
.bcard h3{ font-family:var(--font-display); font-weight:600; font-size:17.5px; line-height:1.2; letter-spacing:-.01em; margin:4px 0 0; }
.bcard .bex{ font-size:13.5px; color:var(--ink-soft); line-height:1.45; margin:5px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bcard .bmeta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); padding-top:8px; }
.bcard .bmeta .av{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:11px; color:#fff; flex:none; }
.bcard .bmeta b{ color:var(--ink); font-weight:700; }
.bcard .bmeta .dot{ opacity:.6; }
.bstats{ display:flex; gap:16px; margin-top:9px; }
.bstat{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.bstat svg{ width:15px; height:15px; }

/* blog list shares the same flexible center grid — no width override needed. */

/* reading a single article: hide the right column and let the center feed
   expand into its place. The article text itself stays readable thanks to
   .article-wrap{ max-width:680px }, so the wide track never hurts legibility. */
.reading-article .col-right{ display:none; }
.reading-article .app{ grid-template-columns: minmax(220px, 20%) minmax(0, 1fr); }

/* editor */
.editor-bar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.ed-back{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14.5px; color:var(--green); }
.ed-back svg{ width:17px; height:17px; }
.ed-title{ font-family:var(--font-display); font-weight:600; font-size:16px; }
.editor-body{ padding:20px 22px 40px; }
.ed-cat-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.ed-input-title{ width:100%; border:none; outline:none; background:none; font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; color:var(--ink); line-height:1.1; }
.ed-input-title::placeholder{ color:#b3bcae; }
.ed-input-sub{ width:100%; border:none; outline:none; background:none; font-family:var(--font-ui); font-size:17px; color:var(--ink-soft); margin-top:10px; }
.ed-input-sub::placeholder{ color:#b3bcae; }
.ed-input-body{ width:100%; min-height:300px; border:none; outline:none; resize:none; background:none; font-family:var(--font-ui); font-size:16.5px; line-height:1.65; color:var(--ink); margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.ed-input-body::placeholder{ color:#b3bcae; }

/* article reader */
.blog-mode.reading-article .col-main{ background:#fff; }

/* reading progress — thin lime bar pinned at the very top, fills on scroll */
.read-progress{ position:fixed; top:0; inset-inline:0; height:3px; background:transparent; z-index:120; pointer-events:none; }
.read-progress i{ display:block; height:100%; width:0; background:var(--lime); border-end-end-radius:3px; transition:width .08s linear; }

.article-hero{ height:200px; position:relative; display:grid; place-items:center; }
.article-hero::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 18px, color-mix(in srgb, var(--acc) 18%, transparent) 18px 20px); }
.article-hero .mk{ width:72px; color:var(--acc); position:relative; z-index:1; }
.article-hero .a-back{ position:absolute; top:16px; inset-inline-start:16px; z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--green); }
.article-hero .a-back svg{ width:19px; height:19px; }
[dir="rtl"] .article-hero .a-back svg{ transform:scaleX(-1); }

/* two-column reader: article body + sticky author card */
.reader-grid{ max-width:980px; margin-inline:auto; padding:24px 26px 50px; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:34px; align-items:start; }
.article-wrap{ min-width:0; }
.article-wrap .a-tag{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); }
.article-wrap h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.6vw,34px); line-height:1.12; letter-spacing:-.02em; margin:8px 0 0; }
.article-wrap .a-sub{ font-size:18px; color:var(--ink-soft); line-height:1.5; margin:12px 0 0; }
.article-wrap .a-byline{ display:flex; align-items:center; gap:11px; margin:20px 0 22px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.article-wrap .a-byline .av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:16px; color:#fff; flex:none; }
.article-wrap .a-byline .bn b{ font-size:15px; }
.article-wrap .a-byline .bn small{ display:block; font-size:13px; color:var(--ink-soft); }
.article-wrap .a-body{ font-size:16.5px; line-height:1.75; color:var(--ink); }
.article-wrap .a-body p{ margin:0 0 18px; }
.article-wrap .a-body p:first-child::first-letter{ font-family:var(--font-display); font-size:54px; font-weight:600; float:left; line-height:.8; padding:6px 10px 0 0; color:var(--green); }
[dir="rtl"] .article-wrap .a-body p:first-child::first-letter{ float:right; padding:6px 0 0 10px; }

/* pull-quote auto-injected after the first paragraph */
.article-wrap .pull-quote{ margin:6px 0 22px; padding-inline-start:18px; border-inline-start:3px solid var(--lime); font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.6vw,25px); line-height:1.3; letter-spacing:-.01em; color:var(--green); }

/* sticky author card */
.author-card{ position:sticky; top:calc(var(--np-header-h) + 16px); background:var(--soft-gray); border:1px solid var(--line); border-radius:16px; padding:18px; }
.author-card .au-av{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:19px; color:#fff; flex:none; }
.author-card .au-name{ font-family:var(--font-display); font-weight:600; font-size:16px; margin-top:11px; }
.author-card .au-role{ font-size:12.5px; font-weight:600; color:var(--green-600); margin-top:2px; }
.author-card .au-bio{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:10px; }
.author-card .au-follow{ margin-top:14px; width:100%; height:38px; border-radius:100px; font-weight:700; font-size:14px; background:var(--green); color:var(--lime); transition:background .18s, color .18s, box-shadow .18s; }
.author-card .au-follow:hover{ background:var(--green-600); }
.author-card .au-follow.on{ background:transparent; color:var(--green); box-shadow:inset 0 0 0 1.6px var(--line); }

/* article inline actions (views / like / share) */
.a-acts{ display:flex; align-items:center; gap:18px; margin:0 0 24px; }
.a-act{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-soft); transition:color .15s; }
.a-act svg{ width:19px; height:19px; transition:transform .12s; }
.a-act:hover{ color:var(--green); }
.a-act[data-alike].on{ color:#e0556b; }
.a-act[data-alike].on svg{ fill:#e0556b; }
.a-act[data-ashare].on{ color:var(--green); }

/* keep reading — related article cards before the comments */
.keep-reading{ margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.keep-reading h3{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; margin:0 0 14px; }
.kr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kr-card{ text-align:start; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.kr-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(20,61,46,.3); border-color:color-mix(in srgb, var(--fresh) 55%, var(--line)); }
.kr-thumb{ height:74px; position:relative; display:grid; place-items:center; }
.kr-thumb::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(125deg, transparent 0 12px, color-mix(in srgb, var(--acc) 22%, transparent) 12px 14px); }
.kr-thumb .mk{ width:26px; color:var(--acc); position:relative; z-index:1; }
.kr-card .kr-tag{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-600); padding:10px 12px 0; }
.kr-card .kr-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:14px; line-height:1.25; color:var(--ink); padding:3px 12px 12px; }

/* comments */
.article-comments{ margin-top:32px; padding-top:26px; border-top:1px solid var(--line); }
.ac-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
.ac-head h3{ font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; }
.ac-head .ac-count{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.ac-compose{ display:flex; gap:10px; margin-bottom:20px; }
.ac-compose .av{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--green); background:color-mix(in srgb, var(--fresh) 16%, #fff); flex:none; }
.ac-compose .acw{ flex:1; min-width:0; }
.ac-compose textarea{ width:100%; min-height:44px; border:1px solid var(--line); border-radius:13px; background:#fff; resize:none; padding:11px 13px; font-family:var(--font-ui); font-size:14px; line-height:1.5; color:var(--ink); outline:none; transition:border-color .18s; }
.ac-compose textarea:focus{ border-color:var(--fresh); }
.ac-compose .acw-foot{ display:flex; justify-content:flex-end; margin-top:8px; }
.comment{ display:flex; gap:10px; padding:14px 0; border-top:1px solid var(--line); }
.comment .av{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff; flex:none; }
.comment .cm-body{ flex:1; min-width:0; }
.comment .cm-top{ display:flex; align-items:baseline; gap:7px; font-size:13px; }
.comment .cm-top b{ font-weight:700; }
.comment .cm-top .cm-time{ color:var(--ink-soft); font-weight:500; }
.comment .cm-text{ font-size:14px; line-height:1.5; color:var(--ink); margin:4px 0 0; }
.comment .cm-acts{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.cm-vote{ display:inline-flex; align-items:center; gap:8px; background:var(--soft-gray); border-radius:100px; padding:3px 4px; }
.cm-vote button{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:var(--ink-soft); transition:background .15s, color .15s; }
.cm-vote button:hover{ background:#fff; }
.cm-vote button svg{ width:15px; height:15px; }
.cm-vote .cm-score{ font-size:12.5px; font-weight:700; color:var(--ink); min-width:14px; text-align:center; }
.cm-vote button.up.on{ color:var(--green); }
.cm-vote button.down.on{ color:#e0556b; }
.cm-link{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:color .15s; }
.cm-link svg{ width:15px; height:15px; }
.cm-link:hover{ color:var(--green); }
.ac-privacy{ margin-top:18px; font-size:12px; color:var(--ink-soft); }
.ac-privacy a{ color:var(--green-600); font-weight:600; }
.ac-privacy a:hover{ text-decoration:underline; }

/* NP Discuss comments injected at the foot of the in-app blog article */
.article-discuss{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }

/* reader: collapse to one column on smaller widths; author card becomes a row on top */
@media(max-width:880px){
  .reader-grid{ grid-template-columns:minmax(0,1fr); gap:22px; padding-inline:18px; }
  .author-card{ position:static; order:-1; display:flex; align-items:center; gap:12px; padding:12px 14px; }
  .author-card .au-info{ flex:1; min-width:0; }
  .author-card .au-name{ margin-top:0; }
  .author-card .au-bio{ display:none; }
  .author-card .au-follow{ width:auto; margin-top:0; padding-inline:20px; flex:none; }
  .kr-grid{ grid-template-columns:1fr; }
}

/* ---------- SKELETON LOADER ---------- */
/* Shimmer placeholders shown while the feed loads, then swapped for real posts. */
@keyframes np-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.sk{
  background:var(--soft-gray);
  border-radius:8px;
  background-image:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.72) 50%, transparent 68%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  animation:np-shimmer 1.25s var(--ease) infinite;
}
.sk-post{ display:flex; gap:13px; padding:18px 4px; border-bottom:1px solid var(--line); }
.sk-av{ width:44px; height:44px; border-radius:50%; flex:none; }
.sk-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.sk-line{ height:11px; border-radius:6px; }
.sk-line.w40{ width:40%; } .sk-line.w92{ width:92%; } .sk-line.w74{ width:74%; }
.sk-media{ height:168px; border-radius:16px; margin-top:6px; }
.sk-acts{ display:flex; gap:26px; margin-top:6px; }
.sk-pill{ width:46px; height:13px; border-radius:7px; }
/* reveal real content once the skeleton clears */
.feed-in{ animation:np-fade .3s var(--ease) both; }
@keyframes np-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .sk{ animation:none; } .feed-in{ animation:none; } }

/* ---------- RESPONSIVE ---------- */
/* tablet: drop the right rail, keep a compact left rail + flexible feed */
@media(max-width:1100px){
  .app, .reading-article .app{ grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); padding-right:0; }
  .cx-header{ grid-template-columns:minmax(190px,220px) minmax(0,1fr); }
  .cx-right{ position:absolute; inset-inline-end:12px; }
  .cx-search{ width:min(52%,430px); }
  .cx-account .ac-name,.cx-account .ac-chev{ display:none; }
  .cx-account .acct-btn{ width:40px; padding:4px; }
  .col-right{ display:none; }
}
/* mobile: collapse the left sidebar to an icon rail (mobile nav), feed fills */
@media(max-width:680px){
  .cx-header{ display:none; }
  .app, .reading-article .app{ width:100%; grid-template-columns:72px minmax(0,1fr); padding:0; }
  .col-left{ width:auto; top:0; height:100vh; align-items:center; padding-inline:4px; }
  .up-head{ display:flex; justify-content:center; padding:8px 4px; }
  .col-main{ padding:0; background:#fff; }
  .main-head{ top:0; padding:0; background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--line); }
  .main-head .mh-top{ display:flex; }
  .feed-controls{ padding:8px; }
  .seg-tabs{ width:100%; }
  .seg-tabs .tab{ min-width:0; padding-inline:8px; }
  .feed-filter{ display:none; }
  .composer{ margin:0; border-width:0 0 1px; border-radius:0; box-shadow:none; }
  #feedView .feed{ gap:0; }
  .feed .post{ border-width:0 0 1px; border-radius:0; box-shadow:none; }
  .feed .post:hover{ transform:none; box-shadow:none; }
  .up-logo .up-brand, .nav-item span:not(.badge), .me-chip .meta, .me-chip .dots{ display:none; }
  .up-logo{ justify-content:center; padding:8px 4px; }
  .nav-item{ justify-content:center; padding:12px; }
  .quick-actions{ flex-direction:column; margin-inline:auto; }
  .qa-btn{ width:46px; height:46px; }
  .me-chip{ justify-content:center; }
  .post-discussion{ flex-basis:100%; margin-left:0; }
  .data-view{ padding:10px; }
  .metric-strip,.coin-grid,.data-grid{ grid-template-columns:1fr; }
  .metric-card{ grid-template-columns:1fr auto; }
  .data-intro{ align-items:center; }
  .data-intro p{ display:none; }
  .rate-table>div{ grid-template-columns:1fr repeat(3,.72fr); padding-inline:2px; }
}