/* ═══════════════════════════════════════════════════════════
   JAMBONA — Shared Design System
   One Continent. One Network.
   v1.0 — April 2026
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Primitive Palette ── */
:root {
  --color-obsidian:       #0D0D0D;
  --color-coffee-deep:    #3B1F0E;
  --color-coffee-mid:     #6B3A1F;
  --color-coffee-warm:    #8B5E3C;
  --color-khaki:          #C8B89A;
  --color-beige:          #F5EDD6;
  --color-cream:          #FAF5EC;
  --color-sand:           #9C8670;
  --color-success:        #3A7D44;
  --color-warning:        #C97D2E;
  --color-error:          #B03A2E;
  --color-info:           #2E6B8B;

  /* Overlays & Shadows */
  --color-overlay-light:  rgba(250,245,236,0.92);
  --color-overlay-dark:   rgba(13,13,13,0.72);
  --shadow-card:          0 2px 8px rgba(59,31,14,0.08);
  --shadow-elevated:      0 8px 24px rgba(59,31,14,0.14);
  --shadow-modal:         0 20px 60px rgba(13,13,13,0.24);

  /* ── Semantic Tokens ── */
  --bg-page:              var(--color-cream);
  --bg-surface:           var(--color-beige);
  --bg-surface-raised:    #FFFFFF;
  --bg-nav:               var(--color-coffee-deep);
  --bg-input:             var(--color-cream);
  --text-primary:         var(--color-obsidian);
  --text-secondary:       var(--color-sand);
  --text-muted:           var(--color-khaki);
  --text-inverse:         var(--color-cream);
  --text-link:            var(--color-coffee-warm);
  --text-link-hover:      var(--color-coffee-mid);
  --border-default:       var(--color-khaki);
  --border-strong:        var(--color-coffee-mid);
  --border-subtle:        rgba(200,184,154,0.4);
  --border-focus:         var(--color-coffee-warm);
  --interactive-primary:        var(--color-coffee-deep);
  --interactive-primary-hover:  var(--color-coffee-mid);
  --interactive-primary-text:   var(--color-cream);
  --interactive-secondary-border: var(--color-khaki);
  --interactive-secondary-text: var(--color-coffee-mid);
  --interactive-ghost-hover:    var(--color-beige);
  --status-success-bg:    rgba(58,125,68,0.10);
  --status-success-text:  #3A7D44;
  --status-warning-bg:    rgba(201,125,46,0.10);
  --status-warning-text:  #C97D2E;
  --status-error-bg:      rgba(176,58,46,0.10);
  --status-error-text:    #B03A2E;
  --status-info-bg:       rgba(46,107,139,0.10);
  --status-info-text:     #2E6B8B;

  /* ── Spacing Scale (4px base) ── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* ── Type Scale ── */
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem;
  --text-4xl:3rem; --text-5xl:3.75rem; --text-6xl:4.5rem;

  /* ── Fonts ── */
  --font-display: 'Cormorant Garamond','Georgia',serif;
  --font-heading: 'DM Serif Display','Georgia',serif;
  --font-body:    'Plus Jakarta Sans','Arial',sans-serif;
  --font-mono:    'JetBrains Mono','Courier New',monospace;

  /* ── Border Radius ── */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-full:9999px;

  /* ── Icon Sizes ── */
  --icon-xs:12px; --icon-sm:16px; --icon-md:20px;
  --icon-lg:24px; --icon-xl:32px; --icon-2xl:48px;

  /* ── Animation ── */
  --duration-instant:80ms; --duration-fast:150ms; --duration-base:200ms;
  --duration-slow:350ms; --duration-enter:400ms;
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-decelerate:cubic-bezier(0,0,0.2,1);
  --ease-accelerate:cubic-bezier(0.4,0,1,1);
  --ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);

  /* ── Breakpoints (reference only) ── */
  --bp-xs:375px; --bp-sm:640px; --bp-md:768px;
  --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --bg-page:           #1A0F07;
  --bg-surface:        #231409;
  --bg-surface-raised: #2E1A0C;
  --bg-nav:            #0F0804;
  --text-primary:      #F5EDD6;
  --text-secondary:    #C8B89A;
  --text-muted:        #8B7355;
  --border-default:    rgba(200,184,154,0.15);
  --border-subtle:     rgba(200,184,154,0.08);
  --bg-input:          #2E1A0C;
  --shadow-card:       0 2px 12px rgba(0,0,0,0.4);
  --shadow-elevated:   0 8px 32px rgba(0,0,0,0.6);
}

/* ─────────────────────────────────────────────────────────────
   BASE RESET & GLOBALS
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }
img { display: block; max-width: 100%; }
button { font-family: var(--font-body); cursor: pointer; }
input, textarea, select { font-family: var(--font-body); }

/* ── Skip Link ── */
.skip-link {
  position: absolute; top: -100%; left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-coffee-deep); color: var(--color-cream);
  border-radius: var(--radius-md); z-index: 9999;
  transition: top var(--duration-fast);
  font-size: var(--text-sm); font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

/* ── Focus ── */
:focus-visible {
  outline: 2px solid var(--color-coffee-warm);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY CLASSES
───────────────────────────────────────────────────────────── */
.type-wordmark {
  font-family: var(--font-display); font-size: var(--text-6xl);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-coffee-deep); line-height: 1;
}
.type-hero {
  font-family: var(--font-display); font-size: var(--text-5xl);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
}
.type-h1 {
  font-family: var(--font-heading); font-size: var(--text-3xl);
  font-weight: 400; line-height: 1.2; color: var(--text-primary);
}
.type-h2 {
  font-family: var(--font-heading); font-size: var(--text-2xl);
  font-weight: 400; line-height: 1.25; color: var(--color-coffee-mid);
}
.type-h3 {
  font-family: var(--font-heading); font-size: var(--text-xl);
  font-weight: 400; line-height: 1.3; color: var(--color-coffee-warm);
}
.type-body-lg { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: 1.7; }
.type-body    { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.65; }
.type-body-sm { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
.type-label {
  font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);
}
.type-meta  { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }
.type-mono  { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.02em; }

/* ─────────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────────── */
.layout-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-8); }
.layout-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--space-6); }

.layout-app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
@media (min-width: 1280px) {
  .layout-app { grid-template-columns: 260px 1fr 320px; }
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600;
  border-radius: var(--radius-md); border: none; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn-primary {
  padding: 10px var(--space-6);
  background: var(--interactive-primary);
  color: var(--interactive-primary-text);
  font-size: var(--text-sm); min-height: 44px;
}
.btn-primary:hover { background: var(--interactive-primary-hover); color: var(--interactive-primary-text); }

.btn-secondary {
  padding: 10px var(--space-6);
  background: transparent;
  color: var(--interactive-secondary-text);
  font-size: var(--text-sm); min-height: 44px;
  border: 1.5px solid var(--interactive-secondary-border);
}
.btn-secondary:hover { background: var(--interactive-ghost-hover); border-color: var(--color-coffee-mid); }

.btn-ghost {
  padding: 8px var(--space-4);
  background: transparent; color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: 500; min-height: 40px;
}
.btn-ghost:hover { background: var(--interactive-ghost-hover); color: var(--text-primary); }

.btn-danger {
  padding: 10px var(--space-6);
  background: var(--status-error-bg);
  color: var(--status-error-text);
  font-size: var(--text-sm); min-height: 44px;
  border: 1.5px solid var(--status-error-text);
}
.btn-danger:hover { background: var(--color-error); color: white; }

.btn-sm  { padding: 6px var(--space-4);  min-height: 36px; font-size: var(--text-xs); }
.btn-md  { padding: 10px var(--space-6); min-height: 44px; font-size: var(--text-sm); }
.btn-lg  { padding: 14px var(--space-8); min-height: 52px; font-size: var(--text-base); }

.btn-icon {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: none;
  background: transparent; color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-standard);
  cursor: pointer;
}
.btn-icon:hover { background: var(--interactive-ghost-hover); color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────
   INPUTS
───────────────────────────────────────────────────────────── */
.input {
  display: block; width: 100%;
  padding: 10px var(--space-4);
  background: var(--bg-input); color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--text-base);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md); outline: none; min-height: 44px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.input::placeholder { color: var(--text-muted); }
.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(139,94,60,0.15); }
.input:disabled { background: var(--color-beige); color: var(--text-muted); cursor: not-allowed; }
.input--error { border-color: var(--status-error-text); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(176,58,46,0.15); }

.input-group { display: flex; flex-direction: column; gap: var(--space-2); }
.input-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.input-helper { font-size: var(--text-xs); color: var(--text-secondary); }
.input-error-text { font-size: var(--text-xs); color: var(--status-error-text); }

select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239C8670' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }

textarea.input { resize: vertical; min-height: 120px; }

/* ─────────────────────────────────────────────────────────────
   CARDS
───────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }

/* Member Card */
.member-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: grid; grid-template-columns: 56px 1fr;
  gap: var(--space-4); align-items: start; cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  text-decoration: none; color: inherit;
}
.member-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
.member-card__name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.member-card__title { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.member-card__meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Publication Card */
.pub-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
  cursor: pointer; text-decoration: none; color: inherit;
}
.pub-card:hover { box-shadow: var(--shadow-elevated); }
.pub-card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 400; line-height: 1.3; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-card__abstract { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Event Card */
.event-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--color-coffee-warm);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: grid; grid-template-columns: 64px 1fr;
  gap: var(--space-4); align-items: start;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.event-card:hover { box-shadow: var(--shadow-elevated); }
.event-card__date-block { background: var(--color-coffee-deep); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); text-align: center; display: flex; flex-direction: column; align-items: center; }
.event-card__date-day { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-cream); line-height: 1; }
.event-card__date-month { font-size: var(--text-xs); font-weight: 600; color: var(--color-khaki); text-transform: uppercase; letter-spacing: 0.08em; }

/* ─────────────────────────────────────────────────────────────
   AVATAR
───────────────────────────────────────────────────────────── */
.avatar {
  border-radius: var(--radius-full); object-fit: cover;
  background: var(--color-beige); display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600;
  color: var(--color-coffee-deep); flex-shrink: 0;
  overflow: hidden;
}
.avatar--xs  { width: 24px;  height: 24px;  font-size: 10px; }
.avatar--sm  { width: 32px;  height: 32px;  font-size: 12px; }
.avatar--md  { width: 40px;  height: 40px;  font-size: 14px; }
.avatar--lg  { width: 56px;  height: 56px;  font-size: 18px; }
.avatar--xl  { width: 80px;  height: 80px;  font-size: 24px; }
.avatar--2xl { width: 120px; height: 120px; font-size: 36px; }

/* ─────────────────────────────────────────────────────────────
   BADGES & TAGS
───────────────────────────────────────────────────────────── */
.badge-verified {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; background: rgba(59,31,14,0.08);
  border: 1px solid rgba(59,31,14,0.2); border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; color: var(--color-coffee-deep);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; background: rgba(139,94,60,0.10);
  border-radius: var(--radius-full); font-size: var(--text-xs);
  font-weight: 500; color: var(--color-coffee-warm); white-space: nowrap;
}
.tag--country { background: rgba(200,184,154,0.20); color: var(--color-coffee-mid); }
.tag--category { background: rgba(46,107,139,0.10); color: var(--color-info); }
.tag--success { background: var(--status-success-bg); color: var(--status-success-text); }
.tag--warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.tag--error   { background: var(--status-error-bg);   color: var(--status-error-text); }
.tag--info    { background: var(--status-info-bg);    color: var(--status-info-text); }

/* ─────────────────────────────────────────────────────────────
   NAVIGATION — SIDEBAR
───────────────────────────────────────────────────────────── */
.sidebar {
  width: 260px; height: 100vh; position: sticky; top: 0;
  background: var(--bg-nav); display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-4); gap: var(--space-1);
  overflow-y: auto; z-index: 100; border-right: 1px solid rgba(200,184,154,0.08);
}
.sidebar__logo { padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.sidebar__logo-text { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-cream); line-height: 1; }
.sidebar__nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  color: rgba(250,245,236,0.65); font-size: var(--text-base); font-weight: 500;
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}
.sidebar__nav-item:hover { background: rgba(250,245,236,0.08); color: var(--color-cream); }
.sidebar__nav-item--active { background: rgba(250,245,236,0.12); color: var(--color-cream); font-weight: 600; }
.sidebar__nav-item svg { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.sidebar__divider { height: 1px; background: rgba(200,184,154,0.15); margin: var(--space-2) var(--space-4); }
.sidebar__label { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(200,184,154,0.5); }
.sidebar__footer { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid rgba(200,184,154,0.15); }

/* ─────────────────────────────────────────────────────────────
   NAVIGATION — BOTTOM (MOBILE)
───────────────────────────────────────────────────────────── */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: 64px; background: var(--bg-nav);
  border-top: 1px solid rgba(200,184,154,0.15); z-index: 100;
  padding: 0 var(--space-4); padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__items { display: flex; align-items: center; justify-content: space-around; height: 100%; }
.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--space-2); color: rgba(250,245,236,0.55);
  font-size: 10px; font-weight: 500; transition: color var(--duration-fast) var(--ease-standard);
  cursor: pointer; min-width: 48px; text-decoration: none;
}
.bottom-nav__item svg { width: 20px; height: 20px; }
.bottom-nav__item--active { color: var(--color-cream); }

@media (max-width: 767px) {
  .bottom-nav { display: flex; }
  .sidebar     { display: none; }
  body { padding-bottom: 80px; }
}

/* ─────────────────────────────────────────────────────────────
   TOP NAV (Public pages)
───────────────────────────────────────────────────────────── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px; transition: background var(--duration-base) var(--ease-standard),
                            box-shadow var(--duration-base) var(--ease-standard);
}
.topnav--transparent { background: transparent; }
.topnav--solid { background: var(--bg-nav); box-shadow: 0 1px 0 rgba(200,184,154,0.15); }
.topnav__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--space-8);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.topnav__logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-cream); text-decoration: none; }
.topnav__actions { display: flex; align-items: center; gap: var(--space-3); }

/* ─────────────────────────────────────────────────────────────
   MODAL
───────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--color-overlay-dark);
  z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); animation: fade-in 200ms var(--ease-decelerate);
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--bg-surface-raised); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal); width: 100%; max-width: 560px;
  max-height: calc(100vh - var(--space-16)); overflow-y: auto;
  padding: var(--space-8); animation: scale-in 220ms var(--ease-spring);
}
.modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.modal__title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────
   SKELETON LOADERS
───────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-beige) 0%, rgba(245,237,214,0.4) 50%, var(--color-beige) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.4s ease infinite;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #231409 0%, rgba(46,26,12,0.4) 50%, #231409 100%);
  background-size: 200% 100%;
}
.skeleton--text    { height: 16px; }
.skeleton--heading { height: 28px; }
.skeleton--avatar  { border-radius: var(--radius-full); }
.skeleton--card    { border-radius: var(--radius-lg); }

/* ─────────────────────────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--space-16) var(--space-8); gap: var(--space-4);
}
.empty-state__icon { color: var(--color-khaki); opacity: 0.6; }
.empty-state__heading { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--text-secondary); }
.empty-state__body { font-size: var(--text-sm); color: var(--text-muted); max-width: 40ch; }

/* ─────────────────────────────────────────────────────────────
   TOASTS
───────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: var(--space-6); left: var(--space-6);
  z-index: 500; display: flex; flex-direction: column-reverse; gap: var(--space-3);
}
@media (max-width: 767px) {
  .toast-container { left: 50%; transform: translateX(-50%); bottom: 80px; align-items: center; }
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-coffee-deep); color: var(--color-cream);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated);
  max-width: 360px; animation: slide-in-left var(--duration-enter) var(--ease-decelerate);
  font-size: var(--text-sm);
}
.toast--success { border-left: 4px solid var(--status-success-text); }
.toast--warning { border-left: 4px solid var(--status-warning-text); }
.toast--error   { border-left: 4px solid var(--status-error-text); }
.toast--info    { border-left: 4px solid var(--status-info-text); }
.toast__dismiss { margin-left: auto; cursor: pointer; opacity: 0.6; background: none; border: none; color: inherit; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   PAGE HEADER
───────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-6) 0; margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.page-header__title { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--text-primary); }
.page-header__subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1); }

/* ─────────────────────────────────────────────────────────────
   FILTERS BAR
───────────────────────────────────────────────────────────── */
.filters-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 0; margin-bottom: var(--space-6);
}
.filter-pill {
  display: inline-flex; align-items: center; padding: 6px 16px;
  border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; border: 1.5px solid var(--border-default);
  background: transparent; color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-standard);
}
.filter-pill:hover { border-color: var(--color-coffee-warm); color: var(--color-coffee-warm); }
.filter-pill--active { background: var(--color-coffee-deep); color: var(--color-cream); border-color: var(--color-coffee-deep); }

/* ─────────────────────────────────────────────────────────────
   SEARCH INPUT
───────────────────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 18px; height: 18px; pointer-events: none; }
.search-input { padding-left: 44px !important; }

/* ─────────────────────────────────────────────────────────────
   TABS
───────────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 2px solid var(--border-subtle); margin-bottom: var(--space-6); }
.tab-item {
  padding: var(--space-3) var(--space-5); font-weight: 500; font-size: var(--text-sm);
  color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color var(--duration-fast), border-color var(--duration-fast);
  white-space: nowrap;
}
.tab-item:hover { color: var(--color-coffee-warm); }
.tab-item--active { color: var(--color-coffee-deep); border-bottom-color: var(--color-coffee-deep); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel--active { display: block; }

/* ─────────────────────────────────────────────────────────────
   DIVIDERS
───────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border-subtle); margin: var(--space-6) 0; }

/* ─────────────────────────────────────────────────────────────
   MAIN CONTENT AREA
───────────────────────────────────────────────────────────── */
.main-content {
  padding: var(--space-6) var(--space-8);
  min-height: 100vh; overflow-y: auto;
}
@media (max-width: 767px) {
  .main-content { padding: var(--space-4); }
}

.right-rail {
  padding: var(--space-6) var(--space-6);
  border-left: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  min-height: 100vh;
}
@media (max-width: 1279px) { .right-rail { display: none; } }

/* ─────────────────────────────────────────────────────────────
   GRID UTILITIES
───────────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   STAT CARD
───────────────────────────────────────────────────────────── */
.stat-card { text-align: center; padding: var(--space-6); }
.stat-card__number { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; color: var(--color-coffee-deep); line-height: 1; }
.stat-card__label  { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; }

/* ─────────────────────────────────────────────────────────────
   NOTIFICATION ITEM
───────────────────────────────────────────────────────────── */
.notif-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  transition: background var(--duration-fast);
  cursor: pointer; text-decoration: none; color: inherit;
}
.notif-item:hover { background: var(--bg-surface); }
.notif-item--unread { background: rgba(139,94,60,0.06); }
.notif-item--unread::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-coffee-warm); flex-shrink: 0; margin-top: 6px; }
.notif-item__body { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5; }
.notif-item__time { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────
   ADMIN LAYOUT
───────────────────────────────────────────────────────────── */
.admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-sidebar {
  width: 240px; height: 100vh; position: sticky; top: 0;
  background: #1A0F07; border-right: 1px solid rgba(200,184,154,0.1);
  display: flex; flex-direction: column; padding: var(--space-6) var(--space-4);
  overflow-y: auto; z-index: 100;
}
.admin-sidebar__logo { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-cream); margin-bottom: var(--space-6); padding: var(--space-2) var(--space-4); }
.admin-sidebar__label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200,184,154,0.4); padding: var(--space-4) var(--space-4) var(--space-2); }
.admin-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  color: rgba(250,245,236,0.6); font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; transition: all var(--duration-fast);
}
.admin-nav-item:hover { background: rgba(250,245,236,0.08); color: var(--color-cream); }
.admin-nav-item--active { background: rgba(250,245,236,0.12); color: var(--color-cream); font-weight: 600; }
.admin-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.admin-main { padding: var(--space-8); overflow-y: auto; min-height: 100vh; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.admin-title { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--text-primary); }

/* Admin stat card */
.admin-stat {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.admin-stat__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--color-coffee-deep); line-height: 1; }
.admin-stat__label { font-size: var(--text-sm); color: var(--text-secondary); }
.admin-stat__trend { font-size: var(--text-xs); display: flex; align-items: center; gap: 4px; }
.admin-stat__trend--up { color: var(--status-success-text); }
.admin-stat__trend--down { color: var(--status-error-text); }

/* Admin table */
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
  border-bottom: 2px solid var(--border-subtle); white-space: nowrap;
}
.admin-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(139,94,60,0.04); }
.admin-table tr:last-child td { border-bottom: none; }

/* ─────────────────────────────────────────────────────────────
   TOGGLE SWITCH
───────────────────────────────────────────────────────────── */
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: var(--space-3); }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle__track { width: 44px; height: 24px; background: var(--border-default); border-radius: var(--radius-full); transition: background var(--duration-fast); position: relative; flex-shrink: 0; }
.toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform var(--duration-fast) var(--ease-spring); }
.toggle input:checked ~ .toggle__track { background: var(--color-coffee-warm); }
.toggle input:checked ~ .toggle__track::after { transform: translateX(20px); }
.toggle__label { font-size: var(--text-sm); color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-link); }
.breadcrumb__sep { color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────
   COVER / HERO PATTERN
───────────────────────────────────────────────────────────── */
.profile-cover {
  height: 200px; background: var(--color-beige);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(200,184,154,0.15) 10px, rgba(200,184,154,0.15) 20px);
  position: relative; overflow: hidden;
}
.profile-cover--dark { background: var(--color-coffee-deep); }

/* ─────────────────────────────────────────────────────────────
   FORM SECTIONS
───────────────────────────────────────────────────────────── */
.form-section { margin-bottom: var(--space-8); }
.form-section__title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--text-primary); margin-bottom: var(--space-2); }
.form-section__desc { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-6); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 639px) { .form-row { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────────────────────────── */
@keyframes fade-in        { from { opacity: 0; }                            to { opacity: 1; } }
@keyframes slide-up       { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-left  { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scale-in       { from { opacity: 0; transform: scale(0.95); }    to { opacity: 1; transform: scale(1); } }
@keyframes shimmer        { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse-affirm   { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* Stagger utility */
.stagger-1 { animation-delay: 40ms; }
.stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 120ms; }
.stagger-4 { animation-delay: 160ms; }
.stagger-5 { animation-delay: 200ms; }
.stagger-6 { animation-delay: 240ms; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────────────────────── */
.hidden       { display: none !important; }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.flex-wrap    { flex-wrap: wrap; }
.w-full       { width: 100%; }
.mt-1         { margin-top: var(--space-1); }
.mt-2         { margin-top: var(--space-2); }
.mt-4         { margin-top: var(--space-4); }
.mt-6         { margin-top: var(--space-6); }
.mb-2         { margin-bottom: var(--space-2); }
.mb-4         { margin-bottom: var(--space-4); }
.mb-6         { margin-bottom: var(--space-6); }
.mb-8         { margin-bottom: var(--space-8); }
.p-4          { padding: var(--space-4); }
.p-6          { padding: var(--space-6); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-lg   { border-radius: var(--radius-lg); }
.border       { border: 1px solid var(--border-subtle); }
.bg-surface   { background: var(--bg-surface); }
.section-title { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--text-primary); margin-bottom: var(--space-6); }
.page-section { padding: var(--space-12) 0; }

/* ── Logo image helpers ── */
/* Footer uses logo_black.png on light bg — invert in dark mode */
[data-theme="dark"] .footer-logo { filter: brightness(0) invert(1); }
/* Sidebar logos are already logo_white.png — no inversion needed */

/* ═══════════════════════════════════════════════════════════
   GRADIENT SYSTEM — App Feel Upgrade
   ═══════════════════════════════════════════════════════════ */
:root {
  --gradient-primary:     linear-gradient(135deg, #3B1F0E 0%, #8B5E3C 100%);
  --gradient-warm:        linear-gradient(135deg, #6B3A1F 0%, #C97D2E 100%);
  --gradient-accent:      linear-gradient(135deg, #8B5E3C 0%, #C97D2E 60%, #E09040 100%);
  --gradient-hero:        linear-gradient(160deg, #3B1F0E 0%, #6B3A1F 55%, #8B5E3C 100%);
  --gradient-story-ring:  linear-gradient(135deg, #C97D2E 0%, #8B5E3C 50%, #3B1F0E 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(139,94,60,0.3), rgba(201,125,46,0.15));
}

/* Gradient primary button */
.btn-gradient {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-6); min-height: 44px;
  background: var(--gradient-primary); color: var(--color-cream);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 4px 16px rgba(59,31,14,0.30);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard),
              box-shadow var(--duration-fast);
}
.btn-gradient:hover  { opacity: 0.9; color: var(--color-cream); box-shadow: 0 6px 20px rgba(59,31,14,0.40); }
.btn-gradient:active { transform: scale(0.97); }
.btn-gradient.btn-sm { padding: 6px var(--space-4); min-height: 36px; font-size: var(--text-xs); }
.btn-gradient.btn-lg { padding: 14px var(--space-8); min-height: 52px; font-size: var(--text-base); }

/* Upgrade .btn-primary to gradient */
.btn-primary {
  background: var(--gradient-primary);
  box-shadow: 0 3px 12px rgba(59,31,14,0.22);
}
.btn-primary:hover {
  background: var(--gradient-primary);
  opacity: 0.9;
  box-shadow: 0 5px 18px rgba(59,31,14,0.32);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE APP HEADER (hidden on desktop, sticky on mobile)
───────────────────────────────────────────────────────────── */
.mobile-header {
  display: none;
  position: sticky; top: 0; z-index: 200;
  background: var(--bg-nav);
  padding: 10px var(--space-4); min-height: 50px;
  align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(200,184,154,0.10);
}
@media (max-width: 767px) { .mobile-header { display: flex; } }
.mobile-header__logo { height: 22px; width: auto; display: block; }
.mobile-header__actions { display: flex; gap: 4px; }
.mobile-header .btn-icon { color: rgba(250,245,236,0.7); width: 38px; height: 38px; }
.mobile-header .btn-icon:hover { background: rgba(250,245,236,0.10); color: var(--color-cream); }

/* ─────────────────────────────────────────────────────────────
   FEED TABS
───────────────────────────────────────────────────────────── */
.feed-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-page);
  position: sticky; top: 0; z-index: 100;
}
@media (max-width: 767px) { .feed-tabs { top: 50px; } }
.feed-tab {
  flex: 1; padding: var(--space-4) var(--space-6);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary); background: transparent;
  border: none; border-bottom: 3px solid transparent;
  cursor: pointer; margin-bottom: -1px;
  transition: color var(--duration-fast), border-color var(--duration-fast);
  min-height: 48px;
}
.feed-tab:hover { color: var(--text-primary); }
.feed-tab--active {
  color: var(--color-coffee-deep);
  border-bottom-color: var(--color-coffee-warm);
}
[data-theme="dark"] .feed-tab--active { color: var(--color-khaki); border-bottom-color: var(--color-coffee-warm); }

/* ─────────────────────────────────────────────────────────────
   STORY ROW
───────────────────────────────────────────────────────────── */
.story-row {
  display: flex; gap: var(--space-4); overflow-x: auto;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  scrollbar-width: none; -ms-overflow-style: none;
}
.story-row::-webkit-scrollbar { display: none; }
.story-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  cursor: pointer; flex-shrink: 0; text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.story-item:hover { transform: scale(1.06); }
.story-item__label {
  font-size: 11px; color: var(--text-secondary); text-align: center;
  max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.story-ring {
  padding: 3px; border-radius: 50%;
  background: var(--gradient-story-ring);
  display: flex; align-items: center; justify-content: center;
}
.story-ring--seen { background: var(--border-subtle); }
.story-ring--self {
  background: var(--border-subtle);
  position: relative;
}
.story-ring--self::after {
  content: '+'; position: absolute; bottom: -1px; right: -1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gradient-primary); color: white;
  font-size: 13px; font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--bg-page);
}
.story-ring .avatar { border: 2px solid var(--bg-page); }

/* ─────────────────────────────────────────────────────────────
   COMPOSE BOX
───────────────────────────────────────────────────────────── */
.compose-box {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 768px) {
  .compose-box {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-card);
  }
}
.compose-input {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-primary); resize: none; padding: var(--space-2) 0;
  line-height: 1.6; min-height: 64px;
}
.compose-input::placeholder { color: var(--text-muted); }
.compose-divider { height: 1px; background: var(--border-subtle); margin: var(--space-3) 0; }
.compose-actions {
  display: flex; align-items: center; justify-content: space-between;
}
.compose-media-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: transparent; border: none; cursor: pointer;
  color: var(--color-coffee-warm);
  transition: background var(--duration-fast);
}
.compose-media-btn svg { width: 18px; height: 18px; }
.compose-media-btn:hover { background: rgba(139,94,60,0.10); }

/* ─────────────────────────────────────────────────────────────
   POST CARD
───────────────────────────────────────────────────────────── */
.post-card {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
  transition: background var(--duration-fast) var(--ease-standard);
  cursor: pointer; text-decoration: none; display: block; color: inherit;
}
.post-card:hover { background: rgba(139,94,60,0.025); color: inherit; }
@media (min-width: 768px) {
  .post-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3);
  }
  .post-card:hover { box-shadow: var(--shadow-card); }
}
.post-card__header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.post-card__author-info { flex: 1; min-width: 0; }
.post-card__name-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.post-card__author { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.post-card__handle { font-size: var(--text-xs); color: var(--text-muted); }
.post-card__dot { font-size: var(--text-xs); color: var(--text-muted); }
.post-card__time { font-size: var(--text-xs); color: var(--text-muted); }
.post-card__body { font-size: var(--text-base); color: var(--text-primary); line-height: 1.65; margin-bottom: var(--space-3); }
.post-card__tag {
  display: inline-block; padding: 3px 12px;
  background: rgba(139,94,60,0.08); border-radius: var(--radius-full);
  font-size: var(--text-xs); color: var(--color-coffee-warm);
  font-weight: 500; margin-bottom: var(--space-3);
}
.post-card__image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-3); }
.post-card__image img { width: 100%; max-height: 400px; object-fit: cover; }

/* ─────────────────────────────────────────────────────────────
   POST ACTIONS
───────────────────────────────────────────────────────────── */
.post-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-2); margin-top: var(--space-1);
}
.post-action {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px; border-radius: var(--radius-full);
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 500;
  transition: all var(--duration-fast) var(--ease-standard);
  min-height: 36px;
}
.post-action svg { width: 17px; height: 17px; flex-shrink: 0; }
.post-action:hover { background: rgba(139,94,60,0.08); color: var(--color-coffee-warm); }
.post-action--like:hover  { color: #E0245E; background: rgba(224,36,94,0.08); }
.post-action--like.liked  { color: #E0245E; }
.post-action--like.liked svg { fill: #E0245E; stroke: #E0245E; }
.post-action--comment:hover { color: var(--color-info);    background: rgba(46,107,139,0.08); }
.post-action--repost:hover  { color: var(--color-success); background: rgba(58,125,68,0.08); }
.post-action--share:hover   { color: var(--color-coffee-warm); background: rgba(139,94,60,0.08); }
@keyframes like-pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.45)} }
.post-action--like.liked svg { animation: like-pop 0.28s var(--ease-spring); }

/* ─────────────────────────────────────────────────────────────
   FLOATING ACTION BUTTON (mobile compose)
───────────────────────────────────────────────────────────── */
.fab {
  position: fixed;
  bottom: calc(64px + var(--space-4));
  right: var(--space-4);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-cream); border: none; cursor: pointer;
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(59,31,14,0.40);
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast);
}
.fab svg { width: 24px; height: 24px; }
.fab:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(59,31,14,0.50); }
.fab:active { transform: scale(0.94); }
@media (max-width: 767px) { .fab { display: flex; } }

/* ─────────────────────────────────────────────────────────────
   FEED LAYOUT WRAPPER
───────────────────────────────────────────────────────────── */
.feed-layout {
  max-width: 620px; margin: 0 auto;
}
@media (max-width: 767px) { .feed-layout { max-width: 100%; } }

/* Empty feed state */
.feed-empty {
  text-align: center; padding: var(--space-16) var(--space-8);
  color: var(--text-secondary);
}
.feed-empty svg { width: 48px; height: 48px; color: var(--text-muted); margin: 0 auto var(--space-4); }
.feed-empty__title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--text-primary); margin-bottom: var(--space-2); }

/* ─────────────────────────────────────────────────────────────
   ENHANCED BOTTOM NAV (gradient active indicator)
───────────────────────────────────────────────────────────── */
.bottom-nav__item--active {
  color: var(--color-coffee-warm) !important;
}
.bottom-nav__item--active svg {
  filter: drop-shadow(0 0 5px rgba(139,94,60,0.55));
}
.bottom-nav__item--active span {
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   GRADIENT CARD ACCENT
───────────────────────────────────────────────────────────── */
.card-gradient-border {
  position: relative; overflow: hidden;
}
.card-gradient-border::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--gradient-card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   GRADIENT AVATAR (story-style ring for profile)
───────────────────────────────────────────────────────────── */
.avatar--gradient-ring {
  padding: 3px;
  background: var(--gradient-story-ring);
  border-radius: 50%;
}
.avatar--gradient-ring .avatar {
  border: 2px solid var(--bg-page);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE SAFE AREA (bottom nav)
───────────────────────────────────────────────────────────── */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 767px) {
  .main-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Dark mode overrides for new components */
[data-theme="dark"] .compose-box { border-color: var(--border-default); }
[data-theme="dark"] .post-card:hover { background: rgba(255,255,255,0.025); }
[data-theme="dark"] .fab { box-shadow: 0 6px 24px rgba(0,0,0,0.6); }