/* ═══════════════════════════════════════════════════════════════════
   Taqwa Media — Design System
   Primary: #A52ABE (brand blue) throughout
   Light: #fafafa base, clean borders, minimal shadows
   Dark:  #000 base, same brand accents
═══════════════════════════════════════════════════════════════════ */

/* ─── LIGHT MODE ────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:    #fafafa;
  --card:  #ffffff;
  --surf:  #f3f3f3;
  --text:  #262626;
  --muted: #8e8e8e;
  --dim:   #c7c7c7;
  --border: #dbdbdb;
  --hover:  rgba(0,0,0,.04);

  /* Primary — brand blue */
  --pr:    #A52ABE;
  --pr2:   #8B1FA0;
  --pr-light: rgba(165,42,190,.1);

  /* Accents */
  --coral:  #833ab4;
  --teal:   #0891b2;
  --em:     #22bb88;
  --am:     #fd8d14;
  --red:    #ed4956;
  --green:  #22bb88;
  --amber:  #fd8d14;
  --purple: #833ab4;
  --sky:    #A52ABE;

  /* Gradients */
  --grad-main:  linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);
  --grad-pr:    linear-gradient(135deg,#D63A95,#741BE8);
  --grad-fire:  linear-gradient(45deg,#f09433,#e6683c,#dc2743);
  --grad-sky:   linear-gradient(135deg,#D63A95,#741BE8);
  --grad-story: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);

  --p1:#A52ABE; --a1:#833ab4; --t1:#0891b2; --g1:#22bb88;
  --bg-base:#fafafa; --bg-card:#ffffff; --bg-input:#fafafa;
}

html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Hind Siliguri', sans-serif;
}

/* ─── DARK MODE ─────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:    #000000;
  --card:  #121212;
  --surf:  #1c1c1c;
  --text:  #f5f5f5;
  --muted: #a8a8a8;
  --dim:   #6e6e6e;
  --border: #363636;
  --hover:  rgba(255,255,255,.06);
  --pr:    #A52ABE;
  --pr2:   #8B1FA0;
  --pr-light: rgba(165,42,190,.15);
  --coral:  #c13584;
  --teal:   #0ea5e9;
  --em:     #44bb88;
  --am:     #fd8d14;
  --red:    #ed4956;
  --green:  #44bb88;
  --amber:  #fd8d14;
  --purple: #833ab4;
  --sky:    #A52ABE;
  --grad-main:  linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);
  --grad-pr:    linear-gradient(135deg,#D63A95,#741BE8);
  --grad-fire:  linear-gradient(45deg,#f09433,#e6683c,#dc2743);
  --grad-sky:   linear-gradient(135deg,#D63A95,#741BE8);
  --grad-story: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --p1:#A52ABE; --a1:#833ab4; --t1:#0891b2; --g1:#44bb88;
  --bg-base:#000000; --bg-card:#121212; --bg-input:#1c1c1c;
}

html[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Hind Siliguri', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Component Overrides
═══════════════════════════════════════════════════════════════════ */

/* ─── Navigation (header) ────────────────────────────────────────── */
html[data-theme="light"] .nav,
html[data-theme="light"] .g-nav,
html[data-theme="light"] .fb-nav,
html[data-theme="light"] .mob-top,
html[data-theme="dark"] .nav,
html[data-theme="dark"] .g-nav,
html[data-theme="dark"] .fb-nav,
html[data-theme="dark"] .mob-top {
  background: linear-gradient(135deg,#c0267f 0%,#9b1fce 45%,#6214b8 100%) !important;
  border-bottom-color: rgba(0,0,0,.2) !important;
  border-top-color: transparent !important;
  box-shadow: 0 3px 24px rgba(116,27,232,.5),0 1px 0 rgba(255,255,255,.07) inset !important;
}

/* All nav children — white */
html[data-theme="light"] .nav *,
html[data-theme="light"] .g-nav *,
html[data-theme="light"] .fb-nav *,
html[data-theme="light"] .mob-top * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Nav badges */
html[data-theme="light"] .nav .badge,
html[data-theme="light"] .g-nav .badge,
html[data-theme="light"] .fb-nav .badge {
  color: #ffffff !important;
  background: #ed4956 !important;
  border-color: #A52ABE !important;
}

/* Nav icon buttons */
html[data-theme="light"] .nav-tab {
  color: rgba(255,255,255,.62) !important;
}
html[data-theme="light"] .nav-tab:hover {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .nav-tab.active {
  border-bottom-color: #ffffff !important;
  color: #ffffff !important;
}
html[data-theme="light"] .nav-ibtn,
html[data-theme="light"] .nav-btn,
html[data-theme="light"] .nav-icon-btn,
html[data-theme="light"] .g-nav .g-btn,
html[data-theme="light"] .fb-nav .fb-btn {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .nav-ibtn:hover,
html[data-theme="light"] .nav-btn:hover,
html[data-theme="light"] .g-nav .g-btn:hover {
  background: rgba(255,255,255,.22) !important;
}
html[data-theme="light"] .nav-search,
html[data-theme="light"] .g-search-box,
html[data-theme="light"] .fb-search {
  background: rgba(255,255,255,.16) !important;
  border-color: transparent !important;
}
html[data-theme="light"] .nav-search:focus-within,
html[data-theme="light"] .g-search-box:focus-within {
  background: rgba(255,255,255,.24) !important;
  border-color: rgba(255,255,255,.35) !important;
}
html[data-theme="light"] .nav-search input::placeholder,
html[data-theme="light"] .g-search-box input::placeholder,
html[data-theme="light"] .fb-search input::placeholder {
  color: rgba(255,255,255,.58) !important;
}
html[data-theme="light"] .nav-tab .badge,
html[data-theme="light"] .nav .badge {
  border-color: #A52ABE !important;
}

/* Bottom nav — white, blue active */
html[data-theme="light"] .mob-bottom-nav,
html[data-theme="light"] .bottom-nav {
  background: #ffffff !important;
  border-top: 1px solid #dbdbdb !important;
  box-shadow: none !important;
}
html[data-theme="light"] .mob-bottom-nav .active i,
html[data-theme="light"] .bottom-nav .active i,
html[data-theme="light"] .mob-bottom-nav .bnav-item.active,
html[data-theme="light"] .bottom-nav .bnav-item.active {
  color: #A52ABE !important;
  -webkit-text-fill-color: #A52ABE !important;
}

/* ─── Cards & surfaces ────────────────────────────────────────────── */
html[data-theme="light"] .post-card,
html[data-theme="light"] .pc,
html[data-theme="light"] .card,
html[data-theme="light"] .rs-card,
html[data-theme="light"] .intro-card,
html[data-theme="light"] .conv-item,
html[data-theme="light"] .cmt-box,
html[data-theme="light"] .srb-section,
html[data-theme="light"] .notif-left,
html[data-theme="light"] .left-sb,
html[data-theme="light"] .right-sb,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .sb-section,
html[data-theme="light"] .stories-card,
html[data-theme="light"] .reel-info,
html[data-theme="light"] .mkt-card,
html[data-theme="light"] .prod-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .group-card,
html[data-theme="light"] .page-card,
html[data-theme="light"] .story-create-card,
html[data-theme="light"] .friend-card,
html[data-theme="light"] .user-card,
html[data-theme="light"] .notif-card,
html[data-theme="light"] .live-card {
  background: #ffffff !important;
  border-color: #dbdbdb !important;
  color: var(--text) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}

html[data-theme="light"] .post-card:hover,
html[data-theme="light"] .pc:hover {
  box-shadow: 0 4px 20px rgba(165,42,190,.12) !important;
  border-color: rgba(165,42,190,.22) !important;
  transform: translateY(-1px);
}

/* ─── Shadows — global light mode reduction ──────────────────────── */
html[data-theme="light"] * {
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.1);
}
html[data-theme="light"] .modal-box,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .ctx-menu,
html[data-theme="light"] .menu-popup,
html[data-theme="light"] .pfx-menu,
html[data-theme="light"] .post-menu,
html[data-theme="light"] .emoji-picker,
html[data-theme="light"] .qmenu-sheet {
  background: #ffffff !important;
  border: 1px solid #dbdbdb !important;
  color: var(--text) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
}

/* ─── Profile page ───────────────────────────────────────────────── */
html[data-theme="light"] .avatar-section {
  background: #ffffff !important;
  border-bottom-color: #dbdbdb !important;
  box-shadow: none !important;
}
html[data-theme="light"] .profile-tabs-bar,
html[data-theme="light"] .sticky-mini-bar,
html[data-theme="light"] .smb-tab,
html[data-theme="light"] .mob-row1,
html[data-theme="light"] .mob-tab-strip {
  background: #ffffff !important;
  border-color: #dbdbdb !important;
  box-shadow: none !important;
}
html[data-theme="light"] .cover-gradient-overlay {
  background: linear-gradient(to bottom,transparent 40%,rgba(250,250,250,.9) 100%) !important;
}

/* ─── Sidebar active — #A52ABE ───────────────────────────────────── */
html[data-theme="light"] .sb-link.active,
html[data-theme="light"] .nf-item.active,
html[data-theme="light"] .ptab.active {
  background: rgba(165,42,190,.08) !important;
  color: #A52ABE !important;
  border-left: 3px solid #A52ABE;
}
html[data-theme="light"] .ptab:hover,
html[data-theme="light"] .sb-link:hover,
html[data-theme="light"] .nf-item:hover,
html[data-theme="light"] .conv-item:hover,
html[data-theme="light"] .conv-item.active {
  background: rgba(0,0,0,.04) !important;
}
html[data-theme="light"] .conv-list {
  background: #fafafa !important;
}

/* ─── Page/section tabs active ───────────────────────────────────── */
html[data-theme="light"] .nav-tab.active,
html[data-theme="light"] .g-tab.active,
html[data-theme="light"] .ptab.active,
html[data-theme="light"] .tab-item.active {
  color: #A52ABE !important;
  -webkit-text-fill-color: #A52ABE !important;
  border-bottom-color: #A52ABE !important;
}
/* But in the header nav (on blue), keep white */
html[data-theme="light"] .nav .nav-tab.active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

/* ─── Inputs & textareas ─────────────────────────────────────────── */
html[data-theme="light"] .g-search-pill,
html[data-theme="light"] .sb-search,
html[data-theme="light"] .nav-search,
html[data-theme="light"] .fb-search,
html[data-theme="light"] input.chat-input,
html[data-theme="light"] .cmt-textarea,
html[data-theme="light"] textarea,
html[data-theme="light"] .search-box {
  background: #fafafa !important;
  color: var(--text) !important;
  border-color: #dbdbdb !important;
  box-shadow: none !important;
}
html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .auth-input:focus {
  border-color: #A52ABE !important;
  box-shadow: 0 0 0 2px rgba(165,42,190,.15) !important;
  outline: none !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #8e8e8e !important;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-fill,
html[data-theme="light"] .btn-purple,
html[data-theme="light"] .btn-follow,
html[data-theme="light"] .follow-btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-fill,
html[data-theme="dark"] .btn-purple,
html[data-theme="dark"] .btn-follow,
html[data-theme="dark"] .follow-btn {
  background: linear-gradient(135deg,#D63A95,#741BE8) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(116,27,232,.28) !important;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-fill:hover,
html[data-theme="light"] .btn-purple:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-fill:hover,
html[data-theme="dark"] .btn-purple:hover {
  background: linear-gradient(135deg,#be2a7e,#5e14c0) !important;
  box-shadow: 0 4px 16px rgba(116,27,232,.36) !important;
}
html[data-theme="light"] .btn-outline-primary,
html[data-theme="light"] .btn-ghost {
  border-color: #dbdbdb !important;
  color: #262626 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* ─── Links ──────────────────────────────────────────────────────── */
html[data-theme="light"] a.pc-name,
html[data-theme="light"] a.u-name,
html[data-theme="light"] .p-name a,
html[data-theme="light"] .link-blue {
  color: #A52ABE !important;
  -webkit-text-fill-color: #A52ABE !important;
}

/* ─── Messenger ──────────────────────────────────────────────────── */
html[data-theme="light"] .msg-bubble:not(.emoji-only) {
  background: #efefef !important;
  color: #262626 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .msg-bubble.out,
html[data-theme="dark"] .msg-bubble.out {
  background: linear-gradient(135deg,#D63A95,#741BE8) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(116,27,232,.2) !important;
}
html[data-theme="light"] .cmt-bubble {
  background: #f0f0f0 !important;
  color: #262626 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .chat-area,
html[data-theme="light"] .chat-bg,
html[data-theme="light"] .chat-msgs {
  background: #ffffff !important;
}
html[data-theme="light"] .chat-name,
html[data-theme="light"] .cmt-name,
html[data-theme="light"] .p-name,
html[data-theme="light"] .u-name {
  color: var(--text) !important;
}

/* ─── Text muted ─────────────────────────────────────────────────── */
html[data-theme="light"] .muted,
html[data-theme="light"] .text-muted,
html[data-theme="light"] small {
  color: #8e8e8e !important;
}

/* ─── Auth pages ─────────────────────────────────────────────────── */
html[data-theme="light"] .auth-card {
  background: #ffffff !important;
  border-color: #dbdbdb !important;
  color: #262626 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
html[data-theme="light"] .auth-input {
  background: #fafafa !important;
  border-color: #dbdbdb !important;
  color: #262626 !important;
}
html[data-theme="light"] .auth-input::placeholder { color: #8e8e8e !important; }
html[data-theme="light"] .auth-label { color: #8e8e8e !important; }
html[data-theme="light"] .tmf-brand { color: #262626 !important; }
html[data-theme="light"] .link-purple {
  color: #A52ABE !important;
  -webkit-text-fill-color: #A52ABE !important;
}
html[data-theme="light"] .alert-danger-custom {
  background: rgba(237,73,86,.06) !important;
  border-color: rgba(237,73,86,.2) !important;
  color: #c00020 !important;
}
html[data-theme="light"] .alert-success-custom {
  background: rgba(34,187,136,.08) !important;
  border-color: rgba(34,187,136,.2) !important;
  color: #1a7a55 !important;
}

/* ─── Stories ring ───────────────────────────────────────────────── */
html[data-theme="light"] .story-ring,
html[data-theme="light"] .story-ring-wrap {
  background: var(--grad-story) !important;
}

/* ─── Filter / marketplace pills ────────────────────────────────── */
html[data-theme="light"] .mkt-filter-bar,
html[data-theme="light"] .filter-pill {
  background: #ffffff !important;
  border-color: #dbdbdb !important;
  color: #262626 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .filter-pill.active {
  background: rgba(165,42,190,.1) !important;
  color: #A52ABE !important;
  border-color: rgba(165,42,190,.25) !important;
}
html[data-theme="light"] .live-ctrl-bar,
html[data-theme="light"] .live-panel {
  background: #ffffff !important;
  border-color: #dbdbdb !important;
  color: #262626 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}

/* ─── Settings ───────────────────────────────────────────────────── */
html[data-theme="light"] .settings-nav-item.active {
  background: rgba(165,42,190,.08) !important;
  color: #A52ABE !important;
  border-left: 3px solid #A52ABE !important;
}
html[data-theme="light"] select,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-control {
  background: #fafafa !important;
  color: #262626 !important;
  border-color: #dbdbdb !important;
  box-shadow: none !important;
}

/* ─── Dividers ───────────────────────────────────────────────────── */
html[data-theme="light"] .sb-sep,
html[data-theme="light"] hr,
html[data-theme="light"] .divider-line {
  background: #dbdbdb !important;
  border-color: #dbdbdb !important;
}

/* ─── Accent strip — beautiful #A52ABE placement ────────────────── */

/* Section headers with blue icon */
html[data-theme="light"] .sb-title i,
html[data-theme="light"] .section-title i,
html[data-theme="light"] .rs-title i {
  color: #A52ABE !important;
  -webkit-text-fill-color: #A52ABE !important;
}

/* Post action active states */
html[data-theme="light"] .pc-act-btn.liked,
html[data-theme="light"] .act-btn.liked {
  color: #ed4956 !important;
}
html[data-theme="light"] .pc-act-btn.commented,
html[data-theme="light"] .act-btn.shared {
  color: #A52ABE !important;
  -webkit-text-fill-color: #A52ABE !important;
}

/* Verified badge */
html[data-theme="light"] .verified-badge,
html[data-theme="light"] .bi-patch-check-fill {
  color: #A52ABE !important;
  -webkit-text-fill-color: #A52ABE !important;
}

/* Online dot */
html[data-theme="light"] .online-dot {
  background: #22bb88 !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

/* ─── Quick action menu ──────────────────────────────────────────── */
.qmenu-overlay {
  position: fixed; inset: 0; z-index: 2800;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.qmenu-overlay.show { opacity: 1; pointer-events: all; }
.qmenu-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2900;
  background: var(--card); border-radius: 16px 16px 0 0;
  padding: 8px 12px 24px;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -2px 16px rgba(0,0,0,.08);
  max-height: 85vh; overflow-y: auto;
}
.qmenu-sheet.show { transform: translateY(0); }
.qmenu-handle { width: 36px; height: 4px; background: var(--border); border-radius: 4px; margin: 6px auto 10px; }
.qmenu-title { font-size: 11px; font-weight: 600; color: var(--dim); padding: 4px 4px 8px; letter-spacing: .6px; text-transform: uppercase; }
.qmenu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 8px; border: none; background: none; color: var(--text);
  cursor: pointer; border-radius: 8px; font-size: 14px; font-weight: 500;
  font-family: inherit; text-align: left; transition: background .12s;
}
.qmenu-item:hover { background: var(--hover); }
.qmenu-item-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.qi-green  { background: rgba(34,187,136,.1);  color: #22bb88; }
.qi-blue   { background: rgba(165,42,190,.1);    color: #A52ABE; }
.qi-amber  { background: rgba(253,141,20,.1);  color: #fd8d14; }
.qi-red    { background: rgba(237,73,86,.1);   color: #ed4956; }
.qi-purple { background: rgba(131,58,180,.1);  color: #833ab4; }
.qmenu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ─── Theme toggle ───────────────────────────────────────────────── */
.theme-toggle-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px; border: none; background: none;
  color: var(--text); cursor: pointer; border-radius: 8px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  transition: background .12s; text-align: left;
}
.theme-toggle-btn:hover { background: var(--hover); }
.theme-toggle-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  background: rgba(165,42,190,.1); color: #A52ABE;
}
.theme-toggle-label { flex: 1; }
.theme-toggle-switch {
  width: 42px; height: 22px; border-radius: 50px;
  background: var(--border); position: relative; transition: background .2s; flex-shrink: 0;
}
.theme-toggle-switch.on { background: linear-gradient(135deg,#D63A95,#741BE8); }
.theme-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .2s;
}
.theme-toggle-switch.on .theme-toggle-knob { transform: translateX(20px); }

/* ─── Scrollbar ──────────────────────────────────────────────────── */
html[data-theme="light"] ::-webkit-scrollbar { width: 4px; height: 4px; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #dbdbdb; border-radius: 2px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #c7c7c7; }

/* ─── Smooth transitions ─────────────────────────────────────────── */
html[data-theme="light"] *:not(img):not(video) {
  transition-property: background-color, border-color, color, box-shadow, opacity;
  transition-duration: .12s;
  transition-timing-function: ease;
}
html[data-theme="light"] .no-transition,
html[data-theme="light"] img,
html[data-theme="light"] video {
  transition: none !important;
}

/* ─── RTL language support (Arabic, Urdu) ───────────────────── */
html[dir="rtl"] body,
body.rtl {
  direction: rtl;
  text-align: right;
}
body.rtl .tmf-search input { direction: rtl; }
body.rtl .tmf-lang-drop { right: auto; left: 0; }
body.rtl .tmf-opts-panel { right: auto; left: 0; border-left: none; border-right: 1px solid rgba(0,0,0,.1); transform: translateX(-100%); }
body.rtl .tmf-opts-panel.open { transform: translateX(0); }
body.rtl .sb-link { flex-direction: row-reverse; }
body.rtl .comp-top { flex-direction: row-reverse; }
body.rtl .pa-btn { flex-direction: row-reverse; }

/* ─── Bengali / Hind Siliguri font ──────────────────────────── */
:root { --tmf-font: 'Hind Siliguri', sans-serif; }
body { font-family: 'Hind Siliguri', sans-serif; }

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL VISUAL IMPROVEMENTS — proportional, beautiful, visible
═══════════════════════════════════════════════════════════════════ */

/* ─── Improved card depth in light mode ─────────────────────────── */
html[data-theme="light"] .post-card,
html[data-theme="light"] .pc,
html[data-theme="light"] .card,
html[data-theme="light"] .friend-card,
html[data-theme="light"] .user-card,
html[data-theme="light"] .prod-card,
html[data-theme="light"] .live-card,
html[data-theme="light"] .group-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04) !important;
  border-radius: 14px !important;
}

/* ─── Dark mode card depth ───────────────────────────────────────── */
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .pc,
html[data-theme="dark"] .card,
html[data-theme="dark"] .friend-card,
html[data-theme="dark"] .prod-card {
  box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.07) !important;
}
html[data-theme="dark"] .post-card:hover,
html[data-theme="dark"] .pc:hover {
  box-shadow: 0 4px 22px rgba(116,27,232,.18) !important;
  border-color: rgba(165,42,190,.2) !important;
}

/* ─── Primary buttons — richer gradient & shadow ────────────────── */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-fill,
html[data-theme="light"] .btn-purple,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-fill,
html[data-theme="dark"] .btn-purple {
  box-shadow: 0 3px 14px rgba(116,27,232,.38) !important;
  letter-spacing: .01em !important;
}

/* ─── Scrollbar — dark mode ──────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar { width: 4px; height: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,rgba(214,58,149,.5),rgba(116,27,232,.5));
  border-radius: 2px;
}

/* ─── Focus ring — all interactive elements ─────────────────────── */
:focus-visible {
  outline: 2px solid rgba(165,42,190,.5) !important;
  outline-offset: 2px !important;
}

/* ─── Avatar ring on hover ──────────────────────────────────────── */
html[data-theme="light"] .tmf-av:hover,
html[data-theme="dark"] .tmf-av:hover {
  box-shadow: 0 0 0 3px rgba(214,58,149,.45) !important;
}

/* ─── Options panel — richer style ─────────────────────────────── */
.tmf-opts-panel {
  border-left: 1px solid rgba(165,42,190,.12) !important;
  box-shadow: -4px 0 40px rgba(116,27,232,.12) !important;
}
html[data-theme="dark"] .tmf-opts-panel {
  background: #0e0e1a !important;
  border-left-color: rgba(165,42,190,.18) !important;
  box-shadow: -4px 0 40px rgba(0,0,0,.5) !important;
}
.tmf-opts-icon {
  border-radius: 12px !important;
}
.tmf-opts-item {
  border-radius: 10px !important;
  margin: 1px 6px !important;
  padding: 10px 10px !important;
  width: calc(100% - 12px) !important;
}

/* ─── Story ring — always vivid ─────────────────────────────────── */
.story-ring,
.story-ring-wrap,
html[data-theme="dark"] .story-ring,
html[data-theme="dark"] .story-ring-wrap {
  background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important;
  padding: 2.5px !important;
}

/* ─── Page padding-top sync with new nav height ─────────────────── */
html[data-theme="light"] body,
html[data-theme="dark"] body {
  --tmf-nav: 58px;
}
@media(max-width:768px) {
  html[data-theme="light"] body,
  html[data-theme="dark"] body {
    --tmf-nav: 96px;
  }
}