:root {
  --ink: #102b30;
  --muted: #62777a;
  --ocean: #0f5e69;
  --ocean-deep: #073941;
  --foam: #f4fbf9;
  --sand: #ead099;
  --coral: #ef765d;
  --card: #ffffff;
  --line: #dbe7e5;
  --shadow: 0 18px 45px rgba(9, 44, 50, .13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #edf4f2;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #edf4f2; }
body { min-height: 100vh; min-height: 100dvh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 1180px); min-height: 100vh; margin: 0 auto; background: var(--foam); position: relative; overflow: hidden; box-shadow: 0 0 70px rgba(14, 55, 60, .08); }
.topbar { height: 82px; padding: max(12px, env(safe-area-inset-top)) 22px 10px; display: flex; align-items: center; justify-content: space-between; background: rgba(249, 253, 251, .94); border-bottom: 1px solid rgba(16, 43, 48, .08); position: relative; z-index: 20; backdrop-filter: blur(14px); }
.preview-banner { min-height: 48px; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #eefef7; background: linear-gradient(90deg,#0b4652,#087a78); border-bottom: 1px solid rgba(255,255,255,.16); position: relative; z-index: 19; }
.preview-banner > div { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.preview-banner strong { color: #d7ff75; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.preview-banner span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.preview-banner a { flex: 0 0 auto; padding: 8px 12px; border-radius: 9px; color: #092b35; background: #d7ff75; font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.preview-mode main { min-height: calc(100vh - 130px); }
.preview-mode #mapView { height: calc(100vh - 130px); }
.preview-mode .content-view { min-height: calc(100vh - 130px); }
.preview-locked { position: relative; min-height: 180px; overflow: hidden; }
.preview-locked > * { filter: blur(2px); opacity: .32; pointer-events: none; user-select: none; }
.preview-lock-card { position: absolute !important; inset: 16px !important; z-index: 5; display: grid !important; place-content: center; justify-items: center; gap: 8px; padding: 22px; border: 1px solid #d7e4df; border-radius: 15px; color: #153b45; background: rgba(255,255,255,.96); filter: none !important; opacity: 1 !important; text-align: center; pointer-events: auto !important; }
.preview-lock-card strong { font: 700 22px/1.1 Georgia,serif; }
.preview-lock-card span { max-width: 330px; color: #657a80; font-size: 11px; line-height: 1.45; }
.preview-lock-card a { padding: 10px 14px; border-radius: 10px; color: #fff; background: #f36f4f; font-size: 11px; font-weight: 900; text-decoration: none; }
.preview-mode .premium-control { position: relative; opacity: .58; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; display: block; background: var(--ocean-deep); box-shadow: 0 7px 18px rgba(8,47,55,.18); }
.brand h1, .section-heading h2, .sheet-dialog h2, .spot-card h2 { font-family: Georgia, 'Times New Roman', serif; margin: 0; letter-spacing: -.03em; }
.brand h1 { font-size: 21px; }
.eyebrow { margin: 0 0 2px; text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 800; color: var(--ocean); }
.status-row { display: flex; align-items: center; gap: 8px; }
.status-pill { font-size: 12px; background: #e3f1eb; color: #326451; padding: 7px 10px; border-radius: 999px; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.status-pill.offline { background: #fff0dc; color: #895826; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #42a377; box-shadow: 0 0 0 3px rgba(66,163,119,.14); }
.offline .status-dot { background: #e49441; box-shadow: 0 0 0 3px rgba(228,148,65,.16); }
.icon-button, .round-button { border: 1px solid var(--line); color: var(--ink); background: white; box-shadow: 0 5px 14px rgba(16,43,48,.08); }
.icon-button { border-radius: 12px; height: 38px; padding: 0 13px; font-weight: 800; }
.install-button { color: var(--ocean); }
main { min-height: calc(100vh - 82px); }
.view { display: none; }
.view.active { display: block; }
#mapView { position: relative; height: calc(100vh - 82px); min-height: 610px; background: #126b76; }
.map-toolbar { position: absolute; z-index: 10; top: 18px; left: 18px; right: 18px; display: flex; gap: 10px; }
.search-box { flex: 1; height: 48px; padding: 0 16px; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; }
.search-box span { font-size: 25px; line-height: 0; color: var(--ocean); transform: rotate(-15deg); }
.search-box input { width: 100%; border: 0; background: none; outline: 0; color: var(--ink); }
.round-button { width: 48px; height: 48px; border-radius: 15px; font-size: 25px; color: var(--ocean); }
.map-canvas { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 16% 25%, rgba(255,255,255,.08) 0 1px, transparent 2px), linear-gradient(145deg, #0d5260, #167785); background-size: 26px 26px, auto; }
.map-canvas::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 0 30%, transparent 0 38px, rgba(255,255,255,.04) 40px 41px); opacity: .8; }
.map-canvas.online-map-active::before { opacity: 0; pointer-events: none; }
.global-map, .offline-map { position: absolute; inset: 0; }
.global-map { z-index: 1; background: #dce8e4; }
.offline-map { z-index: 2; background: #073f49; }
.online-map-active .offline-map { display: none; }
.offline-atlas-map { position: absolute; inset: 0; z-index: 1; background: #073f49; }
.offline-atlas-art { filter: saturate(.72) brightness(1.08) contrast(.94); }
.offline-world-title { position: absolute; z-index: 5; left: 22px; top: 92px; color: rgba(255,255,255,.9); letter-spacing: .13em; background: rgba(4,42,49,.78); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 9px 11px; box-shadow: 0 8px 24px rgba(2,24,29,.2); backdrop-filter: blur(8px); }
.offline-world-title b, .offline-world-title span { display: block; }
.offline-world-title b { font: 700 15px Georgia, serif; }
.offline-world-title span { margin-top: 3px; color: #c8e2dc; font-size: 7px; font-weight: 900; }
.offline-map-hint { position: absolute; z-index: 5; left: 50%; bottom: 104px; transform: translateX(-50%); padding: 7px 10px; border-radius: 999px; background: rgba(4,42,49,.82); color: rgba(255,255,255,.86); font-size: 9px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.offline-atlas-map .leaflet-control-zoom { margin-top: 142px; margin-right: 18px; border: 0; box-shadow: var(--shadow); }
.offline-atlas-map .leaflet-control-zoom a { color: var(--ocean-deep); border-color: var(--line); }
.offline-cluster-icon { background: transparent; border: 0; }
.offline-cluster-pin { width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; background: #ff704d; color: white; box-shadow: 0 5px 14px rgba(2,28,38,.32), 0 0 0 4px rgba(255,112,77,.18); white-space: nowrap; }
.offline-cluster-pin strong { font-size: 11px; line-height: 1; }
.offline-spot-tooltip { border: 0; border-radius: 8px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 10px; font-weight: 900; box-shadow: 0 4px 12px rgba(4,35,40,.18); }
.offline-spot-tooltip::before { border-right-color: rgba(255,255,255,.95); }
.global-map .leaflet-control-zoom { margin-bottom: 96px !important; }
.global-map .leaflet-control-attribution { margin-bottom: 76px !important; background: rgba(255,255,255,.88) !important; font-size: 9px !important; }
.global-map .leaflet-tooltip { border: 0; border-radius: 8px; color: var(--ink); font-weight: 800; box-shadow: 0 5px 14px rgba(16,43,48,.12); }
.search-results { position: absolute; z-index: 14; top: 73px; left: 18px; width: min(520px, calc(100% - 94px)); max-height: 260px; overflow: auto; background: white; border-radius: 14px; box-shadow: var(--shadow); padding: 5px; }
.search-results button { display: block; width: 100%; border: 0; background: white; color: var(--ink); padding: 11px 12px; text-align: left; border-radius: 10px; }
.search-results button:hover { background: #eef6f3; }
.search-results b, .search-results small { display: block; }
.search-results small { margin-top: 2px; color: var(--muted); }
.coast-art { position: absolute; top: 0; bottom: 0; right: 0; width: 72%; height: 100%; }
.ocean-text { position: absolute; top: 42%; left: 7%; color: rgba(255,255,255,.32); font: 700 13px/1.7 Georgia, serif; letter-spacing: .34em; text-align: center; transform: rotate(-7deg); }
.ocean-text span { display: block; }
.compass { position: absolute; left: 22px; top: 92px; color: rgba(255,255,255,.75); display: flex; flex-direction: column; align-items: center; font: 12px Georgia, serif; }
.compass span { font-size: 27px; line-height: .9; }
.map-style-switch { position: absolute; z-index: 9; top: 82px; right: 18px; padding: 4px; border-radius: 11px; background: rgba(255,255,255,.95); box-shadow: 0 6px 18px rgba(7,45,52,.15); }
.map-style-switch button { border: 0; background: transparent; color: var(--muted); padding: 8px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.map-style-switch button.active { background: var(--ink); color: white; }
.map-mode-badge { position: absolute; z-index: 7; bottom: 104px; left: 18px; border-radius: 999px; padding: 8px 11px; background: rgba(7,34,39,.82); color: white; font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); }
.map-add-button { position: absolute; z-index: 6; right: 18px; bottom: 105px; border: 0; border-radius: 999px; background: var(--ink); color: white; padding: 12px 17px; font-weight: 800; box-shadow: var(--shadow); }
.map-add-button span { font-size: 18px; margin-right: 3px; }
.gps-message { position: absolute; z-index: 8; top: 80px; left: 50%; transform: translateX(-50%); background: var(--ink); color: white; border-radius: 10px; padding: 9px 13px; font-size: 12px; box-shadow: var(--shadow); }
.spot-card { position: absolute; z-index: 12; left: 18px; right: 18px; bottom: 92px; max-width: 560px; margin: auto; padding: 20px; border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: 0 23px 60px rgba(0,29,35,.3); backdrop-filter: blur(12px); }
.card-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 24px; color: var(--muted); }
.spot-card h2 { font-size: 28px; }
.spot-meta { margin: 5px 0 16px; font-size: 13px; color: var(--muted); }
.spot-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 15px; overflow: hidden; }
.spot-stats div { padding: 10px; text-align: center; border-right: 1px solid var(--line); }
.spot-stats div:last-child { border: 0; }
.spot-stats strong, .spot-stats span { display: block; }
.spot-stats strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-stats span { color: var(--muted); font-size: 9px; margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }
.spot-card-actions { display: grid; gap: 9px; margin-top: 14px; }
.spot-card-actions .primary-button,.spot-card-actions .secondary-button { width: 100%; }
.primary-button { border: 0; background: var(--coral); color: white; border-radius: 12px; padding: 13px 18px; font-weight: 800; box-shadow: 0 8px 20px rgba(239,118,93,.23); }
.spot-card .primary-button { width: 100%; }
.primary-button.compact { padding: 11px 14px; font-size: 13px; }
.content-view { min-height: calc(100vh - 82px); padding: 32px 28px 120px; background: #f5faf8; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-heading h2, .sheet-dialog h2 { font-size: clamp(29px, 5vw, 42px); }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 22px; }
.summary-grid article { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 17px; box-shadow: 0 8px 22px rgba(14,50,55,.05); }
.summary-grid span, .summary-grid small { display: block; color: var(--muted); }
.summary-grid span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
.summary-grid strong { display: block; font: 700 26px/1.2 Georgia, serif; margin: 8px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-grid small { font-size: 11px; }
.filter-row { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 10px; margin-bottom: 19px; }
.filter-row label, .form-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
input, select, textarea { width: 100%; border: 1px solid #cfdfdc; border-radius: 11px; padding: 12px; color: var(--ink); background: white; outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(15,94,105,.1); }
.catch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.catch-item { display: grid; grid-template-columns: 88px 1fr auto; min-height: 112px; background: white; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; box-shadow: 0 7px 20px rgba(14,50,55,.04); }
.catch-photo { background: linear-gradient(145deg, #0d5964, #93c8c0); display: grid; place-items: center; color: rgba(255,255,255,.7); font: 700 34px Georgia, serif; overflow: hidden; }
.catch-photo img { width: 100%; height: 100%; object-fit: cover; }
.catch-body { padding: 14px; min-width: 0; }
.catch-body h3 { margin: 0; font: 700 21px Georgia, serif; }
.catch-body p { margin: 5px 0; color: var(--muted); font-size: 12px; }
.catch-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.catch-tags span { font-size: 10px; padding: 4px 7px; border-radius: 999px; background: #eef6f3; color: #426663; }
.catch-actions { padding: 9px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.catch-actions button { width: 32px; height: 32px; border: 0; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.share-catch { background: #e5f4ef; color: #087f82; font-size: 18px; font-weight: 900; }
.share-catch:hover { background: #d5eee7; transform: translateY(-1px); }
.delete-catch { background: transparent; color: #9aabaa; font-size: 20px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-icon { width: 62px; height: 62px; margin: auto; border-radius: 50%; display: grid; place-items: center; font: 38px Georgia, serif; background: #deeeea; color: var(--ocean); }
.empty-state h3 { color: var(--ink); margin-bottom: 4px; }
.privacy-note { background: #e4f1ec; color: #3d6659; border-radius: 13px; padding: 12px 14px; font-size: 13px; margin: -8px 0 19px; }
.privacy-note span { margin-right: 7px; }
.saved-spots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.saved-spot { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 17px; box-shadow: 0 7px 20px rgba(14,50,55,.04); }
.saved-spot header { display: flex; justify-content: space-between; gap: 8px; }
.saved-spot h3 { margin: 0; font: 700 20px Georgia, serif; }
.saved-spot p { color: var(--muted); font-size: 12px; min-height: 32px; }
.saved-spot small { color: var(--ocean); font-weight: 800; }
.saved-spot button { float: right; border: 0; background: none; color: #9b5550; }
.bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 1180px); height: 78px; padding: 7px max(16px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)); background: rgba(250,253,252,.96); border-top: 1px solid rgba(16,43,48,.1); display: grid; grid-template-columns: repeat(5,1fr); align-items: center; backdrop-filter: blur(16px); }
.nav-item { height: 57px; border: 0; background: none; color: #77908e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.nav-item span { font-size: 22px; line-height: 1; }
.nav-item b { font-size: 10px; }
.nav-item.active { color: var(--ocean); }
.nav-add { width: 54px; height: 54px; justify-self: center; border-radius: 50%; border: 5px solid #f5faf8; background: var(--coral); color: white; font-size: 28px; line-height: 1; box-shadow: 0 8px 19px rgba(239,118,93,.32); transform: translateY(-11px); }
.sheet-dialog { width: min(720px, calc(100% - 24px)); max-height: min(90vh, 860px); padding: 0; border: 0; border-radius: 25px; color: var(--ink); box-shadow: 0 30px 90px rgba(1,28,33,.35); }
.sheet-dialog::backdrop { background: rgba(4,28,32,.59); backdrop-filter: blur(4px); }
.sheet-dialog form, .dialog-panel { padding: 24px; overflow: auto; max-height: min(90vh, 860px); }
.dialog-handle { display: none; width: 48px; height: 5px; border-radius: 999px; background: #cedad8; margin: -10px auto 17px; }
.sheet-dialog header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 20px; }
.dialog-close { background: #eef4f2; color: var(--muted); border: 0; width: 38px; height: 38px; border-radius: 50%; font-size: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.full-button { width: 100%; margin-top: 20px; padding: 15px; }
.photo-picker input { display: none; }
#photoPrompt { border: 1px dashed #a9c4bf; border-radius: 12px; padding: 18px; text-align: center; color: var(--ocean); background: #f3f9f7; }
#photoPreview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.small-dialog { width: min(530px, calc(100% - 24px)); }
.option-list { display: grid; gap: 8px; }
.option-list button, .import-button, .map-provider-row { display: flex; flex-direction: row; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.map-provider-row { cursor: default; }
.option-list > * > span { width: 36px; height: 36px; border-radius: 10px; background: #e9f3f0; display: grid; place-items: center; font-size: 20px; }
.option-list div { display: flex; flex-direction: column; gap: 2px; }
.option-list small { color: var(--muted); font-weight: 500; }
.option-list .danger { color: #9b3935; }
.import-button input { display: none; }
.offline-explainer { background: #eef6f3; border-radius: 13px; padding: 13px; color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 0; }
.dialog-copy { color: var(--muted); font-size: 13px; line-height: 1.55; }
.token-field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.text-danger-button { width: 100%; border: 0; background: transparent; color: #9b3935; font-weight: 800; padding: 13px; margin-top: 6px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 95px; transform: translate(-50%, 20px); background: var(--ink); color: white; border-radius: 999px; padding: 11px 17px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .24s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) {
  #mapView { height: calc(100vh - 82px); }
  .coast-art { width: 62%; }
  .map-toolbar { max-width: 520px; }
  .spot-card { left: auto; right: 28px; bottom: 105px; width: 410px; }
}
@media (max-width: 680px) {
  .topbar { padding-left: 15px; padding-right: 12px; }
  .status-pill span:last-child { display: none; }
  .install-button { display: none !important; }
  .content-view { padding: 24px 15px 110px; }
  .summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
  .summary-grid article { padding: 12px 10px; }
  .summary-grid strong { font-size: 19px; }
  .summary-grid span { font-size: 9px; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .filter-row label:first-child { grid-column: 1 / -1; }
  .catch-list, .saved-spots { grid-template-columns: 1fr; }
  .catch-item { grid-template-columns: 78px 1fr auto; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 12px 9px; }
  .sheet-dialog { width: 100%; max-height: 91vh; margin: auto 0 0; border-radius: 25px 25px 0 0; }
  .sheet-dialog form, .dialog-panel { max-height: 91vh; padding: 23px 16px max(25px, env(safe-area-inset-bottom)); }
  .dialog-handle { display: block; }
  .offline-map-hint { bottom: 98px; }
  .offline-atlas-map .leaflet-control-zoom { margin-top: 137px; margin-right: 12px; }
  .map-style-switch { top: 79px; right: 12px; }
}

/* AnglerScout 4.0 — worldwide intelligence */
.profile-button { width: 40px; padding: 0; border-radius: 50%; color: #071f2b; background: var(--lime); border-color: transparent; }
.sync-pill.synced { color: #dcff8f; }
.map-filter-bar { position: absolute; z-index: 11; top: 78px; left: 18px; display: flex; gap: 7px; align-items: center; max-width: calc(100% - 170px); }
.map-filter-bar select, .discover-button { width: auto; min-height: 36px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.48); border-radius: 10px; background: rgba(255,255,255,.95); box-shadow: 0 7px 20px rgba(7,31,43,.16); color: #17343e; font-size: 11px; font-weight: 800; }
.map-filter-select { position: relative; display: flex; align-items: center; }
.map-filter-select > span { position: absolute; z-index: 1; top: 4px; left: 11px; color: #5c747b; font-size: 8px; font-weight: 900; letter-spacing: .08em; line-height: 1; text-transform: uppercase; pointer-events: none; }
.map-filter-select select { min-width: 150px; padding-top: 15px; padding-bottom: 4px; }
.map-filter-select select:disabled { color: #71858b; opacity: .86; }
.discover-button { border: 0; color: white; background: #0b7f80; white-space: nowrap; }
.discover-button.secondary { color: #17343e; background: #fff; }
.map-style-switch { top: 126px; }
.offline-world-title { top: 136px; }
.offline-atlas-map .leaflet-control-zoom { margin-top: 184px; }
.heading-actions { display: flex; gap: 8px; }
.forecast-view { background: radial-gradient(circle at 80% 0,rgba(198,243,91,.12),transparent 22%),linear-gradient(180deg,#071f2b 0,#0c4050 320px,#eef4f1 320px); }
.forecast-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; min-height: 176px; padding: 20px 6px 38px; color: white; }
.forecast-hero h2 { margin: 3px 0 8px; font-size: clamp(34px,6vw,58px); line-height: .98; letter-spacing: -.055em; }
.forecast-hero p { margin: 0; color: #b9d0d2; max-width: 590px; }
.forecast-hero label { width: min(340px,100%); color: #d5e5e4; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.forecast-hero label span { display: block; margin-bottom: 7px; }
.forecast-hero select { background: rgba(255,255,255,.12); color: white; border-color: rgba(255,255,255,.2); }
.forecast-hero select option { color: #102733; }
.forecast-location-picker { width: min(520px,100%); display: grid; grid-template-columns: minmax(150px,.8fr) minmax(210px,1.2fr); gap: 10px; }
.forecast-location-picker label { width: 100%; }
.forecast-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.forecast-panel { padding: 22px; border: 1px solid #dbe5e1; border-radius: 18px; background: white; box-shadow: 0 14px 34px rgba(7,31,43,.09); }
.forecast-panel.span-2 { grid-column: 1 / -1; }
.probability-panel { position: relative; overflow: hidden; background: radial-gradient(circle at 100% 0,rgba(198,243,91,.25),transparent 33%),#fff; }
.confidence-pill { padding: 6px 9px; border-radius: 999px; background: #e7f3ee; color: #187061; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.forecast-species { display: block; margin: 18px 0; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.forecast-species span { display: block; margin-bottom: 6px; }
.probability-ring { width: 160px; height: 160px; margin: 10px auto 18px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at center,#fff 58%,transparent 59%),conic-gradient(#0b9996 0 68%,#e5ece9 68%); box-shadow: inset 0 0 0 1px #e3ebe8; }
.probability-ring strong { font-size: 39px; line-height: 1; letter-spacing: -.06em; }
.probability-ring span { margin-top: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.probability-panel p { color: #536c74; line-height: 1.55; }
.forecast-factors { display: grid; gap: 7px; margin: 16px 0; }
.forecast-factors span { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 10px; background: #edf5f2; color: #4f686e; font-size: 11px; }
.forecast-factors b { color: #14333d; }
.pattern-panel { min-height: 340px; }
.forecast-chart { display: grid; gap: 13px; margin: 26px 0; }
.chart-row { display: grid; grid-template-columns: 105px 1fr 42px; align-items: center; gap: 10px; font-size: 11px; }
.chart-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-row i { height: 10px; overflow: hidden; border-radius: 999px; background: #e6eeeb; }
.chart-row i b { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg,#0b8f90,#c6f35b); }
.chart-row strong { text-align: right; }
.intelligence-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: white; background: radial-gradient(circle at 90% 10%,rgba(198,243,91,.18),transparent 27%),linear-gradient(130deg,#071f2b,#0e5660); }
.intelligence-card h3 { margin: 4px 0 8px; font-size: 25px; }
.intelligence-card p { margin: 0; color: #c2d7d5; }
.intelligence-card .secondary-button { flex: 0 0 auto; color: #071f2b; background: var(--lime); border: 0; }
.profile-settings { display: grid; gap: 10px; }
.profile-settings label { color: var(--muted); font-size: 11px; font-weight: 800; }
.profile-settings .share-check { flex-direction: row; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.profile-settings .share-check input { width: 20px; margin-top: 2px; }
.profile-settings .share-check strong,.profile-settings .share-check small { display: block; }
.profile-settings .share-check small { margin-top: 3px; color: var(--muted); font-weight: 500; }

@media (max-width: 820px) {
  .sync-pill { display: none; }
  .map-filter-bar { right: 16px; max-width: none; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .map-filter-bar select { min-width: 110px; }
  .map-filter-select select { min-width: 148px; }
  .forecast-hero { align-items: stretch; flex-direction: column; }
  .forecast-grid { grid-template-columns: 1fr; }
  .forecast-panel.span-2 { grid-column: auto; }
  .intelligence-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .status-row { gap: 5px; }
  #connectionStatus { display: none; }
  .install-button { display: none; }
  .notification-button { display: none; }
  .map-toolbar { top: 12px; }
  .map-filter-bar { top: 69px; left: 12px; right: 12px; }
  .map-style-switch { top: 118px; right: 12px; }
  .offline-world-title { top: 127px; left: 12px; }
  .section-heading { align-items: flex-start; }
  .heading-actions { flex-direction: column-reverse; }
  .forecast-view { padding-left: 16px; padding-right: 16px; }
  .condition-metrics { grid-template-columns: repeat(2,1fr); }
  .condition-metrics > div { border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .preview-banner { align-items: stretch; padding: 8px 12px; }
  .preview-banner > div { display: grid; gap: 1px; }
  .preview-banner span { max-width: 180px; }
  .preview-banner a { display: grid; place-items: center; padding: 7px 9px; }
  .preview-mode main { min-height: calc(100vh - 126px); }
  .preview-mode #mapView { height: calc(100vh - 126px); }
  .preview-mode .content-view { min-height: calc(100vh - 126px); }
}

/* AnglerScout 2.0 — modern, playful visual system */
:root {
  --ink: #10213b;
  --muted: #66758c;
  --ocean: #067e87;
  --ocean-deep: #073d55;
  --foam: #f7f9ff;
  --sand: #ffd465;
  --coral: #ff667d;
  --purple: #7357ff;
  --lime: #c9f46b;
  --line: #dfe7ee;
  --shadow: 0 18px 55px rgba(38, 54, 92, .13);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif;
}
html, body { background: radial-gradient(circle at 7% 4%, #d8fff4 0, transparent 28%), radial-gradient(circle at 95% 12%, #ebe4ff 0, transparent 24%), #eef2f8; }
.app-shell { background: var(--foam); box-shadow: 0 0 85px rgba(23, 41, 77, .12); }
.topbar { background: rgba(252,254,255,.9); border-bottom: 1px solid rgba(59,77,112,.08); box-shadow: 0 10px 35px rgba(40,57,91,.05); }
.brand-mark { border-radius: 15px; transform: rotate(-3deg); box-shadow: 0 8px 22px rgba(10,78,91,.22); transition: transform .25s ease; }
.brand:hover .brand-mark { transform: rotate(4deg) scale(1.06); }
.brand h1, .section-heading h2, .sheet-dialog h2, .spot-card h2, .club-hero h3, .panel-title h3, .challenge-card h3, .catch-body h3, .saved-spot h3 { font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 900; letter-spacing: -.045em; }
.brand h1 { font-size: 23px; background: linear-gradient(100deg, var(--ocean-deep), var(--purple)); -webkit-background-clip: text; color: transparent; }
.eyebrow { letter-spacing: .1em; font-size: 9px; font-weight: 950; }
.status-pill { background: #e7fff4; color: #25704f; border: 1px solid #cdf1df; box-shadow: 0 5px 15px rgba(60,151,108,.08); }
.icon-button, .round-button { border: 0; box-shadow: 0 7px 20px rgba(30,49,87,.1); transition: transform .2s ease, box-shadow .2s ease; }
.icon-button:hover, .round-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(30,49,87,.16); }
.primary-button { background: linear-gradient(135deg, #ff667d, #ff845c); border-radius: 14px; box-shadow: 0 10px 25px rgba(255,102,125,.28); transition: transform .2s ease, box-shadow .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,102,125,.34); }
.primary-button:active { transform: translateY(0) scale(.98); }
.secondary-button { border: 0; background: white; border-radius: 14px; box-shadow: 0 8px 20px rgba(34,53,88,.09); transition: transform .2s ease; }
.secondary-button:hover { transform: translateY(-2px); }
.content-view { background: radial-gradient(circle at 90% 0, rgba(115,87,255,.07), transparent 22%), radial-gradient(circle at 2% 18%, rgba(24,211,173,.08), transparent 24%), #f7f9fc; }
.summary-grid article, .catch-item, .saved-spot { border: 0; box-shadow: 0 12px 32px rgba(39,56,91,.08); }
.summary-grid article:nth-child(1) { background: linear-gradient(145deg, #ffffff, #eafff7); }
.summary-grid article:nth-child(2) { background: linear-gradient(145deg, #ffffff, #fff5df); }
.summary-grid article:nth-child(3) { background: linear-gradient(145deg, #ffffff, #f0ebff); }
.map-add-button { background: linear-gradient(135deg, #10213b, #7357ff); box-shadow: 0 12px 27px rgba(31,37,79,.28); }
.bottom-nav { border: 0; background: rgba(255,255,255,.9); box-shadow: 0 -12px 40px rgba(29,44,78,.1); }
.nav-item { border-radius: 14px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-item:hover { transform: translateY(-2px); background: #f0f6f7; }
.nav-item.active { color: var(--purple); }
.nav-add { border-color: #f7f9fc; background: linear-gradient(145deg, #ff5f7a, #ff875b); box-shadow: 0 9px 23px rgba(255,95,122,.4); }
.club-hero { background: radial-gradient(circle at 78% 20%, rgba(201,244,107,.28), transparent 25%), radial-gradient(circle at 10% 100%, rgba(115,87,255,.4), transparent 34%), linear-gradient(120deg, #063b53, #057c86 62%, #0b9b8c); box-shadow: 0 22px 52px rgba(4,82,96,.24); }
.club-hero::before { border-width: 18px; border-color: rgba(255,255,255,.06); animation: orbit-drift 8s ease-in-out infinite; }
.club-hero::after { border-width: 2px; border-color: rgba(201,244,107,.14); animation: orbit-drift 10s ease-in-out infinite reverse; }
.club-hero h3 { letter-spacing: -.055em; }
.champion-card { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.champion-card > span { background: linear-gradient(145deg, #fff2aa, #f5b938); animation: crown-bounce 3s ease-in-out infinite; }
.feed-panel, .leaderboard-card, .achievement-card { border: 0; box-shadow: 0 15px 42px rgba(39,56,91,.09); }
.message-composer { border: 0; background: linear-gradient(145deg, #f1fbf7, #f4f1ff); }
.composer-avatar, .feed-avatar { background: linear-gradient(145deg, var(--ocean), var(--purple)); box-shadow: 0 6px 14px rgba(48,64,123,.2); }
.feed-bubble { border: 0; background: #f7f9fd; box-shadow: inset 0 0 0 1px rgba(51,70,103,.06); }
.catch-post { background: linear-gradient(145deg, #effcf6, #f4f0ff); box-shadow: inset 0 0 0 1px rgba(21,133,132,.12); }
.catch-post-title > span { background: linear-gradient(145deg, #ff667d, #ff9b57); transform: rotate(-5deg); }
.reaction-row { display: flex; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(86,105,134,.1); }
.reaction-row button { border: 0; border-radius: 999px; padding: 6px 9px; background: white; color: #46546a; font-size: 11px; box-shadow: 0 3px 10px rgba(42,58,89,.08); transition: transform .15s ease, background .15s ease; }
.reaction-row button:hover { transform: scale(1.08) rotate(-2deg); background: #fff5d9; }
.reaction-row b { font-size: 9px; }
.leader-row { transition: transform .18s ease, background .18s ease; }
.leader-row:hover { transform: translateX(3px); background: #f3f6fb; }
.leader-row:first-child { background: linear-gradient(100deg, #fff8db, #fffdf5); border-color: #f4d87f; }
.challenge-card { background: linear-gradient(135deg, #ff617d, #ff8a58 65%, #ffbd51); box-shadow: 0 15px 35px rgba(241,97,102,.28); }
.challenge-icon { animation: flag-wave 2.8s ease-in-out infinite; }
.achievement span { transition: transform .2s ease; }
.achievement.unlocked span { background: linear-gradient(145deg, #fff5c9, #ffe28a); box-shadow: 0 7px 16px rgba(222,174,60,.2); }
.achievement:hover span { transform: translateY(-3px) rotate(4deg); }
.level-pill { background: linear-gradient(100deg, #dfffe7, #e6ddff); color: #4f3cc6; }
.crew-pill { padding: 6px 8px; border-radius: 999px; background: #ebe7ff; color: #5a45d0; font-size: 8px; font-weight: 950; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }

.world-stage { position: relative; overflow: hidden; margin-bottom: 17px; padding: 24px; border-radius: 25px; color: white; background: radial-gradient(circle at 15% 20%, rgba(76,229,196,.18), transparent 24%), radial-gradient(circle at 86% 14%, rgba(255,100,147,.2), transparent 28%), linear-gradient(125deg, #101b38 0, #1e2454 52%, #33236b 100%); box-shadow: 0 22px 55px rgba(25,27,67,.27); }
.world-stage::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 25px 25px; mask-image: linear-gradient(to right, transparent, black 22%, black 78%, transparent); }
.world-stage > * { position: relative; z-index: 1; }
.world-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.world-title { display: flex; align-items: center; gap: 14px; }
.globe-orbit { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 56px; border: 2px solid rgba(201,244,107,.8); border-radius: 50%; color: var(--lime); font-size: 34px; box-shadow: inset 0 0 0 6px rgba(201,244,107,.08), 0 0 24px rgba(201,244,107,.16); animation: globe-pulse 3.5s ease-in-out infinite; }
.world-title .eyebrow.neon { color: var(--lime); }
.world-title h3 { margin: 2px 0 5px; font-size: clamp(25px,4vw,38px); line-height: 1; letter-spacing: -.05em; }
.world-title p { margin: 0; color: rgba(255,255,255,.62); font-size: 11px; }
.world-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.season-pill { padding: 7px 10px; border-radius: 999px; color: #d9ff8f; background: rgba(201,244,107,.09); border: 1px solid rgba(201,244,107,.25); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.world-periods { width: 220px; margin: 0; background: rgba(255,255,255,.08); }
.world-periods button { color: rgba(255,255,255,.56); }
.world-periods button.active { color: #151d3c; background: var(--lime); box-shadow: 0 5px 15px rgba(201,244,107,.18); }
.world-stage-body { display: grid; grid-template-columns: minmax(390px,1.15fr) minmax(330px,.85fr); gap: 24px; align-items: stretch; }
.world-podium { display: flex; justify-content: center; align-items: end; gap: 8px; min-height: 275px; padding-top: 20px; }
.podium-person { width: 31%; min-width: 105px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; }
.podium-crown { min-height: 25px; color: #c9f46b; font-size: 20px; font-weight: 950; }
.podium-avatar { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.18); font-size: 30px; box-shadow: 0 12px 28px rgba(4,5,20,.28); transform: rotate(-3deg); }
.podium-person.first .podium-avatar { width: 84px; height: 84px; border-radius: 28px; font-size: 38px; background: linear-gradient(145deg, rgba(201,244,107,.28), rgba(255,211,93,.12)); border-color: rgba(201,244,107,.45); transform: translateY(-8px) rotate(3deg); }
.podium-person strong { margin-top: 9px; font-size: 12px; }
.podium-person small { color: rgba(255,255,255,.5); font-size: 8px; }
.podium-person > b { margin: 5px 0 7px; color: var(--lime); font-size: 11px; }
.podium-person i { width: 100%; height: 70px; border-radius: 14px 14px 5px 5px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.08); }
.podium-person.first i { height: 105px; background: linear-gradient(180deg, rgba(201,244,107,.2), rgba(201,244,107,.04)); }
.podium-person.third i { height: 52px; }
.world-rank-board { padding: 15px; border-radius: 19px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); }
.world-board-label { display: flex; justify-content: space-between; margin: 0 3px 9px; color: white; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.world-board-label small { color: rgba(255,255,255,.46); font-size: 8px; }
.global-leaderboard-list { display: grid; gap: 4px; }
.global-rank-row { display: grid; grid-template-columns: 22px 31px 1fr auto; align-items: center; gap: 8px; min-height: 39px; padding: 5px 8px; border-radius: 10px; color: rgba(255,255,255,.72); transition: background .18s ease, transform .18s ease; }
.global-rank-row:hover { background: rgba(255,255,255,.08); transform: translateX(3px); }
.global-rank-row > span { color: rgba(255,255,255,.38); text-align: center; font-size: 9px; font-weight: 900; }
.global-rank-row > b { font-size: 19px; }
.global-rank-row > div { min-width: 0; }
.global-rank-row strong, .global-rank-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-rank-row strong { color: white; font-size: 10px; }
.global-rank-row small { color: rgba(255,255,255,.44); font-size: 7px; }
.global-rank-row em { color: var(--lime); font-style: normal; font-size: 12px; font-weight: 950; }
.global-rank-row em small { display: inline; color: rgba(255,255,255,.4); }
.global-rank-row.is-me { background: rgba(201,244,107,.12); box-shadow: inset 0 0 0 1px rgba(201,244,107,.2); }
.global-my-rank { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin-top: 9px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(100deg, var(--lime), #87ffd4); color: #16223b; }
.global-my-rank span { font-size: 7px; font-weight: 950; letter-spacing: .1em; }
.global-my-rank strong { grid-row: 1 / 3; grid-column: 2; font-size: 25px; line-height: 1; }
.global-my-rank small { color: #3e5a5d; font-size: 8px; }
@keyframes orbit-drift { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(-18px,16px,0) rotate(8deg); } }
@keyframes crown-bounce { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes flag-wave { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg) translateY(-2px); } }
@keyframes globe-pulse { 0%,100% { transform: scale(1); box-shadow: inset 0 0 0 6px rgba(201,244,107,.08), 0 0 24px rgba(201,244,107,.16); } 50% { transform: scale(1.04); box-shadow: inset 0 0 0 3px rgba(201,244,107,.15), 0 0 35px rgba(201,244,107,.26); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 850px) {
  .world-stage-body { grid-template-columns: 1fr; }
  .world-podium { min-height: 240px; }
}
@media (max-width: 680px) {
  .world-stage { padding: 18px 14px; border-radius: 21px; }
  .world-stage-head { flex-direction: column; }
  .world-controls { width: 100%; align-items: stretch; }
  .world-periods { width: 100%; }
  .world-title { align-items: flex-start; }
  .globe-orbit { width: 45px; height: 45px; flex-basis: 45px; font-size: 27px; }
  .world-title h3 { font-size: 25px; }
  .world-podium { gap: 3px; min-height: 230px; padding-top: 5px; }
  .podium-person { min-width: 0; }
  .podium-avatar { width: 55px; height: 55px; border-radius: 19px; font-size: 25px; }
  .podium-person.first .podium-avatar { width: 67px; height: 67px; border-radius: 22px; font-size: 31px; }
  .podium-person strong { max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar { padding-left: 11px; }
  .brand { gap: 8px; }
  .brand-mark { width: 42px; height: 42px; }
}
@media (max-width: 410px) {
  .brand .eyebrow { display: none; }
  .brand h1 { font-size: 19px; }
  .status-pill { padding: 7px; }
  .section-heading h2 { font-size: 30px; }
}

/* AnglerScout social experience */
.notification-button { position: relative; width: 40px; padding: 0; color: var(--ocean); font-size: 14px; }
.notification-button > span { display: block; width: 17px; height: 17px; margin: auto; border: 2px solid currentColor; border-radius: 50% 50% 46% 46%; color: transparent; position: relative; }
.notification-button > span::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -5px; height: 3px; border-radius: 50%; background: var(--ocean); }
.notification-button b { position: absolute; top: -6px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--coral); color: white; border: 2px solid white; font-size: 9px; }
.nav-item { position: relative; }
.nav-item i { position: absolute; top: 5px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px white; }
.secondary-button { border: 1px solid #c9dcda; background: white; color: var(--ocean); border-radius: 12px; padding: 11px 14px; font-weight: 800; box-shadow: 0 5px 14px rgba(16,43,48,.05); }
.share-check { flex-direction: row !important; align-items: center; gap: 9px !important; border: 1px solid var(--line); background: #f1f8f5; border-radius: 12px; padding: 12px; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.share-check input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--ocean); }
.share-check span { font-size: 12px; line-height: 1.35; }
.profile-settings { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 20px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #f7fbfa; }
.profile-settings .eyebrow { grid-column: 1 / -1; }
.profile-settings label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.profile-settings input { padding: 10px; }
.community-view { background: linear-gradient(180deg, #eff8f5 0, #f8fbfa 360px); }
.community-heading { align-items: center; }
.community-actions { display: flex; gap: 8px; }
.community-switch-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: -8px 0 18px; }
.community-switch-row > label { min-width: min(320px, 55%); display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.community-switch-row select { min-width: 0; padding: 10px 34px 10px 11px; }
.member-stack { display: flex; flex-direction: row-reverse; justify-content: flex-end; padding-left: 10px; }
.member-avatar { width: 35px; height: 35px; margin-left: -9px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #f5faf8; background: var(--ocean-deep); color: white; font-size: 11px; font-weight: 900; box-shadow: 0 4px 12px rgba(9,45,51,.14); }
.member-avatar:nth-child(2n) { background: var(--coral); }
.member-avatar:nth-child(3n) { background: #d49f38; }
.member-more { background: #dcebe7; color: var(--ocean); }
.club-hero { min-height: 174px; padding: 30px; margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; border-radius: 24px; color: white; background: radial-gradient(circle at 79% 30%, rgba(238,203,118,.22), transparent 28%), linear-gradient(125deg, #073a43, #0b6873); box-shadow: 0 18px 40px rgba(7,56,64,.2); }
.club-hero::before, .club-hero::after { content: ''; position: absolute; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: 12%; top: -88px; }
.club-hero::after { width: 280px; height: 280px; right: -100px; top: 42px; }
.club-hero > * { position: relative; z-index: 1; }
.club-hero h3 { margin: 2px 0 7px; font: 700 clamp(30px,5vw,48px)/1 Georgia, serif; letter-spacing: -.035em; }
.club-hero p { margin: 0; color: rgba(255,255,255,.72); }
.eyebrow.light { color: #f4d38a; }
.champion-card { min-width: 215px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.champion-card > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #082f37; background: linear-gradient(145deg, #ffe7a4, #d9a83c); font-size: 28px; box-shadow: 0 7px 20px rgba(0,0,0,.18); }
.champion-card small, .champion-card strong { display: block; }
.champion-card small { color: rgba(255,255,255,.66); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.champion-card strong { margin-top: 3px; font-size: 17px; }
.community-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(285px,.8fr); gap: 17px; align-items: start; }
.feed-panel, .leaderboard-card, .achievement-card { border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 10px 28px rgba(14,50,55,.06); }
.feed-panel { padding: 19px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.panel-title h3 { margin: 0; font: 700 22px Georgia, serif; }
.live-badge { padding: 6px 9px; border-radius: 999px; background: #e6f4ed; color: #2d7658; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.message-composer { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 12px; margin-bottom: 17px; border-radius: 15px; background: #f2f8f6; border: 1px solid #d9e8e4; }
.composer-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--ocean); font-weight: 900; }
.composer-fields textarea { min-height: 54px; padding: 9px 10px; resize: vertical; background: white; }
.composer-fields > img { max-width: 160px; max-height: 120px; margin-top: 8px; border-radius: 10px; object-fit: cover; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.photo-action { color: var(--ocean); font-size: 11px; font-weight: 900; cursor: pointer; }
.photo-action input { display: none; }
.community-feed { display: grid; gap: 12px; max-height: 610px; overflow: auto; padding-right: 3px; }
.feed-item { display: grid; grid-template-columns: 38px 1fr; gap: 10px; }
.feed-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #dbe9e6; color: var(--ocean); font-size: 11px; font-weight: 900; }
.feed-bubble { min-width: 0; border: 1px solid var(--line); border-radius: 4px 15px 15px 15px; padding: 12px 13px; }
.feed-meta { display: flex; justify-content: space-between; gap: 9px; margin-bottom: 5px; }
.feed-meta strong { font-size: 12px; }
.feed-meta time { color: var(--muted); font-size: 9px; }
.feed-bubble p { margin: 0; color: #445d5d; font-size: 12px; line-height: 1.5; }
.feed-photo { width: 100%; max-height: 260px; object-fit: cover; margin-top: 10px; border-radius: 11px; }
.catch-post { border-color: #c9e0db; background: linear-gradient(145deg, #f6fbf9, #eef7f4); }
.catch-post-title { display: flex; align-items: center; gap: 9px; margin: 4px 0 8px; }
.catch-post-title span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--coral); color: white; font-size: 20px; }
.catch-post-title h4 { margin: 0; font: 700 19px Georgia, serif; }
.catch-post-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.catch-post-stats span { padding: 4px 7px; border-radius: 999px; background: white; color: #426663; border: 1px solid #dce8e5; font-size: 9px; font-weight: 800; }
.coordinate-link { display: inline-flex; margin-top: 9px; color: var(--ocean); font-size: 10px; font-weight: 900; text-decoration: none; }
.competition-rail { display: grid; gap: 14px; }
.leaderboard-card, .achievement-card { padding: 17px; }
.period-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 11px; background: #eef5f3; }
.period-tabs button { border: 0; border-radius: 8px; padding: 8px 4px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 900; }
.period-tabs button.active { background: white; color: var(--ocean); box-shadow: 0 3px 9px rgba(13,55,60,.1); }
.leaderboard-list { display: grid; gap: 7px; }
.leader-row { display: grid; grid-template-columns: 28px 34px 1fr auto; align-items: center; gap: 8px; padding: 8px; border-radius: 11px; }
.leader-row:first-child { background: #fff8e5; border: 1px solid #f0dca7; }
.leader-rank { color: var(--muted); text-align: center; font: 700 16px Georgia, serif; }
.leader-row:first-child .leader-rank { color: #bd861d; }
.leader-mini-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ocean-deep); color: white; font-size: 10px; font-weight: 900; }
.leader-info { min-width: 0; }
.leader-info strong, .leader-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-info strong { font-size: 11px; }
.leader-info small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.leader-score { text-align: right; }
.leader-score strong, .leader-score small { display: block; }
.leader-score strong { color: var(--ocean); font: 700 18px Georgia, serif; }
.leader-score small { color: var(--muted); font-size: 8px; }
.leaderboard-note { margin: 11px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.challenge-card { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px; border-radius: 18px; color: white; background: linear-gradient(135deg, #df684f, #f08a5f); box-shadow: 0 10px 25px rgba(226,103,80,.2); }
.challenge-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.16); font-size: 24px; }
.challenge-card .eyebrow { color: #ffe9c2; }
.challenge-card h3 { margin: 1px 0 4px; font: 700 20px Georgia, serif; }
.challenge-card p { margin: 0; color: rgba(255,255,255,.8); font-size: 10px; }
.progress-track { height: 6px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.2); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: white; }
.level-pill { padding: 6px 8px; border-radius: 999px; background: #e4f1ed; color: var(--ocean); font-size: 9px; font-weight: 900; }
.achievement-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.achievement { text-align: center; opacity: .35; }
.achievement.unlocked { opacity: 1; }
.achievement span { width: 40px; height: 40px; margin: auto; display: grid; place-items: center; border-radius: 12px; background: #e8f3f0; font-size: 19px; }
.achievement.unlocked span { background: #fff0c8; box-shadow: inset 0 0 0 1px #ecd89e; }
.achievement small { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; font-weight: 800; }
.streak-copy { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; text-align: center; }
.community-empty { border: 1px dashed #b9d2cd; border-radius: 20px; background: white; }
.join-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.join-divider::before, .join-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.join-row { display: flex; gap: 8px; }
.invite-code-card { padding: 22px; margin: 17px 0; border-radius: 17px; text-align: center; background: linear-gradient(145deg, #073d46, #0b6974); color: white; }
.invite-code-card small, .invite-code-card span { display: block; color: rgba(255,255,255,.7); }
.invite-code-card small { text-transform: uppercase; letter-spacing: .12em; }
.invite-code-card strong { display: block; margin: 7px 0; font: 700 32px Georgia, serif; letter-spacing: .08em; }
.invite-code-card span { font-size: 11px; }
.invite-code-card + .full-button { margin-top: 0; }
.secondary-button.full-button { margin-top: 8px; }
.notification-list { display: grid; gap: 8px; max-height: 430px; overflow: auto; }
.notification-item { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 11px; border-radius: 13px; border: 1px solid var(--line); }
.notification-item.unread { background: #eff8f5; border-color: #c8dfd9; }
.notification-item > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: white; font-size: 18px; }
.notification-item strong, .notification-item small { display: block; }
.notification-item strong { font-size: 11px; }
.notification-item p { margin: 3px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.notification-item small { color: #8aa09e; font-size: 8px; }
@media (max-width: 680px) {
  .community-heading { align-items: flex-start; }
  .community-actions { flex-direction: column-reverse; }
  .community-actions button { padding: 9px 10px; font-size: 10px; }
  .community-switch-row { align-items: flex-end; }
  .community-switch-row > label { min-width: 0; flex: 1; flex-direction: column; align-items: stretch; gap: 5px; }
  .club-hero { padding: 23px 20px; flex-direction: column; align-items: stretch; }
  .champion-card { min-width: 0; }
  .community-layout { grid-template-columns: 1fr; }
  .community-feed { max-height: none; }
  .profile-settings { grid-template-columns: 1fr; }
  .profile-settings .eyebrow { grid-column: 1; }
}

/* Worldwide leagues + Adventure Hub */
.adventure-button { border: 0; border-radius: 12px; padding: 11px 14px; background: linear-gradient(135deg, #7357ff, #aa4ff1); color: white; font-weight: 900; box-shadow: 0 9px 20px rgba(115,87,255,.24); cursor: pointer; }
.ranking-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.ranking-table-card { padding: 14px; background: linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); }
.ranking-card-title, .ranking-card-title > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ranking-card-title { min-height: 48px; margin-bottom: 8px; }
.ranking-card-title small, .ranking-card-title h4 { display: block; }
.ranking-card-title small { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ranking-card-title h4 { margin: 2px 0 0; color: white; font: 700 18px/1.1 Georgia,serif; }
.ranking-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #ff8e68, #ec5f70); box-shadow: 0 7px 17px rgba(235,94,104,.24); }
.ranking-icon.community-icon { background: linear-gradient(145deg, #c9f46b, #6fdda1); color: #182342; box-shadow: 0 7px 17px rgba(113,222,159,.2); }
.see-all-button { border: 0; background: transparent; color: var(--lime); padding: 7px 2px; font-size: 9px; font-weight: 950; cursor: pointer; white-space: nowrap; }
.ranking-table-card .global-rank-row { min-height: 35px; grid-template-columns: 20px 28px 1fr auto; padding: 4px 6px; }
.ranking-table-card .global-rank-row > b { font-size: 17px; }
.ranking-table-card .global-rank-row em { font-size: 11px; }
.global-rank-row > b, .championship-row > b { font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; }
.ranking-table-card .global-my-rank { min-height: 48px; }
.ranking-dialog { width: min(620px,calc(100% - 24px)); }
.dialog-periods { margin: 4px 0 13px; }
.world-ranking-full-list { max-height: min(580px,62vh); overflow: auto; display: grid; gap: 4px; padding-right: 4px; }
.world-ranking-full-list .global-rank-row { grid-template-columns: 28px 38px 1fr auto; min-height: 52px; padding: 7px 10px; border: 1px solid #deebe8; color: var(--muted); background: #f7fbfa; }
.world-ranking-full-list .global-rank-row:hover { background: #eef7f4; }
.world-ranking-full-list .global-rank-row > span { color: var(--muted); }
.world-ranking-full-list .global-rank-row strong { color: var(--ink); font-size: 12px; }
.world-ranking-full-list .global-rank-row small { color: var(--muted); font-size: 9px; }
.world-ranking-full-list .global-rank-row em { color: #5a46e3; font-size: 15px; }
.world-ranking-full-list .global-rank-row em small { color: var(--muted); }
.world-ranking-full-list .global-rank-row.is-me { background: #eefbe2; border-color: #bddd7f; }

.adventures-view { padding-bottom: 120px; background: radial-gradient(circle at 92% 2%, rgba(115,87,255,.1), transparent 280px), linear-gradient(180deg,#f0fbf8 0,#faf9ff 520px,#f7fbfa 100%); }
.adventure-heading { align-items: center; }
.adventure-hero { min-height: 235px; padding: 35px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 25px; overflow: hidden; position: relative; border-radius: 27px; color: white; background: radial-gradient(circle at 16% 5%, rgba(201,244,107,.25), transparent 26%), radial-gradient(circle at 91% 80%, rgba(255,118,99,.3), transparent 32%), linear-gradient(125deg,#101d48,#5445bc 65%,#8359e9); box-shadow: 0 22px 50px rgba(64,49,146,.25); }
.adventure-hero::after { content: ''; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(circle,white 1.4px,transparent 1.6px); background-size: 38px 38px; mask-image: linear-gradient(90deg,transparent,#000); }
.adventure-hero > * { position: relative; z-index: 1; }
.adventure-hero h3 { max-width: 650px; margin: 5px 0 11px; font: 700 clamp(32px,5vw,55px)/.98 Georgia,serif; letter-spacing: -.04em; }
.adventure-hero p { max-width: 600px; margin: 0; color: rgba(255,255,255,.73); line-height: 1.55; }
.hero-bolt { position: absolute; right: -5px; top: -58px; color: rgba(201,244,107,.09); font-size: 260px; transform: rotate(7deg); }
.adventure-score { min-width: 195px; padding: 22px 24px; text-align: center; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: rgba(255,255,255,.1); backdrop-filter: blur(13px); }
.adventure-score small, .adventure-score strong, .adventure-score span { display: block; }
.adventure-score small { color: rgba(255,255,255,.62); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.adventure-score strong { margin: 7px 0 2px; color: var(--lime); font: 800 48px/1 Georgia,serif; }
.adventure-score span { font-size: 11px; font-weight: 900; }
.adventure-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.adventure-card { min-width: 0; padding: 19px; border: 1px solid #dceae7; border-radius: 21px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(26,58,76,.07); }
.adventure-card.span-2 { grid-column: 1 / -1; }
.adventure-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.adventure-card-head h3 { margin: 1px 0 0; font: 700 23px Georgia,serif; }
.mini-action { border: 1px solid #d7e6e2; border-radius: 10px; padding: 8px 10px; background: #f4f9f7; color: var(--ocean); font-size: 9px; font-weight: 950; cursor: pointer; }
.mini-empty { padding: 25px 10px; color: var(--muted); text-align: center; font-size: 10px; }

.conditions-card { background: linear-gradient(120deg,#ffffff,#effafa); }
.conditions-select { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.conditions-select select { max-width: 330px; }
.conditions-select span { color: var(--muted); font-size: 9px; }
.condition-metrics { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.condition-metrics > div { min-width: 0; padding: 15px 10px; text-align: center; border: 1px solid #dcebe7; border-radius: 15px; background: white; }
.condition-metrics span, .condition-metrics strong, .condition-metrics small { display: block; }
.condition-metrics span { font-size: 19px; }
.condition-metrics strong { margin: 6px 0 3px; color: var(--ocean); font-size: 18px; }
.condition-metrics small { color: var(--muted); font-size: 8px; }
.tide-metric.high-tide { background: linear-gradient(145deg,#eefbff,#fff); border-color: #cbe8ee; }
.tide-metric.low-tide { background: linear-gradient(145deg,#f3efff,#fff); border-color: #ded4f7; }
.tide-metric.high-tide > span, .tide-metric.high-tide > strong { color: #07849a; }
.tide-metric.low-tide > span, .tide-metric.low-tide > strong { color: #6d54cc; }
.marine-attribution { margin: 11px 2px 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.marine-attribution a { color: var(--ocean); font-weight: 900; }

.mission-streak, .collection-progress, .eco-badge { padding: 7px 9px; border-radius: 999px; background: #eff8e2; color: #557523; font-size: 9px; font-weight: 950; }
.mission-list, .tournament-list, .gear-list, .trip-list { display: grid; gap: 8px; }
.mission-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid #e1ebe9; border-radius: 14px; }
.mission-item > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #efeaff; color: #684fe0; font-size: 18px; }
.mission-item > div { min-width: 0; }
.mission-item strong, .mission-item small, .mission-item > b small { display: block; }
.mission-item strong { font-size: 11px; }
.mission-item small { color: var(--muted); font-size: 8px; }
.mission-item > b { color: #684fe0; text-align: right; font-size: 12px; }
.mission-item > b small { margin-top: 2px; }
.mission-item.complete { border-color: #c7e69c; background: #f7fce9; }
.mission-bar { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e8eeee; }
.mission-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7357ff,#b455ed); }

.tournament-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; padding: 10px; border-radius: 14px; background: #f8f6ff; border: 1px solid #e8e0ff; }
.tournament-date, .trip-date { width: 42px; padding: 6px 2px; text-align: center; border-radius: 11px; background: #7357ff; color: white; }
.tournament-date strong, .tournament-date small, .trip-date strong, .trip-date small { display: block; }
.tournament-date strong, .trip-date strong { font: 800 18px Georgia,serif; }
.tournament-date small, .trip-date small { font-size: 7px; font-weight: 900; text-transform: uppercase; }
.tournament-item > div:nth-child(2) > span { color: #7557d9; font-size: 7px; font-weight: 950; text-transform: uppercase; }
.tournament-item > div:nth-child(2) > strong, .tournament-item > div:nth-child(2) > small { display: block; }
.tournament-item > div:nth-child(2) > strong { margin: 2px 0; font-size: 11px; }
.tournament-item > div:nth-child(2) > small { color: var(--muted); font-size: 8px; }
.tournament-item button, .trip-actions button { border: 0; border-radius: 9px; padding: 7px 8px; color: white; background: #7357ff; font-size: 8px; font-weight: 950; cursor: pointer; }

.species-collection { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.species-tile { min-height: 115px; padding: 13px; display: flex; flex-direction: column; justify-content: end; border: 1px dashed #cddad7; border-radius: 16px; background: #f5f8f7; opacity: .56; }
.species-tile > span { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 12px; background: #dfe7e5; color: white; font-size: 21px; }
.species-tile strong, .species-tile small { display: block; }
.species-tile strong { font-size: 11px; }
.species-tile small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.species-tile.unlocked { opacity: 1; border-style: solid; background: linear-gradient(145deg,#fff,color-mix(in srgb,var(--species-colour) 10%,white)); border-color: color-mix(in srgb,var(--species-colour) 35%,#dceae7); }
.species-tile.unlocked > span { background: var(--species-colour); box-shadow: 0 7px 15px color-mix(in srgb,var(--species-colour) 25%,transparent); }

.gear-item { display: grid; grid-template-columns: 37px 1fr 24px; align-items: center; gap: 9px; padding: 9px; border-radius: 13px; background: #f3f9f7; }
.gear-item > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: #dff1eb; color: var(--ocean); font-size: 17px; }
.gear-item strong, .gear-item small { display: block; }
.gear-item strong { font-size: 10px; }
.gear-item small { color: var(--muted); font-size: 8px; }
.gear-item button { border: 0; background: transparent; color: #9ab0ad; font-size: 17px; cursor: pointer; }
.bait-insight { margin-top: 12px; padding: 14px; border-radius: 14px; color: white; background: linear-gradient(135deg,#077080,#0fa383); }
.bait-insight small, .bait-insight strong, .bait-insight span { display: block; }
.bait-insight small { color: #bde9d5; font-size: 8px; text-transform: uppercase; }
.bait-insight strong { margin: 4px 0; font: 700 20px Georgia,serif; }
.bait-insight span { color: rgba(255,255,255,.7); font-size: 9px; }

.trip-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: start; gap: 9px; padding: 10px; border: 1px solid #e2ebe9; border-radius: 14px; }
.trip-date { background: #ef765d; }
.trip-item > div:nth-child(2) > strong, .trip-item > div:nth-child(2) > small { display: block; }
.trip-item > div:nth-child(2) > strong { font-size: 11px; }
.trip-item > div:nth-child(2) > small, .trip-item p { color: var(--muted); font-size: 8px; }
.trip-item p { margin: 4px 0 0; line-height: 1.4; }
.trip-actions { display: grid; gap: 5px; }
.trip-actions .safe-button { background: #16876c; }
.trip-item.safe { border-color: #9edbc3; background: #f0fbf5; }

.championships-card { color: white; background: radial-gradient(circle at 95% 15%,rgba(201,244,107,.18),transparent 23%),linear-gradient(130deg,#111b3f,#253469); border: 0; }
.championships-card .eyebrow { color: var(--lime); }
.championships-card h3 { color: white; }
.dark-season { background: rgba(255,255,255,.1); }
.championship-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.championship-row { display: grid; grid-template-columns: 24px 28px 1fr auto; align-items: center; gap: 7px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.07); }
.championship-row > span { color: var(--lime); text-align: center; font-weight: 950; }
.championship-row > b { font-size: 19px; }
.championship-row strong, .championship-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.championship-row strong { font-size: 9px; }
.championship-row small { color: rgba(255,255,255,.47); font-size: 7px; }
.championship-row em { color: var(--lime); font-style: normal; font-weight: 950; font-size: 12px; }
.championship-row em small { display: inline; }
.championship-row.is-me { background: rgba(201,244,107,.14); box-shadow: inset 0 0 0 1px rgba(201,244,107,.22); }

.conservation-card { background: linear-gradient(145deg,#effcf5,#fff); }
.eco-badge { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: #c9f4d9; color: #16845f; font-size: 18px; }
.eco-score { display: flex; align-items: end; gap: 8px; }
.eco-score strong { color: #16845f; font: 800 46px/1 Georgia,serif; }
.eco-score span { padding-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 900; }
.eco-track { background: #d9eee4; }
.eco-track span { background: linear-gradient(90deg,#49c88a,#b6e551); }
.conservation-card > p { color: var(--muted); font-size: 10px; line-height: 1.45; }
.conservation-awards { display: flex; gap: 8px; }
.conservation-awards span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #e7eeec; color: #9baaa7; filter: grayscale(1); opacity: .6; }
.conservation-awards span.earned { background: #d9f4e3; color: #16845f; filter: none; opacity: 1; box-shadow: inset 0 0 0 1px #abdabb; }
.share-card { background: radial-gradient(circle at 90% 10%,rgba(255,255,255,.22),transparent 26%),linear-gradient(145deg,#ff806a,#e85e88); color: white; border: 0; }
.share-card .eyebrow { color: #ffe6b6; }
.share-card h3 { color: white; }
.share-card > p { color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.5; }
.share-card select { border: 0; margin: 6px 0 3px; }
.share-spark { color: #fff1a3; font-size: 27px; }
.catch-card-dialog { width: min(600px,calc(100% - 22px)); }
.catch-card-dialog canvas { display: block; width: min(100%,480px); height: auto; margin: 0 auto 13px; border-radius: 18px; box-shadow: 0 13px 35px rgba(18,33,64,.22); }
.catch-card-privacy { width: min(100%,480px); margin: -4px auto 14px; padding: 13px; border: 1px solid #d3e3dc; border-radius: 13px; background: #f4f9f7; }
.catch-card-privacy label { display: grid; gap: 6px; color: #49646a; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.catch-card-privacy select { padding: 10px 12px; }
.catch-card-privacy small { display: block; margin-top: 8px; color: #637a7f; font-size: 10px; line-height: 1.4; }
.catch-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.eco-check { background: #effaf4; border-color: #c4e6d2; }
.catch-gps { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 13px; border: 1px solid #bfe1d4; border-radius: 15px; background: linear-gradient(145deg,#edfaf5,#f5f2ff); }
.catch-gps > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding-right: 92px; position: relative; }
.catch-gps > div:first-child strong, .catch-gps > div:first-child small { display: block; }
.catch-gps > div:first-child strong { color: var(--ocean); font-size: 10px; }
.catch-gps > div:first-child small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.catch-gps > .mini-action { position: absolute; right: 13px; margin-top: 2px; }
.catch-gps > label { min-width: 0; }
.catch-gps input[readonly] { color: #315d5e; background: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
.gps-pulse { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 35px; border-radius: 50%; background: #d8f5e8; color: #138366; font-size: 18px; box-shadow: 0 0 0 0 rgba(19,131,102,.2); animation: gps-pulse 2s ease-out infinite; }
.catch-gps-link { display: inline-flex; margin-top: 8px; color: var(--ocean); font-size: 9px; font-weight: 900; text-decoration: none; }
@keyframes gps-pulse { 0% { box-shadow: 0 0 0 0 rgba(19,131,102,.22); } 70%,100% { box-shadow: 0 0 0 10px rgba(19,131,102,0); } }

@media (max-width: 980px) {
  .ranking-duo { grid-template-columns: 1fr; }
  .championship-list { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .adventure-hero { align-items: stretch; flex-direction: column; padding: 27px 22px; }
  .adventure-score { min-width: 0; }
  .condition-metrics { grid-template-columns: repeat(3,1fr); }
  .species-collection { grid-template-columns: repeat(2,1fr); }
  .championship-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .adventure-grid { grid-template-columns: 1fr; }
  .adventure-card.span-2 { grid-column: auto; }
  .conditions-select { align-items: stretch; flex-direction: column; }
  .conditions-select select { max-width: none; }
  .condition-metrics { grid-template-columns: repeat(2,1fr); }
  .community-actions { width: 100%; }
  .community-actions button { width: 100%; }
  .ranking-card-title h4 { font-size: 16px; }
  .catch-card-actions { grid-template-columns: 1fr; }
  .trip-item { grid-template-columns: 42px 1fr; }
  .trip-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .catch-gps { grid-template-columns: 1fr; }
}

/* AnglerScout 3.0 — mature coastal performance theme */
:root {
  --ink: #102733;
  --muted: #60757d;
  --ocean: #087f82;
  --ocean-deep: #071f2b;
  --foam: #f2f6f3;
  --sand: #d7ba72;
  --coral: #f36f4f;
  --purple: #155a69;
  --lime: #c6f35b;
  --line: #d8e2de;
  --card: #ffffff;
  --shadow: 0 18px 50px rgba(7,31,43,.13);
  font-family: Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif;
}
html, body { background: #dfe8e5; }
.app-shell { background: #f2f6f3; box-shadow: 0 0 90px rgba(4,27,38,.18); }
.topbar { height: 88px; padding: max(13px,env(safe-area-inset-top)) 24px 11px; background: rgba(7,31,43,.97); border: 0; box-shadow: 0 12px 34px rgba(5,26,36,.22); color: white; }
.brand { gap: 13px; }
.brand-mark { width: 54px; height: 54px; padding: 4px; object-fit: contain; border-radius: 17px; background: #f8fbfa; transform: none; box-shadow: 0 10px 27px rgba(0,0,0,.28); }
.brand:hover .brand-mark { transform: translateY(-2px) scale(1.03); }
.brand h1, .section-heading h2, .sheet-dialog h2, .spot-card h2, .club-hero h3, .panel-title h3, .challenge-card h3, .catch-body h3, .saved-spot h3 { font-family: Inter, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif; font-weight: 850; letter-spacing: -.04em; }
.brand h1 { color: #fff; background: none; -webkit-text-fill-color: currentColor; font-size: 24px; letter-spacing: -.045em; }
.brand .eyebrow { color: #8edbd2; }
.eyebrow { color: #16787c; letter-spacing: .12em; font-size: 9px; font-weight: 850; }
.status-pill { background: rgba(198,243,91,.12); color: #d8ff82; border: 1px solid rgba(198,243,91,.28); box-shadow: none; }
.status-pill.offline { background: rgba(243,111,79,.13); color: #ffc0ac; border-color: rgba(243,111,79,.27); }
.icon-button { color: #e9f7f3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
.icon-button:hover { background: rgba(255,255,255,.14); box-shadow: none; }
main { min-height: calc(100vh - 88px); }
#mapView { height: calc(100vh - 88px); }
.content-view { min-height: calc(100vh - 88px); background: linear-gradient(180deg,#eef4f1 0,#f8faf8 310px); padding-top: 38px; }
.section-heading h2, .sheet-dialog h2 { color: #0a2935; font-size: clamp(30px,5vw,44px); line-height: .98; }
.primary-button { background: #f36f4f; border-radius: 12px; box-shadow: 0 10px 23px rgba(215,79,47,.22); }
.primary-button:hover { box-shadow: 0 14px 28px rgba(215,79,47,.3); }
.secondary-button { color: #10313d; border: 1px solid #d8e2de; border-radius: 12px; box-shadow: 0 8px 22px rgba(7,31,43,.08); }
.search-box, .round-button { border-radius: 13px; }
.map-style-switch { border-radius: 10px; }
.map-style-switch button.active { background: #071f2b; }
.map-add-button { background: #071f2b; border: 1px solid rgba(255,255,255,.2); }
.summary-grid article, .catch-item, .saved-spot { border: 1px solid #dde6e2; border-radius: 15px; background: #fff; box-shadow: 0 10px 27px rgba(7,31,43,.07); }
.summary-grid article:nth-child(1), .summary-grid article:nth-child(2), .summary-grid article:nth-child(3) { background: #fff; }
.summary-grid article { position: relative; overflow: hidden; }
.summary-grid article::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: #12a3a0; }
.summary-grid article:nth-child(2)::before { background: #d7a94c; }
.summary-grid article:nth-child(3)::before { background: #f36f4f; }
.summary-grid strong { font-family: Inter,"Segoe UI",Arial,sans-serif; font-weight: 850; }
input, select, textarea { border-radius: 10px; border-color: #cfdcd7; background: #fbfdfc; }
input:focus, select:focus, textarea:focus { border-color: #0b8f90; box-shadow: 0 0 0 3px rgba(11,143,144,.12); }
.bottom-nav { height: 80px; background: rgba(7,31,43,.97); border: 0; box-shadow: 0 -12px 35px rgba(7,31,43,.2); }
.nav-item { color: #85a2aa; }
.nav-item.active { color: #c6f35b; }
.nav-add { border-color: #071f2b; background: #f36f4f; box-shadow: 0 9px 23px rgba(243,111,79,.35); }
.sheet-dialog { border-radius: 20px; box-shadow: 0 35px 100px rgba(2,22,31,.45); }
.sheet-dialog::backdrop { background: rgba(3,21,29,.7); }
.personal-save-banner { display: flex; align-items: center; gap: 11px; margin: -4px 0 18px; padding: 13px 15px; border: 1px solid #bcded0; border-radius: 13px; background: #edf9f3; color: #174f45; }
.personal-save-banner > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 50%; background: #187866; color: white; font-weight: 900; }
.personal-save-banner strong, .personal-save-banner small { display: block; }
.personal-save-banner strong { font-size: 12px; }
.personal-save-banner small { margin-top: 2px; color: #5a766f; font-size: 10px; }
.catch-gps { border-color: #aad7ca; border-radius: 13px; background: linear-gradient(145deg,#eaf8f3,#f6faf8); }
.catch-gps > div:first-child strong { color: #0f6f69; }
.gps-spot-name { grid-column: 1 / -1; padding: 11px; border-radius: 10px; background: #fff; border: 1px solid #d3e3dc; }
.gps-spot-name[hidden] { display: none; }
.community-share-toggle { flex-direction: row !important; align-items: flex-start; gap: 12px !important; padding: 15px 16px; border: 1px solid #d4dfdb; border-radius: 13px; background: #f7faf8; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.community-share-toggle:has(input:checked) { border-color: #75b9a9; background: #eaf8f2; box-shadow: 0 0 0 3px rgba(24,120,102,.08); }
.community-share-toggle input { width: 21px; height: 21px; margin: 1px 0 0; accent-color: #0f766e; flex: 0 0 21px; }
.community-share-toggle > span { min-width: 0; }
.community-share-toggle strong, .community-share-toggle small { display: block; }
.community-share-toggle strong { color: #163843; font-size: 12px; }
.community-share-toggle small { margin-top: 4px; color: #6b7e83; font-size: 10px; line-height: 1.45; font-weight: 550; }
.community-share-toggle input:disabled + span { opacity: .55; }
.community-view { background: linear-gradient(180deg,#e9f2ef 0,#f7faf8 360px); }
.club-hero { background: radial-gradient(circle at 90% 10%,rgba(198,243,91,.16),transparent 25%),linear-gradient(132deg,#071f2b,#0c4e59); }
.world-stage { background: radial-gradient(circle at 90% 0,rgba(15,143,144,.18),transparent 30%),linear-gradient(145deg,#071f2b,#102f42); }
.world-stage::before { opacity: .22; }
.season-pill, .crew-pill { background: rgba(198,243,91,.12); color: #d5ff75; border-color: rgba(198,243,91,.25); }
.ranking-table-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.11); }
.adventure-hero { background: radial-gradient(circle at 86% 18%,rgba(198,243,91,.16),transparent 26%),linear-gradient(130deg,#071f2b,#0d5660); }
.adventure-button { background: linear-gradient(135deg,#0c4d5a,#0b7e7f); }
.adventure-card { border-radius: 17px; border-color: #dce5e1; box-shadow: 0 11px 30px rgba(7,31,43,.07); }
.championships-card { background: radial-gradient(circle at 95% 15%,rgba(198,243,91,.16),transparent 23%),linear-gradient(130deg,#071f2b,#123b4a); }
.share-card { background: radial-gradient(circle at 90% 10%,rgba(255,255,255,.14),transparent 26%),linear-gradient(145deg,#0d6670,#0b3f4c); }
.catch-gps-link { color: #087f82; }
.privacy-note { background: #e5f1ec; color: #315f55; }

@media (max-width: 680px) {
  .topbar { height: 78px; }
  .brand-mark { width: 45px; height: 45px; border-radius: 14px; }
  .brand h1 { font-size: 20px; }
  main { min-height: calc(100vh - 78px); }
  #mapView { height: calc(100vh - 78px); }
  .content-view { min-height: calc(100vh - 78px); }
  .sheet-dialog { border-radius: 20px 20px 0 0; }
}

.content-view.forecast-view { background: radial-gradient(circle at 80% 0,rgba(198,243,91,.12),transparent 22%),linear-gradient(180deg,#071f2b 0,#0c4050 320px,#eef4f1 320px); }
.map-data-status { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 36px; max-width: 150px; padding: 8px 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.48); border-radius: 10px; background: rgba(255,255,255,.92); color: #526b72; box-shadow: 0 7px 20px rgba(7,31,43,.12); font-size: 9px; font-weight: 850; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.map-cluster-icon { background: transparent; border: 0; }
.map-cluster-icon span { width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(145deg,#ff7d5d,#ef5b46); color: #fff; box-shadow: 0 8px 20px rgba(117,42,31,.3); font-size: 12px; font-weight: 900; }
.feed-scope-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 16px 0 14px; padding: 5px; border-radius: 13px; background: #e8efec; }
.feed-scope-tabs button { min-height: 39px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: #61757b; font-size: 10px; font-weight: 850; cursor: pointer; }
.feed-scope-tabs button.active { background: #fff; color: #0a5f66; box-shadow: 0 5px 15px rgba(7,31,43,.1); }
.composer-actions { flex-wrap: wrap; }
.post-audience { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 0; border: 0; color: #60757d; font-size: 9px; font-weight: 850; }
.post-audience legend { float: left; margin: 0 3px 0 0; padding: 0; text-transform: uppercase; letter-spacing: .06em; }
.post-audience label { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.post-audience input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.post-audience span { padding: 7px 9px; border: 1px solid #cbdcd7; border-radius: 999px; background: #fff; color: #48646a; transition: .18s ease; }
.post-audience input:checked + span { border-color: #0b8f90; background: #0b7276; color: #fff; box-shadow: 0 4px 12px rgba(11,114,118,.2); }
.post-audience input:disabled + span { opacity: .45; cursor: not-allowed; }
.post-scope-badge { display: inline-flex; margin: 5px 0 10px; padding: 4px 7px; border-radius: 999px; background: #e7f3ef; color: #247268; font-size: 8px; font-weight: 900; }
.reply-link { margin-left: auto !important; color: #176f75 !important; }
.post-replies { display: grid; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e4ece9; }
.post-reply { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.post-reply > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #dceee9; color: #156a68; font-size: 8px; font-weight: 900; }
.post-reply strong { display: block; color: #193842; font-size: 9px; }
.post-reply p { margin: 2px 0 !important; color: #415f66; font-size: 10px !important; line-height: 1.4; }
.post-reply time { color: #8a9a9e; font-size: 8px; }
.reply-composer { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; }
.reply-composer input { min-width: 0; height: 36px; padding: 8px 10px; font-size: 10px; }
.reply-composer button { padding: 0 12px; border: 0; border-radius: 9px; background: #0b7276; color: #fff; font-size: 9px; font-weight: 900; cursor: pointer; }
@media (max-width: 680px) { .map-data-status { display: inline-flex; max-width: 132px; } .forecast-location-picker { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .post-audience { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; } .post-audience legend { width: 100%; margin-bottom: 2px; } }

/* AnglerScout 4.1 — practical offline map */
.map-canvas:not(.online-map-active) .map-mode-badge { display: none; }
.offline-atlas-map .leaflet-control-zoom { margin-top: 184px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(3,30,39,.2); }
.offline-atlas-map .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; background: rgba(255,255,255,.96); font-size: 20px; }
.offline-atlas-map .leaflet-control-zoom a:first-child { border-bottom: 1px solid #dce7e5; }
.offline-spot-tooltip { padding: 7px 9px; border-radius: 9px; color: #102b30; background: rgba(255,255,255,.96); }
@media (max-width: 560px) {
  .offline-atlas-map .leaflet-control-zoom { margin-top: 174px; margin-right: 12px; }
  .offline-atlas-map .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; }
}

/* AnglerScout 5.0 — account, safety, offline packs and planning */
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 14px; border-radius: 16px; color: white; background: linear-gradient(135deg,#082d3e,#0b6974); }
.account-card > div:first-child { display: flex; align-items: center; gap: 11px; }
.account-card strong,.account-card small { display: block; }
.account-card small { margin-top: 3px; max-width: 380px; color: #cce2e1; line-height: 1.35; }
.account-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 20px; }
.account-actions { display: flex; gap: 6px; }
.account-actions a { padding: 9px 12px; border-radius: 10px; color: #082d3e; background: var(--lime); font-size: 11px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.offline-pack-manager { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #f4f8f7; }
.offline-pack-manager h3 { margin: 2px 0 5px; }
.offline-pack-manager p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.offline-pack-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.offline-pack-list { display: grid; gap: 7px; margin-top: 10px; }
.offline-pack-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 11px; background: white; font-size: 11px; }
.offline-pack-item small { color: var(--muted); }
.offline-pack-item button { border: 0; background: transparent; color: #bd5544; font-weight: 900; }
.danger-zone-button { width: 100%; margin-top: 12px; padding: 11px; border: 1px solid #f0b9ae; border-radius: 12px; color: #b24234; background: #fff5f2; font-weight: 850; }
.timeline-panel { overflow: hidden; }
.timeline-legend { color: var(--muted); font-size: 10px; font-weight: 800; }
.fishing-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px,1fr); gap: 8px; margin-top: 16px; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x proximity; }
.timeline-hour { min-height: 146px; padding: 12px; border: 1px solid #dfe8e6; border-radius: 14px; background: linear-gradient(180deg,#f8fbfa,#edf5f3); scroll-snap-align: start; }
.timeline-hour.best { border-color: #a9d74f; background: linear-gradient(180deg,#f5ffd9,#f0f8ea); box-shadow: inset 0 3px 0 #a8d94e; }
.timeline-hour strong,.timeline-hour span,.timeline-hour small { display: block; }
.timeline-hour > strong { font-size: 14px; }
.timeline-hour .timeline-score { margin: 8px 0; color: #087b79; font-size: 22px; font-weight: 950; }
.timeline-hour .timeline-score small { margin:0 0 2px; color:#5e7779; font-size:8px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.timeline-hour span { margin-top: 4px; color: #3e5a62; font-size: 10px; }
.timeline-hour small { margin-top: 8px; color: var(--muted); font-size: 9px; }
.timeline-explainer { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.session-card { background: radial-gradient(circle at 90% 0,rgba(198,243,91,.2),transparent 35%),#fff; }
.session-status,.verified-source { padding: 6px 9px; border-radius: 999px; color: #1e6659; background: #e4f3ed; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.session-status.live { color: #fff; background: #ef6f50; animation: gpsPulse 1.8s infinite; }
.session-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.session-actions button { flex: 1 1 130px; }
.regulation-card label { display: block; margin: 12px 0; color: var(--muted); font-size: 10px; font-weight: 800; }
.regulation-card label span { display: block; margin-bottom: 5px; }
.regulation-content { min-height: 80px; padding: 12px; border-radius: 13px; background: #eff5f3; }
.regulation-content strong,.regulation-content a { display: block; }
.regulation-content a { margin-top: 7px; color: #087a7c; font-weight: 850; }
.regulation-warning { color: #7c6250; font-size: 10px; line-height: 1.45; }
.safety-actions { display: flex; gap: 5px; margin-left: auto; }
.safety-actions button { padding: 5px 7px; border: 0; border-radius: 8px; color: var(--muted); background: #edf3f1; font-size: 9px; font-weight: 850; }
.safety-actions button:hover { color: #fff; background: #b75044; }
.onboarding-dialog { width: min(620px,calc(100% - 24px)); }
.onboarding-dialog form { background: radial-gradient(circle at 100% 0,rgba(198,243,91,.22),transparent 35%),#fff; }
.sunlight-mode { --ink:#001e2a; --muted:#43545a; --line:#b9ceca; --shadow:0 12px 30px rgba(0,28,37,.2); }
.sunlight-mode .topbar,.sunlight-mode .forecast-panel,.sunlight-mode .adventure-card,.sunlight-mode .feed-bubble { border-color:#9dbbb6; box-shadow:0 4px 14px rgba(0,25,34,.14); }
.sunlight-mode button,.sunlight-mode select,.sunlight-mode input,.sunlight-mode textarea { min-height:44px; font-size:max(13px,1em); }
.sunlight-mode .bottom-nav button { min-height:68px; }
.post-safety-actions { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.post-safety-actions button { border:0; background:transparent; color:var(--muted); font-size:11px; font-weight:800; padding:5px 7px; }
.post-safety-actions button:last-child { color:#b44343; }
.infrastructure-map-icon span { display:grid; place-items:center; width:32px; height:32px; border:3px solid #fff; border-radius:10px; background:#063746; color:#c9f46b; box-shadow:0 5px 14px rgba(0,20,31,.28); font:900 15px/1 system-ui; }
@media (max-width: 720px) {
  .account-card { align-items:flex-start; flex-direction:column; }
  .offline-pack-row { grid-template-columns:1fr; }
  .timeline-legend { display:none; }
  .fishing-timeline { grid-auto-columns:112px; }
  .safety-actions { width:100%; margin:6px 0 0 48px; }
}

/* AnglerScout 5.1 — customer feedback */
.feedback-type-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.feedback-type-picker label { position:relative; cursor:pointer; }
.feedback-type-picker input { position:absolute; width:1px; height:1px; opacity:0; }
.feedback-type-picker span { min-height:46px; display:flex; align-items:center; justify-content:center; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:#f5f8f7; color:#49646a; font-size:12px; font-weight:900; transition:.18s ease; }
.feedback-type-picker input:checked + span { border-color:#0b8f90; background:#0b7276; color:white; box-shadow:0 7px 18px rgba(11,114,118,.18); }
.feedback-note { margin:10px 0 14px; padding:10px 12px; border-radius:11px; background:#eef5f2; color:#527076; font-size:10px; line-height:1.45; }

/* AnglerScout 6.0 — cloud communities, alerts and real offline regions */
.offline-pack-grid { display:grid; grid-template-columns:1fr 1fr 120px auto; gap:8px; align-items:end; margin-top:13px; }
.offline-pack-grid label { display:grid; gap:5px; color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; }
.offline-pack-grid select,.offline-pack-grid button { min-height:43px; }
.offline-pack-source { margin-top:9px !important; font-size:9px !important; }
.offline-pack-item strong,.offline-pack-item small { display:block; }
.offline-pack-item small { margin-top:3px; }
.community-member-list { display:grid; gap:8px; margin:14px 0; }
.community-member-row { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:14px; background:#f7faf9; }
.community-member-row > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#0b7276,#073b4a); font-weight:950; }
.community-member-row strong,.community-member-row small { display:block; }
.community-member-row small { margin-top:3px; color:var(--muted); font-size:9px; }
.member-role-actions { display:flex; gap:5px; }
.member-role-actions button { padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#31585e; font-size:9px; font-weight:850; cursor:pointer; }
.member-role-actions button.danger { color:#b04439; border-color:#efc6bf; }
.offline-feature-road { stroke:#f4c56a; stroke-width:1.2; stroke-opacity:.7; }
.offline-feature-water { stroke:#65d5e0; stroke-width:1.6; stroke-opacity:.8; }
@media (max-width:760px) { .offline-pack-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .offline-pack-grid { grid-template-columns:1fr; } .community-member-row { grid-template-columns:38px 1fr; } .member-role-actions { grid-column:1 / -1; } }