/* ═══════════════════════════════════════
   SURF BRAZIL — DESIGN SYSTEM
════════════════════════════════════════ */

:root {
  --ocean:    #00D4FF;
  --ocean-dk: #0099CC;
  --ocean-lt: #80EAFF;
  --sand:     #F5E6C8;
  --sand-dk:  #D4B896;
  --coral:    #FF6B6B;
  --sunset:   #FF9F43;
  --green:    #26de81;
  --dark:     #0A0F1E;
  --dark2:    #111827;
  --dark3:    #1F2937;
  --dark4:    #374151;
  --gray:     #6B7280;
  --gray-lt:  #9CA3AF;
  --white:    #FFFFFF;

  --classic:  #00D4FF;
  --good:     #26de81;
  --surfable: #FFD93D;
  --bad:      #FF6B6B;

  --radius:   16px;
  --radius-sm:8px;
  --shadow:   0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.5);

  --font: 'Inter', system-ui, sans-serif;
  --font-display: 'Syne', 'Inter', sans-serif;

  --nav-h: 72px;
  --top-h: 60px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font);
  background: var(--dark);
  color: var(--white);
  min-height: 100dvh;
  overflow-x: hidden;
}
button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--dark4); border-radius: 4px; }

/* ═══════════════════════════════════════
   SPLASH SCREEN
════════════════════════════════════════ */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#splash.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }

.splash-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(0,212,255,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(255,159,67,0.1) 0%, transparent 50%);
}

.splash-content {
  text-align: center; position: relative; z-index: 1;
}

.logo-wave {
  width: 100px; margin: 0 auto 20px;
  animation: wave-bob 2s ease-in-out infinite;
}
.logo-wave svg { width: 100%; }

@keyframes wave-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.splash-title {
  font-family: var(--font-display);
  font-size: 3.5rem; font-weight: 800; letter-spacing: -1px;
  color: var(--white);
  line-height: 1;
}
.splash-title span {
  display: block;
  background: linear-gradient(135deg, var(--ocean), var(--sunset));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.splash-sub {
  margin-top: 12px; color: var(--gray-lt); font-size: 0.9rem;
}

.splash-loader { margin-top: 48px; }
.loader-wave {
  width: 60px; height: 4px; background: var(--dark4);
  border-radius: 4px; margin: 0 auto;
  overflow: hidden; position: relative;
}
.loader-wave::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ocean), var(--ocean-lt));
  animation: loading 1.4s ease-in-out infinite;
}
@keyframes loading {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ═══════════════════════════════════════
   APP SHELL
════════════════════════════════════════ */
#app { display: flex; flex-direction: column; min-height: 100dvh; }

/* ─── TOP BAR ─── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: rgba(10,15,30,0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }

.menu-btn {
  display: flex; flex-direction: column; gap: 5px; padding: 4px;
}
.menu-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: all 0.3s;
}

.topbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
}
.topbar-logo svg { width: 36px; }

/* ─── PWA Install button ─── */
.pwa-install-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--ocean-dk), var(--ocean));
  color: var(--dark);
  border-radius: 20px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.3px;
  transition: opacity 0.2s, transform 0.2s;
  animation: pwaFadeIn 0.4s ease;
}
.pwa-install-btn:hover { opacity: 0.9; transform: scale(1.04); }
@keyframes pwaFadeIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }

.notif-btn {
  position: relative; padding: 8px;
  color: var(--gray-lt);
  transition: color 0.2s;
}
.notif-btn:hover { color: var(--white); }
.notif-btn svg { width: 22px; height: 22px; }
.badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--coral); color: white;
  font-size: 0.65rem; font-weight: 700;
  width: 16px; height: 16px;
  transition: opacity 0.2s;
}
/* Esconde badge quando = 0 */
.badge:empty, #notif-badge:is([data-count="0"]) { opacity: 0; pointer-events: none; }
.badge-hidden-zero { opacity: 0; pointer-events: none; }

.avatar-btn {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%; overflow: hidden;
  padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.avatar-btn img {
  width: 36px; height: 36px;
  min-width: 36px; max-width: 36px;
  border-radius: 50%;
  border: 2px solid var(--ocean);
  object-fit: cover; object-position: center top;
  display: block;
}

/* ─── SIDEBAR ─── */
.sidebar {
  position: fixed; top: 0; left: -300px; bottom: 0; z-index: 500;
  width: 280px;
  background: var(--dark2);
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: left 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  padding-bottom: 32px;
}
.sidebar.open { left: 0; }

.sidebar-overlay {
  position: fixed; inset: 0; z-index: 499;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}

.sidebar-header {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px 16px;
  background: linear-gradient(180deg, rgba(0,212,255,0.08), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-top: 0;
  padding-top: 72px;
}
.sidebar-header img {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--ocean);
}
.sidebar-header strong { display: block; font-size: 0.95rem; }
.sidebar-header span { font-size: 0.75rem; color: var(--gray-lt); }

.sidebar-menu { list-style: none; padding: 12px 0; }
.sidebar-menu li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  font-size: 0.95rem; cursor: pointer;
  transition: background 0.2s;
  border-radius: 0;
}
.sidebar-menu li:hover { background: rgba(255,255,255,0.06); }
.sidebar-menu li.active {
  background: rgba(0,212,255,0.12);
  color: var(--accent);
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: 17px;
}
.sidebar-menu li span:first-child { font-size: 1.1rem; width: 24px; text-align: center; }
.sidebar-logout-item {
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--coral) !important;
}
.sidebar-logout-item:hover { background: rgba(255,107,107,0.1) !important; }

.sidebar-conditions {
  margin: 8px 16px 0;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
}
.cond-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-lt); margin-bottom: 10px; }
.cond-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.85rem; }
.cond-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.cond-dot.classic  { background: var(--classic); box-shadow: 0 0 6px var(--classic); }
.cond-dot.good     { background: var(--good);    box-shadow: 0 0 6px var(--good);    }
.cond-dot.surfable { background: var(--surfable);}
.cond-dot.bad      { background: var(--bad);     }

/* ─── NOTIFICATIONS PANEL ─── */
.notif-panel {
  position: fixed; top: var(--top-h); right: 0; z-index: 400;
  width: min(360px, 100vw);
  background: var(--dark2);
  border-left: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 0 var(--radius);
  box-shadow: var(--shadow-lg);
  animation: slideDown 0.25s ease;
}
@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-item {
  display: flex; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s; cursor: pointer;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread { background: rgba(0,212,255,0.05); }
.notif-icon { font-size: 1.4rem; flex-shrink: 0; }
.notif-item strong { font-size: 0.85rem; display: block; }
.notif-item p { font-size: 0.8rem; color: var(--gray-lt); margin-top: 2px; }
.notif-item time { font-size: 0.72rem; color: var(--gray); margin-top: 4px; display: block; }

/* ─── MAIN CONTENT ─── */
#main-content {
  flex: 1;
  margin-top: var(--top-h);
  margin-bottom: var(--nav-h);
  overflow-x: hidden;
}

.page { display: none; }
.page.active { display: block; }

/* ─── BOTTOM NAV ─── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(10,15,30,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 12px; color: var(--gray);
  transition: color 0.2s;
  flex: 1;
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn span { font-size: 0.65rem; letter-spacing: 0.02em; }
.nav-btn.active { color: var(--ocean); }

.nav-center { flex: 1; }
.nav-center-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ocean), var(--ocean-dk));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,212,255,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-center-btn:active { transform: scale(0.94); box-shadow: 0 2px 10px rgba(0,212,255,0.3); }
.nav-center-btn svg { width: 24px; height: 24px; color: var(--dark); }

/* ═══════════════════════════════════════
   PAGE: FEED
════════════════════════════════════════ */

/* SWELL BANNER */
.swell-banner {
  position: relative; overflow: hidden;
  min-height: 220px;
  display: flex; align-items: flex-end;
  padding: 28px 20px;
  margin-bottom: 0;
}
.swell-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0A1628 0%, #0E2A4A 40%, #093346 100%);
}
.swell-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 120 Q50 80 100 100 Q150 120 200 85 Q250 50 300 90 Q350 130 400 80 L400 200 L0 200Z' fill='rgba(0,100,180,0.2)'/%3E%3Cpath d='M0 150 Q60 110 120 130 Q180 150 240 115 Q300 80 360 120 Q380 132 400 110 L400 200 L0 200Z' fill='rgba(0,150,200,0.15)'/%3E%3C/svg%3E") bottom/cover no-repeat;
}
.swell-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(0,212,255,0.12) 0%, transparent 60%);
}

.swell-content { position: relative; z-index: 1; width: 100%; }
.swell-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(0,212,255,0.2); border: 1px solid rgba(0,212,255,0.4);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--ocean); margin-bottom: 10px;
  animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,212,255,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(0,212,255,0); }
}

.swell-content h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin-bottom: 16px; }

.swell-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; margin-bottom: 16px;
}
.swell-stats > div {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: 8px; text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
}
.swell-stats span { display: block; font-size: 0.62rem; color: var(--gray-lt); margin-bottom: 2px; }
.swell-stats strong { font-size: 0.8rem; color: var(--white); }

/* QUICK CHECK-IN */
.quick-checkin {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--dark2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.quick-checkin img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ocean); }
.checkin-input {
  flex: 1; text-align: left;
  padding: 10px 14px; border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--gray); font-size: 0.85rem;
  transition: all 0.2s;
}
.checkin-input:hover { background: rgba(255,255,255,0.09); color: var(--white); }
.btn-checkin {
  padding: 8px 14px; border-radius: 20px;
  background: linear-gradient(135deg, var(--ocean), var(--ocean-dk));
  color: var(--dark); font-size: 0.8rem; font-weight: 600;
  white-space: nowrap;
}

/* STORIES */
.stories-section {
  padding: 14px 0;
  background: var(--dark2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stories-scroll {
  display: flex; gap: 16px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.stories-scroll::-webkit-scrollbar { display: none; }

.story-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.2s;
}
.story-item:active { transform: scale(0.94); }

.story-ring {
  width: 60px; height: 60px; border-radius: 50%;
  padding: 3px;
}
.story-ring.classic { background: linear-gradient(135deg, var(--classic), #006C9C); }
.story-ring.good    { background: linear-gradient(135deg, var(--good), #149553); }
.story-ring.surfable{ background: linear-gradient(135deg, var(--surfable), #C8960C); }
.story-ring.bad     { background: linear-gradient(135deg, var(--bad), #C0392B); }

.story-ring img {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--dark2);
  object-fit: cover;
}
.story-item span { font-size: 0.7rem; color: var(--gray-lt); max-width: 64px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* FEED TABS */
.feed-tabs {
  display: flex; gap: 0;
  background: var(--dark2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 16px;
  overflow-x: auto; scrollbar-width: none;
}
.feed-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 12px 16px; font-size: 0.85rem; font-weight: 500;
  color: var(--gray); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.tab-btn.active { color: var(--ocean); border-bottom-color: var(--ocean); }

/* FEED POSTS */
.feed-posts { padding: 0; }

.feed-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 52px 24px; text-align: center;
}
.feed-empty-icon { font-size: 3rem; }
.feed-empty strong { font-size: 1rem; font-weight: 700; }
.feed-empty span   { font-size: 0.84rem; color: var(--gray-lt); }
.feed-empty .btn-primary { margin-top: 8px; padding: 12px 28px; }

.post-card {
  background: var(--dark2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 4px;
  animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.post-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
}
.post-avatar {
  position: relative;
}
.post-avatar img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid transparent; object-fit: cover;
}
.post-avatar .score-ring {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--classic);
}
.post-meta { flex: 1; }
.post-meta strong { display: block; font-size: 0.9rem; }
.post-meta span { font-size: 0.75rem; color: var(--gray-lt); }
.post-score {
  padding: 4px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 700;
}
.post-score.classic  { background: rgba(0,212,255,0.15); color: var(--classic); border: 1px solid rgba(0,212,255,0.3); }
.post-score.good     { background: rgba(38,222,129,0.15); color: var(--good);    border: 1px solid rgba(38,222,129,0.3); }
.post-score.surfable { background: rgba(255,217,61,0.15); color: var(--surfable);border: 1px solid rgba(255,217,61,0.3); }
.post-score.bad      { background: rgba(255,107,107,0.15);color: var(--bad);     border: 1px solid rgba(255,107,107,0.3); }

.post-beach {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px 8px;
  font-size: 0.8rem; color: var(--ocean);
  font-weight: 500;
}

.post-conditions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 16px 10px;
}
.cond-tag {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.06);
  font-size: 0.75rem; color: var(--gray-lt);
  border: 1px solid rgba(255,255,255,0.08);
}

.post-text { padding: 0 16px 12px; font-size: 0.9rem; line-height: 1.5; color: var(--gray-lt); }
.post-text strong { color: var(--white); }

.post-media {
  width: 100%; aspect-ratio: 4/3; overflow: hidden;
  background: var(--dark3);
  position: relative;
}
.post-media img { width: 100%; height: 100%; object-fit: cover; }
.post-media video { width: 100%; height: 100%; object-fit: cover; }
.post-media-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%);
}

.post-actions {
  display: flex; gap: 0; padding: 4px 8px;
}
.post-action-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; font-size: 0.82rem; color: var(--gray-lt);
  transition: color 0.2s;
  border-radius: var(--radius-sm);
}
.post-action-btn:hover { color: var(--white); }
.post-action-btn.liked { color: var(--coral); }
.post-action-btn svg { width: 18px; height: 18px; }

/* ── Post comments panel ─────────────────────────────────────────────────── */
.post-comments-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid transparent;
}
.post-comments-panel.open {
  max-height: 600px;
  border-top-color: rgba(255,255,255,0.06);
}
.post-comments-list {
  padding: 10px 16px 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.post-comments-empty {
  font-size: 0.78rem; color: var(--gray-lt);
  text-align: center; padding: 6px 0 2px;
  opacity: 0.6;
}
.post-comment-item {
  display: flex; gap: 10px; align-items: flex-start;
}
.post-comment-item img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.post-comment-body {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 6px 10px;
  flex: 1;
  min-width: 0;
}
.post-comment-body strong {
  display: block; font-size: 0.75rem; color: var(--white);
  margin-bottom: 2px;
}
.post-comment-body span {
  font-size: 0.82rem; color: var(--gray-lt);
  line-height: 1.4; word-break: break-word;
}
.post-comment-body small {
  display: block; font-size: 0.68rem; color: rgba(255,255,255,0.3);
  margin-top: 4px;
}
.post-comment-form {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 12px;
}
.post-comment-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.post-comment-input {
  flex: 1; resize: none; min-height: 34px; max-height: 80px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 0.82rem; color: var(--white);
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.2s;
  overflow: hidden;
}
.post-comment-input:focus {
  outline: none;
  border-color: rgba(0,212,255,0.45);
  background: rgba(255,255,255,0.08);
}
.post-comment-input::placeholder { color: rgba(255,255,255,0.3); }
.post-comment-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ocean-dk);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.post-comment-send:hover { background: var(--ocean); transform: scale(1.08); }
.post-comment-send svg { width: 15px; height: 15px; color: var(--white); }
.post-comments-owner-note {
  font-size: 0.74rem; color: rgba(255,255,255,0.3);
  text-align: center; padding: 6px 16px 12px;
}

/* ═══════════════════════════════════════
   PAGE: MAP
════════════════════════════════════════ */
.map-controls {
  position: sticky; top: var(--top-h); z-index: 100;
  background: rgba(10,15,30,0.95); backdrop-filter: blur(20px);
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.map-filter-row {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 10px;
}
.map-filter-row::-webkit-scrollbar { display: none; }

.filter-chip {
  padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 500;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); white-space: nowrap;
  transition: all 0.2s;
}
.filter-chip.active {
  background: var(--ocean); border-color: var(--ocean);
  color: var(--dark);
}

.map-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.map-search-bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--white); font-size: 0.85rem;
}
.map-search-bar input::placeholder { color: var(--gray); }

#wave-map {
  height: calc(100dvh - var(--top-h) - var(--nav-h) - 96px);
  min-height: 400px;
}

/* Leaflet overrides */
.leaflet-container { background: #0A1628 !important; }
.leaflet-tile-pane { filter: brightness(0.6) saturate(1.2) hue-rotate(190deg); }

.beach-panel {
  position: fixed; bottom: var(--nav-h); left: 0; right: 0; z-index: 450;
  background: var(--dark2);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
  animation: slideUp 0.3s ease;
  max-height: 60vh;
  overflow-y: auto;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.beach-panel-handle {
  width: 40px; height: 4px; background: var(--dark4);
  border-radius: 2px; margin: 0 auto 16px;
}

.beach-panel-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.beach-panel-header h3 { font-size: 1.15rem; font-weight: 700; }
.beach-panel-header button { color: var(--gray); padding: 4px; }

.beach-score-large {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 0.9rem;
  margin-bottom: 16px;
}

.beach-stats-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  margin-bottom: 16px;
}
.beach-stat {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 10px; text-align: center;
  border: 1px solid rgba(255,255,255,0.07);
}
.beach-stat .label { font-size: 0.65rem; color: var(--gray-lt); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.beach-stat .value { font-size: 1.1rem; font-weight: 700; }
.beach-stat .unit  { font-size: 0.65rem; color: var(--gray-lt); }

.beach-panel-actions { display: flex; gap: 10px; }
.beach-panel-actions button {
  flex: 1; padding: 12px; border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 600;
  transition: all 0.2s;
}

/* Custom map markers */
.wave-marker {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700;
  border: 2px solid white;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s;
}
.wave-marker:hover { transform: scale(1.15); }
.wave-marker.classic  { background: var(--classic);  color: #003344; }
.wave-marker.good     { background: var(--good);     color: #003320; }
.wave-marker.surfable { background: var(--surfable); color: #332b00; }
.wave-marker.bad      { background: var(--bad);      color: #330000; }
.wave-marker.forecast-active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ocean), 0 0 18px rgba(0,212,255,0.7);
  transform: scale(1.25);
  z-index: 9999;
}

/* Forecast-only map dots (beaches not in BEACHES) */
.forecast-dot-marker {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: rgba(10,15,30,0.78);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: all 0.25s;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.forecast-dot-marker:hover {
  background: rgba(0,212,255,0.15);
  border-color: rgba(0,212,255,0.5);
  transform: scale(1.15);
}
.forecast-dot-marker.active {
  background: rgba(0,212,255,0.22);
  border-color: var(--ocean);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ocean), 0 0 16px rgba(0,212,255,0.6);
  transform: scale(1.35);
}
/* Tooltip label on hover */
.forecast-dot-marker::after {
  content: attr(data-name);
  position: absolute;
  bottom: 110%; left: 50%; transform: translateX(-50%);
  background: rgba(10,15,30,0.92); color: #fff;
  padding: 3px 8px; border-radius: 6px;
  font-size: 0.68rem; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.forecast-dot-marker:hover::after { opacity: 1; }

/* ═══════════════════════════════════════
   MODAL: PREMIUM
════════════════════════════════════════ */
.premium-modal {
  position: relative;
  background: linear-gradient(160deg, #0d1225 0%, #15203a 50%, #0a1020 100%);
  border: 1px solid rgba(255,200,0,0.25);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  max-width: 360px;
  width: 100%;
}
.premium-modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 160px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,200,0,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.premium-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--gray-lt); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.premium-header {
  text-align: center; padding: 32px 24px 16px; position: relative; z-index: 1;
}
.premium-crown {
  font-size: 2.8rem; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 16px rgba(255,200,0,0.5));
}
.premium-title {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 900;
  letter-spacing: -0.5px; color: #fff; margin-bottom: 6px;
}
.premium-title span {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.premium-sub { font-size: 0.82rem; color: var(--gray-lt); }

.premium-locked-msg {
  display: flex; align-items: center; gap: 10px;
  margin: 0 20px 16px;
  padding: 12px 16px;
  background: rgba(255,200,0,0.07);
  border: 1px solid rgba(255,200,0,0.2);
  border-radius: var(--radius-sm);
  font-size: 0.83rem; color: var(--gray-lt);
}
.premium-locked-msg span { font-size: 1.2rem; flex-shrink: 0; }
.premium-locked-msg strong { color: #FFD700; }

.premium-benefits {
  list-style: none; padding: 0 20px; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.premium-benefits li {
  display: flex; align-items: flex-start; gap: 12px;
}
.premium-benefits li > span {
  font-size: 1.1rem; flex-shrink: 0; margin-top: 2px;
}
.premium-benefits li div { flex: 1; }
.premium-benefits li strong { display: block; font-size: 0.85rem; color: #fff; }
.premium-benefits li small  { font-size: 0.75rem; color: var(--gray-lt); }

.premium-price {
  text-align: center; padding: 0 20px 16px;
}
.premium-price-tag {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  margin-bottom: 4px;
}
.premium-price-val {
  font-size: 2.4rem; font-weight: 900; font-family: var(--font-display);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.premium-price-per { font-size: 1rem; color: var(--gray-lt); }
.premium-price small { font-size: 0.72rem; color: rgba(255,255,255,0.35); }

.btn-premium-cta {
  display: block; width: calc(100% - 40px); margin: 0 20px 10px;
  padding: 15px; border-radius: var(--radius);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000; font-size: 1rem; font-weight: 800;
  text-align: center; cursor: pointer;
  box-shadow: 0 4px 20px rgba(255,200,0,0.35);
  transition: all 0.2s;
}
.btn-premium-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(255,200,0,0.5); }

.premium-skip {
  display: block; width: 100%; padding: 12px 20px 24px;
  text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.3);
  cursor: pointer; transition: color 0.2s;
}
.premium-skip:hover { color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════════════
   PAGE: TRIPS
════════════════════════════════════════ */
.page-header-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
}
.page-header-bar h2 { font-size: 1.4rem; font-weight: 700; }

.trips-hero {
  margin: 0 16px 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #0E2A4A, #1A3A6A);
  border: 1px solid rgba(0,212,255,0.2);
  position: relative; overflow: hidden;
}
.trips-hero::before {
  content: '🚐';
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 3rem; opacity: 0.3;
}
.trips-hero-content h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.trips-hero-content p  { font-size: 0.82rem; color: var(--gray-lt); }

.trips-search {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 0 16px 16px;
}
.trips-search select {
  flex: 1; min-width: 140px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--dark3); border: 1px solid rgba(255,255,255,0.1);
  color: var(--white); font-size: 0.85rem;
}

.trips-list { padding: 0 16px; display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }

.trip-card {
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.trip-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.trip-card-image {
  width: 100%; height: 160px; object-fit: cover;
  position: relative; overflow: hidden; background: var(--dark3);
}
.trip-card-image img { width: 100%; height: 100%; object-fit: cover; }
.trip-card-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700;
  backdrop-filter: blur(10px);
}
.trip-card-badge.open    { background: rgba(38,222,129,0.85); color: #003320; }
.trip-card-badge.limited { background: rgba(255,159,67,0.85); color: #331a00; }
.trip-card-badge.full    { background: rgba(255,107,107,0.85); color: #330000; }

.trip-card-body { padding: 16px; }
.trip-card-body h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.trip-dates { font-size: 0.8rem; color: var(--ocean); margin-bottom: 10px; font-weight: 500; }

.trip-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.trip-meta-item { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--gray-lt); }

.trip-organizer {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
}
.trip-organizer img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.trip-organizer span { font-size: 0.78rem; color: var(--gray-lt); }
.trip-organizer strong { font-size: 0.82rem; }

.trip-avatars {
  display: flex; margin-left: auto;
}
.trip-avatars img {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--dark2); object-fit: cover;
  margin-left: -8px;
}
.trip-avatars:first-child { margin-left: 0; }

/* ═══════════════════════════════════════
   PAGE: COMMUNITY
════════════════════════════════════════ */
.community-tabs {
  display: flex; gap: 0; padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}

.surfer-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; transition: background 0.2s;
}
.surfer-card:hover { background: rgba(255,255,255,0.03); }

.surfer-avatar-wrap { position: relative; }
.surfer-avatar-wrap img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dark4); }
.surfer-level-badge {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 0.55rem; font-weight: 700; padding: 1px 4px; border-radius: 4px;
  background: var(--ocean); color: var(--dark);
}

.surfer-info { flex: 1; }
.surfer-info strong { display: block; font-size: 0.9rem; }
.surfer-info span { font-size: 0.75rem; color: var(--gray-lt); }
.surfer-pts { font-size: 0.8rem; color: var(--ocean); font-weight: 600; }

.follow-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  border: 1.5px solid var(--ocean); color: var(--ocean);
  transition: all 0.2s;
}
.follow-btn.following {
  background: var(--ocean); color: var(--dark);
  border-color: var(--ocean);
}

.group-card {
  margin: 0 16px 14px;
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.group-card-header {
  height: 80px; position: relative; overflow: hidden;
}
.group-card-header-bg {
  width: 100%; height: 100%; object-fit: cover;
}
.group-card-body { padding: 14px; }
.group-card-body h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.group-card-body p { font-size: 0.8rem; color: var(--gray-lt); margin-bottom: 10px; }
.group-card-footer { display: flex; justify-content: space-between; align-items: center; }
.group-members { font-size: 0.75rem; color: var(--gray-lt); }
.join-btn {
  padding: 6px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
  background: var(--ocean); color: var(--dark);
}

/* ═══════════════════════════════════════
   PAGE: RANKING
════════════════════════════════════════ */
.ranking-tabs { display: flex; gap: 0; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 0; }

.podium {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 12px; padding: 32px 16px 20px;
  background: linear-gradient(180deg, rgba(0,212,255,0.05), transparent);
}
.podium-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.podium-item img { border-radius: 50%; object-fit: cover; border: 3px solid transparent; }
.podium-1 img { width: 68px; height: 68px; border-color: #FFD700; }
.podium-2 img { width: 56px; height: 56px; border-color: #C0C0C0; }
.podium-3 img { width: 56px; height: 56px; border-color: #CD7F32; }
.podium-name { font-size: 0.75rem; font-weight: 600; text-align: center; max-width: 70px; }
.podium-pts  { font-size: 0.7rem; color: var(--ocean); }
.podium-num  {
  font-size: 0.7rem; font-weight: 800; padding: 2px 8px;
  border-radius: 4px;
}
.podium-1 .podium-num { background: #FFD700; color: #332a00; }
.podium-2 .podium-num { background: #C0C0C0; color: #1a1a1a; }
.podium-3 .podium-num { background: #CD7F32; color: #1a0a00; }
.podium-platform {
  width: 80px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: flex-end; justify-content: center;
}
.podium-1 .podium-platform { height: 60px; }
.podium-2 .podium-platform { height: 44px; }
.podium-3 .podium-platform { height: 32px; }

.rank-list { padding: 0 16px; }
.rank-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--dark2);
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}
.rank-item.me {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.2);
}
.rank-num { font-size: 0.85rem; font-weight: 700; width: 24px; text-align: center; color: var(--gray-lt); }
.rank-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.rank-info { flex: 1; }
.rank-info strong { display: block; font-size: 0.88rem; }
.rank-info span { font-size: 0.72rem; color: var(--gray-lt); }
.rank-pts { font-size: 0.88rem; font-weight: 700; color: var(--ocean); }
.rank-change { font-size: 0.72rem; padding: 2px 6px; border-radius: 4px; }
.rank-change.up   { color: var(--good); }
.rank-change.down { color: var(--bad); }
.rank-change.same { color: var(--gray-lt); }

.badges-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
  padding: 16px;
}
.badge-card {
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 16px 12px; text-align: center;
  transition: transform 0.2s;
}
.badge-card:hover { transform: translateY(-2px); }
.badge-card.earned { border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.05); }
.badge-card.locked { opacity: 0.4; filter: grayscale(1); }
.badge-icon { font-size: 2rem; margin-bottom: 8px; }
.badge-name { font-size: 0.72rem; font-weight: 600; margin-bottom: 4px; }
.badge-desc { font-size: 0.65rem; color: var(--gray-lt); }

/* ═══════════════════════════════════════
   PAGE: PROFILE
════════════════════════════════════════ */
.profile-cover {
  height: 180px; position: relative; overflow: hidden;
}
.profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--dark) 100%);
}

.profile-header {
  padding: 0 20px 16px;
  margin-top: -50px;
  position: relative; z-index: 1;
}
.profile-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  border: 4px solid var(--dark); object-fit: cover;
  margin-bottom: 12px;
}
.profile-name { font-size: 1.4rem; font-weight: 800; }
.profile-handle { font-size: 0.85rem; color: var(--gray-lt); margin-bottom: 8px; }
.profile-bio { font-size: 0.85rem; color: var(--gray-lt); margin-bottom: 10px; line-height: 1.5; }
.profile-info-row {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px;
}
.profile-info-item {
  font-size: 0.78rem; color: var(--gray-lt); display: flex; align-items: center; gap: 4px;
}
.profile-level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(0,212,255,0.15); border: 1px solid rgba(0,212,255,0.3);
  font-size: 0.78rem; font-weight: 600; color: var(--ocean);
  margin-bottom: 14px;
}

.profile-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profile-stat {
  background: var(--dark); padding: 14px 8px; text-align: center;
}
.profile-stat strong { display: block; font-size: 1.1rem; font-weight: 700; }
.profile-stat span   { font-size: 0.65rem; color: var(--gray-lt); text-transform: uppercase; letter-spacing: 0.05em; }

.profile-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.profile-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2px; padding: 2px;
}
.profile-grid-item {
  aspect-ratio: 1; overflow: hidden; background: var(--dark3);
  position: relative;
}
.profile-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.profile-grid-item:hover img { transform: scale(1.05); }
.profile-grid-item .play-icon {
  position: absolute; top: 8px; right: 8px; font-size: 0.7rem;
}

.favorite-beaches {
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.fav-beach-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.06);
}
.fav-beach-item img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; }
.fav-beach-info { flex: 1; }
.fav-beach-info strong { display: block; font-size: 0.88rem; }
.fav-beach-info span { font-size: 0.75rem; color: var(--gray-lt); }
.fav-beach-score { padding: 4px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; }

.equipment-list {
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.equip-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.06);
}
.equip-icon { font-size: 1.6rem; }
.equip-info strong { display: block; font-size: 0.88rem; }
.equip-info span { font-size: 0.75rem; color: var(--gray-lt); }

/* ═══════════════════════════════════════
   PAGE: SETTINGS
════════════════════════════════════════ */
.settings-list { padding: 0 16px 16px; }
.settings-group {
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px; overflow: hidden;
}
.settings-group h4 {
  padding: 12px 16px;
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gray-lt);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.settings-item:last-child { border-bottom: none; }
.settings-item select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--white); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.82rem;
}
.settings-item.link { cursor: pointer; }
.settings-item.link:hover { background: rgba(255,255,255,0.04); }
.settings-item .arr { color: var(--gray); }
.settings-item.danger { color: var(--coral); }
.settings-item.danger .arr { color: var(--coral); }

/* TOGGLE SWITCH */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--dark4); border-radius: 24px;
  transition: background 0.3s;
}
.slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: white; border-radius: 50%;
  transition: transform 0.3s;
}
.toggle input:checked + .slider { background: var(--ocean); }
.toggle input:checked + .slider::before { transform: translateX(20px); }

/* ═══════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ocean), var(--ocean-dk));
  color: var(--dark); font-size: 0.88rem; font-weight: 700;
  transition: all 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,212,255,0.4); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  padding: 10px 18px; border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white); font-size: 0.85rem; font-weight: 600;
  transition: all 0.2s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); }

.btn-outline-ocean {
  padding: 10px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--ocean);
  color: var(--ocean); font-size: 0.85rem; font-weight: 600;
  transition: all 0.2s;
}
.btn-outline-ocean:hover { background: rgba(0,212,255,0.1); }

.full-width { width: 100%; }

/* ═══════════════════════════════════════
   MODALS
════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end;
  padding: 0;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  background: var(--dark2); border-radius: var(--radius) var(--radius) 0 0;
  max-height: 92dvh; overflow-y: auto;
  animation: modalSlideUp 0.35s cubic-bezier(0.4,0,0.2,1);
}
@keyframes modalSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.modal-large { max-height: 96dvh; }

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 20px 0;
  position: sticky; top: 0;
  background: var(--dark2);
  z-index: 1;
}
.modal-header h3 { font-size: 1.05rem; font-weight: 700; }
.modal-header button { color: var(--gray-lt); padding: 4px; font-size: 1.1rem; }

.modal-body { padding: 16px 20px 32px; }

/* FORM ELEMENTS */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--gray-lt); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 11px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); color: var(--white);
  font-size: 0.9rem;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--ocean);
}
.form-group textarea { min-height: 80px; resize: vertical; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* ── Comentário IA / manual ── */
.ci-comment-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ci-comment-header label { margin: 0; }
.ci-comment-toggle { display: flex; border-radius: 20px; overflow: hidden; border: 1px solid var(--dark4); }
.ci-tog {
  padding: 4px 12px; font-size: 0.72rem; font-weight: 700;
  background: transparent; color: var(--gray-lt);
  cursor: pointer; transition: all 0.2s; border: none;
}
.ci-tog.active { background: rgba(0,212,255,0.15); color: var(--ocean); }

.ci-comment-ai-area {
  display: flex; flex-direction: column; gap: 6px;
}
.ci-ai-text {
  padding: 10px 12px; border-radius: var(--radius);
  background: rgba(0,212,255,0.05); border: 1px solid rgba(0,212,255,0.2);
  font-size: 0.82rem; line-height: 1.5; color: #dde;
  min-height: 64px;
}
.ci-ai-regen {
  align-self: flex-end; padding: 5px 12px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700;
  background: rgba(255,255,255,0.06); border: 1px solid var(--dark4);
  color: var(--gray-lt); cursor: pointer; transition: all 0.2s;
}
.ci-ai-regen:hover { background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.3); color: var(--ocean); }

/* ── Aviso de duplicidade ── */
.ci-dup-warning {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  background: rgba(255,217,61,0.08); border: 1px solid rgba(255,217,61,0.35);
  margin-bottom: 14px;
}
.ci-dup-warning.hidden { display: none; }
.ci-dup-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.ci-dup-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ci-dup-text strong { font-size: 0.82rem; color: var(--surfable); }
.ci-dup-text span   { font-size: 0.74rem; color: var(--gray-lt); }
.ci-dup-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.ci-dup-btn-edit, .ci-dup-btn-new {
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.ci-dup-btn-edit {
  background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.4); color: var(--ocean);
}
.ci-dup-btn-edit:hover  { background: rgba(0,212,255,0.22); }
.ci-dup-btn-new {
  background: rgba(255,255,255,0.06); border: 1px solid var(--dark4); color: var(--gray-lt);
}
.ci-dup-btn-new:hover { color: #fff; }

/* ── Botão Editar no post ── */
.post-edit-btn { color: var(--ocean) !important; margin-left: auto; }
.post-edit-btn svg { stroke: var(--ocean); }
.post-edit-btn:hover { background: rgba(0,212,255,0.1) !important; }

/* ── Check-in beach selector ──────────────────────────────────── */
.ci-beach-selector { display: flex; flex-direction: column; gap: 8px; }

.ci-states {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.ci-states::-webkit-scrollbar { display: none; }
.ci-state-tab {
  flex-shrink: 0; padding: 4px 10px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 600;
  background: rgba(255,255,255,0.05); border: 1px solid var(--dark4);
  color: var(--gray-lt); cursor: pointer; transition: all 0.2s;
}
.ci-state-tab.active {
  background: rgba(0,212,255,0.12); border-color: var(--ocean); color: var(--ocean);
}

.ci-chips {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; flex-wrap: nowrap;
  max-height: 42px;
}
.ci-chips::-webkit-scrollbar { display: none; }
.ci-chip {
  flex-shrink: 0; padding: 6px 12px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 500;
  background: rgba(255,255,255,0.05); border: 1px solid var(--dark4);
  color: var(--gray-lt); cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.ci-chip:hover { border-color: rgba(0,212,255,0.3); color: #fff; }
.ci-chip.active {
  background: rgba(0,212,255,0.12); border-color: var(--ocean); color: var(--ocean);
  font-weight: 700;
}

.ci-selected {
  font-size: 0.78rem; color: var(--gray-lt);
  padding: 7px 12px; border-radius: var(--radius);
  background: var(--dark3); border: 1px dashed var(--dark4);
  display: flex; align-items: center; min-height: 34px;
}
.ci-selected.has-selection {
  color: var(--ocean); border-color: rgba(0,212,255,0.35);
  border-style: solid; font-weight: 600;
}

/* ── Badge automático + info da previsão ── */
.ci-quality-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.ci-quality-header label { margin: 0; }
.ci-auto-badge {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.35);
  color: var(--ocean);
}
.ci-auto-badge.hidden { display: none; }
.ci-forecast-info {
  margin-top: 6px; font-size: 0.72rem; color: var(--gray-lt);
  padding: 4px 10px; background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
}
.ci-forecast-info.hidden { display: none; }

/* ── Foto do check-in ── */
.ci-optional { font-size: 0.68rem; color: var(--gray-lt); font-weight: 400; }
.ci-photo-area { display: flex; flex-direction: column; gap: 8px; }
.ci-photo-btns { display: flex; gap: 8px; }
.ci-photo-btn {
  flex: 1; padding: 9px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05); border: 1px solid var(--dark4);
  color: var(--gray-lt); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.ci-photo-btn:hover {
  background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.3); color: #fff;
}
.ci-photo-preview {
  position: relative; border-radius: var(--radius); overflow: hidden;
  max-height: 200px; border: 1px solid rgba(255,255,255,0.08);
}
.ci-photo-preview img {
  width: 100%; height: 200px; object-fit: cover; display: block;
}
.ci-photo-remove {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; transition: background 0.2s;
}
.ci-photo-remove:hover { background: var(--bad); }

.quality-btns, .wind-btns, .transport-btns {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.quality-btn, .wind-btn, .transport-btn {
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); transition: all 0.2s;
}
.quality-btn.selected, .wind-btn.selected, .transport-btn.selected {
  background: rgba(0,212,255,0.15);
  border-color: var(--ocean); color: var(--ocean);
}
/* Qualidade somente leitura no check-in */
.ci-quality-readonly { pointer-events: none; opacity: 0.95; }
.ci-quality-readonly .quality-btn { cursor: default; }
.ci-quality-readonly .quality-btn.selected {
  background: rgba(0,212,255,0.18);
  border-color: var(--ocean); color: var(--ocean);
  box-shadow: 0 0 8px rgba(0,212,255,0.2);
}

/* ── Crowd 3-dot selector ── */
.ci-crowd-wrap { margin: 4px 0 14px; }
.ci-crowd-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.ci-crowd-header label { font-size: 0.78rem; color: var(--gray-lt); margin: 0; }
.ci-crowd-label { font-size: 0.82rem; font-weight: 700; color: var(--ocean); }

.ci-crowd-track {
  position: relative; display: flex;
  justify-content: space-between; align-items: center;
  padding: 0 4px;
}
.ci-crowd-line {
  position: absolute; left: 4px; right: 4px; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 4px;
  background: var(--dark4);
  --crowd-fill: 50%;
}
.ci-crowd-line::after {
  content: ''; position: absolute; left: 0; top: 0;
  height: 100%; border-radius: 4px;
  width: var(--crowd-fill);
  background: linear-gradient(90deg, var(--ocean-dk), var(--ocean));
  transition: width 0.25s ease;
}
.ci-crowd-dot {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--dark4); border: 2.5px solid var(--dark3);
  cursor: pointer; transition: all 0.2s;
}
.ci-crowd-dot:hover { border-color: rgba(0,212,255,0.5); transform: scale(1.15); }
.ci-crowd-dot.active {
  background: var(--ocean);
  border-color: var(--ocean);
  box-shadow: 0 0 0 4px rgba(0,212,255,0.18), 0 0 10px rgba(0,212,255,0.4);
  transform: scale(1.2);
}
.ci-crowd-labels {
  display: flex; justify-content: space-between;
  padding: 0 2px; margin-top: 8px;
}
.ci-crowd-labels span { font-size: 0.68rem; color: var(--gray-lt); }

.checkin-sliders { margin: 14px 0; }
.slider-row { margin-bottom: 12px; }
.slider-row label {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--gray-lt); margin-bottom: 6px;
}
.slider-row input[type=range] {
  width: 100%; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--dark4); border-radius: 4px;
}
.slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ocean); cursor: pointer;
  box-shadow: 0 0 8px rgba(0,212,255,0.5);
}

/* ─── STORY VIEWER ─── */
.story-viewer {
  width: 100%; max-width: 480px; margin: auto;
  background: var(--dark2); min-height: 80dvh;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; flex-direction: column;
  animation: modalSlideUp 0.3s ease;
  overflow: hidden;
}
.story-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  background: rgba(0,0,0,0.3);
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
.story-header img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ocean); }
.story-header strong { display: block; font-size: 0.88rem; }
.story-header span { font-size: 0.72rem; color: rgba(255,255,255,0.7); }
.story-header button { margin-left: auto; color: white; font-size: 1.1rem; }

.story-media {
  flex: 1; min-height: 400px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0E2A4A, #0A1628);
}
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-media-icon { font-size: 4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.story-info { padding: 14px 16px; background: rgba(0,0,0,0.5); }
.story-score-badge { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; }
.story-details { font-size: 0.85rem; color: rgba(255,255,255,0.85); line-height: 1.5; }
.story-progress { height: 3px; background: rgba(255,255,255,0.2); }
.story-progress-bar { height: 100%; background: white; width: 0; animation: storyProg 5s linear forwards; }
@keyframes storyProg { from { width: 0; } to { width: 100%; } }

/* ═══════════════════════════════════════
   TOAST
════════════════════════════════════════ */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%; z-index: 800;
  transform: translateX(-50%);
  background: var(--dark3); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 12px 20px;
  font-size: 0.88rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s ease;
  white-space: nowrap;
}
@keyframes toastIn {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ═══════════════════════════════════════
   UTILITIES
════════════════════════════════════════ */
.text-ocean  { color: var(--ocean); }
.text-gray   { color: var(--gray-lt); }
.text-coral  { color: var(--coral); }
.text-green  { color: var(--green); }
.font-bold   { font-weight: 700; }
.mt-8        { margin-top: 8px; }
.mt-16       { margin-top: 16px; }

/* Empty state */
.empty-state {
  text-align: center; padding: 48px 24px;
  color: var(--gray);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state p { font-size: 0.9rem; }

/* ═══════════════════════════════════════
   SHARE MODAL
════════════════════════════════════════ */
.share-preview-wrap {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--dark3); margin-bottom: 12px;
  min-height: 200px; display: flex; align-items: center; justify-content: center;
}
.share-canvas {
  width: 100%; display: block; border-radius: var(--radius);
  max-height: 300px; object-fit: contain;
}
.share-canvas-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; font-size: 0.82rem; color: var(--gray-lt);
  background: var(--dark3);
}
.share-hint {
  font-size: 0.78rem; color: var(--gray-lt); text-align: center; margin-bottom: 16px;
}
.share-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
}
.share-dest-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 10px; border-radius: var(--radius);
  font-size: 0.72rem; font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); transition: all 0.2s;
}
.share-dest-btn:hover { transform: translateY(-2px); }
.share-dest-btn:active { transform: scale(0.96); }
.share-dest-btn.instagram {
  background: linear-gradient(135deg, rgba(131,58,180,0.2), rgba(253,29,29,0.15), rgba(252,176,69,0.15));
  border-color: rgba(253,29,29,0.3); color: #FF6B9D;
}
.share-dest-btn.whatsapp {
  background: rgba(37,211,102,0.12); border-color: rgba(37,211,102,0.3); color: #25D366;
}
.share-dest-btn.twitter {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: var(--white);
}
.share-dest-btn.copy {
  background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.25); color: var(--ocean);
}
.share-dest-btn.download {
  background: rgba(38,222,129,0.1); border-color: rgba(38,222,129,0.25); color: var(--good);
}
.share-dest-btn.stories {
  background: linear-gradient(135deg, rgba(131,58,180,0.2), rgba(253,29,29,0.15));
  border-color: rgba(131,58,180,0.3); color: #C77DFF;
}

/* ═══════════════════════════════════════
   PAGE: WAVE POOLS
════════════════════════════════════════ */
.wp-hero {
  position: relative; min-height: 200px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 24px 20px;
}
.wp-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #051320 0%, #0A2840 50%, #0D3356 100%);
}
.wp-hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 Q50 60 100 80 Q150 100 200 65 Q250 30 300 70 Q350 110 400 60 L400 200 L0 200Z' fill='rgba(0,150,200,0.25)'/%3E%3Cpath d='M0 130 Q60 90 120 110 Q180 130 240 100 Q300 70 360 105 Q390 120 400 95 L400 200 L0 200Z' fill='rgba(0,100,180,0.18)'/%3E%3C/svg%3E") bottom/cover no-repeat;
}
.wp-hero-content { position: relative; z-index: 1; }
.wp-hero-badge {
  display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 20px;
  background: rgba(0,212,255,0.2); border: 1px solid rgba(0,212,255,0.4);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ocean);
  margin-bottom: 10px;
}
.wp-hero-content h2 { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.wp-hero-content p  { font-size: 0.82rem; color: rgba(255,255,255,0.7); max-width: 280px; }

.wp-filters { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.wp-filters-scroll {
  display: flex; gap: 8px; padding: 0 16px;
  overflow-x: auto; scrollbar-width: none;
}
.wp-filters-scroll::-webkit-scrollbar { display: none; }
.wp-state-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); white-space: nowrap; flex-shrink: 0; transition: all 0.2s;
}
.wp-state-btn.active {
  background: rgba(0,212,255,0.12); border-color: var(--ocean); color: var(--ocean);
}

.wp-info-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 10px 16px;
}
.wp-info-bar span  { font-size: 0.78rem; }
#wp-count { color: var(--gray-lt); }
.wp-info-note { font-size: 0.7rem; color: var(--sunset); }

.wp-list { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 16px; }

/* Pool card */
.pool-card {
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden; animation: fadeInUp 0.3s ease;
}
.pool-card-img {
  width: 100%; height: 180px; position: relative; overflow: hidden;
  background: var(--dark3);
}
.pool-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pool-card-img-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, #051320, #0D3356);
}
.pool-status-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 10px; border-radius: 20px; font-size: 0.68rem; font-weight: 700;
  backdrop-filter: blur(10px);
}
.pool-status-badge.open   { background: rgba(38,222,129,0.85); color: #002210; }
.pool-status-badge.closed { background: rgba(255,107,107,0.7);  color: #1a0000; }
.pool-status-badge.seasonal{background: rgba(255,159,67,0.8);   color: #1a0a00; }

.pool-type-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 20px; font-size: 0.68rem; font-weight: 700;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); color: var(--ocean);
  border: 1px solid rgba(0,212,255,0.3);
}

.pool-body { padding: 16px; }
.pool-name  { font-size: 1.1rem; font-weight: 800; margin-bottom: 2px; }
.pool-loc   { font-size: 0.8rem; color: var(--ocean); font-weight: 500; margin-bottom: 6px; }

/* Acesso */
.pool-access-badge {
  font-size: 0.72rem; color: var(--gray-lt);
  padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  display: inline-block; margin-bottom: 10px;
}

/* wave specs */
.pool-specs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.pool-spec {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px; font-size: 0.72rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  color: var(--gray-lt);
}

/* prices table */
.pool-prices {
  background: rgba(255,255,255,0.04); border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06); margin-bottom: 14px; overflow: hidden;
}
.pool-prices-title {
  padding: 8px 12px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--gray-lt); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.pool-price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
}
.pool-price-row:last-child { border-bottom: none; }
.pool-price-row .label { color: var(--gray-lt); }
.pool-price-row .price { font-weight: 700; color: var(--ocean); }
.pool-price-row .price.free { color: var(--good); }

/* description */
.pool-desc {
  font-size: 0.82rem; color: var(--gray-lt); line-height: 1.55;
  margin-bottom: 14px;
}

/* contact row */
.pool-contacts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pool-contact-row {
  display: flex; align-items: center; gap: 8px; font-size: 0.8rem;
}
.pool-contact-row .icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
.pool-contact-row .icon.web   { background: rgba(0,212,255,0.12); }
.pool-contact-row .icon.phone { background: rgba(38,222,129,0.12); }
.pool-contact-row .icon.insta { background: rgba(253,29,29,0.12); }
.pool-contact-row a {
  color: var(--ocean); text-decoration: none; font-size: 0.78rem;
  border-bottom: 1px dashed rgba(0,212,255,0.3);
}
.pool-contact-row a:hover { color: var(--ocean-lt); }

.pool-website-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; margin-bottom: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pool-website-icon { font-size: 1rem; }
.pool-website-link {
  color: var(--ocean); text-decoration: none; font-size: 0.82rem; font-weight: 500;
  border-bottom: 1px dashed rgba(0,212,255,0.3); transition: color 0.2s;
}
.pool-website-link:hover { color: var(--ocean-lt); }
.pool-ig-link {
  color: #E1306C; text-decoration: none; font-size: 0.78rem;
  border-bottom: 1px dashed rgba(225,48,108,0.3); transition: color 0.2s;
}
.pool-ig-link:hover { color: #ff6b9d; }

.pool-contact-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.8rem; margin-bottom: 12px;
}
.pool-contact-row .pool-website-icon { font-size: 1rem; }

.pool-actions { display: flex; gap: 10px; margin-bottom: 0; }
.pool-actions .btn-primary,
.pool-actions .btn-secondary { flex: 1; }

.pool-tags-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.05);
}
.pool-tag {
  font-size: 0.66rem; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: rgba(0,212,255,0.07); border: 1px solid rgba(0,212,255,0.15);
  color: var(--ocean);
}

/* Legado — mantido para não quebrar nada */
.pool-card-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.72rem; color: var(--gray-lt);
}
.pool-rating-stars { color: var(--sunset); }

/* ═══════════════════════════════════════
   PAGE: MARKETPLACE
════════════════════════════════════════ */
.mkt-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 20px 10px;
}
.mkt-header h2 { font-size: 1.4rem; font-weight: 700; }
.mkt-subtitle  { font-size: 0.78rem; color: var(--gray-lt); display: block; margin-top: 2px; }

/* search */
.mkt-search-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 10px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--dark3); border: 1px solid rgba(255,255,255,0.1);
}
.mkt-search-icon { font-size: 0.9rem; flex-shrink: 0; }
.mkt-search-bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--white); font-size: 0.85rem;
}
.mkt-search-bar input::placeholder { color: var(--gray); }
.mkt-filter-toggle {
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.75rem; color: var(--gray-lt); white-space: nowrap;
  transition: all 0.2s;
}
.mkt-filter-toggle.active { background: rgba(0,212,255,0.1); border-color: var(--ocean); color: var(--ocean); }

/* filters panel */
.mkt-filters-panel {
  margin: 0 16px 12px;
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  animation: fadeInUp 0.25s ease;
}
.mkt-filters-inner { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.mkt-filter-group label {
  display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--gray-lt); margin-bottom: 7px; font-weight: 600;
}
.mkt-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mkt-chip {
  padding: 6px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); transition: all 0.2s; cursor: pointer;
}
.mkt-chip.active {
  background: rgba(0,212,255,0.12); border-color: var(--ocean); color: var(--ocean);
}
.mkt-price-range {
  display: flex; align-items: center; gap: 8px;
}
.mkt-price-range input {
  flex: 1; padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--white); font-size: 0.82rem;
}
.mkt-price-range span { color: var(--gray-lt); }
.mkt-filters-inner select {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--white); font-size: 0.85rem;
}

/* category tabs */
.mkt-cat-tabs {
  display: flex; gap: 8px; padding: 0 16px 12px;
  overflow-x: auto; scrollbar-width: none;
}
.mkt-cat-tabs::-webkit-scrollbar { display: none; }
.mkt-cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 14px; border-radius: var(--radius);
  background: var(--dark2); border: 1.5px solid rgba(255,255,255,0.08);
  font-size: 0.72rem; font-weight: 600; color: var(--gray-lt);
  white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: all 0.2s;
}
.mkt-cat-btn span { font-size: 1.1rem; }
.mkt-cat-btn.active {
  background: rgba(0,212,255,0.1); border-color: var(--ocean); color: var(--ocean);
}

/* results bar */
.mkt-results-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px 10px;
}
.mkt-count { font-size: 0.78rem; color: var(--gray-lt); }
.mkt-view-toggle { display: flex; gap: 4px; }
.view-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); font-size: 0.85rem;
  border: 1px solid rgba(255,255,255,0.08); transition: all 0.2s;
}
.view-btn.active { background: rgba(0,212,255,0.1); border-color: var(--ocean); }

/* listings grid */
.mkt-listings-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 0 16px 24px;
}
.mkt-listings-grid.list-view {
  grid-template-columns: 1fr;
}

/* listing card GRID */
.listing-card {
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  animation: fadeInUp 0.3s ease;
}
.listing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.listing-card:active { transform: scale(0.98); }

.listing-img {
  width: 100%; aspect-ratio: 1;
  background: var(--dark3); overflow: hidden; position: relative;
}
.listing-img img { width: 100%; height: 100%; object-fit: cover; }
.listing-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}

.listing-fav {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: transform 0.2s;
}
.listing-fav:active { transform: scale(0.85); }

.listing-condition-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 7px; border-radius: 10px; font-size: 0.6rem; font-weight: 700;
  backdrop-filter: blur(8px);
}
.listing-condition-badge.novo    { background: rgba(38,222,129,0.85); color: #002210; }
.listing-condition-badge.bom     { background: rgba(255,217,61,0.85);  color: #1a1400; }
.listing-condition-badge.regular { background: rgba(255,159,67,0.85);  color: #1a0a00; }

.listing-body { padding: 10px; }
.listing-price {
  font-size: 1.05rem; font-weight: 800; color: var(--ocean);
  margin-bottom: 3px;
}
.listing-price span { font-size: 0.65rem; color: var(--gray-lt); font-weight: 400; }
.listing-title { font-size: 0.78rem; font-weight: 600; line-height: 1.3; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-meta {
  display: flex; justify-content: space-between; align-items: center;
}
.listing-location { font-size: 0.65rem; color: var(--gray-lt); }
.listing-time     { font-size: 0.62rem; color: var(--gray); }

.listing-seller-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-top: 1px solid rgba(255,255,255,0.05);
}
.listing-seller-row img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.listing-seller-name { font-size: 0.65rem; color: var(--gray-lt); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-rating { font-size: 0.65rem; color: var(--sunset); }

/* LIST VIEW card override */
.mkt-listings-grid.list-view .listing-card {
  display: flex; flex-direction: row;
}
.mkt-listings-grid.list-view .listing-img {
  width: 110px; aspect-ratio: auto; height: 110px; flex-shrink: 0;
}
.mkt-listings-grid.list-view .listing-body { flex: 1; }
.mkt-listings-grid.list-view .listing-price { font-size: 1.1rem; }
.mkt-listings-grid.list-view .listing-title { font-size: 0.85rem; -webkit-line-clamp: 1; }
.mkt-listings-grid.list-view .listing-seller-row {
  border-top: none; padding: 0 10px 8px;
}

/* DETAIL MODAL */
.detail-imgs {
  margin: -12px -20px 14px;
  overflow: hidden; height: 240px;
  background: var(--dark3); position: relative;
}
.detail-imgs img { width: 100%; height: 100%; object-fit: cover; }
.detail-imgs-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; font-size: 5rem;
  background: linear-gradient(135deg, var(--dark3), var(--dark2));
}

.detail-price-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.detail-price {
  font-size: 1.8rem; font-weight: 900; color: var(--ocean);
}
.detail-cond-badge {
  padding: 5px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700;
}
.detail-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.detail-loc   { font-size: 0.82rem; color: var(--gray-lt); margin-bottom: 14px; }

.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.detail-tag {
  padding: 5px 12px; border-radius: 20px; font-size: 0.75rem;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
}

.detail-desc {
  font-size: 0.88rem; color: var(--gray-lt); line-height: 1.6;
  margin-bottom: 16px;
}
.detail-seller-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--radius);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}
.detail-seller-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dark4); }
.detail-seller-info strong { display: block; font-size: 0.9rem; }
.detail-seller-info span { font-size: 0.75rem; color: var(--gray-lt); }
.detail-rating { margin-left: auto; text-align: right; }
.detail-rating .stars { color: var(--sunset); font-size: 0.85rem; }
.detail-rating .rcount { font-size: 0.65rem; color: var(--gray-lt); }

.detail-actions { display: flex; gap: 10px; }
.detail-actions button { flex: 1; }
.btn-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: var(--radius);
  background: #25D366; color: white; font-weight: 700; font-size: 0.9rem;
  transition: all 0.2s;
}
.btn-whatsapp:hover { background: #20B858; }

/* create listing */
.listing-cat-btns {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.listing-cat-btn {
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); transition: all 0.2s;
}
.listing-cat-btn.selected {
  background: rgba(0,212,255,0.15); border-color: var(--ocean); color: var(--ocean);
}
.listing-photo-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 24px; border-radius: var(--radius);
  background: rgba(255,255,255,0.04); border: 2px dashed rgba(255,255,255,0.12);
  cursor: pointer; transition: all 0.2s; text-align: center;
  font-size: 0.82rem; color: var(--gray-lt);
}
.listing-photo-upload:hover { border-color: var(--ocean); background: rgba(0,212,255,0.05); }

/* empty marketplace */
.mkt-empty {
  grid-column: 1/-1; text-align: center; padding: 48px 24px;
  color: var(--gray);
}
.mkt-empty .icon { font-size: 3.5rem; margin-bottom: 12px; }
.mkt-empty p { font-size: 0.9rem; margin-bottom: 16px; }

/* ═══════════════════════════════════════
   PAGE: FORECAST
════════════════════════════════════════ */
.forecast-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px 8px;
}
.forecast-header h2 { font-size: 1.4rem; font-weight: 700; }
.forecast-updated { font-size: 0.72rem; color: var(--gray-lt); }
.fcast-map-btn {
  font-size: 0.72rem; font-weight: 600;
  padding: 5px 10px; border-radius: 20px;
  background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3);
  color: var(--ocean); cursor: pointer; transition: all 0.2s;
}
.fcast-map-btn:hover { background: rgba(0,212,255,0.2); }
.fcast-refresh-btn {
  font-size: 0.9rem; padding: 4px 8px; border-radius: 20px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--gray-lt); cursor: pointer; transition: all 0.2s;
}
.fcast-refresh-btn:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.fcast-refresh-btn:disabled { opacity: 0.4; cursor: wait; }

/* Beach selector chips */
.forecast-beach-selector {
  padding: 0 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0;
}

/* Estado tabs */
.fbs-states {
  display: flex; gap: 6px; padding: 10px 16px 8px;
  overflow-x: auto; scrollbar-width: none;
}
.fbs-states::-webkit-scrollbar { display: none; }
.fbs-state-tab {
  padding: 6px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
  color: var(--gray-lt); cursor: pointer; white-space: nowrap;
  transition: all 0.18s; flex-shrink: 0;
}
.fbs-state-tab:hover  { border-color: rgba(0,212,255,0.35); color: #fff; }
.fbs-state-tab.active {
  background: rgba(0,212,255,0.15); border-color: var(--ocean); color: var(--ocean);
}

/* Beach chips — scroll horizontal visível */
.fbs-beach-wrap {
  position: relative;
}
.fbs-beach-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 10px; width: 40px;
  background: linear-gradient(to right, transparent, var(--dark2));
  pointer-events: none; z-index: 1;
}
.fbs-scroll {
  display: flex; gap: 10px;
  padding: 6px 16px 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ocean-dk) rgba(255,255,255,0.06);
  -webkit-overflow-scrolling: touch;
}
.fbs-scroll::-webkit-scrollbar {
  height: 3px;
}
.fbs-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  margin: 0 16px;
}
.fbs-scroll::-webkit-scrollbar-thumb {
  background: var(--ocean-dk);
  border-radius: 2px;
}
.fbs-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--dark2); border: 1.5px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: all 0.2s; flex-shrink: 0; min-width: 80px;
  text-align: center;
}
.fbs-chip:hover { border-color: rgba(0,212,255,0.3); }
.fbs-chip.active {
  background: rgba(0,212,255,0.1);
  border-color: var(--ocean);
}
.fbs-chip-name  { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.fbs-chip-state { font-size: 0.65rem; color: var(--gray-lt); }
.fbs-chip-dot   { width: 8px; height: 8px; border-radius: 50%; }

/* Now card */
.forecast-now-card {
  margin: 14px 16px;
  background: linear-gradient(135deg, #091828 0%, #0E2A4A 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(0,212,255,0.2);
  overflow: hidden;
  position: relative;
}
.fnc-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; gap: 12px; color: var(--gray-lt); font-size: 0.85rem;
}
.fnc-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(0,212,255,0.2);
  border-top-color: var(--ocean);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fnc-beach-name {
  font-size: 1.2rem; font-weight: 800; padding: 18px 18px 4px;
}
.fnc-beach-meta { font-size: 0.75rem; color: var(--gray-lt); padding: 0 18px 14px; }

.fnc-score-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 18px 14px;
  padding: 6px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 700;
}

/* ─── Wave Range (Mín / Média / Máx) ────────────────────────────────────────── */
.fnc-wave-range {
  margin: 0 16px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 10px 14px 8px;
}
.fnc-wr-labels {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 8px;
}
.fnc-wr-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fnc-wr-lbl  { font-size: 0.6rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; }
.fnc-wr-val  { font-size: 1rem; font-weight: 800; color: #E5E7EB; line-height: 1; }
.fnc-wr-min .fnc-wr-val  { color: var(--bad); }
.fnc-wr-avg .fnc-wr-val  { color: var(--surfable); font-size: 1.15rem; }
.fnc-wr-max .fnc-wr-val  { color: var(--good); }
/* Bar */
.fnc-wr-bar-wrap {
  position: relative; height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px; margin-bottom: 5px;
}
.fnc-wr-bar-fill {
  position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--bad) 0%, var(--surfable) 50%, var(--good) 100%);
  opacity: 0.55;
}
/* Média marker */
.fnc-wr-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
}
.fnc-wr-marker-avg {
  width: 3px; height: 16px; background: var(--surfable);
  border-radius: 2px; opacity: 0.8;
}
/* Agora marker */
.fnc-wr-marker-now {
  width: 20px; height: 20px; top: 50%;
  background: #fff; border-radius: 50%;
  border: 3px solid var(--ocean);
  box-shadow: 0 0 8px rgba(0,180,216,0.6);
  display: flex; align-items: center; justify-content: center;
}
.fnc-wr-now-bubble {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ocean); color: #fff; font-size: 0.6rem; font-weight: 800;
  padding: 2px 5px; border-radius: 4px; white-space: nowrap;
  pointer-events: none;
}
.fnc-wr-now-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 3px solid transparent; border-top-color: var(--ocean);
}
.fnc-wr-caption {
  font-size: 0.6rem; color: var(--gray); text-align: center;
  letter-spacing: 0.05em; text-transform: uppercase;
}

.fnc-main-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fnc-stat {
  background: rgba(0,0,0,0.2); padding: 14px 8px; text-align: center;
}
.fnc-stat-icon { font-size: 1.1rem; margin-bottom: 4px; }
.fnc-stat-val  { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.fnc-stat-unit { font-size: 0.6rem; color: var(--gray-lt); }
.fnc-stat-lbl  { font-size: 0.62rem; color: var(--gray-lt); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; }

.fnc-extra-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
  padding: 10px 16px 14px;
}
@media (min-width: 480px) {
  .fnc-extra-stats { grid-template-columns: repeat(5,1fr); }
}
.fnc-extra-item {
  background: rgba(255,255,255,0.04); border-radius: var(--radius-sm);
  padding: 10px; border: 1px solid rgba(255,255,255,0.06);
}
.fnc-extra-lbl { font-size: 0.6rem; color: var(--gray-lt); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.fnc-extra-val { font-size: 0.92rem; font-weight: 700; }

.fnc-wave-bg {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40px; opacity: 0.15;
}

/* Surf score bar */
.forecast-score-section {
  margin: 0 16px 14px; padding: 14px;
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
}
.fss-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-lt); margin-bottom: 10px; }
.fss-bar-wrap {
  height: 8px; background: var(--dark4); border-radius: 8px; overflow: hidden; margin-bottom: 10px;
}
.fss-bar {
  height: 100%; border-radius: 8px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1), background 0.5s;
}
.fss-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fss-tag {
  padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 500;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: var(--gray-lt);
}
.fss-tag.pos { background: rgba(38,222,129,0.12); border-color: rgba(38,222,129,0.3); color: var(--good); }
.fss-tag.neg { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.3); color: var(--bad); }
.fss-tag.neu { background: rgba(255,217,61,0.12);  border-color: rgba(255,217,61,0.3);  color: var(--surfable); }

/* ── Surf Engine Analysis Panel ─────────────────────────────────────────── */
#surf-engine-panel {
  margin: 0 16px 14px;
  background: var(--dark2);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: var(--radius);
  padding: 14px;
}
.sfe-header { margin-bottom: 10px; }
.sfe-title-row { display: flex; align-items: center; gap: 8px; }
.sfe-icon { font-size: 1rem; }
.sfe-title {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ocean-lt); flex: 1;
}
.sfe-model-tag {
  font-size: 0.62rem; color: var(--gray-lt); letter-spacing: 0.05em;
  background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 20px;
}
.sfe-resumo {
  font-size: 0.82rem; line-height: 1.55; color: #D1D5DB;
  margin: 0 0 12px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sfe-score-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.sfe-nota-big {
  font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -2px;
  min-width: 52px; text-align: center;
}
.sfe-score-right { flex: 1; }
.sfe-classif {
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 6px;
}
.sfe-nota-track {
  height: 6px; background: rgba(255,255,255,0.1); border-radius: 6px;
  overflow: hidden; margin-bottom: 4px;
}
.sfe-nota-fill { height: 100%; border-radius: 6px; transition: width 0.8s ease; }
.sfe-scale-lbl { font-size: 0.6rem; color: var(--gray-lt); letter-spacing: 0.04em; }
.sfe-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sfe-pill {
  font-size: 0.7rem; padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18); color: var(--gray-lt);
  background: rgba(255,255,255,0.05); white-space: nowrap;
}
.sfe-force {
  font-size: 0.75rem; color: var(--gray-lt); line-height: 1.5;
  background: rgba(255,255,255,0.04); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 10px;
  border-left: 3px solid rgba(0,212,255,0.3);
}
.sfe-window {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: #D1D5DB;
  background: rgba(38,222,129,0.08); border: 1px solid rgba(38,222,129,0.2);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
}
.sfe-window-icon { font-size: 1rem; }
.sfe-obs-block { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; }
.sfe-obs-hdr {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-lt); margin-bottom: 6px; font-weight: 600;
}
.sfe-obs-line {
  font-size: 0.75rem; color: #9CA3AF; line-height: 1.55; padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sfe-obs-line:last-child { border-bottom: none; }

/* ─── OPERATIONAL PANEL ──────────────────────────────────────────────────────── */
#operational-panel {
  margin: 0 16px 14px;
  background: var(--dark2);
  border: 1px solid rgba(0,180,216,0.18);
  border-radius: 14px;
  padding: 14px;
  overflow: hidden;
}
.op-header { margin-bottom: 10px; }
.op-title-row { display: flex; align-items: center; gap: 7px; }
.op-icon { font-size: 1rem; }
.op-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ocean-lt); font-weight: 800; flex: 1;
}
.op-model-tag {
  font-size: 0.65rem; color: var(--gray-lt);
  background: rgba(255,255,255,0.06); border-radius: 4px; padding: 2px 6px;
  letter-spacing: 0.3px;
}
.op-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.op-tab-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: var(--gray-lt); font-size: 0.78rem; font-weight: 700;
  border-radius: 8px; padding: 5px 14px; cursor: pointer; letter-spacing: 0.3px;
  transition: all 0.18s;
}
.op-tab-btn.active { background: var(--ocean); color: #fff; border-color: var(--ocean); }
/* Alerts */
.op-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.op-alert {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.76rem; line-height: 1.45; border-radius: 8px; padding: 7px 10px;
}
.op-alert-danger      { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #FCA5A5; }
.op-alert-warning     { background: rgba(234,179,8,0.10); border: 1px solid rgba(234,179,8,0.3); color: #FDE68A; }
.op-alert-opportunity { background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.25); color: #86EFAC; }
.op-alert-info        { background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.25); color: #A5B4FC; }
/* Section label */
.op-section-title {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-lt); font-weight: 600; margin: 10px 0 6px;
}
/* Best windows */
.op-windows { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.op-window-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px 12px; min-width: 80px; flex: 1;
}
.op-window-time  { font-size: 1.05rem; font-weight: 800; color: #E5E7EB; }
.op-window-score { font-size: 0.73rem; font-weight: 700; margin: 2px 0; }
.op-window-detail { font-size: 0.67rem; color: var(--gray-lt); }
.op-no-windows { font-size: 0.78rem; color: var(--gray); padding: 4px 0 8px; }
/* Mini table */
.op-table-head {
  display: grid; grid-template-columns: 2.6rem 2.8rem 2.2rem 3.4rem 1rem;
  gap: 4px; font-size: 0.61rem; color: var(--gray); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.op-table { display: flex; flex-direction: column; }
.op-row {
  display: grid; grid-template-columns: 2.6rem 2.8rem 2.2rem 3.4rem 1rem;
  gap: 4px; align-items: center; padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.74rem;
}
.op-row-time { color: var(--gray-lt); font-weight: 600; }
.op-row-h    { color: #E5E7EB; font-weight: 700; }
.op-row-p    { color: var(--gray-lt); }
.op-row-w    { color: var(--gray-lt); font-size: 0.7rem; }
.op-row-dot  { width: 8px; height: 8px; border-radius: 50%; }
/* Outlook card (48h) */
.op-outlook {
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 14px;
  margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.08);
}
.op-outlook-label { font-size: 0.67rem; color: var(--gray-lt); text-transform: uppercase; letter-spacing: 0.07em; }
.op-outlook-stats { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.op-outlook-h     { font-size: 1.8rem; font-weight: 900; color: #E5E7EB; }
.op-outlook-p     { font-size: 1rem; color: var(--gray-lt); }
.op-outlook-score { font-size: 0.82rem; font-weight: 700; }
/* Model divergence */
.op-divergence {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255,255,255,0.03); border-radius: 10px;
  padding: 10px; margin-bottom: 8px;
}
.op-div-badge {
  font-size: 0.7rem; font-weight: 700; border: 1px solid; border-radius: 6px;
  padding: 3px 8px; white-space: nowrap; flex-shrink: 0;
}
.op-div-note { font-size: 0.74rem; color: var(--gray-lt); line-height: 1.5; margin: 0; }
/* 7-day table */
.op-7d-head {
  display: grid; grid-template-columns: 3rem 2.5rem 2.5rem 1fr 3rem;
  gap: 4px; font-size: 0.61rem; color: var(--gray); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.op-7d-table { display: flex; flex-direction: column; }
.op-7d-row {
  display: grid; grid-template-columns: 3rem 2.5rem 2.5rem 1fr 3rem;
  gap: 4px; align-items: center; padding: 5px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.76rem;
}
.op-7d-day   { color: var(--gray-lt); font-weight: 700; }
.op-7d-h     { color: #E5E7EB; font-weight: 700; }
.op-7d-p     { color: var(--gray-lt); }
.op-7d-score { font-size: 0.7rem; font-weight: 700; }
.op-7d-best  { font-size: 0.66rem; color: var(--gray-lt); }
.op-trend-note {
  font-size: 0.74rem; color: var(--gray-lt); text-align: center;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06);
}
.op-unavail { font-size: 0.8rem; color: var(--gray); text-align: center; padding: 16px 0; }

/* Section title */
.forecast-section { margin-bottom: 8px; }
.forecast-section-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-lt); padding: 12px 16px 8px; font-weight: 600;
}

/* Hourly scroll */
.hourly-scroll {
  display: flex; gap: 8px; padding: 4px 16px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ocean) rgba(255,255,255,0.08);
}
.hourly-scroll::-webkit-scrollbar        { height: 4px; }
.hourly-scroll::-webkit-scrollbar-track  { background: rgba(255,255,255,0.06); border-radius: 2px; }
.hourly-scroll::-webkit-scrollbar-thumb  { background: var(--ocean); border-radius: 2px; }
.hourly-loading { padding: 20px; color: var(--gray); font-size: 0.82rem; }

.hourly-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border-radius: var(--radius);
  background: var(--dark2); border: 1.5px solid rgba(255,255,255,0.07);
  min-width: 58px; cursor: default; flex-shrink: 0;
  transition: border-color 0.2s;
}
.hourly-item.best-hour {
  border-color: var(--ocean);
  background: rgba(0,212,255,0.07);
}
.hourly-item.now { border-color: var(--good); background: rgba(38,222,129,0.07); }
.hourly-time  { font-size: 0.68rem; color: var(--gray-lt); }
.hourly-bar-wrap {
  width: 6px; height: 40px; background: var(--dark4); border-radius: 3px;
  position: relative; overflow: hidden;
}
.hourly-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 3px;
  transition: height 0.5s cubic-bezier(0.4,0,0.2,1);
}
.hourly-height { font-size: 0.72rem; font-weight: 700; }
.hourly-period { font-size: 0.62rem; color: var(--gray-lt); }
.hourly-dir    { font-size: 0.8rem; }
.hourly-conf   { font-size: 0.55rem; cursor: default; margin-top: 1px; }
.best-label {
  font-size: 0.55rem; font-weight: 700; color: var(--ocean);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.now-label {
  font-size: 0.55rem; font-weight: 700; color: var(--good);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* 7-day forecast */
.forecast-7day { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }

.day-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s; cursor: default;
}
.day-row:hover { border-color: rgba(0,212,255,0.2); }
.day-row.today { border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.05); }

.day-name {
  font-size: 0.82rem; font-weight: 600; min-width: 44px;
}
.day-score-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.day-bar-wrap {
  flex: 1; height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  position: relative; overflow: hidden;
}
.day-bar { height: 100%; border-radius: 4px; }
/* Gradiente de fundo idêntico ao now-card (bad→surfable→good) */
.day-bar-fill {
  position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--bad) 0%, var(--surfable) 50%, var(--good) 100%);
  opacity: 0.28;
}
/* Range colorido pelo score do dia (min → max) */
.day-bar-range {
  position: absolute; top: 0; height: 100%; border-radius: 4px; opacity: 0.82;
}
/* Tick branco para a média do dia */
.day-bar-avg-tick {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: rgba(255,255,255,0.75); border-radius: 1px; transform: translateX(-50%);
}

.day-stats {
  display: flex; gap: 8px; align-items: center;
}
/* Range mín–máx */
.day-height-range {
  display: flex; flex-direction: column; align-items: flex-end;
  min-width: 52px;
}
.dhr-vals { font-size: 0.78rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.dhr-avg  { font-size: 0.62rem; color: var(--gray-lt); line-height: 1; }
.day-height { font-size: 0.88rem; font-weight: 700; min-width: 36px; text-align: right; }
.day-period { font-size: 0.72rem; color: var(--gray-lt); min-width: 28px; }
.day-score-lbl {
  font-size: 0.65rem; font-weight: 700; min-width: 56px; text-align: right;
}
/* Dot de confiança por dia */
.day-conf {
  font-size: 0.7rem; min-width: 10px; text-align: center; flex-shrink: 0;
  cursor: default;
}

/* Swell detail */
.swell-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 0 16px 12px;
}
.swell-detail-card {
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07); padding: 14px;
}
.sdc-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-lt); margin-bottom: 8px; }
.sdc-val   { font-size: 1.4rem; font-weight: 800; }
.sdc-unit  { font-size: 0.7rem; color: var(--gray-lt); }
.sdc-sub   { font-size: 0.75rem; color: var(--gray-lt); margin-top: 4px; }

/* Wind direction arrow */
.wind-arrow {
  display: inline-block;
  transition: transform 0.5s;
}

/* Forecast disclaimer */
.forecast-disclaimer {
  margin: 4px 16px 24px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.75rem; color: var(--gray-lt); text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 4px;
  transition: background .15s, border-color .15s;
}
.forecast-disclaimer:hover {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.2);
}
.forecast-disclaimer strong { color: var(--ocean-lt); }
.fc-disc-models { color: var(--gray-lt); }
.fc-disc-update  { color: var(--gray); font-size: 0.7rem; white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────────────────────
   AULAS DE SURF — CLASSIFICADOS
   ────────────────────────────────────────────────────────────────────────────── */
.listing-condition-badge.aula-badge {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff;
}
.listing-card-aula {
  border: 1.5px solid rgba(108,92,231,0.3);
}
.listing-card-aula:hover {
  border-color: rgba(108,92,231,0.6);
}
.listing-price-note {
  font-size: 0.68rem; font-weight: 400; color: var(--gray-lt); margin-left: 4px;
}
.aula-quick-info {
  display: flex; gap: 8px; margin: 4px 0;
}
.aula-quick-info span {
  font-size: 0.66rem; color: var(--gray-lt);
  background: rgba(108,92,231,0.1); border-radius: 4px; padding: 2px 6px;
}
.aula-detail-info {
  display: flex; flex-direction: column; gap: 0;
  background: rgba(108,92,231,0.08);
  border: 1px solid rgba(108,92,231,0.2);
  border-radius: var(--radius); padding: 2px 0; margin-bottom: 14px;
}
.aula-info-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid rgba(108,92,231,0.1);
}
.aula-info-row:last-child { border-bottom: none; }
.aula-info-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.aula-info-row div { display: flex; flex-direction: column; gap: 1px; }
.aula-info-row strong { font-size: 0.72rem; color: var(--gray-lt); font-weight: 600; }
.aula-info-row span   { font-size: 0.9rem; font-weight: 500; }

/* ──────────────────────────────────────────────────────────────────────────────
   WSL RANKING
   ────────────────────────────────────────────────────────────────────────────── */
.wsl-header {
  padding: 16px 16px 8px;
}
.wsl-logo-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.wsl-logo {
  background: #000; border-radius: 8px; padding: 8px 14px;
  border: 2px solid #fff;
}
.wsl-season-badge {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(255,255,255,0.08); color: var(--gray-lt);
  border: 1px solid rgba(255,255,255,0.1);
}
.wsl-gender-tabs {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.wsl-gender-btn {
  flex: 1; padding: 9px; border-radius: var(--radius-sm);
  background: var(--dark2); border: 1.5px solid rgba(255,255,255,0.08);
  color: var(--gray-lt); font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.wsl-gender-btn.active {
  background: rgba(0,212,255,0.12); border-color: var(--ocean); color: var(--ocean);
}
.wsl-note {
  font-size: 0.68rem; color: var(--gray); text-align: center; margin: 4px 0 8px;
}
.wsl-list { padding: 0 16px; }
.wsl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--dark2); margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color 0.2s;
}
.wsl-item.wsl-br {
  border-color: rgba(0,156,60,0.35);
  background: rgba(0,156,60,0.06);
}
.wsl-pos {
  font-size: 1rem; font-weight: 900; min-width: 32px; text-align: center;
}
.wsl-item img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.wsl-info { flex: 1; }
.wsl-info strong { font-size: 0.88rem; display: block; }
.wsl-info span   { font-size: 0.68rem; color: var(--gray-lt); }
.wsl-pts {
  text-align: right;
}
.wsl-pts strong { font-size: 1rem; font-weight: 800; display: block; color: var(--ocean); }
.wsl-pts small  { font-size: 0.62rem; color: var(--gray); }
.wsl-br-highlight {
  margin: 16px; padding: 14px;
  background: linear-gradient(135deg, rgba(0,156,60,0.15), rgba(255,220,0,0.08));
  border: 1px solid rgba(0,156,60,0.3); border-radius: var(--radius);
}
.wsl-br-title {
  font-weight: 700; font-size: 0.9rem; margin-bottom: 12px;
}
.wsl-br-stats {
  display: flex; gap: 12px;
}
.wsl-br-stat {
  flex: 1; text-align: center;
  background: rgba(0,0,0,0.2); border-radius: 8px; padding: 10px 4px;
}
.wsl-br-stat span { font-size: 1.6rem; font-weight: 900; display: block; color: #FFD700; }
.wsl-br-stat small { font-size: 0.65rem; color: var(--gray-lt); }

/* ──────────────────────────────────────────────────────────────────────────────
   CB SURF — CAMPEONATOS BRASILEIROS
   ────────────────────────────────────────────────────────────────────────────── */
.cb-header {
  padding: 16px 16px 8px;
}
.cb-logo-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.cb-tabs-inner {
  display: flex; gap: 8px; padding: 0 16px 12px;
}
.cb-tab-btn {
  flex: 1; padding: 8px; border-radius: var(--radius-sm);
  background: var(--dark2); border: 1.5px solid rgba(255,255,255,0.08);
  color: var(--gray-lt); font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.cb-tab-btn.active {
  background: rgba(0,156,60,0.15); border-color: #00d45f; color: #00d45f;
}
.cb-title-badge {
  font-size: 0.65rem; background: rgba(255,215,0,0.15);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px;
  color: #FFD700; font-weight: 600;
}
.cb-events-list { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.cb-event-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07); padding: 14px;
}
.cb-event-card.past { opacity: 0.65; }
.cb-event-emoji { font-size: 1.8rem; flex-shrink: 0; }
.cb-event-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cb-event-info strong { font-size: 0.9rem; line-height: 1.2; }
.cb-event-info span   { font-size: 0.72rem; color: var(--gray-lt); }
.cb-champion { margin-top: 4px; font-size: 0.78rem; color: #FFD700; }
.cb-event-status {
  font-size: 0.65rem; font-weight: 700; padding: 4px 8px; border-radius: 12px;
  white-space: nowrap; align-self: flex-start; flex-shrink: 0;
}
.cb-event-status.upcoming {
  background: rgba(0,212,255,0.15); color: var(--ocean);
}
.cb-event-status.past {
  background: rgba(255,255,255,0.07); color: var(--gray-lt);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  transition: opacity 0.4s ease;
}
#login-screen.login-fade-out { opacity: 0; pointer-events: none; }

.login-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 10%, rgba(0,212,255,0.18) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 90%, rgba(108,92,231,0.18) 0%, transparent 55%),
              linear-gradient(160deg, #0a0e1a 0%, #0d1225 50%, #080c18 100%);
}
/* animated wave at bottom */
.login-bg::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180'%3E%3Cpath fill='rgba(0,212,255,0.06)' d='M0,80 C240,140 480,20 720,80 C960,140 1200,40 1440,80 L1440,180 L0,180 Z'/%3E%3Cpath fill='rgba(0,212,255,0.04)' d='M0,110 C360,160 720,60 1080,110 C1260,135 1380,95 1440,105 L1440,180 L0,180 Z'/%3E%3C/svg%3E") center bottom / cover no-repeat;
}

.login-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  padding: 48px 28px 36px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

/* Logo */
.login-logo {
  text-align: center; margin-bottom: 36px;
}
.login-logo svg { width: 80px; height: 40px; margin-bottom: 8px; display: block; margin-inline: auto; }
.login-brand {
  font-family: 'Syne', sans-serif;
  font-size: 2.4rem; font-weight: 900; letter-spacing: -2px;
  color: #fff; line-height: 1; margin-bottom: 10px;
}
.login-brand span { color: var(--ocean); }
.login-tagline {
  font-size: 0.88rem; color: var(--gray-lt); line-height: 1.5;
}

/* Social buttons */
.login-social-btns {
  width: 100%; display: flex; flex-direction: column; gap: 11px; margin-bottom: 4px;
}
.login-social-btn {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-radius: var(--radius);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; border: 1.5px solid transparent;
  text-align: left; letter-spacing: -0.2px;
}
.login-social-btn svg { flex-shrink: 0; }

.login-social-btn.google {
  background: #fff; color: #1f1f1f; border-color: #e0e0e0;
}
.login-social-btn.google:hover { background: #f8f8f8; box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: translateY(-1px); }

.login-social-btn.apple {
  background: #000; color: #fff; border-color: rgba(255,255,255,0.15);
}
.login-social-btn.apple:hover { background: #1a1a1a; transform: translateY(-1px); }

.login-social-btn.facebook {
  background: #1877F2; color: #fff; border-color: transparent;
}
.login-social-btn.facebook:hover { background: #1565d8; transform: translateY(-1px); }

.login-social-btn.email {
  background: var(--dark2); color: var(--text); border-color: rgba(255,255,255,0.1);
}
.login-social-btn.email:hover { border-color: var(--ocean); transform: translateY(-1px); }

/* Divider */
.login-divider {
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin: 16px 0 8px;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
}
.login-divider span { font-size: 0.75rem; color: var(--gray); white-space: nowrap; }

/* Guest button */
.login-guest-btn {
  width: 100%; padding: 13px 20px;
  border-radius: var(--radius); border: 1.5px solid rgba(255,255,255,0.1);
  background: transparent; color: var(--gray-lt);
  font-size: 0.88rem; cursor: pointer; transition: all 0.2s; margin-bottom: 16px;
}
.login-guest-btn:hover { border-color: rgba(255,255,255,0.25); color: #fff; }

/* Terms */
.login-terms {
  font-size: 0.72rem; color: var(--gray); text-align: center; line-height: 1.6;
  margin-top: 4px;
}
.login-terms a { color: var(--ocean); text-decoration: none; }
.login-terms a:hover { text-decoration: underline; }

/* Mode tabs (Criar Conta | Já tenho conta) */
.login-mode-tabs {
  display: flex; gap: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.12); margin-bottom: 12px; width: 100%;
}
.login-mode-tab {
  flex: 1; padding: 11px 8px; background: transparent; color: var(--gray-lt);
  font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
  border: none; letter-spacing: 0.01em;
}
.login-mode-tab.active {
  background: rgba(0,212,255,0.14); color: var(--ocean);
}
.login-mode-tab:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); }

/* Form blocks (signup / signin) */
.login-form-block {
  display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 4px;
}
.login-form-block.hidden { display: none; }

/* Legacy alias */
.email-login-form {
  width: 100%; display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px;
}
.login-form-tabs {
  display: flex; gap: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.1); margin-bottom: 4px;
}
.login-form-tab {
  flex: 1; padding: 10px; background: transparent; color: var(--gray-lt);
  font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
  border: none;
}
.login-form-tab.active {
  background: rgba(0,212,255,0.12); color: var(--ocean);
}
.login-input {
  width: 100%; padding: 13px 16px;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); color: var(--text); font-size: 0.92rem;
  outline: none; transition: border-color 0.2s; box-sizing: border-box;
}
.login-input::placeholder { color: var(--gray); }
.login-input:focus { border-color: var(--ocean); }
.login-submit-btn {
  width: 100%; padding: 14px; border-radius: var(--radius);
  background: var(--ocean); color: #000; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.2s; margin-top: 4px;
}
.login-submit-btn:hover { background: var(--ocean-lt); transform: translateY(-1px); }
.login-back-btn {
  background: transparent; border: none; color: var(--gray-lt);
  font-size: 0.82rem; cursor: pointer; padding: 6px; text-align: center;
}
.login-back-btn:hover { color: #fff; }
.login-error-msg {
  font-size: 0.8rem; color: #ff6b6b; text-align: center; padding: 6px 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDIT PROFILE MODAL
══════════════════════════════════════════════════════════════════════════════ */

/* ── Photo upload (Edit Profile) ──────────────────────────────────────────── */
.ep-photo-section {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.ep-avatar-frame {
  position: relative; width: 108px; height: 108px;
}
.ep-avatar-frame img {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--ocean); box-shadow: 0 0 24px rgba(0,212,255,0.3);
  display: none;
}
.ep-avatar-placeholder {
  width: 108px; height: 108px; border-radius: 50%;
  border: 2.5px dashed rgba(0,212,255,0.45);
  background: rgba(0,212,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,212,255,0.55);
}
.ep-avatar-placeholder svg { width: 44px; height: 44px; }
.ep-photo-label {
  font-size: 0.78rem; color: var(--gray-lt); text-align: center;
}
.ep-photo-btns {
  display: flex; gap: 10px;
}
.ep-photo-btn {
  flex: 1; padding: 11px 18px; border-radius: var(--radius);
  border: 1.5px solid rgba(0,212,255,0.4); background: rgba(0,212,255,0.08);
  color: var(--ocean); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.ep-photo-btn:hover {
  background: rgba(0,212,255,0.18); border-color: var(--ocean);
  transform: translateY(-1px);
}

/* Location field with geo button */
.ep-location-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s;
}
.ep-location-wrap:focus-within { border-color: var(--ocean); }
.ep-location-wrap input {
  flex: 1; padding: 13px 12px; background: transparent;
  border: none; outline: none; color: var(--white); font-size: 0.92rem;
  font-family: inherit;
}
.ep-location-wrap input::placeholder { color: var(--gray); }
.ep-geo-btn {
  padding: 0 13px; font-size: 1.1rem; background: transparent;
  border: none; border-left: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; color: var(--ocean); transition: background 0.15s;
  height: 100%; display: flex; align-items: center;
}
.ep-geo-btn:hover   { background: rgba(0,212,255,0.12); }
.ep-geo-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Instagram Connect Modal ──────────────────────────────────────────────── */
.ig-modal { padding: 0; overflow: hidden; max-width: 360px; }

.ig-modal-header {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px;
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #fff; font-weight: 700; font-size: 1.05rem; position: relative;
}
.ig-modal-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ig-modal-close:hover { background: rgba(255,255,255,0.35); }

.ig-modal-body { padding: 24px 20px; }

.ig-step-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.ig-step-desc  { font-size: 0.82rem; color: var(--gray-lt); margin-bottom: 18px; line-height: 1.5; }

.ig-open-btn {
  width: 100%; padding: 13px; border-radius: var(--radius);
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #fff; font-weight: 700; font-size: 0.92rem; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 12px; transition: opacity 0.15s;
}
.ig-open-btn:hover { opacity: 0.88; }

.ig-next-btn {
  width: 100%; padding: 11px; border-radius: var(--radius);
  background: transparent; border: 1.5px solid rgba(255,255,255,0.15);
  color: var(--gray-lt); font-size: 0.88rem; cursor: pointer; transition: all 0.15s;
}
.ig-next-btn:hover { border-color: rgba(255,255,255,0.35); color: #fff; }

.ig-input-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px;
  transition: border-color 0.2s;
}
.ig-input-wrap:focus-within { border-color: #E1306C; }
.ig-input-at {
  padding: 0 12px; font-size: 1rem; font-weight: 600;
  color: #E1306C; border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.ig-input-wrap input {
  flex: 1; padding: 13px 12px; background: transparent; border: none;
  outline: none; color: #fff; font-size: 0.95rem; font-family: inherit;
}

.ig-preview {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: rgba(225,48,108,0.08); border: 1px solid rgba(225,48,108,0.25);
  border-radius: var(--radius-sm); margin-bottom: 14px;
}
.ig-preview img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid #E1306C;
}
.ig-preview-info { flex: 1; }
.ig-preview-info strong { display: block; font-size: 0.88rem; }
.ig-preview-info span   { font-size: 0.72rem; color: var(--gray-lt); }
.ig-preview-check { font-size: 1.2rem; }

.ig-input-error {
  font-size: 0.78rem; color: #ff8fa3; margin-bottom: 12px; line-height: 1.4;
}

.ig-step-btns { display: flex; gap: 10px; margin-top: 4px; }
.ig-back-btn {
  padding: 11px 16px; border-radius: var(--radius);
  background: transparent; border: 1.5px solid rgba(255,255,255,0.12);
  color: var(--gray-lt); font-size: 0.88rem; cursor: pointer; transition: all 0.15s;
}
.ig-back-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.ig-confirm-btn {
  flex: 1; padding: 12px; border-radius: var(--radius);
  background: linear-gradient(135deg, #833ab4, #fd1d1d);
  color: #fff; font-weight: 700; font-size: 0.92rem; border: none;
  cursor: pointer; transition: opacity 0.15s;
}
.ig-confirm-btn:hover    { opacity: 0.88; }
.ig-confirm-btn:disabled { opacity: 0.5; cursor: default; }

/* Botão Conectar dentro do campo instagram */
.ep-ig-connect-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 0 12px; height: 100%; border: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(131,58,180,0.25), rgba(253,29,29,0.25));
  color: #E1306C; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.ep-ig-connect-btn:hover {
  background: linear-gradient(135deg, rgba(131,58,180,0.4), rgba(253,29,29,0.4));
}

/* Instagram field */
.ep-instagram-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s;
}
.ep-instagram-wrap:focus-within { border-color: #E1306C; }
.ep-instagram-prefix {
  padding: 0 10px; font-size: 0.8rem; color: var(--gray);
  border-right: 1px solid rgba(255,255,255,0.08); white-space: nowrap;
  background: rgba(255,255,255,0.03);
}
.ep-instagram-wrap input {
  flex: 1; padding: 13px 12px; background: transparent;
  border: none; outline: none; color: var(--white); font-size: 0.92rem;
  font-family: inherit;
}

/* Instagram link on profile */
.profile-info-ig {
  color: #E1306C !important; text-decoration: none;
  display: flex; align-items: center; gap: 4px;
}
.profile-info-ig:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════
   GEOLOCATION
══════════════════════════════════════════════════════════════════════════════ */

/* Permission prompt */
.geo-prompt {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 440px; z-index: 8000;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.geo-prompt-hidden  { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }
.geo-prompt-visible { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }

.geo-prompt-card {
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(0,212,255,0.25);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,255,0.08);
}
.geo-prompt-icon { font-size: 1.8rem; flex-shrink: 0; }
.geo-prompt-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.geo-prompt-text strong { font-size: 0.88rem; }
.geo-prompt-text span   { font-size: 0.74rem; color: var(--gray-lt); line-height: 1.3; }
.geo-prompt-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.geo-btn-accept {
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--ocean); color: #000; font-size: 0.78rem; font-weight: 700;
  border: none; cursor: pointer; white-space: nowrap;
}
.geo-btn-deny {
  padding: 6px 14px; border-radius: var(--radius-sm);
  background: transparent; color: var(--gray-lt); font-size: 0.74rem;
  border: 1px solid rgba(255,255,255,0.1); cursor: pointer; white-space: nowrap;
}

/* User marker on map */
.user-geo-marker { position: relative; width: 40px; height: 40px; }
.user-geo-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 14px; height: 14px; background: #4285F4;
  border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(66,133,244,0.6); z-index: 2;
}
.user-geo-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 36px; height: 36px;
  border-radius: 50%; background: rgba(66,133,244,0.15);
  border: 1.5px solid rgba(66,133,244,0.35);
  animation: geoRingPulse 2s ease-out infinite;
}
@keyframes geoRingPulse {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}

/* Geo banner on map */
.geo-map-banner {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(10,14,26,0.9); border: 1px solid rgba(0,212,255,0.25);
  border-radius: 20px; padding: 8px 16px; font-size: 0.78rem; color: var(--text);
  z-index: 450; white-space: nowrap; backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Sidebar geo row */
.sidebar-geo-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 4px; gap: 10px;
}
.sidebar-geo-line { font-size: 0.74rem; color: var(--gray-lt); flex: 1; }
.sidebar-geo-btn {
  font-size: 0.7rem; padding: 4px 10px; border-radius: 12px;
  background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3);
  color: var(--ocean); cursor: pointer; white-space: nowrap;
}
.sidebar-geo-btn:hover { background: rgba(0,212,255,0.2); }

/* ══════════════════════════════════════════════════════════════════════════════
   WSL STAGES
══════════════════════════════════════════════════════════════════════════════ */
.wsl-stage-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 12px; border-radius: var(--radius-sm);
  background: var(--dark2); margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.wsl-stage-card.wsl-stage-next {
  border-color: rgba(0,212,255,0.4);
  background: rgba(0,212,255,0.06);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.1);
}
.wsl-stage-card.wsl-stage-done { opacity: 0.75; }
.wsl-stage-stop {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08); display: flex; align-items: center;
  justify-content: center; font-size: 0.72rem; font-weight: 800; color: var(--gray-lt);
}
.wsl-stage-next .wsl-stage-stop { background: var(--ocean); color: #000; }
.wsl-stage-done .wsl-stage-stop { background: rgba(38,222,129,0.2); color: var(--good); }
.wsl-stage-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wsl-stage-info strong { font-size: 0.88rem; }
.wsl-stage-info span   { font-size: 0.7rem; color: var(--gray-lt); }
.wsl-stage-winners {
  display: flex; gap: 10px; margin-top: 4px;
  padding: 5px 8px; background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.wsl-stage-winners span { font-size: 0.72rem; color: var(--text); }
.wsl-stage-status {
  font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 10px;
  white-space: nowrap; flex-shrink: 0; align-self: flex-start;
}
.wsl-stage-next   .wsl-stage-status { background: rgba(0,212,255,0.15); color: var(--ocean); }
.wsl-stage-done   .wsl-stage-status { background: rgba(38,222,129,0.1); color: var(--good); }
.wsl-stage-upcoming .wsl-stage-status { background: rgba(255,255,255,0.07); color: var(--gray-lt); }

/* CB Surf tier headers */
.cb-tier-header {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ocean); padding: 14px 0 6px 0;
  border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px;
}
.cb-tier-header:first-child { border-top: none; padding-top: 4px; }
.cb-event-card.next { border-color: rgba(0,212,255,0.35); background: rgba(0,212,255,0.05); }
.cb-event-card.ongoing { border-color: rgba(255,215,0,0.25); background: rgba(255,215,0,0.04); }
.cb-event-status.next { background: rgba(0,212,255,0.15); color: var(--ocean); }
.cb-event-status.ongoing { background: rgba(255,215,0,0.15); color: #FFD700; }
.cb-event-status.done { background: rgba(38,222,129,0.1); color: var(--good); }

/* ══════════════════════════════════════════════════════════════════════════════
   WHATSAPP WAVE ALERTS — Settings panel
══════════════════════════════════════════════════════════════════════════════ */

/* Group wrapper */
.wa-alerts-group {
  border: 1px solid rgba(37,211,102,0.2) !important;
  background: rgba(37,211,102,0.03);
  border-radius: var(--radius) !important;
  padding: 16px !important;
  overflow: hidden;
}

/* Header row */
.wa-alerts-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wa-alerts-title-row {
  display: flex; align-items: center; gap: 12px; flex: 1;
}
.wa-icon-badge {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(37,211,102,0.15); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: #25D366;
}
.wa-alerts-title-row strong {
  display: block; font-size: 0.95rem; font-weight: 700;
}
.wa-alerts-title-row span {
  display: block; font-size: 0.72rem; color: var(--gray-lt); margin-top: 2px;
}

/* Info bar */
.wa-alerts-info {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(37,211,102,0.06); border-radius: var(--radius-sm);
  font-size: 0.78rem; color: var(--gray-lt); line-height: 1.5;
  border-left: 2px solid rgba(37,211,102,0.4);
}

/* Config panel */
.wa-alerts-config {
  margin-top: 14px; display: flex; flex-direction: column; gap: 18px;
}
.wa-alerts-config.hidden { display: none; }

/* Config section */
.wa-config-section { display: flex; flex-direction: column; gap: 8px; }
.wa-config-label {
  font-size: 0.78rem; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.wa-config-hint {
  font-size: 0.7rem; color: var(--gray); margin: 0; line-height: 1.4;
}

/* Phone input */
.wa-phone-input-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color 0.2s;
}
.wa-phone-input-row:focus-within { border-color: #25D366; }
.wa-phone-prefix {
  padding: 11px 12px; font-size: 0.85rem; font-weight: 600;
  color: #25D366; white-space: nowrap; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(37,211,102,0.07);
}
.wa-phone-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 0.92rem; padding: 11px 12px;
}
.wa-phone-input::placeholder { color: var(--gray); }

/* Condition / time chips */
.wa-cond-chips, .wa-time-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wa-cond-chip {
  padding: 8px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  background: rgba(255,255,255,0.05); color: var(--gray-lt);
  border: 1.5px solid rgba(255,255,255,0.1);
}
.wa-cond-chip.active {
  background: rgba(37,211,102,0.15); color: #25D366;
  border-color: rgba(37,211,102,0.4);
}
.wa-cond-chip:hover:not(.active) { border-color: rgba(255,255,255,0.25); color: var(--text); }

/* Beach picker */
.wa-beach-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto;
  padding-right: 4px;
}
.wa-beach-list::-webkit-scrollbar { width: 3px; }
.wa-beach-list::-webkit-scrollbar-track { background: transparent; }
.wa-beach-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.wa-beach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.07);
  cursor: pointer; transition: all 0.2s;
}
.wa-beach-item input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: #25D366; cursor: pointer; flex-shrink: 0;
}
.wa-beach-item.active {
  background: rgba(37,211,102,0.06);
  border-color: rgba(37,211,102,0.25);
}
.wa-beach-name { flex: 1; font-size: 0.85rem; font-weight: 600; }
.wa-beach-state {
  font-size: 0.7rem; color: var(--gray-lt);
  background: rgba(255,255,255,0.07); padding: 2px 7px; border-radius: 8px;
}
.wa-beach-score {
  font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 8px;
  white-space: nowrap;
}
.wa-beach-score.score-classic  { background: rgba(255,165,0,0.15); color: #FFA500; }
.wa-beach-score.score-good     { background: rgba(38,222,129,0.12); color: var(--good); }
.wa-beach-score.score-surfable { background: rgba(255,215,0,0.12); color: #FFD700; }
.wa-beach-score.score-bad      { background: rgba(255,107,107,0.12); color: var(--bad); }

/* Frequency select */
.wa-select {
  width: 100%; padding: 11px 14px;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); color: var(--text); font-size: 0.88rem;
  outline: none; cursor: pointer; transition: border-color 0.2s;
}
.wa-select:focus { border-color: #25D366; }
.wa-select option { background: #1a1f2e; }

/* Action buttons */
.wa-actions { display: flex; gap: 10px; }
.wa-save-btn {
  flex: 1; padding: 13px 16px; border-radius: var(--radius);
  background: #25D366; color: #000; font-size: 0.9rem; font-weight: 700;
  border: none; cursor: pointer; transition: all 0.2s;
}
.wa-save-btn:hover { background: #20bd5a; transform: translateY(-1px); }
.wa-test-btn {
  padding: 13px 16px; border-radius: var(--radius);
  background: rgba(37,211,102,0.1); color: #25D366;
  font-size: 0.9rem; font-weight: 700;
  border: 1.5px solid rgba(37,211,102,0.3); cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.wa-test-btn:hover { background: rgba(37,211,102,0.2); transform: translateY(-1px); }

/* Alert history */
.wa-history { margin-top: 4px; }
.wa-history-title {
  font-size: 0.75rem; font-weight: 700; color: var(--gray-lt); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.wa-history-list { display: flex; flex-direction: column; gap: 7px; }
.wa-history-empty { font-size: 0.78rem; color: var(--gray); text-align: center; padding: 8px 0; }
.wa-history-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
}
.wa-hist-emoji { font-size: 1.1rem; flex-shrink: 0; }
.wa-hist-info { display: flex; flex-direction: column; gap: 1px; }
.wa-hist-beach { font-size: 0.82rem; font-weight: 600; }
.wa-hist-meta  { font-size: 0.7rem; color: var(--gray-lt); }

/* ══════════════════════════════════════════════════════════════════════════════
   WAVE ALERT BANNER (floating bottom)
══════════════════════════════════════════════════════════════════════════════ */
.wave-alert-banner {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: calc(100% - 24px); max-width: 440px;
  z-index: 9500; opacity: 0; pointer-events: none;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wave-alert-banner.wab-visible {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.wave-alert-banner > * { position: relative; z-index: 1; }
.wab-glow {
  position: absolute; inset: 0; border-radius: 18px;
  background: rgba(37,211,102,0.12);
  box-shadow: 0 0 30px rgba(37,211,102,0.25), 0 8px 32px rgba(0,0,0,0.5);
  border: 1px solid rgba(37,211,102,0.35);
  border-radius: 18px;
}
.wave-alert-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px;
  background: rgba(13,17,30,0.96);
  border-radius: 18px;
  backdrop-filter: blur(20px);
}
.wab-left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.wab-wave-icon { font-size: 1.8rem; flex-shrink: 0; animation: wabPulse 1.6s ease-in-out infinite; }
@keyframes wabPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}
.wab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wab-text strong { font-size: 0.92rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wab-text span   { font-size: 0.72rem; color: var(--gray-lt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wab-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wab-send-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 12px;
  background: #25D366; color: #000; font-size: 0.82rem; font-weight: 800;
  border: none; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.wab-send-btn:hover { background: #20bd5a; transform: scale(1.03); }
.wab-dismiss-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.08); color: var(--gray-lt);
  font-size: 0.8rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all 0.2s;
}
.wab-dismiss-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Responsive */
/* ── Mobile & PWA tweaks ────────────────────────────────────────────────── */

/* Safe area para iPhone com notch e barra inicial */
.bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
.topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--top-h) + env(safe-area-inset-top));
}
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Garante que o conteudo nao fique embaixo da topbar/bottom-nav */
.page-content, .page {
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px);
}

/* Telas pequenas */
@media (max-width: 390px) {
  .login-content { padding: 28px 18px 24px; }
  .login-brand   { font-size: 1.9rem; }
  .login-social-btn { padding: 12px 14px; font-size: 0.86rem; }
  .login-submit-btn { padding: 13px; font-size: 0.9rem; }
  .login-input  { padding: 11px 12px; font-size: 0.9rem; }
  .post-action-btn { padding: 8px 9px; font-size: 0.78rem; }
}

@media (min-width: 600px) {
  #app { max-width: 480px; margin: 0 auto; }
  .topbar, .bottom-nav { max-width: 480px; left: 50%; transform: translateX(-50%); right: auto; width: 480px; }

  /* Sidebar: fica posicionado na borda esquerda do app centralizado,
     mas ESCONDIDO com translateX(-100%) até o usuário abrir.
     Isso corrige o deslize para direita em telas >= 600px. */
  .sidebar {
    left: calc(50% - 240px);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.open {
    left: calc(50% - 240px);
    transform: translateX(0);
  }

  .notif-panel { right: calc(50% - 240px); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAL: CREATE GROUP
══════════════════════════════════════════════════════════════════════════════ */
.modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: var(--dark2);
  position: sticky; bottom: 0;
}

/* Color picker row */
.cg-color-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}
.cg-color-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer; transition: all 0.18s;
  flex-shrink: 0;
}
.cg-color-btn:hover   { transform: scale(1.15); }
.cg-color-btn.active  {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 0 10px rgba(255,255,255,0.15);
  transform: scale(1.18);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE: PRANCHA SOB MEDIDA
══════════════════════════════════════════════════════════════════════════════ */

/* Hero */
.cb-hero {
  position: relative; min-height: 180px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 24px 20px 20px;
}
.cb-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0a1628 0%, #0d2d4a 50%, #102240 100%);
}
.cb-hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 Q80 40 160 80 Q240 120 320 60 Q370 30 400 70 L400 180 L0 180Z' fill='rgba(0,212,255,0.08)'/%3E%3Cpath d='M0 130 Q100 80 200 110 Q300 140 400 100 L400 180 L0 180Z' fill='rgba(0,212,255,0.05)'/%3E%3C/svg%3E") bottom/cover no-repeat;
}
.cb-hero-content { position: relative; z-index: 1; }
.cb-hero-badge {
  display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 20px;
  background: rgba(0,212,255,0.2); border: 1px solid rgba(0,212,255,0.4);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ocean);
  margin-bottom: 8px;
}
.cb-hero-content h2 { font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin-bottom: 6px; }
.cb-hero-content p  { font-size: 0.8rem; color: rgba(255,255,255,0.65); max-width: 260px; }

/* Steps bar */
.cb-steps-bar {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 20px; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cb-step-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0.4; transition: opacity 0.3s;
}
.cb-step-item.active { opacity: 1; }
.cb-step-item.done   { opacity: 0.7; }
.cb-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: var(--gray-lt);
  transition: all 0.3s;
}
.cb-step-item.active .cb-step-dot {
  background: var(--ocean); border-color: var(--ocean); color: #000;
  box-shadow: 0 0 10px rgba(0,212,255,0.4);
}
.cb-step-item.done .cb-step-dot {
  background: rgba(0,212,255,0.2); border-color: var(--ocean); color: var(--ocean);
}
.cb-step-item span { font-size: 0.64rem; color: var(--gray-lt); font-weight: 500; white-space: nowrap; }
.cb-step-item.active span { color: var(--ocean); font-weight: 700; }
.cb-step-line {
  flex: 1; height: 2px; background: rgba(255,255,255,0.08);
  margin: 0 6px; margin-bottom: 14px;
}

/* Panels */
.cb-panel { padding: 16px 0 24px; }
.cb-panel.hidden { display: none; }

/* Form */
.cb-form-wrap { padding: 0 16px; display: flex; flex-direction: column; gap: 0; }
.cb-form-row { display: flex; gap: 12px; }
.cb-form-row .form-group { flex: 1; }
.cb-chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cb-chip {
  padding: 9px 14px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); transition: all 0.2s; cursor: pointer;
}
.cb-chip:hover { border-color: rgba(0,212,255,0.35); color: #fff; }
.cb-chip.active {
  background: rgba(0,212,255,0.14); border-color: var(--ocean); color: var(--ocean);
  font-weight: 700;
}
.cb-next-btn {
  margin-top: 20px; width: 100%; padding: 14px; font-size: 0.95rem; font-weight: 700;
}

/* Summary card */
.cb-summary-card {
  margin: 0 16px 16px;
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07); padding: 14px;
}
.cb-summary-title {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--gray-lt); font-weight: 700; margin-bottom: 10px;
}
.cb-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
}
.cb-summary-row:last-child { border-bottom: none; }
.cb-summary-row span { color: var(--gray-lt); }
.cb-summary-row strong { color: #fff; }

/* Recommendation cards */
.cb-rec-card {
  margin: 0 16px 14px;
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07); overflow: hidden;
  position: relative;
}
.cb-rec-card.primary {
  border-color: rgba(0,212,255,0.35);
  background: linear-gradient(135deg, rgba(0,212,255,0.06), var(--dark2));
  box-shadow: 0 0 0 1px rgba(0,212,255,0.1);
}
.cb-rec-badge {
  display: inline-block; padding: 5px 14px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.06); color: var(--gray-lt);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  width: 100%; box-sizing: border-box;
}
.cb-rec-badge:not(.alt) { background: rgba(0,212,255,0.12); color: var(--ocean); }
.cb-rec-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 8px;
}
.cb-rec-emoji { font-size: 2.2rem; }
.cb-rec-type  { font-size: 1.1rem; font-weight: 800; }
.cb-rec-fins  { font-size: 0.72rem; color: var(--gray-lt); margin-top: 2px; }

/* Dimensions grid */
.cb-rec-dims {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cb-dim-item {
  background: rgba(0,0,0,0.2); padding: 12px 8px; text-align: center;
}
.cb-dim-label { font-size: 0.58rem; color: var(--gray-lt); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.cb-dim-val   { font-size: 1.0rem; font-weight: 800; color: var(--ocean); }
.cb-rec-desc { font-size: 0.8rem; color: var(--gray-lt); line-height: 1.5; padding: 12px 14px 4px; }
.cb-mat-note {
  font-size: 0.72rem; color: var(--sunset); padding: 4px 14px 12px;
}

/* Nav buttons */
.cb-nav-btns {
  display: flex; gap: 10px; padding: 8px 16px 0;
}
.cb-nav-btns .btn-secondary,
.cb-nav-btns .btn-primary { flex: 1; }

/* Shapers */
.cb-shaper-header { padding: 4px 16px 12px; }
.cb-shaper-header h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.cb-shaper-header p  { font-size: 0.75rem; color: var(--gray-lt); }

.cb-shaper-card {
  margin: 0 16px 12px;
  background: var(--dark2); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07); padding: 14px;
  animation: fadeInUp 0.3s ease;
}
.cb-shaper-top {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.cb-shaper-emoji { font-size: 1.8rem; flex-shrink: 0; }
.cb-shaper-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cb-shaper-info strong { font-size: 0.92rem; }
.cb-shaper-info span   { font-size: 0.72rem; color: var(--gray-lt); }
.cb-shaper-loc { color: var(--ocean) !important; }
.cb-shaper-match {
  flex-shrink: 0; font-size: 0.64rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  background: rgba(38,222,129,0.12); border: 1px solid rgba(38,222,129,0.3);
  color: var(--good); white-space: nowrap; align-self: flex-start;
}
.cb-shaper-desc {
  font-size: 0.78rem; color: var(--gray-lt); line-height: 1.5; margin-bottom: 10px;
}
.cb-shaper-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.cb-stag {
  font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--gray-lt); text-transform: capitalize;
}
.cb-shaper-actions { display: flex; flex-direction: column; gap: 7px; }
.cb-site-btn {
  width: 100%; text-align: center; text-decoration: none;
  padding: 11px 14px; border-radius: var(--radius); font-size: 0.84rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cb-ig-btn {
  text-align: center; color: #E1306C; font-size: 0.78rem; font-weight: 600;
  text-decoration: none; padding: 4px 0;
}
.cb-ig-btn:hover { text-decoration: underline; }

/* ─── FORECAST PREMIUM 14-DAY ──────────────────────────────────────────────── */
.fc-free-badge {
  font-size: 11px; font-weight: 700; color: var(--green);
  background: rgba(38,222,129,0.15); border-radius: 20px;
  padding: 2px 9px; margin-left: 8px; vertical-align: middle;
  letter-spacing: 0.3px;
}
.fc-premium-badge {
  font-size: 11px; font-weight: 700; color: #ffd700;
  background: rgba(255,215,0,0.13); border-radius: 20px;
  padding: 2px 9px; margin-left: 8px; vertical-align: middle;
  letter-spacing: 0.3px;
}
.forecast-14day { position: relative; }
.fc-premium-wrap { position: relative; }
.fc-premium-rows { }
.day-row-locked {
  opacity: 0.28;
  filter: blur(3.5px);
  pointer-events: none;
  user-select: none;
}
.fc-premium-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(10,15,30,0) 0%, rgba(10,15,30,0.92) 18%);
  border-radius: var(--radius);
  z-index: 4;
  padding: 12px;
}
.fc-premium-card {
  background: var(--dark2);
  border: 1px solid rgba(255,215,0,0.28);
  border-radius: 18px;
  padding: 24px 20px 20px;
  text-align: center;
  max-width: 310px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.12);
}
.fc-premium-icon { font-size: 2.6rem; margin-bottom: 10px; line-height: 1; }
.fc-premium-title {
  font-size: 1.15rem; font-weight: 800; color: #ffd700;
  margin-bottom: 8px; line-height: 1.3;
}
.fc-premium-sub {
  font-size: 0.82rem; color: var(--gray-lt);
  margin-bottom: 14px; line-height: 1.55;
}
.fc-premium-list {
  list-style: none; padding: 0; margin: 0 0 18px 0;
  text-align: left; display: flex; flex-direction: column; gap: 7px;
}
.fc-premium-list li {
  font-size: 0.83rem; color: var(--white);
  display: flex; align-items: center; gap: 6px;
}
.fc-premium-btn {
  width: 100%; padding: 13px 10px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #ffd700 0%, #ff9f43 100%);
  color: #000; font-weight: 800; font-size: 0.88rem;
  margin-bottom: 9px; transition: opacity 0.2s;
}
.fc-premium-btn:hover { opacity: 0.88; }
.fc-demo-btn {
  width: 100%; padding: 11px 10px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,215,0,0.35);
  color: #ffd700; font-weight: 700; font-size: 0.83rem; transition: background 0.2s;
}
.fc-demo-btn:hover { background: rgba(255,215,0,0.08); }
.fc-unavail {
  text-align: center; color: var(--gray); font-size: 0.85rem; padding: 16px;
}
.fc-model-note {
  font-size: 0.7rem; color: var(--gray); text-align: right;
  padding: 0 4px 6px; letter-spacing: 0.2px;
}
@keyframes fc14shimmer {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.3; }
}
.day-row-loading { opacity: 0.5; }
.fc14-skeleton-bar {
  width: 50%; background: var(--dark4);
  animation: fc14shimmer 1.4s ease-in-out infinite;
}
.fc14-skeleton-txt {
  animation: fc14shimmer 1.4s ease-in-out infinite;
  color: var(--dark4) !important;
}
.fnc-model-tag {
  font-size: 0.65rem; color: var(--ocean);
  background: rgba(0,212,255,0.08); border-radius: 8px;
  padding: 2px 7px; margin-left: 6px; vertical-align: middle;
  border: 1px solid rgba(0,212,255,0.25);
  cursor: pointer; transition: opacity .2s;
}
.fnc-model-tag:hover { opacity: 0.85; }
.fnc-model-info-btn {
  font-size: 0.6rem; opacity: 0.6; margin-left: 3px;
}

/* ── SurfBR Engine Modal — TEMA CLARO ────────────────────────────────────── */
.sbr-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.65); display: flex;
  align-items: flex-end; justify-content: center;
  animation: sbrFadeIn .18s ease;
}
@keyframes sbrFadeIn { from { opacity:0 } to { opacity:1 } }
.sbr-modal-box {
  background: #ffffff; border-radius: 1.4rem 1.4rem 0 0;
  width: 100%; max-width: 500px; padding: 1.5rem 1.4rem 2rem;
  max-height: 88vh; overflow-y: auto;
  animation: sbrSlideUp .22s ease;
  color: #1a1a2e;
}
@keyframes sbrSlideUp { from { transform:translateY(60px); opacity:0 } to { transform:translateY(0); opacity:1 } }
.sbr-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem;
  color: #0099CC;
}
.sbr-modal-logo { font-size: 1.2rem; margin-right: .3rem; }
.sbr-modal-header button {
  background: none; border: none; color: #666;
  font-size: 1.2rem; cursor: pointer; padding: .2rem .4rem;
  border-radius: 50%; transition: background .15s;
}
.sbr-modal-header button:hover { background: rgba(0,0,0,.06); }
.sbr-modal-tagline {
  font-size: .78rem; color: #555; margin: 0 0 1.2rem;
}
.sbr-modal-section {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #0099CC;
  margin: 1rem 0 .55rem; padding-bottom: .3rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.sbr-modal-models { display: flex; flex-direction: column; gap: .45rem; }
.sbr-model-pill {
  display: flex; align-items: center; gap: .7rem;
  background: #f4f6f9; border-radius: .7rem;
  padding: .55rem .8rem;
}
.sbr-model-pill strong { display: block; font-size: .84rem; color: #1a1a2e; }
.sbr-model-pill span:last-child { font-size: .72rem; color: #555; }
.sbr-mp-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--good);
}
.sbr-dot-gfshr  { background: var(--classic); }
.sbr-dot-ecmwf  { background: var(--surfable); }
.sbr-dot-mfwam  { background: var(--ocean); }
.sbr-modal-item {
  display: flex; gap: .75rem; margin-bottom: .6rem; align-items: flex-start;
}
.sbr-modal-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: .05rem; }
.sbr-modal-item strong { display: block; font-size: .84rem; margin-bottom: .15rem; color: #1a1a2e; }
.sbr-modal-item p { font-size: .76rem; color: #555; margin: 0; line-height: 1.5; }
.sbr-modal-conf-row {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-size: .75rem; font-weight: 600; margin-bottom: .4rem;
  color: #333;
}
/* ── Cálculo em Tempo Real ────────────────────────────────────────────────── */
.sbr-calc-table {
  background: #f4f6f9; border-radius: .9rem;
  padding: .85rem .9rem; margin-bottom: .5rem;
  border: 1px solid rgba(0,0,0,.08);
}
.sbr-calc-head {
  display: grid; grid-template-columns: 1fr .7fr .5fr;
  font-size: .65rem; text-transform: uppercase; letter-spacing: .07em;
  color: #777; padding-bottom: .5rem;
  border-bottom: 1px solid rgba(0,0,0,.08); margin-bottom: .45rem;
}
.sbr-calc-row {
  display: grid; grid-template-columns: 1fr .7fr .5fr;
  align-items: center; padding: .28rem 0; color: #1a1a2e;
}
.sbr-calc-na { opacity: .4; }
.sbr-calc-model {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: #1a1a2e;
}
.sbr-calc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sbr-dot-ens { background: linear-gradient(135deg, var(--good), var(--ocean)); }
.sbr-calc-hs {
  font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #1a1a2e;
}
.sbr-calc-hs small { font-size: .62rem; font-weight: 400; opacity: .65; margin-left: 1px; }
.sbr-calc-pct {
  font-size: .75rem; color: #555; font-weight: 600;
}
.sbr-calc-rule {
  font-size: .72rem; color: #444; margin: .6rem 0 .4rem;
  background: #eef2f7; border-radius: .5rem;
  padding: .35rem .5rem; display: flex; gap: .4rem; align-items: center;
}
.sbr-calc-rule-dot { font-size: .7rem; }
.sbr-calc-divider {
  height: 1px; background: rgba(0,0,0,.09); margin: .5rem 0;
}
.sbr-calc-ensemble-row .sbr-calc-model { font-weight: 600; color: #1a1a2e; }
.sbr-calc-ensemble-row .sbr-calc-hs    { color: #0099CC; }
.sbr-calc-calib-block {
  background: #e8f7fd; border-radius: .6rem;
  padding: .55rem .65rem; margin: .5rem 0; font-size: .76rem;
  border: 1px solid #b3dff0;
}
.sbr-calc-calib-line {
  display: grid; grid-template-columns: 1fr .5fr 1fr;
  align-items: center; padding: .18rem 0; color: #444;
}
.sbr-calc-calib-line span:nth-child(2) {
  font-weight: 700; color: #1a1a2e;
}
.sbr-calc-calib-note { font-size: .68rem; opacity: .6; color: #555; }
.sbr-calc-calib-total {
  display: grid; grid-template-columns: 1fr .5fr;
  font-weight: 700; font-size: .82rem; color: #0099CC;
  margin-top: .35rem; padding-top: .35rem;
  border-top: 1px solid #b3dff0;
}
.sbr-calc-result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .35rem 0;
}
.sbr-calc-result-row > span:first-child {
  font-weight: 700; font-size: .9rem; color: #1a1a2e;
}
.sbr-calc-result-val {
  font-size: 1.5rem; font-weight: 800; color: #0099CC;
  font-variant-numeric: tabular-nums;
}
.sbr-calc-result-val small {
  font-size: .75rem; font-weight: 500; opacity: .7; margin-left: 2px;
}
.sbr-calc-result-eq {
  font-size: .7rem; color: #777;
  text-align: right; margin-top: -.1rem;
  font-variant-numeric: tabular-nums;
}

.sbr-modal-sources {
  font-size: .68rem; color: #777;
  text-align: center; margin-top: 1.2rem; border-top: 1px solid rgba(0,0,0,.08);
  padding-top: .8rem;
}

/* ─── MODEL BARS — PREVISÃO 7 DIAS ──────────────────────────────────────────── */
.mb-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mb-panel-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}
.mb-panel-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-lt);
}
.mb-leg-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.mb-leg-ens {
  background: linear-gradient(135deg, #00D4FF, #26de81);
}
.mb-days {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mb-day-card {
  padding: 10px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mb-day-card:last-child { border-bottom: none; }
.mb-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mb-day-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  text-transform: capitalize;
}
.mb-spread-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}
.mb-badge-ok   { background: rgba(38,222,129,0.18); color: var(--good); }
.mb-badge-warn { background: rgba(255,211,0,0.15);  color: #FFD93D; }
.mb-badge-bad  { background: rgba(255,107,107,0.18);color: var(--bad); }
.mb-badge-one  { background: rgba(156,163,175,0.15);color: var(--gray-lt); }

.mb-model-row,
.mb-ens-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.mb-model-lbl,
.mb-ens-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-lt);
  width: 52px;
  flex-shrink: 0;
  text-align: right;
}
.mb-ens-lbl {
  color: var(--ocean-lt);
}
.mb-model-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.mb-model-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.mb-ens-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #00D4FF, #26de81);
  transition: width 0.5s ease;
}
.mb-model-val,
.mb-ens-val {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gray-lt);
  width: 36px;
  flex-shrink: 0;
  text-align: right;
}
.mb-ens-val {
  color: var(--ocean-lt);
}
.mb-ens-row .mb-model-bar-track {
  height: 8px;
}

/* ── Day card clickable ── */
.mb-day-card.mb-clickable { cursor: pointer; transition: background .15s; }
.mb-day-card.mb-clickable:hover { background: rgba(255,255,255,0.04); }
.mb-day-card.mb-card-open { background: rgba(0,212,255,0.06); border-left: 2px solid var(--ocean); padding-left: 14px; }
.mb-day-head-right { display:flex; align-items:center; gap:6px; }
.mb-chevron {
  font-size: 1rem; color: var(--gray); line-height:1;
  transition: transform .2s;
}
.mb-card-open .mb-chevron { transform: rotate(90deg); color: var(--ocean); }

/* ── Detail panel ── */
.mb-detail { background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.06); }
.mb-detail-inner { padding: 12px 16px 16px; }

.mb-best-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--best-color, var(--ocean));
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.mb-best-left { display:flex; flex-direction:column; gap:2px; }
.mb-best-time { font-size:.82rem; font-weight:700; color:var(--white); }
.mb-best-label { font-size:.72rem; font-weight:700; }
.mb-best-right { display:flex; gap:10px; align-items:center; }
.mb-best-stat { font-size:.78rem; font-weight:600; color:var(--gray-lt); }

.mb-detail-section { margin-bottom: 14px; }
.mb-detail-title {
  font-size:.7rem; font-weight:700; color:var(--gray-lt);
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:7px; padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mb-detail-cols { display:flex; gap:10px; }
.mb-detail-half { flex:1; min-width:0; }

/* Hora a hora */
.mb-hr-head {
  display:grid; grid-template-columns:64px 46px 34px 1fr 1fr;
  font-size:.70rem; color:var(--gray); padding:0 4px 4px;
}
.mb-hr-row {
  display:grid; grid-template-columns:64px 46px 34px 1fr 1fr;
  align-items:center; padding:5px 4px;
  border-radius:6px; font-size:.78rem;
}
.mb-hr-row:hover { background:rgba(255,255,255,0.04); }
.mb-hr-best { background:rgba(0,212,255,0.08) !important; }
.mb-hr-time { font-weight:700; color:var(--white); }
.mb-hr-h    { font-weight:700; color:var(--ocean-lt); }
.mb-hr-p    { color:var(--gray-lt); }
.mb-hr-w    { color:var(--gray-lt); }
.mb-hr-score { font-size:.72rem; font-weight:700; }

/* Swell */
.mb-sw-row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.mb-sw-lbl { font-size:.74rem; color:var(--gray-lt); }
.mb-sw-val { font-size:.76rem; font-weight:600; color:var(--white); text-align:right; }
.mb-sw-empty { font-size:.74rem; color:var(--gray); }

/* Marés */
.mb-tide-row { display:flex; align-items:center; gap:8px; padding:5px 0; }
.mb-tide-icon { font-size:.82rem; }
.mb-tide-label { font-size:.75rem; color:var(--gray-lt); flex:1; }
.mb-tide-time { font-size:.78rem; font-weight:700; color:var(--white); }
.mb-tide-disclaimer { font-size:.63rem; color:var(--gray); margin-top:6px; font-style:italic; }

/* Board SVG illustrations */
.cb-board-views {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-end;
  margin: 14px 0 10px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
}
.cb-board-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cb-view-top svg {
  width: 56px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.cb-view-side svg {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.20));
}
.cb-view-label {
  font-size: 10px;
  color: var(--gray-lt);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH FIREBASE — NOVOS ESTILOS v93
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Username field no signup ────────────────────────────────────────────── */
.login-username-wrap {
  position: relative;
  width: 100%;
}
.login-username-wrap .login-input {
  padding-right: 2.8rem;
  width: 100%;
}
.username-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.username-status.us-ok       { color: var(--good); }
.username-status.us-error    { color: var(--bad);  }
.username-status.us-checking { color: var(--gray-lt); }

/* ─── Esqueci minha senha ─────────────────────────────────────────────────── */
.forgot-pass-link {
  background: none; border: none; padding: 0;
  color: var(--ocean-lt); font-size: 0.78rem;
  cursor: pointer; text-align: right; width: 100%;
  margin: -4px 0 6px; display: block;
  transition: color .15s;
}
.forgot-pass-link:hover { color: var(--ocean); text-decoration: underline; }

/* ─── Email verification banner ───────────────────────────────────────────── */
.email-verify-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: linear-gradient(90deg, rgba(255,193,7,0.15), rgba(255,152,0,0.1));
  border-bottom: 1px solid rgba(255,193,7,0.3);
  padding: 10px 16px;
  font-size: 0.8rem;
  position: sticky; top: 0; z-index: 90;
}
.evb-icon { font-size: 1.1rem; flex-shrink: 0; }
.evb-text { flex: 1; min-width: 160px; color: var(--white); }
.evb-btn, .evb-check-btn {
  padding: 5px 12px; border-radius: 20px; font-size: 0.75rem;
  font-weight: 700; cursor: pointer; border: none; transition: all .15s;
}
.evb-btn {
  background: rgba(255,193,7,0.25); color: #FFD700; border: 1px solid rgba(255,193,7,0.4);
}
.evb-btn:hover { background: rgba(255,193,7,0.4); }
.evb-check-btn {
  background: rgba(38,222,129,0.15); color: var(--good); border: 1px solid rgba(38,222,129,0.3);
}
.evb-check-btn:hover { background: rgba(38,222,129,0.3); }
.evb-close {
  background: none; border: none; color: var(--gray); cursor: pointer;
  font-size: 1rem; padding: 0 4px; line-height: 1; flex-shrink: 0;
}
.evb-close:hover { color: var(--white); }

/* ─── Modal genérico pequeno ──────────────────────────────────────────────── */
.modal-sm { max-width: 400px; }
.modal-desc {
  font-size: 0.85rem; color: var(--gray-lt); margin-bottom: 16px; line-height: 1.5;
}

/* ─── Forgot password ──────────────────────────────────────────────────────── */
.fp-msg     { font-size: 0.8rem; margin: 6px 0; }
.fp-msg-err { color: var(--bad); }
.fp-msg-ok  { color: var(--good); }
.fp-success-icon { font-size: 3rem; text-align: center; margin-bottom: 12px; }
#fp-success h4 { text-align: center; color: var(--good); margin-bottom: 8px; }
#fp-success p  { text-align: center; color: var(--gray-lt); font-size: 0.85rem; }

/* ─── Change password ──────────────────────────────────────────────────────── */
.pass-input-wrap {
  position: relative;
}
.pass-input-wrap input {
  padding-right: 44px; width: 100%;
}
.pass-toggle-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0;
  opacity: 0.6; transition: opacity .15s;
}
.pass-toggle-btn:hover { opacity: 1; }
.pass-strength-bar {
  height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 2px; margin-top: 6px; overflow: hidden;
}
.psb-fill {
  height: 100%; border-radius: 2px; width: 0%;
  transition: width .3s, background-color .3s;
}
.pass-strength-label { color: var(--gray-lt); font-size: 0.72rem; }
.cp-msg     { font-size: 0.8rem; margin: 6px 0; }
.cp-msg-err { color: var(--bad); }
.cp-msg-ok  { color: var(--good); }

/* ─── 2FA setup ────────────────────────────────────────────────────────────── */
.fa2-qr-wrap {
  display: flex; justify-content: center; margin: 12px 0 16px;
  background: #fff; border-radius: 12px; padding: 12px;
}
.fa2-qr-img { width: 180px; height: 180px; border-radius: 6px; }
.fa2-secret-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border-radius: 8px; padding: 8px 12px;
  margin-bottom: 12px;
}
.fa2-secret-label { font-size: 0.72rem; color: var(--gray-lt); white-space: nowrap; }
.fa2-secret {
  flex: 1; font-family: monospace; font-size: 0.72rem; color: var(--ocean-lt);
  word-break: break-all; letter-spacing: 0.1em;
}
.fa2-copy-btn {
  background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0;
  opacity: 0.7; transition: opacity .15s; flex-shrink: 0;
}
.fa2-copy-btn:hover { opacity: 1; }
.fa2-msg     { font-size: 0.8rem; margin: 6px 0; }
.fa2-err     { color: var(--bad); }
.fa2-ok      { color: var(--good); }
.fa2-active-badge {
  text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--good);
  padding: 20px; border: 2px solid rgba(38,222,129,0.3);
  border-radius: 12px; margin-bottom: 16px;
  background: rgba(38,222,129,0.08);
}

/* ─── Sessions modal ───────────────────────────────────────────────────────── */
.session-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 8px;
}
.session-current { border: 1px solid rgba(0,212,255,0.2); }
.session-icon  { font-size: 1.5rem; flex-shrink: 0; }
.session-info  { flex: 1; }
.session-info strong { display: block; font-size: 0.85rem; color: var(--white); }
.session-info span   { font-size: 0.75rem; color: var(--gray-lt); }
.session-badge-current {
  background: rgba(0,212,255,0.15); color: var(--ocean-lt);
  font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 12px;
  border: 1px solid rgba(0,212,255,0.2);
}
.sessions-note { font-size: 0.76rem; color: var(--gray); margin-top: 8px; line-height: 1.5; }

/* ─── Delete account modal ─────────────────────────────────────────────────── */
.da-warning {
  background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.25);
  border-radius: 10px; padding: 12px 14px;
}
.da-warning p  { font-size: 0.85rem; color: var(--gray-lt); line-height: 1.5; margin: 0; }
.da-msg        { font-size: 0.8rem; color: var(--bad); margin: 6px 0; }
.btn-danger {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: #fff; border: none; border-radius: 12px;
  padding: 13px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s; width: 100%;
}
.btn-danger:hover  { opacity: 0.85; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Settings dinâmicas ──────────────────────────────────────────────────── */
.settings-danger-group h4 { color: #ff6b6b; }
.settings-verified-chip {
  background: rgba(38,222,129,0.15); color: var(--good);
  font-size: 0.68rem; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; margin-left: 6px;
}
.settings-unverified-chip {
  background: rgba(255,193,7,0.15); color: #FFD700;
  font-size: 0.68rem; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; margin-left: 6px;
}
.settings-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.settings-item-info span { font-size: 0.87rem; color: var(--white); }
.settings-item-info small { font-size: 0.72rem; color: var(--gray-lt); }
.settings-link-btn {
  background: rgba(0,212,255,0.1); color: var(--ocean-lt);
  border: 1px solid rgba(0,212,255,0.2); border-radius: 8px;
  padding: 5px 12px; font-size: 0.75rem; font-weight: 700;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.settings-link-btn:hover { background: rgba(0,212,255,0.2); }
.settings-select {
  background: rgba(255,255,255,0.07); color: var(--white);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  padding: 6px 10px; font-size: 0.82rem;
}
.settings-note { font-size: 0.78rem; color: var(--gray-lt); padding: 4px 0; }

/* ─── Profile enhancements ────────────────────────────────────────────────── */
.profile-verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ocean); color: #fff;
  font-size: 0.62rem; font-weight: 900; margin-left: 5px;
  vertical-align: middle;
}
.profile-avatar-wrap { position: relative; display: inline-block; }
.profile-avatar-edit-btn {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card-bg); border: 2px solid var(--bg);
  font-size: 0.75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.profile-avatar-edit-btn:hover { background: rgba(0,212,255,0.2); }
.profile-banner-edit-btn {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.5); color: #fff;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  padding: 5px 10px; font-size: 0.75rem; cursor: pointer;
  backdrop-filter: blur(4px); transition: background .15s;
}
.profile-banner-edit-btn:hover { background: rgba(0,0,0,0.7); }
.profile-cover { position: relative; }
.profile-social-links {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.profile-social-link {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 4px 10px;
  font-size: 0.75rem; color: var(--ocean-lt); text-decoration: none;
  transition: all .15s;
}
.profile-social-link:hover { background: rgba(0,212,255,0.15); }
.profile-location {
  font-size: 0.78rem; color: var(--gray-lt); margin-top: 4px;
}

/* ─── Edit profile — banner ───────────────────────────────────────────────── */
.ep-banner-group { margin-bottom: 16px; }
.ep-banner-preview-wrap {
  width: 100%; height: 80px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 8px; position: relative;
}
.ep-banner-preview-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ep-banner-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 0.8rem; color: var(--gray);
}
.ep-username-hint { color: var(--gray); font-size: 0.72rem; margin-top: 3px; display: block; }

/* ─── Login screen: username status below field ───────────────────────────── */
#signup-form .login-username-wrap { margin-bottom: 2px; }
#signup-form .username-status {
  position: static; transform: none; display: block;
  text-align: right; min-height: 16px; margin-bottom: 2px;
  font-size: 0.72rem; font-weight: 700;
}

/* ─── Password strength indicator ─────────────────────────────────────────── */
@keyframes strengthPulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.7; }
}

/* ─── Responsive adjustments ──────────────────────────────────────────────── */
@media (max-width: 400px) {
  .email-verify-banner { flex-direction: column; text-align: center; }
  .evb-text { text-align: center; }
  .fa2-qr-img { width: 150px; height: 150px; }
  .modal-sm { max-width: 100%; margin: 0 12px; }
}