/* ==========================================================================
   Fkra — features stylesheet (3-column layout, rich composer, polls/events/
   donations, reels, admin video grid). Loaded after style.css.
   ========================================================================== */

/* the hidden attribute must always beat component display rules */
[hidden]{display:none !important}

/* ===== 3-column app layout ===== */
.app3{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:236px minmax(0,1fr) 310px;gap:18px;padding:18px 16px;align-items:start}
.app3 .container{margin:0;padding:0;max-width:none}
.col-left,.col-right{position:sticky;top:74px}

.side-nav{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:8px}
.side-nav a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--radius-pill);color:var(--ink-2);font-weight:700;font-size:15.5px;transition:var(--transition)}
.side-nav a:hover{background:var(--surface-hover);color:var(--ink)}
.side-nav a.active{background:var(--accent-soft);color:var(--accent)}
.side-nav .sn-ic{font-size:19px;width:26px;text-align:center}
.sn-badge{margin-inline-start:auto;background:var(--accent);color:#fff;font-size:11px;padding:1px 8px;border-radius:999px;font-style:normal;font-weight:800}
.side-compose{display:block;text-align:center;margin-top:12px;width:100%;font-size:15px;padding:12px 22px}
.side-me{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);transition:var(--transition)}
.side-me:hover{background:var(--surface-hover)}
.side-me-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.side-me-txt strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-me-txt .handle{font-size:12.5px}

.col-right{display:flex;flex-direction:column;gap:14px}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.widget-h{font-weight:800;padding:16px 16px 10px;font-size:17px;letter-spacing:-.01em}
.widget-body{padding:2px 8px 10px}
.widget-mini{padding:14px 16px;color:var(--muted);font-size:12.5px;text-align:center}
.trend-row{display:flex;flex-direction:column;padding:9px 10px;border-radius:12px;transition:var(--transition)}
.trend-row:hover{background:var(--surface-hover)}
.trend-tag{font-weight:800;color:var(--ink)}
.trend-n{color:var(--muted);font-size:12.5px}
.sugg-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;transition:var(--transition)}
.sugg-row:hover{background:var(--surface-hover)}
.sugg-user{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sugg-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sugg-txt strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.feed-title{font-size:20px;font-weight:800;letter-spacing:-.02em}

/* ===== Rich composer ===== */
.composer-tools{display:flex;gap:2px;flex-wrap:wrap}
.ctool{border:0;background:none;font-size:19px;cursor:pointer;padding:8px;border-radius:12px;transition:var(--transition);line-height:1;color:var(--accent)}
.ctool:hover{background:var(--accent-soft)}
.ctool.on{background:var(--accent);color:#fff}
.media-name{color:var(--muted);font-size:13px;margin-top:4px;word-break:break-all}
.composer-panel{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:2px}
.composer-panel input{padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;transition:var(--transition)}
.composer-panel input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.mini-label{font-size:12px;color:var(--muted);font-weight:600}
.rec-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rec-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted)}
#recBtn.recording{background:var(--like);color:#fff;border-color:var(--like)}
#recPreview{width:100%;margin-top:6px}

/* ===== Media in posts ===== */
.post-video{width:100%;max-height:520px;border-radius:16px;border:1px solid var(--line);margin-top:8px;background:#000;display:block}
.post-audio-wrap{display:flex;align-items:center;gap:10px;margin-top:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.post-audio-wrap .pa-ic{font-size:20px}
.post-audio{flex:1;height:38px}
.post-file{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:600;color:var(--accent)}
.post-file:hover{background:var(--surface-hover)}
.type-chip{font-size:11px;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:1px 8px;border-radius:999px;margin-inline-start:4px}

/* ===== Poll ===== */
.poll{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.poll-form{margin:0}
.poll-opt{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);font:inherit;font-size:14px;overflow:hidden}
.poll-opt.vote{cursor:pointer;color:var(--accent);font-weight:700;justify-content:center}
.poll-opt.vote:hover{background:var(--accent-soft);border-color:var(--accent)}
.poll-opt.voted{cursor:default}
.poll-opt.mine{border-color:var(--accent)}
.poll-fill{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--accent-soft);z-index:0}
.poll-label,.poll-pct{position:relative;z-index:1;font-weight:700}
.poll-total{color:var(--muted);font-size:13px}

/* ===== Event ===== */
.event-card{display:flex;gap:12px;align-items:center;margin-top:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:12px;flex-wrap:wrap}
.event-date{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;flex-shrink:0}
.event-date .ed-mon{font-size:11px;text-transform:uppercase}
.event-date .ed-day{font-size:22px;font-weight:800;line-height:1}
.event-info{flex:1;min-width:150px}
.event-meta{color:var(--muted);font-size:13px;margin-top:2px}
.event-going{color:var(--accent);font-size:13px;font-weight:700;margin-top:2px}
.event-rsvp{display:flex;gap:6px}

/* ===== Donation ===== */
.donate-card{margin-top:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px}
.donate-head{font-size:15px;margin-bottom:8px;font-weight:700}
.donate-bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.donate-fill{height:100%;background:linear-gradient(90deg,var(--green),#22c55e);border-radius:999px}
.donate-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:6px;flex-wrap:wrap;gap:4px}
.donate-form{display:flex;gap:8px;margin-top:10px}
.donate-form input{flex:1;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}

/* ===== Reels ===== */
.reels-wrap{max-width:480px;margin:0 auto}
.reels-title{font-size:22px;font-weight:800;margin:0 2px 14px;letter-spacing:-.02em}
.reels-viewer{display:flex;flex-direction:column;gap:16px}
.reel{position:relative;border-radius:22px;overflow:hidden;background:#000;aspect-ratio:9/16;max-height:80vh;box-shadow:var(--shadow)}
.reel-video{width:100%;height:100%;object-fit:cover;cursor:pointer}
.reel-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 45%);pointer-events:none}
.reel-info{color:#fff;pointer-events:auto;max-width:75%}
.reel-user{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800}
.reel-caption{color:#f0f0f0;font-size:14px;margin:6px 0 0}
.reel-actions{display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.reel-btn{background:rgba(0,0,0,.4);border:0;color:#fff;width:48px;height:48px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.reel-btn span{font-size:11px}
.reel-btn.liked{color:var(--like)}

/* ===== Admin video grid ===== */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.video-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition)}
.video-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.vc-video{width:100%;aspect-ratio:16/9;background:#000;object-fit:cover}
.vc-body{padding:12px 14px}
.vc-caption{font-size:14px;margin:2px 0 6px;font-weight:600}
.vc-meta{color:var(--muted);font-size:12.5px}

/* ===== Phase 1: feed tabs, composer, post menu, quote, link card, notifs ===== */

/* composer actions */
.composer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.char-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.char-count.warn{color:var(--amber);font-weight:700}
.vis-wrap{display:inline-flex}
.vis-select{padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.vis-select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* topbar compose + notif badge */
.compose-top{display:inline-flex;align-items:center;gap:5px}
.nav-ic{position:relative}
.ic-badge{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--like);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:grid;place-items:center;line-height:1}

/* post options menu (⋯) */
.post-menu{position:relative;margin-inline-start:auto}
.post-menu>summary{list-style:none;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--muted);font-size:17px;line-height:1;transition:var(--transition)}
.post-menu>summary::-webkit-details-marker{display:none}
.post-menu>summary:hover{background:var(--accent-soft);color:var(--accent)}
.menu-pop{position:absolute;inset-inline-end:0;top:34px;z-index:45;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px}
.menu-pop form{margin:0}
.menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:start;background:none;border:0;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:9px;cursor:pointer;transition:var(--transition)}
.menu-item:hover{background:var(--surface-hover)}
.menu-item.danger{color:var(--like)}
.menu-item.danger:hover{background:var(--like-soft)}

/* action bar extra buttons */
.act.saved{color:var(--accent)}
.act.js-share.copied{color:var(--green)}
.post-actions{flex-wrap:wrap}

/* quote inline composer */
.quote-box{position:relative}
.quote-box>summary{list-style:none;cursor:pointer}
.quote-box>summary::-webkit-details-marker{display:none}
.quote-form{position:absolute;z-index:45;inset-inline-start:0;top:38px;width:290px;max-width:82vw;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;display:flex;flex-direction:column;gap:8px}
.quote-form textarea{border:1px solid var(--line-strong);border-radius:10px;padding:9px 11px;font:inherit;resize:vertical;background:var(--surface-2);color:var(--ink)}
.quote-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.quote-form .btn{align-self:flex-end;padding:7px 16px}

/* embedded quoted post */
.quote-embed{display:block;border:1px solid var(--line-strong);border-radius:14px;padding:12px;margin-top:10px;transition:var(--transition);background:var(--surface)}
.quote-embed:hover{background:var(--surface-hover);border-color:var(--accent)}
.qe-head{display:flex;align-items:center;gap:6px;font-size:14px}
.qe-head .avatar.sm{width:26px;height:26px;font-size:12px}
.qe-head strong{font-weight:800;color:var(--ink)}
.qe-head .handle{font-size:13px}
.qe-body{margin-top:6px;color:var(--ink-2);font-size:14px;line-height:1.55}
.qe-media{margin-top:8px}
.qe-media img,.qe-media video{border-radius:10px;max-height:260px;width:auto;max-width:100%}

/* link preview card */
.link-card{display:flex;margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:var(--transition);background:var(--surface)}
.link-card:hover{background:var(--surface-hover);border-color:var(--line-strong)}
.lc-img{width:120px;object-fit:cover;flex-shrink:0;background:var(--surface-2)}
.lc-body{padding:11px 13px;min-width:0}
.lc-site{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.lc-title{font-weight:700;font-size:14.5px;margin-top:2px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-desc{font-size:13px;color:var(--muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* notifications page */
.feed>.notif-row{border-bottom:1px solid var(--line)}
.notif-row{display:flex;align-items:center;gap:12px;padding:14px 18px;transition:var(--transition)}
.notif-row:hover{background:var(--surface-hover)}
.notif-row.unread{background:var(--accent-soft)}
.notif-ic{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.notif-txt{flex:1;min-width:0;font-size:14.5px;line-height:1.5}
.notif-txt strong{font-weight:800}
.notif-time{color:var(--muted);font-size:12.5px;flex-shrink:0}
.feed>.notif-row:last-child{border-bottom:0}
.notif-filters{overflow-x:auto}

/* sidebar: featured, communities, links */
.feat-row{display:block;padding:8px 10px;border-radius:10px;transition:var(--transition)}
.feat-row:hover{background:var(--surface-hover)}
.feat-row strong{display:block;font-size:13.5px}
.feat-txt{color:var(--muted);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soon-row{padding:12px 10px;color:var(--muted);font-size:13px;text-align:center}
.widget-links{display:flex;flex-wrap:wrap;gap:6px 14px;padding:14px 16px;font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.widget-links a{color:var(--muted)}
.widget-links a:hover{color:var(--accent);text-decoration:underline}

/* placeholder empties + static pages */
.soon-empty{display:flex;flex-direction:column;align-items:center;gap:8px}
.soon-ic{font-size:42px}
.static-page{padding:18px 20px;line-height:1.9;color:var(--ink-2)}

/* ===== Responsive ===== */
@media(max-width:1000px){
  .app3{grid-template-columns:minmax(0,1fr);max-width:640px;gap:0;padding:16px 14px}
  .col-left,.col-right{display:none}
}
@media(max-width:560px){
  .composer-tools{gap:0}
  .ctool{font-size:18px;padding:7px}
  .reel{max-height:76vh}
  .composer-bar{flex-wrap:wrap;gap:8px}
  .composer-actions{width:100%;justify-content:space-between}
  .lc-img{width:92px}
  .menu-pop{inset-inline-end:auto;inset-inline-start:0}
}

/* ===== Phase 2 & 3: composer schedule, DMs, lists, chips ===== */
.sched-input{padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink);font:inherit;font-size:12px;max-width:170px}
.sched-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.btn-draft{padding:9px 16px}

/* direct messages */
.dm-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.dm-peer{display:flex;align-items:center;gap:8px;font-weight:700}
.dm-thread{display:flex;flex-direction:column;gap:8px;padding:16px 18px;max-height:56vh;overflow-y:auto}
.dm-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:80%}
.dm-msg.mine{align-self:flex-end;align-items:flex-end}
.dm-bubble{background:var(--surface-2);border:1px solid var(--line);padding:9px 13px;border-radius:14px;font-size:14.5px;line-height:1.5;word-break:break-word}
.dm-msg.mine .dm-bubble{background:var(--accent);color:#fff;border-color:transparent}
.dm-time{font-size:11px;color:var(--muted);margin-top:3px}
.dm-compose{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);align-items:flex-end}
.dm-compose textarea{flex:1;border:1px solid var(--line-strong);border-radius:16px;padding:10px 14px;font:inherit;resize:none;background:var(--surface-2);color:var(--ink);min-height:42px}
.dm-compose textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.dm-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);transition:var(--transition)}
.dm-row:hover{background:var(--surface-hover)}
.dm-row.unread{background:var(--accent-soft)}
.dm-row-body{flex:1;min-width:0;display:flex;flex-direction:column}
.dm-snippet{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row-time{color:var(--muted);font-size:12px;flex-shrink:0}
.feed>.dm-row:last-child{border-bottom:0}

/* lists + chips */
.list-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.member-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 10px;font-size:12.5px}
.chip-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.chip-x:hover{color:var(--like)}
.profile-interests{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}


/* ============================================================
   2026 refresh — line icons (Tabler) + calmer composer
   ============================================================ */
.ti{font-style:normal;line-height:1;vertical-align:-.145em;display:inline-block}
.side-nav .sn-ic{font-size:0}
.side-nav .sn-ic .ti{font-size:22px}
.mobilenav .mi{font-size:0}
.mobilenav .mi .ti{font-size:22px}
.act .ti{font-size:18.5px}
.act.liked .ti{color:var(--like)}
.ctool .ti{font-size:19px}
.menu-item .ti{font-size:17px;width:20px;text-align:center}
.badge .ti,.verified-chip .ti,.name .ti,.profile-name .ti{font-size:15px;vertical-align:-.16em;color:var(--accent)}
.widget-h .ti{font-size:17px;vertical-align:-.15em;margin-inline-end:6px;color:var(--muted)}
.notif-ic .ti{font-size:21px}
.pa-ic .ti,.post-file .ti{font-size:19px}
.repost-label .ti,.type-chip .ti{font-size:14px;vertical-align:-.14em}
.stat-ic .ti,.admin-side .ai-ic .ti,.stat .ti{font-size:20px}
.icon-btn .ti{font-size:17px}
.compose-top .ti,.side-compose .ti,.btn .ti,.btn-sm .ti,.btn-outline .ti{font-size:16px;vertical-align:-.15em}
.event-date .ti{font-size:20px}
.dm-peer .ti,.dm-head .ti{font-size:18px}
.feed-tab .ti,.tab-btn .ti{font-size:16px;vertical-align:-.15em}

/* composer: calmer, tidier toolbar */
.composer{padding:18px 20px;gap:14px;align-items:flex-start}
.composer>.avatar{margin-top:2px}
.composer-form{gap:10px}
.composer textarea{resize:none;min-height:60px;font-size:20px;line-height:1.6;padding:4px 2px}
.composer-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 8px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.composer-tools{flex-wrap:nowrap;gap:2px}
.ctool{width:38px;height:38px;display:inline-grid;place-items:center;padding:0;border-radius:50%}
.composer-actions{margin-inline-start:auto;gap:8px}
.char-count{margin-inline-end:2px}
.sched-input{width:38px;min-width:38px;max-width:38px;height:34px;padding:0 8px;overflow:hidden;color:transparent;cursor:pointer;transition:max-width .2s ease,background .18s ease}
.sched-input::-webkit-datetime-edit{opacity:0}
.sched-input::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
.sched-input:hover,.sched-input:focus{max-width:210px;color:var(--ink);background:var(--surface-hover);border-color:var(--accent)}
.sched-input:hover::-webkit-datetime-edit,.sched-input:focus::-webkit-datetime-edit{opacity:1}
.vis-select{height:34px;padding:0 12px}
.btn-draft{height:34px;padding:0 16px;font-size:13.5px}
.composer-actions .btn{height:38px;padding:0 22px}
@media(max-width:560px){
  .composer{padding:14px}
  .composer textarea{font-size:17px}
  .ctool{width:34px;height:34px}
  .composer-actions{width:100%}
}


/* ===== بطاقة كتاب Z-PDF الغنيّة / rich Z-PDF book card ===== */
.book-card{display:flex;gap:14px;margin-top:10px;padding:13px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--surface),var(--surface-2));transition:var(--transition);text-decoration:none}
.book-card:hover{border-color:var(--brand,#4f46e5);box-shadow:0 4px 18px rgba(79,70,229,.12);transform:translateY(-1px)}
.bc-cover{width:88px;height:130px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--surface-2);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.bc-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.bc-badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:11px;font-weight:700;color:#fff;background:var(--brand,#4f46e5);padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.bc-badge svg{width:13px;height:13px}
.bc-title{font-weight:800;font-size:15.5px;margin-top:2px;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-author{font-size:12.5px;color:var(--muted);font-style:italic}
.bc-desc{font-size:12.5px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.bc-chip{font-size:11px;color:var(--ink);background:var(--surface-hover);border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.bc-dl{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--brand,#4f46e5);margin-inline-start:auto}
.bc-dl svg{width:14px;height:14px}
@media(max-width:560px){.bc-cover{width:66px;height:98px}.bc-title{font-size:14px}}

/* FKRA-NAV-FIX v2 */
.col-left,.col-right{max-height:calc(100vh - 82px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.col-left::-webkit-scrollbar,.col-right::-webkit-scrollbar{width:6px}
.col-left::-webkit-scrollbar-thumb,.col-right::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35);border-radius:3px}
.mnav-toggle{display:none}
.mnav-backdrop{display:none}
.mlogin-btn{display:none}
@media (max-width:1000px){
  .mnav-toggle{display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
  .mlogin-btn{display:inline-flex;align-items:center}
  .col-left{display:block !important;position:fixed;top:0;right:0;left:auto;height:100vh;max-height:100vh;width:84%;max-width:330px;background:var(--surface,#fff);color:inherit;z-index:1300;transform:translateX(112%);transition:transform .25s ease;box-shadow:0 0 34px rgba(0,0,0,.28);padding:16px;overflow-y:auto;border-radius:0}
  html[dir=ltr] .col-left{right:auto;left:0;transform:translateX(-112%)}
  body.mnav-open .col-left{transform:translateX(0) !important}
  .mnav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;opacity:0;pointer-events:none;transition:opacity .25s}
  body.mnav-open .mnav-backdrop{opacity:1;pointer-events:auto}
  body.mnav-open{overflow:hidden}
}