@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ============================================================
   App Team 29er · v16.30 visual restyle candidate
   Direction: Concept A+B · Boards + Performance
   Palette: Concept B · royal blue + performance violet
   Typography: Pinterest-inspired geometric/humanist sans
   Scope: visual layer only; no product/data behavior changes
   ============================================================ */

:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel2:#f4f6fb;
  --text:#0a153f;
  --muted:#6e7892;
  --line:rgba(10,21,63,.075);
  --accent:#2563eb;
  --accent-2:#6d45f5;
  --accent-soft:rgba(37,99,235,.085);
  --violet-soft:rgba(109,69,245,.085);
  --good:#1fa66b;
  --warn:#c58a11;
  --bad:#df5267;
  --water:#2563eb;
  --gym:#6d45f5;
  --radius:18px;
  --radius-lg:22px;
  --shadow:0 10px 30px rgba(17,36,79,.055),0 2px 8px rgba(17,36,79,.025);
  --shadow-hover:0 14px 34px rgba(17,36,79,.08),0 4px 12px rgba(17,36,79,.035);
}

html{background:var(--bg)!important}
body{
  background:
    radial-gradient(circle at 88% 0%,rgba(37,99,235,.055),transparent 28%),
    linear-gradient(180deg,#f8faff 0%,#f4f7fb 48%,#f6f8fb 100%)!important;
  color:var(--text)!important;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif!important;
  letter-spacing:-.008em;
}
button,input,select,textarea{font-family:inherit!important}
::selection{background:rgba(37,99,235,.16)}

/* ---------- App shell / page hierarchy ---------- */
.app-shell{max-width:980px!important;padding-bottom:100px!important}
.topbar{
  background:rgba(248,250,255,.88)!important;
  border-bottom:1px solid rgba(10,21,63,.055)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.15)!important;
  backdrop-filter:blur(22px) saturate(1.15)!important;
  padding-left:16px!important;
  padding-right:16px!important;
}
.eyebrow{
  color:var(--accent)!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
h1{
  color:var(--text)!important;
  font-size:26px!important;
  line-height:1.08!important;
  font-weight:700!important;
  letter-spacing:-.045em!important;
}
h2{font-weight:700!important;letter-spacing:-.035em!important}
h3,h4{font-weight:650!important;letter-spacing:-.025em!important}
.content{padding:14px 14px 20px!important}

/* ---------- Surfaces ---------- */
.card,.subcard,.modal-card,.venue-map-wrap,.empty,.interactive-chart,.multi-chart,.chart-tooltip{
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow)!important;
}
.card{
  border-radius:var(--radius-lg)!important;
  padding:16px!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card.compact{padding:14px!important}
.subcard{border-radius:15px!important;padding:13px!important;box-shadow:none!important}
section.card{margin-top:14px!important}
.grid{gap:11px!important}
.grid.two{gap:11px!important}
@media(hover:hover){
  .card[onclick]:hover,.weather-widget:hover,.schedule-card:hover,.crew-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)!important;border-color:rgba(37,99,235,.13)!important}
}

/* ---------- Titles / microcopy ---------- */
.widget-title{margin-bottom:11px!important;gap:10px!important}
.widget-title h3,.card h3{font-size:14px!important;margin-bottom:8px!important}
.section-title{margin:8px 1px 11px!important}
.section-title h2{font-size:18px!important}
.tiny{
  color:var(--muted)!important;
  font-size:10px!important;
  line-height:1.45!important;
  letter-spacing:.035em!important;
}
.muted{color:var(--muted)!important}
.big-number,.weather .wind,.countdown strong,.forecast-hero h2,.rotation-dir{
  color:var(--text)!important;
  font-weight:700!important;
  letter-spacing:-.055em!important;
}
.big-number{font-size:32px!important}

/* ---------- Buttons ---------- */
.primary,.secondary,.ghost,.danger,.icon-btn,.edit-btn{
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease!important;
}
.primary{
  background:linear-gradient(135deg,#2563eb 0%,#315ee8 62%,#6048ef 100%)!important;
  color:#fff!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:0 8px 18px rgba(37,99,235,.18)!important;
  font-weight:650!important;
}
.secondary{
  background:#f5f7fb!important;
  color:var(--text)!important;
  border:1px solid rgba(10,21,63,.08)!important;
  border-radius:14px!important;
  box-shadow:none!important;
  font-weight:600!important;
}
.ghost{color:var(--accent)!important;font-weight:650!important}
.danger{background:rgba(223,82,103,.09)!important;color:var(--bad)!important}
.icon-btn,.edit-btn{
  background:#fff!important;
  color:var(--accent)!important;
  border:1px solid rgba(10,21,63,.065)!important;
  box-shadow:0 5px 14px rgba(17,36,79,.055)!important;
}
.icon-btn{width:42px!important;height:42px!important;border-radius:14px!important}
button:active{transform:scale(.985)}

/* ---------- Pills / badges / tabs ---------- */
.badge,.score-pill,.score-mini{
  border-radius:999px!important;
  border:0!important;
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.badge{font-size:9px!important;padding:6px 9px!important;letter-spacing:.025em!important}
.badge.good,.score-pill.good{background:rgba(31,166,107,.09)!important;color:var(--good)!important}
.badge.warn,.score-pill.warn{background:rgba(197,138,17,.10)!important;color:var(--warn)!important}
.badge.bad,.score-pill.bad{background:rgba(223,82,103,.095)!important;color:var(--bad)!important}
.tabs{gap:7px!important;margin-bottom:13px!important}
.tab,.chip,.rating button,.weather-mode-switch button{
  background:#f5f7fb!important;
  color:#737d95!important;
  border:1px solid rgba(10,21,63,.06)!important;
  border-radius:999px!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:600!important;
}
.tab.active,.chip.active,.rating button.active,.weather-mode-switch button.active{
  background:linear-gradient(135deg,#2563eb,#5b4bec)!important;
  color:white!important;
  border-color:transparent!important;
  box-shadow:0 6px 14px rgba(37,99,235,.14)!important;
}

/* ---------- Form controls ---------- */
.field label{color:#778299!important;font-size:10px!important;font-weight:650!important;letter-spacing:.02em!important}
.field input,.field select,.field textarea,.weather-mode-switch{
  background:#f7f8fc!important;
  color:var(--text)!important;
  border:1px solid rgba(10,21,63,.075)!important;
  border-radius:13px!important;
  box-shadow:none!important;
}
.field input,.field select,.field textarea{padding:11px 12px!important}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(37,99,235,.34)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.075)!important;
}
.field input::placeholder,.field textarea::placeholder{color:#9aa4b7!important}
.toggle-row{background:#f7f8fc!important;border-color:rgba(10,21,63,.07)!important;border-radius:15px!important}
.toggle-row input{accent-color:var(--accent)!important}

/* ---------- Bottom navigation ---------- */
.bottom-nav{
  left:10px!important;
  right:10px!important;
  bottom:9px!important;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
  background:rgba(255,255,255,.93)!important;
  border:1px solid rgba(10,21,63,.065)!important;
  border-radius:22px!important;
  box-shadow:0 12px 34px rgba(18,34,74,.10)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.15)!important;
  backdrop-filter:blur(22px) saturate(1.15)!important;
  overflow:hidden;
}
.nav-item{
  color:#7b859b!important;
  border-radius:14px!important;
  padding:6px 2px!important;
  min-height:48px;
  transition:background .15s ease,color .15s ease,transform .12s ease!important;
}
.nav-item span{font-size:19px!important;line-height:1!important;filter:saturate(.4)}
.nav-item small{font-size:9px!important;font-weight:600!important;letter-spacing:-.01em!important}
.nav-item.active{
  color:var(--accent)!important;
  background:rgba(37,99,235,.075)!important;
}
.nav-item.active span{filter:none}
@media(min-width:700px){.bottom-nav{left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:720px!important}}

/* ---------- Lists ---------- */
.todo-item,.list-item,.model-row,.crew-sail-row,.training-weather-actions,.sail-log{
  border-color:rgba(10,21,63,.065)!important;
}
.todo-item,.list-item{padding:11px 0!important}
.todo-item strong,.list-item strong{font-weight:600!important}
.prio.high{background:var(--bad)!important}.prio.medium{background:var(--warn)!important}.prio.low{background:var(--good)!important}
.hr{background:rgba(10,21,63,.065)!important}
.empty{color:var(--muted)!important;border-style:dashed!important;box-shadow:none!important}

/* ---------- Charts / analytics ---------- */
.bar{background:#edf0f6!important;height:8px!important}
.bar>span{background:linear-gradient(90deg,#2563eb,#6d45f5)!important}
.interactive-chart,.multi-chart{
  background:#fbfcff!important;
  border-color:rgba(10,21,63,.06)!important;
  box-shadow:none!important;
}
.chart-grid-line,.gym-chart-grid{stroke:rgba(10,21,63,.065)!important}
.chart-axis-line{stroke:rgba(10,21,63,.13)!important}
.chart-axis-label,.gym-chart-label,.chart-touch-hint,.model-legend{color:#7f899d!important;fill:#7f899d!important}
.chart-tooltip{background:#fff!important;border-color:rgba(10,21,63,.08)!important;box-shadow:0 12px 26px rgba(18,34,74,.10)!important}
.spark.overlay.model-c0 polyline{stroke:#2563eb!important}
.spark.overlay.model-c1 polyline{stroke:#17a78b!important}
.spark.overlay.model-c2 polyline{stroke:#d79a22!important}
.spark.overlay.model-c3 polyline{stroke:#df5267!important}
.spark.overlay.model-c4 polyline{stroke:#6d45f5!important}
.model-dot.model-c0,.model-c0 .model-dot{background:#2563eb!important}
.model-dot.model-c1,.model-c1 .model-dot{background:#17a78b!important}
.model-dot.model-c2,.model-c2 .model-dot{background:#d79a22!important}
.model-dot.model-c3,.model-c3 .model-dot{background:#df5267!important}
.model-dot.model-c4,.model-c4 .model-dot{background:#6d45f5!important}

/* ---------- Weather ---------- */
.forecast-hero{background:linear-gradient(145deg,#fff 0%,#f5f8ff 100%)!important}
.forecast-hero h2{font-size:34px!important}
.weather .arrow,.wind-arrow{color:var(--accent)!important}
.weather-toolbar{gap:8px!important}
.weather-time-card{padding:14px!important}
.weather-mode-switch{padding:4px!important}
.model-row{padding:12px 0!important}
.model-values strong{color:var(--text)!important;font-weight:650!important}
.forecast-archive span{background:#f7f8fc!important;border-color:rgba(10,21,63,.06)!important}
.windy-frame{border-color:rgba(10,21,63,.06)!important;box-shadow:none!important}
.venue-map-wrap{box-shadow:none!important}

/* ---------- Calendar / activity board ---------- */
.view-switch{gap:7px!important;margin-bottom:13px!important}
.calendar-card{padding:13px!important}
.cal-day,.home-cal-day{
  background:#f5f7fb!important;
  color:var(--text)!important;
  border-radius:12px!important;
}
.cal-day.today,.home-cal-day.today{
  background:rgba(37,99,235,.08)!important;
  box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.25)!important;
  color:var(--accent)!important;
}
.cal-day.has-event{background:rgba(37,99,235,.075)!important;color:var(--accent)!important}
.cal-day i{background:linear-gradient(135deg,#2563eb,#6d45f5)!important}
.home-cal-dots i.water,.cal-event-dots i.water,.calendar-legend i.water{background:#2563eb!important}
.home-cal-dots i.gym,.cal-event-dots i.gym,.calendar-legend i.gym{background:#6d45f5!important}
.schedule-card{overflow:hidden}
.schedule-card .schedule-actions{gap:7px!important}

/* ---------- Activity Hub ---------- */
.hub-check-row,.hub-outcome-strip{
  background:#f8f9fc!important;
  border:1px solid rgba(10,21,63,.065)!important;
  border-radius:15px!important;
}
.hub-check-row{padding:12px!important}
.hub-check-copy strong{font-weight:600!important}
.hub-check-copy small{color:var(--muted)!important}
.hub-check-row.done .hub-check-icon,.hub-check-row.done .hub-check-state{color:var(--good)!important}
.hub-check-row.missing .hub-check-icon,.hub-check-row.missing .hub-check-state{color:var(--warn)!important}
.hub-outcome-strip.water{background:rgba(37,99,235,.065)!important;border-color:rgba(37,99,235,.12)!important}
.hub-outcome-strip.shore{background:rgba(109,69,245,.06)!important;border-color:rgba(109,69,245,.12)!important}
.hub-outcome-strip.cancelled{background:rgba(223,82,103,.055)!important;border-color:rgba(223,82,103,.11)!important}
.hub-weather-card{background:linear-gradient(145deg,#fff,#f6f8ff)!important}

/* ---------- Performance ---------- */
.performance-hero,.performance-overview,.athlete-performance-hero,.gym-cycle-hero,.gym-hero{
  background:linear-gradient(145deg,#fff 0%,#f6f8ff 66%,rgba(109,69,245,.045) 100%)!important;
}
.stat-row{grid-template-columns:100px 1fr 55px!important}
.performance-kpi,.perf-kpi,.gym-week-stat,.gym-cycle-week{
  background:#fff!important;
  border:1px solid rgba(10,21,63,.065)!important;
  box-shadow:none!important;
}
.gym-week-stat,.gym-cycle-week{border-radius:16px!important}
.gym-cycle-week{box-shadow:0 8px 20px rgba(17,36,79,.045)!important}
.gym-mini-progress{background:#eceff5!important}
.gym-mini-progress span{background:linear-gradient(90deg,#2563eb,#6d45f5)!important}
.gym-log-grid>div{background:#f7f8fc!important}
.gym-session-btn>span{background:var(--violet-soft)!important;color:var(--accent-2)!important}
.gym-session-btn>b{color:var(--accent-2)!important}

/* ---------- Team / crew / materials ---------- */
.crew-card,.sail-card,.gear-card{overflow:hidden}
.crew-edit-row{color:var(--accent)!important;border-color:rgba(10,21,63,.065)!important;font-weight:650!important}
.edit-btn{color:var(--accent)!important}
.sail-log{margin-top:12px!important}

/* ---------- Survey ---------- */
.survey-metric{background:#f8f9fc!important;border-color:rgba(10,21,63,.065)!important;border-radius:16px!important}
.survey-value{background:var(--violet-soft)!important;color:var(--accent-2)!important;border-radius:10px!important}
.survey-score span{background:#fff!important;border-color:rgba(10,21,63,.075)!important;color:var(--muted)!important}
.survey-score input:checked+span{background:linear-gradient(135deg,#2563eb,#6d45f5)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 6px 14px rgba(37,99,235,.14)!important}

/* ---------- Notices / attention ---------- */
.notice{
  background:rgba(37,99,235,.065)!important;
  color:var(--text)!important;
  border-left:3px solid var(--accent)!important;
  border-radius:0 13px 13px 0!important;
}
.danger-text{color:var(--bad)!important}

/* ---------- Modals ---------- */
.modal-backdrop{
  background:rgba(19,28,55,.20)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  backdrop-filter:blur(5px)!important;
}
.modal-card{
  background:#fff!important;
  border-radius:26px 26px 0 0!important;
  border-color:rgba(10,21,63,.065)!important;
  box-shadow:0 -22px 70px rgba(18,34,74,.15)!important;
}
.modal-head{background:rgba(255,255,255,.96)!important}
.modal-head h2{font-size:20px!important;font-weight:700!important;letter-spacing:-.035em!important}
.close-modal{background:#f5f7fb!important;box-shadow:none!important}

/* ---------- Menu ---------- */
.menu-group,.menu-section{
  background:#fff!important;
  border:1px solid rgba(10,21,63,.065)!important;
  border-radius:18px!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden;
}
.menu-item,.menuItem{border-color:rgba(10,21,63,.06)!important}

/* ---------- Auth ---------- */
.auth-card,.login-card{
  background:#fff!important;
  border:1px solid rgba(10,21,63,.065)!important;
  border-radius:24px!important;
  box-shadow:0 18px 50px rgba(17,36,79,.09)!important;
}

/* ---------- Mobile board rhythm ---------- */
@media(max-width:699px){
  .content{padding-left:12px!important;padding-right:12px!important}
  .card{padding:14px!important;border-radius:18px!important}
  .grid.two{gap:9px!important}
  .grid.two>.card{min-width:0}
  .quick-actions{gap:8px!important}
  .quick-actions button{min-height:54px!important;font-size:11px!important}
  .forecast-hero h2{font-size:31px!important}
  .bottom-nav{left:8px!important;right:8px!important;bottom:7px!important}
}
@media(max-width:390px){
  h1{font-size:24px!important}
  .content{padding-left:10px!important;padding-right:10px!important}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .card{padding:13px!important}
  .widget-title h3,.card h3{font-size:13px!important}
  .big-number{font-size:29px!important}
}

/* ---------- Accessibility / motion ---------- */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}