/* .sunkit-stage-d6437e1aa42721a6/src/styles/app.css */
:root {
  --bg-dark: oklch(.955 .013 80);
  --bg: oklch(.994 .004 80);
  --bg-light: oklch(1 0 0);
  --bg-inset: oklch(.935 .016 80);
  --bg-hover: oklch(.972 .01 80);
  --text: oklch(.27 .01 67);
  --text-muted: oklch(.53 .016 60);
  --border: oklch(.88 .02 83);
  --border-soft: oklch(.925 .016 84);
  --highlight: oklch(1 0 0);
  --primary: oklch(.42 .145 26);
  --primary-hover: oklch(.36 .125 26);
  --primary-ink: oklch(.99 0 0);
  --primary-soft: oklch(.935 .025 20);
  --success: oklch(.52 .12 147);
  --success-soft: oklch(.94 .035 140);
  --warn: oklch(.56 .125 70);
  --warn-soft: oklch(.96 .045 90);
  --warn-border: oklch(.84 .11 89);
  --danger: oklch(.5 .177 29);
  --danger-soft: oklch(.93 .03 22);
  --info: oklch(.53 .104 251);
  --info-soft: oklch(.94 .025 250);
  --avatar-1: oklch(.494 .137 23.6);
  --avatar-2: oklch(.551 .079 137.8);
  --avatar-3: oklch(.548 .085 270.6);
  --avatar-4: oklch(.607 .126 72.1);
  --avatar-5: oklch(.478 .107 303.6);
  --avatar-6: oklch(.58 .085 195.1);
  --shadow-sm: 0 1px 1px oklch(.3 .03 50 / .06), 0 1px 3px oklch(.3 .03 50 / .06);
  --shadow: 0 1px 2px oklch(.3 .03 50 / .08), 0 6px 16px oklch(.3 .03 50 / .06);
  --shadow-lg: 0 2px 4px oklch(.3 .03 50 / .1), 0 18px 44px oklch(.3 .03 50 / .14);
  --page-image: none;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --radius-sm: .375rem;
  --radius: .625rem;
  --radius-lg: .875rem;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --fast: .15s var(--ease);
  --transition: .3s var(--spring);
  --c-bg: var(--bg-dark);
  --c-surface: var(--bg);
  --c-surface-alt: var(--bg-inset);
  --c-text: var(--text);
  --c-muted: var(--text-muted);
  --c-text-inv: var(--primary-ink);
  --c-border: var(--border);
  --c-border-soft: var(--border-soft);
  --c-primary: var(--primary);
  --c-primary-hov: var(--primary-hover);
  --c-primary-ink: var(--primary-ink);
  --c-primary-soft: var(--primary-soft);
  --c-success: var(--success);
  --c-success-bg: var(--success-soft);
  --c-warn: var(--warn);
  --c-danger: var(--danger);
  --c-danger-bg: var(--danger-soft);
  --c-info: var(--info);
  --c-flag-bg: var(--warn-soft);
  --c-flag-border: var(--warn-border);
  --c-avatar-1: var(--avatar-1);
  --c-avatar-2: var(--avatar-2);
  --c-avatar-3: var(--avatar-3);
  --c-avatar-4: var(--avatar-4);
  --c-avatar-5: var(--avatar-5);
  --c-avatar-6: var(--avatar-6);
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
}

:root[data-theme="linen"] {
  --bg-dark: oklch(.955 .005 265);
  --bg: oklch(1 0 0 / .72);
  --bg-light: oklch(1 0 0 / .92);
  --bg-inset: oklch(.92 .008 265 / .7);
  --bg-hover: oklch(.97 .006 265 / .85);
  --text: oklch(.22 .014 279);
  --text-muted: oklch(.52 .011 267);
  --border: oklch(.4 .02 265 / .13);
  --border-soft: oklch(.4 .02 265 / .08);
  --highlight: oklch(1 0 0 / .9);
  --primary: oklch(.6 .2 256);
  --primary-hover: oklch(.52 .177 256);
  --primary-ink: oklch(1 0 0);
  --primary-soft: oklch(.6 .2 256 / .13);
  --success: oklch(.6 .16 147);
  --success-soft: oklch(.73 .194 147 / .16);
  --warn: oklch(.64 .16 62);
  --warn-soft: oklch(.85 .16 90 / .2);
  --warn-border: oklch(.76 .175 63 / .5);
  --danger: oklch(.6 .22 29);
  --danger-soft: oklch(.654 .232 29 / .14);
  --info: oklch(.6 .12 231);
  --info-soft: oklch(.789 .122 231 / .18);
  --avatar-1: oklch(.654 .232 28.7);
  --avatar-2: oklch(.73 .194 147.4);
  --avatar-3: oklch(.624 .206 255.5);
  --avatar-4: oklch(.765 .175 62.6);
  --avatar-5: oklch(.615 .213 312.4);
  --avatar-6: oklch(.789 .122 230.8);
  --shadow-sm: 0 1px 1px oklch(.25 .04 265 / .05), 0 1px 3px oklch(.25 .04 265 / .06);
  --shadow: 0 1px 2px oklch(.25 .04 265 / .06), 0 8px 24px oklch(.25 .04 265 / .09);
  --shadow-lg: 0 2px 6px oklch(.25 .04 265 / .08), 0 22px 52px oklch(.25 .04 265 / .16);
  --page-image: radial-gradient(60% 60% at 0% 0%, oklch(.7 .15 250 / .2), transparent 70%), radial-gradient(60% 60% at 100% 0%, oklch(.75 .15 350 / .17), transparent 70%), radial-gradient(60% 60% at 50% 100%, oklch(.82 .1 180 / .18), transparent 70%);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --radius-sm: .5rem;
  --radius: .875rem;
  --radius-lg: 1.25rem;
}

:root[data-theme="maitre-d"] {
  --bg-dark: oklch(.962 .02 91);
  --bg: oklch(.994 .009 94);
  --bg-light: oklch(1 .004 94);
  --bg-inset: oklch(.94 .03 90);
  --bg-hover: oklch(.975 .02 92);
  --text: oklch(.231 .014 267);
  --text-muted: oklch(.55 .02 81);
  --border: oklch(.83 .08 89);
  --border-soft: oklch(.91 .05 93);
  --highlight: oklch(1 .01 95);
  --primary: oklch(.58 .115 77);
  --primary-hover: oklch(.5 .106 77);
  --primary-ink: oklch(.994 .009 94);
  --primary-soft: oklch(.931 .049 92);
  --success: oklch(.486 .088 167);
  --success-soft: oklch(.923 .023 166);
  --warn: oklch(.52 .106 77);
  --warn-soft: oklch(.95 .03 95);
  --warn-border: oklch(.8 .06 85);
  --danger: oklch(.432 .131 30);
  --danger-soft: oklch(.897 .031 28);
  --info: oklch(.472 .087 248);
  --info-soft: oklch(.93 .02 248);
  --avatar-1: oklch(.432 .131 30.4);
  --avatar-2: oklch(.486 .088 167.3);
  --avatar-3: oklch(.472 .087 247.8);
  --avatar-4: oklch(.654 .118 77.4);
  --avatar-5: oklch(.418 .113 303.6);
  --avatar-6: oklch(.62 .01 80.7);
  --shadow-sm: 0 1px 1px oklch(.4 .08 70 / .08), 0 1px 3px oklch(.4 .08 70 / .08);
  --shadow: 0 1px 2px oklch(.4 .08 70 / .1), 0 6px 18px oklch(.4 .08 70 / .1);
  --shadow-lg: 0 2px 4px oklch(.4 .08 70 / .12), 0 18px 44px oklch(.4 .08 70 / .16);
  --page-image: radial-gradient(circle at 0% 0%, oklch(.8 .09 89 / .18), transparent 40%), radial-gradient(circle at 100% 100%, oklch(.65 .12 77 / .1), transparent 45%);
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --radius-sm: .375rem;
  --radius: .75rem;
  --radius-lg: 1.125rem;
}

:root[data-theme="speakeasy"] {
  --bg-dark: oklch(.163 .009 59);
  --bg: oklch(.211 .011 48);
  --bg-light: oklch(.255 .014 55);
  --bg-inset: oklch(.182 .01 55);
  --bg-hover: oklch(.235 .013 55);
  --text: oklch(.92 .029 85);
  --text-muted: oklch(.69 .039 76);
  --border: oklch(.3 .018 56);
  --border-soft: oklch(.26 .016 54);
  --highlight: oklch(.34 .02 60);
  --primary: oklch(.631 .196 22);
  --primary-hover: oklch(.671 .186 21);
  --primary-ink: oklch(1 0 0);
  --primary-soft: oklch(.28 .065 19);
  --success: oklch(.75 .154 148);
  --success-soft: oklch(.317 .055 151);
  --warn: oklch(.751 .133 74);
  --warn-soft: oklch(.308 .043 84);
  --warn-border: oklch(.5 .091 84);
  --danger: oklch(.66 .19 22);
  --danger-soft: oklch(.28 .065 19);
  --info: oklch(.712 .104 247);
  --info-soft: oklch(.3 .05 247);
  --avatar-1: oklch(.645 .171 23.2);
  --avatar-2: oklch(.69 .101 136.6);
  --avatar-3: oklch(.67 .101 270);
  --avatar-4: oklch(.725 .129 76.3);
  --avatar-5: oklch(.674 .114 304.4);
  --avatar-6: oklch(.726 .099 193.5);
  --shadow-sm: 0 1px 1px oklch(0 0 0 / .35), 0 1px 3px oklch(0 0 0 / .3);
  --shadow: 0 1px 2px oklch(0 0 0 / .4), 0 8px 22px oklch(0 0 0 / .35);
  --shadow-lg: 0 2px 6px oklch(0 0 0 / .45), 0 22px 54px oklch(0 0 0 / .5);
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

:root[data-theme="sprinkles"] {
  --bg-dark: oklch(.972 .016 345);
  --bg: oklch(1 0 0);
  --bg-light: oklch(1 0 0);
  --bg-inset: oklch(.95 .026 343);
  --bg-hover: oklch(.975 .013 345);
  --text: oklch(.315 .068 335);
  --text-muted: oklch(.58 .056 345);
  --border: oklch(.905 .056 353);
  --border-soft: oklch(.952 .028 352);
  --highlight: oklch(1 0 0);
  --primary: oklch(.64 .21 355);
  --primary-hover: oklch(.58 .218 355);
  --primary-ink: oklch(1 0 0);
  --primary-soft: oklch(.93 .045 349);
  --success: oklch(.6 .13 164);
  --success-soft: oklch(.944 .037 167);
  --warn: oklch(.6 .13 70);
  --warn-soft: oklch(.968 .05 95);
  --warn-border: oklch(.886 .142 95);
  --danger: oklch(.6 .2 18);
  --danger-soft: oklch(.925 .04 10);
  --info: oklch(.62 .136 246);
  --info-soft: oklch(.94 .03 246);
  --avatar-1: oklch(.756 .167 354.5);
  --avatar-2: oklch(.831 .145 74.2);
  --avatar-3: oklch(.886 .142 94.8);
  --avatar-4: oklch(.797 .124 159.3);
  --avatar-5: oklch(.764 .126 249.2);
  --avatar-6: oklch(.727 .164 298);
  --shadow-sm: 0 1px 1px oklch(.7 .2 355 / .08), 0 1px 3px oklch(.7 .2 355 / .08);
  --shadow: 0 1px 2px oklch(.7 .2 355 / .1), 0 6px 16px oklch(.7 .2 355 / .12);
  --shadow-lg: 0 2px 5px oklch(.7 .2 355 / .12), 0 18px 40px oklch(.7 .2 355 / .18);
  --page-image: radial-gradient(circle at 12% 18%, oklch(.756 .167 354.5) 0 4px, transparent 5px), radial-gradient(circle at 78% 32%, oklch(.831 .145 74.2) 0 4px, transparent 5px), radial-gradient(circle at 22% 64%, oklch(.797 .124 159.3) 0 4px, transparent 5px), radial-gradient(circle at 86% 78%, oklch(.764 .126 249.2) 0 4px, transparent 5px), radial-gradient(circle at 48% 88%, oklch(.727 .164 298) 0 4px, transparent 5px), radial-gradient(circle at 56% 8%, oklch(.886 .142 94.8) 0 4px, transparent 5px);
  --font-sans: "Nunito", "Quicksand", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: "Nunito", "Quicksand", -apple-system, "Segoe UI", system-ui, sans-serif;
  --radius-sm: .625rem;
  --radius: .875rem;
  --radius-lg: 1.375rem;
}

:root[data-theme="sprinkles"] body {
  background-size: 380px 380px;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--page-image), var(--bg-dark);
  color: var(--text);
  font: var(--fs-base) / 1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: var(--fs-xl);
}

h2 {
  font-size: var(--fs-lg);
}

h3 {
  font-size: var(--fs-base);
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--primary);
  text-decoration: none;
  text-underline-offset: .2em;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--primary-soft);
}

code {
  font-family: var(--font-mono);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  padding: .1em .35em;
  font-size: .9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 1.5rem 0;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  z-index: 40;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  top: 0;
}

.app-header__inner {
  display: flex;
  align-items:  center;
  gap: 1.5rem;
  max-width: 76rem;
  min-height: 4rem;
  margin: 0 auto;
  padding: .5rem clamp(1rem, 3vw, 2rem);
}

.brand {
  display: flex;
  border-radius: var(--radius);
  flex-shrink: 0;
  align-items:  center;
}

.brand img {
  display: block;
  width: auto;
  height: 2.5rem;
}

.brand:hover {
  text-decoration: none;
}

.app-nav {
  position: relative;
  display: flex;
  gap: .25rem;
  min-width: 0;
}

.app-nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: color var(--fast);
  align-items:  center;
  gap: .5rem;
  padding: .5rem .875rem;
  font-weight: 500;
}

.app-nav__link:hover {
  color: var(--text);
  text-decoration: none;
}

.app-nav__link[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.app-nav__link .icon {
  width: 1.05em;
  height: 1.05em;
}

.app-nav__link[aria-current="page"] .icon {
  color: var(--primary);
}

.ghost {
  position: absolute;
  z-index: 0;
  border-radius: var(--radius);
  background: linear-gradient(var(--bg-light), var(--bg));
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  transition: transform var(--transition), width var(--transition), height var(--transition), opacity var(--fast);
  pointer-events: none;
  top: 0;
  left: 0;
}

.ghost--instant {
  transition: opacity var(--fast);
}

.account {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.account__button {
  display: flex;
  transition: background var(--fast), border-color var(--fast);
  background: none;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items:  center;
  gap: .625rem;
  padding: .25rem .75rem .25rem .25rem;
}

.account__button:hover, .account__button[aria-expanded="true"] {
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

.account__name {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
  font-weight: 600;
}

.account__button .icon {
  color: var(--text-muted);
  transition: transform var(--fast);
}

.account__button[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.menu {
  position: absolute;
  z-index: 60;
  background: var(--bg-light);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-lg);
  animation: pop-in .18s var(--spring) both;
  transform-origin: top right;
  min-width: 14rem;
  padding: .375rem;
  top: calc(100% + .5rem);
  right: 0;
}

.menu__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: .5rem .75rem .375rem;
}

.menu__label strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-sm);
}

.menu__item {
  display: flex;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  background: none;
  border: 0;
  align-items:  center;
  gap: .625rem;
  width: 100%;
  padding: .5rem .75rem;
}

.menu__item:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.menu__item .icon {
  color: var(--text-muted);
}

.menu__sep {
  background: var(--border-soft);
  height: 1px;
  margin: .375rem .25rem;
}

.main {
  flex: 1;
  width: 100%;
}

.container {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 4rem;
}

.container--narrow {
  max-width: 48rem;
}

.container > * {
  animation: rise .28s var(--ease) both;
}

@media (max-width: 52rem) {
  .app-header__inner {
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding-bottom: .25rem;
  }

  .app-nav {
    overflow-x: auto;
    scrollbar-width: none;
    flex-basis: 100%;
    order: 3;
    margin: 0 -.5rem;
    padding: 0 .5rem .25rem;
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .account__name {
    display: none;
  }

  .brand img {
    height: 2.25rem;
  }
}

@media (max-width: 40rem) {
  .app-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }

  .app-header__inner {
    flex-wrap: nowrap;
    min-height: 3.5rem;
    padding-bottom: .5rem;
  }

  .app-nav {
    position: fixed;
    z-index: 45;
    overflow: visible;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: .375rem .5rem calc(.375rem + env(safe-area-inset-bottom));
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -1px 3px oklch(0 0 0 / .06);
    flex-basis: auto;
    order: 0;
    gap: .25rem;
    margin: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .app-nav__link {
    flex-direction: column;
    justify-content: center;
    gap: .125rem;
    padding: .375rem .25rem;
    font-size: .6875rem;
  }

  .app-nav__link .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .main {
    padding-bottom: 4.5rem;
  }

  .toast-stack {
    bottom: 5.5rem;
  }
}

.section-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.section-head__title {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: -.01em;
  font-weight: 400;
}

.page-meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: .75rem;
}

.back-link {
  display: inline-flex;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  align-items:  center;
  gap: .375rem;
  margin-bottom: .25rem;
}

.back-link:hover {
  color: var(--text);
  text-decoration: none;
}

.tabs {
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 1.5rem;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__track {
  position: relative;
  display: inline-flex;
  background: var(--bg-inset);
  border-radius: calc(var(--radius)  + .25rem);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / .06);
  align-items:  center;
  gap: .25rem;
  padding: .25rem;
}

.tabs__group {
  display: inline-flex;
  align-items:  center;
  gap: .25rem;
}

.tabs__group + .tabs__group {
  border-left: 1px solid var(--border);
  margin-left: .5rem;
  padding-left: .5rem;
}

.tabs__label {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 .375rem 0 .25rem;
  font-weight: 600;
}

.tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: color var(--fast);
  align-items:  center;
  gap: .5rem;
  padding: .5rem .875rem;
  font-weight: 500;
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.tab[aria-current="page"] .icon {
  color: var(--primary);
}

.tab__count {
  background: var(--primary);
  color: var(--primary-ink);
  font-size: var(--fs-xs);
  text-align: center;
  border-radius: 999px;
  min-width: 1.25rem;
  padding: 0 .375rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.page-header__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
  min-width: 0;
  padding: 1.5rem;
}

.card + .card, .card + .section, .section + .card {
  margin-top: 1.5rem;
}

.card--flush {
  overflow: hidden;
  padding: 0;
}

.card--tight {
  padding: 1rem 1.25rem;
}

.card__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: .75rem 1rem;
  margin-bottom: 1.25rem;
}

.card__title {
  font-size: var(--fs-base);
  display: flex;
  align-items:  center;
  gap: .5rem;
  font-weight: 600;
}

.card__title .icon {
  color: var(--text-muted);
}

.card--flush > .card__header {
  padding: 1.25rem 1.5rem 0;
}

.section {
  margin-bottom: 2rem;
}

.section__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.section__title {
  font-size: var(--fs-lg);
  display: flex;
  align-items:  center;
  gap: .5rem;
  font-weight: 600;
}

.section__title .icon {
  color: var(--text-muted);
}

.section__header--center {
  text-align: center;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}

.grid > .card, .stats > .stat {
  margin: 0;
}

.stack > * + * {
  margin-top: 1rem;
}

.stack--sm > * + * {
  margin-top: .5rem;
}

.link-card {
  display: flex;
  color: var(--text);
  transition: transform var(--transition), box-shadow var(--fast), border-color var(--fast);
  flex-direction: column;
  gap: .75rem;
  min-height: 9rem;
}

.link-card:hover {
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-lg);
  border-color: var(--border);
  transform: translateY(-3px);
}

.link-card__icon {
  display: grid;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  place-items:  center;
  width: 2.5rem;
  height: 2.5rem;
}

.link-card__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.link-card__title {
  font-weight: 600;
  font-size: var(--fs-lg);
}

.link-card__stat {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: auto;
}

.link-card__stat strong {
  color: var(--text);
  font-weight: 600;
}

.link-card__go {
  color: var(--text-muted);
  transition: transform var(--transition), color var(--fast);
}

.link-card:hover .link-card__go {
  color: var(--primary);
  transform: translateX(3px);
}

.btn {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(var(--bg-light), var(--bg));
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), box-shadow var(--fast), transform .1s var(--ease), color var(--fast);
  justify-content: center;
  align-items:  center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.btn:hover {
  text-decoration: none;
  border-color: color-mix(in oklch, var(--border) 70%, var(--text));
  background: linear-gradient(var(--bg-light), var(--bg-hover));
}

.btn:active {
  box-shadow: inset 0 1px 2px oklch(0 0 0 / .08);
  transform: translateY(1px)scale(.98);
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

.btn .icon {
  width: 1em;
  height: 1em;
}

.btn--primary {
  border-color: var(--primary-hover);
  background: linear-gradient(color-mix(in oklch, var(--primary) 88%, white), var(--primary));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .22), var(--shadow-sm);
  color: var(--primary-ink);
}

.btn--primary:hover {
  border-color: var(--primary-hover);
  background: linear-gradient(var(--primary), var(--primary-hover));
  color: var(--primary-ink);
}

.btn--ghost {
  box-shadow: none;
  color: var(--text-muted);
  background: none;
  border-color: #0000;
}

.btn--ghost:hover {
  background: var(--bg-hover);
  border-color: var(--border-soft);
  color: var(--text);
}

.btn--danger {
  color: var(--danger);
}

.btn--danger:hover {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in oklch, var(--danger) 35%, var(--border));
}

.btn--primary.btn--danger {
  background: linear-gradient(color-mix(in oklch, var(--danger) 88%, white), var(--danger));
  border-color: var(--danger);
  color: oklch(1 0 0);
}

.btn--success {
  color: var(--success);
}

.btn--success:hover {
  color: var(--success);
  background: var(--success-soft);
}

.btn--sm {
  border-radius: var(--radius-sm);
  gap: .375rem;
  padding: .3125rem .75rem;
  font-size: .8125rem;
}

.btn--lg {
  font-size: var(--fs-base);
  padding: .75rem 1.5rem;
}

.btn--icon {
  aspect-ratio: 1;
  padding: .4375rem;
}

.btn--sm.btn--icon {
  padding: .3125rem;
}

.btn--block {
  width: 100%;
}

.btn--loading {
  pointer-events: none;
  opacity: .75;
  position: relative;
  padding-right: 2.25rem;
}

.btn--loading:after {
  content: "";
  position: absolute;
  animation: .6s linear infinite spin;
  border: 2px solid;
  border-top-color: #0000;
  border-radius: 50%;
  width: .875rem;
  height: .875rem;
  margin-top: -.4375rem;
  top: 50%;
  right: .75rem;
}

.link-button {
  color: var(--primary);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.link-button:hover {
  text-decoration: underline;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  min-width: 0;
  margin-bottom: 1rem;
}

.field--inline {
  flex: 1;
  min-width: 10rem;
  margin-bottom: 0;
}

.field__label {
  color: var(--text);
  font-size: .8125rem;
  font-weight: 600;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.field__label .muted, .field__label .field__optional {
  color: var(--text-muted);
  font-weight: 400;
}

.input, .select, .textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-light);
  color: var(--text);
  font-size: var(--fs-base);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / .04);
  transition: border-color var(--fast), box-shadow var(--fast);
  width: 100%;
  padding: .5625rem .75rem;
  line-height: 1.4;
}

.textarea {
  resize: vertical;
  min-height: 7.5rem;
}

.input::placeholder, .textarea::placeholder {
  color: color-mix(in oklch, var(--text-muted) 75%, transparent);
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.input:disabled, .select:disabled {
  opacity: .6;
}

.input--sm, .select--sm {
  font-size: var(--fs-sm);
  padding: .3125rem .5rem;
}

.input--pin {
  font-family: var(--font-mono);
  letter-spacing: .4em;
  text-align: center;
  padding-left: 1.05em;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary);
  cursor: pointer;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}

.check {
  display: inline-flex;
  font-size: var(--fs-sm);
  cursor: pointer;
  align-items:  center;
  gap: .625rem;
  font-weight: 500;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .75rem 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 1.25rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:  center;
  gap: .75rem;
  margin-top: 1.5rem;
}

.form-actions--split {
  justify-content: space-between;
}

.fieldset {
  border: 0;
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 0;
}

.fieldset__legend {
  font-size: var(--fs-sm);
  color: var(--text);
  margin-bottom: .75rem;
  padding: 0;
  font-weight: 600;
}

.form-error, .modal__error {
  color: var(--danger);
  font-size: var(--fs-sm);
  min-height: 1.25em;
  margin: 0;
}

.filter-bar {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  flex-wrap: wrap;
  align-items:  flex-end;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
}

.filter-bar__label {
  display: flex;
  color: var(--text-muted);
  align-items:  center;
  padding-bottom: .6rem;
}

.search {
  position: relative;
  flex: 1;
  min-width: min(100%, 16rem);
}

.search .icon {
  position: absolute;
  color: var(--text-muted);
  pointer-events: none;
  top: 50%;
  left: .875rem;
  transform: translateY(-50%);
}

.search .input {
  padding-left: 2.5rem;
}

.toggle-row {
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  min-height: 2.75rem;
}

.toggle-row + .toggle-row {
  border-top: 1px solid var(--border-soft);
  margin-top: .75rem;
  padding-top: .75rem;
}

.toggle-row__label {
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.toggle-row__title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.toggle-row__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.toggle-row__check {
  flex-shrink: 0;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  background: var(--border);
  transition: background var(--fast);
  border-radius: 999px;
  flex-shrink: 0;
  width: 2.5rem !important;
  height: 1.5rem !important;
}

.switch:after {
  content: "";
  position: absolute;
  background: var(--bg-light);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
  border-radius: 50%;
  width: 1.125rem;
  height: 1.125rem;
  top: .1875rem;
  left: .1875rem;
}

.switch:checked {
  background: var(--primary);
}

.switch:checked:after {
  transform: translateX(1rem);
}

.table-wrap {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
  overflow-x: auto;
}

.card .table-wrap {
  box-shadow: none;
  border-radius: var(--radius);
}

.card--flush .table-wrap {
  border: 0;
  border-radius: 0;
}

.table {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  width: 100%;
}

.table th, .table td {
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  padding: .75rem 1rem;
}

.table th {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: color-mix(in oklch, var(--bg-inset) 45%, transparent);
  font-weight: 600;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr {
  transition: background var(--fast);
}

.table tbody tr:hover td {
  background: var(--bg-hover);
}

.table td small {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-top: .125rem;
}

.table__actions {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
}

.table--compact th, .table--compact td {
  padding: .5rem 1rem;
}

.table .num, .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.row-link {
  cursor: pointer;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
}

.details-grid dt {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .25rem;
  font-weight: 600;
}

.details-grid dd {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
  margin: 0;
}

.details-grid .details-grid__wide {
  grid-column: 1 / -1;
}

.prose {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.badge {
  display: inline-flex;
  border: 1px solid var(--border-soft);
  background: var(--bg-inset);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 999px;
  align-items:  center;
  gap: .25rem;
  padding: .125rem .5rem;
  font-weight: 600;
}

.badge--primary, .badge--admin {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: #0000;
}

.badge--success {
  background: var(--success-soft);
  color: var(--success);
  border-color: #0000;
}

.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn-border);
}

.badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: #0000;
}

.badge--info {
  background: var(--info-soft);
  color: var(--info);
  border-color: #0000;
}

.notice {
  display: flex;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--info);
  background: var(--info-soft);
  font-size: var(--fs-sm);
  align-items:  flex-start;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding: .875rem 1rem;
}

.notice .icon {
  flex-shrink: 0;
  margin-top: .15em;
}

.notice--error, .notice.error {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.notice--success, .notice.success {
  border-left-color: var(--success);
  background: var(--success-soft);
}

.notice--warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  color: var(--text);
  padding: 1rem 1.25rem;
}

.stat__value {
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.15;
}

.stat__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: .25rem;
}

a.stat--link {
  transition: transform var(--transition), box-shadow var(--fast);
}

a.stat--link:hover {
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
  transform: translateY(-2px);
}

.progress {
  background: var(--bg-inset);
  overflow: hidden;
  box-shadow: inset 0 1px 1px oklch(0 0 0 / .06);
  border-radius: 999px;
  flex: 1;
  height: .5rem;
}

.progress__bar {
  background: linear-gradient(90deg, color-mix(in oklch, var(--success) 80%, white), var(--success));
  transition: width .4s var(--ease);
  border-radius: 999px;
  height: 100%;
}

.progress-row {
  display: flex;
  flex: 1;
  align-items:  center;
  gap: .75rem;
  max-width: 22rem;
}

.progress-row__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.progress--indeterminate {
  position: relative;
}

.progress--indeterminate .progress__bar {
  position: absolute;
  animation: 1.1s ease-in-out infinite indeterminate;
  left: 0;
  width: 40% !important;
}

.empty-state {
  display: flex;
  text-align: center;
  color: var(--text-muted);
  flex-direction: column;
  align-items:  center;
  gap: .5rem;
  padding: 3rem 1.5rem;
}

.empty-state__icon {
  display: grid;
  background: var(--bg-inset);
  color: var(--text-muted);
  border-radius: 50%;
  place-items:  center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .25rem;
}

.empty-state__icon .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.empty-state__icon--success {
  background: var(--success-soft);
  color: var(--success);
}

.empty-state__title {
  font-size: var(--fs-base);
  color: var(--text);
  margin: 0;
  font-weight: 600;
}

.empty-state__sub {
  font-size: var(--fs-sm);
  max-width: 28rem;
  margin: 0;
}

.empty-state__cta {
  margin-top: .75rem;
}

details.disclosure > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-sm);
  list-style: none;
  display: flex;
  align-items:  center;
  gap: .5rem;
}

details.disclosure > summary::-webkit-details-marker {
  display: none;
}

details.disclosure > summary:before {
  content: "";
  transition: transform var(--fast);
  color: var(--text-muted);
  border-bottom: 2px solid;
  border-right: 2px solid;
  width: .45rem;
  height: .45rem;
  transform: rotate(-45deg);
}

details.disclosure[open] > summary:before {
  transform: rotate(45deg);
}

details.disclosure[open] > summary {
  margin-bottom: 1rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: 1rem;
  margin: 1.25rem 0 .5rem;
}

.pagination__info {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.filter-presets {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: .5rem;
  margin-bottom: .75rem;
}

.chip {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
  border-radius: 999px;
  align-items:  center;
  gap: .375rem;
  padding: .3125rem .875rem;
  font-size: .8125rem;
  font-weight: 500;
}

.chip:hover {
  color: var(--text);
  border-color: color-mix(in oklch, var(--border) 60%, var(--text));
  text-decoration: none;
}

.chip--active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.filter-clear {
  color: var(--text-muted);
  margin-left: auto;
  font-size: .8125rem;
}

.modal {
  position: fixed;
  z-index: 100;
  display: none;
  background: oklch(.15 .01 60 / .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in .15s var(--ease) both;
  justify-content: center;
  align-items:  center;
  padding: 1.5rem;
  inset: 0;
}

.modal__panel {
  display: flex;
  background: var(--bg-light);
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius-lg)  + .25rem);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-lg);
  animation: pop-in .22s var(--spring) both;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  padding: 1.75rem;
}

.modal__panel--wide {
  overflow: hidden;
  max-width: min(54rem, 94vw);
  max-height: calc(100vh - 3rem);
}

.modal__title {
  font-size: var(--fs-lg);
  margin: 0;
}

.modal__subtitle {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.modal__small {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: .25rem;
}

.modal--confirm .modal__panel, .modal--info .modal__panel, .modal--pending .modal__panel, .modal--narrow .modal__panel {
  max-width: 22rem;
}

.modal--info .modal__title {
  color: var(--warn);
}

.modal--pending .modal__panel {
  text-align: center;
}

.modal--pending .modal__subtitle {
  color: var(--text);
  font-weight: 600;
}

.toast-stack {
  position: fixed;
  z-index: 200;
  display: flex;
  pointer-events: none;
  flex-direction: column;
  gap: .625rem;
  max-width: min(22rem, 100vw - 2.5rem);
  bottom: 1.25rem;
  right: 1.25rem;
}

.toast {
  pointer-events: auto;
  background: var(--bg-light);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: toast-in .3s var(--spring) both;
  padding: .75rem 1rem;
}

.toast.is-leaving {
  animation: toast-out .2s var(--ease) forwards;
}

.toast--success {
  border-left-color: var(--success);
}

.toast--error {
  border-left-color: var(--danger);
}

.icon {
  fill: currentColor;
  vertical-align: -.125em;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.icon--lg {
  width: 1.35em;
  height: 1.35em;
}

.icon--sm {
  width: .85em;
  height: .85em;
}

.avatar {
  display: inline-flex;
  background: var(--avatar-color, var(--text-muted));
  color: oklch(1 0 0);
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: inset 0 -2px 0 oklch(0 0 0 / .12);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 2.5rem;
  height: 2.5rem;
}

.avatar--xs {
  width: 1.375rem;
  height: 1.375rem;
  font-size: .625rem;
}

.avatar--sm {
  font-size: var(--fs-xs);
  width: 2rem;
  height: 2rem;
}

.avatar--lg {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.375rem;
}

.avatar--profile {
  position: relative;
  overflow: visible;
}

.avatar--profile > img {
  position: absolute;
  pointer-events: none;
}

.table .avatar--profile {
  overflow: hidden;
  width: 1.5rem !important;
  height: 1.5rem !important;
}

.user-cell {
  display: inline-flex;
  align-items:  center;
  gap: .625rem;
}

.tasklist-section {
  margin-bottom: 1.75rem;
}

.tasklist-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0 .25rem .625rem;
}

.tasklist-section__title {
  font-size: var(--fs-lg);
  margin: 0;
  font-weight: 600;
}

.tasklist-section__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tasklist-section__body {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
  overflow: hidden;
}

.task {
  position: relative;
  display: flex;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background var(--fast), opacity var(--fast), box-shadow var(--fast);
  -webkit-tap-highlight-color: transparent;
  align-items:  flex-start;
  gap: .875rem;
  padding: .875rem 1.25rem;
}

.task:first-child {
  border-top: 0;
}

.task:hover {
  background: var(--bg-hover);
}

.task:active .task__check {
  transform: scale(.9);
}

.task__check {
  display: inline-flex;
  border: 2px solid var(--border);
  background: var(--bg-light);
  transition: border-color var(--fast), background var(--fast), transform .15s var(--spring);
  border-radius: .375rem;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: .0625rem;
}

.task__check:after {
  content: "";
  border: solid var(--primary-ink);
  transition: transform .25s var(--spring);
  border-width: 0 2px 2px 0;
  width: .375rem;
  height: .6875rem;
  margin-top: -.125rem;
  transform: rotate(45deg)scale(0);
}

.task--done .task__check {
  border-color: var(--success);
  background: var(--success);
}

.task--done .task__check:after {
  border-color: oklch(1 0 0);
  transform: rotate(45deg)scale(1);
}

.task__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .375rem;
  min-width: 0;
}

.task__row {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: .875rem;
}

.task__name {
  font-size: var(--fs-base);
  color: var(--text);
  transition: color var(--fast);
}

.task__pills {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: .3125rem;
}

.task__description {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.task__completers {
  display: flex;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items:  center;
  gap: .375rem;
}

.task__completers-label {
  font-weight: 600;
}

.task--done .task__name {
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--text-muted) 60%, transparent);
  color: var(--text-muted);
}

.task--done:hover {
  background: var(--bg-hover);
}

.completer {
  display: inline-flex;
  background: var(--bg-inset);
  color: var(--text);
  font-size: var(--fs-xs);
  border-radius: 999px;
  align-items:  center;
  gap: .3125rem;
  padding: .125rem .5rem .125rem .125rem;
}

.completer__name {
  font-weight: 600;
}

body[data-completed-style="hide"] .task--done .task__name, body[data-completed-style="bottom"] .task--done .task__name, body[data-completed-style="fade"] .task--done .task__name, body[data-completed-style="glow"] .task--done .task__name, body[data-completed-style="stamp"] .task--done .task__name {
  text-decoration: none;
  color: var(--text);
}

body[data-completed-style="hide"] .task--done {
  display: none;
}

body[data-completed-style="bottom"] .tasklist-section__body {
  display: flex;
  flex-direction: column;
}

body[data-completed-style="bottom"] .task--done {
  order: 99;
}

body[data-completed-style="fade"] .task--done {
  opacity: .5;
}

body[data-completed-style="glow"] .task--done {
  background: var(--success-soft);
  box-shadow: inset 3px 0 0 var(--success);
}

body[data-completed-style="stamp"] .task--done:after {
  content: "DONE";
  position: absolute;
  border: 2px solid var(--success);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--success);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  pointer-events: none;
  padding: .125rem .5rem;
  font-weight: 800;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%)rotate(-12deg);
}

body[data-completed-style="stamp"] .task--done .task__pills {
  visibility: hidden;
}

body[data-highlight-mine="1"] .task[data-mine="1"].task--done {
  box-shadow: inset 4px 0 0 var(--primary);
}

.all-done-banner {
  display: flex;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid color-mix(in oklch, var(--success) 45%, transparent);
  border-radius: var(--radius);
  animation: pop-in .35s var(--spring) both;
  align-items:  center;
  gap: .625rem;
  padding: .625rem 1rem;
  font-weight: 600;
}

.all-done-banner__title {
  font-size: var(--fs-base);
}

.pill {
  display: inline-flex;
  font-size: var(--fs-xs);
  white-space: nowrap;
  border-radius: 999px;
  align-items:  center;
  gap: .25rem;
  padding: .125rem .5rem;
  font-weight: 600;
}

.pill .icon {
  width: .85em;
  height: .85em;
}

.pill--paid {
  background: var(--success-soft);
  color: var(--success);
}

.pill--double {
  background: var(--primary-soft);
  color: var(--primary);
}

.pill--triple {
  background: var(--primary);
  color: var(--primary-ink);
}

.pill--optional {
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px dashed var(--border);
}

.pill--pending {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-border);
}

.pill--dow {
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  justify-content: center;
  min-width: 1.5em;
}

.pts-chip {
  position: relative;
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  border-radius: 999px;
  align-items:  center;
  gap: .375rem;
  padding: .3125rem .75rem;
  font-weight: 600;
}

.pts-chip .icon {
  color: var(--warn);
}

.pts-chip__label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pts-chip__popover {
  position: absolute;
  z-index: 50;
  background: var(--bg-light);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-lg);
  cursor: default;
  animation: pop-in .18s var(--spring) both;
  transform-origin: top right;
  min-width: 13rem;
  padding: .75rem 1rem;
  top: calc(100% + .5rem);
  right: 0;
}

.pts-chip__row {
  display: flex;
  font-size: var(--fs-sm);
  justify-content: space-between;
  gap: 1rem;
  padding: .1875rem 0;
  font-weight: 500;
}

.pts-chip__row--total {
  border-top: 1px solid var(--border-soft);
  margin-top: .375rem;
  padding-top: .375rem;
  font-weight: 700;
}

.pts-chip__key {
  color: var(--text-muted);
}

.pts-chip__val {
  font-variant-numeric: tabular-nums;
}

.dow-dots {
  display: inline-flex;
  align-items:  center;
  gap: .1875rem;
}

.dow-dot {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--bg-light);
  color: var(--text-muted);
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 1.125rem;
  height: 1.125rem;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1;
}

.dow-dot--on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

.dow-chip-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.dow-chip {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
  justify-content: center;
  align-items:  center;
  min-width: 2.25rem;
  height: 1.875rem;
  padding: 0 .5rem;
  font-weight: 600;
}

.dow-chip:hover {
  color: var(--text);
}

.dow-chip--on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

.dow-chip--on:hover {
  color: var(--primary-ink);
}

.row-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  display: inline-flex;
  flex-shrink: 0;
}

.row-drag-handle:active {
  cursor: grabbing;
}

.task-editor-header {
  display: flex;
  border-bottom: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  padding-bottom: .75rem;
}

.task-editor-bulk {
  display: flex;
  background: var(--primary-soft);
  border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
  align-items:  center;
  gap: .75rem;
  padding: .5rem .75rem;
}

.task-editor-bulk__count {
  color: var(--primary);
  font-weight: 700;
}

.task-editor-rows {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  flex: auto;
  gap: .5rem;
  min-height: 0;
  padding: .25rem .125rem;
}

.task-editor-row {
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  transition: box-shadow var(--fast), border-color var(--fast);
  flex-shrink: 0;
}

.task-editor-row.is-expanded {
  border-color: var(--border);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
}

.task-editor-row.drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

.task-editor-row__head {
  display: flex;
  cursor: pointer;
  user-select: none;
  align-items:  center;
  gap: .625rem;
  padding: .625rem .875rem;
}

.task-editor-row__head:hover {
  background: var(--bg-hover);
}

.task-editor-row__check {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.task-editor-row__title {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.task-editor-row__title.muted {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

.task-editor-row__badges {
  display: flex;
  flex-shrink: 0;
  gap: .25rem;
}

.task-editor-row__badges .pill {
  padding: .0625rem .375rem;
  font-size: .6875rem;
}

.task-editor-row__del {
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  flex-shrink: 0;
  padding: .25rem .5rem;
}

.task-editor-row__del:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.task-editor-row__chevron {
  color: var(--text-muted);
  transition: transform var(--fast);
  display: inline-flex;
  flex-shrink: 0;
}

.task-editor-row.is-expanded .task-editor-row__chevron {
  transform: rotate(180deg);
}

.task-editor-row__body {
  display: none;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in oklch, var(--bg-inset) 40%, var(--bg));
  padding: 1rem 1.25rem 1.25rem;
}

.task-editor-row.is-expanded .task-editor-row__body {
  display: block;
  animation: fade-in .15s var(--ease) both;
}

.task-editor-row__mods {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: .5rem 1.25rem;
}

.task-editor-add {
  padding-top: .5rem;
}

.banner--pay {
  display: flex;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid color-mix(in oklch, var(--success) 40%, transparent);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  align-items:  center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding: .875rem 1rem;
}

.banner--pay a {
  color: var(--success);
  font-weight: 700;
}

.budget-display {
  font-size: var(--fs-base);
  line-height: 1.5;
}

.flag {
  display: flex;
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius);
  border-left-width: 4px;
  align-items:  center;
  gap: 1rem;
  margin-bottom: .5rem;
  padding: .875rem 1rem;
}

.flag__body {
  flex: 1;
  min-width: 0;
}

.flag__title {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.flag__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: .125rem;
}

.flag__actions {
  display: flex;
  gap: .5rem;
}

.audit-row--flag td {
  background: var(--warn-soft);
}

.activity {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  overflow: hidden;
}

.activity__row {
  display: flex;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  align-items:  center;
  gap: 1rem;
  padding: .75rem 1rem;
}

.activity__row:last-child {
  border-bottom: 0;
}

.activity__when {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 4.5rem;
}

.activity__body {
  flex: 1;
  min-width: 0;
}

.verify-bulk-bar {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-sm);
  flex-wrap: wrap;
  align-items:  center;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: .75rem 1rem;
}

.verify-bulk-bar__select-all {
  display: flex;
  font-size: var(--fs-sm);
  cursor: pointer;
  align-items:  center;
  gap: .5rem;
  font-weight: 500;
}

.verify-bulk-bar__sep {
  background: var(--border);
  flex-shrink: 0;
  width: 1px;
  height: 1.25rem;
}

.verify-empty {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items:  center;
  gap: .5rem;
  padding: 3rem 1rem;
}

.verify-empty__icon {
  color: var(--success);
  font-size: 2.5rem;
  line-height: 1;
}

.verify-empty__title {
  font-size: var(--fs-lg);
  margin: 0;
  font-weight: 600;
}

.verify-empty__sub {
  margin: 0;
}

.verify-date--old {
  color: var(--warn);
}

.profile-layout {
  display: grid;
  grid-template-columns: 17rem 1fr;
  align-items:  start;
  gap: 1.5rem;
}

@media (max-width: 48rem) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}

.profile-sidebar {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
  overflow: hidden;
  position: sticky;
  overflow-y: auto;
  max-height: calc(100vh - 6rem);
  top: 5rem;
}

.profile-sidebar__header {
  display: flex;
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in oklch, var(--bg-inset) 45%, transparent);
  justify-content: space-between;
  align-items:  center;
  padding: .75rem 1rem;
  font-weight: 600;
}

.profile-sidebar__bonus-col {
  font-size: var(--fs-xs);
}

.profile-sidebar__item {
  display: flex;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  transition: background var(--fast);
  align-items:  center;
  gap: .75rem;
  padding: .625rem 1rem;
}

.profile-sidebar__item:last-child {
  border-bottom: 0;
}

.profile-sidebar__item:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.profile-sidebar__item--active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

.profile-sidebar__main {
  flex: 1;
  min-width: 0;
}

.profile-sidebar__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.profile-sidebar__role {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.profile-sidebar__bonus {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.profile-hero {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
  flex-wrap: wrap;
  align-items:  center;
  gap: 1.25rem;
  margin-bottom: 1rem;
  padding: 1.5rem;
}

.profile-hero__info {
  flex: 1;
  min-width: 11rem;
}

.profile-hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
}

.profile-hero__meta {
  display: flex;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
  align-items:  center;
  gap: .375rem;
  margin: .5rem 0 0;
}

.profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.profile-section {
  margin-bottom: 1.5rem;
}

.profile-section__title {
  display: flex;
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
  margin: 0 0 .625rem;
  padding-left: .25rem;
  font-weight: 600;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.profile-stats .stat {
  padding: .875rem 1rem;
}

.profile-stats .stat__value {
  font-size: 1.375rem;
}

.profile-bonus__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: .75rem;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: .75rem;
}

.image-option {
  display: flex;
  aspect-ratio: 1;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-light);
  cursor: pointer;
  transition: border-color var(--fast), transform var(--transition), box-shadow var(--fast);
  justify-content: center;
  align-items:  center;
  padding: .5rem;
}

.image-option:hover {
  border-color: var(--border);
  transform: translateY(-2px);
}

.image-option.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  transform: scale(1.05);
}

.image-option .avatar {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
}

.theme-card {
  display: flex;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-light);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast), transform var(--transition), box-shadow var(--fast);
  flex-direction: column;
  gap: .625rem;
  padding: .875rem;
}

.theme-card:hover {
  border-color: var(--border);
  transform: translateY(-2px);
}

.theme-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.theme-card__swatches {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  gap: .25rem;
  height: 2rem;
}

.theme-card__swatch {
  flex: 1;
}

.theme-card__name {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.bonus-hero {
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.bonus-hero__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.bonus-hero__total {
  font-size: var(--fs-2xl);
  color: var(--success);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.15;
}

.bonus-substats {
  display: flex;
}

.bonus-substat {
  text-align: center;
  border-right: 1px solid var(--border-soft);
  flex: 1;
  padding: .5rem;
}

.bonus-substat:last-child {
  border-right: 0;
}

.bonus-substat__value {
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.bonus-substat__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: .125rem;
}

.bonus-substat--pending .bonus-substat__value, .bonus-substat--pending .bonus-substat__label {
  color: var(--warn);
}

.login {
  display: grid;
  background: radial-gradient(70% 55% at 50% 0%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 70%), var(--page-image), var(--bg-dark);
  place-items:  center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.login__card {
  text-align: center;
  animation: pop-in .35s var(--spring) both;
  width: 100%;
  max-width: 24rem;
  padding: 2.5rem 2rem 2rem;
}

.login__logo {
  display: block;
  width: min(15rem, 80%);
  height: auto;
  margin: 0 auto 1.5rem;
}

.login__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.login__card form {
  text-align: left;
}

.login__card .btn--primary {
  font-size: var(--fs-base);
  width: 100%;
  margin-top: .5rem;
  padding: .75rem 1rem;
}

.login__help {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 1.5rem;
}

.muted {
  color: var(--text-muted);
}

.text-right {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: .5rem;
}

.row--spread {
  justify-content: space-between;
}

.spacer {
  flex: 1;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}

:root[data-theme="linen"] .card, :root[data-theme="linen"] .table-wrap, :root[data-theme="linen"] .stat, :root[data-theme="linen"] .tasklist-section__body, :root[data-theme="linen"] .filter-bar, :root[data-theme="linen"] .profile-hero, :root[data-theme="linen"] .profile-sidebar, :root[data-theme="linen"] .activity, :root[data-theme="linen"] .modal__panel, :root[data-theme="linen"] .menu {
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-color: oklch(1 0 0 / .6);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(.375rem);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(.96)translateY(.25rem);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(110%);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(110%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(150%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .app-header, .tabs, .page-actions, .btn, .toast-stack, .modal, .filter-bar, .filter-presets {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .card, .table-wrap {
    box-shadow: none;
  }
}