/* ══════════════════════════════════════════════════════════════
   FELCIN PRO — Clean Light Theme (Instagram-inspired)
   Version: 20260417-1
   ══════════════════════════════════════════════════════════════ */

/* Google Material Symbols for navigation icons */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');

/* ─── Design Tokens ─── */
:root {
  --bg: #f6f2eb !important;
  --bg-soft: #ede5db !important;
  --bg-card: #fffdf9 !important;
  --bg-hover: #f3ece2 !important;
  --card: #fffdf9 !important;
  --line: #dfd0bb !important;
  --border: #d7c6ad !important;
  --border-light: #eadfce !important;
  --text: #1f2733 !important;
  --muted: #6d7a89 !important;
  --primary: #0b7a75 !important;
  --primary-hover: #085f5b !important;
  --accent: #d06a3d !important;
  --accent-2: #27588d !important;
  --accent2: #27588d !important;
  --ok: #00a86b !important;
  --err: #cc3a3a !important;
  --warning: #c27b1b !important;
  --danger: #cc3a3a !important;
  --radius: 12px !important;
  --radius-lg: 18px !important;
  --shadow: 0 16px 32px rgba(31, 39, 51, 0.08) !important;
  --space-1: 8px !important;
  --space-2: 12px !important;
  --space-3: 16px !important;
  --space-4: 20px !important;
  --space-5: 28px !important;
  --text-sm: 13px !important;
  --text-md: 14px !important;
  --text-lg: 18px !important;
  --text-xl: 24px !important;
  --icon-size: 24px !important;
}

/* ─── Base ─── */
html,
body {
  background:
    radial-gradient(1200px 480px at 0% -10%, rgba(39, 88, 141, 0.15), transparent 60%),
    radial-gradient(1000px 520px at 110% 0%, rgba(208, 106, 61, 0.14), transparent 60%),
    linear-gradient(180deg, #f8f4ed 0%, #f6f2eb 50%, #f1e9df 100%) !important;
  color: var(--text) !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility !important;
}

/* ─── Layout Containers ─── */
.rail,
.panel,
.feed-shell,
.side,
.main,
.card,
.stage,
.content,
.shell,
.chat-app,
.top,
.comments {
  background: rgba(255, 253, 249, 0.9) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
}

.shell {
  background: transparent !important;
  border: none !important;
}

.feed-shell,
.main,
.card,
.content,
.chat-app {
  overflow: clip;
}

/* ─── Top Headers ─── */
.feed-top,
.head {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-light) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Remove dark theme decorative glows */
.feed-top::before,
.head::before,
.feed-top::after,
.head::after,
.card::after {
  display: none !important;
}

.feed,
.content {
  padding: 16px !important;
  gap: 16px !important;
}

.stories-strip {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ─── Brand / Logo ─── */
.brand {
  font-family: 'Sora', 'Manrope', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  background: linear-gradient(130deg, #0b7a75, #27588d, #d06a3d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  letter-spacing: -0.03em !important;
}

/* ─── Shared UI Utilities ─── */
.avatar-xs,
.avatar-sm,
.avatar,
.avatar-md,
.avatar-lg {
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-light) !important;
}

.avatar-xs {
  width: 28px !important;
  height: 28px !important;
}

.avatar-sm,
.avatar {
  width: 36px !important;
  height: 36px !important;
}

.avatar-md {
  width: 44px !important;
  height: 44px !important;
}

.avatar-lg {
  width: 150px !important;
  height: 150px !important;
}

.avatar-fallback {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  background: linear-gradient(135deg, rgba(11, 122, 117, 0.14), rgba(39, 88, 141, 0.12)) !important;
}

.btn-pill,
.btn-soft,
.btn-ghost,
.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-soft,
.btn-ghost {
  background: rgba(255, 253, 249, 0.88) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.btn-primary,
.btn-pill.is-active {
  background: linear-gradient(135deg, var(--primary), #158d87) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}

.btn-soft:hover,
.btn-ghost:hover {
  background: var(--bg-hover) !important;
}

.btn-primary:hover,
.btn-pill.is-active:hover {
  background: linear-gradient(135deg, var(--primary-hover), #0b7a75) !important;
}

.btn-pill {
  background: rgba(255, 253, 249, 0.85) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border-light) !important;
}

.btn-pill:hover {
  color: var(--text) !important;
  background: var(--bg-hover) !important;
}

.input-shell,
.search-shell input,
.search-bar input {
  background: rgba(255, 253, 249, 0.92) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
}

.search-shell input:focus,
.search-bar input:focus,
.input-shell:focus {
  border-color: rgba(39, 88, 141, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(39, 88, 141, 0.08) !important;
}

.mobile-nav a.active {
  color: var(--primary) !important;
}

/* ─── Typography ─── */
.feed-title,
.head h1,
h1,
h2 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

.feed-title,
.head h1,
h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

h2,
.panel h2,
.panel-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.status,
.post-text,
.author-meta,
.story-name,
.links a,
.trend,
.suggest,
.activity-item span,
.check-item span,
.metric-label {
  font-size: var(--text-sm) !important;
  color: var(--muted) !important;
}

.subhead {
  max-width: 42ch;
  color: var(--muted) !important;
}

/* ─── Navigation Links (Sidebar) ─── */
.nav-link,
.side a,
.m-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  background: transparent !important;
  transition: background 0.15s ease !important;
  text-decoration: none !important;
}

.nav-link:hover,
.side a:hover,
.m-link:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  transform: none !important;
  color: var(--text) !important;
}

.nav-link.active,
.side a.active,
.m-link.active {
  font-weight: 700 !important;
  background: linear-gradient(90deg, rgba(11, 122, 117, 0.14), rgba(39, 88, 141, 0.12)) !important;
  border: 1px solid rgba(39, 88, 141, 0.28) !important;
  color: #162232 !important;
}

/* ─── Navigation Icons (Material Symbols) ─── */
.nav-link::before,
.side a::before,
.m-link::before,
.mobile-nav a::before {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  font-feature-settings: 'liga' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Filled icons for active state */
.nav-link.active::before,
.side a.active::before,
.m-link.active::before,
.mobile-nav a.active::before {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
  background: none !important;
}

/* ─── Icon Assignments by href ─── */
.nav-link[href="/"]::before,
.side a[href="/"]::before,
.m-link[href="/"]::before,
.mobile-nav a[href="/"]::before { content: "home" !important; }

.nav-link[href="/explore"]::before,
.side a[href="/explore"]::before,
.m-link[href="/explore"]::before,
.mobile-nav a[href="/explore"]::before { content: "explore" !important; }

.nav-link[href="/stories"]::before,
.side a[href="/stories"]::before,
.m-link[href="/stories"]::before,
.mobile-nav a[href="/stories"]::before { content: "auto_stories" !important; }

.nav-link[href="/live"]::before,
.side a[href="/live"]::before,
.m-link[href="/live"]::before,
.mobile-nav a[href="/live"]::before { content: "videocam" !important; }

.nav-link[href="/private-chats"]::before,
.side a[href="/private-chats"]::before,
.m-link[href="/private-chats"]::before,
.mobile-nav a[href="/private-chats"]::before { content: "chat_bubble_outline" !important; }

.nav-link[href="/notifications"]::before,
.side a[href="/notifications"]::before,
.m-link[href="/notifications"]::before,
.mobile-nav a[href="/notifications"]::before { content: "notifications" !important; }

.nav-link[href="/creator"]::before,
.side a[href="/creator"]::before,
.m-link[href="/creator"]::before,
.mobile-nav a[href="/creator"]::before { content: "add_box" !important; }

.nav-link[href="/dashboard"]::before,
.side a[href="/dashboard"]::before,
.m-link[href="/dashboard"]::before,
.mobile-nav a[href="/dashboard"]::before { content: "dashboard" !important; }

.nav-link[href="/following"]::before,
.side a[href="/following"]::before,
.m-link[href="/following"]::before,
.mobile-nav a[href="/following"]::before { content: "group" !important; }

.nav-link[href*="/profile"]::before,
.side a[href*="/profile"]::before,
.m-link[href*="/profile"]::before,
.mobile-nav a[href*="/profile"]::before { content: "person" !important; }

/* Settings — must come after /profile to override the wildcard match */
.nav-link[href="/profile-settings"]::before,
.side a[href="/profile-settings"]::before,
.m-link[href="/profile-settings"]::before,
.mobile-nav a[href="/profile-settings"]::before { content: "settings" !important; }

.nav-link[href="/guidelines"]::before,
.side a[href="/guidelines"]::before,
.m-link[href="/guidelines"]::before,
.mobile-nav a[href="/guidelines"]::before { content: "verified_user" !important; }

.nav-link[href="/report"]::before,
.side a[href="/report"]::before,
.m-link[href="/report"]::before,
.mobile-nav a[href="/report"]::before { content: "flag" !important; }

.nav-link[href="/admin"]::before,
.side a[href="/admin"]::before,
.m-link[href="/admin"]::before,
.mobile-nav a[href="/admin"]::before { content: "admin_panel_settings" !important; }

.nav-link[href="#"]::before,
.side a[href="#"]::before,
.m-link[href="#"]::before,
.mobile-nav a[href="#"]::before { content: "logout" !important; }

/* Create nav link — regular nav item style */
.nav-link.create,
.quick-actions a.primary {
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
}
.nav-link.create::before,
.quick-actions a.primary::before {
  display: inline-block !important;
}

/* ─── Buttons ─── */
button,
button[type="submit"] {
  background: linear-gradient(135deg, var(--primary), #158d87) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, opacity 0.15s ease !important;
}

button:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--primary-hover), #0b7a75) !important;
  transform: none !important;
}

button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.tab {
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
}

.tab.active,
.tab:hover {
  color: var(--text) !important;
  border-bottom-color: var(--text) !important;
  background: transparent !important;
  transform: none !important;
}

.tabs {
  border-bottom: 1px solid var(--border-light) !important;
}

.act {
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}

.act:hover {
  background: var(--bg-hover) !important;
  border-color: transparent !important;
  transform: none !important;
}

.quick-actions a,
button,
.tab,
.act {
  will-change: auto !important;
}

/* ─── Search & Inputs ─── */
.search,
input,
textarea,
select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color 0.15s ease !important;
}

.search:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #a8a8a8 !important;
  outline: none !important;
}

.search::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}

/* ─── Post Cards ─── */
.post {
  background: linear-gradient(180deg, #fffdf9 0%, #fff8f0 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
}

.post-head {
  padding: 14px 16px 10px !important;
}

.post-body {
  padding: 0 16px 14px !important;
}

.post-text {
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.post-media {
  background: var(--bg) !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid var(--border-light) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.post-stats {
  color: var(--muted) !important;
  font-size: 13px !important;
}

.post-actions {
  gap: 4px !important;
}

.post-head,
.post-body,
.post-stats,
.post-actions,
.panel-card,
.metric,
.activity-item,
.check-item {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.post,
.panel-card,
.metric,
.activity-item,
.check-item {
  border-radius: var(--radius-lg) !important;
}

/* Author */
.author {
  color: var(--text) !important;
  font-weight: 600 !important;
}

.author-meta {
  color: var(--muted) !important;
}

/* ─── Stories ─── */
.story-ring {
  background: linear-gradient(140deg, #0b7a75, #27588d, #d06a3d) !important;
  padding: 2px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.story-inner {
  background: var(--bg-card) !important;
  border: 2px solid var(--bg-card) !important;
  border-radius: 50% !important;
}

.story-name {
  color: var(--text) !important;
  font-size: 12px !important;
}

.story-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Story viewer overlay */
.viewer,
.story-viewer {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
}

.viewer-shell {
  background: #000 !important;
  border-radius: var(--radius-lg) !important;
}

.viewer-nav {
  background: rgba(0, 0, 0, 0.3) !important;
}

.story-overlay {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)) !important;
}

/* ─── Metrics (Dashboard) ─── */
.metric {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

.metric-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
}

.metric-label {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ─── Panel Cards (Trending, Suggested) ─── */
.panel-card {
  background: linear-gradient(180deg, #fffdf9 0%, #fdf7ee 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
}

.panel-title {
  font-weight: 600 !important;
  color: var(--text) !important;
}

.trend,
.suggest {
  color: var(--text) !important;
}

/* ─── Status / Badge / Chip ─── */
.status,
.badge,
.warning-chip {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  color: var(--muted) !important;
}

.chip {
  background: var(--bg-hover) !important;
  border-radius: 20px !important;
  color: var(--text) !important;
}

/* ─── Pill / Filter Buttons (Explore) ─── */
.pill {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

.pill.active,
.pill:hover {
  background: linear-gradient(90deg, rgba(11, 122, 117, 0.14), rgba(39, 88, 141, 0.12)) !important;
  color: #162232 !important;
  border-color: rgba(39, 88, 141, 0.3) !important;
}

/* ─── Grid / Tiles (Explore) ─── */
.tile {
  background: #e9dfd0 !important;
  border: 1px solid rgba(39, 88, 141, 0.2) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* ─── Chat / Messages ─── */
.list-pane {
  background: var(--bg) !important;
  border-right: 1px solid var(--border) !important;
}

.messages {
  background: transparent !important;
  background-image: none !important;
}

.comment-bubble {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}

/* ─── Notification Items ─── */
.item {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ─── Following / User Rows ─── */
.row {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ─── Creator Components ─── */
.preview-wrap {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}

.notice {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--muted) !important;
}

.check {
  background: var(--bg) !important;
}

/* ─── Live Components ─── */
.hero {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-radius: var(--radius-lg) !important;
}

.gate {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

.list {
  background: var(--bg) !important;
}

.thumb {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

.live-badge {
  background: rgba(237, 73, 86, 0.12) !important;
  color: var(--err) !important;
}

.cta-row a,
.btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}

.btn.primary,
.cta-row a:first-child {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ─── Chat Item States ─── */
.chat-item:hover {
  background: var(--bg-hover) !important;
}

.chat-item.active {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}

/* ─── Message Bubbles ─── */
.msg.me {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--radius-lg) !important;
}

.msg.them {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}

/* ─── Notification States ─── */
.item.unread {
  background: rgba(0, 149, 246, 0.04) !important;
  border-left: 3px solid var(--primary) !important;
}

/* ─── Status Chips ─── */
.status-chip {
  background: rgba(0, 168, 107, 0.1) !important;
  color: var(--ok) !important;
}

.warning-chip {
  background: rgba(245, 166, 35, 0.1) !important;
  color: var(--warning) !important;
}

/* ─── Send Button ─── */
.send {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

/* ─── Mark All Read ─── */
.mark {
  background: transparent !important;
  color: var(--primary) !important;
}

/* ─── Profile-Settings Components ─── */
.preview {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}

.form {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}

/* ─── Dashboard Check Items ─── */
.check-item {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ─── Upload Drop Zone ─── */
.drop {
  border: 2px dashed var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg) !important;
  color: var(--muted) !important;
}

.drop:hover {
  border-color: var(--primary) !important;
  background: rgba(0, 149, 246, 0.04) !important;
}

/* ─── Form Elements ─── */
.group {
  color: var(--text) !important;
}

.label,
label {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* ─── Links ─── */
.links a {
  color: var(--muted) !important;
  font-size: 12px !important;
}

/* ─── Mobile Nav (Bottom Bar) ─── */
.mobile-nav {
  background: rgba(255, 253, 249, 0.9) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(20px) !important;
}

.mobile-nav a,
.mobile-nav .m-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  font-size: 0 !important;
  color: var(--text) !important;
  padding: 6px !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  border: none !important;
}

.mobile-nav a::before,
.mobile-nav .m-link::before {
  font-size: 26px !important;
  color: #262626 !important;
  -webkit-text-fill-color: #262626 !important;
}

.mobile-nav a.active::before,
.mobile-nav .m-link.active::before {
  color: #262626 !important;
  -webkit-text-fill-color: #262626 !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #c7c7c7;
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ─── Secondary / Misc Nav Links ─── */
.nav-link.secondary,
.more {
  background: transparent !important;
  color: var(--muted) !important;
}

/* ─── Disable Animations ─── */
.feed-shell,
.main,
.card,
.post,
.panel-card,
.metric,
.story-card,
.side,
.rail,
.panel,
.chat-app,
.content,
.top,
.comments {
  animation: none !important;
}

/* ─── Responsive: Tablet (≤1024px) ─── */
@media (max-width: 1024px) {
  .feed-top,
  .head,
  .feed,
  .content,
  .stories-strip {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .feed-title,
  .head h1,
  h1 {
    font-size: 20px !important;
  }
}

/* ─── Responsive: Mobile (≤860px) ─── */
@media (max-width: 860px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 0 calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg) !important;
  }

  .shell {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .rail,
  aside.panel,
  .side {
    display: none !important;
    min-height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  .feed-shell,
  .main,
  .card,
  .stage,
  .chat-app,
  .content,
  .top,
  .comments {
    border: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    min-height: auto !important;
  }

  .post {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
  }

  /* Sticky top header — Instagram mobile style */
  .feed-top,
  .head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .feed,
  .content {
    padding: 0 !important;
    gap: 0 !important;
  }

  .stories-strip {
    padding: 12px 16px !important;
    gap: 14px !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .search,
  #feed-search,
  input,
  textarea,
  select {
    width: 100% !important;
    font-size: 16px !important;
  }

  .post-actions {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important;
  }

  .post-media,
  video,
  .post-media img,
  .post img:not(.avatar):not(.post-avatar):not(.c-avatar):not(.caption-avatar):not(.preview-avatar):not([class*="avatar"]) {
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  .post-media {
    max-height: 65vh !important;
  }

  .brand {
    font-size: 22px !important;
  }

  .feed-title,
  .head h1,
  h1 {
    font-size: 20px !important;
  }

  /* Fixed bottom nav — Instagram style */
  .mobile-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80 !important;
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: repeat(6, 1fr) !important;
    background: var(--bg-card) !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 0 !important;
  }

  .mobile-nav a,
  .mobile-nav .m-link {
    min-height: 44px !important;
    padding: 6px !important;
    border-radius: 0 !important;
  }

  /* Explore grid on mobile */
  .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
  }

  .tile {
    border-radius: 0 !important;
  }

  .story-card {
    border-radius: var(--radius) !important;
  }

  .metric {
    border-radius: var(--radius) !important;
  }

  /* Mobile header action icons */
  .mobile-actions {
    display: flex !important;
  }
}

/* ─── Mobile Header Actions ─── */
.mobile-actions {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.mobile-actions a.mobile-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  color: var(--text);
  border-radius: 50%;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.mobile-actions a.mobile-action-icon:active {
  background: var(--bg-hover);
}

.mobile-actions .material-symbols-outlined {
  font-size: 26px;
}

.mobile-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background: #ff5577 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  min-width: 16px !important;
  text-align: center !important;
  line-height: 16px !important;
}

/* Hamburger more button */
.mobile-more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  padding: 0;
}

.mobile-more:active {
  background: var(--bg-hover);
}

/* Dropdown menu */
.mobile-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 190px;
  z-index: 200;
  overflow: hidden;
}

.mobile-more.open .mobile-more-menu {
  display: block;
}

.mobile-more-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-more-menu a:active,
.mobile-more-menu a:hover {
  background: var(--bg-hover);
}

.mobile-more-menu .material-symbols-outlined {
  font-size: 22px;
  color: var(--muted);
}

/* Backdrop overlay for closing menu */
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
}

.mobile-menu-backdrop.open {
  display: block;
}

/* ─── Small Mobile (≤480px) ─── */
@media (max-width: 480px) {
  :root {
    --text-sm: 12px !important;
  }

  .brand {
    font-size: 20px !important;
  }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Creator Modal Overlay (inline post creator)
   ═══════════════════════════════════════════════════════════ */
.creator-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: cmFadeIn .2s ease;
}
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.creator-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  background: var(--bg-card, #fffdf9);
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: cmSlideUp .25s ease;
}
@keyframes cmSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Top bar */
.cm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light, #eadfce);
  flex-shrink: 0;
}
.cm-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text, #1f2733);
  border-radius: 50%;
}
.cm-back:active { background: var(--bg-hover, #f3ece2); }
.cm-back .material-symbols-outlined { font-size: 24px; }
.cm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #1f2733);
}
.cm-share {
  border: none;
  background: none;
  color: var(--primary, #0b7a75);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 4px;
}
.cm-share:disabled { opacity: 0.4; cursor: default; }

/* Media preview */
.cm-media {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  flex: 1;
  overflow: visible;
}
.cm-media-el {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Caption overlaid on the image */
.cm-caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  padding: 48px 16px 14px;
  z-index: 2;
  pointer-events: none;
}
.cm-caption {
  width: 100% !important;
  border: none !important;
  background: none !important;
  resize: none;
  font-family: inherit;
  font-size: 15px !important;
  color: #fff !important;
  outline: none !important;
  line-height: 1.5;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: auto;
  padding: 0 !important;
  border-radius: 0 !important;
}
.cm-caption::placeholder { color: rgba(255,255,255,0.7) !important; }
.cm-caption:focus { border-color: transparent !important; }
.cm-count {
  position: absolute;
  bottom: 4px;
  right: 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  z-index: 3;
}

/* Status */
.cm-status:empty { display: none; }
.cm-status {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.cm-status.error { color: var(--err, #cc3a3a); background: rgba(204,58,58,0.06); }
.cm-status.success { color: var(--ok, #00a86b); background: rgba(0,168,107,0.06); }

/* Publishing spinner overlay */
.cm-publishing {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: var(--radius-lg, 18px);
}
.cm-publishing.active { display: flex; }
.cm-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border, #d7c6ad);
  border-top-color: var(--primary, #0b7a75);
  border-radius: 50%;
  animation: cmSpin .7s linear infinite;
}
@keyframes cmSpin { to { transform: rotate(360deg); } }
.cm-pub-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1f2733);
}

/* Mobile: full-screen modal */
@media (max-width: 860px) {
  .creator-modal-overlay { padding: 0; align-items: stretch; }
  .creator-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .cm-publishing { border-radius: 0; }
}