/* ═══════════════ KICK STANDS UP — Main Stylesheet ═══════════════ */

:root {
  --chrome: #C0C0C0;
  --chrome-light: #E8E8E8;
  --chrome-dark: #888;
  --radius: 12px;
  --radius-sm: 8px;
  --gradient-chrome: linear-gradient(135deg, #D4D4D4, #A8A8A8, #C0C0C0, #E0E0E0);
  --gradient-dark: linear-gradient(135deg, #2A2A2A, #1A1A1A);
}

/* DARK MODE (default) */
body, body.dark-mode {
  --bg-primary: #121212;
  --bg-secondary: #1E1E1E;
  --bg-card: #1E1E1E;
  --text-primary: #E8E8E8;
  --text-secondary: #AAA;
  --text-muted: #777;
  --accent: #C0C0C0;
  --accent-hover: #E0E0E0;
  --border: #333;
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

/* LIGHT MODE */
body.light-mode {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F0F0F0;
  --bg-card: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #666;
  --text-muted: #999;
  --accent: #2A2A2A;
  --accent-hover: #444;
  --border: #E0E0E0;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg-primary); color:var(--text-primary); overflow-x:hidden; transition:background 0.3s, color 0.3s; }
a { text-decoration:none; color:inherit; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--chrome-dark); border-radius:3px; }

/* ─── TOP NAV ─── */
.topnav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--bg-card); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:64px;
}
.topnav .logo {
  font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.3rem;
  color:#fff; letter-spacing:2px;
}
.topnav .logo span { color:var(--chrome); }
body.light-mode .topnav .logo { color:#1A1A1A; }
body.light-mode .topnav .logo span { color:var(--chrome); }
.topnav nav { display:flex; gap:4px; }
.topnav nav a {
  padding:8px 16px; border-radius:var(--radius-sm); font-size:0.85rem;
  font-weight:500; color:var(--text-secondary); transition:all 0.2s;
  display:flex; align-items:center; gap:6px;
}
.topnav nav a:hover, .topnav nav a.active {
  background:var(--bg-secondary); color:var(--text-primary);
}
.topnav nav a.active { font-weight:600; }
.topnav .nav-right { display:flex; align-items:center; gap:12px; }
.topnav .nav-right .avatar {
  width:36px; height:36px; border-radius:50%; background:var(--gradient-chrome);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:0.8rem; cursor:pointer; border:2px solid var(--border);
}
.topnav .nav-right .notif {
  position:relative; cursor:pointer; padding:8px;
}
.topnav .nav-right .notif .badge {
  position:absolute; top:4px; right:4px; width:8px; height:8px;
  background:#E53E3E; border-radius:50%;
}
.notif-panel {
  display:none; position:absolute; top:100%; right:0; width:360px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.4); z-index:999; overflow:hidden;
  max-height:480px;
}
.notif-panel.open { display:block; }
.notif-panel-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.notif-panel-header h3 {
  font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:700;
}
.notif-panel-header button {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:0.8rem; font-family:'Inter',sans-serif;
}
.notif-panel-header button:hover { color:var(--text-primary); }
.notif-actions-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 18px; border-bottom:1px solid var(--border); background:var(--bg-secondary);
}
.notif-actions-bar label {
  display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text-secondary); cursor:pointer;
}
.notif-actions-bar label input[type="checkbox"] {
  width:16px; height:16px; accent-color:var(--chrome); cursor:pointer;
}
.notif-actions-bar .notif-bulk-btns { display:flex; gap:8px; }
.notif-actions-bar .notif-bulk-btns button {
  background:none; border:1px solid var(--border); border-radius:6px;
  padding:4px 10px; font-size:0.75rem; color:var(--text-secondary);
  cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s;
}
.notif-actions-bar .notif-bulk-btns button:hover {
  background:var(--bg-primary); color:var(--text-primary); border-color:var(--chrome);
}
.notif-actions-bar .notif-bulk-btns button.notif-delete-btn:hover {
  background:#E53E3E22; color:#E53E3E; border-color:#E53E3E;
}
.notif-list { overflow-y:auto; max-height:380px; }
.notif-item {
  display:flex; gap:10px; align-items:flex-start; padding:12px 18px;
  border-bottom:1px solid var(--border); transition:background 0.15s;
}
.notif-item:hover { background:var(--bg-secondary); }
.notif-item.unread { background:rgba(192,192,192,0.06); }
.notif-item .notif-check {
  width:16px; height:16px; accent-color:var(--chrome); cursor:pointer;
  flex-shrink:0; margin-top:2px;
}
.notif-item .notif-icon {
  width:36px; height:36px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:0.85rem;
  flex-shrink:0;
}
.notif-item .notif-icon.follow { background:rgba(66,153,225,0.15); color:#4299E5; }
.notif-item .notif-icon.like { background:rgba(245,101,101,0.15); color:#F56565; }
.notif-item .notif-icon.comment { background:rgba(72,187,120,0.15); color:#48BB78; }
.notif-item .notif-icon.event { background:rgba(237,137,54,0.15); color:#ED8936; }
.notif-item .notif-icon.welcome { background:rgba(192,192,192,0.15); color:#C0C0C0; }
.notif-item .notif-icon.admin { background:rgba(192,192,192,0.15); color:#C0C0C0; }
.notif-item .notif-content { flex:1; min-width:0; }
.notif-item .notif-text {
  font-family:'Inter',sans-serif; font-size:0.85rem; color:var(--text-primary); line-height:1.4;
}
.notif-item .notif-text strong { font-weight:600; }
.notif-item .notif-time {
  font-size:0.7rem; color:var(--text-muted); margin-top:3px; display:block;
}
.notif-item .notif-delete {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:0.8rem; padding:4px; flex-shrink:0; opacity:0; transition:opacity 0.2s;
}
.notif-item:hover .notif-delete { opacity:1; }
.notif-item .notif-delete:hover { color:#E53E3E; }
.notif-empty {
  text-align:center; padding:40px 20px; color:var(--text-muted);
  font-family:'Inter',sans-serif; font-size:0.9rem;
}

/* ─── MOBILE NAV ─── */
.mobile-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:1000;
  background:var(--bg-card); backdrop-filter:blur(20px);
  border-top:1px solid var(--border); padding:6px 0 max(6px, env(safe-area-inset-bottom));
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.mobile-nav::-webkit-scrollbar { display:none; }
.mobile-nav-inner {
  display:flex; justify-content:space-between; min-width:100%; padding:0 4px;
}
.mobile-nav a {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 6px; font-size:0.6rem; color:var(--text-muted);
  font-weight:500; transition:all 0.2s; white-space:nowrap; flex:1; min-width:0;
}
.mobile-nav a.active { color:var(--text-primary); }
.mobile-nav a i { font-size:1rem; }

/* ─── PAGE WRAPPER ─── */
.page { display:none; padding-top:80px; min-height:100vh; padding-bottom:70px; }
.page.active { display:block; }

/* ─── HERO ─── */
.hero {
  position:relative; overflow:hidden; margin:0 24px; border-radius:20px;
  background:var(--gradient-dark); padding:80px 60px; margin-bottom:40px;
}
.hero::before {
  content:''; position:absolute; top:0; right:0; width:50%; height:100%;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle cx="200" cy="200" r="180" fill="none" stroke="%23333" stroke-width="0.5"/><circle cx="200" cy="200" r="140" fill="none" stroke="%23444" stroke-width="0.3"/><circle cx="200" cy="200" r="100" fill="none" stroke="%23555" stroke-width="0.2"/></svg>') no-repeat center; opacity:0.3;
}
.hero-content { position:relative; z-index:1; max-width:600px; }
.hero h1 {
  font-family:'Orbitron',sans-serif; font-size:3rem; font-weight:900;
  color:#fff; line-height:1.1; margin-bottom:16px;
}
.hero h1 .chrome-text {
  background:var(--gradient-chrome); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p { color:#AAA; font-size:1.1rem; line-height:1.6; margin-bottom:32px; }
.hero .btn-group { display:flex; gap:12px; flex-wrap:wrap; }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius-sm); font-size:0.9rem;
  font-weight:600; cursor:pointer; transition:all 0.2s; border:none;
}
.btn-primary {
  background:var(--gradient-chrome); color:#111;
  box-shadow:0 2px 8px rgba(192,192,192,0.3);
  font-weight:700;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(192,192,192,0.4); }
.btn-outline {
  background:transparent; color:var(--text-primary); border:1px solid var(--border);
}
.btn-outline:hover { border-color:var(--chrome); color:var(--chrome); }
.hero .btn-outline, .mftrn-hero .btn-outline, .footer .btn-outline {
  color:#fff; border-color:rgba(255,255,255,0.3);
}
.hero .btn-outline:hover, .mftrn-hero .btn-outline:hover, .footer .btn-outline:hover {
  border-color:var(--chrome); color:var(--chrome);
}
.btn-dark { background:var(--accent); color:var(--bg-primary); }
.btn-dark:hover { background:var(--accent-hover); }
.btn-sm { padding:8px 16px; font-size:0.8rem; }

/* ─── SECTION ─── */
.section { padding:0 24px; margin-bottom:48px; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.section-header h2 { font-family:'Orbitron',sans-serif; font-size:1.4rem; font-weight:700; }
.section-header a { font-size:0.85rem; color:var(--chrome-dark); font-weight:500; }

/* ─── CARDS ─── */
.card {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  overflow:hidden; transition:all 0.25s;
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }

/* ─── GRID LAYOUTS ─── */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* ─── FEATURE CARDS ─── */
.feature-card { padding:28px; cursor:pointer; }
.feature-card .icon-wrap {
  width:48px; height:48px; border-radius:12px; background:var(--bg-secondary);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-size:1.2rem; color:var(--accent);
}
.feature-card h3 { font-size:1rem; font-weight:600; margin-bottom:8px; }
.feature-card p { font-size:0.85rem; color:var(--text-secondary); line-height:1.5; }

/* ─── STATS BAR ─── */
.stats-bar {
  display:flex; justify-content:center; gap:60px; padding:40px 24px;
  background:var(--bg-card); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-bottom:48px;
}
.stat-item { text-align:center; }
.stat-item .num { font-family:'Orbitron',sans-serif; font-size:2rem; font-weight:700; }
.stat-item .label { font-size:0.8rem; color:var(--text-secondary); margin-top:4px; }

/* ─── ADMIN STAT CARDS ─── */
.admin-stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.admin-stat-card.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.admin-detail-panel { animation:adminSlideDown 0.3s ease; }
@keyframes adminSlideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.admin-user-row-item { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border); transition:background 0.15s; }
.admin-user-row-item:hover { background:var(--bg-secondary); }
.admin-user-row-item:last-child { border-bottom:none; }
.admin-day-header { padding:10px 20px; background:var(--bg-secondary); font-size:0.8rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1; }

/* ─── AD BANNER ─── */
/* ─── STORY RING ON AVATAR ─── */
.profile-avatar.has-story {
  border:4px solid transparent !important;
  background-clip:padding-box;
  position:relative;
}
.profile-avatar.has-story::before {
  content:''; position:absolute; top:-5px; left:-5px; right:-5px; bottom:-5px;
  border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg, #0E8001, #15A002, #1BC402, #0E8001);
}
.profile-avatar.has-story.story-viewed::before {
  background:var(--text-muted); opacity:0.5;
}
.story-add-plus {
  position:absolute; bottom:2px; right:2px; width:30px; height:30px; border-radius:50%;
  background:var(--chrome); color:#fff; border:3px solid var(--bg-primary);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
  cursor:pointer; z-index:3; font-weight:700; line-height:1;
}
/* Rider profile story ring */
.rider-avatar-story-ring {
  border:4px solid transparent !important; position:relative; cursor:pointer;
}
.rider-avatar-story-ring::before {
  content:''; position:absolute; top:-5px; left:-5px; right:-5px; bottom:-5px;
  border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg, #0E8001, #15A002, #1BC402, #0E8001);
}

/* ─── STORY VIEWER OVERLAY ─── */
.story-viewer-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:10000;
  display:none; flex-direction:column;
}
.story-viewer-overlay.active { display:flex; }
.story-progress-bar { display:flex; gap:3px; padding:8px 12px 0; }
.story-progress-bar .seg { flex:1; height:3px; background:rgba(255,255,255,0.3); border-radius:2px; overflow:hidden; }
.story-progress-bar .seg .fill { height:100%; background:#fff; width:0%; transition:width 0.1s linear; }
.story-viewer-header {
  display:flex; align-items:center; gap:10px; padding:10px 14px; color:#fff;
}
.story-viewer-header .sv-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.story-viewer-header .sv-username { font-weight:600; font-size:0.88rem; }
.story-viewer-header .sv-time { font-size:0.72rem; color:rgba(255,255,255,0.6); }
.story-viewer-header .sv-close { margin-left:auto; background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; padding:6px; }
.story-viewer-content {
  flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.story-viewer-content img, .story-viewer-content video {
  max-width:100%; max-height:100%; object-fit:contain;
}
.story-viewer-nav {
  position:absolute; top:0; left:0; width:100%; height:100%; display:flex; z-index:1;
}
.story-viewer-nav .sv-prev, .story-viewer-nav .sv-next { flex:1; cursor:pointer; }
.story-viewer-footer {
  padding:12px 14px; display:flex; align-items:center; gap:10px; color:#fff;
}
.story-viewer-footer .sv-views {
  font-size:0.78rem; color:rgba(255,255,255,0.7); cursor:pointer;
}
.story-viewer-footer .sv-views i { margin-right:4px; }
.story-tag-badge {
  position:absolute; bottom:60px; left:14px; background:rgba(0,0,0,0.6);
  padding:5px 10px; border-radius:16px; font-size:0.78rem; color:#fff; z-index:2;
}
.story-tag-badge i { margin-right:4px; color:var(--chrome); }
.story-repost-btn {
  background:var(--chrome); color:#fff; border:none; padding:8px 16px; border-radius:20px;
  font-size:0.82rem; font-weight:600; cursor:pointer;
}

/* ─── STORY CREATION MODAL ─── */
.story-create-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); z-index:10001;
  display:none; flex-direction:column;
}
.story-create-overlay.active { display:flex; }
.story-create-header {
  display:flex; align-items:center; padding:14px; color:#fff;
}
.story-create-header .sc-title { font-family:Orbitron,sans-serif; font-size:1.1rem; font-weight:700; flex:1; }
.story-create-header .sc-close { background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; }
.story-create-body {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:16px;
}
.story-create-preview {
  max-width:100%; max-height:50vh; border-radius:12px; overflow:hidden; position:relative;
}
.story-create-preview img, .story-create-preview video { max-width:100%; max-height:50vh; object-fit:contain; }
.story-create-actions { width:100%; max-width:400px; display:flex; flex-direction:column; gap:10px; }
.story-tag-input {
  width:100%; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.1); color:#fff; font-size:0.88rem; box-sizing:border-box;
}
.story-tag-input::placeholder { color:rgba(255,255,255,0.4); }

/* ─── STORY VIEWS LIST ─── */
.story-views-panel {
  position:absolute; bottom:0; left:0; width:100%; max-height:50vh;
  background:var(--bg-primary); border-radius:16px 16px 0 0; padding:16px;
  transform:translateY(100%); transition:transform 0.3s ease; z-index:5; overflow-y:auto;
}
.story-views-panel.open { transform:translateY(0); }
.story-views-panel .sv-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.story-views-panel .sv-header h3 { font-size:1rem; color:var(--text-primary); margin:0; }
.story-views-panel .sv-viewer-row {
  display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border);
}
.story-views-panel .sv-viewer-row img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.story-views-panel .sv-viewer-row .sv-vname { font-size:0.85rem; font-weight:600; color:var(--text-primary); }
.story-views-panel .sv-viewer-row .sv-vtime { font-size:0.72rem; color:var(--text-muted); }
.story-views-panel .sv-viewer-row .sv-screenshot { font-size:0.7rem; color:#e74c3c; margin-left:auto; }

/* ─── FEED ─── */
.feed-container { max-width:900px; margin:0 auto; padding:0 24px; }
@media (max-width:600px) { .feed-container { max-width:100%; padding:0 12px; } }
.feed-post {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  margin-bottom:20px; overflow:hidden;
}
.feed-post .post-header {
  display:flex; align-items:center; gap:12px; padding:16px 20px;
}
.feed-post .post-avatar {
  width:40px; height:40px; border-radius:50%; background:var(--gradient-chrome);
  

display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:0.75rem; flex-shrink:0;
}
.feed-post .post-meta { flex:1; }
.feed-post .post-name { font-weight:600; font-size:0.9rem; }
.feed-post .post-name[onclick]:hover { text-decoration:underline; }

/* Verified Badge */
.verified-badge { color:#3b82f6; font-size:0.75em; margin-left:3px; vertical-align:middle; }
.post-name .verified-badge { font-size:0.8em; }
h1 .verified-badge, h2 .verified-badge, h3 .verified-badge { font-size:0.6em; }
.dm-convo-name .verified-badge { font-size:0.7em; }
.comment-author .verified-badge { font-size:0.7em; }
.rider-card-handle .verified-badge { font-size:0.75em; }
.suggested-rider-name .verified-badge { font-size:0.7em; }

/* Repost Styles */
.repost-header { padding:10px 20px 0; font-size:0.8rem; color:var(--text-muted); cursor:pointer; }
.repost-header i { margin-right:4px; color:#2ecc71; }
.repost-header strong { color:var(--text-secondary); }
.repost-header:hover strong { text-decoration:underline; }
.repost-embedded { margin:8px 20px 12px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--bg-secondary); }
.feed-post.is-repost { border-left:3px solid #2ecc71; }
.feed-post .post-time { font-size:0.75rem; color:var(--text-muted); }
.feed-post .post-body { padding:0 20px 16px; font-size:0.9rem; line-height:1.6; }
.feed-post .post-image {
  width:100%; aspect-ratio:16/10; background:var(--bg-secondary);
  display:flex; align-items:center; justify-content:center; font-size:3rem;
  color:var(--chrome-dark);
}
.feed-post .post-image.real-media {
  aspect-ratio:unset; background:var(--bg-secondary); overflow:hidden;
}
.feed-post .post-image.real-media img {
  width:100%; max-height:700px; object-fit:contain; display:block; background:var(--bg-secondary); cursor:zoom-in;
}

/* ═══════════════ POST CAROUSEL ═══════════════ */
.post-carousel { position:relative; width:100%; background:var(--bg-secondary); overflow:hidden; }
.carousel-track { display:flex; overflow-x:scroll; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-slide { flex:0 0 100%; scroll-snap-align:start; min-width:100%; }
.carousel-slide img { width:100%; max-height:700px; object-fit:contain; display:block; cursor:zoom-in; background:var(--bg-secondary); }
.carousel-prev, .carousel-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.55); color:#fff; border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; font-size:0.8rem; opacity:0; transition:opacity 0.25s; }
.post-carousel:hover .carousel-prev,
.post-carousel:hover .carousel-next { opacity:0.85; }
.carousel-prev:hover, .carousel-next:hover { opacity:1 !important; background:rgba(0,0,0,0.75); }
.carousel-prev { left:8px; }
.carousel-next { right:8px; }
.carousel-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.carousel-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.45); transition:background 0.2s, transform 0.2s; }
.carousel-dot.active { background:#fff; transform:scale(1.2); }
.carousel-counter { position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.6); color:#fff; font-size:0.75rem; font-weight:600; padding:4px 10px; border-radius:12px; z-index:2; letter-spacing:0.02em; }

/* Compose multi-photo thumbnails */
.compose-photo-thumbs { display:flex; gap:6px; padding:8px; overflow-x:auto; scrollbar-width:none; }
.compose-photo-thumbs::-webkit-scrollbar { display:none; }
.compose-thumb { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.compose-thumb img { width:100%; height:100%; object-fit:cover; }
.compose-thumb-remove { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.7); color:#fff; border:none; cursor:pointer; font-size:0.6rem; display:flex; align-items:center; justify-content:center; line-height:1; }
.compose-thumb-add { display:flex; align-items:center; justify-content:center; background:var(--bg-secondary); border:2px dashed var(--border); color:var(--text-muted); cursor:pointer; font-size:1.2rem; }
.compose-photo-count { text-align:center; font-size:0.75rem; color:var(--text-muted); padding:2px 0 4px; }

/* Photo filter selector strip */
.compose-filter-strip { display:flex; gap:8px; padding:8px 10px; overflow-x:auto; scrollbar-width:none; background:var(--bg-secondary); border-radius:8px; margin:6px 8px; }
.compose-filter-strip::-webkit-scrollbar { display:none; }
.compose-filter-option { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; opacity:0.7; transition:opacity 0.2s, transform 0.2s; }
.compose-filter-option.active { opacity:1; transform:scale(1.05); }
.compose-filter-option:hover { opacity:1; }
.compose-filter-thumb { width:56px; height:56px; border-radius:6px; background-size:cover; background-position:center; border:2px solid transparent; transition:border-color 0.2s; }
.compose-filter-option.active .compose-filter-thumb { border-color:var(--chrome); }
.compose-filter-option span { font-size:0.65rem; color:var(--text-muted); font-weight:500; }
.compose-filter-option.active span { color:var(--chrome); font-weight:600; }

/* ═══════════════ PHOTO EDITOR MODAL ═══════════════ */
.photo-editor-modal { position:fixed; top:0; left:0; right:0; bottom:0; z-index:10001; background:var(--bg-primary); display:flex; flex-direction:column; }
.photo-editor-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.photo-editor-title { font-weight:600; font-size:0.95rem; color:var(--text-primary); }
.photo-editor-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.85rem; padding:6px 12px; border-radius:8px; display:flex; align-items:center; gap:5px; font-family:inherit; }
.photo-editor-btn:hover { background:var(--bg-hover); }
.photo-editor-done { color:var(--chrome); font-weight:600; }
.photo-editor-canvas-wrap { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#111; position:relative; }
.photo-editor-canvas-wrap canvas { max-width:100%; max-height:100%; object-fit:contain; cursor:crosshair; }
.photo-editor-tools { display:flex; justify-content:center; gap:2px; padding:8px 12px; background:var(--bg-secondary); border-top:1px solid var(--border); }
.editor-tool-btn { display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:8px 14px; border-radius:8px; font-family:inherit; transition:all 0.2s; min-width:56px; }
.editor-tool-btn i { font-size:1.1rem; }
.editor-tool-btn span { font-size:0.65rem; font-weight:500; }
.editor-tool-btn.active { color:var(--chrome); background:rgba(192,192,192,0.1); }
.editor-tool-btn:hover { color:var(--chrome); }
.editor-tool-options { padding:10px 16px; background:var(--bg-secondary); border-top:1px solid var(--border); min-height:50px; display:flex; align-items:center; gap:10px; overflow-x:auto; scrollbar-width:none; }
.editor-tool-options::-webkit-scrollbar { display:none; }
.crop-preset-btn { padding:6px 14px; border-radius:16px; border:1.5px solid var(--border); background:none; color:var(--text-muted); cursor:pointer; font-size:0.75rem; font-weight:500; white-space:nowrap; font-family:inherit; transition:all 0.2s; }
.crop-preset-btn.active { border-color:var(--chrome); color:var(--chrome); background:rgba(192,192,192,0.1); }
.crop-overlay { position:absolute; border:2px dashed rgba(255,255,255,0.7); pointer-events:none; box-shadow:0 0 0 9999px rgba(0,0,0,0.5); }
.editor-color-dot { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; flex-shrink:0; transition:transform 0.15s; }
.editor-color-dot.active { border-color:#fff; transform:scale(1.15); }
.editor-slider-group { display:flex; flex-direction:column; gap:2px; min-width:140px; }
.editor-slider-group label { font-size:0.7rem; color:var(--text-muted); display:flex; justify-content:space-between; }
.editor-slider-group input[type="range"] { width:100%; accent-color:var(--chrome); height:4px; }
.editor-sticker { font-size:1.6rem; cursor:pointer; padding:4px; border-radius:6px; transition:background 0.15s; }
.editor-sticker:hover { background:rgba(255,255,255,0.1); }
.editor-text-input { background:rgba(255,255,255,0.1); border:1px solid var(--border); color:#fff; padding:6px 10px; border-radius:8px; font-size:0.85rem; font-family:inherit; flex:1; min-width:120px; }
.compose-thumb-edit { position:absolute; bottom:2px; left:2px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.7); color:#fff; border:none; cursor:pointer; font-size:0.55rem; display:flex; align-items:center; justify-content:center; }

/* Post location tag display */
.post-location { font-size:0.75rem; color:var(--text-muted); display:flex; align-items:center; gap:3px; cursor:pointer; }
.post-location:hover { color:var(--chrome); }
.post-location i { font-size:0.65rem; }

#photoLightbox.show { display:flex !important; animation:lightboxFadeIn 0.2s ease; }
@keyframes lightboxFadeIn { from { opacity:0; } to { opacity:1; } }
#photoLightbox img { animation:lightboxZoomIn 0.25s ease; }
@keyframes lightboxZoomIn { from { transform:scale(0.85); opacity:0; } to { transform:scale(1); opacity:1; } }
.feed-post .post-actions {
  display:flex; gap:0; border-top:1px solid var(--border);
}
.feed-post .post-actions button {
  flex:1; padding:12px; background:none; border:none; cursor:pointer;
  font-size:0.8rem; color:var(--text-secondary); display:flex;
  align-items:center; justify-content:center; gap:6px; transition:all 0.2s;
}
.feed-post .post-actions button:hover { background:var(--bg-secondary); color:var(--text-primary); }
.feed-post .post-actions button.liked { color:#E53E3E; }
.feed-post .post-actions button.reacted { color:#1BC402; }

/* ─── REACTION PICKER ─── */
.reaction-btn-wrap { position:relative; flex:1; }
.reaction-btn-wrap button { width:100%; }
.reaction-picker {
  display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--bg-primary); border:1px solid var(--border); border-radius:28px;
  padding:6px 8px; gap:2px; box-shadow:0 4px 20px rgba(0,0,0,0.25);
  z-index:999; white-space:nowrap; align-items:center;
}
.reaction-picker.show { display:inline-flex; animation:reactionPickerIn 0.25s ease; }
@keyframes reactionPickerIn { from { opacity:0; transform:translateX(-50%) scale(0.7) translateY(8px); } to { opacity:1; transform:translateX(-50%) scale(1) translateY(0); } }
.reaction-picker .reaction-opt {
  font-size:1.4rem; cursor:pointer; padding:4px 6px; border-radius:50%;
  transition:transform 0.15s ease, background 0.15s; line-height:1; display:flex; align-items:center; justify-content:center;
  background:none; border:none;
}
.reaction-picker .reaction-opt:hover { transform:scale(1.45); background:var(--bg-secondary); }
.reaction-picker .reaction-opt.selected { background:rgba(27,196,2,0.15); }
.reaction-summary {
  display:flex; align-items:center; gap:4px; padding:2px 10px 6px; font-size:0.78rem;
  color:var(--text-muted); flex-wrap:wrap;
}
.reaction-summary:empty { display:none; }
.reaction-bubble {
  display:inline-flex; align-items:center; gap:3px; background:var(--bg-secondary);
  border:1px solid var(--border); border-radius:14px; padding:2px 8px 2px 4px;
  font-size:0.78rem; cursor:pointer; transition:all 0.15s;
}
.reaction-bubble:hover { border-color:var(--chrome); }
.reaction-bubble.mine { border-color:#1BC402; background:rgba(27,196,2,0.08); }
.reaction-bubble .rb-emoji { font-size:0.95rem; }
.reaction-bubble .rb-count { color:var(--text-secondary); font-weight:500; }

/* ─── HASHTAG SUGGESTIONS DROPDOWN ─── */
.hashtag-suggest-dropdown {
  position:fixed; z-index:9999; background:var(--bg-secondary,#1a1a2e);
  border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5); max-height:220px; overflow-y:auto;
  padding:4px 0; min-width:200px;
}
.hashtag-suggest-dropdown .hs-header {
  padding:6px 12px 4px; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text-muted); font-weight:600;
}
.hashtag-suggest-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer;
  transition:background 0.15s;
}
.hashtag-suggest-item:hover { background:rgba(255,255,255,0.08); }
.hashtag-suggest-item .hs-tag {
  color:#1BC402; font-weight:600; font-size:0.9rem;
}
.hashtag-suggest-item .hs-count {
  color:var(--text-muted); font-size:0.75rem; margin-left:auto;
}
.hashtag-suggest-item .hs-fire {
  font-size:0.8rem; opacity:0.7;
}

/* ─── COMMENTS ─── */
.comment-section { display:none; border-top:1px solid var(--border); padding:12px 16px; }
.comment-section.open { display:block; }
.comment-list { max-height:300px; overflow-y:auto; margin-bottom:10px; }
.comment-item { display:flex; gap:10px; margin-bottom:12px; }
.comment-avatar { width:32px; height:32px; border-radius:50%; background:var(--gradient-chrome); display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; flex-shrink:0; color:#fff; }
.comment-content { flex:1; min-width:0; }
.comment-author { font-weight:600; font-size:0.85rem; cursor:pointer; color:var(--text-primary); }
.comment-author:hover { color:var(--accent); }
.comment-text { font-size:0.85rem; color:var(--text-secondary); margin-top:2px; line-height:1.4; word-wrap:break-word; }
.comment-time { font-size:0.7rem; color:var(--text-muted); margin-top:2px; }
.comment-delete { cursor:pointer; color:var(--text-muted); font-size:0.7rem; margin-left:6px; opacity:0.6; }
.comment-delete:hover { opacity:1; color:#E53E3E; }
.comment-form { display:flex; gap:8px; align-items:center; }
.comment-input { flex:1; background:var(--bg-secondary); border:1px solid var(--border); border-radius:20px; padding:8px 14px; color:var(--text-primary); font-size:0.85rem; outline:none; font-family:inherit; }
.comment-input:focus { border-color:var(--accent); }
.comment-input::placeholder { color:var(--text-muted); }
.comment-submit { background:var(--accent); border:none; border-radius:50%; width:34px; height:34px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 0.15s; }
.comment-submit:hover { transform:scale(1.1); }
.comment-gif-btn { background:none; border:1px solid var(--border); border-radius:6px; color:var(--text-muted); cursor:pointer; font-size:0.7rem; font-weight:700; padding:4px 8px; flex-shrink:0; transition:all 0.2s; }
.comment-gif-btn:hover { color:var(--accent); border-color:var(--accent); }
.comment-gif-panel { display:none; margin-top:8px; border:1px solid var(--border); border-radius:10px; background:var(--bg-secondary); padding:8px; max-height:240px; overflow:hidden; }
.comment-gif-panel.open { display:block; }
.comment-gif-search { width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--text-primary); font-size:0.8rem; margin-bottom:6px; outline:none; font-family:inherit; }
.comment-gif-search:focus { border-color:var(--accent); }
.comment-gif-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; max-height:180px; overflow-y:auto; }
.comment-gif-grid img { width:100%; border-radius:6px; cursor:pointer; transition:transform 0.15s; }
.comment-gif-grid img:hover { transform:scale(1.03); }
.comment-gif-img { max-width:200px; border-radius:8px; margin-top:4px; }
.comment-reactions-bar { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.comment-reaction-chip { display:inline-flex; align-items:center; gap:2px; font-size:0.75rem; padding:2px 6px; border-radius:12px; border:1px solid var(--border); background:var(--bg-secondary); cursor:pointer; transition:all 0.15s; }
.comment-reaction-chip:hover { border-color:var(--accent); }
.comment-reaction-chip.mine { border-color:var(--accent); background:rgba(237,137,54,0.15); }
.comment-reaction-picker { display:none; position:absolute; bottom:100%; left:0; background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:4px 8px; box-shadow:0 4px 12px rgba(0,0,0,0.3); z-index:100; white-space:nowrap; }
.comment-reaction-picker.open { display:flex; gap:2px; }
.comment-reaction-picker button { background:none; border:none; font-size:1.1rem; cursor:pointer; padding:2px 4px; border-radius:6px; transition:transform 0.15s; }
.comment-reaction-picker button:hover { transform:scale(1.3); }
.comment-item { position:relative; }

/* ─── ANNOUNCEMENT BANNER ─── */
.announcement-banner {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden;
}
.announcement-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-chrome);
}
.announcement-banner .ab-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.announcement-banner .ab-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-chrome);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #111; flex-shrink: 0;
}
.announcement-banner .ab-title {
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 1px; color: var(--text-primary);
}
.announcement-banner .ab-badge {
  font-size: 0.6rem; background: var(--accent); color: var(--bg-primary);
  padding: 2px 8px; border-radius: 10px; font-weight: 600; letter-spacing: 0.5px;
}
.announcement-banner .ab-body {
  font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary);
}
.announcement-banner .ab-body strong { color: var(--text-primary); }
.announcement-banner .ab-edit-btn {
  position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; color: var(--text-muted); cursor: pointer;
  font-size: 0.72rem; display: none; transition: all 0.2s;
}
.announcement-banner .ab-edit-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.announcement-banner .ab-editor { display: none; margin-top: 12px; }
.announcement-banner .ab-editor textarea {
  width: 100%; min-height: 80px; background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; color: var(--text-primary); font-family: inherit;
  font-size: 0.85rem; resize: vertical; outline: none; box-sizing: border-box;
}
.announcement-banner .ab-editor-actions {
  display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;
}
.announcement-banner .ab-editor-actions button {
  padding: 6px 16px; border-radius: 8px; font-size: 0.78rem; cursor: pointer; border: none; font-weight: 600;
}
.announcement-banner .ab-save { background: var(--accent); color: var(--bg-primary); }
.announcement-banner .ab-cancel { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border) !important; }
.announcement-banner .ab-dismiss {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 4px;
}
.announcement-banner .ab-dismiss:hover { color: var(--text-primary); }
.announcement-banner.editing .ab-editor { display: block; }
.announcement-banner.editing .ab-body { display: none; }

/* ─── COMPOSE BOX ─── */
.compose-box {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  padding:20px; margin-bottom:24px; display:flex; gap:12px; align-items:flex-start;
}
.compose-box textarea {
  width:100%; box-sizing:border-box; border:none; outline:none; font-family:inherit; font-size:0.9rem;
  resize:none; min-height:44px; background:transparent; color:var(--text-primary); line-height:1.4;
}
.compose-box .compose-actions { display:flex; gap:8px; align-items:center; }
.compose-box .compose-actions button {
  background:none; border:none; cursor:pointer; padding:8px;
  color:var(--text-muted); font-size:1rem; transition:color 0.2s;
}
.compose-box .compose-actions button:hover { color:var(--text-primary); }

/* ─── VIDEO / REEL STYLES ─── */
.video-card { border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--bg-secondary); position:relative; }
.video-card video { width:100%; max-height:400px; display:block; background:#000; }
.video-card .video-caption { padding:12px 16px; font-size:0.88rem; color:var(--text-secondary); line-height:1.4; }
.video-badge { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.7); color:#fff; padding:4px 10px; border-radius:20px; font-size:0.72rem; font-weight:600; display:flex; align-items:center; gap:5px; z-index:2; }
.video-badge i { color:#E53E3E; }
.video-duration { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.7); color:#fff; padding:3px 8px; border-radius:6px; font-size:0.72rem; font-weight:600; z-index:2; }
.feed-post video { width:100%; max-height:500px; display:block; background:#000; }
.upload-progress-wrap { margin-top:12px; display:none; }
.upload-progress-bar { height:6px; background:var(--bg-secondary); border-radius:3px; overflow:hidden; }
.upload-progress-fill { height:100%; background:linear-gradient(90deg, var(--chrome), var(--accent-hover)); width:0%; transition:width 0.3s; border-radius:3px; }
.upload-progress-text { font-size:0.78rem; color:var(--text-muted); margin-top:6px; text-align:center; }
.share-to-feed-check { display:flex; align-items:center; gap:10px; margin-top:14px; padding:14px; background:var(--bg-secondary); border-radius:10px; border:1px solid var(--border); cursor:pointer; }
.share-to-feed-check input[type="checkbox"] { width:18px; height:18px; accent-color:var(--chrome); cursor:pointer; }
.share-to-feed-check label { font-size:0.88rem; font-weight:500; cursor:pointer; flex:1; }
.share-to-feed-check .hint { font-size:0.76rem; color:var(--text-muted); display:block; margin-top:2px; font-weight:400; }
.video-tab-btn { position:relative; }
.video-count-badge { position:absolute; top:-4px; right:-8px; background:#E53E3E; color:#fff; font-size:0.62rem; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* ─── PROFILE ─── */
/* ─── PROFILE PAGE REDESIGN ─── */
.profile-banner {
  height:220px; position:relative; margin:0; overflow:hidden;
  background:linear-gradient(135deg, #0D0D0D 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
  background-size:cover; background-position:center;
}
.cover-edit-btn {
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(0,0,0,0.55); color:#fff; border:1px solid rgba(255,255,255,0.2);
  border-radius:20px; padding:6px 14px; font-size:0.75rem; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:5px;
  backdrop-filter:blur(4px); transition:background 0.2s;
}
.cover-edit-btn:hover { background:rgba(27,196,2,0.6); }
.cover-edit-btn i { font-size:0.7rem; }
.profile-banner::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:100px;
  background:linear-gradient(transparent, var(--bg-primary));
}
.profile-header-wrap {
  max-width:800px; margin:-70px auto 0; padding:0 24px; position:relative; z-index:1;
  text-align:center;
}
.profile-avatar-wrap { display:flex; flex-direction:column; align-items:center; margin-bottom:20px; }
.profile-avatar {
  width:130px; height:130px; border-radius:50%; background:var(--gradient-chrome);
  border:4px solid var(--bg-primary); display:flex; align-items:center;
  justify-content:center; font-family:'Orbitron',sans-serif; font-size:2.2rem;
  font-weight:800; flex-shrink:0; position:relative; overflow:visible;
  box-shadow:0 8px 32px rgba(0,0,0,0.4); letter-spacing:2px; color:#fff;
}
.profile-details { margin-top:16px; }
.profile-details h1 {
  font-family:'Orbitron',sans-serif; font-size:1.5rem; font-weight:700;
  letter-spacing:0.5px; margin-bottom:6px; color:var(--text-primary);
}
.profile-details .handle {
  color:var(--text-muted); font-family:'Inter',sans-serif; font-size:0.9rem;
  font-weight:400; margin-bottom:12px; letter-spacing:0.3px;
}
.profile-details .bio {
  color:var(--text-secondary); font-family:'Inter',sans-serif; font-size:0.95rem;
  line-height:1.7; max-width:520px; margin:0 auto;
}
.profile-action-row {
  display:flex; gap:10px; justify-content:center; margin:20px 0 24px; flex-wrap:wrap;
}
.profile-action-row .btn {
  font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600;
  padding:10px 22px; border-radius:10px; transition:all 0.2s;
}
.profile-action-row .btn-edit {
  background:var(--gradient-chrome); color:#111; border:none; font-weight:700;
}
.profile-action-row .btn-secondary {
  background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border);
}
.profile-action-row .btn-secondary:hover { border-color:var(--chrome); }
.profile-action-row .btn-logout {
  background:transparent; color:#e74c3c; border:1px solid #e74c3c;
}
.profile-action-row .btn-logout:hover { background:#e74c3c; color:#fff; }
.social-links-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0 4px; }
.social-link-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary); font-size:1rem; transition:all 0.2s; text-decoration:none; }
.social-link-icon:hover { border-color:var(--chrome); color:var(--chrome); transform:scale(1.1); }
.social-link-icon.si-instagram:hover { color:#E1306C; border-color:#E1306C; }
.social-link-icon.si-tiktok:hover { color:#000; border-color:#69C9D0; background:linear-gradient(135deg,#69C9D0,#EE1D52); }
.social-link-icon.si-youtube:hover { color:#FF0000; border-color:#FF0000; }
.social-link-icon.si-facebook:hover { color:#1877F2; border-color:#1877F2; }
.social-link-icon.si-twitter:hover { color:#000; border-color:#000; }
.social-link-icon.si-snapchat:hover { color:#FFFC00; border-color:#FFFC00; background:#FFFC00; }
.social-link-icon.si-threads:hover { color:#000; border-color:#000; }
.social-link-icon.si-website:hover { color:var(--chrome); border-color:var(--chrome); }
.social-input-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.social-input-row i { width:24px; text-align:center; font-size:1rem; color:var(--text-muted); }
.social-input-row input { flex:1; }

/* Buddy Interest Toggles */
.buddy-interest-toggle { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all 0.2s; background:var(--bg-secondary); }
.buddy-interest-toggle:hover { border-color:var(--chrome); background:var(--bg-tertiary); }
.buddy-interest-toggle input[type="checkbox"] { display:none; }
.buddy-interest-toggle input[type="checkbox"]:checked + .buddy-interest-label { color:var(--chrome); font-weight:600; }
.buddy-interest-toggle input[type="checkbox"]:checked ~ .buddy-interest-desc { color:var(--text-secondary); }
.buddy-interest-toggle:has(input:checked) { border-color:var(--chrome); background:linear-gradient(135deg, rgba(0,188,212,0.06), rgba(0,150,136,0.06)); box-shadow:0 0 0 1px var(--chrome); }
.buddy-interest-label { display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--text-primary); }
.buddy-interest-label i { font-size:1rem; }
.buddy-interest-desc { font-size:0.72rem; color:var(--text-muted); padding-left:26px; line-height:1.3; }
.profile-stats {
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:20px 0; margin-bottom:28px;
}
.profile-stats .ps-item {
  text-align:center; position:relative;
}
.profile-stats .ps-item:not(:last-child)::after {
  content:''; position:absolute; right:0; top:20%; height:60%;
  width:1px; background:var(--border);
}
.profile-stats .ps-num {
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.2rem;
  color:var(--text-primary); margin-bottom:4px;
}
.profile-stats .ps-label {
  font-family:'Inter',sans-serif; font-size:0.7rem; font-weight:500;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px;
}
.profile-tabs {
  display:flex; gap:0; margin-bottom:28px; border-bottom:2px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.profile-tabs::-webkit-scrollbar { display:none; }
.profile-tabs button {
  padding:14px 22px; background:none; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600;
  color:var(--text-muted); transition:all 0.25s; white-space:nowrap;
  border-bottom:3px solid transparent; margin-bottom:-2px;
}
.profile-tabs button:hover { color:var(--text-primary); }
.profile-tabs button.active {
  color:var(--text-primary); border-bottom-color:var(--chrome);
}
.profile-tab-panel .card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
}
.profile-tab-panel .card h3 {
  font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:600; color:var(--text-primary);
}
.profile-tab-panel .card p {
  font-family:'Inter',sans-serif;
}
.profile-tab-panel .bike-tag {
  padding:5px 12px; background:var(--bg-secondary); border-radius:20px;
  font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:500;
  color:var(--text-secondary); display:inline-block;
}
.garage-bike-item { margin-bottom:12px; }
.garage-bike-item .card { margin-bottom:0; }
.bike-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:32px; }
.bike-gallery .bike-img {
  aspect-ratio:1; border-radius:12px; background:var(--bg-secondary);
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  color:var(--chrome-dark); cursor:pointer; transition:all 0.25s; position:relative;
  overflow:hidden; border:1px solid var(--border);
}
.bike-gallery .bike-img:hover { transform:scale(1.03); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.bike-gallery .bike-img .overlay {
  position:absolute; bottom:0; left:0; right:0; padding:10px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,0.8));
  color:#fff; font-family:'Inter',sans-serif; font-size:0.8rem; font-weight:500;
}

/* ─── MFTRN PAGE ─── */
.mftrn-hero {
  margin:0 24px; border-radius:20px; padding:60px; margin-bottom:40px;
  background:linear-gradient(135deg, #1A1A2E, #16213E, #0F3460);
  position:relative; overflow:hidden;
}
.mftrn-hero::before {
  content:''; position:absolute; top:-50%; right:-20%; width:500px; height:500px;
  border-radius:50%; background:radial-gradient(circle, rgba(192,192,192,0.1), transparent 70%);
}
.mftrn-hero h1 {
  font-family:'Orbitron',sans-serif; font-size:2.5rem; font-weight:900;
  color:#fff; margin-bottom:8px;
}
.mftrn-hero .subtitle {
  font-size:1.3rem; color:var(--chrome); font-weight:300; margin-bottom:16px;
}
.mftrn-hero p { color:#AAA; max-width:600px; line-height:1.6; margin-bottom:24px; }

.tall-rider-card {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  padding:24px; display:flex; gap:20px; align-items:center;
}
.tall-rider-card .rider-avatar {
  width:64px; height:64px; border-radius:50%; background:var(--gradient-chrome);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:1.1rem; flex-shrink:0;
}
.tall-rider-card .rider-info h3 { font-size:1rem; font-weight:600; }
.tall-rider-card .rider-info .height { color:var(--chrome-dark); font-size:0.85rem; font-weight:500; }
.tall-rider-card .rider-info .bike-name { color:var(--text-secondary); font-size:0.85rem; }
.tall-rider-card .rider-info .review { font-size:0.85rem; color:var(--text-secondary); margin-top:8px; line-height:1.4; }

.bike-rec-card {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  overflow:hidden;
}
.bike-rec-card .bike-thumb {
  height:160px; background:var(--bg-secondary); display:flex; align-items:center;
  justify-content:center; font-size:3rem; color:var(--chrome

-dark);
}
.bike-rec-card .bike-info { padding:16px; }
.bike-rec-card .bike-info h3 { font-size:0.95rem; font-weight:600; margin-bottom:4px; }
.bike-rec-card .bike-info .rec-for { font-size:0.8rem; color:var(--chrome-dark); margin-bottom:8px; }
.bike-rec-card .bike-info .rating { font-size:0.8rem; color:#F6AD55; }
.bike-rec-card .bike-info p { font-size:0.8rem; color:var(--text-secondary); line-height:1.4; margin-top:8px; }

/* ─── EXPLORE / MAP ─── */
.map-container {
  margin:0 24px; border-radius:var(--radius); overflow:hidden;
  height:500px; background:#2A2A2A; position:relative; margin-bottom:32px;
  border:1px solid #444;
}
.map-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.map-placeholder i { font-size:3rem; color:#C0C0C0; }
.map-placeholder p { color:#ccc; font-size:0.9rem; }

.map-filters {
  display:flex; gap:8px; margin:0 0 20px; flex-wrap:wrap;
}
.map-filter-btn {
  padding:7px 12px; border-radius:20px; font-size:0.75rem; font-weight:500;
  cursor:pointer; transition:all 0.2s; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-primary); white-space:nowrap;
}
.map-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.map-filter-btn:hover:not(.active) { border-color:#555; background:#f5f5f5; }

.location-list { padding:0 24px; }
.location-card {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  padding:20px; display:flex; gap:16px; align-items:center; margin-bottom:12px;
  cursor:pointer; transition:all 0.2s;
}
.location-card:hover { box-shadow:var(--shadow); }
.location-card .loc-icon {
  width:48px; height:48px; border-radius:12px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  color:#fff; flex-shrink:0;
}
.location-card .loc-info h3 { font-size:0.95rem; font-weight:600; color:var(--text-primary); }
.location-card .loc-info .loc-type { font-size:0.75rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.location-card .loc-info .loc-addr { font-size:0.8rem; color:var(--text-secondary); margin-top:2px; }
.location-card .loc-dist { font-size:0.8rem; color:var(--text-muted); font-weight:500; margin-left:auto; white-space:nowrap; }

/* ─── EVENTS / CALENDAR ─── */
.calendar-header {
  display:flex; align-items:center; gap:16px; margin:0 24px 24px;
}
.calendar-header h2 { font-family:'Orbitron',sans-serif; font-size:1.2rem; }
.calendar-header .month-nav { display:flex; gap:8px; margin-left:auto; }
.calendar-header .month-nav button {
  width:36px; height:36px; border-radius:50%; background:var(--bg-card);
  border:1px solid var(--border); cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:all 0.2s;
}
.calendar-header .month-nav button:hover { background:var(--bg-secondary); }

.mini-calendar {
  margin:0 24px 32px; background:var(--bg-card); border-radius:var(--radius);
  border:1px solid var(--border); padding:20px; overflow-x:auto;
}
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.cal-grid .day-label { font-size:0.7rem; color:var(--text-muted); font-weight:600; padding:8px 0; }
.cal-grid .day {
  padding:10px 0; border-radius:8px; font-size:0.85rem; cursor:pointer; transition:all 0.15s;
}
.cal-grid .day:hover { background:var(--bg-secondary); }
.cal-grid .day.today { background:var(--accent); color:#fff; font-weight:600; }
.cal-grid .day.has-event { position:relative; }
.cal-grid .day.has-event::after {
  content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--chrome-dark);
}
.cal-grid .day.empty { visibility:hidden; }

.event-card {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  padding:20px; display:flex; gap:16px; margin-bottom:12px; cursor:pointer;
  transition:all 0.2s;
}
.event-card:hover { box-shadow:var(--shadow); }
.event-card .event-date {
  text-align:center; min-width:52px;
}
.event-card .event-date .month { font-size:0.7rem; color:var(--chrome-dark); font-weight:600; text-transform:uppercase; }
.event-card .event-date .day { font-size:1.6rem; font-weight:700; line-height:1; }
.event-card .event-info h3 { font-size:0.95rem; font-weight:600; margin-bottom:4px; }
.event-card .event-info .event-loc { font-size:0.8rem; color:var(--text-secondary); display:flex; align-items:center; gap:4px; }
.event-card .event-info .event-attendees { font-size:0.75rem; color:var(--text-muted); margin-top:8px; }
.event-card .event-info .event-type {
  display:inline-block; padding:2px 10px; border-radius:10px; font-size:0.7rem;
  font-weight:500; background:var(--bg-secondary); margin-top:8px;
}

/* ─── PWA INSTALL BANNER ─── */
.install-banner {
  display:none; position:fixed; bottom:70px; left:50%; transform:translateX(-50%);
  z-index:1500; background:var(--accent); color:#fff; padding:14px 24px;
  border-radius:var(--radius); box-shadow:var(--shadow-lg); max-width:420px;
  width:calc(100% - 32px); animation:slideUp 0.4s ease;
}
@keyframes slideUp {
  from { transform:translateX(-50%) translateY(40px); opacity:0; }
  to { transform:translateX(-50%) translateY(0); opacity:1; }
}
.install-banner .ib-content { display:flex; align-items:center; gap:14px; }
.install-banner .ib-icon {
  width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#D4D4D4,#A8A8A8);
  display:flex; align-items:center; justify-content:center; font-weight:900;
  font-size:0.9rem; color:#1A1A1A; flex-shrink:0; font-family:'Orbitron',sans-serif;
}
.install-banner .ib-text h4 { font-size:0.85rem; margin-bottom:2px; }
.install-banner .ib-text p { font-size:0.72rem; color:#AAA; }
.install-banner .ib-actions { display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }
.install-banner .ib-actions button {
  padding:8px 18px; border-radius:8px; font-size:0.8rem; font-weight:600;
  cursor:pointer; border:none; transition:all 0.2s;
}
.install-banner .ib-install { background:linear-gradient(135deg,#E0E0E0,#A8A8A8); color:#1A1A1A; }
.install-banner .ib-install:hover { transform:scale(1.02);

 }
.install-banner .ib-dismiss { background:transparent; color:#888; }

/* iOS install instructions */
.ios-instructions {
  display:none; position:fixed; bottom:70px; left:50%; transform:translateX(-50%);
  z-index:1500; background:var(--accent); color:#fff; padding:18px 24px;
  border-radius:var(--radius); box-shadow:var(--shadow-lg); max-width:380px;
  width:calc(100% - 32px); text-align:center; animation:slideUp 0.4s ease;
}
.ios-instructions p { font-size:0.82rem; line-height:1.5; margin-bottom:8px; }
.ios-instructions .ios-icon { font-size:1.2rem; vertical-align:middle; }
.ios-instructions button {
  margin-top:8px; padding:6px 16px; border-radius:8px; background:transparent;
  color:#888; border:none; cursor:pointer; font-size:0.8rem;
}

/* ─── MARKETPLACE ─── */
.market-card {
  background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border);
  overflow:hidden; cursor:pointer; transition:all 0.25s;
}
.market-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.market-card .market-img {
  height:200px; background:var(--bg-secondary); display:flex; align-items:center;
  justify-content:center; font-size:2.5rem; color:var(--chrome-dark); position:relative;
}
.market-card .market-img .price-tag {
  position:absolute; bottom:12px; left:12px; padding:4px 12px; border-radius:8px;
  background:rgba(0,0,0,0.8); color:#fff; font-weight:600; font-size:0.9rem;
}
.market-card .market-info { padding:16px; }
.market-card .market-info h3 { font-size:0.95rem; font-weight:600; margin-bottom:4px; }
.market-card .market-info .seller { font-size:0.8rem; color:var(--text-secondary); }
.market-card .market-info .condition {
  display:inline-block; padding:2px 10px; border-radius:10px; font-size:0.7rem;
  font-weight:500; background:var(--bg-secondary); margin-top:8px;
}

/* ─── SEARCH BAR ─── */
.search-bar {
  margin:0 0 24px; position:relative;
}
.search-bar input {
  width:100%; padding:14px 20px 14px 48px; border-radius:var(--radius);
  border:1px solid var(--border); font-size:0.9rem; background:var(--bg-card);
  outline:none; transition:all 0.2s; font-family:inherit; color:var(--text-primary);
}
.search-bar input:focus { border-color:var(--chrome-dark); box-shadow:0 0 0 3px rgba(192,192,192,0.2); }
.search-bar i.fa-search {
  position:absolute; left:18px; top:16px;
  color:var(--text-muted); z-index:2;
}

/* ── Search History Dropdown ── */
.search-history-dropdown {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:50;
  background:var(--bg-card); border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,0.15); max-height:320px; overflow-y:auto;
}
.search-history-dropdown.active { display:block; }
.search-history-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 6px; border-bottom:1px solid var(--border);
}
.search-history-header span {
  font-size:0.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px;
}
.search-history-header button {
  background:none; border:none; color:#1BC402; font-size:0.75rem; font-weight:600;
  cursor:pointer; padding:2px 6px; border-radius:4px; transition:background 0.15s;
}
.search-history-header button:hover { background:rgba(27,196,2,0.1); }
.search-history-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  cursor:pointer; transition:background 0.15s;
}
.search-history-item:hover { background:var(--bg-secondary); }
.search-history-item i.fa-clock-rotate-left {
  color:var(--text-muted); font-size:0.85rem; width:20px; text-align:center;
}
.search-history-item .sh-query {
  flex:1; font-size:0.9rem; color:var(--text-primary); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.search-history-item .sh-remove {
  color:var(--text-muted); font-size:0.75rem; padding:4px;
  cursor:pointer; border-radius:50%; transition:all 0.15s; opacity:0;
}
.search-history-item:hover .sh-remove { opacity:1; }
.search-history-item .sh-remove:hover { color:#ff4444; background:rgba(255,68,68,0.1); }

/* ── Profile Visitors ── */
.profile-visitors-section {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; margin-bottom:14px;
}
.profile-visitors-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.profile-visitors-header span:first-child {
  font-size:0.82rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px;
}
.profile-visitors-header span:first-child i { margin-right:6px; color:#1BC402; }
.visitors-count {
  font-size:0.75rem; color:var(--text-muted); background:var(--bg-secondary);
  padding:2px 8px; border-radius:10px;
}
.profile-visitors-list {
  display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.profile-visitors-list::-webkit-scrollbar { display:none; }
.profile-visitor-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:56px; cursor:pointer; transition:transform 0.15s;
}
.profile-visitor-item:hover { transform:scale(1.05); }
.profile-visitor-avatar {
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  border:2px solid #1BC402; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-chrome); font-family:Orbitron,sans-serif; font-size:0.7rem;
  font-weight:700; color:#fff;
}
.profile-visitor-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-visitor-name {
  font-size:0.65rem; color:var(--text-muted); max-width:56px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
}
.profile-visitor-time {
  font-size:0.55rem; color:var(--text-muted); opacity:0.7;
}

/* ─── FOOTER ─── */
.footer {
  background:#1A1A1A; color:#fff; padding:60px 24px 32px; margin-top:60px;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; max-width:1200px; margin:0 auto 40px; }
.footer h4 { font-family:'Orbitron',sans-serif; font-size:0.85rem; margin-bottom:16px; letter-spacing:1px; }
.footer p, .footer a { font-size:0.8rem; color:#D4D4D4; line-height:2; }
.footer a:hover { color:#FFFFFF; }
.footer-sponsor-cta { background:linear-gradient(135deg, rgba(27,196,2,0.12) 0%, rgba(21,160,2,0.08) 100%); border:1px solid rgba(27,196,2,0.25); border-radius:12px; padding:24px 32px; margin:0 auto 32px; max-width:1200px; }
.sponsor-cta-content { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sponsor-cta-icon { font-size:2rem; color:#1BC402; flex-shrink:0; }
.sponsor-cta-content h4 { font-family:'Orbitron',sans-serif; font-size:0.9rem; margin:0 0 4px; letter-spacing:1px; color:#fff; }
.sponsor-cta-content p { font-size:0.8rem; color:#D4D4D4; margin:0; line-height:1.5; }
.sponsor-cta-btn { margin-left:auto; padding:10px 24px; background:linear-gradient(135deg,#1BC402,#15A002); color:#fff; border:none; border-radius:8px; font-family:'Orbitron',sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:1px; text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; }
.sponsor-cta-btn:hover { transform:translateY(-2px); box-shadow:0 4px 15px rgba(27,196,2,0.4); }
@media(max-width:768px) { .sponsor-cta-content { flex-direction:column; text-align:center; } .sponsor-cta-btn { margin-left:0; width:100%; text-align:center; } }
.footer-bottom { text-align:center; padding-top:24px; border-top:1px solid #444; font-size:0.75rem; color:#B0B0B0; }

/* ─── MODAL ─── */
.modal-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5); z-index:2000; align-items:center;
  justify-content:center; backdrop-filter:blur(4px);
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--bg-card); border-radius:16px; max-width:480px; width:90%;
  padding:32px; position:relative; max-height:90vh; overflow-y:auto;
}
.modal .close-modal {
  position:absolute; top:16px; right:16px; background:none; border:none;
  font-size:1.2rem; cursor:pointer; color:var(--text-muted); padding:4px;
}
.modal h2 { font-family:'Orbitron',sans-serif; font-size:1.2rem; margin-bottom:20px; }
.modal .form-group { margin-bottom:16px; }
.modal label { display:block; font-size:0.8rem; font-weight:500; margin-bottom:6px; color:var(--text-secondary); }
.modal input, .modal select, .modal textarea {
  width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:0.9rem; font-family:inherit; outline:none; transition:border-color 0.2s;
  color:var(--text-primary); background:var(--bg-secondary);
}
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color:var(--chrome-dark); }

/* ─── TOAST ─── */
.toast {
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(100px);
  background:#333; color:#fff; padding:12px 20px 12px 20px; border-radius:10px;
  font-size:0.85rem; font-weight:500; z-index:3000; transition:transform 0.3s ease, opacity 0.3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.35); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px; max-width:90vw;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.toast-msg { flex:1; }
.toast-close {
  background:none; border:none; color:rgba(255,255,255,0.7); font-size:1.1rem;
  cursor:pointer; padding:0 0 0 4px; line-height:1; flex-shrink:0;
}
.toast-close:hover { color:#fff; }
.toast.toast-success { background:#27ae60; }
.toast.toast-error { background:#e74c3c; }

/* ─── SHARE MENU ─── */
@keyframes slideUpShare { from { transform:translateY(100%); } to { transform:translateY(0); } }
.shareable-toggle { display:flex;align-items:center;gap:8px;margin-top:6px;font-size:0.78rem;color:var(--text-muted); }
.shareable-toggle input { width:16px;height:16px;accent-color:var(--chrome);cursor:pointer; }
.shareable-toggle label { cursor:pointer; }

/* ─── STYLE CHIPS ─── */
.style-chip {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:20px;
  font-size:0.78rem; color:var(--text-secondary); cursor:pointer; transition:all 0.2s;
  user-select:none;
}
.style-chip:hover { border-color:var(--accent); color:var(--text-primary); }
.style-chip input { display:none; }
.style-chip:has(input:checked) { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }

/* ─── RIDERS SEARCH ─── */
.riders-search-container { margin-bottom:32px; }
.riders-search-header { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.riders-search-header input { flex:1; min-width:200px; padding:12px 16px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary);
  font-size:0.95rem; outline:none; }
.riders-search-header input:focus { border-color:var(--chrome-dark); }
.riders-search-header select { padding:12px 14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.9rem; cursor:pointer; }
.riders-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rider-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  padding:20px; text-align:center; transition:all 0.2s; cursor:pointer; }
.rider-card:hover { border-color:var(--chrome-dark); transform:translateY(-2px); box-shadow:var(--shadow); }
.rider-card-avatar { width:80px; height:80px; border-radius:50%;
  background:var(--gradient-chrome); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.2rem; margin:0 auto 12px; }
.rider-card h3 { font-size:0.95rem; font-weight:600; margin-bottom:4px; }
.rider-card .username { font-size:0.8rem; color:var(--text-secondary); margin-bottom:8px; }
.rider-card .location { font-size:0.8rem; color:var(--text-muted); margin-bottom:6px; }
.rider-card .bike { font-size:0.75rem; color:var(--text-muted); margin-bottom:8px; }
.rider-card .style { font-size:0.75rem; padding:2px 8px; background:var(--bg-secondary);
  border-radius:6px; display:inline-block; margin-bottom:12px; }
.rider-card-actions { display:flex; gap:8px; }
.rider-card .btn-follow { flex:1; padding:8px 12px; font-size:0.8rem; }

/* ─── PROFILE REDESIGN ─── */
.profile-hero { position:relative; height:280px; background:var(--gradient-dark);
  border-radius:16px; margin-bottom:-60px; z-index:0; }
.profile-container { position:relative; z-index:1; }
.profile-header-card { background:var(--bg-card); border-radius:16px; padding:40px 24px 24px;
  margin-bottom:24px; border:1px solid var(--border); }
.profile-avatar-large { width:120px; height:120px; border-radius:50%;
  background:var(--gradient-chrome); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.5rem; margin:-80px auto 16px; border:4px solid var(--bg-card);
  position:relative; }
.profile-avatar-edit { position:absolute; bottom:0; right:0; background:var(--accent);
  border:2px solid var(--bg-card); border-radius:50%; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; font-size:0.8rem;
  cursor:pointer; color:var(--bg-primary); }
.profile-info h1 { font-size:1.4rem; font-weight:700; margin-bottom:4px; text-align:center; }
.profile-handle { text-align:center; color:var(--text-secondary); font-size:0.9rem; margin-bottom:12px; }
.profile-bio { text-align:center; color:var(--text-secondary); font-size:0.95rem;
  line-height:1.6; max-width:500px; margin:0 auto 20px; }
.profile-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.profile-stat { background:var(--bg-secondary); padding:16px; border-radius:12px; text-align:center; }
.profile-stat-num { font-size:1.5rem; font-weight:700; }
.profile-stat-label { font-size:0.75rem; color:var(--text-muted); margin-top:4px; text-transform:uppercase; }
.profile-actions { display:flex; gap:8px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.profile-section { background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  padding:24px; margin-bottom:20px; }
.profile-section h2 { font-size:1rem; font-weight:700; margin-bottom:16px; }

/* ─── RESPONSIVE ─── */
@media(max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .topnav nav { display:none; }
  .mobile-nav { display:block; }
  .hero { padding:40px 24px; margin:0 12px; border-radius:16px; }
  .hero h1 { font-size:2rem; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .section { padding:0 16px; }
  .stats-bar { gap:24px; flex-wrap:wrap; }
  .profile-banner { height:160px; }
  .profile-header-wrap { padding:0 16px; }
  .profile-avatar { width:110px; height:110px; font-size:1.8rem; }
  .profile-details h1 { font-size:1.25rem; }
  .profile-stats { grid-template-columns:repeat(3,1fr); gap:0; padding:16px 0; }
  .profile-stats .ps-item:nth-child(3)::after { display:none; }
  .profile-stats .ps-item:nth-child(n+4) { border-top:1px solid var(--border); padding-top:12px; margin-top:8px; }
  .profile-tabs button { padding:12px 16px; font-size:0.8rem; }
  .bike-gallery { grid-template-columns:repeat(2,1fr); }
  .mftrn-hero { padding:32px 20px; margin:0 12px; }
  .mftrn-hero h1 { font-size:1.6rem; }
  .map-container { margin:0 12px; height:350px; }
  .footer-grid { grid-template-columns:1fr; }
  .page { padding-bottom:80px; }
  .dating-card .dating-photo { height:200px; }
}




/* ─── FORM GROUP (modals) ─── */
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:10px 14px; background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:8px; color:var(--text-primary); font-size:0.9rem; outline:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--chrome); }
.form-group label { display:block; font-size:0.8rem; color:var(--text-secondary); margin-bottom:4px; font-weight:500; }
.form-group { margin-bottom:14px; }
.form-group select { appearance:none; cursor:pointer; }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  position:relative; width:52px; height:28px; border-radius:14px;
  background:var(--border); cursor:pointer; transition:background 0.3s;
  display:inline-flex; align-items:center; padding:0 4px;
}
.theme-toggle.dark { background:#444; }
.theme-toggle .toggle-thumb {
  width:20px; height:20px; border-radius:50%; background:#fff;
  transition:transform 0.3s; display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.theme-toggle.dark .toggle-thumb { transform:translateX(24px); }
.theme-switch-wrap {
  display:flex; align-items:center; gap:10px; margin-left:auto;
}
.theme-switch-wrap span { font-size:0.75rem; color:var(--text-muted); }


/* ─── HASHTAGS ─── */
.hashtag {
  color:var(--chrome); cursor:pointer; font-weight:600;
  transition:color 0.2s; white-space:nowrap;
}
.hashtag:hover { color:var(--chrome-dark); text-decoration:underline; }
.trending-tags {
  display:flex; gap:8px; flex-wrap:wrap;
}
.trending-tag {
  padding:5px 12px; border-radius:16px; font-size:0.73rem; font-weight:600;
  cursor:pointer; transition:all 0.2s;
  background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border);
}
.trending-tag:hover { background:var(--accent); color:var(--bg-primary); }
.trending-tag.active { background:var(--accent); color:var(--bg-primary); }
.feed-search {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:16px;
}
.feed-search input {
  flex:1; border:none; background:transparent; outline:none;
  font-size:0.9rem; color:var(--text-primary);
}
.feed-search input::placeholder { color:var(--text-muted); }
.feed-search i { color:var(--text-muted); }
.search-results-info {
  padding:8px 16px; margin-bottom:12px; border-radius:8px;
  background:var(--bg-secondary); font-size:0.8rem; color:var(--text-secondary);
  display:none; align-items:center; justify-content:space-between;
}
.search-results-info a { color:var(--accent); cursor:pointer; font-weight:600; }

/* ─── CAPTCHA ─── */
.captcha-box {
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px;
  padding:16px; margin-bottom:16px; text-align:center;
}
.captcha-challenge {
  font-family:'Orbitron',sans-serif; font-size:1.8rem; font-weight:700;
  color:var(--text-primary); letter-spacing:4px; margin-bottom:12px;
  padding:12px; background:var(--bg-card); border-radius:8px;
  user-select:none; position:relative; overflow:hidden;
}
.captcha-challenge::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(128,128,128,0.1) 10px, rgba(128,128,128,0.1) 20px);
}
.captcha-challenge .captcha-line {
  position:absolute; top:50%; left:0; right:0; height:2px;
  background:var(--text-muted); opacity:0.4; transform:rotate(-3deg);
}
.captcha-input {
  width:100%; padding:10px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:6px; text-align:center; font-size:1.1rem; letter-spacing:4px;
  color:var(--text-primary); outline:none; font-family:'Orbitron',sans-serif;
}
.captcha-input:focus { border-color:var(--chrome); }
.captcha-label { font-size:0.75rem; color:var(--text-muted); margin-bottom:8px; }
.captcha-refresh {
  font-size:0.8rem; color:var(--accent); cursor:pointer; margin-top:8px;
  display:inline-block;
}
.captcha-refresh:hover { text-decoration:underline; }

/* ─── PASSWORD STRENGTH ─── */
.pw-strength {
  height:4px; border-radius:2px; margin-top:6px; transition:all 0.3s;
  background:var(--bg-secondary);
}
.pw-strength-bar {
  height:100%; border-radius:2px; transition:width 0.3s, background 0.3s;
  width:0;
}
.pw-strength-text { font-size:0.7rem; margin-top:4px; color:var(--text-muted); }
.pw-requirements {
  font-size:0.7rem; color:var(--text-muted); margin-top:8px; line-height:1.6;
}
.pw-req { display:flex; align-items:center; gap:6px; }
.pw-req.met { color:#48BB78; }
.pw-req.met i { color:#48BB78; }
.pw-req i { font-size:0.6rem; color:var(--text-muted); }


/* ─── ONLINE STATUS ─── */
.status-dot {
  width:12px; height:12px; border-radius:50%; display:inline-block;
  border:2px solid var(--bg-card);
}
.status-dot.online { background:#48BB78; }
.status-dot.offline { background:#A0AEC0; }
.status-dot.invisible { background:transparent; border:2px solid #A0AEC0; }
.status-selector {
  display:flex; gap:10px; flex-wrap:wrap;
}
.status-option {
  display:flex; align-items:center; gap:8px; padding:10px 16px;
  border-radius:8px; border:1px solid var(--border); cursor:pointer;
  background:var(--bg-secondary); transition:all 0.2s; font-size:0.85rem;
  color:var(--text-primary);
}
.status-option:hover { border-color:var(--chrome); }
.status-option.active { border-color:var(--accent); background:var(--bg-card); font-weight:600; }
.status-option .status-label { font-size:0.7rem; color:var(--text-muted); display:block; }
.profile-status-badge {
  position:absolute; bottom:4px; right:4px; width:16px; height:16px;
  border-radius:50%; border:3px solid var(--bg-primary);
}
.profile-status-badge.online { background:#48BB78; }
.profile-status-badge.offline { background:#A0AEC0; }
.profile-status-badge.invisible { display:none; }

/* ─── SIGN-UP GATE ─── */
.auth-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000;
  background:#1A1A1A; overflow-y:auto;
}
.auth-container {
  max-width:480px; margin:0 auto; padding:40px 24px; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
}
.auth-logo {
  font-family:'Orbitron',sans-serif; font-size:2rem; font-weight:900;
  color:#fff; text-align:center; margin-bottom:8px;
}
.auth-logo span { background:var(--gradient-chrome); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.auth-tagline { text-align:center; color:#888; font-size:0.9rem; margin-bottom:16px; }

.auth-login-bar {
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:28px; padding:20px 24px;
  background:linear-gradient(135deg, #2A2A2A, #333); border:2px solid #C0C0C0; border-radius:12px;
  box-shadow:0 4px 20px rgba(192,192,192,0.15);
}
.auth-login-bar span { color:#fff; font-size:1.15rem; font-weight:600; }
.auth-login-bar a {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:10px; font-size:1.15rem; font-weight:800;
  color:#1A1A1A; background:var(--gradient-chrome); cursor:pointer;
  text-decoration:none; transition:all 0.2s; letter-spacing:0.5px;
}
.auth-login-bar a:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(192,192,192,0.4); }
.auth-login-bar a i { font-size:1rem; }

.auth-previews {
  display:flex; gap:12px; overflow-x:auto; padding:0 0 16px; margin-bottom:32px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
}
.auth-previews::-webkit-scrollbar { display:none; }
.auth-preview-card {
  min-width:200px; background:#2A2A2A; border-radius:12px; padding:20px;
  scroll-snap-align:start; flex-shrink:0; border:1px solid #333;
}
.auth-preview-card i { font-size:1.5rem; color:#C0C0C0; margin-bottom:10px; display:block; }
.auth-preview-card h4 { color:#fff; font-size:0.9rem; margin-bottom:4px; }
.auth-preview-card p { color:#888; font-size:0.75rem; line-height:1.4; }

.auth-form { margin-bottom:24px; }
.auth-form h2 { color:#fff; font-size:1.3rem; font-weight:700; margin-bottom:4px; }
.auth-form .auth-subtitle { color:#888; font-size:0.85rem; margin-bottom:24px; }

.auth-input-group { margin-bottom:16px; }
.auth-input-group label { display:block; color:#ccc; font-size:0.8rem; font-weight:500; margin-bottom:6px; }
.auth-input-group input, .auth-input-group select {
  width:100%; padding:14px 16px; background:#2A2A2A; border:1px solid #444;
  border-radius:8px; color:#fff; font-size:0.9rem; outline:none;
  transition:border-color 0.2s;
}
.auth-input-group input:focus, .auth-input-group select:focus { border-color:#C0C0C0; }
.auth-input-group input::placeholder { color:#666; }
.auth-input-group select { appearance:none; cursor:pointer; }
.auth-input-group select option { background:#2A2A2A; color:#fff; }

.auth-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.auth-btn {
  width:100%; padding:16px; border:none; border-radius:8px; font-size:1rem;
  font-weight:700; cursor:pointer; transition:all 0.2s;
  background:var(--gradient-chrome); color:#1A1A1A;
}
.auth-btn:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(192,192,192,0.3); }
.auth-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

.auth-divider {
  display:flex; align-items:center; gap:16px; margin:20px 0; color:#555; font-size:0.8rem;
}
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:#333; }

.auth-switch { text-align:center; color:#FFF; font-size:1.2rem; margin-top:24px; padding:16px; background:#2A2A2A; border-radius:10px; border:1px solid #444; }
.auth-switch a { color:#1A1A1A; font-weight:800; cursor:pointer; text-decoration:none; font-size:1.15rem; padding:10px 24px; background:var(--gradient-chrome); border-radius:8px; display:inline-block; margin-top:8px; transition:all 0.2s; }
.auth-switch a:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(192,192,192,0.3); }

.auth-terms { text-align:center; color:#555; font-size:0.7rem; margin-top:16px; line-height:1.5; }
.auth-terms a { color:#888; text-decoration:underline; }

.auth-features {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:24px;
}
.auth-feature {
  display:flex; align-items:center; gap:8px; color:#aaa; font-size:0.75rem;
}
.auth-feature i { color:#C0C0C0; font-size:0.7rem; }

/* --- RIDER SEARCH --- */
.rider-search-section { padding:20px 0; }
.rider-search-bar { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.rider-search-bar input {
  flex:1; min-width:200px; padding:12px 16px; background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:8px; color:var(--text-primary); font-size:0.9rem; outline:none;
}
.rider-search-bar input:focus { border-color:#C0C0C0; }
.rider-search-bar input::placeholder { color:var(--text-muted); }
.rider-search-bar select {
  padding:12px 16px; background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:8px; color:var(--text-primary); font-size:0.9rem; outline:none; cursor:pointer;
  appearance:none; min-width:160px;
}
.rider-search-bar select option { background:var(--bg-secondary); color:var(--text-primary); }
.rider-search-bar button {
  padding:12px 24px; background:var(--gradient-chrome); color:#111; font-weight:700;
  border:none; border-radius:8px; cursor:pointer; font-size:0.9rem;
}
.rider-search-bar button:hover { box-shadow:0 4px 16px rgba(192,192,192,0.3); }
.rider-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.rider-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px;
  display:flex; flex-direction:column; align-items:center; text-align:center; transition:all 0.2s;
}
.rider-card:hover { border-color:#C0C0C0; transform:translateY(-2px); }
.rider-card-avatar {
  width:64px; height:64px; border-radius:50%; background:var(--gradient-chrome);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem;
  color:#111; margin-bottom:12px;
}
.rider-card-name { font-weight:700; font-size:1rem; color:var(--text-primary); }
.rider-card-handle { font-size:0.8rem; color:var(--text-secondary); margin-bottom:4px; }
.rider-card-location { font-size:0.8rem; color:var(--text-muted); margin-bottom:8px; }
.rider-card-location i { margin-right:4px; }
.rider-card-bike { font-size:0.8rem; color:var(--text-secondary); margin-bottom:12px; }
.rider-card-actions { display:flex; gap:8px; width:100%; }
.rider-card-actions button {
  flex:1; padding:8px 12px; border-radius:6px; font-size:0.8rem; font-weight:600; cursor:pointer; border:none; transition:all 0.2s;
}
.btn-follow { background:var(--gradient-chrome); color:#111; }
.btn-follow:hover { box-shadow:0 2px 8px rgba(192,192,192,0.3); }
.btn-following { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border) !important; }
.btn-message { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border) !important; max-width:40px; }
.btn-message:hover { background:var(--bg-card); border-color:var(--chrome) !important; color:var(--chrome); }
.btn-rider-menu { background:var(--bg-secondary); color:var(--text-secondary); max-width:40px; }
.rider-dropdown { position:relative; display:inline-block; }
.rider-dropdown-content {
  display:none; position:absolute; right:0; bottom:100%; background:var(--bg-card);
  border:1px solid var(--border); border-radius:8px; min-width:150px; z-index:100;
  box-shadow:0 4px 16px rgba(0,0,0,0.3); overflow:hidden;
}
.rider-dropdown-content.show { display:block; }
.rider-dropdown-content button {
  width:100%; padding:10px 16px; background:none; border:none; color:var(--text-primary);
  font-size:0.85rem; text-align:left; cursor:pointer; max-width:none;
}
.rider-dropdown-content button:hover { background:var(--bg-secondary); }
.rider-dropdown-content button.danger { color:#e74c3c; }
.rider-no-results { text-align:center; padding:40px; color:var(--text-muted); font-size:0.95rem; }

/* ── Online Status Indicator ── */
.online-dot {
  width:12px; height:12px; border-radius:50%; background:#48BB78;
  border:2px solid var(--bg-card); position:absolute; bottom:2px; right:2px;
  box-shadow:0 0 0 1px rgba(72,187,120,0.3);
}
.online-dot-sm { width:10px; height:10px; border-width:1.5px; }
.online-dot-lg { width:14px; height:14px; border-width:2.5px; }
.rider-card-avatar { position:relative; }
.online-filter-active {
  background:#48BB78 !important; color:#fff !important; border-color:#48BB78 !important;
}

/* --- REPORT MODAL --- */
.report-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.6); z-index:3000; align-items:center; justify-content:center;
}
.report-overlay.show { display:flex; }
.report-modal {
  background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
  padding:32px; max-width:420px; width:90%;
}
.report-modal h3 { font-size:1.1rem; margin-bottom:16px; color:var(--text-primary); }
.report-modal select, .report-modal textarea {
  width:100%; padding:12px; background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:8px; color:var(--text-primary); font-size:0.9rem; margin-bottom:12px; outline:none;
}
.report-modal select option { background:var(--bg-secondary); }
.report-modal textarea { min-height:100px; resize:vertical; font-family:inherit; }
.report-modal-actions { display:flex; gap:12px; justify-content:flex-end; }
.report-modal-actions button {
  padding:10px 20px; border-radius:8px; font-size:0.9rem; font-weight:600; cursor:pointer; border:none;
}
.report-cancel { background:var(--bg-secondary); color:var(--text-secondary); }
.report-submit { background:#e74c3c; color:#fff; }

/* ─── DM CSS handled by IIFE module ─── */

/* ═══════════════ Animation Styles ═══════════════ */

      @keyframes claude-pulse {
        0% {
          box-shadow: 
            inset 0 0 10px rgba(217, 119, 87, 0.5),
            inset 0 0 20px rgba(217, 119, 87, 0.3),
            inset 0 0 30px rgba(217, 119, 87, 0.1);
        }
        50% {
          box-shadow: 
            inset 0 0 15px rgba(217, 119, 87, 0.7),
            inset 0 0 25px rgba(217, 119, 87, 0.5),
            inset 0 0 35px rgba(217, 119, 87, 0.2);
        }
        100% {
          box-shadow: 
  

          inset 0 0 10px rgba(217, 119, 87, 0.5),
            inset 0 0 20px rgba(217, 119, 87, 0.3),
            inset 0 0 30px rgba(217, 119, 87, 0.1);
        }
      }

/* ═══ DOUBLE-TAP HEART ANIMATION ═══ */
.dbl-tap-heart {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 80px;
  color: #ff4757;
  pointer-events: none;
  z-index: 100;
  animation: heartPop 0.85s ease-out forwards;
  text-shadow: 0 2px 20px rgba(255,71,87,0.5);
}
@keyframes heartPop {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  15% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
  30% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.2); opacity: 0; }
}

/* ═══ PHOTO GRID VIEW ═══ */
.grid-toggle-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}
.grid-toggle-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}
.grid-toggle-btn.active {
  color: var(--accent, #D97757);
  background: rgba(217,119,87,0.1);
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.photo-grid-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-secondary);
}
.photo-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.photo-grid-item:hover img {
  transform: scale(1.05);
}
.photo-grid-item .grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}
.photo-grid-item:hover .grid-overlay {
  opacity: 1;
}
.photo-grid-item .video-badge-grid {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
}

/* ═══ PINNED POST INDICATOR ═══ */
.pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(217,119,87,0.15);
  color: var(--accent, #D97757);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: 500;
}
.pin-post-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.85rem;
}
.pin-post-btn:hover { color: var(--accent, #D97757); }

/* ═══════════════ EVENTS & RIDES ═══════════════ */
.event-filter-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.event-filter-btn:hover {
  border-color: var(--chrome, #D97757);
  color: var(--chrome, #D97757);
}
.event-filter-btn.active {
  background: var(--chrome, #D97757);
  color: #fff;
  border-color: var(--chrome, #D97757);
}
.event-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.event-map-marker {
  background: transparent !important;
  border: none !important;
}
#eventsMapContainer .leaflet-container {
  font-family: inherit;
}
#eventMapPicker .leaflet-container {
  cursor: crosshair !important;
}

/* ── Event View Toggle ── */
.event-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.evt-toggle-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.evt-toggle-btn.active {
  background: var(--chrome, #D97757);
  color: #fff;
}
.evt-toggle-btn:hover:not(.active) {
  color: var(--text-primary);
}

/* Full-screen map mode */
#eventsMapContainer.map-fullscreen {
  height: calc(100vh - 220px) !important;
  border-radius: 12px;
}

/* User location pulsing dot */
.user-location-dot {
  background: transparent !important;
  border: none !important;
}
.user-loc-pulse {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4285F4;
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(66,133,244,0.4), 0 2px 6px rgba(0,0,0,0.3);
  animation: locPulse 2s ease-out infinite;
}
@keyframes locPulse {
  0% { box-shadow: 0 0 0 0 rgba(66,133,244,0.4), 0 2px 6px rgba(0,0,0,0.3); }
  70% { box-shadow: 0 0 0 14px rgba(66,133,244,0), 0 2px 6px rgba(0,0,0,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(66,133,244,0), 0 2px 6px rgba(0,0,0,0.3); }
}

/* Marker cluster overrides for dark theme */
.marker-cluster-small {
  background-color: rgba(217,119,87,0.3) !important;
}
.marker-cluster-small div {
  background-color: var(--chrome, #D97757) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
}
.marker-cluster-medium {
  background-color: rgba(231,76,60,0.3) !important;
}
.marker-cluster-medium div {
  background-color: #e74c3c !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
}
.marker-cluster-large {
  background-color: rgba(142,68,173,0.3) !important;
}
.marker-cluster-large div {
  background-color: #8e44ad !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
}

/* Near Me button */
#nearMeBtn {
  transition: transform 0.15s, background 0.15s;
}
#nearMeBtn:hover {
  transform: scale(1.1);
  background: var(--chrome, #D97757) !important;
  color: #fff !important;
}

/* ── Event Chat ── */
.event-chat-container {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.event-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
  cursor: pointer;
}
.event-chat-header h3 {
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.event-chat-header .chat-toggle-icon {
  transition: transform 0.2s;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.event-chat-header .chat-toggle-icon.open {
  transform: rotate(180deg);
}
.event-chat-messages {
  max-height: 360px;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
.event-chat-messages::-webkit-scrollbar {
  width: 4px;
}
.event-chat-messages::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}
.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
  animation: chatFadeIn 0.2s ease;
}
.chat-msg.own {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
}
.chat-msg-body {
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  position: relative;
}
.chat-msg.own .chat-msg-body {
  background: var(--chrome, #D97757);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.chat-msg-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--chrome, #D97757);
  margin-bottom: 2px;
}
.chat-msg.own .chat-msg-name {
  color: rgba(255,255,255,0.7);
  text-align: right;
}
.chat-msg-text {
  font-size: 0.88rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-msg-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 3px;
  opacity: 0.7;
}
.chat-msg.own .chat-msg-time {
  text-align: right;
  color: rgba(255,255,255,0.5);
}
.event-chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
  align-items: center;
}
.event-chat-input-bar input {
  flex: 1;
  background: var(--bg-primary, #0a0a0a);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--text-primary);
  font-size: 0.88rem;
  outline: none;
}
.event-chat-input-bar input:focus {
  border-color: var(--chrome, #D97757);
}
.event-chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--chrome, #D97757);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.event-chat-send-btn:hover {
  transform: scale(1.08);
}
.event-chat-send-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.chat-empty-state {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.chat-empty-state i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 8px;
  opacity: 0.4;
}
.chat-date-divider {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 8px 0 4px;
  opacity: 0.6;
}
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════ FEEDBACK / REPORT SYSTEM ═══════════════ */
.feedback-fab {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-chrome);
  color: #1A1A1A;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fabPulse 2s ease-in-out 1;
}
.feedback-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
@keyframes fabPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.feedback-type-pills {
  display: flex;
  gap: 8px;
}
.feedback-pill {
  flex: 1;
  padding: 10px 8px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  white-space: nowrap;
}
.feedback-pill:hover {
  border-color: var(--chrome);
  color: var(--text-primary);
}
.feedback-pill.active {
  background: var(--gradient-chrome);
  color: #1A1A1A;
  border-color: transparent;
}
.feedback-pill i {
  margin-right: 4px;
}
.feedback-category {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  appearance: auto;
}
.feedback-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  resize: vertical;
  font-family: inherit;
}
.feedback-textarea:focus,
.feedback-category:focus {
  outline: none;
  border-color: var(--chrome);
}
.feedback-submit {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: var(--gradient-chrome);
  color: #1A1A1A;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.feedback-submit:hover { opacity: 0.9; }
.feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.feedback-success-icon {
  font-size: 3rem;
  color: #2ecc71;
  animation: fbSuccessBounce 0.5s ease;
}
@keyframes fbSuccessBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.feedback-history-item {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.feedback-history-item .fb-hist-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.feedback-history-item .fb-type-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fb-type-badge.report { background: #e74c3c30; color: #e74c3c; }
.fb-type-badge.bug { background: #f39c1230; color: #f39c12; }
.fb-type-badge.idea { background: #3498db30; color: #3498db; }
.fb-status-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: auto;
}
.fb-status-pill.open { background: #2ecc7130; color: #2ecc71; }
.fb-status-pill.reviewed { background: #3498db30; color: #3498db; }
.fb-status-pill.closed { background: #95a5a630; color: #95a5a6; }
.fb-status-pill.resolved { background: #9b59b630; color: #9b59b6; }
@media (max-width: 768px) {
  .feedback-fab { bottom: 80px; right: 16px; }
}

/* ═══ Story Highlights ═══ */
.highlights-row{padding:8px 0 4px;overflow:hidden;}
.highlights-scroll{display:flex;gap:14px;overflow-x:auto;padding:4px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.highlights-scroll::-webkit-scrollbar{display:none;}
.highlight-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex-shrink:0;width:68px;}
.highlight-circle{width:62px;height:62px;border-radius:50%;border:2px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);transition:border-color .2s;}
.highlight-circle:hover{border-color:var(--chrome);}
.highlight-circle img{width:100%;height:100%;object-fit:cover;}
.highlight-circle .hl-icon{font-size:1.4rem;color:var(--text-muted);}
.highlight-title{font-size:0.68rem;color:var(--text-secondary);max-width:68px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.highlight-add-item .highlight-circle{border:2px dashed var(--text-muted);}
.highlight-add-item .highlight-circle:hover{border-color:var(--chrome);}

/* Highlight picker */
.highlight-picker-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;justify-content:center;align-items:center;}
.highlight-picker-overlay.active{display:flex;}
.highlight-picker-modal{background:var(--bg-card);border-radius:16px;width:90%;max-width:380px;max-height:70vh;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
.highlight-picker-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);}
.highlight-picker-header h3{font-size:1rem;margin:0;color:var(--text-primary);}
.highlight-picker-body{padding:12px 16px;overflow-y:auto;max-height:50vh;}
.highlight-picker-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;cursor:pointer;transition:background .15s;}
.highlight-picker-item:hover{background:var(--bg-secondary);}
.highlight-picker-thumb{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);}
.highlight-picker-thumb img{width:100%;height:100%;object-fit:cover;}
.highlight-picker-name{font-size:0.9rem;font-weight:600;color:var(--text-primary);}
.highlight-picker-count{font-size:0.75rem;color:var(--text-muted);}
.highlight-new-row{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}

/* Highlight viewer */
.highlight-viewer-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9998;flex-direction:column;}
.highlight-viewer-overlay.active{display:flex;}
.highlight-viewer-footer{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;display:flex;align-items:center;gap:8px;z-index:5;}

/* ═══ Password Toggle ═══ */
.pw-toggle-btn{position:absolute;right:8px;top:32px;background:none;border:none;color:var(--text-muted);font-size:0.95rem;cursor:pointer;padding:6px 8px;z-index:2;transition:color .2s;}
.pw-toggle-btn:hover{color:var(--chrome);}

/* ═══ Puzzle CAPTCHA ═══ */
.puzzle-captcha-wrap{margin:16px 0;user-select:none;-webkit-user-select:none;}
.puzzle-canvas-row{position:relative;width:280px;height:160px;margin:0 auto 12px;border-radius:10px;overflow:hidden;background:#222;}
.puzzle-canvas-row canvas{display:block;}
.puzzle-slider-track{width:280px;margin:0 auto;height:42px;background:var(--bg-secondary);border-radius:21px;position:relative;border:1px solid var(--border);overflow:hidden;}
.puzzle-slider-track::after{content:'Slide to verify →';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.78rem;color:var(--text-muted);pointer-events:none;white-space:nowrap;}
.puzzle-slider-thumb{width:42px;height:42px;border-radius:50%;background:var(--chrome);position:absolute;top:0;left:0;cursor:grab;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;box-shadow:0 2px 8px rgba(0,0,0,0.3);transition:background .2s;z-index:2;}
.puzzle-slider-thumb:active{cursor:grabbing;background:var(--accent);}
.puzzle-slider-fill{position:absolute;top:0;left:0;height:100%;background:var(--chrome);opacity:0.15;border-radius:21px;pointer-events:none;z-index:1;}
.puzzle-status{text-align:center;font-size:0.78rem;margin-top:6px;min-height:18px;}
.puzzle-status.success{color:#38A169;}
.puzzle-status.fail{color:#E53E3E;}
.puzzle-retry-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;padding:4px 12px;font-size:0.75rem;cursor:pointer;margin-top:4px;}
.puzzle-retry-btn:hover{border-color:var(--chrome);color:var(--chrome);}

/* ═══════════════ MFTRN PAGE — Interactive ═══════════════ */

/* Height Profile Widget */
.height-profile-prompt{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:0.9rem;}
.height-profile-prompt i{font-size:1.2rem;color:var(--chrome);}
.height-profile-card{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#1A1A2E,#16213E);border-radius:var(--radius);border:1px solid #2a3a5e;}
.hp-info{display:flex;flex-direction:column;gap:6px;}
.hp-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--chrome);font-weight:600;}
.hp-stats{display:flex;gap:20px;}
.hp-stat{display:flex;align-items:center;gap:6px;font-size:0.9rem;color:var(--text-primary);}
.hp-stat i{color:var(--chrome-dark);font-size:0.85rem;}
.height-edit-form{margin-top:12px;padding:16px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border);}
.height-edit-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.height-edit-inner label{font-size:0.85rem;color:var(--text-secondary);font-weight:500;}
.height-edit-actions{display:flex;gap:8px;}

/* Bike Finder Controls */
.mftrn-finder{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:24px;display:flex;flex-direction:column;gap:20px;}
.finder-control label{display:block;font-size:0.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;}
.finder-slider-wrap{display:flex;align-items:center;gap:16px;}
.finder-height-display{font-family:'Orbitron',sans-serif;font-size:1.8rem;font-weight:700;color:var(--chrome);min-width:80px;text-align:center;}
.mftrn-range-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,#1A1A2E,#0F3460,#1A1A2E);outline:none;opacity:0.9;transition:opacity .2s;}
.mftrn-range-slider:hover{opacity:1;}
.mftrn-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--gradient-chrome);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.4);}
.mftrn-range-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--gradient-chrome);cursor:pointer;border:none;box-shadow:0 2px 8px rgba(0,0,0,0.4);}

/* Category Buttons */
.mftrn-cat-btns{display:flex;flex-wrap:wrap;gap:8px;}
.mftrn-cat-btn{padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);font-size:0.8rem;font-weight:500;cursor:pointer;transition:all .2s;}
.mftrn-cat-btn:hover{border-color:var(--chrome);color:var(--chrome);}
.mftrn-cat-btn.active{background:var(--gradient-chrome);color:#1a1a1a;border-color:transparent;font-weight:600;}

/* Bike Results Grid */
.mftrn-bike-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}

/* Bike Recommendation Card V2 */
.bike-rec-card-v2{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;}
.bike-rec-card-v2:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.bike-rec-card-v2.match-great{border-color:#2d6a4f;}
.bike-rec-card-v2.match-ok{border-color:#e6a817;}
.bike-rec-card-v2.match-low{border-color:var(--border);opacity:0.7;}
.bike-rec-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-secondary);}
.bike-emoji{font-size:1.6rem;}
.bike-match-badge{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:4px 10px;border-radius:12px;}
.bike-match-badge.match-great{background:rgba(45,106,79,0.3);color:#52b788;}
.bike-match-badge.match-ok{background:rgba(230,168,23,0.2);color:#e6a817;}
.bike-match-badge.match-low{background:rgba(100,100,100,0.2);color:var(--text-muted);}
.bike-rec-body{padding:16px;}
.bike-rec-body h3{font-size:1rem;font-weight:700;margin-bottom:6px;}
.bike-rec-meta{display:flex;gap:12px;margin-bottom:12px;}
.bike-rec-manufacturer{font-size:0.8rem;color:var(--chrome);font-weight:500;}
.bike-rec-years{font-size:0.8rem;color:var(--text-muted);}
.bike-rec-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.bike-stat{display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--text-secondary);}
.bike-stat i{color:var(--chrome-dark);font-size:0.75rem;width:14px;text-align:center;}
.bike-rec-features{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.bike-feature-tag{font-size:0.7rem;padding:3px 8px;border-radius:10px;background:var(--bg-secondary);color:var(--text-muted);border:1px solid var(--border);}
.mftrn-view-reviews-btn{width:100%;justify-content:center;}

/* Filter Bar */
.mftrn-filter-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.mftrn-select{padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:0.85rem;outline:none;cursor:pointer;}
.mftrn-select:focus{border-color:var(--chrome);}
.mftrn-input{padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:0.85rem;outline:none;flex:1;min-width:160px;}
.mftrn-input:focus{border-color:var(--chrome);}
.mftrn-textarea{width:100%;padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:0.9rem;outline:none;resize:vertical;font-family:'Inter',sans-serif;}
.mftrn-textarea:focus{border-color:var(--chrome);}

/* Reviews List */
.mftrn-reviews-list{display:grid;gap:16px;}

/* Review Card */
.mftrn-review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.review-card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--gradient-chrome);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;flex-shrink:0;overflow:hidden;}
.review-avatar .avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gradient-chrome);color:#1a1a1a;font-weight:700;font-size:0.8rem;}
.review-meta{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.review-username{font-weight:600;font-size:0.9rem;cursor:pointer;transition:color .2s;}
.review-username:hover{color:var(--chrome);}
.review-height-badge{font-size:0.75rem;color:var(--chrome-dark);background:var(--bg-secondary);padding:2px 8px;border-radius:10px;white-space:nowrap;}
.review-height-badge i{margin-right:2px;}
.review-time{font-size:0.75rem;color:var(--text-muted);white-space:nowrap;}
.review-bike-name{font-size:0.85rem;color:var(--chrome);margin-bottom:6px;font-weight:500;}
.review-bike-name i{margin-right:4px;}
.review-stars{color:#F6AD55;font-size:0.85rem;margin-bottom:8px;}
.review-stars .far{color:var(--text-muted);}
.review-text{font-size:0.88rem;color:var(--text-secondary);line-height:1.5;margin-bottom:12px;}
.review-actions{display:flex;gap:12px;}
.review-helpful-btn{background:none;border:1px solid var(--border);color:var(--text-muted);padding:6px 14px;border-radius:20px;font-size:0.78rem;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;}
.review-helpful-btn:hover{border-color:var(--chrome);color:var(--chrome);}
.review-helpful-btn.active{border-color:#52b788;color:#52b788;background:rgba(45,106,79,0.1);}
.helpful-count{font-weight:600;}

/* Review Form Overlay */
.mftrn-review-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;justify-content:center;align-items:center;padding:20px;}
.mftrn-review-overlay.active{display:flex;}
.mftrn-review-modal{background:var(--bg-card);border-radius:16px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
.review-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.review-modal-header h3{font-size:1.1rem;margin:0;}
.review-modal-header .btn-close{background:none;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer;padding:4px;}
.review-modal-header .btn-close:hover{color:var(--text-primary);}
.review-modal-body{padding:20px;}
.review-modal-body .form-group{margin-bottom:16px;}
.review-modal-body .form-group label{display:block;font-size:0.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:6px;}

/* Star Rating Input */
.mftrn-star-rating{font-size:1.5rem;color:var(--text-muted);cursor:pointer;display:flex;gap:4px;}
.mftrn-star-rating .fas.fa-star{color:#F6AD55;}
.mftrn-star-input{transition:color .15s;cursor:pointer;}
.mftrn-star-input:hover{color:#F6AD55 !important;}

/* Autocomplete */
.mftrn-autocomplete{position:absolute;top:100%;left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);max-height:200px;overflow-y:auto;z-index:10;box-shadow:var(--shadow);}
.ac-item{padding:10px 14px;cursor:pointer;font-size:0.85rem;color:var(--text-primary);transition:background .15s;}
.ac-item:hover{background:var(--bg-secondary);}
.ac-item small{color:var(--text-muted);}

/* Ergonomic Mods Grid */
.mftrn-mods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.mftrn-mod-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s;}
.mftrn-mod-card:hover{transform:translateY(-2px);}
.mod-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#1A1A2E,#0F3460);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.mod-icon i{font-size:1.2rem;color:var(--chrome);}
.mftrn-mod-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
.mftrn-mod-card p{font-size:0.85rem;color:var(--text-secondary);line-height:1.5;margin-bottom:12px;}
.mod-price{font-size:0.8rem;color:var(--chrome);font-weight:600;margin-bottom:10px;}
.mod-price i{margin-right:4px;}
.mod-brands{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.mod-brand-tag{font-size:0.7rem;padding:3px 8px;border-radius:10px;background:var(--bg-secondary);color:var(--text-muted);border:1px solid var(--border);}
.mod-protip{font-size:0.78rem;color:var(--text-muted);line-height:1.4;padding:10px 12px;background:var(--bg-secondary);border-radius:var(--radius-sm);border-left:3px solid var(--chrome-dark);}
.mod-protip i{color:#F6AD55;margin-right:4px;}

/* Gear Guide */
.mftrn-gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.mftrn-gear-category{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.gear-cat-header{display:flex;align-items:center;gap:10px;padding:16px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);}
.gear-cat-header i{font-size:1.1rem;color:var(--chrome);}
.gear-cat-header h3{font-size:1rem;font-weight:700;margin:0;}
.gear-items{padding:12px 20px;}
.gear-item{padding:10px 0;border-bottom:1px solid var(--border);}
.gear-item:last-child{border-bottom:none;}
.gear-brand{font-size:0.85rem;font-weight:700;color:var(--text-primary);}
.gear-product{font-size:0.8rem;color:var(--chrome);margin-top:2px;}
.gear-note{font-size:0.78rem;color:var(--text-muted);margin-top:4px;line-height:1.3;}
.gear-tip{padding:12px 20px;background:var(--bg-secondary);border-top:1px solid var(--border);font-size:0.78rem;color:var(--text-muted);line-height:1.4;}
.gear-tip i{color:#F6AD55;margin-right:4px;}

/* Tall Rider Directory Carousel */
.mftrn-directory-scroll{display:flex;gap:14px;overflow-x:auto;padding:4px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.mftrn-directory-scroll::-webkit-scrollbar{display:none;}
.mftrn-dir-card{flex-shrink:0;width:140px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .2s;}
.mftrn-dir-card:hover{transform:translateY(-2px);}
.dir-avatar{width:56px;height:56px;border-radius:50%;background:var(--gradient-chrome);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;overflow:hidden;flex-shrink:0;}
.dir-avatar .avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gradient-chrome);color:#1a1a1a;font-weight:700;}
.dir-name{font-size:0.8rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.dir-height{font-size:0.75rem;color:var(--chrome-dark);}
.dir-height i{margin-right:2px;}
.dir-bike{font-size:0.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.dir-follow-btn{font-size:0.7rem !important;padding:4px 10px !important;}
.dir-follow-btn.active{background:var(--gradient-chrome);color:#1a1a1a;border-color:transparent;}

/* Empty States */
.mftrn-empty{text-align:center;padding:40px 20px;color:var(--text-muted);}
.mftrn-empty i{font-size:2rem;margin-bottom:12px;display:block;}
.mftrn-empty p{font-size:0.9rem;line-height:1.5;}
.mftrn-empty-inline{padding:20px;text-align:center;color:var(--text-muted);font-size:0.85rem;}

/* Common button helpers */
.btn-chrome{background:var(--gradient-chrome);color:#1a1a1a;border:none;padding:10px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:0.85rem;cursor:pointer;transition:opacity .2s;}
.btn-chrome:hover{opacity:0.9;}
.btn-chrome:disabled{opacity:0.5;cursor:not-allowed;}
.btn-sm{padding:6px 14px !important;font-size:0.8rem !important;}

/* MFTRN responsive */
@media(max-width:768px){
  .mftrn-bike-results{grid-template-columns:1fr;}
  .mftrn-mods-grid{grid-template-columns:1fr;}
  .mftrn-gear-grid{grid-template-columns:1fr;}
  .mftrn-filter-bar{flex-direction:column;}
  .mftrn-filter-bar .mftrn-input{min-width:auto;}
  .finder-slider-wrap{flex-direction:column;align-items:stretch;gap:8px;}
  .finder-height-display{text-align:left;}
  .height-profile-card{flex-direction:column;align-items:flex-start;gap:12px;}
  .bike-rec-stats{grid-template-columns:1fr;}
  .mftrn-dir-card{width:120px;padding:12px;}
}

/* ═══════════════════════════════════════════
   RIDING BUDDIES
   ═══════════════════════════════════════════ */

.dating-hero {
  text-align: center;
  padding: 48px 20px 32px;
  background: linear-gradient(135deg, #0D253F 0%, #1A1A2E 40%, #1B2D3D 100%);
  border-bottom: 2px solid #4FC3F730;
}
.dating-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #4FC3F7, #FFD93D, #4FC3F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}

/* Disclaimer Banner */
.riding-buddies-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  max-width: 700px;
  margin: 16px auto;
  padding: 14px 18px;
  background: #FFD93D10;
  border: 1px solid #FFD93D40;
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Emergency Alert Bar */
.rb-emergency-bar {
  max-width: 800px;
  margin: 0 auto 16px;
  text-align: center;
}
.rb-emergency-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 2px solid #FF5252;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF525220, #D32F2F10);
  color: #FF5252;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
  justify-content: center;
}
.rb-emergency-btn:hover {
  background: linear-gradient(135deg, #FF5252, #D32F2F);
  color: white;
  box-shadow: 0 4px 20px rgba(255, 82, 82, 0.4);
  transform: translateY(-1px);
}
.rb-emergency-btn i {
  font-size: 1.1rem;
  animation: emergencyPulse 2s ease infinite;
}
@keyframes emergencyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Section Intro Banners */
.rb-section-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.rb-intro-icon {
  font-size: 1.5rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.rb-section-intro strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.rb-section-intro p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.rb-featured-cta {
  margin-top: 10px !important;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0,188,212,0.08), rgba(0,150,136,0.08));
  border: 1px solid rgba(0,188,212,0.2);
  border-radius: 8px;
  font-size: 0.78rem !important;
  color: var(--text-secondary) !important;
}
.rb-featured-cta i.fa-star {
  color: #FFD93D;
  margin-right: 4px;
}
.rb-featured-cta a {
  color: var(--chrome);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.rb-featured-cta a:hover {
  color: #4FC3F7;
}
.rb-featured-cta em {
  color: var(--chrome);
}

/* Dating Tabs */
.dating-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}
.dating-tab {
  flex: 1;
  padding: 10px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dating-tab.active {
  background: linear-gradient(135deg, #4FC3F7, #0288D1);
  color: white;
  box-shadow: 0 2px 8px rgba(79, 195, 247, 0.3);
}
.dating-tab:hover:not(.active) { background: var(--bg-secondary); }

/* Filters Bar */
.dating-filters-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dating-filters-bar select {
  flex: 1;
  min-width: 130px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.82rem;
}

/* ── Empty State (shared) ── */
.rb-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.rb-empty h3 {
  font-family: 'Orbitron', sans-serif;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.rb-empty p {
  font-size: 0.88rem;
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── FIND RIDERS — Rider Cards Grid ── */
.rb-riders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.rb-rider-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}
.rb-rider-card:hover {
  background: var(--bg-tertiary);
  border-color: #4FC3F740;
  transform: translateX(4px);
}
.rb-rider-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #4FC3F7;
}
.rb-rider-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rb-rider-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 1.2rem;
}
.rb-rider-info {
  flex: 1;
  min-width: 0;
}
.rb-rider-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.rb-rider-loc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.rb-rider-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 600;
}
.rb-badge-style {
  background: #4FC3F720;
  color: #4FC3F7;
  border: 1px solid #4FC3F740;
}
.rb-badge-exp {
  background: #FFD93D20;
  color: #FFD93D;
  border: 1px solid #FFD93D40;
}
.rb-badge-interest {
  background: #00BCD420;
  color: #00BCD4;
  border: 1px solid #00BCD440;
}
.rb-rider-card.rb-featured {
  border-color: #00BCD450;
  box-shadow: 0 0 0 1px #00BCD430, 0 2px 8px rgba(0,188,212,0.08);
}
.rb-interest-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--chrome);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: #fff;
  border: 2px solid var(--bg-card);
}
.rb-rider-avatar { position: relative; }
.rb-rider-action {
  flex-shrink: 0;
}

/* ── MECHANIC BUDDIES — Mechanic Cards Grid ── */
.rb-mechanics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.rb-mechanic-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  transition: all 0.2s;
}
.rb-mechanic-card:hover {
  border-color: #4FC3F740;
  box-shadow: 0 4px 16px rgba(79,195,247,0.1);
}
.rb-mechanic-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.rb-mechanic-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4FC3F720, #0288D120);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #4FC3F7;
  flex-shrink: 0;
}
.rb-mechanic-header h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.rb-mechanic-type {
  font-size: 0.75rem;
  color: #4FC3F7;
  font-weight: 600;
}
.rb-mechanic-specialty, .rb-mechanic-loc, .rb-mechanic-desc, .rb-mechanic-contact {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.rb-mechanic-specialty i, .rb-mechanic-loc i, .rb-mechanic-contact i {
  width: 16px;
  color: var(--text-muted);
  margin-right: 4px;
}
.rb-mechanic-desc {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.rb-mechanic-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* ── TRAVELERS — Travel Cards ── */
.rb-travel-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
  transition: all 0.2s;
}
.rb-travel-card:hover {
  border-color: #4FC3F740;
  box-shadow: 0 4px 16px rgba(79,195,247,0.1);
}
.rb-travel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.rb-travel-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFD93D20, #FF980020);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #FFD93D;
  flex-shrink: 0;
}
.rb-travel-header h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.rb-travel-type {
  font-size: 0.75rem;
  color: #FFD93D;
  font-weight: 600;
}
.rb-travel-dates, .rb-travel-loc, .rb-travel-looking, .rb-travel-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.rb-travel-dates i, .rb-travel-loc i, .rb-travel-looking i {
  width: 16px;
  color: var(--text-muted);
  margin-right: 4px;
}
.rb-travel-desc {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.rb-travel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.rb-travel-author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Dating Form Label (shared by modals) */
.dating-form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Riding Buddies Mobile Responsive */
@media (max-width: 768px) {
  .dating-hero { padding: 32px 16px 24px; }
  .dating-title { font-size: 1.5rem; }
  .dating-filters-bar { flex-direction: column; }
  .rb-mechanics-grid { grid-template-columns: 1fr; }
  .rb-travel-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ═══════════════ EVENTS CALENDAR VIEW ═══════════════ */

/* Calendar header with nav arrows and month title */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}
.cal-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cal-nav-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.cal-nav-btn:hover {
  background: var(--chrome, #D97757);
  color: #fff;
  border-color: var(--chrome, #D97757);
}

/* Calendar grid: 7 columns */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* Day-of-week headers */
.cal-day-header {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 0;
}

/* Individual day cells */
.cal-day {
  position: relative;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--bg-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  border: 2px solid transparent;
}
.cal-day:hover {
  background: var(--border);
}
.cal-day-empty {
  background: transparent;
  cursor: default;
}
.cal-day-empty:hover {
  background: transparent;
}

/* Day number */
.cal-day-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

/* Today highlight */
.cal-day-today {
  border-color: var(--chrome, #D97757);
}
.cal-day-today .cal-day-num {
  color: var(--chrome, #D97757);
  font-weight: 800;
}

/* Past days dimmed */
.cal-day-past {
  opacity: 0.45;
}
.cal-day-past:hover {
  opacity: 0.7;
}

/* Selected day */
.cal-day-selected {
  background: var(--chrome, #D97757) !important;
  border-color: var(--chrome, #D97757) !important;
}
.cal-day-selected .cal-day-num {
  color: #fff !important;
}
.cal-day-selected .cal-dot-more {
  color: #fff !important;
}

/* Event dots */
.cal-dots {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}
.cal-dot-more {
  font-size: 0.55rem;
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1;
}

/* Day events panel (below calendar) */
.cal-event-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.cal-event-card:hover {
  transform: translateX(4px);
  background: var(--border);
}
.cal-event-color {
  width: 4px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cal-event-info {
  flex: 1;
  min-width: 0;
}
.cal-event-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Calendar mobile responsive */
@media (max-width: 480px) {
  .cal-day {
    min-height: 44px;
    padding: 4px 2px;
  }
  .cal-day-num {
    font-size: 0.72rem;
  }
  .cal-dot {
    width: 5px;
    height: 5px;
  }
  .cal-title {
    font-size: 0.95rem;
  }
  .cal-event-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .cal-event-name {
    font-size: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════
   WOMEN POWER PAGE
   ═══════════════════════════════════════════════ */
.women-compose-box {
  background: var(--bg-card, #1a1a2e);
  border: 1px solid rgba(214, 164, 255, 0.2);
  border-radius: 14px;
  padding: 18px;
}
.women-compose-box textarea:focus {
  border-color: #D6A4FF;
  box-shadow: 0 0 0 2px rgba(214, 164, 255, 0.15);
  outline: none;
}

.women-feed-post {
  background: var(--bg-card, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.women-feed-post:hover {
  border-color: rgba(214, 164, 255, 0.3);
}

.women-feed-action {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.women-feed-action:hover {
  background: rgba(214, 164, 255, 0.1);
  color: #D6A4FF;
}
.women-feed-action.liked {
  color: #FF6B8A;
}
.women-feed-action.liked i {
  animation: heartPop 0.3s ease;
}
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Women Event Cards */
.women-event-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s, transform 0.15s;
}
.women-event-card:hover {
  border-color: rgba(214, 164, 255, 0.4);
  transform: translateY(-1px);
}
.women-event-date {
  text-align: center;
  min-width: 56px;
  padding: 10px 8px;
  background: rgba(214, 164, 255, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(214, 164, 255, 0.15);
}
.women-event-info {
  flex: 1;
  min-width: 0;
}

/* Women Power hero enhancements */
#page-women .mftrn-hero {
  position: relative;
  overflow: hidden;
}
#page-women .mftrn-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 70%, rgba(214, 164, 255, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.06) 0%, transparent 50%);
  animation: womenHeroGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes womenHeroGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(10deg); }
}

/* Resource cards hover effect */
#page-women .card {
  transition: transform 0.15s, border-color 0.2s;
}
#page-women .card:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 164, 255, 0.3);
}

/* Women Power badge */
.women-power-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: linear-gradient(135deg, rgba(214, 164, 255, 0.2), rgba(255, 182, 193, 0.2));
  border: 1px solid rgba(214, 164, 255, 0.3);
  border-radius: 20px;
  font-size: 0.78rem;
  color: #D6A4FF;
  font-weight: 600;
}

/* Women resource card links */
.women-resource-card a:hover {
  text-decoration: underline;
}

/* Mobile responsive for women feed */
@media (max-width: 480px) {
  .women-compose-box {
    padding: 14px;
  }
  .women-event-card {
    padding: 12px;
    gap: 12px;
  }
  .women-event-date {
    min-width: 48px;
    padding: 8px 6px;
  }
}

/* ═══════════ MOTORCYCLE CLUBS ═══════════ */
.clubs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.club-card { background:var(--card-bg, var(--bg-secondary)); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; }
.club-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.club-card-banner { height:100px; background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460); position:relative; overflow:hidden; }
.club-card-banner img { width:100%; height:100%; object-fit:cover; }
.club-card-logo { width:56px; height:56px; border-radius:50%; border:3px solid var(--bg-secondary); position:absolute; bottom:-28px; left:16px; background:var(--bg-secondary); overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; color:var(--chrome); }
.club-card-logo img { width:100%; height:100%; object-fit:cover; }
.club-card-body { padding:36px 16px 16px; }
.club-card-name { font-weight:700; font-size:1.05rem; margin-bottom:4px; color:var(--text); }
.club-card-type { display:inline-block; padding:2px 10px; border-radius:20px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.club-type-riding_club { background:rgba(46,204,113,0.15); color:#2ecc71; }
.club-type-racing_team { background:rgba(231,76,60,0.15); color:#e74c3c; }
.club-type-women_riders { background:rgba(155,89,182,0.15); color:#9b59b6; }
.club-type-vintage { background:rgba(241,196,15,0.15); color:#f1c40f; }
.club-type-sport { background:rgba(52,152,219,0.15); color:#3498db; }
.club-type-cruiser { background:rgba(230,126,34,0.15); color:#e67e22; }
.club-type-adventure { background:rgba(26,188,156,0.15); color:#1abc9c; }
.club-type-custom { background:rgba(236,240,241,0.15); color:#bdc3c7; }
.club-card-desc { font-size:0.85rem; color:var(--text-secondary); margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.club-card-meta { display:flex; align-items:center; gap:12px; font-size:0.8rem; color:var(--text-muted); }
.club-card-meta i { margin-right:3px; }

/* Club Detail */
.club-detail-banner { height:200px; background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460); border-radius:14px; overflow:hidden; position:relative; margin-bottom:20px; }
.club-detail-banner img { width:100%; height:100%; object-fit:cover; }
.club-detail-logo { width:80px; height:80px; border-radius:50%; border:4px solid var(--bg); position:absolute; bottom:-40px; left:24px; background:var(--bg-secondary); overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.8rem; color:var(--chrome); }
.club-detail-logo img { width:100%; height:100%; object-fit:cover; }
.club-detail-header { padding:48px 0 0; margin-bottom:20px; }
.club-detail-header h1 { font-family:Orbitron,sans-serif; font-size:1.6rem; font-weight:800; margin:0 0 4px; }
.club-detail-header .club-location { color:var(--text-muted); font-size:0.9rem; }
.club-detail-actions { display:flex; gap:10px; margin:16px 0; flex-wrap:wrap; }
.club-detail-actions button { padding:10px 20px; border-radius:10px; border:none; font-weight:600; cursor:pointer; font-size:0.85rem; }
.club-join-btn { background:linear-gradient(135deg,var(--chrome),#e67e00); color:#fff; }
.club-leave-btn { background:var(--bg-secondary); color:var(--text-secondary); border:1px solid var(--border) !important; }
.club-admin-btn { background:rgba(52,152,219,0.15); color:#3498db; }

.club-detail-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.club-detail-tabs button { background:none; border:none; padding:12px 20px; color:var(--text-muted); font-weight:600; cursor:pointer; font-size:0.9rem; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color 0.2s, border-color 0.2s; }
.club-detail-tabs button.active { color:var(--chrome); border-bottom-color:var(--chrome); }
.club-detail-tabs button:hover { color:var(--text); }

.club-feed-compose { background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.club-feed-compose textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.9rem; resize:vertical; min-height:60px; box-sizing:border-box; }
.club-feed-compose button { margin-top:8px; padding:8px 20px; background:var(--chrome); color:#fff; border:none; border-radius:8px; font-weight:600; cursor:pointer; }

.club-post { background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:12px; }
.club-post-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.club-post-avatar { width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:0.8rem; color:var(--chrome); }
.club-post-avatar img { width:100%; height:100%; object-fit:cover; }
.club-post-name { font-weight:600; font-size:0.9rem; }
.club-post-time { font-size:0.75rem; color:var(--text-muted); }
.club-post-body { font-size:0.9rem; color:var(--text); margin-bottom:10px; line-height:1.5; white-space:pre-wrap; }
.club-post-media img, .club-post-media video { max-width:100%; border-radius:8px; margin-top:8px; }
.club-post-actions { display:flex; gap:16px; padding-top:8px; border-top:1px solid var(--border); }
.club-post-actions button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.85rem; display:flex; align-items:center; gap:4px; }
.club-post-actions button:hover { color:var(--chrome); }
.club-post-actions button.liked { color:#e74c3c; }

.club-member-card { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.club-member-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--chrome); }
.club-member-avatar img { width:100%; height:100%; object-fit:cover; }
.club-member-info { flex:1; }
.club-member-name { font-weight:600; font-size:0.9rem; }
.club-member-role { font-size:0.75rem; padding:2px 8px; border-radius:12px; font-weight:600; text-transform:uppercase; display:inline-block; margin-top:2px; }
.club-role-president { background:rgba(241,196,15,0.2); color:#f1c40f; }
.club-role-officer { background:rgba(52,152,219,0.2); color:#3498db; }
.club-role-member { background:rgba(149,165,166,0.15); color:#95a5a6; }
.club-member-actions { display:flex; gap:6px; }
.club-member-actions button { background:none; border:1px solid var(--border); color:var(--text-muted); padding:4px 10px; border-radius:6px; cursor:pointer; font-size:0.75rem; }
.club-member-actions button:hover { background:var(--bg); }

/* Club empty state */
.club-empty-state { text-align:center; padding:48px 20px; color:var(--text-muted); }
.club-empty-state i { font-size:3rem; margin-bottom:12px; display:block; opacity:0.4; }
.club-empty-state p { font-size:0.95rem; margin:0; }

/* Responsive */
@media (max-width:768px) {
  .clubs-grid { grid-template-columns:1fr; }
  .club-detail-banner { height:140px; }
  .club-detail-header h1 { font-size:1.3rem; }
}

/* ═══════════════ NOTES ═══════════════ */
.note-bubble {
  position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  background:var(--bg-primary,#1a1a2e); border:1.5px solid var(--chrome,#C0C0C0);
  border-radius:10px; padding:2px 6px; font-size:0.6rem; color:var(--text-primary,#fff);
  white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis;
  z-index:2; line-height:1.3;
}
.note-set-bar {
  display:flex; align-items:center; gap:8px; padding:10px 16px;
  border-bottom:1px solid var(--border,#333); cursor:pointer;
}
.note-set-bar:hover { background:var(--bg-secondary,#222); }
.note-set-bar i { color:var(--chrome); font-size:0.9rem; }
.note-set-bar span { font-size:0.82rem; color:var(--text-muted,#888); }
.note-set-bar .note-current { color:var(--text-primary); font-weight:500; }
.note-input-row {
  display:flex; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border,#333);
  align-items:center;
}
.note-input-row input {
  flex:1; background:var(--bg-secondary,#222); border:1px solid var(--border,#333);
  border-radius:20px; padding:6px 12px; font-size:0.82rem; color:var(--text-primary);
  font-family:inherit; outline:none;
}
.note-input-row input:focus { border-color:var(--chrome); }
.note-input-row button {
  background:var(--chrome); color:#000; border:none; border-radius:16px;
  padding:5px 12px; font-size:0.78rem; font-weight:600; cursor:pointer;
}
.note-input-row .note-clear-btn {
  background:transparent; color:var(--text-muted); font-size:0.75rem; padding:5px 8px;
}
/* ═══════════════ CLOSE FRIENDS ═══════════════ */
.story-ring.close-friend { border-color: #4CAF50 !important; box-shadow: 0 0 0 2px #4CAF50; }
.close-friend-badge { display:inline-block; width:8px; height:8px; border-radius:50%; background:#4CAF50; margin-left:4px; vertical-align:middle; }
.close-friends-manage { max-height:300px; overflow-y:auto; padding:8px 0; }
.close-friends-manage .cf-item { display:flex; align-items:center; gap:10px; padding:8px 16px; }
.close-friends-manage .cf-item:hover { background:var(--bg-secondary); }
.close-friends-manage .cf-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#333; }
.close-friends-manage .cf-name { flex:1; font-size:0.85rem; }
.close-friends-manage .cf-toggle { background:none; border:1.5px solid #4CAF50; color:#4CAF50; border-radius:16px; padding:4px 12px; font-size:0.75rem; cursor:pointer; font-weight:600; }
.close-friends-manage .cf-toggle.active { background:#4CAF50; color:#fff; }

.suggested-rider-card { position:relative; }

/* ═══════════════ BROADCAST CHANNELS ═══════════════ */
.broadcast-list { padding:8px 0; }
.broadcast-item { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; }
.broadcast-item:hover { background:var(--bg-secondary); }
.broadcast-icon { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#667eea,#764ba2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; flex-shrink:0; }
.broadcast-info { flex:1; min-width:0; }
.broadcast-name { font-weight:600; font-size:0.9rem; color:var(--text-primary); }
.broadcast-preview { font-size:0.78rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.broadcast-meta { font-size:0.7rem; color:var(--text-muted); }
.broadcast-view { display:flex; flex-direction:column; height:100%; }
.broadcast-view-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
.broadcast-view-header h3 { margin:0; font-size:1rem; flex:1; }
.broadcast-messages { flex:1; overflow-y:auto; padding:12px 16px; }
.broadcast-msg { margin-bottom:12px; padding:10px 14px; background:var(--bg-secondary); border-radius:12px; }
.broadcast-msg-text { font-size:0.88rem; line-height:1.5; }
.broadcast-msg-time { font-size:0.7rem; color:var(--text-muted); margin-top:4px; }
.broadcast-msg-reactions { display:flex; gap:6px; margin-top:6px; }
.broadcast-msg-reactions button { background:var(--bg-primary); border:1px solid var(--border); border-radius:16px; padding:2px 8px; font-size:0.75rem; cursor:pointer; color:var(--text-muted); }
.broadcast-msg-reactions button.reacted { border-color:#667eea; color:#667eea; }
.broadcast-compose { padding:10px 16px; border-top:1px solid var(--border); display:flex; gap:8px; }
.broadcast-compose input { flex:1; background:var(--bg-secondary); border:1px solid var(--border); border-radius:20px; padding:8px 14px; color:var(--text-primary); font-size:0.85rem; font-family:inherit; outline:none; }
.broadcast-compose button { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; border-radius:50%; width:36px; height:36px; cursor:pointer; font-size:0.85rem; }
.broadcast-member-count { font-size:0.75rem; color:var(--text-muted); }

/* ═══════════════ STORY STICKERS ═══════════════ */
.story-sticker-bar { display:flex; gap:8px; padding:8px 12px; justify-content:center; }
.story-sticker-btn { background:var(--bg-secondary); border:1px solid var(--border); border-radius:20px; padding:6px 12px; font-size:0.75rem; color:var(--text-primary); cursor:pointer; display:flex; align-items:center; gap:4px; }
.story-sticker-btn:hover { border-color:var(--chrome); }
.story-sticker-btn i { font-size:0.7rem; }
.sticker-overlay { position:absolute; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); border-radius:12px; padding:12px 16px; min-width:200px; max-width:280px; text-align:center; z-index:5; }
.sticker-overlay.poll { bottom:80px; }
.sticker-overlay.quiz { bottom:80px; }
.sticker-overlay.countdown { top:60px; }
.sticker-poll-q, .sticker-quiz-q { font-size:0.9rem; font-weight:600; color:#fff; margin-bottom:8px; }
.sticker-poll-option { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); border-radius:8px; padding:8px 12px; margin:4px 0; cursor:pointer; color:#fff; font-size:0.8rem; transition:all 0.2s; position:relative; overflow:hidden; }
.sticker-poll-option:hover { background:rgba(255,255,255,0.25); }
.sticker-poll-option.voted { cursor:default; }
.sticker-poll-option .poll-bar { position:absolute; left:0; top:0; bottom:0; background:rgba(192,192,192,0.3); border-radius:8px; transition:width 0.5s; }
.sticker-poll-option .poll-pct { float:right; font-weight:600; font-size:0.75rem; }
.sticker-quiz-option { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); border-radius:8px; padding:8px 12px; margin:4px 0; cursor:pointer; color:#fff; font-size:0.8rem; }
.sticker-quiz-option.correct { background:rgba(76,175,80,0.5); border-color:#4CAF50; }
.sticker-quiz-option.wrong { background:rgba(244,67,54,0.3); border-color:#F44336; }
.sticker-countdown { color:#fff; }
.sticker-countdown-label { font-size:0.8rem; margin-bottom:4px; opacity:0.8; }
.sticker-countdown-timer { font-size:1.6rem; font-weight:700; font-family:'Orbitron',monospace; letter-spacing:2px; }
.sticker-countdown-done { font-size:1rem; color:#4CAF50; }
.sticker-form { background:var(--bg-secondary); border-radius:10px; padding:12px; margin-top:8px; }
.sticker-form input, .sticker-form select { width:100%; box-sizing:border-box; padding:6px 10px; margin:4px 0; border:1px solid var(--border); border-radius:6px; background:var(--bg-primary); color:var(--text-primary); font-size:0.8rem; font-family:inherit; }
.sticker-form label { font-size:0.75rem; color:var(--text-muted); display:block; margin-top:6px; }
.sticker-form button { margin-top:8px; }

/* ═══════════════ VIDEO/VOICE CALLS ═══════════════ */
.call-overlay { display:none; position:fixed; inset:0; z-index:20000; background:#000; flex-direction:column; align-items:center; justify-content:center; }
.call-overlay.active { display:flex; }
.call-remote-video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.call-local-video { position:absolute; top:20px; right:20px; width:120px; height:160px; border-radius:12px; object-fit:cover; z-index:2; border:2px solid rgba(255,255,255,0.3); }
.call-info { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; z-index:3; }
.call-info-name { font-size:1.4rem; font-weight:700; margin-bottom:4px; }
.call-info-status { font-size:0.85rem; opacity:0.7; }
.call-info-avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 12px; background:#333; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; overflow:hidden; }
.call-info-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.call-timer { font-size:0.9rem; margin-top:8px; font-family:'Orbitron',monospace; }
.call-controls { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; gap:16px; z-index:4; }
.call-ctrl-btn { width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; font-size:1.1rem; color:#fff; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.call-ctrl-btn.mute-btn { background:rgba(255,255,255,0.2); }
.call-ctrl-btn.mute-btn.active { background:#F44336; }
.call-ctrl-btn.camera-btn { background:rgba(255,255,255,0.2); }
.call-ctrl-btn.camera-btn.active { background:#F44336; }
.call-ctrl-btn.end-btn { background:#F44336; width:60px; height:60px; font-size:1.3rem; }
.call-ctrl-btn.end-btn:hover { background:#D32F2F; }
.call-ctrl-btn.speaker-btn { background:rgba(255,255,255,0.2); }
.call-incoming { position:fixed; top:0; left:0; right:0; z-index:25000; background:linear-gradient(135deg,#667eea,#764ba2); padding:16px; display:none; flex-direction:column; align-items:center; gap:10px; animation:slideDown 0.3s ease; }
.call-incoming.active { display:flex; }
.call-incoming-name { color:#fff; font-size:1.1rem; font-weight:600; }
.call-incoming-type { color:rgba(255,255,255,0.8); font-size:0.8rem; }
.call-incoming-actions { display:flex; gap:20px; }
.call-incoming-btn { width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; font-size:1.1rem; color:#fff; }
.call-incoming-btn.accept { background:#4CAF50; }
.call-incoming-btn.decline { background:#F44336; }
@keyframes slideDown { from { transform:translateY(-100%); } to { transform:translateY(0); } }

/* ═══════════════ PINNED CHATS ═══════════════ */
.dm-convo-pinned { background: rgba(102,126,234,0.05); }
.dm-convo-pinned:hover { background: rgba(102,126,234,0.1); }
.pin-chat-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 4px; transition: color 0.15s; }
.pin-chat-btn:hover { color: #667eea; }
.pin-chat-btn.pinned { color: #667eea; }

/* ═══════════════ ARCHIVE POSTS ═══════════════ */
.archive-btn { color: var(--text-muted); cursor: pointer; }
.archive-btn:hover { color: var(--text-primary); }
.archived-badge { background: rgba(255,152,0,0.2); color: #FF9800; font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-left: 6px; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px; }
.archive-grid-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; }
.archive-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.archive-overlay-btn { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 12px; padding: 4px 10px; font-size: 0.7rem; cursor: pointer; }

/* ═══════════════ MUTE/RESTRICT ═══════════════ */
.mute-restrict-section { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mute-restrict-section h4 { font-size: 0.85rem; margin: 0 0 8px; color: var(--text-primary); }
.mr-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.mr-item-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--chrome); object-fit: cover; }
.mr-item-name { flex: 1; font-size: 0.82rem; color: var(--text-primary); }
.mr-item-btn { background: none; border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 0.72rem; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.mr-item-btn:hover { border-color: var(--chrome); color: var(--text-primary); }

/* ═══════════════ DM REPLIES ═══════════════ */
.dm-reply-preview { display:flex; align-items:center; gap:8px; padding:6px 12px; background:var(--bg-secondary); border-left:3px solid #667eea; margin:0 16px; border-radius:0 8px 8px 0; font-size:0.78rem; }
.dm-reply-preview-text { flex:1; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-reply-preview-name { font-weight:600; color:#667eea; margin-right:4px; }
.dm-reply-cancel { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.9rem; padding:2px 6px; }
.dm-reply-bubble { background:rgba(102,126,234,0.1); border-left:2px solid #667eea; border-radius:0 6px 6px 0; padding:4px 8px; margin-bottom:4px; font-size:0.72rem; color:var(--text-muted); cursor:pointer; }
.dm-reply-bubble-name { font-weight:600; color:#667eea; }
.dm-msg-reply-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.7rem; padding:2px 4px; opacity:0; transition:opacity 0.15s; }
.dm-msg-wrapper:hover .dm-msg-reply-btn { opacity:1; }

/* ═══════════════ SHARE TO STORY ═══════════════ */
.story-shared-post-card { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); border-radius:12px; padding:12px 16px; min-width:200px; max-width:280px; color:#fff; cursor:pointer; z-index:5; text-align:center; transition:background 0.2s; }
.story-shared-post-card:hover { background:rgba(0,0,0,0.85); }
.story-shared-post-card:active { transform:translateX(-50%) scale(0.97); }

/* ═══════════════ OSM AUTO-POPULATE & DIRECTIONS ═══════════════ */

/* Category filter chips */
.osm-cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 16px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-muted); cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.osm-cat-chip:hover { border-color: var(--chrome); color: var(--text-secondary); }
.osm-cat-chip.active { border-color: #E8A030; background: rgba(232,160,48,0.15); color: #E8A030; }
.osm-cat-chip[data-osm-cat="fuel"].active { border-color: #E53E3E; background: rgba(229,62,62,0.12); color: #E53E3E; }
.osm-cat-chip[data-osm-cat="dealer"].active { border-color: #4A90D9; background: rgba(74,144,217,0.12); color: #4A90D9; }
.osm-cat-chip[data-osm-cat="repair"].active { border-color: #E8A030; background: rgba(232,160,48,0.12); color: #E8A030; }
.osm-cat-chip[data-osm-cat="parking"].active { border-color: #48BB78; background: rgba(72,187,120,0.12); color: #48BB78; }
.osm-cat-chip[data-osm-cat="rental"].active { border-color: #9B59B6; background: rgba(155,89,182,0.12); color: #9B59B6; }
.osm-cat-chip[data-osm-cat="parts"].active { border-color: #9B59B6; background: rgba(155,89,182,0.12); color: #9B59B6; }

/* OSM marker popups */
.osm-popup-badge {
  display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 0.65rem;
  font-weight: 700; background: rgba(74,144,217,0.15); color: #4A90D9; margin-left: 6px;
  vertical-align: middle; letter-spacing: 0.5px;
}
.osm-popup-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.osm-popup-addr { font-size: 0.82rem; color: #888; margin-bottom: 6px; }
.osm-popup-cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; }
.osm-directions-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 8px; border: none;
  background: #4A90D9; color: #fff; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; margin-top: 6px; transition: background 0.2s;
}
.osm-directions-btn:hover { background: #3A7BC8; }

/* Route info bar */
#osmRouteInfo { font-weight: 500; }

/* Leaflet Routing Machine overrides for dark theme */
.leaflet-routing-container {
  background: var(--bg-card) !important; color: var(--text-primary) !important;
  border: 1px solid var(--border) !important; border-radius: 10px !important;
  box-shadow: var(--shadow) !important; font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important; max-height: 200px !important; overflow-y: auto !important;
}
.leaflet-routing-container h2 { color: var(--text-primary) !important; font-size: 0.9rem !important; }
.leaflet-routing-container h3 { color: var(--text-secondary) !important; font-size: 0.82rem !important; }
.leaflet-routing-alt { color: var(--text-secondary) !important; }
.leaflet-routing-alt table td { color: var(--text-secondary) !important; font-size: 0.78rem !important; }
.leaflet-routing-collapse-btn { display: none !important; }

/* ═══════════════ POST INSIGHTS ═══════════════ */
.insights-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.85rem; padding:4px 8px; border-radius:6px; transition:all 0.15s; }
.insights-btn:hover { color:#667eea; background:rgba(102,126,234,0.1); }
.insight-stat { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.insight-stat:last-child { border-bottom:none; }
.insight-stat-label { color:var(--text-muted); font-size:0.82rem; }
.insight-stat-value { font-weight:700; font-size:1.1rem; color:var(--text-primary); }
.insight-bar-chart { display:flex; align-items:flex-end; gap:4px; height:120px; padding:12px 0; }
.insight-bar { flex:1; min-width:20px; background:linear-gradient(to top,#667eea,#764ba2); border-radius:4px 4px 0 0; transition:height 0.3s; position:relative; }
.insight-bar:hover { opacity:0.85; }
.insight-bar-label { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:0.6rem; color:var(--text-muted); white-space:nowrap; }
.insight-bar-value { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:0.6rem; color:var(--text-primary); font-weight:600; }
.profile-insights-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:16px; margin:12px 0; }
.profile-insights-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
.profile-insight-item { text-align:center; padding:12px; background:var(--bg-primary); border-radius:8px; }
.profile-insight-item .value { font-size:1.4rem; font-weight:800; color:#667eea; }
.profile-insight-item .label { font-size:0.72rem; color:var(--text-muted); margin-top:2px; }
.insights-modal-close-btn { background:none; border:none; color:var(--text-muted); font-size:1.4rem; cursor:pointer; padding:4px 8px; line-height:1; }
.insights-modal-close-btn:hover { color:var(--text-primary); }
.insights-modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.insights-modal-header h3 { font-family:'Orbitron',sans-serif; font-size:1rem; margin:0; display:flex; align-items:center; gap:8px; }
.profile-insights-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; border-radius:8px; font-size:0.82rem; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
.profile-insights-btn:hover { opacity:0.9; }

/* ═══════════════ VANISH MODE ═══════════════ */
.vanish-banner { display:flex; align-items:center; gap:8px; padding:8px 16px; background:linear-gradient(135deg,#2d1b69,#1a1a2e); border-bottom:1px solid rgba(138,43,226,0.3); color:#c4b5fd; font-size:0.78rem; }
.vanish-banner i { color:#a78bfa; }
.vanish-toggle { background:none; border:1px solid var(--border); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); font-size:0.85rem; transition:all 0.2s; }
.vanish-toggle.active { background:linear-gradient(135deg,#7c3aed,#6d28d9); border-color:#7c3aed; color:#fff; }
.dm-msg-vanish { position:relative; }
.dm-msg-vanish::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(90deg,transparent,rgba(138,43,226,0.05),transparent); animation:vanishShimmer 2s infinite; pointer-events:none; border-radius:inherit; }
@keyframes vanishShimmer { 0%,100%{opacity:0} 50%{opacity:1} }
.dm-msg-vanish .vanish-icon { font-size:0.65rem; color:#a78bfa; margin-left:4px; }
.vanish-fade { animation: vanishFade 1.5s forwards; }
@keyframes vanishFade { to { opacity:0; transform:scale(0.95); height:0; margin:0; padding:0; overflow:hidden; } }

/* ═══════════════ FAVORITES FEED ═══════════════ */
.feed-tab-bar { display:flex; gap:0; background:var(--bg-card); border-bottom:2px solid var(--border); margin:0 -16px; padding:0 16px; }
.feed-tab { flex:1; padding:12px 0; font-size:0.88rem; font-weight:600; border:none; background:none; color:var(--text-muted); cursor:pointer; transition:all 0.2s; border-bottom:2px solid transparent; margin-bottom:-2px; font-family:'Inter',sans-serif; }
.feed-tab.active { color:#e91e63; border-bottom-color:#e91e63; }
.feed-tab:hover { color:var(--text-primary); }
.favorite-user-btn { background:none; border:1px solid var(--border); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); font-size:0.9rem; transition:all 0.2s; }
.favorite-user-btn:hover { border-color:#ffc107; color:#ffc107; }
.favorite-user-btn.favorited { background:#ffc107; border-color:#ffc107; color:#fff; }
.favorites-empty { text-align:center; padding:48px 20px; }
.favorites-empty i { font-size:2.5rem; color:#ffc107; margin-bottom:12px; }
.favorites-empty h4 { font-size:1rem; font-weight:700; margin-bottom:6px; }
.favorites-empty p { font-size:0.82rem; color:var(--text-muted); line-height:1.5; }

/* ═══════════════ POST DRAFTS ═══════════════ */
.save-draft-btn { background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-muted); font-size:0.78rem; padding:6px 10px; border-radius:8px; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:4px; font-family:'Inter',sans-serif; }
.save-draft-btn:hover { border-color:#ffc107; color:#ffc107; }
.open-drafts-btn { background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-muted); font-size:0.78rem; padding:6px 10px; border-radius:8px; cursor:pointer; transition:all 0.2s; font-family:'Inter',sans-serif; }
.open-drafts-btn:hover { border-color:#667eea; color:#667eea; }
.draft-item { background:var(--bg-secondary); border-radius:12px; padding:14px; margin-bottom:10px; border:1px solid var(--border); }
.draft-item-text { font-size:0.88rem; color:var(--text-primary); margin-bottom:8px; white-space:pre-wrap; line-height:1.5; }
.draft-item-meta { display:flex; justify-content:space-between; align-items:center; }
.draft-item-date { font-size:0.72rem; color:var(--text-muted); }
.draft-item-actions { display:flex; gap:8px; }
.draft-item-actions button { background:none; border:1px solid var(--border); border-radius:6px; padding:5px 10px; font-size:0.75rem; cursor:pointer; transition:all 0.2s; font-family:'Inter',sans-serif; }
.draft-use-btn { color:#667eea; }
.draft-use-btn:hover { background:#667eea; color:#fff; border-color:#667eea; }
.draft-delete-btn { color:#ef4444; }
.draft-delete-btn:hover { background:#ef4444; color:#fff; border-color:#ef4444; }

/* ═══════════════ GUIDES / COLLECTIONS ═══════════════ */
.guide-card { background:var(--bg-secondary); border-radius:12px; padding:14px; border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.guide-card:hover { border-color:#9C27B0; transform:translateY(-1px); box-shadow:0 4px 12px rgba(156,39,176,0.15); }
.guide-card-title { font-size:0.92rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.guide-card-desc { font-size:0.78rem; color:var(--text-muted); margin-bottom:8px; line-height:1.4; }
.guide-card-meta { font-size:0.72rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.guides-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; padding:12px 0; }
.guide-detail-post { background:var(--bg-secondary); border-radius:10px; padding:12px; margin-bottom:10px; border:1px solid var(--border); }
.guide-detail-post-text { font-size:0.85rem; color:var(--text-primary); margin-bottom:6px; }
.guide-detail-post-meta { font-size:0.72rem; color:var(--text-muted); }
.guide-delete-btn { background:none; border:1px solid #ef4444; color:#ef4444; border-radius:8px; padding:6px 14px; font-size:0.78rem; cursor:pointer; transition:all 0.2s; font-family:'Inter',sans-serif; }
.guide-delete-btn:hover { background:#ef4444; color:#fff; }
.save-to-guide-item { display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.2s; }
.save-to-guide-item:hover { background:var(--bg-secondary); }
.save-to-guide-item:last-child { border-bottom:none; }
.save-to-guide-title { font-size:0.88rem; font-weight:600; color:var(--text-primary); }
.save-to-guide-count { font-size:0.75rem; color:var(--text-muted); }
.create-guide-inline { display:flex; align-items:center; gap:8px; padding:12px; color:#9C27B0; font-size:0.85rem; font-weight:600; cursor:pointer; transition:background 0.2s; }
.create-guide-inline:hover { background:var(--bg-secondary); }
.guides-tab-btn { display:inline-flex; align-items:center; gap:5px; padding:8px 14px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; font-size:0.8rem; color:var(--text-muted); cursor:pointer; transition:all 0.2s; font-family:'Inter',sans-serif; }
.guides-tab-btn:hover { border-color:#9C27B0; color:#9C27B0; }
.guides-tab-btn.active { background:#9C27B0; border-color:#9C27B0; color:#fff; }

/* ═══════════════ COMMENT LIKES ═══════════════ */
.comment-meta-row { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.comment-like-btn { background:none; border:none; cursor:pointer; font-size:0.75rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:12px; transition:all 0.2s; font-family:'Inter',sans-serif; }
.comment-like-btn:hover { color:#e74c3c; background:rgba(231,76,60,0.08); }
.comment-like-btn.liked { color:#e74c3c; }
.comment-like-btn .fa-heart { font-size:0.7rem; }
.comment-like-count { font-size:0.7rem; }

/* ═══════════════ COMMENT PINNING ═══════════════ */
.comment-pinned-badge { display:inline-flex; align-items:center; gap:3px; font-size:0.65rem; color:#FF6D00; background:rgba(255,109,0,0.1); padding:2px 8px; border-radius:10px; margin-bottom:4px; font-weight:600; }
.comment-pinned-badge .fa-thumbtack { font-size:0.6rem; }
.comment-pin-btn { background:none; border:none; cursor:pointer; font-size:0.7rem; color:var(--text-muted); padding:2px 6px; border-radius:12px; transition:all 0.2s; margin-left:6px; font-family:'Inter',sans-serif; }
.comment-pin-btn:hover { color:#FF6D00; background:rgba(255,109,0,0.08); }
.comment-pin-btn.pinned { color:#FF6D00; }

/* ═══════════════ FEED POLLS ═══════════════ */
.poll-container { padding:8px 16px 12px; }
.poll-option { position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 14px; margin-bottom:6px; border:1.5px solid var(--border); border-radius:10px; background:var(--bg-primary); cursor:pointer; font-size:0.85rem; color:var(--text-primary); transition:all 0.2s; overflow:hidden; text-align:left; font-family:'Inter',sans-serif; }
.poll-option:hover:not(:disabled) { border-color:#FF6D00; background:rgba(255,109,0,0.05); }
.poll-option:disabled { cursor:default; }
.poll-option.poll-voted { border-color:#FF6D00; font-weight:600; }
.poll-option.poll-winner { border-color:#FF6D00; background:rgba(255,109,0,0.06); }
.poll-option-text { position:relative; z-index:1; }
.poll-option-pct { position:relative; z-index:1; font-weight:700; font-size:0.8rem; color:var(--text-muted); }
.poll-bar { position:absolute; left:0; top:0; bottom:0; background:rgba(255,109,0,0.12); border-radius:10px; transition:width 0.5s ease; }
.poll-meta { font-size:0.75rem; color:var(--text-muted); margin-top:4px; padding-left:2px; }
.poll-compose-area { padding:8px 16px; display:none; }
.poll-compose-area.active { display:block; }
.poll-input-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.poll-input-row input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); font-size:0.85rem; font-family:'Inter',sans-serif; }
.poll-input-row input:focus { outline:none; border-color:#FF6D00; }
.poll-remove-opt { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:0.85rem; padding:4px; }
.poll-remove-opt:hover { color:#e74c3c; }
.poll-add-option { background:none; border:none; cursor:pointer; color:#FF6D00; font-size:0.8rem; font-weight:600; padding:4px 0; font-family:'Inter',sans-serif; }
.poll-add-option:hover { text-decoration:underline; }
#pollToggleBtn.active { color:#FF6D00; }

/* ═══════════════ ACTIVITY STATUS ═══════════════ */
.activity-status-modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:9999; justify-content:center; align-items:center; }
.activity-status-content { background:var(--bg-primary); border-radius:16px; width:90%; max-width:380px; padding:20px; }
.activity-status-content h3 { margin:0 0 16px; font-size:1.1rem; color:var(--text-primary); text-align:center; }
.activity-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.activity-status-option { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; background:var(--bg-secondary); cursor:pointer; font-size:0.82rem; color:var(--text-primary); transition:all 0.2s; }
.activity-status-option:hover { border-color:#FF6D00; background:rgba(255,109,0,0.05); }
.activity-status-option .status-icon { font-size:1.1rem; }
.activity-custom-input { display:flex; gap:8px; margin-bottom:12px; }
.activity-custom-input input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); font-size:0.85rem; font-family:'Inter',sans-serif; }
.activity-custom-input input:focus { outline:none; border-color:#FF6D00; }
.activity-custom-input button { padding:8px 16px; background:#FF6D00; color:#fff; border:none; border-radius:8px; font-size:0.8rem; cursor:pointer; font-weight:600; font-family:'Inter',sans-serif; }
.activity-status-badge { position:absolute; bottom:-2px; right:-2px; font-size:0.55rem; background:var(--bg-primary); border-radius:8px; padding:1px 4px; border:1px solid var(--border); white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.activity-clear-btn { width:100%; padding:8px; background:none; border:1px solid var(--border); border-radius:8px; color:var(--text-muted); font-size:0.82rem; cursor:pointer; font-family:'Inter',sans-serif; }
.activity-clear-btn:hover { color:#e74c3c; border-color:#e74c3c; }
.activity-status-opt { display:flex; align-items:center; gap:6px; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; background:var(--bg-secondary); cursor:pointer; font-size:0.8rem; color:var(--text-primary); transition:all 0.2s; font-family:'Inter',sans-serif; }
.activity-status-opt:hover { border-color:#FF6D00; background:rgba(255,109,0,0.05); transform:scale(1.02); }

/* ═══════════ BIKE MAINTENANCE LOG ═══════════ */
.maintenance-log-modal { max-width:520px; }
.maint-entries-list { display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow-y:auto; padding-right:4px; }
.maint-entry {
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; display:flex; gap:12px; align-items:flex-start; transition:border-color 0.2s;
}
.maint-entry:hover { border-color:#1BC40240; }
.maint-type-icon {
  width:40px; height:40px; border-radius:10px; background:#1BC40215; border:1px solid #1BC40230;
  display:flex; align-items:center; justify-content:center; font-size:1rem; color:#1BC402;
  flex-shrink:0;
}
.maint-entry-body { flex:1; min-width:0; }
.maint-entry-title { font-weight:600; font-size:0.9rem; color:var(--text-primary); margin-bottom:4px; }
.maint-entry-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:0.78rem; color:var(--text-muted); margin-bottom:4px; }
.maint-entry-meta span { display:flex; align-items:center; gap:4px; }
.maint-entry-notes { font-size:0.8rem; color:var(--text-secondary); margin-top:4px; line-height:1.4; }
.maint-entry-actions { display:flex; gap:6px; flex-shrink:0; }
.maint-action-btn {
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:none; color:var(--text-muted); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:0.78rem; transition:all 0.2s;
}
.maint-action-btn:hover { color:#1BC402; border-color:#1BC402; background:#1BC40210; }
.maint-action-btn.delete:hover { color:#e74c3c; border-color:#e74c3c; background:rgba(231,76,60,0.08); }
.maint-empty-state { text-align:center; padding:32px 20px; color:var(--text-muted); }
.maint-empty-state i { font-size:2rem; margin-bottom:10px; display:block; color:#1BC40240; }
.maint-garage-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:0.82rem; padding:8px 12px; flex:1;
  color:#C0C0C0; border-color:#C0C0C020;
}

/* ═══════════ BIKE FUEL LOG ═══════════ */
.fuel-log-modal { max-width:540px; }
.fuel-summary {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  background:var(--bg-secondary); border:1px solid #1BC40230;
  border-radius:12px; padding:12px 10px; margin-bottom:16px;
}
.fuel-summary-stat { text-align:center; }
.fuel-summary-stat .stat-val {
  font-size:1.05rem; font-weight:700; color:#1BC402;
  font-family:'Orbitron',sans-serif; line-height:1;
}
.fuel-summary-stat .stat-lbl {
  font-size:0.68rem; color:var(--text-muted); margin-top:3px; text-transform:uppercase; letter-spacing:0.03em;
}
.fuel-entries-list { display:flex; flex-direction:column; gap:10px; max-height:50vh; overflow-y:auto; padding-right:4px; }
.fuel-entry {
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px;
  padding:13px 14px; display:flex; gap:12px; align-items:flex-start; transition:border-color 0.2s;
}
.fuel-entry:hover { border-color:#1BC40240; }
.fuel-type-icon {
  width:40px; height:40px; border-radius:10px; background:#1BC40215; border:1px solid #1BC40230;
  display:flex; align-items:center; justify-content:center; font-size:1rem; color:#1BC402;
  flex-shrink:0;
}
.fuel-entry-body { flex:1; min-width:0; }
.fuel-entry-top { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.fuel-entry-date { font-weight:600; font-size:0.88rem; color:var(--text-primary); }
.mpg-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:22px; padding:0 7px;
  background:#1BC402; color:#000; font-size:0.7rem; font-weight:700;
  border-radius:20px; font-family:'Orbitron',sans-serif; letter-spacing:0.02em;
}
.mpg-badge.no-mpg { background:#1BC40230; color:var(--text-muted); font-family:'Inter',sans-serif; font-size:0.65rem; }
.fuel-entry-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:0.78rem; color:var(--text-muted); }
.fuel-entry-meta span { display:flex; align-items:center; gap:4px; }
.fuel-entry-notes { font-size:0.78rem; color:var(--text-secondary); margin-top:4px; line-height:1.4; }
.fuel-entry-actions { display:flex; gap:6px; flex-shrink:0; }
.fuel-action-btn {
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:none; color:var(--text-muted); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:0.78rem; transition:all 0.2s;
}
.fuel-action-btn:hover { color:#1BC402; border-color:#1BC402; background:#1BC40210; }
.fuel-action-btn.delete:hover { color:#e74c3c; border-color:#e74c3c; background:rgba(231,76,60,0.08); }
.fuel-empty-state { text-align:center; padding:32px 20px; color:var(--text-muted); }
.fuel-empty-state i { font-size:2rem; margin-bottom:10px; display:block; color:#1BC40240; }
@media(max-width:400px) {
  .fuel-summary { grid-template-columns:repeat(2,1fr); }
}

/* ========== RIDE LOG ========== */
.ride-log-modal .modal-content { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px; }
.ride-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 12px; }
.ride-stat { background: #1E1E1E; border-radius: 10px; padding: 10px 8px; text-align: center; border: 1px solid #2a2a2a; }
.ride-stat-value { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 700; color: #1BC402; }
.ride-stat-label { font-size: 0.7rem; color: #888; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.ride-entries-list { display: flex; flex-direction: column; gap: 8px; }
.ride-entry { background: #1E1E1E; border-radius: 12px; padding: 14px 16px; border: 1px solid #2a2a2a; transition: border-color 0.2s; }
.ride-entry:hover { border-color: #1BC402; }
.ride-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ride-entry-date { font-weight: 600; color: #E8E8E8; font-size: 0.92rem; }
.ride-entry-rating { color: #FFD700; font-size: 0.9rem; letter-spacing: 1px; }
.ride-entry-stats { display: flex; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.ride-entry-stat { font-size: 0.85rem; color: #aaa; }
.ride-entry-stat strong { color: #1BC402; font-family: 'Orbitron', sans-serif; font-size: 0.9rem; }
.ride-entry-route { font-size: 0.88rem; color: #ccc; margin-bottom: 6px; }
.ride-entry-route i { color: #1BC402; margin-right: 6px; }
.ride-entry-conditions { display: flex; gap: 10px; margin-bottom: 6px; }
.ride-condition-badge { font-size: 0.78rem; padding: 3px 10px; border-radius: 12px; background: #252525; color: #aaa; border: 1px solid #333; }
.ride-entry-notes { font-size: 0.84rem; color: #999; font-style: italic; margin-bottom: 8px; }
.ride-entry-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ride-action-btn { background: none; border: 1px solid #333; border-radius: 6px; color: #888; padding: 4px 12px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.ride-action-btn:hover { border-color: #1BC402; color: #1BC402; }
.ride-action-btn.delete:hover { border-color: #e74c3c; color: #e74c3c; }
.ride-empty-state { text-align: center; padding: 30px 20px; color: #666; }
.ride-empty-state i { font-size: 2.5rem; margin-bottom: 12px; color: #333; }
.ride-empty-state p { margin: 0; font-size: 0.92rem; }
.ride-entry-modal .modal-content { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px; }

/* ========== PRE-RIDE CHECKLIST ========== */
.checklist-modal .modal-content { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px; }
.checklist-category { margin-bottom: 10px; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; }
.checklist-category-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #1E1E1E; cursor: pointer; transition: background 0.2s; }
.checklist-category-header:hover { background: #252525; }
.checklist-category-header .cat-letter { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #1BC402, #0E8001); color: #fff; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.85rem; margin-right: 10px; flex-shrink: 0; }
.checklist-category-header .cat-title { font-weight: 600; color: #E8E8E8; font-size: 0.92rem; flex: 1; }
.checklist-category-header .cat-count { font-size: 0.78rem; color: #888; margin-left: 8px; }
.checklist-category-header .cat-check { color: #1BC402; font-size: 1rem; display: none; }
.checklist-category-header.all-checked .cat-check { display: inline; }
.checklist-category-header.all-checked .cat-count { color: #1BC402; }
.checklist-items { padding: 0; background: #161616; }
.checklist-item { display: flex; align-items: center; padding: 10px 16px 10px 54px; border-top: 1px solid #222; cursor: pointer; transition: background 0.15s; }
.checklist-item:hover { background: #1a1a1a; }
.checklist-item input[type="checkbox"] { display: none; }
.checklist-item .check-box { width: 22px; height: 22px; border: 2px solid #444; border-radius: 6px; margin-right: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.checklist-item.checked .check-box { background: #1BC402; border-color: #1BC402; }
.checklist-item .check-box i { color: #fff; font-size: 0.7rem; opacity: 0; transition: opacity 0.2s; }
.checklist-item.checked .check-box i { opacity: 1; }
.checklist-item .check-label { font-size: 0.88rem; color: #ccc; transition: color 0.2s; }
.checklist-item.checked .check-label { color: #888; text-decoration: line-through; }

/* ========== GPS RIDE TRACKING ========== */
.track-ride-modal .modal-content { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px; }
.view-route-modal .modal-content { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px; }
.track-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 16px; }
.track-stat { background: #1E1E1E; border-radius: 10px; padding: 10px 6px; text-align: center; border: 1px solid #2a2a2a; }
.track-stat-value { font-family: 'Orbitron', sans-serif; font-size: 1.15rem; font-weight: 700; color: #1BC402; }
.track-stat-label { font-size: 0.7rem; color: #888; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.track-btn { padding: 14px 32px; border: none; border-radius: 12px; font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: all 0.2s; }
.track-btn-start { background: linear-gradient(135deg, #1BC402, #15A002); color: #fff; }
.track-btn-start:hover { transform: scale(1.03); box-shadow: 0 4px 20px rgba(27, 196, 2, 0.3); }
.track-btn-stop { background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; animation: trackPulse 2s infinite; }
@keyframes trackPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(231, 76, 60, 0); } }
.track-btn-save { background: linear-gradient(135deg, #1BC402, #15A002); color: #fff; margin-right: 10px; }
.track-btn-discard { background: none; border: 1px solid #444; border-radius: 12px; color: #888; padding: 14px 24px; font-size: 0.95rem; cursor: pointer; }
.track-btn-discard:hover { border-color: #e74c3c; color: #e74c3c; }
.tracked-ride-item { background: #1E1E1E; border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; border: 1px solid #2a2a2a; cursor: pointer; transition: border-color 0.2s; }
.tracked-ride-item:hover { border-color: #1BC402; }
.tracked-ride-item .tri-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tracked-ride-item .tri-date { font-weight: 600; color: #E8E8E8; font-size: 0.9rem; }
.tracked-ride-item .tri-stats { display: flex; gap: 14px; font-size: 0.83rem; color: #aaa; }
.tracked-ride-item .tri-stats strong { color: #1BC402; font-family: 'Orbitron', sans-serif; }
.tracked-ride-item .tri-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.tracked-ride-item .tri-action { background: none; border: 1px solid #333; border-radius: 6px; color: #888; padding: 3px 10px; font-size: 0.78rem; cursor: pointer; }
.tracked-ride-item .tri-action:hover { border-color: #1BC402; color: #1BC402; }
.tracked-ride-item .tri-action.delete:hover { border-color: #e74c3c; color: #e74c3c; }

/* ========== WEATHER MODAL ========== */
.weather-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(4px);
}
.weather-modal {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px;
  width: 100%; max-width: 420px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.weather-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #2a2a2a;
}
.weather-modal-header h3 {
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700;
  color: #E8E8E8; margin: 0;
}
.weather-close-btn {
  background: none; border: none; color: #888; font-size: 1.1rem;
  cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.2s;
}
.weather-close-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.weather-modal-body { padding: 20px; }
.weather-loading { text-align: center; padding: 40px 20px; }
.weather-main { text-align: center; margin-bottom: 24px; }
.weather-icon-big {
  font-size: 3.5rem; color: #1BC402; margin-bottom: 8px;
}
.weather-temp {
  font-family: 'Orbitron', sans-serif; font-size: 3rem; font-weight: 800;
  color: #E8E8E8; line-height: 1;
}
.weather-condition {
  font-size: 1rem; color: #C0C0C0; margin-top: 4px; font-weight: 500;
}
.weather-details {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 20px;
}
.weather-detail-item {
  background: #2a2a2a; border-radius: 12px; padding: 14px 10px;
  text-align: center; border: 1px solid #333;
}
.weather-detail-item i {
  font-size: 1.1rem; color: #1BC402; display: block; margin-bottom: 6px;
}
.weather-detail-label {
  display: block; font-size: 0.72rem; color: #888;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.weather-detail-value {
  display: block; font-family: 'Orbitron', sans-serif; font-size: 0.95rem;
  font-weight: 700; color: #E8E8E8;
}
.weather-recommendation {
  background: linear-gradient(135deg, rgba(27,196,2,0.15), rgba(27,196,2,0.05));
  border: 1px solid rgba(27,196,2,0.3); border-radius: 12px;
  padding: 14px 18px; display: flex; align-items: center;
  font-size: 0.9rem; color: #1BC402; font-weight: 600;
}
.weather-recommendation.caution {
  background: linear-gradient(135deg, rgba(231,76,60,0.15), rgba(231,76,60,0.05));
  border-color: rgba(231,76,60,0.3); color: #e74c3c;
}
.weather-recommendation.warning {
  background: linear-gradient(135deg, rgba(241,196,15,0.15), rgba(241,196,15,0.05));
  border-color: rgba(241,196,15,0.3); color: #f1c40f;
}
body.light-mode .weather-modal { background: #fff; border-color: #e0e0e0; }
body.light-mode .weather-modal-header { border-color: #e0e0e0; }
body.light-mode .weather-modal-header h3 { color: #1a1a1a; }
body.light-mode .weather-temp { color: #1a1a1a; }
body.light-mode .weather-condition { color: #666; }
body.light-mode .weather-detail-item { background: #f0f0f0; border-color: #e0e0e0; }
body.light-mode .weather-detail-value { color: #1a1a1a; }

/* ===== Tip of the Day ===== */
.tip-of-day-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.tip-of-day-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1BC402, #15a002);
}
.tip-of-day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tip-of-day-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1BC402, #15a002);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff;
  flex-shrink: 0;
}
.tip-of-day-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1BC402;
  flex: 1;
}
.tip-of-day-category {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1BC402;
  background: rgba(27,196,2,0.12);
  padding: 2px 8px;
  border-radius: 6px;
}
.tip-of-day-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.tip-of-day-dismiss:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.tip-of-day-text {
  font-size: 0.92rem;
  color: #e0e0e0;
  line-height: 1.5;
  margin-bottom: 12px;
  padding-left: 46px;
}
.tip-of-day-actions {
  display: flex;
  gap: 8px;
  padding-left: 46px;
}
.tip-of-day-actions button {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
  font-family: inherit;
}
.tip-of-day-actions button:active {
  transform: scale(0.96);
}
.tip-share-btn {
  background: linear-gradient(135deg, #1BC402, #15a002);
  color: #fff;
}
.tip-share-btn:hover { opacity: 0.9; }
.tip-next-btn {
  background: #2a2a2a;
  color: var(--text-secondary);
  border: 1px solid #333 !important;
}
.tip-next-btn:hover { background: #333; color: #fff; }

/* Light mode overrides */
body.light-mode .tip-of-day-card {
  background: #ffffff;
  border-color: #e0e0e0;
}
body.light-mode .tip-of-day-text {
  color: #333;
}
body.light-mode .tip-of-day-dismiss:hover {
  color: #333;
  background: rgba(0,0,0,0.06);
}
body.light-mode .tip-next-btn {
  background: #f0f0f0;
  color: #555;
  border-color: #ddd !important;
}
body.light-mode .tip-next-btn:hover {
  background: #e0e0e0;
  color: #333;
}

/* ═══════════════ KSU HERO BANNER ═══════════════ */
.ksu-hero-banner {
  text-align: center;
  padding: 18px 16px 12px;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border-bottom: 2px solid #1BC402;
  margin-bottom: 12px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.ksu-hero-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, rgba(27,196,2,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.ksu-hero-logo {
  max-width: 280px;
  height: auto;
  border-radius: 0;
  filter: drop-shadow(0 0 16px rgba(27,196,2,0.35)) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  position: relative;
  z-index: 1;
}
.ksu-hero-tagline {
  font-size: 13px;
  color: #C0C0C0;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 8px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
body.light-mode .ksu-hero-banner {
  background: linear-gradient(135deg, #f8f8f8 0%, #fff 50%, #f8f8f8 100%);
  border-bottom-color: #15A002;
}
body.light-mode .ksu-hero-tagline {
  color: #555;
}

/* ═══════════════ RIDER ACHIEVEMENTS ═══════════════ */
.achievements-section {
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.achievements-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1BC402;
}
.achievements-header i { margin-right: 6px; }
.achievements-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}
.achievements-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(27,196,2,0.08);
  border: 1px solid rgba(27,196,2,0.2);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.achievement-badge:hover {
  background: rgba(27,196,2,0.15);
  transform: translateY(-2px);
}
.achievement-badge.locked {
  background: rgba(100,100,100,0.1);
  border-color: rgba(100,100,100,0.2);
  opacity: 0.45;
  filter: grayscale(1);
}
.achievement-badge.locked:hover {
  opacity: 0.65;
  transform: none;
}
.achievement-badge .ab-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
  color: #1BC402;
}
.achievement-badge.locked .ab-icon {
  color: #666;
}
.achievement-badge .ab-name {
  font-size: 0.6rem;
  text-align: center;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.achievement-badge.locked .ab-name {
  color: var(--text-muted);
}
.achievement-badge .ab-new {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4444;
  color: #fff;
  font-size: 0.5rem;
  padding: 1px 4px;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
}
/* Achievement tooltip */
.achievement-tooltip {
  position: fixed;
  background: #222;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  max-width: 220px;
  z-index: 9999;
  pointer-events: none;
  border: 1px solid #1BC402;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.achievement-tooltip .att-title {
  font-weight: 700;
  color: #1BC402;
  margin-bottom: 4px;
}
.achievement-tooltip .att-desc {
  color: #ccc;
  line-height: 1.3;
}
/* Achievement unlock toast */
.achievement-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: linear-gradient(135deg, #1a1a1a, #222);
  border: 2px solid #1BC402;
  border-radius: 14px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(27,196,2,0.3);
  opacity: 0;
  animation: achieveIn 0.5s ease forwards;
}
@keyframes achieveIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.achievement-toast .at-icon { font-size: 2rem; color: #1BC402; }
.achievement-toast .at-text { color: #fff; }
.achievement-toast .at-label { font-size: 0.7rem; color: #1BC402; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.achievement-toast .at-name { font-size: 1rem; font-weight: 700; }
body.light-mode .achievements-section {
  background: #f5f5f5;
}
body.light-mode .achievement-badge {
  background: rgba(27,196,2,0.06);
}
body.light-mode .achievement-tooltip {
  background: #fff;
  color: #333;
  border-color: #1BC402;
}
body.light-mode .achievement-tooltip .att-desc { color: #666; }
body.light-mode .achievement-toast {
  background: linear-gradient(135deg, #f5f5f5, #fff);
}

/* ── Rider Stats Dashboard ── */
.rider-stats-dashboard {
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0;
  border: 1px solid rgba(27,196,2,0.15);
}
.rsd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1BC402;
}
.rsd-streak {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff6b35;
  background: rgba(255,107,53,0.12);
  padding: 4px 10px;
  border-radius: 20px;
}
.rsd-streak i { margin-right: 2px; }
.rsd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rsd-stat {
  text-align: center;
  padding: 14px 8px;
  background: rgba(27,196,2,0.06);
  border-radius: 12px;
  border: 1px solid rgba(27,196,2,0.1);
  transition: transform 0.2s, border-color 0.2s;
}
.rsd-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(27,196,2,0.3);
}
.rsd-icon {
  font-size: 1.1rem;
  color: #1BC402;
  margin-bottom: 6px;
}
.rsd-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--chrome, #C0C0C0);
  margin-bottom: 2px;
}
.rsd-label {
  font-size: 0.65rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rsd-bar-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(27,196,2,0.1);
}
.rsd-bar-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.rsd-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
}
.rsd-bar {
  flex: 1;
  background: linear-gradient(to top, #1BC402, #22E605);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  position: relative;
  transition: height 0.5s ease;
}
.rsd-bar:hover {
  opacity: 0.8;
}
.rsd-bar-tip {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  color: var(--text-muted);
  white-space: nowrap;
  display: none;
}
.rsd-bar:hover .rsd-bar-tip { display: block; }
.rsd-bar-month {
  text-align: center;
  font-size: 0.5rem;
  color: var(--text-muted);
  margin-top: 3px;
}
@media (max-width: 480px) {
  .rsd-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rsd-stat { padding: 10px 6px; }
  .rsd-value { font-size: 1rem; }
}
body.light-mode .rider-stats-dashboard {
  background: #f5f5f5;
  border-color: rgba(27,196,2,0.2);
}
body.light-mode .rsd-stat {
  background: rgba(27,196,2,0.08);
  border-color: rgba(27,196,2,0.15);
}
body.light-mode .rsd-value { color: #333; }

/* ═══════════════ PREVIEW MODE ═══════════════ */

/* "Take a Quick Look" button on auth screen */
.auth-preview-btn-wrap {
  text-align: center;
  margin: 18px 0 10px;
}
.auth-preview-btn {
  background: transparent;
  border: 2px solid #1BC402;
  color: #1BC402;
  padding: 14px 36px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.auth-preview-btn:hover {
  background: rgba(27,196,2,0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(27,196,2,0.25);
}
.auth-preview-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: #666;
  color: #888;
  transform: none;
  box-shadow: none;
}
.auth-preview-btn:disabled:hover {
  background: transparent;
}
.auth-preview-hint {
  color: #888;
  font-size: 0.78rem;
  margin-top: 8px;
}

/* Preview Mode top bar */
.preview-mode-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  background: #111;
  border-bottom: 2px solid #1BC402;
  box-shadow: 0 2px 16px rgba(27,196,2,0.25);
}
.preview-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.preview-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.preview-label {
  color: #1BC402;
  font-family: Orbitron, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.preview-timer {
  color: #fff;
  font-family: Orbitron, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 46px;
  text-align: center;
}
.preview-bar-progress {
  flex: 1;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}
.preview-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #1BC402, #0f8a00);
  border-radius: 3px;
  transition: width 1s linear;
}
.preview-signup-btn {
  flex-shrink: 0;
  background: #1BC402;
  color: #000;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.preview-signup-btn:hover {
  background: #15a002;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(27,196,2,0.3);
}

/* Preview toast */
.preview-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(17,17,17,0.95);
  color: #1BC402;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid rgba(27,196,2,0.3);
  z-index: 100001;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.preview-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Time's up modal */
.preview-timesup-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pvFadeIn 0.4s;
}
@keyframes pvFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.preview-timesup-card {
  background: #1a1a2e;
  border: 1px solid rgba(27,196,2,0.25);
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  animation: pvSlideUp 0.4s;
  box-shadow: 0 12px 50px rgba(0,0,0,0.6);
}
@keyframes pvSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.preview-timesup-logo {
  height: 70px;
  margin-bottom: 20px;
  border-radius: 12px;
}
.preview-timesup-heading {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.preview-timesup-sub {
  color: #aaa;
  font-size: 1rem;
  margin-bottom: 28px;
}
.preview-timesup-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}
.preview-timesup-benefits li {
  color: #ccc;
  font-size: 0.92rem;
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.preview-timesup-benefits li i {
  color: #1BC402;
  font-size: 1rem;
  flex-shrink: 0;
}
.preview-timesup-signup-btn {
  width: 100%;
  background: #1BC402;
  color: #000;
  border: none;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 16px;
}
.preview-timesup-signup-btn:hover {
  background: #15a002;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(27,196,2,0.35);
}
.preview-timesup-login {
  color: #888;
  font-size: 0.85rem;
}
.preview-timesup-login a {
  color: #1BC402;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}
.preview-timesup-login a:hover {
  color: #15a002;
}

/* Push page content down when preview bar is visible */
body.preview-active .topnav {
  top: 50px;
}
body.preview-active .mobile-nav {
  /* mobile bottom nav stays put */
}
body.preview-active {
  padding-top: 50px;
}

/* Responsive */
@media (max-width: 600px) {
  .preview-bar-inner {
    padding: 6px 10px;
    gap: 8px;
  }
  .preview-label {
    font-size: 0.65rem;
    letter-spacing: 1px;
  }
  .preview-timer {
    font-size: 0.9rem;
  }
  .preview-signup-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
  }
  .preview-timesup-card {
    padding: 28px 20px;
  }
  .preview-timesup-heading {
    font-size: 1.25rem;
  }
}

/* ─── Mutual Followers ─────────────────────────────── */
.mutual-followers-row {
  margin: 0 0 8px;
}
.mutual-followers-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 8px 0;
}
.mutual-avatars-stack {
  display: flex;
  flex-direction: row;
}
.mutual-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg-primary);
  background: var(--gradient-chrome);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: -8px;
  transition: transform 0.2s;
}
.mutual-avatar:first-child {
  margin-left: 0;
}
.mutual-avatar:hover {
  transform: scale(1.15);
  z-index: 2;
}
.mutual-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.mutual-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.mutual-text b {
  color: var(--text-primary);
  font-weight: 600;
}

/* ─── Saved Posts Page ─────────────────────────────── */
.saved-posts-panel {
  background: var(--bg-primary);
  min-height: 200px;
}
.saved-posts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 16px;
  font-size: 1rem;
  font-weight: 700;
  font-family: Orbitron, sans-serif;
}
.saved-posts-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.saved-post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.saved-post-card:hover {
  border-color: #1BC402;
  transform: translateY(-1px);
}
.saved-post-card:active {
  transform: scale(0.99);
}
.saved-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.saved-post-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-chrome);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.saved-post-name {
  font-weight: 600;
  font-size: 0.88rem;
  margin-right: 8px;
}
.saved-post-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.saved-post-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}
.saved-post-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.saved-post-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.saved-post-multi {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.7rem;
}
.saved-post-actions {
  display: flex;
  justify-content: flex-end;
}
.saved-post-actions button {
  background: none;
  border: none;
  color: #1BC402;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.2s;
}
.saved-post-actions button:hover {
  background: var(--bg-secondary);
}

/* Single Post Overlay */
.single-post-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.single-post-modal {
  background: var(--bg-primary);
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid var(--border);
}
.single-post-content {
  padding: 0 16px 16px;
}

/* ═══════════ PHOTO LIGHTBOX ═══════════ */
.photo-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  user-select: none;
  -webkit-user-select: none;
}
.photo-lightbox-overlay.show {
  display: flex;
}
.lightbox-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  transition: background 0.2s;
}
.lightbox-close-btn:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  transition: background 0.2s, opacity 0.2s;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav.visible { display: flex; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 94vw;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
}
.lightbox-img-wrap img {
  max-width: 94vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5);
  transition: transform 0.25s ease;
  cursor: default;
  touch-action: none;
}
.lightbox-img-wrap img.zoomed {
  transform: scale(2);
  cursor: grab;
}
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 10001;
  letter-spacing: 0.5px;
}
.lightbox-actions {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
}
.lightbox-actions button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-actions button:hover { background: rgba(255,255,255,0.25); }
.post-image img { cursor: zoom-in; }
.carousel-slide img { cursor: zoom-in; }

/* ═══════════ STORY REACTIONS ═══════════ */
.story-reaction-bar {
  position: absolute;
  bottom: 56px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  z-index: 12;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
}
.story-react-emoji {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.2s;
  flex-shrink: 0;
}
.story-react-emoji:hover { transform: scale(1.2); background: rgba(255,255,255,0.22); }
.story-react-emoji:active { transform: scale(0.9); }
.story-react-emoji.sent {
  animation: storyReactPop 0.5s ease;
}
@keyframes storyReactPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.5) translateY(-10px); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.story-reply-input {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 22px;
  padding: 8px 14px;
  color: #fff;
  font-size: 0.85rem;
  outline: none;
  min-width: 0;
}
.story-reply-input::placeholder { color: rgba(255,255,255,0.5); }
.story-reply-input:focus { border-color: #1BC402; background: rgba(255,255,255,0.18); }
.story-reply-send {
  background: none;
  border: none;
  color: #1BC402;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.story-reply-send:hover { opacity: 1; }
.story-reaction-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 3rem;
  z-index: 99999;
  animation: storyToastAnim 0.8s ease forwards;
  pointer-events: none;
}
@keyframes storyToastAnim {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.6); opacity: 0; }
}
@media (max-width: 420px) {
  .story-react-emoji { width: 34px; height: 34px; font-size: 1rem; }
  .story-reaction-bar { gap: 2px; padding: 6px 8px; }
}
@media (max-width: 600px) {
  .lightbox-nav { width: 36px; height: 36px; font-size: 0.85rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close-btn { top: 10px; right: 10px; width: 36px; height: 36px; }
}