:root { --hub-nav: 224px; --hub-bg: #0c1516; --hub-card: #131f20; --hub-border: #293638; --hub-text: #eef2ee; --hub-muted: #9caeac; --hub-accent: #d7ff3f; }
body { background: var(--hub-bg); }
body[data-page="home"],body[data-page="moves"] { overflow: auto; }
.hub-nav { position: fixed; inset: 0 auto 0 0; width: var(--hub-nav); z-index: 35; display: flex; flex-direction: column; padding: 34px 16px 24px; background: #0a1112; border-right: 1px solid var(--hub-border); }
.hub-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: white; padding: 0 10px; margin-bottom: 58px; font-weight: 800; font-size: 24px; letter-spacing: -.055em; }
.hub-brand small { display: block; font-size: 9px; letter-spacing: .16em; font-weight: 500; color: #94aaa2; margin-top: 3px; }
.hub-logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--hub-accent); display: grid; place-items: center; color: #132014; }
.hub-logo svg { width: 26px; height: 26px; }
.nav-section-label { margin: 0 14px 13px; font-size: 11px; letter-spacing: .13em; color: #7b918f; font-weight: 650; }
.hub-nav > a[data-hub-page] { min-height: 50px; display: flex; align-items: center; gap: 13px; border-radius: 9px; margin-bottom: 6px; padding: 10px 15px; color: #aebcb8; font-size: 15px; text-decoration: none; border: 1px solid transparent; }
.hub-nav > a[data-hub-page] svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; }
.hub-nav > a:hover { background: #ffffff06; }
.hub-nav > a[aria-current="page"] { color: var(--hub-accent); background: #222d18; border-color: #3b4928; }
.nav-count { margin-left: auto; color: #b5c5be; font-size: 12px; font-variant-numeric: tabular-nums; }
.nav-bottom { display: flex; align-items: center; gap: 11px; margin: auto 8px 0; padding-top: 22px; border-top: 1px solid #293638; }
.coach-avatar { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #293838; color: #d8e6df; font-size: 14px; }
.nav-bottom strong { display: block; font-size: 13px; color: #e7ede9; font-weight: 600; }
.nav-bottom div > span { display: block; color: #829b93; font-size: 12px; margin-top: 2px; }
.hub-page { margin-left: var(--hub-nav); padding: 32px clamp(24px,3vw,56px) 24px; min-height: 100svh; color: var(--hub-text); }
.hub-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11px; letter-spacing: .1em; color: #a4b4af; padding-bottom: 26px; border-bottom: 1px solid #243032; }
.hub-topline time { font-size: 13px; letter-spacing: 0; text-transform: none; }
.topline-slash { color: #45605b; margin: 0 14px; }
.hub-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 36px 0 32px; }
.hub-kicker { font-size: 11px; font-weight: 650; letter-spacing: .16em; color: #9bb0a5; margin: 0 0 12px; }
.hub-welcome h1 { font-size: clamp(30px,3.5vw,48px); font-weight: 650; letter-spacing: -.045em; line-height: 1.14; margin: 0 0 12px; }
.hub-welcome p:last-child { margin: 0; color: var(--hub-muted); font-size: 16px; line-height: 1.5; }
.hub-primary { display: inline-flex; align-items: center; justify-content: center; gap: 18px; flex-shrink: 0; min-height: 44px; border: 1px solid var(--hub-accent); border-radius: 7px; padding: 11px 18px; background: var(--hub-accent); color: #12200e; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; text-decoration: none; }
.hub-primary:hover { background: #e3ff79; }
.hub-primary > span { font-size: 19px; font-weight: 400; }
.hub-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; padding: 25px 0 29px; border-top: 1px solid #293638; border-bottom: 1px solid #293638; margin-bottom: 32px; }
.hub-stats > div { min-width: 0; border-right: 1px solid #293638; padding-right: 24px; }
.hub-stats > div:last-child { border: 0; }
.hub-stats span { display: block; font-size: 14px; color: #b5c3bb; }
.hub-stats strong { display: block; font-size: 38px; letter-spacing: -.04em; font-weight: 600; line-height: 1.3; margin: 9px 0 5px; font-variant-numeric: tabular-nums; }
.hub-stats strong.stat-date { font-size: 30px; min-height: 50px; display: flex; align-items: center; }
.hub-stats small { display: block; font-size: 12px; color: #8fa49a; overflow-wrap: anywhere; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,1fr); gap: 24px; align-items: stretch; }
.feature-board { min-width: 0; padding: 28px; position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 26px; border: 1px solid #385347; border-radius: 14px; background: linear-gradient(135deg,#19392b,#142c24 65%,#1e3f2c); overflow: hidden; }
.feature-copy { position: relative; z-index: 1; }
.feature-copy .hub-kicker { color: #d2e99d; margin-bottom: 20px; }
.tiny-pitch { margin-right: 8px; }
.feature-copy h2 { font-size: clamp(27px,2.5vw,36px); letter-spacing: -.035em; font-weight: 650; line-height: 1.15; margin: 0 0 15px; overflow-wrap: anywhere; }
.feature-copy > p:not(.hub-kicker) { max-width: 390px; margin: 0 0 24px; color: #b1c7b8; font-size: 15px; line-height: 1.6; }
.feature-meta { display: block; margin-top: 13px; color: #a7bea7; font-size: 12px; }
.feature-pitch { padding: 16px; border: 1px solid #8aa66b33; background: #0e271c5e; border-radius: 9px; }
.pitch-caption { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: #b2c79c; font-size: 10px; letter-spacing: .14em; }
.mini-pitch svg { display: block; width: 100%; height: auto; }
.pitch-bottom-label { display: block; margin-top: 12px; font-size: 9px; letter-spacing: .17em; color: #8ba37e; }
.recent-panel { padding: 24px; border: 1px solid var(--hub-border); border-radius: 14px; background: var(--hub-card); min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 25px; }
.section-heading h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.section-heading a { font-size: 13px; color: #bfcebe; text-decoration: none; white-space: nowrap; }
.section-heading a:hover { color: var(--hub-accent); }
.hub-empty { padding: 20px 0; }
.empty-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border: 1px solid #455846; border-radius: 11px; font-size: 24px; color: #c0d89a; background: #233326; }
.hub-empty h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.hub-empty p { color: #9fb2a7; font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.hub-text-action { background: transparent; border: 0; padding: 0; min-height: 40px; color: var(--hub-accent); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
.recent-move { width: 100%; border: 0; border-bottom: 1px solid #2c3b38; display: flex; gap: 13px; align-items: center; padding: 18px 0; color: #eef2ee; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.recent-move:last-child { border-bottom: 0; }
.recent-move:hover strong { color: var(--hub-accent); }
.recent-mini { width: 72px; flex-shrink: 0; padding: 5px; background: #1a382a; border: 1px solid #355143; border-radius: 6px; }
.recent-text { min-width: 0; }
.recent-move strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.recent-move small { display: block; color: #93a99a; font-size: 12px; margin-top: 6px; }
.recent-arrow { margin-left: auto; color: #8fa898; }
.draft-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border: 1px solid #3c4c31; border-radius: 12px; margin-top: 24px; background: #1b261b; }
.draft-panel > div { display: flex; align-items: center; gap: 14px; }
.draft-marker { display: block; width: 8px; height: 8px; border-radius: 50%; background: #d7ff3f; flex-shrink: 0; }
.draft-panel h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.draft-panel p { margin: 0; color: #b1c2a9; font-size: 14px; overflow-wrap: anywhere; }
.draft-panel a { color: #d7ff93; font-size: 14px; text-decoration: none; white-space: nowrap; }
.hub-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #243032; color: #839a8d; font-size: 12px; }
.hub-footer > span:first-child { font-size: 10px; letter-spacing: .13em; }
.moves-storage-note { color: var(--hub-muted); font-size: 14px; margin: 0 0 28px; }
.move-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.move-gallery > .hub-empty { grid-column: 1/-1; padding: 38px; background: #142120; border: 1px dashed #41544a; border-radius: 14px; max-width: 650px; }
.move-card { min-width: 0; border: 1px solid #34473d; border-radius: 12px; overflow: hidden; background: #15221d; }
.move-card-open { display: block; width: 100%; padding: 16px; border: 0; background: transparent; cursor: pointer; color: #eef2ee; text-align: left; font: inherit; }
.move-card-open .mini-pitch { border-radius: 6px; overflow: hidden; background: #22462f; margin-bottom: 19px; padding: 12px; }
.move-card-open strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.move-card-open:hover strong { color: var(--hub-accent); }
.move-card-open small { display: block; color: #a4b9aa; font-size: 13px; margin: 9px 0 0; }
.move-card-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid #2e4035; padding: 10px 16px; color: #8ca793; font-size: 12px; }
.move-card-footer button { background: transparent; border: 0; padding: 5px; color: #c3b7ad; font-size: 13px; cursor: pointer; }
.hub-error { color: #ffc2a6; border: 1px solid #8c5942; padding: 16px; margin-bottom: 20px; border-radius: 8px; font-size: 14px; }
/* The whiteboard keeps its own editing panels; only the hub navigation is shared. */
body:not([data-page="whiteboard"]) > .app { display: none; }
body[data-page="whiteboard"] > .app { margin-left: var(--hub-nav); width: calc(100% - var(--hub-nav)); }
body[data-page="whiteboard"] { --hub-nav: 76px; }
body[data-page="whiteboard"] .hub-nav { padding: 22px 9px; }
body[data-page="whiteboard"] .hub-brand { padding: 0; justify-content: center; margin-bottom: 38px; }
body[data-page="whiteboard"] .hub-brand > span:last-child,body[data-page="whiteboard"] .nav-section-label,body[data-page="whiteboard"] .nav-bottom,body[data-page="whiteboard"] .nav-count { display: none; }
body[data-page="whiteboard"] .hub-nav > a[data-hub-page] { flex-direction: column; gap: 5px; padding: 10px 1px; font-size: 10px; }
@media (min-width: 1300px) { .feature-board { grid-template-columns: minmax(0,1.1fr) minmax(200px,1fr); align-items: center; min-height: 360px; } .feature-pitch .mini-pitch { transform: rotate(-4deg); margin: 20px 0; } }
@media (max-width: 1100px) { :root { --hub-nav: 190px; } .hub-nav { padding-inline: 10px; } .hub-brand { font-size: 22px; gap: 8px; padding-inline: 5px; } .hub-page { padding: 26px; } .dashboard-grid { grid-template-columns: minmax(0,1fr); } .feature-board { grid-template-columns: minmax(0,1fr) minmax(180px,.85fr); align-items: center; } .recent-panel { min-height: 200px; } .move-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  :root,body[data-page="whiteboard"] { --hub-nav: 0px; }
  .hub-nav,body[data-page="whiteboard"] .hub-nav { position: sticky; top: 0; width: 100%; height: auto; padding: 10px 12px; display: flex; flex-direction: row; align-items: center; gap: 5px; border-right: 0; border-bottom: 1px solid #314138; }
  .hub-brand,body[data-page="whiteboard"] .hub-brand { margin: 0 auto 0 0; padding: 0; }
  .hub-brand > span:last-child,.nav-section-label,.nav-bottom,.nav-count { display: none; }
  .hub-nav > a[data-hub-page],body[data-page="whiteboard"] .hub-nav > a[data-hub-page] { flex-direction: row; gap: 6px; margin: 0; padding: 9px; min-height: 42px; font-size: 13px; }
  .hub-nav > a[data-hub-page] svg { display: none; }
  .hub-page { padding: 24px 18px; min-height: calc(100svh - 63px); }
  .hub-topline { font-size: 10px; padding-bottom: 20px; }
  .hub-topline time { font-size: 12px; }
  .hub-welcome { flex-wrap: wrap; margin: 28px 0; gap: 20px; }
  .hub-welcome h1 { font-size: 34px; }
  .hub-stats { gap: 12px; margin-bottom: 24px; padding: 22px 0; }
  .hub-stats > div { padding-right: 8px; }
  .hub-stats span { font-size: 12px; }
  .hub-stats strong { font-size: 30px; }
  .hub-stats strong.stat-date { font-size: 22px; min-height: 39px; }
  .hub-stats small { font-size: 11px; line-height: 1.5; }
  .feature-board { grid-template-columns: minmax(0,1fr); padding: 24px; }
  .feature-copy h2 { font-size: 30px; }
  .feature-pitch { padding: 12px; }
  .recent-panel { padding: 22px; }
  .draft-panel { flex-wrap: wrap; padding: 20px; }
  .move-gallery { grid-template-columns: minmax(0,1fr); }
  body[data-page="whiteboard"] > .app { height: auto; }
  body[data-page="whiteboard"] .topbar { top: 63px; }
  .hub-footer { line-height: 1.6; }
}