:root {
  --ink: #172216;
  --muted: #63705f;
  --lime: #cef64c;
  --paper: #f5f6f1;
  --edge: #dce0d5;
  --forest: #192b1a;
  --sans: "DM Sans", "Segoe UI", Arial, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button,
select {
  cursor: pointer;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: 0;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #59811d;
  outline-offset: 3px;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.skip {
  position: fixed;
  left: -150vw;
}
.skip:focus {
  left: 15px;
  z-index: 30;
  background: white;
  padding: 12px;
}
#sidebar {
  width: 218px;
  background: #fcfdf8;
  position: fixed;
  inset: 0 auto 0 0;
  border-right: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  padding: 26px 15px 18px;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 26px;
  letter-spacing: -1.8px;
  font-weight: 750;
  padding: 0 8px;
}
.brand img {
  width: 37px;
  height: 37px;
}
.brand span span {
  font-weight: 440;
}
.workspace {
  border: 1px solid var(--edge);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  text-align: left;
  margin: 35px 0 27px;
  background: white;
  width: 100%;
  font-size: 13px;
}
.workspace b,
.identity b {
  font-weight: 650;
  display: block;
}
.workspace small,
.identity small {
  color: var(--muted);
  font-size: 11px;
}
.workspace > svg:last-child {
  margin-left: auto;
}
.workspace > i,
.identity i {
  font-style: normal;
  display: grid;
  place-items: center;
  border-radius: 9px;
  width: 32px;
  height: 32px;
  background: #eaf0df;
  color: #344b2b;
}
.navlabel,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.65px;
  font-size: 10px;
  font-weight: 700;
}
.navlabel {
  padding: 0 12px;
  margin: 0 0 10px;
  color: var(--muted);
}
nav {
  display: grid;
  gap: 4px;
}
nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 520;
  color: #52604e;
}
nav a.active {
  background: #e6f2c9;
  color: #293d16;
  font-weight: 680;
}
nav a:hover,
.ghost:hover,
.workspace:hover {
  background: #edf1e5;
}
nav + .navlabel {
  margin-top: 26px;
}
.identity {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  text-align: left;
  border-top: 1px solid var(--edge);
  padding: 18px 5px 0;
  margin-top: auto;
}
.identity i {
  border-radius: 50%;
  background: #293b23;
  color: #e2f6ba;
}
.body {
  margin-left: 218px;
}
#top {
  height: 65px;
  border-bottom: 1px solid var(--edge);
  padding: 0 clamp(20px, 3vw, 52px);
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fbfcf7;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted);
  font-size: 12px;
}
.crumb b {
  font-weight: 600;
  color: var(--ink);
}
.searchbar {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  border: 1px solid var(--edge);
  background: white;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12px;
  margin-left: auto;
  min-width: 185px;
}
.searchbar kbd {
  margin-left: auto;
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 0 5px;
}
.avatar {
  background: #d6e9b6;
  border: 1px solid #bfceac;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 680;
  font-size: 11px;
}
.mobilemenu {
  display: none;
}
main {
  max-width: 1630px;
  margin: 0 auto;
  padding: 28px clamp(20px, 3vw, 52px) 55px;
  outline: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: clamp(30px, 2.9vw, 46px);
  letter-spacing: -0.065em;
  line-height: 1.06;
  font-weight: 640;
}
h2 {
  font-size: 21px;
  letter-spacing: -0.052em;
  font-weight: 640;
}
h3 {
  font-size: 16px;
  letter-spacing: -0.035em;
}
.sub,
.muted {
  color: var(--muted);
}
.sub {
  font-size: 14px;
  margin-top: 7px;
  line-height: 1.5;
}
.heading,
.sectionhead,
.panelhead,
.actions,
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.heading,
.sectionhead,
.panelhead {
  justify-content: space-between;
}
.heading {
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.actions {
  flex-wrap: wrap;
}
.btn,
.ghost,
.period,
.linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 13px;
}
.btn,
.period,
.ghost {
  border: 1px solid var(--edge);
  background: white;
}
.btn.primary {
  background: var(--lime);
  border-color: #bfdc5c;
}
.btn:hover,
.period:hover {
  filter: brightness(0.96);
}
.period select {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 12px;
}
.linkbtn {
  font-size: 12px;
  padding: 5px 0;
  color: #3f5734;
}
.linkbtn:hover {
  text-decoration: underline;
}
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(
    ellipse at 79% 25%,
    #344f23 0,
    #192c18 38%,
    #101e15 80%
  );
  color: #fff;
  border-radius: 18px;
  min-height: 180px;
  display: flex;
  align-items: center;
  padding: 25px clamp(20px, 3vw, 40px);
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#d3f79a42 0.9px, transparent 1px);
  background-size: 13px 13px;
  mask-image: linear-gradient(110deg, transparent 20%, #000 75%);
}
.hero .eyebrow {
  color: #d3f4aa;
  display: flex;
  align-items: center;
  gap: 7px;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px #c8ef7730;
}
.hero h2 {
  font-size: clamp(30px, 3.1vw, 54px);
  letter-spacing: -0.065em;
  font-weight: 570;
  margin: 10px 0 5px;
  line-height: 1;
}
.hero p {
  color: #cbdbc6;
  font-size: 13px;
  line-height: 1.5;
}
.hero button {
  margin-top: 15px;
  color: #f6ffea;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  padding: 0;
}
.hero button:hover svg {
  transform: translateX(4px);
}
.hero button svg {
  transition: transform 0.2s;
}
.heroart {
  position: absolute;
  width: 51%;
  height: 155%;
  right: 0;
  top: -25%;
  object-fit: contain;
  z-index: -1;
  animation: arrive 0.85s ease-out both;
}
.herocopy {
  max-width: 53%;
}
.kpis {
  margin: 15px 0 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.kpi,
.panel,
.card,
.profilecard,
.listcard,
.reportcard {
  background: #fff;
  border: 1px solid var(--edge);
  border-radius: 15px;
}
.kpi {
  padding: 15px 16px;
  position: relative;
  overflow: hidden;
}
.klabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #515e4d;
}
.klabel i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #eff4e5;
  color: #415437;
}
.kpi strong {
  display: block;
  font-size: clamp(23px, 2.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.06em;
  font-weight: 620;
  margin-top: 9px;
}
.kpi small {
  font-size: 10px;
  color: var(--muted);
}
.sparkline {
  position: absolute;
  width: 56px;
  right: 12px;
  bottom: 16px;
  opacity: 0.8;
}
.twocol {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(275px, 1fr);
  gap: 15px;
}
.panel {
  padding: 19px 21px;
}
.panelhead {
  margin-bottom: 14px;
}
.panelhead h2 {
  font-size: 18px;
}
.panelhead p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.panel select,
.filter {
  border: 1px solid var(--edge);
  border-radius: 7px;
  padding: 6px;
  background: #fafbf7;
  color: var(--ink);
  font-size: 12px;
}
.chart {
  width: 100%;
  display: block;
  height: 158px;
  overflow: visible;
}
.chart text {
  font-family: var(--sans);
  font-size: 10px;
  fill: #66735f;
}
.chart .line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.7s ease-out forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.rankrow {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0e7;
  text-align: left;
}
.rankrow:last-child {
  border-bottom: 0;
}
.rankrow:hover b {
  color: #647e2a;
}
.rankrow img,
.miniavatar {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.rankrow b,
.rankrow small {
  display: block;
}
.rankrow b {
  font-size: 13px;
}
.rankrow small,
.rankrow em {
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
}
.rankrow em {
  margin-left: auto;
  font-weight: 650;
  color: var(--ink);
}
.rankno {
  font: 11px monospace;
  color: #8c9888;
}
.sectionhead {
  margin: 24px 0 12px;
}
.cards,
.profiles,
.listgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.card,
.profilecard,
.listcard,
.reportcard {
  overflow: hidden;
  text-align: left;
  padding: 0;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.card:hover,
.profilecard:hover,
.listcard:hover,
.reportcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px #1b2e1512;
}
.cover {
  height: 130px;
  position: relative;
  background: #243720;
}
.cover img,
.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #1115);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 680;
  padding: 4px 8px;
  border-radius: 20px;
  background: #edf3e3;
  color: #35482c;
}
.badge:before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}
.cover .badge {
  position: absolute;
  left: 12px;
  top: 11px;
  z-index: 1;
  background: #edffd9;
}
.cover .badge.planned {
  background: #f6edff;
  color: #654480;
}
.cardbody {
  padding: 14px 15px;
}
.cardbody small,
.profilecard small,
.listcard small {
  font-size: 11px;
  color: var(--muted);
}
.cardbody h3 {
  margin: 4px 0 10px;
}
.cardbody footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--edge);
  padding-top: 10px;
  font-size: 11px;
  color: var(--muted);
}
.stack {
  display: flex;
  padding-left: 4px;
}
.stack img,
.stack i {
  margin-left: -4px;
  width: 22px;
  height: 22px;
  object-fit: cover;
  border: 2px solid white;
  border-radius: 50%;
  background: #dce6cb;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.toolbar input,
.field input,
.field select,
.field textarea,
.searchinput {
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  min-width: 0;
}
.toolbar input {
  flex: 1;
  max-width: 370px;
}
.filter {
  padding: 10px;
}
.profilecard .face {
  height: 160px;
  overflow: hidden;
  background: #e6edda;
}
.face img {
  object-position: 50% 34%;
}
.profilecard .cardbody {
  display: grid;
  gap: 4px;
}
.listcard,
.reportcard {
  padding: 20px;
}
.listcard .stack {
  margin: 18px 0;
}
.listcard h3,
.reportcard h3 {
  margin: 13px 0 5px;
}
.empty {
  padding: 27px;
  border: 1px dashed #c8d1bd;
  border-radius: 12px;
  color: var(--muted);
  grid-column: 1/-1;
  text-align: center;
  font-size: 14px;
}
.details {
  display: grid;
  gap: 15px;
}
.details h3 {
  margin: 8px 0;
}
.detailcover {
  width: 100%;
  height: 155px;
  object-fit: cover;
  border-radius: 10px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.metrics div {
  background: #f0f4e9;
  padding: 12px;
  border-radius: 10px;
}
.metrics b,
.metrics small {
  display: block;
}
.metrics small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.post {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--edge);
  padding: 9px 0;
  font-size: 13px;
}
.post small {
  font-size: 11px;
  color: var(--muted);
}
dialog {
  border: 1px solid var(--edge);
  border-radius: 18px;
  width: min(536px, calc(100% - 24px));
  max-height: 87dvh;
  padding: 23px;
  color: var(--ink);
  box-shadow: 0 24px 90px #12221130;
}
dialog::backdrop {
  background: #111e1766;
  backdrop-filter: blur(3px);
}
dialog[open] {
  animation: arrive 0.16s ease-out;
}
dialog h2 {
  font-size: 25px;
}
dialog .panelhead {
  position: sticky;
  top: -23px;
  background: white;
  z-index: 2;
  padding: 5px 0;
}
.iconbtn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eff3e7;
}
.field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.form {
  display: grid;
  gap: 13px;
}
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.checks {
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--edge);
  border-radius: 9px;
  padding: 7px 10px;
}
.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  font-size: 13px;
}
.form .btn {
  justify-self: end;
}
.helper {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.error {
  font-size: 13px;
  color: #9b3929;
}
.searchinput {
  width: 100%;
  margin-bottom: 12px;
}
.results {
  display: grid;
  max-height: 48vh;
  overflow: auto;
}
.results button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--edge);
  gap: 8px;
}
.results button:hover {
  background: #f1f5e9;
}
.results small {
  color: var(--muted);
}
#toast {
  position: fixed;
  bottom: 16px;
  left: calc(50% + 109px);
  transform: translate(-50%, 20px);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  background: #1b2c1d;
  color: white;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13px;
  transition: 0.2s;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
main > section {
  animation: arrive 0.24s ease-out;
}
.overlay {
  display: none;
}
.reportgrid {
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reportcard {
  display: grid;
  gap: 8px;
}
.reportcard .linkbtn {
  justify-self: start;
}
.notice {
  color: #446137;
}
.metriclabel {
  font-size: 11px;
  color: var(--muted);
}
@media (min-width: 1600px) {
  .hero {
    min-height: 215px;
  }
  .heroart {
    right: 3%;
  }
  .chart {
    height: 200px;
  }
  .cover {
    height: 170px;
  }
}
@media (max-width: 1150px) {
  #sidebar {
    width: 190px;
  }
  .body {
    margin-left: 190px;
  }
  .brand {
    font-size: 24px;
  }
  .sparkline {
    width: 40px;
    opacity: 0.6;
  }
  .twocol {
    grid-template-columns: minmax(0, 1.45fr) minmax(230px, 1fr);
  }
  .panel {
    padding: 16px;
  }
  .panelhead {
    gap: 5px;
  }
}
@media (max-width: 900px) {
  #sidebar {
    width: 190px;
    transform: translateX(-101%);
    transition: transform 0.2s;
  }
  .body {
    margin-left: 0;
  }
  .menuopen #sidebar {
    transform: none;
  }
  .menuopen .overlay {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: #14201766;
    z-index: 9;
  }
  .mobilemenu {
    display: inline-grid;
    place-items: center;
  }
  .sparkline {
    width: 42px;
  }
  #toast {
    left: 50%;
  }
}
@media (max-width: 650px) {
  #top {
    height: 54px;
    padding: 0 15px;
    gap: 8px;
  }
  .crumb {
    font-size: 11px;
    gap: 5px;
  }
  .crumb > span {
    display: none;
  }
  .searchbar {
    min-width: 0;
    padding: 7px;
  }
  .searchbar span,
  .searchbar kbd {
    display: none;
  }
  main {
    padding: 20px 14px 40px;
  }
  .heading {
    gap: 12px;
  }
  .heading .sub {
    font-size: 12px;
  }
  .heading .actions {
    gap: 6px;
  }
  .hero {
    border-radius: 14px;
    min-height: 155px;
    padding: 18px;
  }
  .heroart {
    width: 49%;
    right: -4%;
    height: 134%;
    top: -12%;
    opacity: 0.9;
  }
  .herocopy {
    max-width: 64%;
  }
  .hero p {
    font-size: 12px;
  }
  .hero h2 {
    font-size: 29px;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
  }
  .twocol,
  .cards,
  .reportgrid {
    grid-template-columns: 1fr;
  }
  .profiles,
  .listgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cover {
    height: 170px;
  }
  .kpi {
    padding: 13px;
  }
  .kpi strong {
    font-size: 29px;
  }
  .panelhead h2 {
    font-size: 18px;
  }
  .twocol {
    gap: 10px;
  }
  .profilecard .face {
    height: 130px;
  }
  .period {
    padding: 8px;
  }
  .actions .ihb-button {
    --ihb-width: 143px;
    --ihb-height: 37px;
  }
  .hero .eyebrow {
    font-size: 9px;
  }
  .listcard {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .chart .line {
    stroke-dashoffset: 0;
  }
}

@media (min-width: 901px) {
  .mobilemenu.iconbtn {
    display: none;
  }
}
@media print {
  body {
    background: white;
  }
  body > .body,
  body > #sidebar,
  #toast,
  .skip,
  dialog button {
    display: none !important;
  }
  dialog[open] {
    position: static;
    display: block;
    max-height: none;
    width: 100%;
    border: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
  }
  dialog::backdrop {
    background: white;
  }
  dialog .panelhead {
    position: static;
  }
  .detailcover {
    height: 210px;
  }
}
.field-error,.form .error:not(:empty) {
  display: block;
  padding: .55rem .75rem;
  border: 1px solid #cddcb4;
  border-inline-start: 3px solid #66883a;
  border-radius: .55rem;
  background: #f1f6e6;
  color: #304423;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4;
}
.field-error { margin-top: .2rem; }
.form .error:empty {display:none}
[aria-invalid="true"] {border-color:#758f4b}
@media (forced-colors: none) {
  :root { --scroll-track: #eff3e7; --scroll-thumb: #758e53; }
  @supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--scroll-track); }
    ::-webkit-scrollbar-thumb {
      border: 2px solid var(--scroll-track);
      border-radius: 999px;
      background: var(--scroll-thumb);
    }
    ::-webkit-scrollbar-thumb:hover { background: #53713a; }
    ::-webkit-scrollbar-button { display: none; }
  }
  @supports not selector(::-webkit-scrollbar) {
    :root { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  }
}
#mobile-nav,.offline-notice[hidden] {display:none}
.offline-notice {padding:.5rem 1rem;background:#e7efd9;text-align:center;font-size:.85rem}
.offline-notice a {color:var(--forest);text-decoration:underline}
input[type=checkbox],input[type=radio] {accent-color:#628324}
.checks {scrollbar-gutter:stable;padding:5px;background:#fbfcf8}
.checks label {padding:7px 9px;border-radius:7px;cursor:pointer;min-height:32px;line-height:1.3}
.checks label:has(:checked) {background:#e8f2d5;color:#233b18}
.checks label:has(:focus-visible) {outline:2px solid #608226;outline-offset:-2px}
.checks input[type=checkbox] {appearance:none;display:grid;place-content:center;flex:none;width:18px;height:18px;margin:0;border:1.5px solid #849478;border-radius:5px;background:white;cursor:pointer}
.checks input[type=checkbox]:checked {background:var(--lime);border-color:#648431}
.checks input[type=checkbox]::before {content:"";width:8px;height:4px;border-left:2px solid #24351a;border-bottom:2px solid #24351a;transform:translateY(-1px) rotate(-45deg) scale(0)}
.checks input[type=checkbox]:checked::before {transform:translateY(-1px) rotate(-45deg) scale(1)}
@media (forced-colors:active) {.checks input[type=checkbox]{appearance:auto}.checks input[type=checkbox]::before{content:none}}
@media screen and (max-width:650px) {
  #mobile-nav {position:fixed;z-index:8;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;inset:auto 10px max(8px,env(safe-area-inset-bottom));max-width:460px;margin:auto;padding:4px;border:1px solid #475b3d;border-radius:20px;color:#e6eedc;background:#192b1a;box-shadow:0 4px 16px #17281726}
  #mobile-nav a {display:grid;justify-items:center;align-content:center;gap:2px;min-height:48px;text-decoration:none;font:600 11px/1.3 var(--sans);color:inherit;border-radius:15px}
  #mobile-nav a[aria-current] {color:#23351c;background:var(--lime)}
  .menuopen #mobile-nav {visibility:hidden}
  #sidebar {overflow-y:auto;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}
  #top {padding-top:env(safe-area-inset-top);height:calc(54px + env(safe-area-inset-top))}
  main {padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  #toast {bottom:calc(76px + env(safe-area-inset-bottom))}
  .checks {max-height:min(32dvh,260px);overscroll-behavior:contain}
  .checks label {min-height:44px}
  .checks input[type=checkbox]{width:21px;height:21px}
  dialog {max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference) {
  .checks input[type=checkbox]::before {transition:transform .14s ease-out}
  .checks label {transition:background-color .14s ease-out}
}
@media screen and (max-width:650px) and (prefers-reduced-motion:no-preference) {
  @keyframes woody-rise {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes woody-pop {from{transform:scale(.84)}65%{transform:scale(1.08)}to{transform:none}}
  #mobile-nav a[aria-current] svg {animation:woody-pop .25s ease-out}
  dialog[open] {animation:woody-rise .2s ease-out}
  .kpis>.kpi {animation:woody-rise .26s backwards}
  .kpis>.kpi:nth-child(2) {animation-delay:40ms}
  .kpis>.kpi:nth-child(3) {animation-delay:80ms}
  .kpis>.kpi:nth-child(4) {animation-delay:120ms}
  .btn,.profilecard,#mobile-nav a {transition:transform .14s ease}
  .btn:active,.profilecard:active,#mobile-nav a:active {transform:scale(.97)}
}
.welcome-intro { display:flex; align-items:center; gap:18px; min-width:0; }
.welcome-intro h1 { font-size:clamp(30px,3vw,44px); }
.welcome-mascot {
  position:relative; isolation:isolate; width:94px; height:94px; flex:none;
}
.welcome-mascot::before { content:""; position:absolute; inset:12% 5% 0 8%; border-radius:50%; background:radial-gradient(circle at 35% 24%,#f1f8dc,#dbe9bd 72%,#c1d39f); box-shadow:inset 0 0 0 1px #cadab0; }
.welcome-figure {
  display:block; position:absolute; inset:-3%; width:106%; height:106%;
  overflow:visible; transform-origin:55% 85%;
}
@media (prefers-reduced-motion:no-preference) {
  @keyframes woody-hand-wave {
    0%,65%,100% { transform:rotate(0deg); }
    12%,38% { transform:rotate(-6deg); }
    25%,51% { transform:rotate(3deg); }
  }
  .woody-wave-hand { transform-origin:0 0; animation:woody-hand-wave 3.4s ease-in-out infinite; }
  @keyframes woody-sway {
    0%,100% { transform:translateY(0) rotate(-1.3deg); }
    50% { transform:translateY(-2px) rotate(1.5deg); }
  }
  .welcome-figure { animation:woody-sway 2.8s ease-in-out infinite; }
}
@media (max-width:650px) {
  .welcome-intro { gap:12px; }
  .welcome-mascot { width:76px; height:76px; }
  .welcome-intro .sub { margin-top:4px; }
}