/* ===========================
   HEADER
   =========================== */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: linear-gradient(135deg, rgba(5, 20, 50, 0.97), rgba(10, 35, 80, 0.97));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.header-brand { display: flex; align-items: center; gap: 10px; }
.header-whale { font-size: 28px; filter: drop-shadow(0 0 8px rgba(0,200,224,0.6)); }
.header-title { font-size: 15px; font-weight: 700; color: var(--accent-light); letter-spacing: 0.3px; }
.header-sub { font-size: 11px; color: var(--text-muted); }
.header-limit {
  font-size: 12px; font-weight: 600; color: var(--gold);
  background: rgba(255, 201, 71, 0.1); border: 1px solid rgba(255,201,71,0.3);
  padding: 4px 10px; border-radius: 20px;
}

/* ===========================
   BOTTOM NAV
   =========================== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: linear-gradient(180deg, rgba(5,20,50,0.97), rgba(7,20,40,0.99));
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--text-dim); font-size: 11px; font-weight: 500;
  transition: all var(--transition); position: relative;
}
.nav-item i { font-size: 20px; transition: transform var(--transition); }
.nav-item.active { color: var(--accent); }
.nav-item.active i { transform: scale(1.1); }
.nav-item.active::before {
  content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px;
  background: var(--accent); border-radius: 0 0 4px 4px;
}