/* ============================================================
   SUVARGAL — Light Mode · Electric Blue · Professional
   Brand accent: #005FFF   Surface: #FFFFFF   BG: #F2F4F8
   ============================================================ */

:root {
  /* Brand */
  --accent:       #005FFF;
  --accent-dim:   #0051DD;
  --accent-soft:  #EBF1FF;
  --accent-glow:  rgba(0,95,255,.12);
  --accent-2:     #3B82F6;

  /* Surfaces */
  --bg:           #F2F4F8;
  --surface:      #FFFFFF;
  --surface-2:    #F8F9FC;
  --surface-3:    #EEF0F5;

  /* Borders */
  --border:       #E3E6EE;
  --border-2:     #CDD2E0;

  /* Text */
  --text:         #0C0E14;
  --text-2:       #5A6070;
  --text-3:       #9BA3B2;
  --text-inv:     #FFFFFF;

  /* Semantic */
  --like:         #FF0033;
  --success:      #00C87A;
  --warn:         #F59E0B;

  /* Layout */
  --nav-w:        240px;
  --nav-slim:     68px;
  --feed-max:     620px;
  --sb-w:         288px;

  /* UI */
  --radius:       14px;
  --radius-sm:    8px;
  --radius-pill:  999px;
  --shadow:       0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md:    0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  --shadow-blue:  0 4px 22px rgba(0,95,255,.28);
  --transition:   .18s ease;

  /* ── Override Chevereto/Peafowl dark-mode CSS variables ── */
  --topBarBackground:         #FFFFFF;
  --suv-bg:                   #F2F4F8;
  --suv-surface:              #FFFFFF;
  --suv-border:               #E3E6EE;
  --suv-text:                 #0C0E14;
  --suv-text-2:               #5A6070;
  --suv-accent:               #005FFF;
  --color-base:               #F2F4F8;
  --color-fg:                 #0C0E14;
  --color-bg:                 #FFFFFF;
  --palette-color-1:          #005FFF;
  --palette-color-1-contrast: #FFFFFF;
  --palette-color-2:          #F2F4F8;
  --color-header-bg:          #FFFFFF;
  --color-header-fg:          #0C0E14;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0; padding: 0;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-dim); }

img { max-width: 100%; display: block; }

/* ── Layout Shell ─────────────────────────────────────────── */
#suv-leftnav,
.left-nav, nav.sidebar,
[id*="leftnav"], [class*="left-nav"] {
  width: var(--nav-w) !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0; left: 0;
  height: 100vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 20px 12px !important;
  z-index: 100 !important;
}

/* Chevereto's left nav specific class names */
.suv-nav-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; border-radius: var(--radius-sm) !important; color: var(--text-2) !important; font-weight: 500 !important; transition: background var(--transition), color var(--transition) !important; }
.suv-nav-item:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.suv-nav-item.active { background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 700 !important; }
.suv-nav-icon { color: inherit !important; }
.suv-nav-label { color: inherit !important; font-size: 15px !important; }
.suv-nav-create { background: var(--accent) !important; color: #fff !important; border-radius: var(--radius-pill) !important; box-shadow: var(--shadow-blue) !important; justify-content: center !important; font-weight: 700 !important; margin: 8px 0 !important; }
.suv-nav-create:hover { background: var(--accent-dim) !important; color: #fff !important; }
.suv-nav-section { font-size: 11px !important; font-weight: 700 !important; color: var(--text-3) !important; text-transform: uppercase !important; letter-spacing: .6px !important; padding: 12px 14px 4px !important; }

#suv-main,
.main-content, [id*="main-content"],
[class*="main-wrap"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
  background: var(--bg) !important;
  min-height: 100vh !important;
  padding-bottom: 80px !important;
}

/* If body has class 'split', Chevereto handles body padding-left:240px — don't double it */
body.split #suv-main,
body.split .main-content {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#suv-feed-col,
.feed-col, [class*="feed-col"] {
  max-width: var(--feed-max) !important;
  margin: 0 auto !important;
  padding: 20px 12px !important;
}

#suv-rightsidebar,
.right-sidebar, [id*="rightsidebar"] {
  width: var(--sb-w) !important;
  position: sticky !important;
  top: 20px !important;
  padding: 20px 12px !important;
  background: transparent !important;
}

/* ── Logo / Brand ─────────────────────────────────────────── */
.logo, .brand, [class*="logo"],
a[href="/"] > img ~ span,
.site-name, .navbar-brand {
  color: var(--accent) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -.4px !important;
}

/* ── Left Nav Items ───────────────────────────────────────── */
#suv-leftnav a,
.left-nav a, [id*="leftnav"] a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-2) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: background var(--transition), color var(--transition) !important;
  white-space: nowrap !important;
}

#suv-leftnav a:hover,
.left-nav a:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

#suv-leftnav a.active,
#suv-leftnav a[class*="active"],
.left-nav a.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* Upload CTA in nav */
#suv-leftnav .btn-upload,
[id*="leftnav"] [class*="upload"],
#suv-leftnav [href*="upload"] {
  background: var(--accent) !important;
  color: var(--text-inv) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-blue) !important;
  justify-content: center !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
}

#suv-leftnav [href*="upload"]:hover {
  background: var(--accent-dim) !important;
  box-shadow: 0 6px 28px rgba(0,95,255,.38) !important;
  color: var(--text-inv) !important;
}

/* ── Top Bar / Header ─────────────────────────────────────── */
/* Exact Chevereto/Peafowl selectors */
#top-bar,
.top-bar,
.top-bar--main,
.top-bar-left,
.top-bar-right,
header, .header, #header,
[class*="top-bar"], [class*="topbar"],
[class*="navbar"]:not([class*="bottom"]) {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

/* Peafowl uses ::before with --topBarBackground for the dark overlay — nuke it */
#top-bar::before,
.top-bar::before,
.top-bar--main::before,
.top-sub-bar::before,
.follow-scroll-wrapper.position-fixed::before {
  background: #FFFFFF !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* Sub-bar */
.top-sub-bar,
.content-width:first-child {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Logo text */
.top-bar-logo, .suv-logo, .suv-logo-text,
.top-bar-logo span, .top-bar-logo a {
  color: var(--accent) !important;
}

/* Search inside header */
.top-bar-search-input,
.top-bar .search-input {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-pill) !important;
}

/* Nav items in top-bar */
.top-bar a, .top-bar button,
.top-bar-right a, .top-bar-right button {
  color: var(--text-2) !important;
}
.top-bar a:hover { color: var(--accent) !important; }

/* Search input */
.search-input, [type="search"], input[name="q"],
[class*="search"] input {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text) !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.search-input:focus, [type="search"]:focus, input[name="q"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}

/* ── Stories / Avatar Ring ────────────────────────────────── */
.stories-row, [class*="stories"],
.suv-stories {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 4px 0 12px !important;
}

.story-item, [class*="story-item"],
.suv-story {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.story-avatar, [class*="story-avatar"],
.suv-story img {
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important;
  border: 2.5px solid transparent !important;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, var(--accent) 0%, #00C3FF 100%) border-box !important;
  object-fit: cover !important;
  box-shadow: var(--shadow) !important;
}

.story-label, [class*="story-label"] {
  font-size: 11px !important;
  color: var(--text-2) !important;
  text-align: center !important;
  max-width: 60px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── Sort / Filter Tabs ───────────────────────────────────── */
.sort-tabs, .filter-tabs, [class*="sort-tab"],
[class*="filter-tab"], .tabs, [class*="tab-row"],
.suv-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 4px 0 12px !important;
  border-bottom: 1.5px solid var(--border) !important;
  margin-bottom: 16px !important;
}

.sort-tabs a, .filter-tabs a,
[class*="sort-tab"] a, [class*="tab-row"] a,
.tabs a, .tabs button {
  padding: 7px 16px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background var(--transition), color var(--transition) !important;
}

.sort-tabs a:hover, .filter-tabs a:hover,
.tabs a:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.sort-tabs a.active, .filter-tabs a.active,
.tabs a.active, .tabs a[class*="active"] {
  background: var(--accent) !important;
  color: var(--text-inv) !important;
}

/* ── Category Pills ───────────────────────────────────────── */
.category-pill, [class*="category"],
.tag, [class*="tag-item"],
.suv-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 13px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  transition: background var(--transition), color var(--transition) !important;
  cursor: pointer !important;
}

.category-pill:hover, [class*="category"]:hover,
.suv-pill:hover {
  background: var(--accent) !important;
  color: var(--text-inv) !important;
}

/* ── Post / Media Cards ───────────────────────────────────── */
.card, [class*="image-card"], [class*="media-card"],
[class*="content-card"], .list-item,
[class*="list-item"], .item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
}

.card:hover, [class*="image-card"]:hover,
[class*="content-card"]:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Card image wrapper */
.card-image, [class*="card-img"],
[class*="thumb"], .media-thumb {
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
  background: var(--surface-3) !important;
}

.card-image img, [class*="card-img"] img,
[class*="thumb"] img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s ease !important;
}

.card:hover .card-image img,
.card:hover [class*="thumb"] img {
  transform: scale(1.04) !important;
}

/* Card meta */
.card-meta, [class*="card-meta"],
[class*="card-info"], [class*="card-body"] {
  padding: 12px 14px !important;
  background: var(--surface) !important;
}

.card-title, [class*="card-title"],
[class*="item-title"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 4px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.card-user, .card-author, [class*="card-user"],
[class*="item-user"] {
  font-size: 12.5px !important;
  color: var(--text-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.card-user img, [class*="card-user"] img {
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* ── Action Bar (like / comment / share / views) ──────────── */
.action-bar, [class*="action-bar"],
[class*="reactions"], [class*="card-actions"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px 12px !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

.action-btn, [class*="action-btn"],
.btn-like, .btn-comment, .btn-share {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background var(--transition), color var(--transition) !important;
}

.action-btn:hover, .btn-like:hover { background: var(--surface-3) !important; color: var(--text) !important; }
.btn-like.active, [class*="liked"] { color: var(--like) !important; }

/* View count */
.view-count, [class*="view-count"], [class*="views"] {
  font-size: 12px !important;
  color: var(--text-3) !important;
  margin-left: auto !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn, button, [class*="btn"] {
  font-family: inherit !important;
  cursor: pointer !important;
  border: none !important;
  transition: all var(--transition) !important;
}

.btn-primary, [class*="btn-primary"],
.follow-btn, [class*="follow"],
[class*="subscribe"] {
  background: var(--accent) !important;
  color: var(--text-inv) !important;
  padding: 9px 20px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-blue) !important;
}

.btn-primary:hover, [class*="btn-primary"]:hover,
.follow-btn:hover {
  background: var(--accent-dim) !important;
  box-shadow: 0 6px 28px rgba(0,95,255,.38) !important;
}

.btn-secondary, [class*="btn-secondary"],
.btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--border-2) !important;
  color: var(--text-2) !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ── Upload Page ──────────────────────────────────────────── */
#anywhere-upload,
[class*="upload-area"], [class*="dropzone"] {
  background: var(--surface) !important;
  border: 2px dashed var(--border-2) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  transition: border-color var(--transition) !important;
}

#anywhere-upload:hover,
[class*="upload-area"]:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ── Right Sidebar ────────────────────────────────────────── */
.sidebar-section, [class*="sidebar-section"],
.widget, [class*="widget"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
}

.sidebar-title, [class*="sidebar-title"],
.widget-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

/* Suggested user row */
.suggested-user, [class*="suggested-user"],
.user-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

.suggested-user:last-child { border-bottom: none !important; }

.suggested-user img, [class*="user-row"] img {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.suggested-user .follow-btn {
  margin-left: auto !important;
  padding: 5px 14px !important;
  font-size: 12.5px !important;
}

/* ── Bottom Nav (mobile) ──────────────────────────────────── */
#suv-bottomnav,
.bottom-nav, [id*="bottomnav"],
[class*="bottom-nav"] {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  position: fixed !important;
  bottom: 0; left: 0; right: 0 !important;
  height: 58px !important;
  z-index: 200 !important;
}

#suv-bottomnav a,
.bottom-nav a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  color: var(--text-3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-sm) !important;
  transition: color var(--transition) !important;
}

#suv-bottomnav a.active,
.bottom-nav a.active {
  color: var(--accent) !important;
}

#suv-bottomnav .upload-fab,
.bottom-nav .upload-fab {
  background: var(--accent) !important;
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-blue) !important;
  color: #fff !important;
  font-size: 22px !important;
}

/* ── Modals / Dialogs ─────────────────────────────────────── */
.modal, [class*="modal"],
.dialog, [class*="dialog"] {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
}

.modal-header, [class*="modal-header"] {
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.modal-body, [class*="modal-body"] {
  padding: 20px !important;
  color: var(--text) !important;
}

/* ── Forms & Inputs ───────────────────────────────────────── */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea, select {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  width: 100% !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-3) !important;
}

label {
  color: var(--text-2) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  display: block !important;
}

/* ── Notifications / Toasts ───────────────────────────────── */
.toast, .alert, [class*="toast"],
[class*="notification"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text) !important;
  padding: 12px 16px !important;
}

.alert-success { border-left: 3px solid var(--success) !important; }
.alert-error, .alert-danger { border-left: 3px solid var(--like) !important; }
.alert-info { border-left: 3px solid var(--accent) !important; }

/* ── User Profile ─────────────────────────────────────────── */
.profile-cover, [class*="cover-photo"],
[class*="profile-banner"] {
  background: linear-gradient(135deg, var(--accent) 0%, #00C3FF 60%, #A78BFA 100%) !important;
  min-height: 200px !important;
}

.profile-avatar, [class*="profile-avatar"],
[class*="user-avatar-lg"] {
  width: 88px !important; height: 88px !important;
  border-radius: 50% !important;
  border: 3px solid var(--surface) !important;
  box-shadow: var(--shadow-md) !important;
  object-fit: cover !important;
}

.profile-name, [class*="profile-name"] {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.profile-username, [class*="profile-handle"] {
  font-size: 14px !important;
  color: var(--text-3) !important;
}

.profile-stats, [class*="profile-stats"] {
  display: flex !important;
  gap: 24px !important;
  padding: 14px 0 !important;
}

.stat-item { text-align: center !important; }
.stat-value {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
.stat-label {
  font-size: 11px !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

/* ── Image / Media Grid ───────────────────────────────────── */
.image-grid, [class*="image-grid"],
[class*="media-grid"], .masonry {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
}

/* ── Explore Page ─────────────────────────────────────────── */
.explore-hero, [class*="explore-hero"] {
  background: linear-gradient(135deg, var(--accent) 0%, #00C3FF 100%) !important;
  border-radius: var(--radius) !important;
  padding: 32px 24px !important;
  color: var(--text-inv) !important;
  margin-bottom: 20px !important;
}

/* ── Chevereto Exact Class Overrides ─────────────────────── */

/* Cards (exact Chevereto class names from DOM inspection) */
.list-images { background: transparent !important; }
.list-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}
.list-item:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; }
.list-item-image { overflow: hidden !important; }
.list-item-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.list-item-image-tools { background: rgba(0,0,0,.5) !important; }
.list-item-desc { background: var(--surface) !important; padding: 10px 12px !important; }
.list-item-desc-title { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text) !important; }
.list-item-desc-title-link { color: var(--text) !important; }
.list-item-desc-title-link:hover { color: var(--accent) !important; }
.list-item-from { font-size: 12px !important; color: var(--text-3) !important; }
.list-item-like, .list-item-share { color: var(--text-2) !important; }

/* Card header components */
.suv-card-hdr { padding: 10px 12px !important; background: var(--surface) !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.suv-card-av { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
.suv-card-name { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text) !important; }
.suv-card-ts { font-size: 11.5px !important; color: var(--text-3) !important; }
.suv-card-acts { margin-left: auto !important; display: flex !important; gap: 4px !important; }
.suv-card-more { color: var(--text-3) !important; background: transparent !important; border: none !important; cursor: pointer !important; }
.suv-act { background: transparent !important; border: none !important; color: var(--text-2) !important; cursor: pointer !important; padding: 6px 10px !important; border-radius: var(--radius-sm) !important; }
.suv-act:hover { background: var(--surface-3) !important; }
.suv-wa { color: #25D366 !important; }
.suv-save { color: var(--accent) !important; }

/* Stories (exact class names) */
.suv-story { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; }
.suv-story-inner { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; }
.suv-story-ring { width: 62px !important; height: 62px !important; border-radius: 50% !important; border: 2.5px solid transparent !important; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--accent) 0%, #00C3FF 100%) border-box !important; overflow: hidden !important; }
.suv-story-label { font-size: 11px !important; color: var(--text-2) !important; text-align: center !important; max-width: 62px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* Sidebar (exact class names) */
.suv-sb-title { font-size: 12px !important; font-weight: 700 !important; color: var(--text-3) !important; text-transform: uppercase !important; letter-spacing: .6px !important; margin-bottom: 10px !important; }
.suv-sb-cat { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 0 !important; border-bottom: 1px solid var(--border) !important; }
.suv-sb-icon { color: var(--accent) !important; }
.suv-sb-info { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.suv-sb-name { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text) !important; }
.suv-sb-sub { font-size: 12px !important; color: var(--text-3) !important; }
.suv-sb-browse { color: var(--accent) !important; font-size: 12px !important; font-weight: 600 !important; margin-left: auto !important; }

/* Bottom nav exact class names */
.suv-bnav-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; color: var(--text-3) !important; font-size: 10px !important; font-weight: 600 !important; padding: 4px 10px !important; }
.suv-bnav-item.active { color: var(--accent) !important; }
.suv-bnav-create { background: var(--accent) !important; color: #fff !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: var(--shadow-blue) !important; }

/* Content tabs (exact class names) */
.content-tabs, .content-tabs-wrap, .content-tabs-container { background: var(--surface) !important; border-bottom: 1.5px solid var(--border) !important; }
.tabbed-listing, .tabbed-content { background: var(--bg) !important; }
.content-tabs a, .content-tabs button { color: var(--text-2) !important; font-weight: 600 !important; padding: 10px 16px !important; border-bottom: 2px solid transparent !important; }
.content-tabs a.active, .content-tabs a:hover { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }

/* Home cover */
#home-cover { background: linear-gradient(135deg, var(--accent) 0%, #00C3FF 60%, #A78BFA 100%) !important; }

/* Pad/listing wrappers */
.pad-content-listing, .content-listing { background: var(--bg) !important; }
.list-albums { background: transparent !important; }
.list-tags .tag { background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: var(--radius-pill) !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 600 !important; }

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── YouTube Card (injected by suvargal.js) ───────────────── */
.suv-yt-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  background: var(--surface-3) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  overflow: hidden !important;
}

.suv-yt-overlay {
  position: absolute !important;
  inset: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.32)) !important;
  transition: background var(--transition) !important;
}

.suv-yt-overlay:hover {
  background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.45)) !important;
}

.suv-yt-play {
  width: 58px !important; height: 58px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-blue) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}

.suv-yt-play::after {
  content: '' !important;
  border: 0 solid transparent !important;
  border-top: 11px solid transparent !important;
  border-bottom: 11px solid transparent !important;
  border-left: 18px solid #fff !important;
  margin-left: 3px !important;
}

.suv-yt-overlay:hover .suv-yt-play {
  transform: scale(1.12) !important;
  box-shadow: 0 6px 28px rgba(0,95,255,.50) !important;
}

.suv-yt-iframe {
  width: 100% !important; height: 100% !important;
  border: none !important;
  position: absolute !important;
  inset: 0 !important;
}

/* YouTube upload row (upload page) */
.suv-yt-row {
  margin-bottom: 16px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  box-shadow: var(--shadow) !important;
}

.suv-yt-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-2) !important;
  margin-bottom: 8px !important;
}

.suv-yt-input {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  font-family: inherit !important;
  transition: border-color var(--transition) !important;
}

.suv-yt-input::placeholder { color: var(--text-3) !important; }
.suv-yt-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}

.suv-yt-btn {
  background: var(--accent) !important;
  color: var(--text-inv) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 9px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  box-shadow: var(--shadow-blue) !important;
  transition: background var(--transition), box-shadow var(--transition) !important;
}

.suv-yt-btn:hover {
  background: var(--accent-dim) !important;
  box-shadow: 0 6px 28px rgba(0,95,255,.38) !important;
}

.suv-yt-preview {
  margin-top: 10px !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  max-height: 160px !important;
  box-shadow: var(--shadow) !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  #suv-leftnav, .left-nav {
    display: none !important;
  }
  #suv-main, .main-content {
    margin-left: 0 !important;
  }
  #suv-rightsidebar, .right-sidebar {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #suv-feed-col, .feed-col {
    padding: 12px 8px !important;
  }
  .profile-stats { gap: 16px !important; }
}