/* qiboo-social.css — auth + social UI. Uses styles.css design tokens with fallbacks. */
:root{
  --q-primary: var(--primary, #2f6b3a);
  --q-primary-dark: var(--primary-dark, #245530);
  --q-ink: var(--ink, #1a2420);
  --q-ink-soft: var(--ink-soft, #5c6b63);
  --q-line: var(--line, #e4eae5);
  --q-bg-soft: #f6f9f6;
  --q-radius: 14px;
}
*{box-sizing:border-box}

/* ---------- avatars (initials — no uploads, no XSS/RCE surface) ---------- */
.q-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  color:#fff;font-weight:600;font-family:var(--font-display,'Fraunces',serif);text-transform:uppercase;
  background:linear-gradient(135deg,#3a7d52,#2f6b3a);flex:none;overflow:hidden;user-select:none}
.q-avatar img{width:100%;height:100%;object-fit:cover}
.q-avatar.s{width:32px;height:32px;font-size:13px}
.q-avatar.m{width:44px;height:44px;font-size:17px}
.q-avatar.l{width:84px;height:84px;font-size:32px}

/* verified / role badges */
.q-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;line-height:1.6}
.q-badge.verified{background:#e7f3ff;color:#1769c4}
.q-badge.vip{background:var(--dk-surface,#fff3d6);color:var(--dk-amber,#9a6b00)}
.q-badge.role{background:#eef3ee;color:var(--q-ink-soft)}
.q-verified-tick{color:#1769c4;display:inline-flex;vertical-align:middle}

/* ---------- buttons ---------- */
.q-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:1px solid var(--q-line);
  background:var(--white);color:var(--q-ink);font:inherit;font-weight:600;font-size:14px;padding:9px 16px;border-radius:10px;transition:.15s;text-decoration:none}
.q-btn:hover{border-color:var(--q-primary);color:var(--q-primary)}
.q-btn.primary{background:var(--q-primary);border-color:var(--q-primary);color:#fff}
.q-btn.primary:hover{background:var(--q-primary-dark);color:#fff}
.q-btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.q-btn.full{width:100%}
.q-btn:disabled{opacity:.55;cursor:not-allowed}
.q-btn.danger:hover{border-color:#d33;color:#d33}

/* ---------- auth pages ---------- */
.q-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 500px at 50% -10%, #eaf3ec, #fbfdfb)}
.q-auth-card{background:var(--white);border:1px solid var(--q-line);border-radius:20px;box-shadow:0 18px 50px rgba(20,60,35,.08);
  padding:36px;width:100%;max-width:440px}
.q-auth-logo{text-align:center;margin-bottom:24px}
.q-auth-logo h1{font-family:var(--font-display,'Fraunces',serif);color:var(--q-primary);font-size:30px;margin:0 0 4px}
.q-auth-logo p{color:var(--q-ink-soft);font-size:14px;margin:0}
.q-field{margin-bottom:16px}
.q-field label{display:block;font-weight:600;font-size:13px;color:var(--q-ink);margin-bottom:6px}
.q-input,.q-textarea,.q-select{width:100%;padding:11px 13px;border:1px solid var(--q-line);border-radius:10px;font:inherit;font-size:15px;background:var(--white);transition:.15s}
.q-input:focus,.q-textarea:focus,.q-select:focus{outline:none;border-color:var(--q-primary);box-shadow:0 0 0 3px rgba(47,107,58,.12)}
.q-hint{font-size:12px;color:var(--q-ink-soft);margin-top:5px}
.q-error{color:#c0392b;font-size:13px;margin-top:8px;display:none}
.q-error.show{display:block}
.q-ok{background:#e6f6ea;color:#1f7a37;padding:10px 12px;border-radius:10px;font-size:14px;margin-bottom:14px;display:none}
.q-ok.show{display:block}
.q-auth-foot{text-align:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--q-line);font-size:14px;color:var(--q-ink-soft)}
.q-auth-foot a{color:var(--q-primary);font-weight:600;text-decoration:none}
.q-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--q-ink-soft);font-size:13px}
.q-or::before,.q-or::after{content:"";flex:1;height:1px;background:var(--q-line)}
.q-gauth{display:flex;justify-content:center;min-height:44px}
.q-row{display:flex;gap:12px}.q-row>*{flex:1}
.q-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.q-chip{border:1px solid var(--q-line);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;background:var(--white);user-select:none}
.q-chip.on{background:var(--q-primary);color:#fff;border-color:var(--q-primary)}

/* ---------- header chrome ---------- */
.q-userbtn{display:flex;align-items:center;gap:8px;cursor:pointer;border:none;background:none;padding:0}
.user-dropdown{padding:8px}
.user-dropdown__header{padding:12px;border-bottom:1px solid var(--q-line);display:flex;gap:10px;align-items:center;margin-bottom:6px}
.user-dropdown__name{font-weight:700;color:var(--q-ink);font-size:14px;line-height:1.2}
.user-dropdown__handle{color:var(--q-ink-soft);font-size:12px}
.user-dropdown a,.user-dropdown button.item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;
  border-radius:8px;color:var(--q-ink);text-decoration:none;font-size:14px;border:none;background:none;cursor:pointer}
.user-dropdown a:hover,.user-dropdown button.item:hover{background:var(--q-bg-soft)}
.q-badge-count{background:#d33;color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:1px 6px;margin-left:auto}

/* ---------- card social action bar (injected on article/research/media cards) ---------- */
.q-actions{display:flex;align-items:center;gap:4px;padding:8px 14px;border-top:1px solid var(--q-line);margin-top:auto}
.q-act{display:inline-flex;align-items:center;gap:5px;border:none;background:none;cursor:pointer;color:var(--q-ink-soft);
  font:inherit;font-size:13px;font-weight:600;padding:5px 9px;border-radius:8px;transition:.12s}
.q-act:hover{background:var(--q-bg-soft);color:var(--q-primary)}
.q-act.on{color:var(--q-primary)}
.q-act.liked{color:#e0245e}
.q-act svg{width:16px;height:16px}

/* ---------- feed / dashboard ---------- */
.q-shell{max-width:1100px;margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:1fr 300px;gap:28px}
@media(max-width:880px){.q-shell{grid-template-columns:1fr}}
.q-feed{display:flex;flex-direction:column;gap:16px;min-width:0}
.q-card{background:var(--white);border:1px solid var(--q-line);border-radius:var(--q-radius);overflow:hidden}
.q-compose{padding:16px}
.q-compose textarea{width:100%;border:none;resize:vertical;min-height:64px;font:inherit;font-size:15px;outline:none}
.q-compose .bar{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.q-post{padding:16px}
.q-post__head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.q-post__meta{min-width:0}
.q-post__name{font-weight:700;font-size:14px;color:var(--q-ink);display:flex;align-items:center;gap:5px}
.q-post__sub{font-size:12px;color:var(--q-ink-soft)}
.q-post__body{font-size:15px;line-height:1.55;color:var(--q-ink);white-space:pre-wrap;word-wrap:break-word}
.q-post__ref{margin-top:10px;border:1px solid var(--q-line);border-radius:10px;padding:10px 12px;background:var(--q-bg-soft);font-size:13px;display:block;text-decoration:none;color:var(--q-ink)}
.q-post__actions{display:flex;gap:6px;margin-top:10px;border-top:1px solid var(--q-line);padding-top:8px}
.q-side .q-card{padding:16px;margin-bottom:16px}
.q-side h3{font-family:var(--font-display,'Fraunces',serif);font-size:16px;margin:0 0 12px}
.q-suggest{display:flex;gap:10px;align-items:center;padding:8px 0}
.q-suggest .q-post__meta{flex:1}
.q-empty{text-align:center;color:var(--q-ink-soft);padding:40px 20px}
.q-comments{margin-top:10px;border-top:1px solid var(--q-line);padding-top:10px;display:none}
.q-comments.open{display:block}
.q-comment{display:flex;gap:8px;padding:6px 0}
.q-comment .b{background:var(--q-bg-soft);border-radius:10px;padding:8px 10px;font-size:14px;flex:1}
.q-comment .b .n{font-weight:700;font-size:13px}

/* ---------- profile ---------- */
.q-profile{max-width:900px;margin:0 auto;padding:24px 20px}
.q-prof-head{background:var(--white);border:1px solid var(--q-line);border-radius:18px;padding:24px;display:flex;gap:20px;align-items:flex-start}
.q-prof-head .meta{flex:1;min-width:0}
.q-prof-name{font-family:var(--font-display,'Fraunces',serif);font-size:26px;margin:0;display:flex;gap:8px;align-items:center}
.q-prof-handle{color:var(--q-ink-soft)}
.q-prof-stats{display:flex;gap:20px;margin:12px 0}
.q-prof-stats b{font-size:17px}.q-prof-stats span{color:var(--q-ink-soft);font-size:13px}
.q-tabs{display:flex;gap:6px;margin:20px 0 12px;border-bottom:1px solid var(--q-line)}
.q-tab{padding:9px 14px;cursor:pointer;font-weight:600;color:var(--q-ink-soft);border-bottom:2px solid transparent}
.q-tab.on{color:var(--q-primary);border-bottom-color:var(--q-primary)}

/* ---------- messages ---------- */
.q-msg-shell{max-width:1000px;margin:0 auto;padding:20px;display:grid;grid-template-columns:320px 1fr;gap:0;height:calc(100vh - 120px);
  border:1px solid var(--q-line);border-radius:16px;overflow:hidden;background:var(--white)}
@media(max-width:760px){.q-msg-shell{grid-template-columns:1fr}}
.q-threads{border-right:1px solid var(--q-line);overflow-y:auto}
.q-threads .tab-row{display:flex;border-bottom:1px solid var(--q-line)}
.q-threads .tab-row button{flex:1;padding:12px;border:none;background:none;font-weight:600;cursor:pointer;color:var(--q-ink-soft)}
.q-threads .tab-row button.on{color:var(--q-primary);box-shadow:inset 0 -2px 0 var(--q-primary)}
.q-thread-item{display:flex;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--q-line)}
.q-thread-item:hover{background:var(--q-bg-soft)}
.q-thread-item .meta{flex:1;min-width:0}
.q-thread-item .last{font-size:13px;color:var(--q-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-conv{display:flex;flex-direction:column;height:100%}
.q-conv__head{padding:14px 16px;border-bottom:1px solid var(--q-line);display:flex;gap:10px;align-items:center}
.q-conv__body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--q-bg-soft)}
.q-bubble{max-width:72%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-wrap:break-word}
.q-bubble.me{align-self:flex-end;background:var(--q-primary);color:#fff;border-bottom-right-radius:4px}
.q-bubble.them{align-self:flex-start;background:var(--white);border:1px solid var(--q-line);border-bottom-left-radius:4px}
.q-conv__compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--q-line)}
.q-conv__compose input{flex:1;border:1px solid var(--q-line);border-radius:999px;padding:10px 16px;font:inherit;outline:none}
.q-req-actions{display:flex;gap:8px;margin-top:8px}

/* toast */
.q-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--q-ink);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:14px;z-index:9999;opacity:0;transition:.25s;pointer-events:none}
.q-toast.show{opacity:1}
.q-gate{background:var(--dk-surface,#fff8e6);border:1px solid #f0d98c;color:var(--dk-amber,#7a5a00);padding:10px 12px;border-radius:10px;font-size:13px;margin:10px 0}

/* ============ unified site header (qiboo-header.js) ============ */
/* Legacy in-page headers are replaced by qiboo-header.js on every page that loads it.
   Keep them invisible from the very first paint so the old logo header never flashes;
   visibility (not display) so the bar's height is reserved and the swap doesn't jump. */
header.nav,header.q-appbar{visibility:hidden}
.qh{position:sticky;top:0;z-index:200;background:var(--white,#fff);border-bottom:1px solid var(--q-line);font-family:var(--font-sans,'Inter',sans-serif)}
.qh__bar{display:flex;align-items:center;gap:10px;padding:10px 22px;max-width:1480px;margin:0 auto}
.qh__burger{display:none;border:none;background:none;font-size:22px;cursor:pointer;color:var(--q-ink);line-height:1}
.qh__brand{font-family:var(--font-display,'Fraunces',serif);font-weight:700;font-size:23px;color:var(--q-primary);text-decoration:none;letter-spacing:-.01em;flex:none}
.qh__brand span{color:var(--q-ink-soft);font-weight:500}
.qh__nav{display:flex;align-items:center;gap:2px;flex:none}
.qh__item{position:relative}
.qh__navbtn{display:inline-flex;align-items:center;gap:4px;border:none;background:none;font:inherit;font-weight:600;font-size:14px;color:var(--q-ink);padding:8px 10px;border-radius:9px;cursor:pointer;white-space:nowrap}
.qh__navbtn:hover{background:var(--q-bg-soft);color:var(--q-primary)}
.qh__menu{position:absolute;top:calc(100% + 6px);left:0;min-width:248px;background:var(--white,#fff);border:1px solid var(--q-line);border-radius:14px;
  box-shadow:0 14px 40px rgba(20,60,35,.13);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:300}
.qh__item:hover .qh__menu,.qh__item.open .qh__menu{opacity:1;visibility:visible;transform:translateY(0)}
.qh__menu a{display:block;padding:9px 12px;border-radius:9px;color:var(--q-ink);text-decoration:none;font-size:14px;font-weight:500}
.qh__menu a:hover{background:var(--q-bg-soft);color:var(--q-primary)}
.qh__search{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;align-items:center;gap:8px;background:var(--q-bg-soft);border:1px solid var(--q-line);border-radius:999px;padding:8px 15px;max-width:420px;margin:0 auto;color:var(--q-ink-soft)}
.qh__search input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:14px;color:var(--q-ink)}
.qh__account{display:flex;align-items:center;gap:10px;flex:none}
.qh__signin{color:var(--q-ink);text-decoration:none;font-weight:600;font-size:14px;padding:8px 6px}
.qh__signin:hover{color:var(--q-primary)}
.qh__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:none;background:none;cursor:pointer;color:var(--q-ink);text-decoration:none}
.qh__icon:hover{background:var(--q-bg-soft);color:var(--q-primary)}
.qh__icon .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;background:#e0245e;border-radius:50%;border:2px solid #fff}
.qh__usermenu{position:relative}
.qh__avatarbtn{border:none;background:none;cursor:pointer;padding:0;border-radius:50%}
.qh__dd{position:absolute;top:calc(100% + 8px);right:0;min-width:248px;background:var(--white,#fff);border:1px solid var(--q-line);border-radius:14px;
  box-shadow:0 14px 40px rgba(20,60,35,.14);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:300}
.qh__dd.open{opacity:1;visibility:visible;transform:translateY(0)}
.qh__quick{border-top:1px solid var(--q-line);background:var(--dk-surface,#fcfdfc);overflow-x:auto}
.qh__quick-inner{display:flex;gap:4px;padding:8px 22px;max-width:1400px;margin:0 auto;white-space:nowrap}
.qh__quick a{color:var(--q-ink-soft);text-decoration:none;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px}
.qh__quick a:hover{background:var(--q-bg-soft);color:var(--q-primary)}
/* Desktop but not ultra-wide: keep the horizontal nav lean so the long Turkish/German labels
   never collide with the search / language / account cluster. Drop the redundant "Plans" text
   link (still in More → Plans & pricing and the Join CTA); the mode-pill label is hidden too
   (rule in qiboo-header.js). Account is all icons (home / bell / messages / avatar). */
@media(max-width:1560px){
  .qh__plans{display:none!important}
}
/* Below 1400px the 6-group horizontal nav + search + language + account can't share one row
   (the Turkish labels alone are ~780px), so the whole bar collapses to the hamburger — a clean,
   scrollable dropdown (with its own search row) that always fits the viewport. */
@media(max-width:1400px){
  .qh__burger{display:block;flex:none}
  /* (the search lives in the .qh__strip row at every width ≥861px — see qiboo-header.js;
     phones get the in-menu .qh__msearch instead) */
  /* keep the top bar on ONE non-wrapping row that always fits the viewport */
  .qh__bar{flex-wrap:nowrap;gap:8px;padding:10px 14px}
  .qh__brand{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qh__account{gap:6px;min-width:0;flex:none}
  /* secondary entry points (Plans / Dashboard shortcut) live in the menu / tab bar on mobile;
     the role/mode pill moves INTO the burger dropdown (#qh-mode-nav in qiboo-header.js) —
     in the bar it crowded phones and could overlap the logo */
  .qh__plans,.qh__dash,.qh__modewrap{display:none!important}
  /* the open menu is a real dropdown: capped height + its own scroll, never off-screen */
  .qh__nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white,#fff);
    border-bottom:1px solid var(--q-line);flex-direction:column;align-items:stretch;padding:8px;
    box-shadow:0 14px 30px rgba(0,0,0,.1);
    max-height:calc(100vh - var(--qh-h,96px));max-height:calc(100dvh - var(--qh-h,96px));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .qh--open .qh__nav{display:flex}
  /* accordion: every submenu starts collapsed; only the tapped group expands */
  .qh__menu{position:static;transform:none;box-shadow:none;border:none;min-width:0;
    padding:0 0 6px 8px;display:none;opacity:1;visibility:visible}
  .qh__item.open>.qh__menu{display:block}
  .qh__navbtn{width:100%;justify-content:space-between}
  .qh__item.open>.qh__navbtn{color:var(--q-primary)}
  .qh__navbtn svg{transition:transform .16s}
  .qh__item.open>.qh__navbtn svg{transform:rotate(180deg)}
}
/* Small phones: collapse the language switcher to just its globe icon so the sign-in /
   join CTAs are never pushed off the right edge (the language menu still opens on tap). */
@media(max-width:640px){
  .qh__lang>button>span{display:none}
}
/* Narrow phones: keep the top bar to the essentials so the primary CTA / account never
   gets clipped (the mode pill already lives in the burger dropdown at this width); the
   sign-in / join buttons are tightened a touch. Everything else (theme, language,
   notifications, messages, account) stays reachable. */
@media(max-width:560px){
  .qh__bar{gap:6px;padding:10px 12px}
  .qh__account{gap:5px}
  .qh__signin{padding:8px 4px;font-size:13.5px}
  .qh__account .q-btn{padding:8px 12px;font-size:13.5px}
}
/* Smallest phones: tighten further, but KEEP the language switcher (globe icon) — with the
   mode pill out of the bar there is room again, and losing language switching on the most
   common device class (Turkish mobile) was worse than the few pixels it costs. */
@media(max-width:430px){
  .qh__bar{gap:5px;padding:10px 10px}
  .qh__signin{padding:8px 3px;font-size:13px}
  .qh__account .q-btn{padding:8px 10px;font-size:13px}
}

/* ---------- dark mode: header + social surface tokens ----------
   The text tokens (--q-ink/-soft/--q-primary) already flip because they
   reference the main tokens; these are the SURFACE tokens that were hardcoded
   light. Light mode keeps its exact values (block is dark-gated, with the
   OS-preference twin so system-dark works too). */
html[data-theme="dark"]{
  --q-bg-soft:#222d3d;   /* soft fill: search box, hovers, chips */
  --q-line:#2b3647;      /* hairline borders on dark */
}
html[data-theme="dark"] .qh__quick{background:var(--cream-warm)}
@media (prefers-color-scheme:dark) and (min-width: 99999px){ /* DISABLED — dark is opt-in only */
  html:not([data-theme="light"]):not([data-theme="dark"]){
    --q-bg-soft:#222d3d;
    --q-line:#2b3647;
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) .qh__quick{background:var(--cream-warm)}
}

/* ---------- rich article feed card (thumbnail + inline actions) ---------- */
.q-feeditem{padding:0}
.q-feeditem__top{display:flex;gap:14px;padding:16px 16px 10px}
.q-feeditem__body{flex:1;min-width:0}
.q-feeditem__title{font-family:var(--font-display,'Fraunces',serif);font-weight:600;font-size:16px;line-height:1.3;margin:3px 0 4px;color:var(--q-ink)}
.q-feeditem__title:hover{color:var(--q-primary)}
.q-feeditem__snip{font-size:13.5px;color:var(--q-ink-soft);margin-top:6px;line-height:1.5}
.q-thumb{flex:none;width:140px;height:104px;border-radius:11px;background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:9px}
.q-thumb--gen::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.28))}
.q-thumb__cat,.q-thumb__grade{position:relative;z-index:1}
.q-thumb--gen .q-thumb__cat{color:#fff;font-weight:700;font-size:12.5px;text-transform:capitalize;line-height:1.2;text-shadow:0 1px 5px rgba(0,0,0,.4)}
.q-thumb--gen .q-thumb__grade{color:rgba(255,255,255,.95);font-size:10px;font-weight:600;margin-top:3px;letter-spacing:.02em}
.q-feeditem .q-post__actions{padding:8px 12px;margin-top:0;border-top:1px solid var(--q-line)}
.q-feeditem .q-comments{padding:0 16px 12px;margin-top:0;border-top:none}
.q-post .q-comments{padding-top:0}
@media(max-width:560px){ .q-feeditem__top{flex-direction:column} .q-thumb{width:100%;height:140px} }

/* source/journal logo thumbnail (centered, never too big/small) */
.q-thumb--logo{background:var(--white);border:1px solid var(--q-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.q-thumb--logo img{max-width:66px;max-height:46px;width:auto;height:auto;object-fit:contain}
.q-thumb__src{font-size:9px;line-height:1.2;color:var(--q-ink-soft);max-width:120px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
/* branded fallback thumbnail — a distinct coloured tile with the source NAME + the
   outlet's own favicon-logo chip (replaces the generic, identical Google-News "G") */
.q-thumb--brand{align-items:center;justify-content:center;text-align:center;padding:12px 10px}
.q-thumb--brand::after{content:'';position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(0,0,0,.30))}
.q-thumb__brandname{position:relative;z-index:1;color:#fff;font-weight:700;font-size:14px;line-height:1.22;text-shadow:0 1px 6px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.q-thumb__fav{position:absolute;top:7px;left:7px;z-index:2;width:28px;height:28px;border-radius:7px;background:var(--white);padding:3px;box-shadow:0 1px 5px rgba(0,0,0,.28);object-fit:contain}
.q-thumb--brand .q-thumb__grade{position:absolute;left:9px;bottom:8px;z-index:1;color:rgba(255,255,255,.95);font-size:10px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.q-thumb--img{background:#eef3ee}

/* comment actions (reply/edit/delete) */
.q-cactions{display:flex;gap:12px;margin-top:5px}
.q-clink{border:none;background:none;cursor:pointer;color:var(--q-ink-soft);font:inherit;font-size:12px;font-weight:600;padding:0}
.q-clink:hover{color:var(--q-primary)}
.q-clink.danger:hover{color:#d33}
.q-edited{color:var(--q-ink-soft);font-size:11px;font-weight:400}
.q-cbody{margin-top:2px}
/* media / course feed cards */
.q-thumb--media{position:relative}
.q-thumb__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.q-thumb__dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:600;padding:1px 5px;border-radius:5px}
.q-thumb__kind{position:absolute;left:5px;top:5px;background:rgba(0,0,0,.62);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}

/* quoted/embedded repost reference card */
.q-quote{display:flex;gap:0;margin-top:10px;border:1px solid var(--q-line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--q-ink);min-height:74px}
.q-quote:hover{border-color:var(--q-primary)}
.q-quote__t{width:92px;flex:none;background-size:cover;background-position:center;align-self:stretch}
.q-quote__b{padding:9px 12px;min-width:0;align-self:center}
.q-quote__k{font-weight:600;color:var(--q-primary)!important}
.q-quote__title{font-weight:600;font-size:14px;line-height:1.3;margin:2px 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* reposted-post embed (repost_of) */
.q-repost-embed{margin-top:10px;border:1px solid var(--q-line);border-radius:12px;padding:10px 12px;background:var(--q-bg-soft);font-size:14px}