:root {
  color-scheme: light;
  --bg: var(--piscor-colour-canvas); --surface: var(--piscor-colour-surface); --surface-2: var(--piscor-colour-surface-subtle); --card: var(--piscor-colour-surface);
  --text: var(--piscor-colour-text); --muted: var(--piscor-colour-text-muted); --line: var(--piscor-colour-border); --primary: var(--piscor-org-primary, var(--piscor-colour-action));
  --primary-strong: var(--piscor-colour-action-strong); --accent: var(--piscor-org-accent, var(--piscor-colour-accent)); --success: var(--piscor-colour-success); --warning: var(--piscor-colour-warning);
  --danger: var(--piscor-colour-danger); --shadow: var(--piscor-shadow-card);
  --radius: var(--piscor-radius-lg); --nav-width: 244px; --bottom-height: 72px;
}
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { color-scheme: dark; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI",Arial,Helvetica,sans-serif; line-height:1.5; }
a { color:inherit; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:fixed; top:-60px; left:12px; background:var(--text); color:var(--bg); padding:10px 14px; z-index:100; border-radius:8px; }
.skip-link:focus { top:12px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { min-height:100vh; }
.side-nav { position:fixed; inset:0 auto 0 0; width:var(--nav-width); padding:24px 16px; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:22px; font-weight:700; letter-spacing:.18em; padding:4px 10px 24px; }
.brand-emblem { width:42px; height:42px; border-radius:10px; object-fit:cover; }
.brand-wordmark { width:150px; height:auto; object-fit:contain; }
.brand-account-row { display:flex; align-items:center; gap:10px; }
.brand-account-row .brand { flex:0 0 auto; }
.account-context-actions { display:grid; justify-items:start; gap:5px; }
.account-context-badge { display:inline-flex; align-items:center; min-height:25px; padding:4px 8px; border:1px solid color-mix(in srgb,var(--primary) 55%,var(--line)); border-radius:999px; color:var(--text); background:var(--surface-2); font-size:10px; font-weight:800; line-height:1; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.account-switch { color:var(--primary-strong); font-size:11px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.brand small { display:block; color:var(--accent); font-size:8px; letter-spacing:.28em; text-transform:uppercase; }
.brand-fish { width:36px; height:28px; border:2px solid var(--primary); border-radius:50%; display:grid; place-items:center; color:var(--primary); }
.primary-nav,.secondary-nav { display:grid; gap:4px; }
.primary-nav a,.secondary-nav a { display:flex; align-items:center; gap:12px; min-height:43px; padding:8px 12px; border-radius:11px; color:var(--muted); font-weight:600; text-decoration:none; }
.primary-nav a span { width:22px; text-align:center; font-size:19px; }
.primary-nav a:hover,.primary-nav a.active,.secondary-nav a:hover,.secondary-nav a.active { background:var(--surface-2); color:var(--primary-strong); }
.secondary-nav { border-top:1px solid var(--line); margin-top:auto; padding-top:12px; }
.count { margin-left:auto; min-width:22px; height:22px; display:grid; place-items:center; background:var(--primary); color:white; border-radius:50%; font-size:12px; }
.profile { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding:16px 8px 0; margin-top:12px; }
.profile span:last-child { min-width:0; }
.profile strong,.profile small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile small { color:var(--muted); font-size:12px; }
.avatar { flex:0 0 38px; width:38px; height:38px; border:0; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; font-weight:700; }
main { margin-left:var(--nav-width); padding:0 clamp(20px,4vw,58px) 64px; max-width:1500px; }
.page-bar { min-height:106px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.page-bar h1 { margin:0; font-size:clamp(24px,3vw,34px); letter-spacing:-.03em; }
.eyebrow { color:var(--primary-strong); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; margin:0 0 4px; }
.page-actions { display:flex; align-items:center; gap:12px; }
.icon-button { width:auto; min-width:44px; height:44px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; }
.mobile-header,.bottom-nav { display:none; }
.screen { animation:screen-in .18s ease-out; }
@keyframes screen-in { from { opacity:.35; transform:translateY(5px); } }
.card,.hero-card,.quick-grid a,.more-grid a { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card { padding:24px; }
.hero-card { min-height:230px; padding:clamp(24px,5vw,52px); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; color:#fff; overflow:hidden; position:relative; background:linear-gradient(90deg,rgba(5,18,10,.92),rgba(8,28,15,.35)),radial-gradient(circle at 75% 55%,#617c46,#1b3825 55%,#0b1b12); }
.hero-card::after { content:""; position:absolute; right:-5%; bottom:-55%; width:55%; aspect-ratio:1; border-radius:50%; border:35px solid rgba(148,177,95,.25); }
.hero-card > * { position:relative; z-index:1; }
.hero-card h2 { font-size:clamp(28px,4vw,44px); margin:15px 0 4px; }
.hero-card p { color:#d5dfd5; margin:0 0 20px; }
.hero-stat { text-align:right; }
.hero-stat strong,.hero-stat span,.hero-stat small { display:block; }
.hero-stat strong { font-size:30px; }
.hero-stat span,.hero-stat small { color:#d5dfd5; }
.status-chip { display:inline-flex; align-items:center; padding:5px 9px; background:var(--surface-2); color:var(--muted); border-radius:999px; font-size:11px; font-weight:700; }
.status-chip.success { background:color-mix(in srgb,var(--success) 18%,transparent); color:var(--success); }
.hero-card .status-chip.success { color:#d6ffc3; background:rgba(87,145,61,.4); }
.status-chip.warning { background:color-mix(in srgb,var(--warning) 16%,transparent); color:var(--warning); }
.button-row { display:flex; flex-wrap:wrap; gap:10px; }
.button { min-height:43px; padding:10px 16px; display:inline-flex; justify-content:center; align-items:center; border:1px solid transparent; border-radius:10px; text-decoration:none; font-weight:700; cursor:pointer; }
.button.primary { background:var(--primary); color:#fff; }
html[data-theme="dark"] .button.primary { color:#07100c; }
.button.ghost { background:transparent; border-color:var(--line); color:var(--text); }
.hero-card .button.ghost { border-color:rgba(255,255,255,.4); color:#fff; }
.button.full { width:100%; margin-top:12px; }
.text-button,.back-link { border:0; background:none; padding:4px 0; color:var(--primary-strong); font-weight:700; cursor:pointer; text-decoration:none; }
.back-link { display:inline-block; margin-bottom:16px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.quick-grid a,.more-grid a { display:grid; grid-template-columns:42px 1fr; column-gap:12px; padding:18px; color:inherit; text-decoration:none; box-shadow:none; }
.quick-grid a > span,.more-grid a > span { grid-row:1 / 3; width:42px; height:42px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary-strong); border-radius:12px; font-size:20px; }
.quick-grid small,.more-grid small { color:var(--muted); }
.dashboard-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:20px; }
.card-heading,.intro-row,.results-heading,.toolbar,.card-footer,.water-summary { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.card h2,.card h3,.card-heading h3,.intro-row h2 { margin-top:0; }
.card-heading p { margin:0; color:var(--muted); }
.latest-catch img { width:100%; height:145px; object-fit:contain; margin:5px 0; }
.weight,.weather,.price { font-size:24px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat-grid span,.condition-row span { padding:14px; border-radius:12px; background:var(--surface-2); color:var(--muted); }
.stat-grid strong,.condition-row strong { display:block; color:var(--text); font-size:22px; }
.condition-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.toolbar { margin-bottom:18px; }
.search { flex:1; max-width:700px; min-height:48px; display:flex; align-items:center; gap:10px; padding:0 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.results-heading { align-items:center; }
.venue-list,.stack { display:grid; gap:18px; }
.venue-card { display:grid; grid-template-columns:260px 1fr; padding:0; overflow:hidden; }
.venue-art,.mini-water { background:linear-gradient(150deg,rgba(5,20,12,.12),rgba(5,20,12,.7)),radial-gradient(ellipse at center,#436c5a 0 34%,#405d35 35% 46%,#1e3827 47%); }
.water-two { background:linear-gradient(150deg,rgba(5,20,12,.12),rgba(5,20,12,.7)),radial-gradient(ellipse at 60% 50%,#426777 0 32%,#56713d 33% 48%,#203327 49%); }
.water-three { background:linear-gradient(150deg,rgba(5,20,12,.12),rgba(5,20,12,.7)),radial-gradient(ellipse at 40% 46%,#596e65 0 31%,#6c7a45 32% 45%,#263929 46%); }
.venue-art { min-height:260px; position:relative; }
.venue-art > span { position:absolute; top:14px; left:14px; padding:5px 9px; background:#fff; color:#17231c; border-radius:999px; font-size:11px; font-weight:700; }
.venue-copy { padding:24px; }
.venue-copy > p { color:var(--muted); }
.facility-icons { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.facility-icons > span { position:relative; width:42px; height:42px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary-strong); border:1px solid var(--line); border-radius:12px; font-weight:700; font-size:13px; }
.facility-icons small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.facility-icons.large > span { width:54px; height:54px; }
.card-footer { align-items:center; border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.venue-hero { min-height:330px; border-radius:var(--radius); padding:36px; color:#fff; display:flex; align-items:flex-end; box-shadow:var(--shadow); }
.venue-hero h2 { font-size:clamp(30px,5vw,52px); margin:12px 0 0; }
.venue-hero p { margin:0; color:#d7ded9; }
.detail-layout,.booking-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; margin-top:22px; align-items:start; }
.tab-row { display:flex; overflow:auto; gap:22px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.tab-row a { flex:none; padding:12px 0; color:var(--muted); text-decoration:none; }
.tab-row a:first-child { color:var(--primary-strong); border-bottom:3px solid var(--primary); }
.check-list { padding-left:22px; }
.check-list li { margin:9px 0; }
.booking-card { position:sticky; top:20px; }
.intro-row { align-items:center; margin-bottom:20px; }
.hunt-progress { min-width:190px; }
.hunt-progress strong,.hunt-progress span { display:block; }
.hunt-progress progress { width:100%; accent-color:var(--primary); }
.water-summary { padding-bottom:20px; border-bottom:1px solid var(--line); }
.capacity { text-align:right; }
.capacity strong { display:block; font-size:34px; }
.capacity span { color:var(--muted); }
.availability-key { display:flex; flex-wrap:wrap; gap:15px; margin:18px 0; color:var(--muted); font-size:13px; }
.availability-key i { display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:50%; background:var(--success); }
.availability-key i.occupied { background:var(--danger); }.availability-key i.closed { background:var(--muted); }.availability-key i.shared { background:#6654a3; }
.swim-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.swim { min-height:82px; padding:14px; text-align:left; border:1px solid var(--line); border-left:5px solid var(--success); background:var(--surface); color:var(--text); border-radius:11px; cursor:pointer; }
.swim strong,.swim span { display:block; }.swim span { color:var(--muted); font-size:13px; }.swim.occupied { border-left-color:var(--danger); }.swim.closed { border-left-color:var(--muted); }.swim.shared { border-left-color:#6654a3; }
.boundary-note,.information-box { margin:20px 0 0; padding:15px; background:var(--surface-2); border-radius:12px; }
.species-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.species-category + .species-category { margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.species-category-heading { margin-bottom:15px; }
.species-category-heading h3 { margin:3px 0 0; font-size:clamp(22px,3vw,30px); }
.species-card { overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.species-image-placeholder { width:100%; min-height:180px; padding:22px; display:grid; place-content:center; gap:8px; text-align:center; background:linear-gradient(145deg,#07171c,#0d2a2f); color:#f3f2ed; border-bottom:1px solid var(--line); }
.species-image-placeholder span { color:#39b8ad; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.species-image-placeholder strong { font-size:clamp(18px,2vw,24px); line-height:1.15; }
.species-card > div:last-child { padding:18px; }
.species-card h3 { margin:10px 0 4px; }.species-card p { color:var(--muted); font-size:14px; }
.species-request { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:20px; }
.species-request form { display:grid; gap:12px; }
.species-request label,.field { display:grid; gap:6px; font-weight:600; }
input,textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); }
.form-message { min-height:24px; color:var(--primary-strong); font-weight:600; }
.stepper { display:flex; max-width:650px; margin:0 auto 24px; color:var(--muted); }
.stepper span { flex:1; text-align:center; border-bottom:3px solid var(--line); padding:8px; }.stepper .active { color:var(--primary-strong); border-color:var(--primary); }
fieldset { border:0; padding:0; margin:24px 0; } legend { font-weight:700; margin-bottom:10px; }
.choice-card { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid var(--line); border-radius:12px; margin:9px 0; cursor:pointer; }
.choice-card:has(input:checked) { border-color:var(--primary); background:var(--surface-2); }
.choice-card input { width:auto; accent-color:var(--primary); }.choice-card span { flex:1; }.choice-card strong,.choice-card small { display:block; }.choice-card small { color:var(--muted); }
.friends-picker { background:var(--surface-2); border-radius:12px; padding:16px; margin-bottom:16px; }.friends-picker label { display:block; padding:8px 0; }.friends-picker input { width:auto; }
.summary-line { display:flex; justify-content:space-between; gap:15px; padding:12px 0; border-bottom:1px solid var(--line); }
.review-venue { display:flex; align-items:center; gap:14px; padding:14px 0 20px; }.mini-water { width:80px; height:60px; border-radius:10px; }.review-venue p { margin:2px 0; color:var(--muted); }
.member-list > div { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }.member-list span:nth-child(2) { flex:1; }.member-list strong,.member-list small { display:block; }.member-list small { color:var(--muted); }
.check { display:flex; gap:10px; margin:20px 0; }.check input { width:auto; }
.invitation-wrap { max-width:680px; margin:20px auto; }.invitation-card { padding:clamp(24px,5vw,44px); }.invitation-card > h2 { font-size:34px; margin:8px 0 18px; }
.invitation-facts { display:grid; grid-template-columns:repeat(3,1fr); margin:15px 0; }.invitation-facts div { padding:12px; border-right:1px solid var(--line); }.invitation-facts div:last-child { border:0; }.invitation-facts dt { color:var(--muted); font-size:12px; }.invitation-facts dd { margin:4px 0; font-weight:700; }
.live-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:20px; }.qr-card { text-align:center; }.qr-placeholder { width:160px; height:160px; margin:0 auto 16px; display:grid; place-items:center; border:12px dotted var(--text); font-size:60px; }
.claim-list { display:grid; gap:9px; }.claim-list button { display:flex; justify-content:space-between; text-align:left; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); cursor:pointer; }.claim-list strong,.claim-list small { display:block; }.claim-list small { color:var(--muted); }.claim-list button > span:last-child { color:var(--primary-strong); font-weight:700; }
.active-claim { margin:16px 0; padding:15px; border-left:4px solid var(--primary); background:var(--surface-2); }.active-claim strong,.active-claim span { display:block; }.active-claim span { color:var(--muted); }
.booking-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:28px; }.booking-row h3 { margin:9px 0 2px; }.booking-row p,.booking-row small { display:block; color:var(--muted); }
.more-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.empty-state { max-width:600px; margin:60px auto; text-align:center; }.empty-state > span { font-size:50px; color:var(--primary); }
dialog { width:min(540px,calc(100% - 32px)); padding:30px; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); } dialog::backdrop { background:rgba(0,0,0,.65); }.dialog-close { float:right; border:0; background:none; color:var(--text); font-size:26px; cursor:pointer; }
:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 75%,white); outline-offset:3px; }

@media (max-width:1050px) { .dashboard-grid { grid-template-columns:1fr 1fr; }.latest-catch { grid-column:span 2; }.quick-grid { grid-template-columns:1fr 1fr; }.species-grid { grid-template-columns:repeat(2,1fr); }.more-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) {
  body { padding-bottom:var(--bottom-height); }
  .side-nav,.page-bar { display:none; }.mobile-header { position:sticky; top:0; z-index:20; height:64px; padding:8px 16px; display:flex; justify-content:space-between; align-items:center; background:var(--surface); border-bottom:1px solid var(--line); }.mobile-header .brand { padding:0; font-size:18px; }.mobile-header .brand-emblem { width:42px; height:42px; }.mobile-header .account-context-badge { min-height:21px; padding:3px 6px; font-size:8px; }.mobile-header .account-switch { font-size:9px; }
  main { margin:0; padding:18px 16px 30px; }
  .bottom-nav { position:fixed; inset:auto 0 0; z-index:30; height:var(--bottom-height); display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }.bottom-nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; color:var(--muted); text-decoration:none; font-size:10px; font-weight:600; }.bottom-nav a span { font-size:20px; }.bottom-nav a.active { color:var(--primary-strong); }
  .hero-card { min-height:330px; align-items:flex-start; flex-direction:column; justify-content:flex-end; padding:24px; }.hero-stat { text-align:left; }.hero-card::after { width:85%; right:-30%; bottom:-30%; }
  .quick-grid { grid-template-columns:1fr 1fr; gap:9px; }.quick-grid a { display:flex; flex-direction:column; padding:14px; }.quick-grid a > span { margin-bottom:9px; }.quick-grid small { font-size:11px; }
  .dashboard-grid,.detail-layout,.booking-layout,.live-grid,.species-request { grid-template-columns:1fr; }.latest-catch { grid-column:auto; }.booking-card { position:static; }
  .venue-card { grid-template-columns:1fr; }.venue-art { min-height:180px; }.toolbar { align-items:stretch; }.toolbar .button { padding-inline:11px; }.card-heading { gap:10px; }
  .venue-hero { min-height:260px; padding:24px; }.tab-row { gap:18px; }.intro-row { align-items:flex-start; flex-direction:column; }.swim-list { grid-template-columns:1fr 1fr; }.water-summary { flex-direction:column; }.capacity { text-align:left; }
  .species-grid { grid-template-columns:1fr 1fr; gap:10px; }.species-image-placeholder { min-height:125px; padding:14px; }.species-card > div:last-child { padding:13px; }.species-card p { font-size:12px; }.hunt-progress { width:100%; }
  .stepper span { font-size:11px; }.booking-layout { gap:12px; }.card { padding:18px; }.invitation-facts { grid-template-columns:1fr; }.invitation-facts div { border-right:0; border-bottom:1px solid var(--line); }.invitation-card .button-row { display:grid; }
  .booking-row { grid-template-columns:1fr; gap:10px; }.booking-row .button { width:100%; }.more-grid { grid-template-columns:1fr; }.page-actions { display:none; }
}
@media (max-width:420px) { .species-grid,.swim-list,.quick-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* PiscorX premium visual refresh — August 2026 */
body {
  background:
    radial-gradient(circle at 86% 2%, rgba(225,184,90,.13), transparent 23rem),
    radial-gradient(circle at 8% 70%, rgba(47,157,112,.14), transparent 27rem),
    var(--background);
}
.page-bar h1 { letter-spacing: -.035em; }
.card {
  border-color: color-mix(in srgb, var(--line) 82%, #e1b85a);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
}
.hero-card {
  border: 1px solid rgba(225,184,90,.24);
  box-shadow: 0 26px 60px rgba(0,0,0,.28);
}
.button.primary {
  background: linear-gradient(135deg, #f2d58c, #d9aa4b);
  color: #142118;
  box-shadow: 0 10px 28px rgba(217,170,75,.18);
}
.eyebrow { color: color-mix(in srgb, var(--accent) 70%, #e1b85a); }
@media (max-width:760px) {
  main { padding-top: 1rem; }
  .mobile-header { background: color-mix(in srgb, var(--surface) 88%, transparent); }
  .bottom-nav { background: color-mix(in srgb, var(--surface) 94%, transparent); }
  .card { border-radius: 1rem; }
}