*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100vh}

:root{
  --mud:#1b1408;--bark:#2a1f0f;--moss:#4a5c3a;--sage:#7a9a68;
  --water:#4a7fa5;--riffle:#6aaed4;--foam:#c8dfe8;--cream:#f0e8d8;
  --gold:#c8922a;--rust:#8b3a1a;--good:#7aba5a;--poor:#c0392b;
}

body{
  background:var(--mud);color:var(--cream);font-family:'DM Mono',monospace;
  background-image:
    radial-gradient(ellipse at 15% 0%,rgba(74,127,165,.13) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 100%,rgba(74,92,58,.18) 0%,transparent 55%);
}

/* ── TOP BAR ── */
#topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem;
  background:rgba(27,20,8,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(200,223,232,.08);
}
.tb-logo{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:900;letter-spacing:-.5px}
.tb-logo span{color:var(--riffle)}
.tb-right{display:flex;align-items:center;gap:.6rem}
#tb-clock{font-size:.65rem;color:rgba(200,223,232,.4)}
#refresh-btn{
  background:linear-gradient(135deg,var(--water),var(--riffle));
  border:none;border-radius:4px;color:#fff;
  font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.45rem .9rem;cursor:pointer;transition:opacity .2s,transform .1s;
  display:flex;align-items:center;gap:.4rem;
}
#refresh-btn:hover{opacity:.85}
#refresh-btn:active{transform:scale(.97)}
#refresh-btn.loading{opacity:.6;pointer-events:none}
.spin{display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SETUP BANNER ── */
#setup-banner{
  background:rgba(200,146,42,.1);border-bottom:1px solid rgba(200,146,42,.2);
  padding:.85rem 1.25rem;display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;
}
#setup-banner p{font-size:.68rem;color:rgba(200,223,232,.7);flex:1;min-width:200px;line-height:1.6}
.setup-fields{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.setup-fields input,.setup-fields select{
  background:rgba(255,255,255,.05);border:1px solid rgba(200,223,232,.15);
  border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.75rem;
  padding:.4rem .65rem;outline:none;transition:border-color .2s;
}
.setup-fields input:focus,.setup-fields select:focus{border-color:var(--riffle)}
.setup-fields select option{background:#2a1f0f}
.setup-fields input{width:160px}
#save-setup-btn{
  background:var(--gold);border:none;border-radius:3px;color:#1b1408;
  font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.4rem .85rem;cursor:pointer;font-weight:500;transition:opacity .2s;white-space:nowrap;
}
#save-setup-btn:hover{opacity:.85}
#setup-status{font-size:.6rem;color:var(--sage);white-space:nowrap}

/* ── BITE HERO ── */
#bite-hero{
  padding:1.25rem;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(74,127,165,.06),rgba(74,92,58,.08));
  border-bottom:1px solid rgba(200,223,232,.07);
}
.bite-meter{position:relative;width:130px;height:130px;flex-shrink:0}
.bite-meter svg{width:100%;height:100%;transform:rotate(-90deg)}
.bite-track{fill:none;stroke:rgba(200,223,232,.07);stroke-width:11}
.bite-fill{fill:none;stroke-width:11;stroke-linecap:round;stroke-dasharray:370;stroke-dashoffset:370;transition:stroke-dashoffset 2s cubic-bezier(.25,1,.5,1),stroke .5s}
.bite-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.bite-num{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:900;line-height:1}
.bite-lbl{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,223,232,.4);margin-top:.15rem}
.bite-info{flex:1;min-width:180px}
.bite-info h2{font-family:'Playfair Display',serif;font-size:1.5rem;line-height:1.1}
.bite-badge{display:inline-block;margin-top:.4rem;padding:.22rem .7rem;border-radius:3px;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.bite-info p{margin-top:.6rem;font-size:.67rem;line-height:1.72;color:rgba(200,223,232,.55);max-width:340px}
#bite-hero{padding:1.1rem;gap:1rem}
.bite-meter{width:120px;height:120px}
.bite-num{font-size:2.2rem}
.species-bar{display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}
.sp-chip{padding:.2rem .55rem;border-radius:3px;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(200,223,232,.12);color:rgba(200,223,232,.5);cursor:pointer;transition:all .15s}.sp-chip:hover{border-color:rgba(200,223,232,.3);color:var(--cream)}
.sp-chip.active{border-color:var(--riffle);color:var(--riffle);background:rgba(106,174,212,.1)}

/* ── FETCH STATUS ROW ── */
#fetch-row{
  display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem 1rem;
  border-bottom:1px solid rgba(200,223,232,.05);background:rgba(0,0,0,.12);
}
.fetch-chip{font-size:.52rem;padding:.15rem .48rem;border-radius:3px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.28rem;transition:opacity .2s}
.fetch-chip.ok{background:rgba(122,186,90,.1);color:#7aba5a;border:1px solid rgba(122,186,90,.15)}
.fetch-chip.err{background:rgba(200,70,50,.1);color:#e07050;border:1px solid rgba(200,70,50,.15)}
.fetch-chip.pending{background:rgba(200,223,232,.04);color:rgba(200,223,232,.3);border:1px solid rgba(200,223,232,.07)}
#last-updated{font-size:.5rem;color:rgba(200,223,232,.25);margin-left:auto;align-self:center}

/* ── STAT GRID ── */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(0,194,224,.06);border-top:1px solid rgba(0,194,224,.07)}
@media(min-width:520px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.stat-grid{grid-template-columns:repeat(8,1fr)}}

.card{background:#060d12;padding:.9rem .85rem;position:relative;overflow:hidden;transition:background .2s}
.card:hover{background:rgba(0,194,224,.03)}
.card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%}
.c-pressure::before{background:var(--riffle)}
.c-wind::before{background:#80b0d0}
.c-cloud::before{background:#a0b8c8}
.c-rain::before{background:#5090b8}
.c-level::before{background:var(--water)}
.c-cfs::before{background:#3a6a90}
.c-wtemp::before{background:var(--gold)}
.c-do::before{background:#60c090}
.c-turb::before{background:#8b6914}
.c-moon::before{background:#a0a8c0}
.c-tod::before{background:var(--rust)}
.c-front::before{background:#c06030}
.c-season::before{background:var(--moss)}
.c-wind-dir::before{background:#70a0c0}
.c-clarity-trend::before{background:#7090a0}
.c-hatch::before{background:var(--sage)}

.card-icon{font-size:1.25rem;margin-bottom:.3rem;display:block;opacity:.8}
.card-lbl{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,223,232,.32);margin-bottom:.2rem;line-height:1.3}
.card-val{font-family:'Playfair Display',serif;font-size:1.75rem;font-weight:700;line-height:1;margin-bottom:.12rem;letter-spacing:-.5px}
.card-unit{font-family:'DM Mono',monospace;font-size:.6rem;color:rgba(200,223,232,.38);vertical-align:super;letter-spacing:0}
.card-sub{font-size:.58rem;color:rgba(200,223,232,.4);margin-top:.28rem;line-height:1.5}
.card-rating{display:inline-flex;align-items:center;font-size:.55rem;padding:.12rem .45rem;border-radius:3px;margin-top:.42rem;font-weight:500}
.card-source{font-size:.46rem;color:rgba(200,223,232,.18);margin-top:.3rem;letter-spacing:.06em}
.auto-badge{font-size:.44rem;padding:.06rem .28rem;border-radius:2px;background:rgba(106,174,212,.1);color:var(--riffle);letter-spacing:.08em;text-transform:uppercase;margin-left:.28rem;vertical-align:middle}

/* ── SECTIONS ── */
.section{padding:1rem 1.1rem;border-top:1px solid rgba(0,194,224,.06)}
.sec-title{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,194,224,.6);margin-bottom:.85rem;display:flex;align-items:center;gap:.6rem}
.sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(0,194,224,.15),transparent)}

/* pressure chart */
.chart-wrap{position:relative;height:90px;width:100%}
canvas#pressureChart{width:100%!important;height:100%!important}

/* timeline */
.timeline{display:flex;align-items:center;position:relative;padding:1rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tl-track{position:absolute;top:50%;left:0;right:0;height:2px;background:rgba(200,223,232,.07);transform:translateY(-50%)}
.tl-events{display:flex;justify-content:space-between;width:100%;position:relative;min-width:340px}
.t-ev{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.t-dot{width:10px;height:10px;border-radius:50%;border:2px solid;background:var(--mud);position:relative;z-index:1}
.t-ev.major .t-dot{width:15px;height:15px;border-width:2.5px}
.t-ev.major .t-lbl{color:var(--gold)}
.t-lbl{font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(200,223,232,.4)}
.t-time{font-size:.65rem;font-weight:500;color:var(--foam)}
.t-ev.now .t-dot{background:var(--riffle)!important;border-color:var(--riffle)!important;box-shadow:0 0 8px var(--riffle)}

/* species scores */
.species-scores{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}
@media(min-width:520px){.species-scores{grid-template-columns:repeat(4,1fr)}}
.sp-score-card{background:rgba(255,255,255,.03);border:1px solid rgba(200,223,232,.08);border-radius:4px;padding:.85rem;text-align:center}
.sp-score-card h4{font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,223,232,.45);margin-bottom:.5rem}
.sp-ring{position:relative;width:70px;height:70px;margin:0 auto .5rem}
.sp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.sp-ring-track{fill:none;stroke:rgba(200,223,232,.07);stroke-width:8}
.sp-ring-fill{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:188;stroke-dashoffset:188;transition:stroke-dashoffset 1.8s cubic-bezier(.25,1,.5,1)}
.sp-ring-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700}
.sp-score-card p{font-size:.6rem;color:rgba(200,223,232,.45);line-height:1.5}

/* advice + lure grids */
.advice-grid,.lure-grid{display:grid;grid-template-columns:1fr;gap:.65rem}
@media(min-width:520px){.advice-grid,.lure-grid{grid-template-columns:1fr 1fr}}
.advice-card{background:rgba(200,223,232,.03);border:1px solid rgba(200,223,232,.07);border-radius:4px;padding:.9rem;display:flex;gap:.65rem}
.lure-card{background:rgba(200,223,232,.03);border:1px solid rgba(200,223,232,.07);border-radius:4px;padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.lure-card-top{display:flex;gap:.65rem;align-items:flex-start}
.lure-icon{font-size:1.1rem;flex-shrink:0}
.lure-name{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--riffle);margin-bottom:.2rem;font-family:'DM Mono',monospace}
.lure-why{font-size:.65rem;line-height:1.6;color:rgba(200,223,232,.55)}
.lure-colors{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.color-chip{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.05);border:1px solid rgba(200,223,232,.1);border-radius:3px;padding:.2rem .5rem;font-size:.58rem;color:rgba(200,223,232,.65)}
.color-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}
.advice-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem}
.advice-card h4{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--riffle);margin-bottom:.3rem}
.advice-card p{font-size:.65rem;line-height:1.65;color:rgba(200,223,232,.55)}

/* manual override section */
.override-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;margin-top:.75rem}
@media(min-width:520px){.override-grid{grid-template-columns:repeat(3,1fr)}}
.field-group{display:flex;flex-direction:column;gap:.3rem}
.field-group label{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,223,232,.38)}
.field-group label .auto-lbl{color:var(--riffle);margin-left:.3rem}
.field-group input,.field-group select{background:rgba(255,255,255,.04);border:1px solid rgba(200,223,232,.11);border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.78rem;padding:.42rem .62rem;outline:none;transition:border-color .2s;width:100%}
.field-group input:focus,.field-group select:focus{border-color:var(--riffle)}
.field-group select option{background:#2a1f0f}
.field-group input.auto-filled{border-color:rgba(106,174,212,.3);background:rgba(106,174,212,.04)}
.calc-btn{margin-top:1rem;background:linear-gradient(135deg,var(--water),var(--riffle));color:#fff;border:none;border-radius:3px;font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;padding:.7rem 1.65rem;cursor:pointer;transition:opacity .2s,transform .1s}
.calc-btn:hover{opacity:.85}
.calc-btn:active{transform:scale(.97)}

/* color helpers */
.bg-great{background:rgba(200,146,42,.15);color:var(--gold)}
.bg-good{background:rgba(122,186,90,.12);color:#7aba5a}
.bg-fair{background:rgba(170,170,170,.1);color:#aaa}
.bg-poor{background:rgba(139,58,26,.15);color:#e07050}
.c-great{color:var(--gold)}.c-good{color:#7aba5a}.c-fair{color:#aaa}.c-poor{color:#e07050}


/* ── TABS ── */
#tab-nav{
  display:flex;
  background:rgba(6,13,18,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,194,224,.1);
  position:sticky;top:52px;z-index:99;
  padding:0 .2rem;
  gap:.1rem;
}
.tab-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22rem;
  padding:.55rem .25rem .5rem;
  font-family:'DM Mono',monospace;
  font-size:.42rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:rgba(200,223,232,.32);
  cursor:pointer;
  transition:all .18s;
  position:relative;
  line-height:1;
}
.tab-btn .tab-icon{
  font-size:1.15rem;
  line-height:1;
  transition:transform .18s;
}
.tab-btn:hover{color:rgba(200,223,232,.7)}
.tab-btn:hover .tab-icon{transform:translateY(-1px)}
.tab-btn.active{
  color:#00c2e0;
  border-bottom-color:#00c2e0;
}
.tab-btn.active .tab-icon{
  filter:drop-shadow(0 0 6px rgba(0,194,224,.5));
}
.tab-btn.active::after{
  content:'';
  position:absolute;
  bottom:0;left:10%;right:10%;
  height:2px;
  background:linear-gradient(90deg,transparent,#00c2e0,transparent);
  border-radius:2px 2px 0 0;
}
.tab-pane{display:none}.tab-pane.active{display:block}

/* ── MAP ── */
#map{width:100%;height:460px;background:#0d1a0d;position:relative;z-index:1}
.leaflet-popup-content-wrapper{background:#060d12!important;color:#c8dfe8!important;border:1px solid rgba(106,174,212,.25)!important;border-radius:8px!important;font-family:'DM Mono',monospace!important;font-size:.7rem;box-shadow:0 4px 20px rgba(0,0,0,.7)!important}
.leaflet-popup-tip{background:#060d12!important;border-top-color:#060d12!important}
.leaflet-popup-tip-container{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.leaflet-popup-close-button{color:rgba(200,223,232,.5)!important;font-size:1.1rem!important}
.leaflet-popup-close-button:hover{color:#c8dfe8!important}

/* ── MAP LEGEND ── */
.map-legend{display:flex;flex-wrap:wrap;gap:.5rem;padding:.6rem 1.25rem;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(200,223,232,.06);align-items:center}
.leg-item{display:flex;align-items:center;gap:.3rem;font-size:.56rem;color:rgba(200,223,232,.5)}
.leg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}
.leg-sq{width:11px;height:11px;border-radius:2px;flex-shrink:0}

/* ── LAYER TOGGLES ── */
.layer-bar{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 1.25rem;background:rgba(0,0,0,.15);border-bottom:1px solid rgba(200,223,232,.06)}
.layer-toggle{padding:.28rem .65rem;border-radius:3px;font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(200,223,232,.15);background:rgba(255,255,255,.04);color:rgba(200,223,232,.5);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.3rem}
.layer-toggle.on{border-color:var(--riffle);color:var(--riffle);background:rgba(106,174,212,.08)}
.layer-toggle:hover{border-color:rgba(200,223,232,.3);color:var(--cream)}

/* ── TRIP TOOLBAR ── */
.trip-toolbar{display:flex;flex-wrap:wrap;gap:.45rem;padding:.7rem 1.25rem;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(200,223,232,.07);align-items:center}
.trip-btn{background:rgba(255,255,255,.04);border:1px solid rgba(200,223,232,.14);border-radius:3px;color:rgba(200,223,232,.7);font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.38rem .75rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.3rem}
.trip-btn:hover{border-color:var(--riffle);color:var(--riffle)}
.trip-btn.active-tool{border-color:var(--gold);color:var(--gold);background:rgba(200,146,42,.08)}
.trip-btn.danger{border-color:rgba(192,57,43,.3);color:#c07060}
.trip-btn.danger:hover{border-color:var(--poor);background:rgba(192,57,43,.08)}
.trip-btn.gps-on{border-color:rgba(192,57,43,.5);color:#e07060;background:rgba(192,57,43,.08)}

/* ── STATS BAR ── */
.trip-stat-bar{display:flex;flex-wrap:wrap;gap:1.5rem;padding:.6rem 1.25rem;background:rgba(0,0,0,.12);border-bottom:1px solid rgba(200,223,232,.05)}
.trip-stat{display:flex;flex-direction:column;gap:.1rem}
.trip-stat label{font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(200,223,232,.3)}
.trip-stat span{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--foam)}
.trip-stat .u{font-family:'DM Mono',monospace;font-size:.55rem;color:rgba(200,223,232,.35);margin-left:.15rem}

/* ── ACCESS PANEL ── */
.access-panel{padding:1rem 1.25rem;border-top:1px solid rgba(200,223,232,.06)}
.access-row{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .85rem;background:rgba(255,255,255,.025);border:1px solid rgba(200,223,232,.07);border-radius:4px;margin-bottom:.45rem;cursor:pointer;transition:border-color .2s}
.access-row:hover{border-color:rgba(200,223,232,.18)}
.access-row-left{flex:1}
.access-name{font-size:.72rem;color:var(--foam);margin-bottom:.2rem}
.access-meta{font-size:.58rem;color:rgba(200,223,232,.4);line-height:1.5}
.access-badge{padding:.18rem .5rem;border-radius:3px;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;font-family:'DM Mono',monospace;flex-shrink:0;margin-top:.1rem}
.badge-safe{background:rgba(122,186,90,.15);color:#7aba5a;border:1px solid rgba(122,186,90,.25)}
.badge-caution{background:rgba(200,146,42,.15);color:var(--gold);border:1px solid rgba(200,146,42,.25)}
.badge-danger{background:rgba(192,57,43,.15);color:#e07060;border:1px solid rgba(192,57,43,.25)}
.badge-unknown{background:rgba(200,223,232,.06);color:rgba(200,223,232,.4);border:1px solid rgba(200,223,232,.1)}

/* ── SAVE BAR ── */
.trip-save-bar{display:flex;gap:.5rem;padding:.7rem 1.25rem;border-top:1px solid rgba(200,223,232,.06);background:rgba(0,0,0,.1);flex-wrap:wrap;align-items:center}
.trip-name-input{flex:1;min-width:160px;background:rgba(255,255,255,.04);border:1px solid rgba(200,223,232,.14);border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.72rem;padding:.38rem .65rem;outline:none;transition:border-color .2s}
.trip-name-input:focus{border-color:var(--riffle)}

/* ── SAVED TRIPS ── */
.saved-trips-panel{padding:1rem 1.25rem}
.str-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;background:rgba(255,255,255,.025);border:1px solid rgba(200,223,232,.07);border-radius:4px;margin-bottom:.4rem}
.str-row:hover{border-color:rgba(200,223,232,.15)}
.str-name{font-size:.7rem;color:var(--foam)}
.str-meta{font-size:.56rem;color:rgba(200,223,232,.38);margin-top:.12rem}
.str-actions{display:flex;gap:.35rem}
.str-btn{background:none;border:1px solid rgba(200,223,232,.1);border-radius:3px;color:rgba(200,223,232,.45);font-family:'DM Mono',monospace;font-size:.53rem;padding:.18rem .45rem;cursor:pointer;transition:all .2s}
.str-btn:hover{border-color:var(--riffle);color:var(--riffle)}



/* ── LOGIN GATE ── */
#login-gate{position:fixed;inset:0;z-index:2000;background:var(--mud);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background-image:radial-gradient(ellipse at 20% 20%,rgba(74,127,165,.18) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(74,92,58,.2) 0%,transparent 55%)}
#login-gate.hidden{display:none}
.gate-logo{font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:900;letter-spacing:-.5px;margin-bottom:.3rem}
.gate-logo span{color:var(--riffle)}
.gate-tagline{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(200,223,232,.4);margin-bottom:2.5rem}
.gate-card{background:#161e10;border:1px solid rgba(200,223,232,.1);border-radius:8px;padding:2rem;width:100%;max-width:360px}
.gate-tabs{display:flex;margin-bottom:1.5rem;border-bottom:1px solid rgba(200,223,232,.1)}
.gate-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:rgba(200,223,232,.4);font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;padding:.55rem;cursor:pointer;transition:all .2s;margin-bottom:-1px}
.gate-tab.active{color:var(--riffle);border-bottom-color:var(--riffle)}
.gate-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.gate-field label{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,223,232,.38)}
.gate-field input{background:rgba(255,255,255,.05);border:1px solid rgba(200,223,232,.14);border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.82rem;padding:.5rem .7rem;outline:none;transition:border-color .2s;width:100%}
.gate-field input:focus{border-color:var(--riffle)}
.gate-submit{width:100%;background:linear-gradient(135deg,var(--water),var(--riffle));border:none;border-radius:4px;color:#fff;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:.75rem;cursor:pointer;margin-top:.25rem;transition:opacity .2s}
.gate-submit:hover{opacity:.85}
.gate-msg{font-size:.65rem;margin-top:.75rem;padding:.4rem .6rem;border-radius:3px;text-align:center;display:none}
.gate-msg.err{background:rgba(192,57,43,.15);color:#e07060;border:1px solid rgba(192,57,43,.25);display:block}
.gate-msg.ok{background:rgba(122,186,90,.12);color:#7aba5a;border:1px solid rgba(122,186,90,.2);display:block}
.gate-forgot{text-align:center;margin-top:.75rem;font-size:.58rem;color:rgba(200,223,232,.3);cursor:pointer}
.gate-forgot:hover{color:var(--riffle)}
.gate-features{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.75rem;max-width:360px}
.gate-feature{font-size:.58rem;color:rgba(200,223,232,.35);display:flex;align-items:center;gap:.3rem}
/* ── ADMIN ── */
#admin-panel{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1rem}
#admin-panel.open{display:flex}
.admin-modal{background:#0f1a0f;border:1px solid rgba(200,146,42,.25);border-radius:8px;padding:1.75rem;width:100%;max-width:560px;max-height:90vh;overflow-y:auto}
.admin-modal h2{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--gold);margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between}
.admin-close{background:none;border:none;color:rgba(200,223,232,.3);font-size:1.1rem;cursor:pointer}
.admin-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.25rem}
.admin-stat{background:rgba(255,255,255,.03);border:1px solid rgba(200,223,232,.08);border-radius:4px;padding:.75rem;text-align:center}
.admin-stat label{display:block;font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,223,232,.35);margin-bottom:.3rem}
.admin-stat span{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--gold)}
.admin-section h3{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-bottom:.65rem;padding-bottom:.35rem;border-bottom:1px solid rgba(200,223,232,.07)}
.admin-user-row{display:flex;align-items:center;justify-content:space-between;padding:.45rem .6rem;border-bottom:1px solid rgba(200,223,232,.05);font-size:.65rem}
.admin-badge{padding:.12rem .4rem;border-radius:2px;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase}
.badge-admin{background:rgba(200,146,42,.2);color:var(--gold);border:1px solid rgba(200,146,42,.3)}
.badge-user{background:rgba(200,223,232,.06);color:rgba(200,223,232,.4);border:1px solid rgba(200,223,232,.1)}


/* ── SHOP ── */
.shop-hero{padding:1.5rem 1.25rem .75rem;border-bottom:1px solid rgba(200,223,232,.06)}
.shop-hero h2{font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:.25rem}
.shop-hero p{font-size:.65rem;color:rgba(200,223,232,.45);line-height:1.6}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:1.25rem}
.shop-card{background:rgba(255,255,255,.03);border:1px solid rgba(200,223,232,.08);border-radius:6px;overflow:hidden;transition:border-color .2s,transform .2s;cursor:pointer}
.shop-card:hover{border-color:rgba(106,174,212,.3);transform:translateY(-2px)}
.shop-card-img{width:100%;aspect-ratio:1;object-fit:cover;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.shop-card-img img{width:100%;height:100%;object-fit:cover}
.shop-card-body{padding:.75rem}
.shop-card-name{font-size:.75rem;font-weight:600;color:var(--foam);margin-bottom:.2rem}
.shop-card-type{font-size:.58rem;color:rgba(200,223,232,.35);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.shop-card-price{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--riffle)}
.shop-card-price.tbd{font-family:'DM Mono',monospace;font-size:.65rem;color:rgba(200,223,232,.3)}
.shop-card-btn{width:100%;margin-top:.6rem;background:rgba(106,174,212,.12);border:1px solid rgba(106,174,212,.2);border-radius:3px;color:var(--riffle);font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem;cursor:pointer;transition:all .2s}
.shop-card-btn:hover{background:rgba(106,174,212,.22);border-color:var(--riffle)}
/* product modal */
#shop-modal{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1rem}
#shop-modal.open{display:flex}
.shop-modal-inner{background:#0f1a0f;border:1px solid rgba(200,223,232,.12);border-radius:8px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;padding:1.5rem;position:relative}
.shop-modal-close{position:absolute;top:.9rem;right:.9rem;background:none;border:none;color:rgba(200,223,232,.3);font-size:1.1rem;cursor:pointer}
.shop-modal-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:rgba(255,255,255,.04);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:4rem;margin-bottom:1rem;overflow:hidden}
.shop-modal-img img{width:100%;height:100%;object-fit:cover}
.shop-modal-name{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:.2rem}
.shop-modal-desc{font-size:.65rem;color:rgba(200,223,232,.45);line-height:1.65;margin-bottom:1rem}
.shop-color-grid{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.color-opt{padding:.25rem .6rem;border-radius:2px;font-size:.6rem;font-family:'DM Mono',monospace;border:1px solid rgba(200,223,232,.15);background:rgba(255,255,255,.04);cursor:pointer;transition:all .15s}
.color-opt.selected,.color-opt:hover{border-color:var(--riffle);color:var(--riffle);background:rgba(106,174,212,.1)}
.shop-qty{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.qty-btn{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(200,223,232,.15);color:var(--cream);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty-btn:hover{border-color:var(--riffle);color:var(--riffle)}
#shop-qty-val{font-family:'Playfair Display',serif;font-size:1.2rem;min-width:24px;text-align:center}
.shop-add-btn{width:100%;background:linear-gradient(135deg,var(--water),var(--riffle));border:none;border-radius:4px;color:#fff;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:.8rem;cursor:pointer;transition:opacity .2s}
.shop-add-btn:hover{opacity:.85}
.shop-add-btn:disabled{opacity:.4;cursor:not-allowed}
/* cart */
.cart-bar{position:sticky;bottom:0;background:#0f1a0f;border-top:1px solid rgba(106,174,212,.2);padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;display:none}
.cart-bar.has-items{display:flex}
.cart-count{font-size:.65rem;color:rgba(200,223,232,.5)}
.cart-total{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--riffle)}
.cart-checkout-btn{background:var(--riffle);border:none;border-radius:4px;color:#0a1208;font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:.5rem 1rem;cursor:pointer;font-weight:700}
/* admin shop */
.shop-admin-bar{background:rgba(200,146,42,.06);border:1px solid rgba(200,146,42,.15);border-radius:4px;padding:.6rem 1rem;margin:1rem 1.25rem 0;font-size:.62rem;color:var(--gold);display:none;align-items:center;justify-content:space-between}
.shop-admin-bar.visible{display:flex}
.shop-admin-btn{background:rgba(200,146,42,.15);border:1px solid rgba(200,146,42,.25);border-radius:3px;color:var(--gold);font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .65rem;cursor:pointer}
/* order confirm */
#order-modal{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1rem}
#order-modal.open{display:flex}
.order-modal-inner{background:#0f1a0f;border:1px solid rgba(122,186,90,.25);border-radius:8px;padding:2rem;width:100%;max-width:400px;text-align:center}
.order-modal-inner h2{font-family:'Playfair Display',serif;font-size:1.4rem;color:#7aba5a;margin-bottom:.5rem}
.order-form-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem;text-align:left}
.order-form-field label{font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,223,232,.38)}
.order-form-field input{background:rgba(255,255,255,.05);border:1px solid rgba(200,223,232,.14);border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.78rem;padding:.45rem .65rem;outline:none;width:100%}
.order-form-field input:focus{border-color:var(--riffle)}


/* ── AFFILIATE GEAR ── */
.gear-section{padding:1.25rem}
.gear-section-title{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:.25rem}
.gear-section-sub{font-size:.62rem;color:rgba(200,223,232,.4);margin-bottom:1rem;line-height:1.5}
.gear-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.gear-tab{padding:.3rem .75rem;border-radius:20px;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(200,223,232,.15);background:rgba(255,255,255,.03);color:rgba(200,223,232,.45);cursor:pointer;transition:all .2s}
.gear-tab.active{border-color:var(--riffle);color:var(--riffle);background:rgba(106,174,212,.1)}
.gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.gear-card{background:rgba(255,255,255,.03);border:1px solid rgba(200,223,232,.08);border-radius:6px;overflow:hidden;transition:border-color .2s,transform .15s}
.gear-card:hover{border-color:rgba(106,174,212,.25);transform:translateY(-1px)}
.gear-card-img{width:100%;aspect-ratio:1;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:2rem}
.gear-card-img img{width:100%;height:100%;object-fit:cover}
.gear-card-body{padding:.6rem}
.gear-card-name{font-size:.68rem;color:var(--foam);margin-bottom:.15rem;line-height:1.3}
.gear-card-brand{font-size:.55rem;color:rgba(200,223,232,.35);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.35rem}
.gear-card-price{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--riffle);margin-bottom:.45rem}
.gear-card-btn{width:100%;background:rgba(200,146,42,.1);border:1px solid rgba(200,146,42,.2);border-radius:3px;color:var(--gold);font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.35rem;cursor:pointer;transition:all .2s;text-decoration:none;display:block;text-align:center}
.gear-card-btn:hover{background:rgba(200,146,42,.2);border-color:var(--gold)}
.gear-hot-badge{display:inline-block;background:rgba(224,112,96,.2);border:1px solid rgba(224,112,96,.3);color:#e07060;font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;padding:.1rem .35rem;border-radius:2px;margin-left:.35rem;vertical-align:middle}
.gear-commission-note{font-size:.52rem;color:rgba(200,223,232,.2);text-align:center;padding:.75rem;border-top:1px solid rgba(200,223,232,.05);margin-top:.5rem}


/* ── PROFILE PROMPT ── */
#profile-prompt{position:fixed;inset:0;z-index:1800;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1rem}
#profile-prompt.open{display:flex}
.profile-prompt-inner{background:#0f1a0f;border:1px solid rgba(106,174,212,.2);border-radius:8px;padding:2rem;width:100%;max-width:360px}
.profile-prompt-inner h2{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:.35rem}
.profile-prompt-inner p{font-size:.65rem;color:rgba(200,223,232,.45);line-height:1.65;margin-bottom:1.25rem}

/* ── AUTH MODAL ── */
#auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
#auth-overlay.hidden{display:none}
.auth-modal{background:#1e2a14;border:1px solid rgba(200,223,232,.12);border-radius:8px;padding:2rem;width:100%;max-width:380px;position:relative}
.auth-modal h2{font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:.3rem}
.auth-modal p{font-size:.65rem;color:rgba(200,223,232,.45);margin-bottom:1.5rem;line-height:1.6}
.auth-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.auth-field label{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,223,232,.4)}
.auth-field input{background:rgba(255,255,255,.05);border:1px solid rgba(200,223,232,.14);border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.82rem;padding:.5rem .7rem;outline:none;transition:border-color .2s;width:100%}
.auth-field input:focus{border-color:var(--riffle)}
.auth-submit{width:100%;background:linear-gradient(135deg,var(--water),var(--riffle));border:none;border-radius:4px;color:#fff;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:.7rem;cursor:pointer;margin-top:.5rem;transition:opacity .2s}
.auth-submit:hover{opacity:.85}
.auth-switch{text-align:center;margin-top:1rem;font-size:.62rem;color:rgba(200,223,232,.4)}
.auth-switch a{color:var(--riffle);cursor:pointer;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.auth-msg{font-size:.65rem;margin-top:.75rem;padding:.4rem .6rem;border-radius:3px;text-align:center}
.auth-msg.err{background:rgba(192,57,43,.15);color:#e07060;border:1px solid rgba(192,57,43,.25)}
.auth-msg.ok{background:rgba(122,186,90,.12);color:#7aba5a;border:1px solid rgba(122,186,90,.2)}
.auth-close{position:absolute;top:.75rem;right:.9rem;background:none;border:none;color:rgba(200,223,232,.35);font-size:1.1rem;cursor:pointer;line-height:1}
.auth-close:hover{color:var(--cream)}

/* ── USER BUTTON IN TOPBAR ── */
#user-btn{background:none;border:1px solid rgba(200,223,232,.18);border-radius:3px;color:rgba(200,223,232,.6);font-family:'DM Mono',monospace;font-size:.58rem;padding:.38rem .7rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.35rem}
#user-btn:hover{border-color:var(--riffle);color:var(--riffle)}
#user-menu{position:absolute;top:calc(100% + .4rem);right:0;background:#1e2a14;border:1px solid rgba(200,223,232,.12);border-radius:4px;min-width:200px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4)}
#user-menu.hidden{display:none}
.um-email{padding:.65rem .9rem;font-size:.62rem;color:rgba(200,223,232,.45);border-bottom:1px solid rgba(200,223,232,.07)}
.um-item{display:block;width:100%;padding:.55rem .9rem;background:none;border:none;color:rgba(200,223,232,.7);font-family:'DM Mono',monospace;font-size:.62rem;text-align:left;cursor:pointer;transition:background .15s}
.um-item:hover{background:rgba(255,255,255,.04);color:var(--cream)}
.um-item.danger{color:#e07060}
.um-item.danger:hover{background:rgba(192,57,43,.08)}

/* ── CATCH LOG TAB ── */
.catch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:.75rem}
@media(min-width:520px){.catch-grid{grid-template-columns:repeat(4,1fr)}}
.catch-field{display:flex;flex-direction:column;gap:.25rem}
.catch-field label{font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,223,232,.35)}
.catch-field input,.catch-field select{background:rgba(255,255,255,.04);border:1px solid rgba(200,223,232,.12);border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.72rem;padding:.35rem .55rem;outline:none;width:100%}
.catch-field input:focus,.catch-field select:focus{border-color:var(--riffle)}
.catch-field select option{background:#1e2a14}
.catch-row{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .85rem;background:rgba(255,255,255,.025);border:1px solid rgba(200,223,232,.07);border-radius:4px;margin-bottom:.4rem}
.catch-row:hover{border-color:rgba(200,223,232,.14)}
.catch-species{font-family:'Playfair Display',serif;font-size:1rem;color:var(--foam);margin-bottom:.15rem}
.catch-details{font-size:.58rem;color:rgba(200,223,232,.45);line-height:1.6}
.catch-del{background:none;border:none;color:rgba(200,223,232,.2);cursor:pointer;font-size:.9rem;margin-left:auto;flex-shrink:0;padding:.1rem .3rem}
.catch-del:hover{color:#e07060}


/* ── WATERWAY LABELS ── */
.ww-label{background:transparent!important;border:none!important;box-shadow:none!important;
  font-family:'DM Mono',monospace;font-size:10px;font-weight:600;color:#6aaed4;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8);
  white-space:nowrap;pointer-events:none;letter-spacing:.05em}
.ww-label-major{font-size:12px!important;color:#8fd0f0!important}


/* ── MAP STYLE SWITCHER ── */
.map-style-bar{display:flex;gap:.4rem;padding:.5rem 1.25rem;background:rgba(0,0,0,.18);border-bottom:1px solid rgba(200,223,232,.05);align-items:center}
.map-style-bar span{font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,223,232,.3);margin-right:.2rem}
.style-btn{padding:.25rem .65rem;border-radius:3px;font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(200,223,232,.12);background:rgba(255,255,255,.03);color:rgba(200,223,232,.45);cursor:pointer;transition:all .2s}
.style-btn:hover{border-color:rgba(200,223,232,.3);color:var(--cream)}
.style-btn.active{border-color:var(--riffle);color:var(--riffle);background:rgba(106,174,212,.08)}


/* ── SELECTED WATERWAY PANEL ── */
#ww-panel{
  position:absolute;top:10px;right:10px;z-index:500;
  background:rgba(15,22,12,.93);backdrop-filter:blur(10px);
  border:1px solid rgba(106,174,212,.25);border-radius:6px;
  width:240px;max-height:380px;overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  display:none;
}
#ww-panel.visible{display:block}
.ww-panel-head{
  padding:.7rem .85rem .5rem;
  border-bottom:1px solid rgba(200,223,232,.08);
  position:sticky;top:0;background:rgba(15,22,12,.97);
}
.ww-panel-name{
  font-family:'Playfair Display',serif;font-size:1rem;
  color:#8fd0f0;line-height:1.2;margin-bottom:.2rem;
}
.ww-panel-type{font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,223,232,.35)}
.ww-panel-close{
  position:absolute;top:.6rem;right:.7rem;
  background:none;border:none;color:rgba(200,223,232,.3);
  font-size:1rem;cursor:pointer;line-height:1;padding:.1rem .3rem;
}
.ww-panel-close:hover{color:var(--cream)}
.ww-panel-body{padding:.6rem .85rem}
.ww-access-item{
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.5rem 0;border-bottom:1px solid rgba(200,223,232,.05);
}
.ww-access-item:last-child{border-bottom:none}
.ww-access-icon{font-size:1rem;flex-shrink:0;margin-top:.05rem}
.ww-access-info{flex:1}
.ww-access-name{font-size:.68rem;color:var(--foam);margin-bottom:.15rem}
.ww-access-meta{font-size:.58rem;color:rgba(200,223,232,.4);line-height:1.5}
.ww-access-badge{
  display:inline-block;padding:.1rem .4rem;border-radius:2px;
  font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:'DM Mono',monospace;margin-top:.2rem;
}
.ww-fly-btn{
  background:none;border:1px solid rgba(106,174,212,.2);border-radius:3px;
  color:rgba(106,174,212,.6);font-family:'DM Mono',monospace;font-size:.52rem;
  padding:.15rem .4rem;cursor:pointer;margin-top:.2rem;transition:all .2s;
}
.ww-fly-btn:hover{border-color:var(--riffle);color:var(--riffle)}
.ww-stats-row{
  display:flex;gap:.75rem;padding:.5rem 0;
  border-bottom:1px solid rgba(200,223,232,.06);margin-bottom:.4rem;
}
.ww-stat{display:flex;flex-direction:column;gap:.1rem}
.ww-stat label{font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,223,232,.3)}
.ww-stat span{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--foam)}
.ww-stat .u{font-family:'DM Mono',monospace;font-size:.52rem;color:rgba(200,223,232,.35);margin-left:.1rem}


/* ── WATERWAY SEARCH ── */
.ww-search-bar{display:flex;gap:.5rem;padding:.6rem 1.25rem;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(200,223,232,.07);align-items:center;flex-wrap:wrap}
.ww-search-input{flex:1;min-width:180px;background:rgba(255,255,255,.05);border:1px solid rgba(200,223,232,.15);border-radius:3px;color:var(--cream);font-family:'DM Mono',monospace;font-size:.75rem;padding:.4rem .7rem;outline:none;transition:border-color .2s}
.ww-search-input:focus{border-color:var(--riffle)}
.ww-search-input::placeholder{color:rgba(200,223,232,.3)}
.ww-search-results{position:absolute;top:100%;left:0;right:0;background:#1a2a1a;border:1px solid rgba(200,223,232,.15);border-radius:0 0 4px 4px;z-index:600;max-height:200px;overflow-y:auto;display:none}
.ww-search-results.open{display:block}
.ww-search-result-item{padding:.5rem .75rem;font-family:'DM Mono',monospace;font-size:.68rem;color:rgba(200,223,232,.7);cursor:pointer;border-bottom:1px solid rgba(200,223,232,.05);display:flex;align-items:center;gap:.5rem}
.ww-search-result-item:hover{background:rgba(106,174,212,.1);color:var(--cream)}
.ww-search-result-item:last-child{border-bottom:none}
.ww-search-wrap{position:relative;flex:1;min-width:180px}

footer{padding:1.25rem 1.25rem .9rem;border-top:1px solid rgba(200,223,232,.06);font-size:.58rem;color:rgba(200,223,232,.22);display:flex;flex-direction:column;gap:.5rem}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.footer-credit{font-family:'Playfair Display',serif;font-size:.75rem;color:rgba(200,223,232,.35);letter-spacing:.02em}
.footer-credit strong{color:var(--riffle)}
.footer-legal{font-size:.52rem;color:rgba(200,223,232,.18);line-height:1.6}

/* ── SHOP ── */
.shop-hero{padding:1rem 1.1rem .75rem;border-bottom:1px solid var(--line)}
.shop-hero h2{font-family:var(--serif,serif);font-size:1.3rem;margin-bottom:.22rem}
.shop-hero p{font-size:.63rem;color:var(--text2,rgba(205,232,187,.52));font-style:italic}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.82rem;padding:.82rem 1.1rem}
.scard{background:var(--panel,#162413);border:1px solid rgba(160,215,130,.08);border-radius:6px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}
.scard:hover{border-color:rgba(47,168,220,.3);transform:translateY(-2px)}
.scard-body{padding:.62rem}
.scard-nm{font-size:.72rem;font-weight:500;margin-bottom:.12rem}
.scard-tp{font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,232,188,.3);margin-bottom:.4rem}
.scard-pr{font-family:serif;font-size:.98rem;color:#2baadf}
.scard-tbd{font-size:.55rem;color:rgba(200,232,188,.3)}
.btn-view{width:100%;margin-top:.46rem;background:rgba(43,170,223,.1);border:1px solid rgba(43,170,223,.2);border-radius:3px;color:#2baadf;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;padding:.32rem;transition:all .2s;cursor:pointer}
.btn-view:hover{background:rgba(43,170,223,.2)}
#cart-bar-shop{position:sticky;bottom:0;background:var(--panel,#162413);border-top:1px solid rgba(43,170,223,.22);padding:.6rem 1.1rem;display:none;align-items:center;justify-content:space-between}
#cart-bar-shop.on{display:flex}
.cart-inf{font-size:.62rem;color:rgba(205,232,187,.52)}
.cart-tot{font-family:serif;font-size:1.06rem;color:#2baadf}
.btn-co{background:#2baadf;border:none;border-radius:4px;color:#fff;font-size:.59rem;letter-spacing:.11em;text-transform:uppercase;padding:.43rem .86rem;cursor:pointer}
.prod-overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.76);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1rem}
.prod-overlay.on{display:flex}
.prod-modal-inner{background:var(--panel,#162413);border:1px solid rgba(160,215,130,.1);border-radius:8px;width:100%;max-width:418px;max-height:90vh;overflow-y:auto;padding:1.5rem;position:relative}
.prod-nm{font-family:serif;font-size:1.26rem;margin-bottom:.19rem}
.prod-desc{font-size:.62rem;color:rgba(205,232,187,.52);line-height:1.62;margin-bottom:.8rem}
.pfl{font-size:.47rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(205,232,187,.28);margin-bottom:.36rem}
.col-grid{display:flex;flex-wrap:wrap;gap:.32rem;margin-bottom:.8rem}
.col-opt{padding:.19rem .5rem;border-radius:2px;font-size:.55rem;border:1px solid rgba(160,215,130,.1);background:rgba(255,255,255,.03);cursor:pointer;transition:all .15s}
.col-opt.on,.col-opt:hover{border-color:#2baadf;color:#2baadf;background:rgba(43,170,223,.1)}
.qty-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.qbtn{width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(160,215,130,.1);color:#cde8bb;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s;cursor:pointer}
.qbtn:hover{border-color:#4ecb6a;color:#4ecb6a}
#prod-qty{font-family:serif;font-size:1.08rem;min-width:18px;text-align:center}
.prod-pr{font-family:serif;font-size:1.38rem;color:#2baadf;margin-bottom:.8rem}
.btn-add-cart{width:100%;background:linear-gradient(135deg,#2baadf,#5ccef5);border:none;border-radius:4px;color:#fff;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.72rem;transition:opacity .2s;cursor:pointer}
.btn-add-cart:hover{opacity:.85}
.btn-add-cart:disabled{opacity:.38;cursor:not-allowed}
.chk-overlay{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1rem}
.chk-overlay.on{display:flex}

/* ── Clickable waterway polylines ── */
.ww-polyline {
  cursor: pointer;
}
/* Wider invisible stroke doubles the tap target on mobile */
.ww-polyline.leaflet-interactive {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leaflet-interactive.ww-polyline:hover {
  filter: brightness(1.4);
}

/* ── Float type selector ── */
.ftype-btn{background:rgba(255,255,255,.04);border:1px solid rgba(200,223,232,.12);border-radius:3px;color:rgba(200,223,232,.5);font-family:'DM Mono',monospace;font-size:.5rem;padding:.28rem .5rem;cursor:pointer;flex:1;transition:all .2s}
.ftype-btn.ftype-active{background:rgba(0,194,224,.12);border-color:rgba(0,194,224,.35);color:#00c2e0}
/* ── Route timeline ── */
.fp-timeline-item{display:flex;align-items:flex-start;gap:.5rem;padding:.4rem .5rem;background:rgba(255,255,255,.03);border-radius:4px;border-left:2px solid rgba(200,223,232,.15)}
.fp-timeline-item.danger{border-left-color:#f44336}
.fp-timeline-item.rest{border-left-color:#4ecb6a}
.fp-timeline-item.bailout{border-left-color:#00c2e0}
.fp-timeline-item.bridge{border-left-color:rgba(200,223,232,.2)}
.fp-tl-icon{font-size:.85rem;flex-shrink:0;margin-top:.05rem}
.fp-tl-name{font-size:.6rem;color:#d0ecf5;font-weight:600}
.fp-tl-dist{font-size:.52rem;color:rgba(200,223,232,.4)}
.fp-tl-note{font-size:.52rem;color:rgba(200,223,232,.55);margin-top:.1rem}

/* ── Loading skeleton ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{
  background:linear-gradient(90deg,rgba(200,223,232,.04) 25%,rgba(200,223,232,.09) 50%,rgba(200,223,232,.04) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
  border-radius:3px;
  color:rgba(0,0,0,0);
  pointer-events:none;
  min-height:1.2rem;
  min-width:40%;
  display:inline-block;
}
.card-val.skeleton{height:1.75rem;width:55%}
.card-sub.skeleton{height:.75rem;width:75%;margin-top:.4rem}

/* ── Smooth data arrival ── */
.card-val,.card-sub,.card-rating{transition:opacity .3s ease}
.data-fresh{animation:dataFresh .4s ease}
@keyframes dataFresh{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}

/* ── Wade Today card on conditions tab ── */
#wade-today-card{
  margin:.6rem .85rem;border-radius:8px;overflow:hidden;
  border:1px solid rgba(0,194,224,.15);
  background:rgba(0,194,224,.03);
}
#wtd-badge{
  font-size:.62rem;font-weight:700;padding:.18rem .6rem;border-radius:20px;
  background:rgba(255,255,255,.06);color:rgba(200,223,232,.4);
  border:1px solid rgba(255,255,255,.08);
  transition:all .3s;
}

/* ── Top bar refinements ── */
.tb-logo{font-size:1.2rem}
#topbar{padding:.6rem 1rem}

/* ── Password show/hide ── */
.gate-pass-wrap{position:relative;display:flex;align-items:center}
.gate-pass-wrap input{flex:1;padding-right:2.2rem!important}
.gate-eye{position:absolute;right:.6rem;cursor:pointer;font-size:.85rem;opacity:.4;user-select:none;transition:opacity .2s}
.gate-eye:hover{opacity:.8}

/* ── Password strength ── */
#gate-strength-fill.weak{background:#f44336}
#gate-strength-fill.fair{background:#ff9800}
#gate-strength-fill.good{background:#4ecb6a}
#gate-strength-fill.strong{background:#00c2e0}

/* ── Gate card refinements ── */
.gate-card{background:#0a1208;border:1px solid rgba(0,194,224,.15);border-radius:10px;padding:1.75rem;width:100%;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.gate-tabs{display:flex;margin-bottom:1.4rem;border-bottom:1px solid rgba(200,223,232,.08);gap:.2rem}
.gate-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:rgba(200,223,232,.35);font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem;cursor:pointer;transition:all .2s;margin-bottom:-1px}
.gate-tab.active{color:#00c2e0;border-bottom-color:#00c2e0}
.gate-field input:focus{border-color:#00c2e0;box-shadow:0 0 0 2px rgba(0,194,224,.1)}

/* ── Forgot/Reset links ── */
.gate-forgot{text-align:center;margin-top:.85rem;font-size:.57rem;color:rgba(200,223,232,.28);cursor:pointer;transition:color .2s}
.gate-forgot:hover{color:#00c2e0}

/* ── Lucide icons ── */
.tab-icon i, .tab-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  display: block;
}
.card-icon i, .card-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  opacity: .65;
}
.fetch-chip i, .fetch-chip svg {
  width: .75rem;
  height: .75rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: inline-block;
  vertical-align: middle;
  margin-right: .15rem;
}
.gate-feature i, .gate-feature svg {
  width: .85rem;
  height: .85rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: inline-block;
  vertical-align: middle;
  opacity: .7;
}

/* ── Confirmation sheet rating buttons ── */
.cs-rating-btn{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(200,223,232,.12);
  border-radius:4px;color:rgba(200,223,232,.5);font-family:'DM Mono',monospace;
  font-size:.55rem;padding:.35rem .3rem;cursor:pointer;transition:all .15s;text-align:center;
}
.cs-rating-btn.selected{background:rgba(0,194,224,.12);border-color:rgba(0,194,224,.35);color:#00c2e0}
.cs-rating-btn.easy.selected{background:rgba(76,203,106,.12);border-color:rgba(76,203,106,.35);color:#4ecb6a}
.cs-rating-btn.moderate.selected{background:rgba(255,152,0,.1);border-color:rgba(255,152,0,.3);color:#ff9800}
.cs-rating-btn.difficult.selected{background:rgba(244,67,54,.1);border-color:rgba(244,67,54,.3);color:#f44336}

/* ── Recent confirmations in popup ── */
.cb-confirmations{margin-top:.55rem;border-top:1px solid rgba(200,223,232,.08);padding-top:.45rem}
.cb-conf-title{font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(200,223,232,.28);margin-bottom:.35rem}
.cb-conf-item{margin-bottom:.32rem;padding:.3rem .38rem;background:rgba(255,255,255,.03);border-radius:3px;border-left:2px solid rgba(0,194,224,.25)}
.cb-conf-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.1rem}
.cb-conf-name{font-size:.58rem;color:#00c2e0;font-weight:600}
.cb-conf-age{font-size:.5rem;color:rgba(200,223,232,.3)}
.cb-conf-detail{font-size:.54rem;color:rgba(200,223,232,.55)}
.cb-conf-note{font-size:.52rem;color:rgba(200,223,232,.4);font-style:italic;margin-top:.08rem}

/* ── Signup step indicator ── */
.su-step-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(200,223,232,.15);
  border:1.5px solid rgba(200,223,232,.2);
  transition:all .25s;flex-shrink:0;
}
.su-step-dot.active{
  background:#00c2e0;
  border-color:#00c2e0;
  box-shadow:0 0 6px rgba(0,194,224,.4);
}
.su-step-dot.done{
  background:rgba(0,194,224,.3);
  border-color:rgba(0,194,224,.4);
}
.su-step-line{
  flex:1;height:1.5px;
  background:rgba(200,223,232,.1);
  align-self:center;
}