:root {
  --app-ink: #142438;
  --app-muted: #526c81;
  --app-canvas: #f5f7fa;
  --app-surface: #ffffff;
  --app-surface-muted: #edf3f8;
  --app-line: #d3dfeb;
  --app-blue: #1262c4;
  --app-blue-dark: #0d4f9f;
  --app-focus: rgba(18, 98, 196, .22);
  --app-success: #16834d;
  --app-warning: #9c6500;
  --app-danger: #b42318;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--app-canvas); }
body.app-page { display: flex; flex-direction: column; min-width: 320px; min-height: 100vh; margin: 0; color: var(--app-ink); background: var(--app-canvas); font-family: "Manrope", "Segoe UI", sans-serif; font-size: .95rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.app-shell-width { width: min(100%, 1280px); margin: 0 auto; padding-inline: 32px; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; color: #fff; background: var(--app-blue); text-decoration: none; transform: translateY(-150%); transition: transform 180ms ease; }
.skip-link:focus { transform: translateY(0); }
.app-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--app-line); background: rgba(245,247,250,.96); }
.app-navbar { min-height: 74px; padding: 10px 0; }
.app-brand { display: inline-flex; align-items: center; min-height: 42px; color: var(--app-ink); font-family: "Urbanist", "Segoe UI", sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -.035em; text-decoration: none; }
.app-brand__mark { width: 23px; height: 25px; margin-right: 8px; background: currentColor; clip-path: polygon(39% 0,61% 0,100% 100%,69% 100%,50% 48%,30% 100%,0 100%); }
.app-brand__product { margin-left: 15px; padding-left: 15px; border-left: 1px solid var(--app-line); color: var(--app-muted); font-family: "Manrope",sans-serif; font-size: .73rem; font-weight: 500; letter-spacing: 0; }
.app-brand__product span { color: var(--app-blue); }
.app-nav-list, .app-nav-actions { align-items: center; gap: 4px; }
.app-nav-list { margin-left: 32px; }
.app-nav-link, .app-account-label { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 12px; color: #355269; font-size: .84rem; font-weight: 700; text-decoration: none; }
.app-nav-link { border-radius: 7px; transition: color 180ms ease, background-color 180ms ease; }
.app-nav-link:hover, .app-nav-link.is-active { color: var(--app-blue); background: #e5f0fb; }
.app-nav-link--cta { color: #fff; background: var(--app-blue); }
.app-nav-link--cta:hover { color: #fff; background: var(--app-blue-dark); }
.app-account-label { gap: 7px; color: var(--app-muted); }
.app-main { flex: 1 0 auto; }
.app-footer { flex: 0 0 auto; margin-top: 44px; border-top: 1px solid var(--app-line); color: var(--app-muted); background: #edf3f8; font-size: .8rem; }
.app-footer > div { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px; }
.app-footer a { color: #355269; font-weight: 700; text-decoration: none; }
.app-footer a:hover { color: var(--app-blue); }

body.app-page :is(a,button,input,select,textarea):focus-visible { outline: 3px solid var(--app-focus); outline-offset: 2px; }
@media (max-width: 767px) { .app-shell-width { padding-inline: 18px; } .app-navbar { min-height: 66px; } .app-brand { font-size: 1.25rem; } .app-brand__mark { width: 20px; height: 22px; } .app-brand__product { display: none; } .app-nav-list { margin-left: 0; padding-top: 10px; } .app-nav-actions { padding-top: 8px; } .app-footer > div { display: block; padding-block: 18px; } .app-footer a { display: inline-block; margin-top: 6px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }