/* ── Header ── */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(8, 18, 32, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border-subtle);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 10;
}
.header-logo {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-user { display: flex; align-items: center; gap: 12px; }
.header-fur {
  color: var(--c-gold); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px var(--c-gold-glow);
}
.header-ep {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(224, 64, 251, 0.12);
  border: 1px solid rgba(224, 64, 251, 0.25);
  font-size: 0.75rem; font-weight: 700; color: #e040fb;
  letter-spacing: 0.02em;
}
.header-ep:empty { display: none; }
.header-username { color: var(--c-text-secondary); font-size: 0.9rem; }
.btn-logout {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(139,184,224,0.15);
  color: var(--c-text-muted); padding: 6px 14px; border-radius: 20px; cursor: pointer;
  font-size: 0.8rem; transition: all var(--ease);
}
.btn-logout:hover { background: var(--c-accent-glow); border-color: var(--c-accent-border); color: var(--c-accent); }

/* ── Tab Bar ── */
.tab-bar {
  display: flex; gap: 4px; padding: 10px 20px;
  background: rgba(8, 18, 32, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(30,60,100,0.2);
  position: relative; z-index: 5;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 7px 14px; background: transparent; border: 1px solid transparent;
  border-radius: 20px; color: var(--c-text-muted); cursor: pointer; font-size: 0.85rem;
  transition: all var(--ease); font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.tab-btn.active {
  background: var(--c-accent-glow); color: var(--c-accent);
  border-color: var(--c-accent-border);
  box-shadow: 0 0 10px var(--c-accent-glow);
}
.tab-btn:hover:not(.active) { background: rgba(255,255,255,0.04); color: #7db8e0; }

/* ── Content Area ── */
.content {
  flex: 1; padding: 0; width: 100%;
  position: relative; z-index: 1;
}
.tab-controls {
  max-width: 820px; margin: 0 auto; padding: 14px 0;
}

/* ── Status Bar ── */
.status-bar {
  display: flex; justify-content: center; gap: 24px; padding: 10px 20px;
  background: linear-gradient(90deg, #080e18, #0b1520, #080e18);
  border-top: 1px solid var(--c-border-subtle); font-size: 0.8rem; color: var(--c-text-dim);
  position: relative; z-index: 10;
}

/* ── Sticky Status ── */
.sticky-status {
  position: sticky; top: 0; z-index: 20;
  box-shadow: var(--shadow-sm);
}
.action-log {
  padding: 6px 20px;
  background: rgba(10,20,35,0.95);
  border-bottom: 1px solid var(--c-accent-glow);
  font-size: 0.85rem; color: var(--c-text-sub); text-align: center;
  max-height: 60px; overflow: hidden;
  transition: opacity 0.3s;
}

/* ── Activity Bar ── */
.activity-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 24px;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(77,184,255,0.15);
  font-size: 0.95rem; color: var(--c-text-sub);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.activity-icon { font-size: 1.3rem; line-height: 1; }
.activity-text { font-weight: 600; font-size: 0.95rem; }
.activity-timer {
  color: var(--c-accent); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem;
  min-width: 3.5em; text-align: center;
}
.activity-stop-btn {
  background: var(--c-danger-bg); border: 1px solid var(--c-danger-border);
  color: var(--c-danger); padding: 5px 14px; border-radius: 20px; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; transition: all var(--ease);
}
.activity-stop-btn:hover { background: rgba(255,80,80,0.3); border-color: rgba(255,80,80,0.5); }
.activity-bar.idle { border-bottom-color: rgba(30,60,100,0.1); }
.activity-bar.idle .activity-text { color: var(--c-text-dim); }
.activity-bar.idle .activity-icon { opacity: 0.4; }
.activity-bar.sailing { border-bottom-color: rgba(77,184,255,0.3); background: rgba(10, 25, 50, 0.88); }
.activity-bar.sailing .activity-text { color: var(--c-accent-light); }
.activity-bar.active { border-bottom-color: rgba(255,200,50,0.25); background: rgba(20, 22, 30, 0.88); animation: activity-pulse 2.5s ease-in-out infinite; }
.activity-bar.active .activity-text { color: var(--c-gold); }
@keyframes activity-pulse {
  0%,100% { border-bottom-color: rgba(255,200,50,0.15); }
  50% { border-bottom-color: rgba(255,200,50,0.4); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .header-logo { font-size: 1.1rem; }
  .header-username { display: none; }
  .tab-controls { padding: 12px 16px; }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .header { padding: 8px 12px; gap: 8px; }
  .header-user { gap: 8px; }
  .tab-bar { padding: 8px 12px; gap: 3px; }
  .content { padding: 8px; }
  .tab-btn { padding: 6px 10px; font-size: 0.78rem; min-height: 36px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .action-btn { max-width: 100%; font-size: 1.1rem; min-height: 48px; }
  .btn-sm { min-height: 36px; }
  .activity-bar { padding: 8px 12px; gap: 8px; font-size: 0.85rem; }
  .activity-stop-btn { padding: 5px 12px; }
  #panel-fishing { min-height: 400px; }
  .item-list { gap: 6px; }
  .item-card { padding: 10px 12px; min-width: 75px; }
}