/* Waypoint HQ theme: SportsEngine-style layout, Waypoint dark look.
   Deep navy, glassy blue-bordered panels, glowing blue buttons, condensed uppercase labels. Loaded after app.css. */
:root {
  --bg: #050a16;
  --bg2: #08101f;
  --panel: #0c1630;
  --panel2: #0f1b3a;
  --panel3: #13224a;
  --line: #182a52;
  --line2: #24396a;
  --text: #e7ecf5;
  --muted: #93a0bd;
  --dim: #6b7aa0;
  --navy: #040814;
  --blue: #3b7bff;
  --blue2: #1d4ed8;
  --glow: 0 0 18px rgba(59, 123, 255, .45);
  --gold: #f5c451;
  --green: #22c55e;
  --amber: #f59e0b;
  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -18px rgba(0, 0, 0, .7);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--text); }
body { background: radial-gradient(1200px 700px at 85% -10%, rgba(29, 78, 216, .22), transparent 60%), linear-gradient(180deg, #050a16, #03060f); }
a { color: #8fb4ff; }

/* ---------- shell: top bar + grouped side menu ---------- */
#shell.hq { display: grid; grid-template-columns: 252px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "bar bar" "side main"; min-height: 100vh; }
#hqbar { grid-area: bar; position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; background: rgba(4, 8, 20, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; border-bottom: 1px solid #13234a; }
.hq-logo { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; padding-right: 10px; }
.hq-logo img { height: 24px; width: auto; filter: drop-shadow(0 4px 14px rgba(47, 107, 255, .35)); }
.hq-logo b { font: 800 20px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.hq-logo span { font: 800 11px var(--display); letter-spacing: .2em; color: #9ec0ff; background: rgba(37, 99, 235, .2); border: 1px solid rgba(59, 123, 255, .35); padding: 2px 7px; border-radius: 4px; }
#hqbar .org-switch { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: #fff; text-align: left; max-width: 300px; border: 1px solid #1b2d58; background: #0b1530; }
#hqbar .org-switch:hover { border-color: #2f4f94; }
#hqbar .org-switch b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hqbar .org-switch small { color: var(--dim); font-size: 11px; display: block; }
#hqbar .team-av, .team-av { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(180deg, #2a4fa8, #13306f); color: #fff; border: 1px solid #3b5fb5; font: 800 13px var(--display); letter-spacing: .04em; }
.team-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
#hqbar .icon-btn { color: #c7d4f0; }
#hqbar .icon-btn:hover { background: #0f1b3a; color: #fff; }
#hqbar .wpx-btn { border-color: #1b2d58; background: #0b1530; color: #fff; padding: 6px 8px; }
.hq-user { display: flex; align-items: center; gap: 8px; color: #fff; padding: 4px 8px 4px 4px; border-radius: 10px; }
.hq-user:hover { background: #0f1b3a; }
.hq-user .av { width: 30px; height: 30px; font-size: 12px; background: linear-gradient(180deg, #3b7bff, #1d4ed8); color: #fff; border: 0; }
.hq-user .u-name { font-weight: 600; font-size: 14px; }
.user-menu { display: grid; gap: 4px; }
.user-menu a, .user-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--text); font-weight: 500; text-align: left; }
.user-menu a:hover, .user-menu button:hover { background: var(--panel3); }

#shell.hq #side { grid-area: side; position: sticky; top: 60px; height: calc(100vh - 60px); background: linear-gradient(180deg, #060c1c, #040814); border-right: 1px solid #13234a; padding: 8px 10px 14px; gap: 6px; }
#shell.hq #content { grid-area: main; min-width: 0; position: relative; }
#nav { gap: 2px; margin-top: 0; }
#nav .nav-h { font: 800 11px var(--display); letter-spacing: .2em; text-transform: uppercase; color: #5f71a0; padding: 14px 10px 6px; }
#nav a { padding: 8px 10px; border-radius: 8px; color: #b7c3dd; font-weight: 500; font-size: 14px; }
#nav a .ic { color: #6b7aa0; }
#nav a:hover { background: #0b1530; color: #fff; }
#nav a.on { background: linear-gradient(90deg, rgba(59, 123, 255, .28), rgba(59, 123, 255, .06)); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(59, 123, 255, .3); }
#nav a.on::before { left: -10px; top: 7px; bottom: 7px; width: 3px; background: var(--blue); box-shadow: var(--glow); }
#nav a.on .ic { color: #8fb4ff; }
#nav a.ext small { margin-left: auto; color: var(--dim); }
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #13234a; }
.side-foot a { color: var(--dim); }
.role-pill { background: #0b1530; color: #9ec0ff; border: 1px solid #1b2d58; font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- page ---------- */
#main { padding: 26px 34px 56px; max-width: 1320px; }
#content::before { display: none; }
.page-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #13234a; align-items: flex-end; }
.eyebrow { color: #8fb4ff; font: 800 12px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.page-head h1 { font: 700 34px/1.1 var(--body); text-transform: none; letter-spacing: -.02em; margin-top: 4px; color: #fff; }
.page-head .sub { color: var(--muted); font-size: 14px; }
h3, h4 { color: #fff; }

.card { background: linear-gradient(180deg, #0c1630, #091124); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card.click:hover { border-color: #2f4f94; transform: translateY(-2px); box-shadow: var(--shadow), 0 0 0 1px rgba(59, 123, 255, .15); }
.card-head h3, .cal-head h3 { font: 800 19px var(--display); text-transform: uppercase; letter-spacing: .1em; color: #fff; }
.card h4.sec, .m-body h4.sec, h4.sec { font: 800 13px var(--display); color: #8fb4ff; text-transform: uppercase; letter-spacing: .18em; }
.stat { background: linear-gradient(180deg, #0f1b3a, #0a1328); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.stat small { color: var(--muted); font: 800 11px var(--display); letter-spacing: .18em; }
.stat b { font: 700 32px/1.15 var(--body); color: #fff; letter-spacing: -.02em; }
.stat span { color: var(--dim); }
.stat.hot { border-color: rgba(239, 68, 68, .45); background: radial-gradient(120% 120% at 100% 0%, rgba(239, 68, 68, .2), transparent 60%), linear-gradient(180deg, #0f1b3a, #0a1328); }
.stat.hot b { color: #ff8b8b; }
.stat-ic { background: #13224a; color: #8fb4ff; border: 1px solid #24396a; }

/* buttons + inputs */
.btn { height: 40px; border-radius: 10px; font: 700 13px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.btn.primary { background: linear-gradient(180deg, #4d84ff, #1d4ed8); color: #fff; border: 1px solid #3b7bff; box-shadow: 0 0 14px rgba(37, 99, 235, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.primary:hover { background: linear-gradient(180deg, #6394ff, #2457e6); box-shadow: 0 0 22px rgba(59, 123, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.ghost { background: #0b1530; color: #e7ecf5; border: 1px solid #24396a; }
.btn.ghost:hover { border-color: #3b5fb5; background: #0f1b3a; }
.btn.danger, .btn.ghost.danger { color: #ff8b8b; }
.btn.lg { height: 46px; }
.sm-btn { text-transform: none; letter-spacing: 0; }
.icon-btn { color: #9fb0d4; }
.icon-btn:hover { background: #13224a; color: #fff; }
.link { color: #8fb4ff; }
input, select, textarea { color: var(--text); }
.field input, .field select, .field textarea, .sel, .mform input, .mform select, .mform textarea, .composer textarea, input.sc, .chat-form textarea {
  background: #060c1c !important; border: 1px solid #1b2d58 !important; color: var(--text) !important; border-radius: 10px !important; }
.field input:focus, .field select:focus, .field textarea:focus, .sel:focus, .composer textarea:focus, .chat-form textarea:focus { outline: 2px solid rgba(59, 123, 255, .45); border-color: var(--blue) !important; }
.field > span, .field span:first-child { color: #8fa0c6; font: 800 12px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.check { color: var(--text); }
select option { background: #0c1630; }

/* segmented controls, chips, tags */
.seg { background: #060c1c; border: 1px solid #1b2d58; border-radius: 10px; }
.seg button { color: var(--muted); border-radius: 8px; font: 700 12px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.seg button.on { background: linear-gradient(180deg, #1c3270, #13245a); color: #fff; box-shadow: inset 0 0 0 1px #3b5fb5; }
.chip, .fchip { background: #0b1530; border: 1px solid #1b2d58; color: #c7d4f0; }
.fchip.on { background: rgba(59, 123, 255, .2); border-color: #3b7bff; color: #fff; }
.kind { font: 800 11px var(--display); letter-spacing: .14em; text-transform: uppercase; background: #13224a; color: #c7d4f0; }
.k-meet { background: rgba(37, 99, 235, .25); color: #9ec0ff; }
.k-practice { background: #13224a; color: #c7d4f0; }
.k-fund { background: rgba(245, 158, 11, .18); color: #fcd27b; }
.k-team { background: rgba(34, 197, 94, .16); color: #86efac; }
.k-other { background: rgba(124, 58, 237, .2); color: #c4b5fd; }
.status-btn { font: 800 11px var(--display); letter-spacing: .14em; text-transform: uppercase; border: 1px solid transparent; }
.status-btn.paid { background: rgba(34, 197, 94, .14); color: #6ee7a0; border-color: rgba(34, 197, 94, .35); }
.status-btn.open { background: #13224a; color: #c7d4f0; border-color: #24396a; }
.status-btn.od { background: rgba(239, 68, 68, .14); color: #ff8b8b; border-color: rgba(239, 68, 68, .4); }
.bal.due { color: #ff8b8b; }

/* tables */
.tbl th { background: #0a1328; color: #8fa0c6; border-bottom: 1px solid var(--line); font: 800 11px var(--display); letter-spacing: .16em; }
.tbl td { border-bottom: 1px solid #13234a; }
.tbl tr:hover td { background: rgba(59, 123, 255, .05); }

/* lists */
.ev-row { border-bottom: 1px solid #13234a; }
.ev-row:hover { background: rgba(59, 123, 255, .05); }
.ev-date { background: #0b1530; border: 1px solid #1b2d58; color: #fff; }
.ev-date small { color: #8fb4ff; }
.ev-date b { font: 800 26px var(--display); }
.post { border-color: var(--line); background: #0a1328; }
.post.pinned { border-color: #3b5fb5; background: linear-gradient(180deg, rgba(59, 123, 255, .1), #0a1328); }
.post .av, .member .av, .composer .av, .av { background: #13224a; color: #c7d4f0; border-color: #24396a; }
.cal { background: #13234a; }
.cal-cell { background: #0a1328; }
.cal-cell.off { background: #070e1e; }
.cal-cell.today .dn { background: var(--blue); color: #fff; box-shadow: var(--glow); }
.cal-dow { background: #0b1530; color: var(--muted); }
.cal-ev { background: rgba(37, 99, 235, .25); color: #cfe0ff; }

/* modal */
.modal-back { background: rgba(2, 5, 12, .7); backdrop-filter: blur(4px); }
.modal-card { background: linear-gradient(180deg, #0f1b3a, #0a1328); border: 1px solid #24396a; border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(59, 123, 255, .08); }
.m-head { border-bottom: 1px solid #1b2d58; }
.m-head h3 { font: 800 24px var(--display); text-transform: uppercase; letter-spacing: .08em; }
.m-foot { border-top: 1px solid #1b2d58; background: #08101f; }
.m-err { background: rgba(239, 68, 68, .12); color: #ff8b8b; border-color: rgba(239, 68, 68, .35); }

.fund-num b, .ring b, .code b, .pb b, .ld-row b, .pod span, .scoresheet .aa { font-family: var(--display); }
.fund-hero, .step.on { background: linear-gradient(180deg, #0f1b3a, #0a1328); }
.sal-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(59, 123, 255, .22), transparent 55%), linear-gradient(180deg, #0f1b3a, #0a1328); border-color: #24396a; }
.bar { background: #13224a; }
.bar i { background: linear-gradient(90deg, #3b7bff, #60a5fa); box-shadow: var(--glow); }
.code { background: #060c1c; border-color: #1b2d58; color: #fff; }
.code.fam { background: rgba(59, 123, 255, .08); }
.empty-ic { background: #13224a; color: #8fb4ff; border: 1px solid #24396a; }
.empty h4 { color: #fff; }
.import-help { background: #060c1c; border-color: #1b2d58; }
.import-help code { background: #0b1530; color: var(--text); }
.notice { background: rgba(59, 123, 255, .08); border-color: #24396a; color: #c7d4f0; }
.prog { background: linear-gradient(180deg, #0c1630, #091124); }
.prog.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, var(--glow); }
.res-W { background: rgba(34, 197, 94, .18); color: #6ee7a0; }
.res-L { background: rgba(239, 68, 68, .18); color: #ff8b8b; }
.res-T { background: #13224a; color: var(--muted); }
.b-game { background: #0a1328; border-color: #24396a; }
.b-game .win { background: rgba(59, 123, 255, .18); }

/* chat */
.chat { background: linear-gradient(180deg, #0c1630, #091124); border-color: var(--line); }
.chat-list { border-color: #13234a; }
.chat-ch.on { background: rgba(59, 123, 255, .18); }
.chat-ch:hover { background: #0b1530; }
.msg .bubble p { background: #13224a; border-color: #24396a; }
.msg.mine .bubble p { background: linear-gradient(180deg, #2a5ad8, #1d4ed8); border-color: #3b7bff; color: #fff; }
.notif { border-color: #1b2d58; }
.notif.new { background: rgba(59, 123, 255, .1); border-color: #3b5fb5; }
.bell .badge { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, .6); }

/* setup checklist */
.setup { margin-bottom: 18px; border-color: #24396a; background: radial-gradient(100% 160% at 100% 0%, rgba(59, 123, 255, .16), transparent 55%), linear-gradient(180deg, #0c1630, #091124); }
.setup .bar { margin: 4px 0 14px; height: 6px; }
.setup-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.setup-step { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #1b2d58; border-radius: 10px; background: #08101f; color: var(--text); text-decoration: none; }
.setup-step:hover { border-color: #3b5fb5; }
.setup-step .ck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2f4f94; display: grid; place-items: center; flex: none; color: #fff; }
.setup-step.done .ck { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(34, 197, 94, .5); }
.setup-step.done b { color: var(--muted); text-decoration: line-through; }

/* logo lockup (onboarding etc.) */
.wp-lockup { display: inline-flex; align-items: center; gap: calc(var(--h) * .16); }
.wp-lockup img { height: calc(var(--h) * .5); width: auto; filter: drop-shadow(0 4px 14px rgba(47, 107, 255, .35)); }
.wp-lockup b { font: 800 calc(var(--h) * .44) var(--display); color: #fff; letter-spacing: .12em; text-transform: uppercase; }
.wp-lockup span { font: 800 calc(var(--h) * .2) var(--display); color: #9ec0ff; background: rgba(37, 99, 235, .2); border: 1px solid rgba(59, 123, 255, .35); padding: 2px 7px; border-radius: 4px; letter-spacing: .2em; }

/* onboarding */
.onboard { background: transparent; }
.onboard .glow { display: none; }
.onboard-card { background: linear-gradient(180deg, #0c1630, #091124); border: 1px solid #24396a; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.onboard-card h1 { font-family: var(--body); text-transform: none; font-size: 32px; color: #fff; }
.choice { background: #08101f; border: 1px solid #24396a; color: var(--text); }
.choice:hover { border-color: var(--blue); background: rgba(59, 123, 255, .1); box-shadow: var(--glow); }
.spinner { border-color: #24396a; border-top-color: var(--blue); }

/* website builder */
.spon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 0 16px 16px; }
.spon { display: grid; gap: 4px; place-items: center; text-align: center; padding: 12px; border: 1px solid #1b2d58; border-radius: 10px; background: #08101f; min-height: 90px; color: var(--text); }
.spon:hover { border-color: #3b5fb5; }
.spon img { max-height: 44px; max-width: 100%; object-fit: contain; }
.ticks a { color: #8fb4ff; }
.ev-list .ev-row { border-radius: 0; }

/* mobile */
#bottom { background: rgba(4, 8, 20, .94); backdrop-filter: blur(14px); border-top: 1px solid #13234a; }
#bottom a { color: var(--dim); }
#scrim { background: rgba(2, 5, 12, .7); }
@media (max-width: 900px) {
  #shell.hq { grid-template-columns: 1fr; grid-template-areas: "bar" "main"; }
  #shell.hq #side { position: fixed; top: 60px; left: 0; bottom: 0; width: 272px; height: auto; transform: translateX(-100%); transition: transform .2s; z-index: 60; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
  #shell.hq.open #side { transform: none; }
  #shell.hq.open #scrim { display: block; position: fixed; inset: 60px 0 0; z-index: 55; }
  #hqbar .org-switch small, .hq-user .u-name, .hq-logo span { display: none; }
  #hqbar .org-switch { max-width: 170px; }
  #main { padding: 18px 16px 92px; }
  #bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  #bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; }
}
#bottom a.on, #bottom a.on .ic { color: #8fb4ff; filter: none; }
@media (max-width: 520px) { .hq-logo b { display: none; } #hqbar { gap: 8px; padding: 0 10px; } #wpApps { display: none; } }