@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
/* ArticlePaid Opinions design */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#fff;--bg:#fff;--bg-alt:#f4f6fa;--surface:#f4f6fa;--surface2:#e9edf3;--border:#e6e9ef;--border2:#d3d9e2;
  --text:#0f1623;--text2:#556070;--text3:#8a94a4;
  --blue:#2f5bea;--blue-bg:#eaf0ff;--blue-dark:#2347c4;
  --green:#0f9d6b;--green-bg:#e4f6ef;--red:#e5384f;--orange:#e8890c;
  --art:#b45309;--art-bg:#fef4e2;--sto:#0e7490;--sto-bg:#e6f7fb;--opi:#2f5bea;--opi-bg:#eaf0ff;--urd:#0f9d6b;--urd-bg:#e4f6ef;
  --font:'Inter',system-ui,-apple-system,sans-serif;--serif:'Fraunces',Georgia,serif;
  --hover:#f8f9fc;--cmt-bg:#f1f4f9;--shadow:0 10px 30px rgba(15,22,35,.14);
}
html,body{height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior-y:none;width:100%}
img{max-width:100%;display:block}
button{font-family:var(--font);cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ══ SHELL ══ */
.shell{display:grid;grid-template-columns:270px minmax(0,640px) 340px;height:100vh;max-width:1260px;margin:0 auto;overflow:hidden}
.left-col{display:flex;flex-direction:column;border-right:1px solid var(--border);height:100vh;overflow:hidden;justify-content:space-between}
.feed-col{height:100vh;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--border);overscroll-behavior-y:contain;scrollbar-width:none}
.feed-col::-webkit-scrollbar,.right-col::-webkit-scrollbar,.lcol-scroll::-webkit-scrollbar{width:0}
.right-col{height:100vh;padding:8px 8px 8px 14px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none}
@media(max-width:1100px){.shell{grid-template-columns:88px minmax(0,640px) 320px}.nav-label,.nav-brand-text,.nav-write-text{display:none}.nav-item{justify-content:center;padding:10px}.nav-brand{justify-content:center}}
@media(max-width:880px){.shell{grid-template-columns:minmax(0,1fr)}.left-col,.right-col{display:none}.feed-col{height:100dvh;padding-bottom:64px;border:0}}

/* ══ LEFT COLUMN ══ */
.lcol-scroll{overflow-y:auto;height:100%;overscroll-behavior-y:contain;padding-bottom:20px;scrollbar-width:none}
.lcol-tabs{display:flex;gap:4px;margin:14px 12px 10px;padding:4px;background:var(--surface);border-radius:14px}
.lcol-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 6px;border:0;background:none;border-radius:10px;font-size:13px;font-weight:700;color:var(--text2);transition:background .16s,color .16s}
.lcol-tab i{font-size:12px}
.lcol-tab:hover{color:var(--text)}
.lcol-tab.active{background:var(--white);color:var(--blue);box-shadow:0 1px 4px rgba(15,22,35,.14)}
.lcol-panel{display:none}.lcol-panel.active{display:block}
.lcol-section-label{font-size:12px;font-weight:700;color:var(--text3);padding:8px 18px 6px;letter-spacing:.01em}
.lcol-cat-item{display:flex;align-items:center;gap:11px;width:calc(100% - 16px);margin:1px 8px;padding:8px 10px;border:0;background:none;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--text);text-align:left;transition:background .14s}
.lcol-cat-item:hover{background:var(--surface)}
.lcol-cat-item.active-cat{background:var(--blue-bg);color:var(--blue);font-weight:700}
.lcol-cat-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.lcol-cat-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcol-empty{padding:20px 16px;font-size:13px;color:var(--text2);text-align:center}
.lcol-footer{margin:40px 12px 100px;padding:14px 16px;background:var(--surface);border-radius:16px;font-size:12.5px;color:var(--text2);line-height:1.6}
.lcol-footer a{color:var(--blue);font-weight:600}.lcol-footer a:hover{text-decoration:underline}
.nav-brand{display:flex;align-items:center;gap:10px;padding:12px 12px 6px}
.nav-brand-icon{width:36px;height:36px;border-radius:12px;background:var(--text);display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:16px}
.nav-brand-text{font-size:19px;font-weight:700}.nav-brand-text em{color:var(--blue);font-style:normal}
.nav-items{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.nav-item{display:flex;align-items:center;gap:18px;padding:11px 14px;border-radius:99px;font-size:19px;transition:background .15s;width:100%}
.nav-item:hover{background:var(--surface)}.nav-item.active{font-weight:700}
.nav-item i{font-size:22px;width:26px;text-align:center}

/* ══ FEED HEADER ══ */
.feed-hdr-wrap{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.feed-hdr-combined{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 16px;gap:10px}
.m-menu-btn{display:none;width:38px;height:38px;border-radius:50%;background:var(--surface);border:0;font-size:14px;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:880px){.m-menu-btn{display:flex}}
.hdr-spacer{display:none}
.feed-tabs-inline{display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:99px;margin:0}
.feed-tab{display:flex;align-items:center;justify-content:center;padding:8px 22px;border-radius:99px;font-size:14.5px;font-weight:700;color:var(--text2);cursor:pointer;transition:background .18s,color .18s}
.feed-tab:hover{color:var(--text)}
.feed-tab.active{background:var(--white);color:var(--text);box-shadow:0 1px 4px rgba(15,22,35,.16)}
.feed-tab.active::after{display:none}

.new-pill{position:sticky;top:124px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:7px;background:var(--blue);color:#fff;border:0;border-radius:99px;padding:10px 20px;font-size:13.5px;font-weight:700;box-shadow:0 8px 26px rgba(47,91,234,.45);z-index:9;margin:10px auto;width:fit-content;transition:background .15s,transform .1s}
.new-pill.show{display:flex}
.new-pill:hover{background:var(--blue-dark);transform:translateX(-50%) scale(1.03)}

/* ══ POST CARD — type colour rail on the left edge ══ */
.post{position:relative;display:flex;gap:13px;padding:16px 18px 0 18px;border-bottom:1px solid var(--border);transition:background .14s;cursor:pointer;animation:fadeIn .3s ease both;content-visibility:auto;contain-intrinsic-size:400px}
.post:hover{background:var(--hover)}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.post__av-col{flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.post__av{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface)}
.post__av-wrap{position:relative}
.post__av-badge{position:absolute;bottom:-2px;right:-2px;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;border:2px solid var(--bg)}
.post__av-badge--article{background:var(--art)}.post__av-badge--story{background:var(--sto)}.post__av-badge--opinion{background:var(--opi)}.post__av-badge--urdu{background:var(--urd)}
.post__body{flex:1;min-width:0;padding-bottom:12px}
.post__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;row-gap:4px;margin-bottom:2px}
.post__meta-left{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}
.post__name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;color:var(--text)}
.post__name:hover{text-decoration:underline}
.post__verified{width:16px;height:16px;flex-shrink:0}
.post__journalist{background:var(--blue-bg);color:var(--blue);border-radius:50%;font-size:7.5px;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center}
.post__sep{color:var(--text3);font-size:13px}
.post__time{font-size:13.5px;color:var(--text2);white-space:nowrap}
.post__meta-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:520px){.post__meta-right{flex-basis:100%;justify-content:flex-start;margin:2px 0 0}}
.tl-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap;line-height:1}
.tl-badge i{font-size:9px}
.tl-badge--article{background:var(--art-bg);color:var(--art)}.tl-badge--story{background:var(--sto-bg);color:var(--sto)}.tl-badge--opinion{background:var(--opi-bg);color:var(--opi)}.tl-badge--urdu{background:var(--urd-bg);color:var(--urd)}
.cat-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px 4px 8px;border-radius:99px;background:var(--surface);color:var(--text2);white-space:nowrap;line-height:1}
.cat-pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

.post__content{display:flex;gap:12px;align-items:flex-start;margin-top:6px;flex-direction:column}
.post__text{flex:1;min-width:0;width:100%}
.post__title{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.3;margin-bottom:5px;word-break:break-word}
.post__excerpt{font-size:15px;line-height:1.6;color:var(--text2);white-space:pre-wrap;word-break:break-word}
.post.is-opinion .post__title{display:none}
.post.is-opinion .post__excerpt{font-family:var(--serif);font-size:18.5px;font-weight:400;color:var(--text);line-height:1.58;letter-spacing:-.003em}
.post__excerpt .p-hashtag{color:var(--blue);font-family:var(--font);font-weight:600;font-size:.9em}
.post__excerpt .p-hashtag:hover{text-decoration:underline}
.post__thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-top:10px;border:1px solid var(--border);background:var(--surface)}
.post__stats{display:flex;align-items:center;gap:14px;margin-top:10px}
.post-stat{display:flex;align-items:center;gap:5px;color:var(--text3);font-size:13px}
.post__actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:4px;gap:6px}
.act{position:relative;display:flex;align-items:center;gap:5px;background:none;border:0;color:var(--text2);font-size:20px;font-weight:500;padding:8px 10px;border-radius:99px;transition:background .14s,color .14s}
.act i{font-size:16px}
.act--rxn:hover,.act--cmt:hover{color:var(--blue);background:var(--blue-bg)}
.act--cmt,.act--bookmark{display:inline-flex;gap:6px}
.act--cmt .cmt-n,.act--bookmark .bmk-n{font-size:13.5px;font-weight:600;color:inherit;line-height:1}
.act--share:hover{color:var(--green);background:var(--green-bg)}
.act--copy:hover{color:#7856ff;background:rgba(120,86,255,.12)}
.act--bookmark:hover,.act--bookmark.bookmarked{color:var(--orange)}
.act--bookmark:hover{background:rgba(232,137,12,.12)}
.rxn-chips{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rxn-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--text2);background:var(--surface);border:0;padding:3px 9px;border-radius:99px}
.rxn-chip:hover{background:var(--blue-bg);color:var(--blue)}
.rxn-chip.mine{color:var(--blue);font-weight:700}
.rxn-wrap{position:relative}
.act--rxn.reacted-like{color:var(--blue)}.act--rxn.reacted-love,.act--rxn.reacted-angry{color:var(--red)}.act--rxn.reacted-haha,.act--rxn.reacted-wow,.act--rxn.reacted-sad{color:var(--orange)}
.rxn-picker{position:absolute;bottom:calc(100% + 8px);left:0;display:flex;gap:2px;background:var(--white);border:1px solid var(--border);border-radius:99px;padding:5px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(6px) scale(.92);transition:.14s;z-index:40}
.rxn-picker.open{opacity:1;pointer-events:auto;transform:none}
.rxn-opt{width:38px;height:38px;border-radius:50%;border:0;background:none;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.rxn-opt:hover{transform:scale(1.35) translateY(-4px)}
.follow-btn{background:var(--text);color:var(--bg);border:1.5px solid var(--text);border-radius:99px;padding:5px 15px;font-size:13px;font-weight:700;flex-shrink:0;display:flex;align-items:center;gap:5px;transition:background .15s,color .15s,border-color .15s,transform .1s}
.follow-btn:hover{opacity:.88}.follow-btn:active{transform:scale(.96)}
.follow-btn.following{background:transparent;color:var(--text2);border-color:var(--border2)}
.follow-btn.following:hover{color:var(--red);border-color:var(--red);background:rgba(229,56,79,.08)}

/* ══ COMMENTS ══ */
.cmt-panel{display:none;background:var(--cmt-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cmt-panel.open{display:block;animation:cmtDown .25s cubic-bezier(.16,1,.3,1)}
@keyframes cmtDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cmt-inner{padding:18px 20px 18px 22px;display:flex;flex-direction:column;gap:16px;background:var(--cmt-bg)}
.cmt-loading,.cmt-empty{padding:22px 0;text-align:center;color:var(--text2);font-size:14px}
.cmt-count{font-size:13px;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:7px}
.cmt-count::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue)}
.cmt-form{display:flex;gap:12px}
.cmt-form__av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface)}
.cmt-form__box{flex:1;border:1.5px solid var(--border);border-radius:18px;padding:11px 14px;background:var(--white);transition:border-color .2s,box-shadow .2s}
.cmt-form__box.focused{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-bg)}
.cmt-form__box textarea{width:100%;border:0;outline:0;background:none;font-family:var(--font);font-size:14.5px;resize:none;min-height:24px;color:var(--text);line-height:1.5}
.cmt-form__box textarea::placeholder{color:var(--text3)}
.cmt-form__toolbar{display:none;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.cmt-form__box.focused .cmt-form__toolbar{display:flex}
.cmt-form__chars{font-size:12px;color:var(--text3);font-weight:600}
.cmt-submit{background:var(--blue);color:#fff;border:0;border-radius:99px;padding:8px 20px;font-size:13.5px;font-weight:700;transition:background .15s,transform .1s}
.cmt-submit:not(:disabled):hover{background:var(--blue-dark)}
.cmt-submit:disabled{opacity:.45;cursor:not-allowed}
.cmt-login{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--white);border:1px dashed var(--border2);border-radius:16px;font-size:14px;color:var(--text2)}
.cmt-login a{color:var(--blue);font-weight:700}
.cmt-item{display:flex;gap:11px;padding:3px 0}
.cmt-item__av{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--surface)}
.cmt-item__body{flex:1;min-width:0}
.cmt-item__bubble{background:var(--white);border:1px solid var(--border);border-radius:5px 18px 18px 18px;padding:10px 15px;transition:border-color .2s}
.cmt-item:hover .cmt-item__bubble{border-color:var(--border2)}
.cmt-item__name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:3px}
.cmt-item__text{font-size:14.5px;line-height:1.55;word-break:break-word}
.cmt-item__foot{display:flex;align-items:center;gap:14px;margin-top:5px;padding-left:6px}
.cmt-item__time{font-size:12px;color:var(--text3)}
.cmt-reply-btn{font-size:12.5px;color:var(--text2);font-weight:700;background:none;border:0;padding:2px 6px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}
.cmt-reply-btn::before{content:'\f112';font-family:'Font Awesome 6 Free';font-weight:900;font-size:10px;opacity:.6}
.cmt-reply-btn:hover{color:var(--blue);background:var(--blue-bg)}
.cmt-replies{margin-top:10px;padding-left:16px;position:relative;display:flex;flex-direction:column;gap:10px}
.cmt-replies::before{content:'';position:absolute;left:0;top:0;bottom:18px;width:2px;background:var(--border);border-radius:2px}
.cmt-item--reply .cmt-item__av{width:30px;height:30px}
.cmt-item--reply .cmt-item__bubble{border-radius:5px 16px 16px 16px;padding:8px 13px}
.reply-slot:empty{display:none}
.reply-slot{margin-top:10px;padding-left:16px;position:relative}
.reply-slot::before{content:'';position:absolute;left:0;top:-10px;bottom:20px;width:2px;background:var(--blue);opacity:.35;border-radius:2px}
.cmt-form--reply .cmt-form__av{width:32px;height:32px}
.cmt-cancel{background:none;border:0;color:var(--text2);font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px}
.cmt-cancel:hover{background:var(--surface2);color:var(--text)}
.cmt-retry{margin-top:10px;background:var(--blue);color:#fff;border:0;border-radius:99px;padding:8px 20px;font-size:13px;font-weight:700}

/* ══ UTILS ══ */
.spinner{width:22px;height:22px;border:2.5px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.feed-loader{padding:26px;text-align:center}
.feed-end{padding:30px;text-align:center;color:var(--text2);font-size:14px}
.feed-empty{padding:56px 20px;text-align:center;color:var(--text2)}
.feed-empty h3{color:var(--text);margin-bottom:4px}
.in-feed-ad{padding:16px 20px;border-bottom:1px solid var(--border);text-align:center; }
.rbar-card{border-radius:18px;background:var(--surface);padding:16px;margin-bottom:14px}
.rbar-card__title{font-size:18px;font-weight:700;margin-bottom:12px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--blue);color:#fff;padding:11px 22px;border-radius:99px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:12000;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══ DRAWER ══ */
.drawer-overlay{position:fixed;inset:0;background:rgba(8,12,20,.5);z-index:300;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:blur(3px)}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;width:300px;max-width:86vw;background:var(--bg);z-index:310;overflow-y:auto;padding:18px 8px;transition:transform .26s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow)}
.drawer--l{left:0;transform:translateX(-105%)}.drawer--l.open{transform:none}
.drawer__hd{display:flex;align-items:center;justify-content:space-between;margin:0 10px 12px}
.drawer__title{font-size:18px;font-weight:700}
.drawer__close{width:34px;height:34px;border-radius:50%;background:var(--surface);border:0;font-size:13px;display:flex;align-items:center;justify-content:center}

/* ══ FAB ══ */
.fab-scrim{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);z-index:2800;opacity:0;pointer-events:none;transition:opacity .2s}
.fab-scrim.show{opacity:1;pointer-events:auto}
.fab-wrap{position:fixed;bottom:28px;right:28px;z-index:2900;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
@media(max-width:880px){.fab-wrap{bottom:76px;right:18px}}
.fab-compose{width:60px;height:60px;border-radius:20px;background:var(--blue);color:#fff;border:0;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 10px 28px rgba(47,91,234,.5);transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .15s;pointer-events:auto}
.fab-compose:hover{transform:scale(1.07) rotate(90deg);background:var(--blue-dark)}

/* ══ COMPOSE MODAL ══ */
.tlc-overlay{position:fixed;inset:0;background:rgba(8,12,20,.55);backdrop-filter:blur(3px);z-index:3000;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.tlc-overlay.open{opacity:1;pointer-events:auto}
.tlc-modal{background:var(--white);width:100%;max-width:580px;border-radius:26px 26px 0 0;max-height:88vh;display:flex;flex-direction:column;transform:translateY(24px);transition:transform .24s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow);overflow:visible}
.tlc-overlay.open .tlc-modal{transform:none}
@media(min-width:640px){.tlc-overlay{align-items:center}.tlc-modal{border-radius:26px;max-height:82vh}}
@media(max-width:880px){.tlc-overlay{align-items:flex-start}.tlc-modal{max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}.tlc-hd{padding-top:calc(14px + env(safe-area-inset-top))}.tlc-toolbar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
.tlc-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:6;background:var(--white);border-radius:26px 26px 0 0}
.tlc-hd__title{font-size:17px;font-weight:700}
.tlc-close{width:36px;height:36px;border-radius:50%;background:var(--surface);border:0;color:var(--text);display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .12s,transform .12s}
.tlc-close:hover{background:var(--surface2);transform:scale(1.06)}
.tlc-body{padding:18px 20px 12px;overflow-y:auto;flex:1;display:flex;gap:13px;min-width:0;align-items:flex-start}
.tlc-av{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--surface);flex-shrink:0}
.tlc-form{flex:1;min-width:0;display:flex;flex-direction:column}
.tlc-editor{flex:1;min-width:0;width:100%;outline:0;font-family:var(--serif);font-size:20px;line-height:1.5;min-height:90px;color:var(--text);white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}
.tlc-editor:empty::before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.tlc-editor .tlc-hl{color:var(--blue);font-family:var(--font);font-weight:600;font-size:.9em}
.tlc-imgbox{position:relative;margin-top:10px;border-radius:16px;overflow:hidden;border:1px solid var(--border);display:none}
.tlc-imgbox img{width:100%;max-height:260px;object-fit:cover}
.tlc-imgbox .tlc-imgclear{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;border:0;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700}
.tlc-trending{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);display:none}
.tlc-trending__label{font-size:12px;font-weight:700;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.tlc-trending__list{display:flex;flex-wrap:wrap;gap:6px}
.tlc-trend-chip{display:inline-flex;align-items:center;gap:5px;background:var(--blue-bg);color:var(--blue);border:0;border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:700;transition:transform .12s,filter .12s}
.tlc-trend-chip:hover{filter:brightness(.95);transform:translateY(-1px)}
.tlc-trend-chip .cnt{color:var(--text3);font-weight:600;font-size:11.5px}
.tlc-toolbar{display:flex;align-items:center;justify-content:space-between;padding-top:12px;margin-top:auto;border-top:1px solid var(--border);gap:10px;flex-wrap:wrap}
.tlc-tools-left{display:flex;align-items:center;gap:4px}
.tlc-tool-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue);background:none;border:0;font-size:16px;transition:background .12s}
.tlc-tool-btn:hover{background:var(--blue-bg)}
.tlc-cat-wrap{position:relative}
.tlc-cat-btn{display:flex;align-items:center;gap:7px;background:var(--surface);border:0;border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--text2)}
.tlc-cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tlc-cat-dropdown{position:fixed;background:var(--white);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:6px;width:min(250px,86vw);max-height:min(300px,60vh);overflow-y:auto;display:none;z-index:3200}
.tlc-cat-dropdown.open{display:block}
.tlc-cat-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--text)}
.tlc-cat-item:hover,.tlc-cat-item:active{background:var(--surface)}
.tlc-cat-item .tlc-cat-dot{width:10px;height:10px}
.tlc-cat-scrim{position:fixed;inset:0;background:transparent;z-index:3100;display:none}
.tlc-cat-scrim.open{display:block}
.tlc-right{display:flex;align-items:center;gap:12px}
.tlc-charcount{font-size:12.5px;color:var(--text3);font-weight:600}
.tlc-charcount.warning{color:var(--orange)}.tlc-charcount.danger{color:var(--red)}
.tlc-submit{background:var(--blue);color:#fff;border:0;border-radius:99px;padding:10px 24px;font-size:14.5px;font-weight:700;opacity:.45;pointer-events:none;transition:opacity .15s,background .15s,transform .1s}
.tlc-submit.ready{opacity:1;pointer-events:auto}
.tlc-submit:hover{background:var(--blue-dark)}.tlc-submit:active{transform:scale(.96)}

/* ══ REACTIONS MODAL ══ */
.rxn-overlay{position:fixed;inset:0;background:rgba(8,12,20,.5);backdrop-filter:blur(3px);z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:flex-end;justify-content:center}
.rxn-overlay.open{opacity:1;pointer-events:auto}
.rxn-modal{background:var(--white);width:100%;max-width:450px;border-radius:24px 24px 0 0;max-height:66vh;overflow-y:auto;transform:translateY(16px);transition:transform .2s;box-shadow:var(--shadow)}
.rxn-overlay.open .rxn-modal{transform:none}
@media(min-width:600px){.rxn-overlay{align-items:center}.rxn-modal{border-radius:24px;max-height:60vh}}
.rxn-modal__hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);font-size:17px;font-weight:700;position:sticky;top:0;background:var(--white)}
.rxn-modal__close{width:32px;height:32px;border-radius:50%;background:var(--surface);border:0;color:var(--text);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.rxn-modal__body{padding:12px 18px 22px;color:var(--text)}
.rxn-modal__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.rxn-tab{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--text2)}
.rxn-person{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.rxn-person:last-child{border-bottom:0}
.rxn-person img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--surface)}
.rxn-person__name{flex:1;font-size:14px;font-weight:600}
.rxn-person__emoji{font-size:17px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══ PRO ADDITIONS ══ */
.srch-btn{width:38px;height:38px;border-radius:50%;background:var(--surface);border:0;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text2)}
.srch-btn:hover{color:var(--text);background:var(--surface2)}
.cat-chips{display:none;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
@media(max-width:880px){.cat-chips{display:flex}}
.cchip{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;border:1px solid var(--border);background:none;font-size:13px;font-weight:600;color:var(--text2)}
.cchip i{width:8px;height:8px;border-radius:50%}
.cchip.on{background:var(--text);color:var(--bg);border-color:var(--text)}


/* ══ v2: slim app-style header + redesigned sidebars ══ */
.feed-hdr-wrap{transition:transform .26s cubic-bezier(.4,0,.2,1)}
.feed-hdr-combined{height:52px;padding:0 12px;gap:8px}
.feed-tabs-inline{flex:1;gap:0;padding:0;background:none;border-radius:0;height:100%;margin:0}
.feed-tab{flex:1;max-width:none;height:100%;padding:0;border-radius:0;font-size:15px;color:var(--text3);background:none!important;box-shadow:none!important}
.feed-tab.active{color:var(--text)}
.feed-tab.active::after{display:block;content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:34px;height:3.5px;border-radius:4px 4px 0 0;background:var(--blue)}
.cat-chips{padding:0 12px 8px}
.cchip{padding:5px 12px;font-size:12.5px}
@media(max-width:880px){
  .feed-hdr-combined{height:48px;padding:0 10px}
  .feed-hdr-wrap.hdr-hide{transform:translateY(-100%)}
  .m-menu-btn{width:32px;height:32px;padding:0;overflow:hidden;background:none}
  .m-menu-btn img{width:32px;height:32px;border-radius:50%;object-fit:cover}
  .srch-btn{width:32px;height:32px;font-size:14px;background:none}
  .new-pill{top:62px}
  .feed-hdr-wrap.hdr-hide ~ .new-pill{top:12px}
}

/* left sidebar */
.lcol-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 10px}
.lcol-logo{width:40px;height:40px;border-radius:13px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.lcol-brand b{display:block;font-size:17px;font-weight:700}
.lcol-brand small{font-size:12.5px;color:var(--text3)}
.trend-row{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0 8px;border-radius:12px}
.trend-row:hover{background:var(--surface)}
.trend-n{width:20px;font-size:13px;font-weight:700;color:var(--text3);text-align:center}
.trend-t{flex:1;min-width:0}
.trend-t b{display:block;font-size:14.5px;font-weight:700;color:var(--text)}
.trend-t span{font-size:12.5px;color:var(--text2)}
.trend-row>i{color:var(--text3);font-size:11px}
.lcol-footer{margin:12px 12px 100px;background:none;padding:6px 8px}

/* right sidebar */
.right-col{padding:0 8px 24px 16px}
.right-col .rbar-card{background:var(--surface);border-radius:20px;padding:16px 18px;margin-bottom:14px}
.right-col .rbar-card__title{font-size:17px;font-weight:700}
.right-col .rbar-writer{padding:12px 0!important;border-color:var(--border)!important}
.rs-foot{padding:6px 10px 20px;font-size:12.5px;color:var(--text3);line-height:1.9}
.rs-foot a:hover{text-decoration:underline}

/* ══ v3: search, highlighted tabs, guideline warning ══ */
.feed-tabs-inline{gap:6px;padding:6px 0}
.feed-tab{height:36px;border-radius:99px;color:var(--text2);font-weight:600}
.feed-tab.active{background:var(--blue-bg)!important;color:var(--blue);font-weight:800}
.feed-tab.active::after{display:none}
.hdr-searchbar{position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--bg);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s,transform .18s;z-index:3}
.feed-hdr-wrap.searching .hdr-searchbar{opacity:1;pointer-events:auto;transform:none}
.hdr-searchbar input{flex:1;min-width:0;height:38px;border:0;outline:0;background:var(--surface);border-radius:99px;padding:0 16px;font:inherit;font-size:15px;color:var(--text)}
.hdr-searchbar input:focus{box-shadow:0 0 0 2px var(--blue)}
.sb-back{width:36px;height:36px;border-radius:50%;background:none;border:0;color:var(--text2);font-size:15px;flex-shrink:0}
.sb-go{background:var(--blue);color:#fff;border:0;border-radius:99px;padding:9px 18px;font-size:14px;font-weight:700;flex-shrink:0}
@media(max-width:880px){.hdr-searchbar{height:48px}}
.tlc-warn{display:none;gap:11px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(229,56,79,.09);border:1px solid rgba(229,56,79,.35);font-size:13px;line-height:1.5}
.tlc-warn.show{display:flex;animation:warnIn .22s}
.tlc-warn>i{color:var(--red);font-size:16px;margin-top:2px}
.tlc-warn b{display:block;color:var(--red);font-size:13.5px;margin-bottom:2px}
.tlc-warn span{color:var(--text2)}
.tlc-bad{background:rgba(229,56,79,.16);color:var(--red);border-radius:4px;box-shadow:0 2px 0 var(--red)}
@keyframes warnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ══ v4: white sidebars + Twitter-style post font ══ */
.left-col,.right-col{background:#fff!important}
.right-col .rbar-card{background:#fff!important;border:1px solid var(--border)}
.lcol-tabs{background:#f1f3f6}
.lcol-tab.active{background:#fff}
:root{--tw:TwitterChirp,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.post,.post__title,.post__excerpt,.post.is-opinion .post__excerpt,.post__excerpt .p-hashtag,.post .tl-badge,.post .cat-pill{font-family:var(--tw)}
.post button{font-family:inherit}
.post.is-opinion .post__excerpt{font-size:16.5px;line-height:1.5;letter-spacing:0}
.post__title{font-size:17px;font-weight:700}

.m-menu-btn{font-size:18px;color:var(--text)}

/* site header / dock offsets (set by script) */
.shell,.left-col,.feed-col,.right-col{height:calc(100dvh - var(--ap10-off,0px))!important;transition:height .28s ease}
@media(max-width:880px){.feed-col{padding-bottom:var(--ap10-dock,0px)!important}.fab-wrap{bottom:calc(24px + var(--ap10-dock,0px))!important;right:18px}}
.tlc-warn.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* v6: right sidebar spacing/square, left prompt card */
.right-col{padding:16px 8px 24px 16px!important}
.right-col .rbar-card,.right-col .rs-body>*{border-radius:0!important}
.lcol-prompt{margin:18px 12px 0;padding:16px;border:1px solid var(--border);background:#fff;font-family:var(--tw);border-radius:16px;position:relative;overflow:hidden}
.lcol-prompt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue)}
.lcol-prompt__lbl{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:6px}
.lcol-prompt__q{font-size:16px;font-weight:700;line-height:1.4;margin:8px 0 12px;color:var(--text)}
.lcol-prompt__btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--blue);color:#fff;border-radius:99px;padding:9px 18px;font-size:13.5px;font-weight:700;font-family:var(--tw)}
.lcol-prompt__btn:hover{background:var(--blue-dark)}
.lcol-prompt__tip{margin-top:12px;font-size:12px;line-height:1.45;color:var(--text2);display:flex;gap:7px}
.lcol-prompt__tip i{color:var(--green);margin-top:2px}

/* ══ speed-dial create button (timeline) ══ */
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-bottom:2px}
.fab-option{display:flex;align-items:center;gap:10px;background:var(--white);color:var(--text);border:1px solid var(--border);border-radius:99px;padding:10px 16px 10px 14px;font-size:14px;font-weight:700;font-family:var(--tw);box-shadow:var(--shadow);opacity:0;transform:translateY(8px) scale(.92);pointer-events:none;transition:opacity .16s,transform .16s;white-space:nowrap}
.fab-wrap.open .fab-option{opacity:1;transform:none;pointer-events:auto}
.fab-wrap.open .fab-option:nth-last-child(1){transition-delay:.02s}.fab-wrap.open .fab-option:nth-last-child(2){transition-delay:.06s}.fab-wrap.open .fab-option:nth-last-child(3){transition-delay:.1s}.fab-wrap.open .fab-option:nth-last-child(4){transition-delay:.14s}
.fab-option i{font-size:15px;width:20px;text-align:center}
.fab-option--opinion{background:var(--opi-bg);color:var(--opi)}
.fab-option--article{background:var(--art-bg);color:var(--art)}
.fab-option--story{background:var(--sto-bg);color:var(--sto)}
.fab-option--book{background:rgba(124,58,237,.1);color:#7c3aed}
.fab-option:hover{filter:brightness(.96);transform:translateY(-1px) scale(1.02)}
.fab-wrap.open .fab-compose{transform:rotate(45deg)}

/* ══ trending hashtags strip (mobile) ══ */
.m-tags{display:none;gap:8px;align-items:center;overflow-x:auto;padding:10px 12px;border-bottom:1px solid var(--border);scrollbar-width:none}
.m-tags::-webkit-scrollbar{display:none}
@media(max-width:880px){.m-tags.has{display:flex}}
.m-tags-lbl{flex-shrink:0;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;font-family:var(--tw)}
.m-tag{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;background:var(--surface);font-size:13.5px;font-weight:700;font-family:var(--tw);color:var(--text)}
.m-tag small{color:var(--text3);font-weight:600;font-size:12px}
.m-tag.on{background:var(--blue-bg);color:var(--blue)}

.m-tag--ghost{color:var(--text3)}

.lcol-nav{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.lcol-link{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--text,#0f1623)}
.lcol-link i{width:22px;text-align:center;font-size:16px;color:var(--text2,#556070)}
.lcol-link:hover{background:var(--surface,#f4f6fa)}
.lcol-link.on{background:var(--blue-bg,#eaf0ff);color:var(--blue,#2f5bea);font-weight:700}
.lcol-link.on i{color:var(--blue,#2f5bea)}
.lcol-earn{margin:16px 12px 0;padding:16px;border:1px solid var(--border,#ebebeb);border-radius:16px;background:#fff}
.lcol-earn__t{font-weight:800;font-size:15px;margin-bottom:4px}
.lcol-earn__p{font-size:13px;color:var(--text2,#556070);line-height:1.45;margin-bottom:12px}
.lcol-earn__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lcol-earn__a{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:12px;font-size:13px;font-weight:700}
.lcol-earn__a--art{background:var(--art-bg,#fef4e2);color:var(--art,#b45309)}
.lcol-earn__a--opi{background:var(--opi-bg,#eaf0ff);color:var(--opi,#2f5bea)}
.lcol-earn__a--sto{background:var(--sto-bg,#e6f7fb);color:var(--sto,#0e7490)}
.lcol-earn__a--book{background:rgba(124,58,237,.1);color:#7c3aed}
.lcol-earn__a:hover{filter:brightness(.95)}