/* ../../node_modules/@fontsource-variable/plus-jakarta-sans/index.css */
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./plus-jakarta-sans-cyrillic-ext-wght-normal-JQUONSEA.woff2") format("woff2-variations");
  unicode-range:
    U+0460-052F,
    U+1C80-1C8A,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./plus-jakarta-sans-vietnamese-wght-normal-TOS5SH3L.woff2") format("woff2-variations");
  unicode-range:
    U+0102-0103,
    U+0110-0111,
    U+0128-0129,
    U+0168-0169,
    U+01A0-01A1,
    U+01AF-01B0,
    U+0300-0301,
    U+0303-0304,
    U+0308-0309,
    U+0323,
    U+0329,
    U+1EA0-1EF9,
    U+20AB;
}
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./plus-jakarta-sans-latin-ext-wght-normal-GONQAQSC.woff2") format("woff2-variations");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("./plus-jakarta-sans-latin-wght-normal-XZSBT77D.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* src/ui/theme/token.css */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #fafbfc;
  --color-surface-3: #f3f5f7;
  --color-fg: #0f172a;
  --color-muted-fg: #64748b;
  --color-border: #e5e7eb;
  --color-outline: #cbd5e1;
  --color-primary: #1f6feb;
  --color-primary-fg: #ffffff;
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
  --font-sans:
    ui-sans-serif,
    system-ui,
    "Plus Jakarta Sans",
    Inter,
    Arial,
    sans-serif;
  --font-mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.16);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 28%, transparent);
  --z-nav: 50;
  --z-dropdown: 60;
  --z-dialog: 70;
  --z-toast: 80;
}
:root {
  color: var(--color-fg);
  background: var(--color-bg);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* src/ui/theme/components.css */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .6rem .9rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-fg);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background var(--dur),
    color var(--dur),
    border-color var(--dur);
  cursor: pointer;
}
.button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-md);
}
.button[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.button[data-variant=primary] {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-primary) 96%, #fff 4%) 0%,
      var(--color-primary) 100%);
  color: var(--color-primary-fg);
  border-color: color-mix(in oklab, var(--color-primary) 72%, var(--color-border));
}
.button[data-variant=ghost] {
  background: transparent;
  border-color: transparent;
}
.button[data-variant=outline] {
  background: var(--color-surface);
}
.button[data-variant=danger] {
  background: var(--color-danger);
  color: #fff;
  border-color: transparent;
}
.button[data-size=sm] {
  padding: .45rem .7rem;
  font-size: var(--text-sm);
}
.button[data-size=lg] {
  padding: .8rem 1.1rem;
  font-size: var(--text-lg);
}
.button[data-block=true] {
  width: 100%;
}
.input {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0 var(--space-3);
  transition:
    border-color var(--dur),
    box-shadow var(--dur),
    background var(--dur);
}
.input input {
  flex: 1 1 auto;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-fg);
  font: inherit;
  padding: .62rem 0;
  font-size: var(--text-md);
}
.input[data-size=xs] input {
  padding: .3rem 0;
  font-size: var(--text-xs);
}
.input[data-size=sm] input {
  padding: .45rem 0;
  font-size: var(--text-sm);
}
.input[data-size=lg] input {
  padding: .85rem 0;
  font-size: var(--text-lg);
}
.input[data-align=right] input {
  text-align: right;
}
.input[data-align=center] input {
  text-align: center;
}
.input-unit {
  display: inline-flex;
  align-items: center;
  padding-left: var(--space-2);
  color: var(--color-muted-fg);
  font-size: var(--text-sm);
}
.input[data-size=xs] .input-unit {
  font-size: var(--text-xs);
}
.input[data-size=lg] .input-unit {
  font-size: var(--text-md);
}
.input:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring), var(--shadow-sm);
}
.input[data-invalid=true] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 25%, transparent);
}
.input-icon {
  display: inline-flex;
  align-items: center;
  opacity: .9;
}
.input-icon--left {
  margin-left: .2rem;
}
.input-icon--right {
  margin-right: .2rem;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
  -webkit-text-fill-color: var(--color-fg) !important;
  box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
}
.card {
  background:
    linear-gradient(
      180deg,
      var(--color-surface-2) 0%,
      var(--color-surface) 100%);
  color: var(--color-fg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__header {
  background:
    linear-gradient(
      177deg,
      var(--accent-soft) 0%,
      var(--color-surface-2) 65%);
}
.card__header,
.card__footer {
  padding: var(--space-5);
}
.card__content {
  padding: var(--space-5);
  padding-top: 0;
}
.card__title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: 700;
}
.card__subtitle {
  margin: .25rem 0 0 0;
  color: var(--color-muted-fg);
  font-size: var(--text-sm);
}
.modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: saturate(1.1) blur(2px);
  z-index: var(--z-dialog);
  animation: modal-fade var(--dur) var(--ease-out);
}
.modal {
  z-index: 200;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(720px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem;
  animation: modal-pop var(--dur) var(--ease-out);
}
@keyframes modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-pop {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
  box-shadow: var(--shadow-sm);
}
.table__head th {
  position: sticky;
  top: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      var(--color-surface-2) 0%,
      var(--color-surface-3) 100%);
  color: var(--color-muted-fg);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-outline);
}
.table__cell {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--color-outline);
}
.table__cell--th {
  font-size: var(--text-sm);
}
.table[data-density=compact] .table__cell {
  padding: .45rem .6rem;
  font-size: var(--text-sm);
}
.table[data-density=spacious] .table__cell {
  padding: 1rem 1.1rem;
}
.table__body .table__row:last-child .table__cell {
  border-bottom: 0;
}
.table[data-zebra=true] .table__body .table__row:nth-child(even) .table__cell {
  background: color-mix(in oklab, var(--color-surface-3) 60%, transparent);
}
.hr {
  height: 1px;
  background: var(--color-outline);
  border: 0;
  margin: var(--space-4) 0;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-fg);
}
.layout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.layout__brand {
  font-size: var(--text-xl);
  margin: 0;
}
.layout__nav a {
  margin: 0 var(--space-3);
  text-decoration: none;
  color: var(--color-fg);
}
.layout__nav a:hover {
  color: var(--color-primary);
}
.layout__main {
  padding: var(--space-5);
}
.layout__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted-fg);
}
.sheet__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
  animation: modal-fade var(--dur) var(--ease-out);
}
.sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--color-surface);
  color: var(--color-fg);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  animation: sheet-slide var(--dur) var(--ease-out);
  padding: var(--space-5);
  max-width: 92vw;
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
@keyframes sheet-slide {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.select-wrapper {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.select__label {
  font-size: var(--text-sm);
  color: var(--color-muted-fg);
}
.select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-fg);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.select__trigger:hover {
  background: var(--color-surface-2);
}
.select__trigger:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.select__icon {
  margin-left: .5rem;
  opacity: .6;
}
.select__content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: var(--z-dropdown);
}
.select__viewport {
  padding: .25rem 0;
}
.select__item {
  padding: .45rem .75rem;
  cursor: pointer;
  outline: none;
}
.select__item:hover,
.select__item[data-highlighted] {
  background: color-mix(in oklab, var(--color-primary) 20%, transparent);
  color: var(--color-fg);
}
.multisel {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.multisel__label {
  font-size: var(--text-sm);
  color: var(--color-muted-fg);
}
.multisel__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: .4rem .6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-fg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.multisel__trigger:hover {
  background: var(--color-surface-2);
}
.multisel__caret {
  opacity: .6;
  margin-left: .5rem;
}
.multisel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.multisel__tags .muted {
  color: var(--color-muted-fg);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary) 18%, transparent);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.multisel__content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 320px;
  overflow: hidden;
  z-index: var(--z-dropdown);
}
.multisel__search {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: .5rem .6rem;
  background: var(--color-surface-2);
  color: var(--color-fg);
  outline: none;
}
.multisel__list {
  padding: .25rem 0;
}
.multisel__empty {
  padding: .8rem;
  color: var(--color-muted-fg);
}
.multisel__item {
  width: 100%;
  display: flex;
  gap: .6rem;
  align-items: center;
  background: transparent;
  border: 0;
  text-align: left;
  padding: .45rem .6rem;
  cursor: pointer;
}
.multisel__item:hover {
  background: color-mix(in oklab, var(--color-primary) 16%, transparent);
}
.multisel__texts {
  display: flex;
  flex-direction: column;
}
.multisel__label {
  font-size: var(--text-sm);
}
.multisel__hint {
  font-size: var(--text-xs);
  color: var(--color-muted-fg);
}
.multisel__checkbox {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-primary-fg);
  transition:
    border-color var(--dur),
    background var(--dur),
    box-shadow var(--dur);
}
.multisel__checkbox:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.multisel__checkbox[data-state=checked] {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.multisel__check svg {
  width: 14px;
  height: 14px;
  display: block;
}
.multisel__item:hover .multisel__checkbox:not([data-state=checked]) {
  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-border));
}
.savebar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: .6rem .9rem;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
}
.savebar__content {
  color: var(--color-muted-fg);
}
.savebar__actions {
  display: flex;
  gap: 8px;
}
.group {
  background: var(--color-surface);
  margin-bottom: var(--space-4);
}
.group__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-outline);
  background:
    linear-gradient(
      180deg,
      var(--color-surface) 0%,
      color-mix(in oklab, var(--color-surface) 85%, var(--color-surface-2)) 100%);
}
.group__head--collapsible {
  align-items: center;
}
.group__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.group__chevron {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
[data-state=open] > .group__chevron,
.group__head--collapsible .group__trigger[data-state=open] .group__chevron {
  transform: rotate(0deg);
}
.group__head--collapsible .group__trigger .group__chevron {
  transform: rotate(-90deg);
}
.group__titles {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.group__title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  font-weight: 700;
}
.group__desc {
  margin: 0;
  color: var(--color-muted-fg);
  font-size: var(--text-sm);
}
.group__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.group__body.is-padded {
  padding: var(--space-5);
}
.group__body.is-divided > * + * {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}
.group__section {
  margin: var(--space-3) 0 0 0;
}
.group__section .group__head {
  padding: 0 0 var(--space-2) 0;
  border: 0;
  background: transparent;
}
.group__section .group__title {
  font-size: var(--text-md);
}
.group__section .group__body.is-padded {
  padding: 0;
}
.group__section .group__body.is-divided > * + * {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}
.group__divider {
  height: 1px;
  border: 0;
  background: var(--color-outline);
  margin: var(--space-4) 0;
}
.number {
  text-align: right;
}
.num {
  font-family: Arial;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.button-icon {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.5);
}

/* src/ui/theme/theme-petrol.css */
:root[data-theme=petrol] {
  --color-bg: #0c1116;
  --color-surface: #111723;
  --color-surface-2: #0f1520;
  --color-surface-3: #0d1420;
  --color-fg: #e6edf3;
  --color-muted-fg: #9fb0c0;
  --color-border: #263042;
  --color-outline: #1c2533;
  --color-primary: #1f6feb;
  --color-primary-fg:#ffffff;
  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-danger: #ef4444;
}

/* src/ui/theme/theme-slate.css */
:root[data-theme=slate] {
  --color-bg: #fbfcfe;
  --color-surface: #ffffff;
  --color-surface-2: #f6f7fa;
  --color-surface-3: #eef1f6;
  --color-fg: #0f172a;
  --color-muted-fg: #5b6b7e;
  --color-border: #e6eaf0;
  --color-outline: #d7dde6;
  --color-primary: #2f6fec;
  --color-primary-fg:#ffffff;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
}

/* src/ui/theme/theme-dark.css */
:root[data-theme=dark] {
  --color-bg: #0b0f14;
  --color-surface: #0f141b;
  --color-surface-2: #111821;
  --color-surface-3: #121a25;
  --color-fg: #e5e7eb;
  --color-muted-fg: #9aa3af;
  --color-border: #1f2a37;
  --color-outline: #1a2430;
  --color-primary: #4090ff;
  --color-primary-fg:#ffffff;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
}

/* src/ui/theme/theme-bw.css */
:root[data-theme=bw] {
  --color-bg: #111;
  --color-surface: #171717;
  --color-surface-2: #222;
  --color-surface-3: #333;
  --color-fg: #e5e7eb;
  --color-muted-fg: #9aa3af;
  --color-border: #333;
  --color-outline: #333;
  --color-primary: #4090ff;
  --color-primary-fg:#ffffff;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --radius-sm: 30px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-xl: 30px;
  --font-sans:
    "Plus Jakarta Sans Variable",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-weight: 100;
}

/* src/ui/theme/theme-pastel.css */
:root[data-theme=pastel] {
  --font-sans:
    "Plus Jakarta Sans Variable",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-weight: 100;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --color-bg: #f3f4f5;
  --color-surface: #ffffff;
  --color-surface-2: #f6f7fa;
  --color-surface-3: #eef1f6;
  --color-fg: #0f172a;
  --color-muted-fg: #5b6b7e;
  --color-border: #e6eaf0;
  --color-outline: #d7dde6;
  --color-primary: #578efd;
  --color-primary-fg:#ffffff;
  --color-success: #7ecf9c;
  --color-warning: #d6a873;
  --color-danger: #ff8282;
  --shadow-sm: 0 2px 5px rgba(0,0,0,.1);
  --shadow-md: 3px 3px 10px rgba(0,0,0,0.1);
  --shadow-lg: 16px 16px 40px rgba(0,0,0,.2);
  --surface: var(--color-surface, oklch(98% 0 0));
  --text: var(--color-text, oklch(20% 0 0));
  --focus-ring: 0 0 0 1px color-mix(in oklab, var(--color-primary) 28%, transparent);
  --color-primary-soft: color-mix(in oklab, var(--surface) 75%, var(--color-primary) 25%);
  --accent: var(--color-primary-soft);
  --accent-soft: color-mix(in oklab, var(--surface) 75%, var(--accent) 25%);
  --accent-ghost: color-mix(in oklab, var(--surface) 85%, var(--accent) 4%);
  --accent-line: color-mix(in oklab, var(--accent) 35%, black 65%);
  --accent-text: color-mix(in oklab, var(--accent) 20%, var(--text) 80%);
  --balance-color-bg: oklch(92.302% 0.13604 100.482);
  --accounts-color-bg: oklch(93.322% 0.16075 131.345);
  --captables-color-bg: oklch(84.817% 0.10688 63.274);
  --simulation-color-bg: oklch(76.312% 0.2006 326.043);
  --vault-color-bg: oklch(70.163% 0.18953 23.307);
}
:root[data-page=balance] {
  --accent: var(--balance-color-bg) ;
}
:root[data-page=accounts] {
  --accent: var(--accounts-color-bg) ;
}
:root[data-page=captables] {
  --accent:var(--captables-color-bg) ;
}
:root[data-page=simulation] {
  --accent:var(--simulation-color-bg) ;
}
:root[data-page=vault] {
  --accent:var(--vault-color-bg) ;
}

/* src/ui/layout/layout.css */
body {
  margin: 0;
}
.appshell {
  --sidebar-w: 300px;
  --sidebar-w-compact: 72px;
  --header-h: 56px;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-fg);
}
.appshell[data-collapsed=true] {
  grid-template-columns: var(--sidebar-w-compact) 1fr;
}
.appshell__sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  box-sizing: border-box;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
.appshell__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.appshell__logo {
  display: inline-grid;
  place-items: center;
  width: 45px;
  height: 45px;
  font-size: 45px;
  color: color-mix(in oklab, var(--color-primary) 85%, transparent);
}
.appshell__brandname {
  font-weight: 700;
}
.appshell__nav {
  flex: 1 1 auto;
  padding: var(--space-3);
  overflow: auto;
}
.appshell__group + .appshell__group {
  margin-top: var(--space-4);
}
.appshell__groupname {
  color: var(--color-muted-fg);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 var(--space-2) var(--space-2);
}
.appshell__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .15rem .15rem;
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  text-decoration: none;
  transition: background var(--dur), color var(--dur);
}
.appshell__link.active {
  background: color-mix(in oklab, var(--accent) 50%, white);
  color: var(--color-fg);
}
.appshell__icon-container {
  padding: 5px;
  background: color-mix(in oklab, var(--color-primary-soft) 50%, white);
}
.appshell__icon {
  width: 2.25rem;
  text-align: center;
  opacity: .6;
}
.appshell__sidebarfooter {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.appshell__header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.appshell__breadcrumbs {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.crumb {
  font-weight: 600;
}
.crumb.muted {
  color: var(--color-muted-fg);
  font-weight: 500;
}
.sep {
  color: var(--color-muted-fg);
}
.appshell__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.appshell__hamburger {
  display: none;
}
.appshell__main {
  grid-area: main;
  padding: var(--space-5);
  position: relative;
  z-index: 0;
}
.appshell__container {
  width: min(1200px, 100%);
  margin: 0 auto;
}
.appshell[data-collapsed=true] .appshell__brandname,
.appshell[data-collapsed=true] .appshell__groupname,
.appshell[data-collapsed=true] .appshell__link span:not(.appshell__icon) {
  display: none;
}
.appshell[data-collapsed=true] .appshell__link {
  justify-content: center;
}
@media (max-width: 960px) {
  .appshell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }
  .appshell__sidebar {
    display: none;
  }
  .appshell__hamburger {
    display: inline-flex;
  }
}
.appshell__drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
  display: none;
}
.appshell__drawer[data-open=true] {
  display: block;
}
.appshell__drawerpanel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  animation: slideIn var(--dur) var(--ease-out);
}
@keyframes slideIn {
  from {
    transform: translateX(-12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.editor {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - var(--header-h));
}
.editor__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.editor__title h2 {
  margin: 0 0 .25rem 0;
}
.editor__tabs {
  display: flex;
  gap: 8px;
}
.tab {
  padding: .45rem .75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-fg);
}
.tab.active {
  background: color-mix(in oklab, var(--color-primary) 18%, transparent);
}
.editor__main {
  padding: var(--space-5) 0;
}
/*# sourceMappingURL=app.css.map */