/* Navigator · Cobalt. Shared visual layer; screen structure and data stay in DC. */
:root {
  --nav-cobalt:#1552f0;
  --nav-ink:#17202e;
  --nav-muted:#526078;
  --nav-pearl:#f3f4f6;
  --nav-navy:#071727;
  --nav-rule:#e5e9ef;
}
.nav-app { background:var(--nav-pearl)!important; color:var(--nav-ink); }
.nav-app [data-screen-label] { isolation:isolate; }
.nav-app input, .nav-app textarea, .nav-app select { accent-color:var(--nav-cobalt); }
.nav-app [role=button] { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.nav-app [role=button]:focus-visible, .nav-app a:focus-visible,
.nav-app input:focus-visible, .nav-app textarea:focus-visible {
  outline:3px solid #1552f0; outline-offset:3px;
}
.nav-app [style*="cursor: pointer"]:active, .nav-app [style*="cursor:pointer"]:active { scale:.985; }
.nav-greeting-avatar {
  background:var(--nav-cobalt)!important; color:white!important;
  border-radius:16px!important; box-shadow:0 4px 10px #1552f02b;
}
.nav-next {
  position:relative; flex:none; overflow:hidden; isolation:isolate;
  padding:18px; border-radius:18px; color:white; background:var(--nav-navy);
  box-shadow:0 5px 12px #07172726;
}
.nav-next::before {
  content:""; position:absolute; z-index:-1; inset:0 0 auto; height:170px;
  background:url('assets/design/lesson-hero.png') right -17px / auto 200px no-repeat;
  pointer-events:none;
}
.nav-next-top { position:relative; min-height:136px; }
.nav-eyebrow { font-size:11px; font-weight:600; color:#c3d0df; letter-spacing:.1px; }
.nav-next-date { margin-top:10px; max-width:59%; font-size:24px; font-weight:800; letter-spacing:-.65px; line-height:1.12; }
.nav-next-time { margin-top:3px; font-size:30px; font-weight:800; line-height:1.1; letter-spacing:-1px; }
.nav-next-kind { margin-top:6px; max-width:49%; color:#c3d0df; font-size:12px; line-height:1.35; }
.nav-next-person { position:relative; display:flex; align-items:center; gap:9px; margin-top:8px; padding-top:3px; }
.nav-next-avatar { width:31px; height:31px; flex:none; display:grid; place-items:center; border-radius:50%; background:#24364c; color:#f5f7ff; font-size:11px; font-weight:700; }
.nav-next-name { font-size:13px; font-weight:650; }
.nav-next-car { font-size:11px; margin-top:2px; color:#becbdc; }
.nav-next-pickup { margin-top:10px; display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.4; color:#d5deeb; }
.nav-next-pickup > span:first-child { width:6px; height:6px; border-radius:50%; background:#77a5ff; flex:none; }
.nav-next-actions { display:flex; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid #ffffff24; }
.nav-next-actions > div { flex:1; min-height:42px; display:flex; align-items:center; justify-content:center; border-radius:11px; font-weight:650; font-size:13px; }
.nav-next-reschedule { background:#eef3ff; color:#143779; }
.nav-next-cancel { background:#243247; color:#ffd0d7; }
.nav-balance { padding:17px 18px!important; }
.nav-balance > div:first-of-type { color:var(--nav-ink)!important; font-weight:700!important; }
.nav-balance [style*="font-size: 27px"],.nav-balance [style*="font-size:27px"] { font-size:31px!important; letter-spacing:-1px!important; }
.nav-quick { height:99px!important; gap:4px!important; color:var(--nav-ink)!important; }
.nav-quick-icon { width:50px; height:50px; object-fit:contain; }
.nav-instructor-card { background:white!important; border:1.5px solid #1552f0!important; box-shadow:0 3px 9px #1552f016!important; }
.nav-trophy { top:2px!important; right:12px!important; width:52px!important; height:52px; object-fit:contain; opacity:1!important; }
.nav-book-tile { min-height:139px; justify-content:flex-start; }
.nav-book-icon { width:52px; height:52px; object-fit:contain; }
.nav-dock {
  background:#ffffff!important; border-top:1px solid #e5e9ef!important;
  box-shadow:0 -3px 12px #17202e05!important; gap:3px; backdrop-filter:none!important;
}
.nav-tab { min-width:0; min-height:51px; justify-content:center; border-radius:13px; color:#65748b!important; }
.nav-tab.is-active { background:var(--nav-cobalt); color:white!important; box-shadow:0 3px 7px #1552f021; }
.nav-tab svg { width:23px; height:23px; }
.nav-tab > div { font-size:10px!important; font-weight:600!important; }
.nav-login-art { object-position:64% 0!important; height:62%!important; object-fit:cover!important; }
.nav-login-wash { background:linear-gradient(180deg,#07172710 0%,#07172700 25%,#f3f4f620 39%,#f3f4f6e8 55%,#f3f4f6 67%)!important; }
@media (max-width:360px) {
 .nav-next { padding:16px; }
 .nav-next::before { background-position:calc(100% + 22px) -17px; }
 .nav-next-date { font-size:22px; }
 .nav-next-name { font-size:12px; }
 .nav-quick-icon { width:45px; height:45px; }
 .nav-tab > div { font-size:9px!important; }
}
@media (prefers-reduced-motion:reduce) {
 .nav-app *, .nav-app *::before, .nav-app *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

@media(max-width:360px){.nav-next-time{font-size:25px}.nav-next::before{background-size:auto 160px;background-position:right 4px}}
@media(max-width:340px){.nav-next-time{font-size:23px}.nav-next::before{background-size:auto 150px}}

.nav-availability{display:inline-block;padding:4px 7px;border-radius:7px;max-width:100%;line-height:1.35}