/* [project]/apps/web/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-white: #fff;
    --spacing: .25rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-normal: 0em;
    --leading-normal: 1.5;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 2px #0f172a0f, 0 1px 3px #0f172a14;
    --shadow-md: 0 6px 18px #0f172a14, 0 2px 6px #0f172a0f;
    --shadow-lg: 0 20px 48px #0f172a1f, 0 6px 16px #0f172a14;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary-900: #0f172a;
    --color-primary-700: #334155;
    --color-primary-600: #475569;
    --color-primary-500: #64748b;
    --color-primary-400: #94a3b8;
    --color-primary-300: #cbd5e1;
    --color-primary-200: #e2e8f0;
    --color-primary-100: #eef2f7;
    --color-primary-050: #f8fafc;
    --color-primary-025: #fbfcfe;
    --color-primary: var(--color-primary-500);
    --color-primary-ink: #fff;
    --color-accent-600: #d97706;
    --color-accent-500: #f59e0b;
    --color-accent-300: #fcd34d;
    --color-accent-050: #fffbeb;
    --color-accent: var(--color-accent-500);
    --color-accent-ink: #fff;
    --color-flag-ink: #92400e;
    --color-ink-900: #0f172a;
    --color-ink-700: #334155;
    --color-ink-500: #64748b;
    --color-ink-400: #94a3b8;
    --color-ink-300: #aab4c0;
    --color-surface: #fff;
    --color-bg: #fff;
    --color-bg-soft: #f8fafc;
    --color-line: #e2e8f0;
    --color-line-strong: #cbd5e1;
    --color-link: var(--color-primary-600);
    --color-focus-ring: var(--color-primary-400);
    --color-success: #16a34a;
    --color-success-050: #f0fdf4;
    --color-warning: var(--color-accent-500);
    --color-danger: #dc2626;
    --color-danger-050: #fef2f2;
    --radius-pill: 999px;
    --radius-field: 10px;
    --text-caption: 12px;
    --text-label: 13px;
    --text-ui: 14px;
    --text-title: 15px;
    --text-lead: 17px;
    --text-heading: 19px;
    --text-stat-sm: 21px;
    --text-stat: 26px;
    --size-field: 42px;
    --page-readable: 720px;
    --page-standard: 1200px;
    --page-wide: 1600px;
    --page-gutter: clamp(16px, 4vw, 56px);
    --shell-side: 264px;
    --radius-card: 12px;
    --font-display: "Inter", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  html, body {
    height: 100%;
  }

  body {
    font-family: var(--font-body);
    color: var(--color-ink-700);
    background: var(--color-bg-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-size: 1.0625rem;
    line-height: 1.6;
  }
}

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

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

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-y-0 {
    inset-block: 0;
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-\[calc\(100\%_\+_8px\)\] {
    top: calc(100% + 8px);
  }

  .right-0 {
    right: 0;
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-\[13px\] {
    right: 13px;
  }

  .right-\[calc\(100\%_\+_8px\)\] {
    right: calc(100% + 8px);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-\[calc\(100\%_\+_8px\)\] {
    bottom: calc(100% + 8px);
  }

  .left-0\.5 {
    left: calc(var(--spacing) * .5);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-\[13px\] {
    left: 13px;
  }

  .left-\[calc\(100\%_\+_8px\)\] {
    left: calc(100% + 8px);
  }

  .z-30 {
    z-index: 30;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[80\] {
    z-index: 80;
  }

  .z-\[200\] {
    z-index: 200;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: 0;
  }

  .m-auto {
    margin: auto;
  }

  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .-my-1 {
    margin-block: calc(var(--spacing) * -1);
  }

  .my-1 {
    margin-block: var(--spacing);
  }

  .-mt-px {
    margin-top: -1px;
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-auto {
    margin-left: auto;
  }

  .box-border {
    box-sizing: border-box;
  }

  .\!inline {
    display: inline !important;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-grid {
    display: inline-grid;
  }

  .table {
    display: table;
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-\[9px\] {
    width: 9px;
    height: 9px;
  }

  .size-\[26px\] {
    width: 26px;
    height: 26px;
  }

  .size-\[30px\] {
    width: 30px;
    height: 30px;
  }

  .h-\(--size-field\) {
    height: var(--size-field);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-\[15px\] {
    height: 15px;
  }

  .h-\[26px\] {
    height: 26px;
  }

  .h-\[46px\] {
    height: 46px;
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-\[280px\] {
    max-height: 280px;
  }

  .min-h-\(--size-field\) {
    min-height: var(--size-field);
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-\[22px\] {
    min-height: 22px;
  }

  .min-h-\[30px\] {
    min-height: 30px;
  }

  .min-h-\[57px\] {
    min-height: 57px;
  }

  .min-h-\[60px\] {
    min-height: 60px;
  }

  .min-h-\[64px\] {
    min-height: 64px;
  }

  .min-h-\[84px\] {
    min-height: 84px;
  }

  .min-h-full {
    min-height: 100%;
  }

  .w-\[15px\] {
    width: 15px;
  }

  .w-\[42px\] {
    width: 42px;
  }

  .w-\[460px\] {
    width: 460px;
  }

  .w-\[calc\(100\%\+16px\)\], .w-\[calc\(100\%_\+_16px\)\] {
    width: calc(100% + 16px);
  }

  .w-\[min\(420px\,calc\(100vw-48px\)\)\] {
    width: min(420px, 100vw - 48px);
  }

  .w-\[var\(--anchor-width\)\] {
    width: var(--anchor-width);
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .max-w-60 {
    max-width: calc(var(--spacing) * 60);
  }

  .max-w-\[94vw\] {
    max-width: 94vw;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[min\(380px\,calc\(100vw_-_32px\)\)\] {
    max-width: min(380px, 100vw - 32px);
  }

  .max-w-\[var\(--available-width\)\] {
    max-width: var(--available-width);
  }

  .max-w-\[var\(--page-readable\)\] {
    max-width: var(--page-readable);
  }

  .max-w-\[var\(--page-standard\)\] {
    max-width: var(--page-standard);
  }

  .max-w-\[var\(--page-wide\)\] {
    max-width: var(--page-wide);
  }

  .max-w-none {
    max-width: none;
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-\[100px\] {
    min-width: 100px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[190px\] {
    min-width: 190px;
  }

  .min-w-\[880px\] {
    min-width: 880px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-auto {
    flex: auto;
  }

  .flex-none {
    flex: none;
  }

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

  .-translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[18px\] {
    --tw-translate-x: 18px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-1 {
    --tw-translate-y: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-\[da-toast-in_200ms_ease_both\] {
    animation: .2s both da-toast-in;
  }

  .animate-\[spin_0\.7s_linear_infinite\] {
    animation: .7s linear infinite spin;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .resize {
    resize: both;
  }

  .resize-y {
    resize: vertical;
  }

  .list-none {
    list-style-type: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-\[repeat\(auto-fit\,minmax\(180px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .grid-cols-subgrid {
    grid-template-columns: subgrid;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

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

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .gap-px {
    gap: 1px;
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-2\.5 {
    row-gap: calc(var(--spacing) * 2.5);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  .self-center {
    align-self: center;
  }

  .self-start {
    align-self: flex-start;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-card {
    border-radius: var(--radius-card);
  }

  .rounded-field {
    border-radius: var(--radius-field);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-pill {
    border-radius: var(--radius-pill);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .rounded-l-\[4px\] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-accent {
    border-color: var(--color-accent);
  }

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

  .border-line {
    border-color: var(--color-line);
  }

  .border-primary-100 {
    border-color: var(--color-primary-100);
  }

  .border-primary-200 {
    border-color: var(--color-primary-200);
  }

  .border-primary-500 {
    border-color: var(--color-primary-500);
  }

  .border-primary-600 {
    border-color: var(--color-primary-600);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-t-primary-500 {
    border-top-color: var(--color-primary-500);
  }

  .border-b-transparent {
    border-bottom-color: #0000;
  }

  .bg-accent {
    background-color: var(--color-accent);
  }

  .bg-accent-050 {
    background-color: var(--color-accent-050);
  }

  .bg-accent-500 {
    background-color: var(--color-accent-500);
  }

  .bg-bg-soft {
    background-color: var(--color-bg-soft);
  }

  .bg-danger {
    background-color: var(--color-danger);
  }

  .bg-danger-050 {
    background-color: var(--color-danger-050);
  }

  .bg-ink-300 {
    background-color: var(--color-ink-300);
  }

  .bg-ink-900 {
    background-color: var(--color-ink-900);
  }

  .bg-ink-900\/34 {
    background-color: #0f172a57;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ink-900\/34 {
      background-color: color-mix(in oklab, var(--color-ink-900) 34%, transparent);
    }
  }

  .bg-ink-900\/42 {
    background-color: #0f172a6b;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ink-900\/42 {
      background-color: color-mix(in oklab, var(--color-ink-900) 42%, transparent);
    }
  }

  .bg-line {
    background-color: var(--color-line);
  }

  .bg-primary-050 {
    background-color: var(--color-primary-050);
  }

  .bg-primary-500 {
    background-color: var(--color-primary-500);
  }

  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }

  .bg-success {
    background-color: var(--color-success);
  }

  .bg-success-050 {
    background-color: var(--color-success-050);
  }

  .bg-surface {
    background-color: var(--color-surface);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-linear-to-r\/srgb {
    --tw-gradient-position: to right;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .bg-linear-to-r\/srgb {
      --tw-gradient-position: to right in srgb;
    }
  }

  .bg-linear-to-r\/srgb {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-none {
    background-image: none;
  }

  .from-primary-500 {
    --tw-gradient-from: var(--color-primary-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-primary-600 {
    --tw-gradient-to: var(--color-primary-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .p-0 {
    padding: 0;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-\[3px\] {
    padding: 3px;
  }

  .p-px {
    padding: 1px;
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-\[var\(--page-gutter\)\] {
    padding-inline: var(--page-gutter);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-0\.75 {
    padding-block: calc(var(--spacing) * .75);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-\[3px\] {
    padding-block: 3px;
  }

  .py-\[56px\] {
    padding-block: 56px;
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pr-1 {
    padding-right: var(--spacing);
  }

  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pr-24 {
    padding-right: calc(var(--spacing) * 24);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-\[28px\] {
    padding-left: 28px;
  }

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

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

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

  .font-body {
    font-family: var(--font-body);
  }

  .font-display {
    font-family: var(--font-display);
  }

  .text-caption {
    font-size: var(--text-caption);
  }

  .text-heading {
    font-size: var(--text-heading);
  }

  .text-label {
    font-size: var(--text-label);
  }

  .text-lead {
    font-size: var(--text-lead);
  }

  .text-stat {
    font-size: var(--text-stat);
  }

  .text-stat-sm {
    font-size: var(--text-stat-sm);
  }

  .text-title {
    font-size: var(--text-title);
  }

  .text-ui {
    font-size: var(--text-ui);
  }

  .leading-\(--size-field\) {
    --tw-leading: var(--size-field);
    line-height: var(--size-field);
  }

  .leading-\[0\] {
    --tw-leading: 0;
    line-height: 0;
  }

  .leading-\[1\.2\] {
    --tw-leading: 1.2;
    line-height: 1.2;
  }

  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }

  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }

  .leading-\[calc\(var\(--size-field\)_-_2px\)\] {
    --tw-leading: calc(var(--size-field) - 2px);
    line-height: calc(var(--size-field) - 2px);
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.03em\] {
    --tw-tracking: .03em;
    letter-spacing: .03em;
  }

  .tracking-\[0\.04em\] {
    --tw-tracking: .04em;
    letter-spacing: .04em;
  }

  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-accent-600 {
    color: var(--color-accent-600);
  }

  .text-accent-ink {
    color: var(--color-accent-ink);
  }

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

  .text-flag-ink {
    color: var(--color-flag-ink);
  }

  .text-ink-300 {
    color: var(--color-ink-300);
  }

  .text-ink-500 {
    color: var(--color-ink-500);
  }

  .text-ink-700 {
    color: var(--color-ink-700);
  }

  .text-ink-900 {
    color: var(--color-ink-900);
  }

  .text-primary-500 {
    color: var(--color-primary-500);
  }

  .text-primary-600 {
    color: var(--color-primary-600);
  }

  .text-primary-700 {
    color: var(--color-primary-700);
  }

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

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

  .normal-case {
    text-transform: none;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .no-underline {
    text-decoration-line: none;
  }

  .underline {
    text-decoration-line: underline;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-\[0\.55\] {
    opacity: .55;
  }

  .shadow-\[-16px_0_44px_rgba\(15\,23\,42\,0\.20\)\] {
    --tw-shadow: -16px 0 44px var(--tw-shadow-color, #0f172a33);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_10px_30px_rgba\(15\,23\,42\,0\.16\)\] {
    --tw-shadow: 0 10px 30px var(--tw-shadow-color, #0f172a29);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 20px 48px var(--tw-shadow-color, #0f172a1f), 0 6px 16px var(--tw-shadow-color, #0f172a14);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0f172a0f), 0 1px 3px var(--tw-shadow-color, #0f172a14);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background\,border-color\] {
    transition-property: background, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background\,color\] {
    transition-property: background, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\] {
    transition-property: background-color, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,color\] {
    transition-property: background-color, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,transform\] {
    transition-property: background-color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,box-shadow\,background\] {
    transition-property: border-color, box-shadow, background;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,box-shadow\] {
    transition-property: border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\] {
    transition-property: border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,background-color\,border-color\,box-shadow\] {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,border-color\] {
    transition-property: color, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,scale\] {
    transition-property: opacity, scale;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,translate\,visibility\] {
    transition-property: opacity, translate, visibility;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[translate\,opacity\] {
    transition-property: translate, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-120 {
    --tw-duration: .12s;
    transition-duration: .12s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-\[120ms\] {
    --tw-duration: .12s;
    transition-duration: .12s;
  }

  .duration-\[130ms\] {
    --tw-duration: .13s;
    transition-duration: .13s;
  }

  .duration-\[140ms\] {
    --tw-duration: .14s;
    transition-duration: .14s;
  }

  .duration-\[160ms\] {
    --tw-duration: .16s;
    transition-duration: .16s;
  }

  .duration-\[220ms\] {
    --tw-duration: .22s;
    transition-duration: .22s;
  }

  .ease-\[cubic-bezier\(0\.2\,0\.9\,0\.3\,1\.2\)\] {
    --tw-ease: cubic-bezier(.2,.9,.3,1.2);
    transition-timing-function: cubic-bezier(.2, .9, .3, 1.2);
  }

  .ease-\[cubic-bezier\(0\.22\,1\,0\.36\,1\)\] {
    --tw-ease: cubic-bezier(.22,1,.36,1);
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }

  .ease-\[ease\] {
    --tw-ease: ease;
    transition-timing-function: ease;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[-moz-appearance\:textfield\] {
    -moz-appearance: textfield;
  }

  :is(.\*\:flex-1 > *) {
    flex: 1;
  }

  :is(.\*\:shrink-0 > *) {
    flex-shrink: 0;
  }

  :is(.\*\:justify-center > *) {
    justify-content: center;
  }

  .group-focus-within\/tip\:visible:is(:where(.group\/tip):focus-within *) {
    visibility: visible;
  }

  .group-focus-within\/tip\:translate-x-0:is(:where(.group\/tip):focus-within *) {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-focus-within\/tip\:translate-y-0:is(:where(.group\/tip):focus-within *) {
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-focus-within\/tip\:opacity-100:is(:where(.group\/tip):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:visible:is(:where(.group):hover *) {
      visibility: visible;
    }

    .group-hover\:translate-y-0:is(:where(.group):hover *) {
      --tw-translate-y: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\/tip\:visible:is(:where(.group\/tip):hover *) {
      visibility: visible;
    }

    .group-hover\/tip\:translate-x-0:is(:where(.group\/tip):hover *) {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\/tip\:translate-y-0:is(:where(.group\/tip):hover *) {
      --tw-translate-y: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\/tip\:opacity-100:is(:where(.group\/tip):hover *) {
      opacity: 1;
    }
  }

  .group-focus-visible\:ring-2:is(:where(.group):focus-visible *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-focus-visible\:ring-focus-ring:is(:where(.group):focus-visible *) {
    --tw-ring-color: var(--color-focus-ring);
  }

  .group-disabled\:text-ink-300:is(:where(.group):disabled *) {
    color: var(--color-ink-300);
  }

  .group-data-\[active\]\:text-primary-600:is(:where(.group)[data-active] *) {
    color: var(--color-primary-600);
  }

  .group-data-\[variant\=compact\]\/kpi-grid\:gap-\[3px\]:is(:where(.group\/kpi-grid)[data-variant="compact"] *) {
    gap: 3px;
  }

  .group-data-\[variant\=compact\]\/kpi-grid\:px-4:is(:where(.group\/kpi-grid)[data-variant="compact"] *) {
    padding-inline: calc(var(--spacing) * 4);
  }

  .group-data-\[variant\=compact\]\/kpi-grid\:pt-3:is(:where(.group\/kpi-grid)[data-variant="compact"] *) {
    padding-top: calc(var(--spacing) * 3);
  }

  .group-data-\[variant\=compact\]\/kpi-grid\:pb-3\.5:is(:where(.group\/kpi-grid)[data-variant="compact"] *) {
    padding-bottom: calc(var(--spacing) * 3.5);
  }

  .group-data-\[variant\=compact\]\/kpi-grid\:text-stat-sm:is(:where(.group\/kpi-grid)[data-variant="compact"] *) {
    font-size: var(--text-stat-sm);
  }

  .group-\[\:hover\:not\(\[data-active\]\)\:not\(\[data-disabled\]\)\]\:text-ink-500:is(:where(.group):hover:not([data-active]):not([data-disabled]) *) {
    color: var(--color-ink-500);
  }

  .peer-focus-visible\:visible:is(:where(.peer):focus-visible ~ *) {
    visibility: visible;
  }

  .peer-focus-visible\:translate-y-0:is(:where(.peer):focus-visible ~ *) {
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .peer-focus-visible\:opacity-100:is(:where(.peer):focus-visible ~ *) {
    opacity: 1;
  }

  .peer-focus-visible\:ring-2:is(:where(.peer):focus-visible ~ *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .peer-focus-visible\:ring-focus-ring:is(:where(.peer):focus-visible ~ *) {
    --tw-ring-color: var(--color-focus-ring);
  }

  .placeholder\:text-ink-300::placeholder {
    color: var(--color-ink-300);
  }

  .before\:absolute:before {
    content: var(--tw-content);
    position: absolute;
  }

  .before\:top-\[30px\]:before {
    content: var(--tw-content);
    top: 30px;
  }

  .before\:bottom-0:before {
    content: var(--tw-content);
    bottom: 0;
  }

  .before\:left-\[14px\]:before {
    content: var(--tw-content);
    left: 14px;
  }

  .before\:size-\[7px\]:before {
    content: var(--tw-content);
    width: 7px;
    height: 7px;
  }

  .before\:w-\[2px\]:before {
    content: var(--tw-content);
    width: 2px;
  }

  .before\:shrink-0:before {
    content: var(--tw-content);
    flex-shrink: 0;
  }

  .before\:rounded-full:before {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .before\:bg-current:before {
    content: var(--tw-content);
    background-color: currentColor;
  }

  .before\:bg-line:before {
    content: var(--tw-content);
    background-color: var(--color-line);
  }

  .before\:content-\[\'\'\]:before {
    --tw-content: "";
    content: var(--tw-content);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:top-1\/2:after {
    content: var(--tw-content);
    top: 50%;
  }

  .after\:top-full:after {
    content: var(--tw-content);
    top: 100%;
  }

  .after\:right-full:after {
    content: var(--tw-content);
    right: 100%;
  }

  .after\:bottom-full:after {
    content: var(--tw-content);
    bottom: 100%;
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%;
  }

  .after\:left-full:after {
    content: var(--tw-content);
    left: 100%;
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:-translate-y-1\/2:after {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:border-\[5px\]:after {
    content: var(--tw-content);
    border-style: var(--tw-border-style);
    border-width: 5px;
  }

  .after\:border-transparent:after {
    content: var(--tw-content);
    border-color: #0000;
  }

  .after\:border-t-ink-900:after {
    content: var(--tw-content);
    border-top-color: var(--color-ink-900);
  }

  .after\:border-r-ink-900:after {
    content: var(--tw-content);
    border-right-color: var(--color-ink-900);
  }

  .after\:border-b-ink-900:after {
    content: var(--tw-content);
    border-bottom-color: var(--color-ink-900);
  }

  .after\:border-l-ink-900:after {
    content: var(--tw-content);
    border-left-color: var(--color-ink-900);
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:pb-0:last-child {
    padding-bottom: 0;
  }

  .last\:before\:hidden:last-child:before {
    content: var(--tw-content);
    display: none;
  }

  .focus-within\:border-primary-400:focus-within {
    border-color: var(--color-primary-400);
  }

  .focus-within\:bg-surface:focus-within {
    background-color: var(--color-surface);
  }

  .focus-within\:ring-\[3px\]:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-primary-050:focus-within {
    --tw-ring-color: var(--color-primary-050);
  }

  @media (hover: hover) {
    .hover\:border-accent-600:hover {
      border-color: var(--color-accent-600);
    }

    .hover\:border-line:hover {
      border-color: var(--color-line);
    }

    .hover\:border-line-strong:hover {
      border-color: var(--color-line-strong);
    }

    .hover\:border-primary-400:hover {
      border-color: var(--color-primary-400);
    }

    .hover\:bg-accent-600:hover {
      background-color: var(--color-accent-600);
    }

    .hover\:bg-bg-soft:hover {
      background-color: var(--color-bg-soft);
    }

    .hover\:bg-danger-050:hover {
      background-color: var(--color-danger-050);
    }

    .hover\:bg-line:hover {
      background-color: var(--color-line);
    }

    .hover\:bg-primary-050:hover {
      background-color: var(--color-primary-050);
    }

    .hover\:bg-primary-200:hover {
      background-color: var(--color-primary-200);
    }

    .hover\:bg-primary-500:hover {
      background-color: var(--color-primary-500);
    }

    .hover\:bg-surface:hover {
      background-color: var(--color-surface);
    }

    .hover\:text-ink-700:hover {
      color: var(--color-ink-700);
    }

    .hover\:text-ink-900:hover {
      color: var(--color-ink-900);
    }

    .hover\:text-primary-600:hover {
      color: var(--color-primary-600);
    }

    .hover\:text-primary-700:hover {
      color: var(--color-primary-700);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:brightness-95:hover {
      --tw-brightness: brightness(95%);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }
  }

  .focus\:border-danger:focus {
    border-color: var(--color-danger);
  }

  .focus\:border-primary-400:focus {
    border-color: var(--color-primary-400);
  }

  .focus\:bg-surface:focus {
    background-color: var(--color-surface);
  }

  .focus\:ring-\[3px\]:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-danger-050:focus {
    --tw-ring-color: var(--color-danger-050);
  }

  .focus\:ring-primary-050:focus {
    --tw-ring-color: var(--color-primary-050);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-primary-400:focus-visible {
    border-color: var(--color-primary-400);
  }

  .focus-visible\:bg-primary-050:focus-visible {
    background-color: var(--color-primary-050);
  }

  .focus-visible\:text-primary-600:focus-visible {
    color: var(--color-primary-600);
  }

  .focus-visible\:text-primary-700:focus-visible {
    color: var(--color-primary-700);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-focus-ring:focus-visible {
    --tw-ring-color: var(--color-focus-ring);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }

  .active\:translate-y-px:active {
    --tw-translate-y: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:border-line:disabled {
    border-color: var(--color-line);
  }

  .disabled\:bg-bg-soft:disabled {
    background-color: var(--color-bg-soft);
  }

  .disabled\:text-ink-500:disabled {
    color: var(--color-ink-500);
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:opacity-\[0\.55\]:disabled {
    opacity: .55;
  }

  .disabled\:shadow-none:disabled {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-\[\[data-slot\=card-head-actions\]\]\:min-h-\[57px\]:has([data-slot="card-head-actions"]) {
    min-height: 57px;
  }

  .has-\[\[data-slot\=card-head-actions\]\]\:py-2:has([data-slot="card-head-actions"]) {
    padding-block: calc(var(--spacing) * 2);
  }

  .aria-disabled\:cursor-default[aria-disabled="true"] {
    cursor: default;
  }

  .aria-disabled\:opacity-40[aria-disabled="true"] {
    opacity: .4;
  }

  @media (hover: hover) {
    .aria-disabled\:hover\:bg-surface[aria-disabled="true"]:hover {
      background-color: var(--color-surface);
    }
  }

  .data-money\:pl-\[28px\][data-money] {
    padding-left: 28px;
  }

  .data-\[active\]\:border-b-primary-500[data-active] {
    border-bottom-color: var(--color-primary-500);
  }

  .data-\[active\]\:text-primary-700[data-active] {
    color: var(--color-primary-700);
  }

  .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
    cursor: not-allowed;
  }

  .data-\[disabled\]\:bg-bg-soft[data-disabled] {
    background-color: var(--color-bg-soft);
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[disabled\]\:opacity-60[data-disabled] {
    opacity: .6;
  }

  .data-\[disabled\]\:opacity-80[data-disabled] {
    opacity: .8;
  }

  @media (hover: hover) {
    .data-\[disabled\]\:hover\:bg-transparent[data-disabled]:hover {
      background-color: #0000;
    }
  }

  .data-\[highlighted\]\:bg-danger-050[data-highlighted] {
    background-color: var(--color-danger-050);
  }

  .data-\[highlighted\]\:bg-primary-050[data-highlighted] {
    background-color: var(--color-primary-050);
  }

  .data-\[placeholder\]\:text-ink-300[data-placeholder] {
    color: var(--color-ink-300);
  }

  .data-\[popup-open\]\:rotate-180[data-popup-open] {
    rotate: 180deg;
  }

  .data-\[popup-open\]\:text-primary-600[data-popup-open] {
    color: var(--color-primary-600);
  }

  .data-\[prefix\]\:pl-\[30px\][data-prefix] {
    padding-left: 30px;
  }

  .data-\[selected\]\:font-semibold[data-selected] {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .data-\[selected\]\:text-primary-700[data-selected] {
    color: var(--color-primary-700);
  }

  .data-\[starting-style\]\:scale-\[0\.94\][data-starting-style] {
    scale: .94;
  }

  .data-\[starting-style\]\:opacity-0[data-starting-style] {
    opacity: 0;
  }

  .data-\[suffix\]\:pr-\[36px\][data-suffix] {
    padding-right: 36px;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none {
      animation: none;
    }

    .motion-reduce\:transition-none {
      transition-property: none;
    }
  }

  @media (min-width: 561px) {
    .min-\[561px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 861px) {
    .min-\[861px\]\:block {
      display: block;
    }

    .min-\[861px\]\:grid-cols-\[0_minmax\(0\,1fr\)\] {
      grid-template-columns: 0 minmax(0, 1fr);
    }

    .min-\[861px\]\:grid-cols-\[var\(--shell-side\)_minmax\(0\,1fr\)\] {
      grid-template-columns: var(--shell-side) minmax(0,1fr);
    }
  }

  @media (min-width: 1101px) {
    .min-\[1101px\]\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @starting-style {
    .starting\:translate-x-6 {
      --tw-translate-x: calc(var(--spacing) * 6);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @starting-style {
    .starting\:opacity-0 {
      opacity: 0;
    }
  }

  @starting-style {
    .starting\:opacity-40 {
      opacity: .4;
    }
  }

  .\[\&_h3\]\:mt-3\.5 h3 {
    margin-top: calc(var(--spacing) * 3.5);
  }

  .\[\&_h3\]\:mb-2 h3 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .\[\&_h3\]\:font-display h3 {
    font-family: var(--font-display);
  }

  .\[\&_h3\]\:text-heading h3 {
    font-size: var(--text-heading);
  }

  .\[\&_h3\]\:font-semibold h3 {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .\[\&_h3\]\:text-ink-900 h3 {
    color: var(--color-ink-900);
  }

  .\[\&_p\]\:mt-0 p {
    margin-top: 0;
  }

  .\[\&_p\]\:mb-6 p {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .\[\&_p\]\:text-ui p {
    font-size: var(--text-ui);
  }

  .\[\&_p\]\:leading-normal p {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .\[\&_p\]\:text-ink-500 p {
    color: var(--color-ink-500);
  }

  .\[\&_svg\]\:size-\[1em\] svg {
    width: 1em;
    height: 1em;
  }

  .\[\&\:\:-webkit-calendar-picker-indicator\]\:cursor-pointer::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }

  .\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-\[0\.55\]::-webkit-calendar-picker-indicator {
    opacity: .55;
  }

  @media (hover: hover) {
    .hover\:\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-\[0\.85\]:hover::-webkit-calendar-picker-indicator {
      opacity: .85;
    }
  }

  .\[\&\:\:-webkit-inner-spin-button\]\:m-0::-webkit-inner-spin-button {
    margin: 0;
  }

  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
    appearance: none;
  }

  .\[\&\:\:-webkit-outer-spin-button\]\:m-0::-webkit-outer-spin-button {
    margin: 0;
  }

  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
    appearance: none;
  }

  .\[\&\:hover\:not\(\[data-active\]\)\:not\(\[data-disabled\]\)\]\:text-ink-900:hover:not([data-active]):not([data-disabled]) {
    color: var(--color-ink-900);
  }

  .\[\&\>\*\]\:flex-1 > * {
    flex: 1;
  }

  .\[\&\>\*\]\:justify-center > * {
    justify-content: center;
  }
}

[data-theme] {
  --color-primary: var(--color-primary-500);
  --color-accent: var(--color-accent-500);
  --color-link: var(--color-primary-600);
  --color-focus-ring: var(--color-primary-400);
  --color-warning: var(--color-accent-500);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

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

[data-theme="finaforte"] {
  --color-primary-900: #044a4e;
  --color-primary-700: #046a70;
  --color-primary-600: #058089;
  --color-primary-500: #05a1aa;
  --color-primary-400: #33b4bc;
  --color-primary-300: #68c7cd;
  --color-primary-200: #9ddbdf;
  --color-primary-100: #d2eef0;
  --color-primary-050: #ecf8f9;
  --color-primary-025: #f5fbfb;
  --color-accent-600: #ec8c3c;
  --color-accent-500: #f5a65b;
  --color-accent-300: #f9c593;
  --color-accent-050: #fef2e7;
  --color-flag-ink: #8a4b15;
  --color-ink-900: #162824;
  --color-ink-700: #2e423f;
  --color-ink-500: #586967;
  --color-ink-400: #758685;
  --color-ink-300: #93a3a3;
  --color-surface: #fff;
  --color-bg: #fff;
  --color-bg-soft: #f4f8f8;
  --color-line: #e2ecec;
  --color-line-strong: #cbd9d9;
  --color-success: #1e9e6a;
  --color-success-050: #eaf7f0;
  --color-danger: #d8543b;
  --color-danger-050: #fbede9;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-lg: 32px;
  --radius-xl: 64px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px #143a3b0f, 0 1px 3px #143a3b14;
  --shadow-md: 0 6px 18px #143a3b14, 0 2px 6px #143a3b0f;
  --shadow-lg: 0 20px 48px #143a3b1f, 0 6px 16px #143a3b14;
}

:root {
  --teal-700: #046a70;
  --teal-600: #058089;
  --teal-500: #05a1aa;
  --teal-400: #33b4bc;
  --teal-200: #a9dde1;
  --teal-100: #d2eef0;
  --teal-050: #ecf8f9;
  --orange-600: #ec8c3c;
  --orange-500: #f5a65b;
  --orange-300: #f9c593;
  --orange-050: #fef2e7;
  --ink-900: #162824;
  --ink-700: #2e423f;
  --ink-500: #586967;
  --ink-400: var(--color-ink-400);
  --ink-300: #93a3a3;
  --line: #e2ecec;
  --surface: #fff;
  --bg: #fff;
  --bg-soft: #f4f8f8;
  --primary: var(--teal-500);
  --primary-ink: #fff;
  --accent: var(--orange-500);
  --accent-ink: #fff;
  --link: var(--teal-600);
  --focus-ring: #3fb0b0;
  --success: #1e9e6a;
  --warning: var(--orange-500);
  --danger: #d8543b;
  --danger-050: #fdecea;
  --r-pill: 999px;
  --r-card: 20px;
  --r-lg: 32px;
  --r-xl: 64px;
  --r-sm: 10px;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --fs-eyebrow: .875rem;
  --fs-h1: 4rem;
  --fs-h2: 2.5rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-caption: .8125rem;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --tracking-eyebrow: .16em;
  --tracking-tight: -.01em;
  --shadow-sm: 0 1px 2px #143a3b0f, 0 1px 3px #143a3b14;
  --shadow-md: 0 6px 18px #143a3b14, 0 2px 6px #143a3b0f;
  --shadow-lg: 0 20px 48px #143a3b1f, 0 6px 16px #143a3b14;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --maxw: 1200px;
}

.ff {
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.ff h1, .ff h2, .ff h3, .ff h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 .5em;
}

.ff h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.ff h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.ff h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.ff h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.ff p {
  margin: 0 0 1em;
}

.ff a {
  color: var(--link);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.ff a:hover {
  color: var(--teal-700);
}

.ff .eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-500);
}

.ff .lead {
  font-size: var(--fs-lead);
  color: var(--ink-700);
  line-height: 1.5;
}

:root {
  --logo-teal: url("https://cdn.finaforte.nl/wp-content/uploads/2023/10/Finaforte_L_RGB.png");
  --logo-small: url("https://cdn.finaforte.nl/wp-content/uploads/2023/10/Finaforte_L_RGB-200x31-1.png");
  --favicon: url("https://cdn.finaforte.nl/wp-content/uploads/2019/08/cropped-Finaforte_fav-512-v2-270x270.png");
  --hero-photo: url("https://cdn.finaforte.nl/wp-content/uploads/2022/05/businesswomen-working-in-team-2021-08-27-22-34-32-utc.jpg");
}

.ff-logo {
  aspect-ratio: 2500 / 392;
  background: var(--logo-teal) center / contain no-repeat;
  width: 180px;
  display: inline-block;
}

.ff-logo--white {
  filter: brightness(0) invert();
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  margin: 0;
}

#root {
  height: 100%;
}

.ff-avatar, .icon-bubble {
  flex: none;
  justify-content: center;
  align-items: center;
  line-height: 1;
  display: inline-flex;
}

.ff-avatar {
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: .02em;
  font-weight: 600;
  overflow: hidden;
}

.ff-avatar-img {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  display: block;
}

.ff-avatar .lic, .icon-bubble .lic {
  color: inherit;
  line-height: 0;
  display: flex;
}

.ff-avatar .lic, .icon-bubble {
  color: #fff;
}

.app {
  grid-template-columns: 264px 1fr;
  height: 100vh;
  transition: grid-template-columns .2s;
  display: grid;
  overflow: hidden;
}

.app.collapsed {
  grid-template-columns: 76px 1fr;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  flex-direction: column;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: visible;
}

.sb-brand {
  border-bottom: 1px solid var(--line);
  flex: none;
  align-items: center;
  gap: 10px;
  height: 62px;
  padding: 0 22px;
  display: flex;
}

.sb-mark {
  border-radius: 8px;
  flex: none;
  width: 30px;
  height: 30px;
  display: none;
}

.sb-brand .ff-logo {
  width: 132px;
}

.sb-brand .sb-sub {
  font-family: var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--teal-500);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.sb-handle {
  background: var(--surface);
  border: 1px solid var(--line);
  width: 26px;
  height: 26px;
  color: var(--ink-500);
  cursor: pointer;
  z-index: 6;
  box-shadow: var(--shadow-sm);
  border-radius: 50%;
  place-items: center;
  padding: 0;
  transition: background .14s, color .14s, border-color .14s;
  display: grid;
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%);
}

.sb-handle:hover {
  background: var(--bg-soft);
  color: var(--ink-900);
  border-color: #d4e0e0;
}

.sb-handle .lic {
  line-height: 0;
  display: flex;
}

.app.collapsed .sb-brand {
  justify-content: center;
  align-items: center;
  height: 62px;
  padding: 0;
}

.app.collapsed .sb-brand .ff-logo, .app.collapsed .sb-brand .sb-sub {
  display: none;
}

.app.collapsed .sb-mark {
  display: block;
}

.app.collapsed .sb-nav {
  padding-left: 10px;
  padding-right: 10px;
}

.app.collapsed .sb-group-label {
  display: none;
}

.app.collapsed .sb-group {
  margin-top: 10px;
}

.app.collapsed .sb-group:first-child {
  margin-top: 6px;
}

.app.collapsed .sb-item {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}

.app.collapsed .sb-item > span:not(.lic), .app.collapsed .sb-item.active:before {
  display: none;
}

.app.collapsed .sb-foot {
  padding: 12px 10px;
}

.app.collapsed .sb-user {
  justify-content: center;
  padding: 7px 0;
}

.app.collapsed .sb-user .who, .app.collapsed .sb-user > .lic {
  display: none !important;
}

.sb-nav {
  flex: auto;
  padding: 14px 14px 24px;
  overflow-y: auto;
}

.sb-nav::-webkit-scrollbar {
  width: 8px;
}

.sb-nav::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 8px;
}

.sb-group {
  margin-top: 18px;
}

.sb-group:first-child {
  margin-top: 6px;
}

.sb-group-label {
  font-family: var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0;
  padding: 0 12px 8px;
  font-size: 11px;
  font-weight: 600;
}

.sb-item {
  border-radius: var(--r-sm);
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 11px;
  margin: 2px 0;
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 500;
  transition: background .14s, color .14s;
  display: flex;
  position: relative;
}

.sb-item .lic {
  color: var(--ink-500);
  transition: color .14s;
  display: inline-flex;
}

.sb-item:hover {
  background: var(--bg-soft);
}

.sb-item:hover .lic {
  color: var(--ink-700);
}

.sb-item.active {
  background: var(--teal-050);
  color: var(--teal-700);
  font-weight: 600;
}

.sb-item.active .lic {
  color: var(--teal-600);
}

.sb-item.active:before {
  content: "";
  background: var(--teal-500);
  border-radius: 0 3px 3px 0;
  width: 3px;
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -14px;
}

.sb-item .sb-count {
  font-family: var(--font-body);
  color: var(--ink-500);
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  text-align: center;
  min-width: 22px;
  margin-left: auto;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}

.sb-item.active .sb-count {
  color: var(--teal-700);
  background: #fff;
}

.sb-foot {
  border-top: 1px solid var(--line);
  flex: none;
  padding: 12px 14px;
}

.sb-user {
  border-radius: var(--r-sm);
  cursor: pointer;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  transition: background .14s;
  display: flex;
}

.sb-user:hover {
  background: var(--bg-soft);
}

.avatar {
  border-radius: var(--r-pill);
  width: 34px;
  height: 34px;
  font-family: var(--font-display);
  color: #fff;
  background: var(--teal-500);
  letter-spacing: .02em;
  flex: none;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.sb-user .who {
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
  display: flex;
}

.sb-user .who b {
  color: var(--ink-900);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.sb-user .who span {
  color: var(--ink-500);
  font-size: 12px;
}

.sb-user .lic {
  color: var(--ink-300);
  margin-left: auto;
}

.main {
  flex-direction: column;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
  justify-content: center;
  align-items: center;
  height: 62px;
  padding: 0 26px;
  display: flex;
}

.omni {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  cursor: pointer;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 560px;
  height: 42px;
  padding: 0 8px 0 15px;
  transition: background .14s, border-color .14s, box-shadow .14s;
  display: flex;
}

.omni:hover {
  box-shadow: var(--shadow-sm);
  background: #fff;
  border-color: #d4e0e0;
}

.omni .lic {
  color: var(--ink-300);
}

.omni-ph {
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink-500);
  flex: auto;
  font-size: 14px;
}

.omni-kbd {
  gap: 3px;
  display: flex;
}

.omni-kbd kbd {
  font-family: var(--font-body);
  color: var(--ink-500);
  border: 1px solid var(--line);
  text-align: center;
  background: #fff;
  border-radius: 5px;
  min-width: 20px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.tb-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.icon-btn {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: 40px;
  height: 40px;
  color: var(--ink-700);
  cursor: pointer;
  background: #fff;
  place-items: center;
  transition: background .14s, border-color .14s;
  display: grid;
  position: relative;
}

.icon-btn:hover {
  background: var(--bg-soft);
  border-color: #d4e0e0;
}

.icon-btn .dot {
  background: var(--orange-500);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 8px;
  right: 9px;
}

.btn {
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background .14s, transform 80ms;
  display: inline-flex;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--orange-500);
  color: #fff;
}

.btn-primary:hover {
  background: var(--orange-600);
}

.btn-approve {
  color: #fff;
  background: #1e9e69;
}

.btn-approve:hover {
  background: #157f53;
}

.btn-outline-danger {
  color: var(--danger);
  background: #fff;
  border: 1px solid #f0cfc8;
}

.btn-outline-danger:hover {
  background: #fbeae6;
}

.content {
  flex: auto;
  padding: 34px 38px 60px;
  position: relative;
  overflow-y: auto;
}

.content.is-loading > :not(.content-loading) {
  opacity: .55;
  transition: opacity .15s;
}

.content-loading {
  pointer-events: none;
  z-index: 5;
  justify-content: center;
  align-items: flex-start;
  padding-top: 30vh;
  display: flex;
  position: absolute;
  inset: 0;
}

.content-spinner {
  border: 3px solid var(--teal-100, #cdeef0);
  border-top-color: var(--teal-500, #05a1aa);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: .7s linear infinite content-spin;
}

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

.page {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.tbl-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.tbl-search {
  width: 300px;
  max-width: 100%;
  position: relative;
}

.tbl-search .lic {
  color: var(--ink-300);
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
}

.tbl-search input {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  width: 100%;
  height: 40px;
  font-family: var(--font-body);
  color: var(--ink-900);
  outline: none;
  padding: 0 16px 0 40px;
  font-size: 14px;
  transition: border-color .14s, box-shadow .14s;
}

.tbl-search input::placeholder {
  color: var(--ink-300);
}

.tbl-search input:focus {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 3px #3fb0b029;
}

.tbl-toolbar .spacer {
  flex: auto;
}

.chip-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  height: 40px;
  font-family: var(--font-body);
  color: var(--ink-700);
  cursor: pointer;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 600;
  transition: background .14s, border-color .14s;
  display: inline-flex;
}

.chip-btn:hover {
  background: var(--bg-soft);
  border-color: #d4e0e0;
}

.chip-btn .lic {
  color: var(--ink-500);
}

.btn-primary.sm {
  height: 40px;
}

.tbl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.tbl {
  min-width: 880px;
  display: grid;
}

.tbl-head, .tbl-row {
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  display: grid;
}

.tbl-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  height: 46px;
}

.tbl-head .th {
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
  cursor: default;
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.tbl-head .th.num {
  justify-content: flex-end;
}

.tbl-row {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  min-height: 64px;
  transition: background .12s;
}

.tbl-row:last-child {
  border-bottom: none;
}

.tbl-row:hover {
  background: var(--teal-050);
}

.tbl-row .td {
  color: var(--ink-700);
  min-width: 0;
  padding: 12px 18px;
  font-size: 14px;
  overflow: hidden;
}

.tbl-row .td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tbl-row .td.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  font-weight: 600;
}

.tbl-row .td.date {
  color: var(--ink-500);
  white-space: nowrap;
}

.td .truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.cell-stack {
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.cell-stack b {
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.cell-stack span {
  color: var(--ink-500);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  overflow: hidden;
}

.cell-avatar {
  align-items: center;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.cell-avatar .av {
  border-radius: var(--r-pill);
  width: 36px;
  height: 36px;
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: .02em;
  flex: none;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.people-cell {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.people-avs {
  flex: none;
  display: flex;
}

.people-avs .ff-avatar {
  box-shadow: 0 0 0 2px var(--surface);
}

.people-avs .ff-avatar + .ff-avatar {
  margin-left: -10px;
}

.people-names {
  color: var(--ink-700);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  overflow: hidden;
}

.team-badges {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.people-list {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.person-chip {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-900);
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 3px;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
}

.tbl-foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  display: flex;
}

.tbl-foot .count {
  color: var(--ink-500);
  font-size: 13px;
}

.tbl-foot .pager {
  align-items: center;
  gap: 6px;
  display: flex;
}

.pager .pg {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  width: 32px;
  height: 32px;
  font-family: var(--font-body);
  color: var(--ink-700);
  cursor: pointer;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, border-color .12s;
  display: grid;
}

.pager .pg:hover {
  background: var(--bg-soft);
}

.pager .pg.active {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
}

.pager .pg.nav .lic {
  color: var(--ink-500);
}

.tbl-empty {
  text-align: center;
  color: var(--ink-500);
  padding: 56px 20px;
  font-size: 14px;
}

.ph-tag {
  font-family: var(--font-display);
  letter-spacing: .04em;
  color: var(--ink-300);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-top: 22px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.detail {
  flex-direction: column;
  display: flex;
}

.detail-back {
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  color: var(--ink-500);
  cursor: pointer;
  background: none;
  border: none;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px 8px 4px 4px;
  font-size: 14px;
  font-weight: 600;
  transition: color .14s, background .14s;
  display: inline-flex;
}

.detail-back:hover {
  color: var(--teal-600);
  background: var(--teal-050);
}

.detail-back .lic {
  color: inherit;
}

.detail-head {
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 20px;
  display: flex;
}

.dh-id {
  align-items: center;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.dh-av {
  border-radius: var(--r-pill);
  width: 60px;
  height: 60px;
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: .02em;
  flex: none;
  place-items: center;
  font-size: 21px;
  font-weight: 600;
  display: grid;
}

.dh-av.square {
  border-radius: 16px;
}

.dh-av .lic {
  color: #fff;
}

.dh-text {
  min-width: 0;
}

.dh-eyebrow {
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
}

.dh-title-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.dh-title-row h1 {
  font-family: var(--font-display);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-size: 25px;
  font-weight: 600;
}

.dh-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  display: flex;
}

.dh-sub {
  color: var(--ink-500);
  font-size: 15px;
}

.dh-chip {
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 11px;
  font-size: 12.5px;
  font-weight: 600;
}

.dh-actions {
  flex: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  display: flex;
}

.icon-btn.sm {
  width: 40px;
  height: 40px;
}

.dh-contacts {
  gap: 8px;
  margin-top: 13px;
  display: flex;
}

.contact-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  width: 34px;
  height: 34px;
  color: var(--ink-500);
  cursor: default;
  outline: none;
  place-items: center;
  transition: background .14s, color .14s, border-color .14s;
  display: grid;
  position: relative;
}

.contact-chip:hover, .contact-chip:focus-visible {
  background: var(--teal-050);
  color: var(--teal-600);
  border-color: var(--teal-400);
}

.contact-chip .lic {
  line-height: 0;
  display: flex;
}

.contact-pop {
  z-index: 20;
  white-space: nowrap;
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-radius: 9px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  font-size: 13px;
  transition: opacity .14s, transform .14s, visibility .14s;
  display: flex;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: translateY(-4px);
}

.contact-chip:hover .contact-pop, .contact-chip:focus-visible .contact-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.contact-pop .cp-label {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff9;
  font-size: 10.5px;
  font-weight: 600;
}

.contact-pop a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.contact-pop a:hover {
  text-decoration: underline;
}

.detail-tabs {
  border-bottom: 1px solid var(--line);
  gap: 4px;
  margin-bottom: 24px;
  display: flex;
}

.dtab {
  font-family: var(--font-display);
  color: var(--ink-500);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  transition: color .14s, border-color .14s;
  display: inline-flex;
}

.dtab .lic {
  color: var(--ink-300);
  transition: color .14s;
}

.dtab:hover {
  color: var(--ink-900);
}

.dtab:hover .lic {
  color: var(--ink-500);
}

.dtab.active {
  color: var(--teal-700);
  border-bottom-color: var(--teal-500);
}

.dtab.active .lic {
  color: var(--teal-600);
}

.detail-body {
  grid-template-columns: 1fr 340px;
  align-items: start;
  gap: 24px;
  display: grid;
}

.detail-main {
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  display: flex;
}

.detail-aside {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

@media (max-width: 1100px) {
  .detail-body {
    grid-template-columns: 1fr;
  }

  .detail-aside {
    order: -1;
  }
}

.d-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.d-card-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 9px;
  padding: 15px 20px;
  display: flex;
}

.d-card-head .lic {
  color: var(--teal-600);
}

.d-card-head h3 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.field-grid {
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
  margin: 0;
  padding: 8px 20px 18px;
  display: grid;
}

.field {
  border-bottom: 1px solid var(--line);
  min-width: 0;
  padding: 10px 0;
}

.field-grid .field:last-child, .field-grid .field:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

.field dt {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
}

.field dd {
  color: var(--ink-900);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14.5px;
}

.fv-link {
  color: var(--teal-600);
  font-weight: 500;
  text-decoration: none;
}

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

.fv-muted {
  color: var(--ink-500);
}

.fv-strong {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.fv-empty {
  color: var(--ink-300);
}

.timeline {
  margin: 0;
  padding: 14px 20px 16px;
  list-style: none;
}

.tl-item {
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 18px;
  display: flex;
  position: relative;
}

.tl-item:before {
  content: "";
  background: var(--line);
  width: 2px;
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 14px;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item:last-child:before {
  display: none;
}

.tl-dot {
  border-radius: var(--r-pill);
  z-index: 1;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  line-height: 0;
  display: flex;
}

.tl-dot .lic {
  color: #fff;
  line-height: 0;
  display: flex;
}

.tl-dot.teal {
  background: var(--teal-500);
}

.tl-dot.green {
  background: #1e9e69;
}

.tl-dot.orange {
  background: var(--orange-500);
}

.tl-dot.grey {
  background: var(--ink-300);
}

.tl-body {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.tl-body b {
  min-height: 30px;
  color: var(--ink-900);
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.tl-meta {
  color: var(--ink-500);
  margin-top: -1px;
  font-size: 12.5px;
}

.facts {
  margin: 0;
  padding: 6px 20px 14px;
}

.fact {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  display: flex;
}

.fact:last-child {
  border-bottom: none;
}

.fact dt {
  color: var(--ink-500);
  flex: none;
  font-size: 13px;
}

.fact dd {
  color: var(--ink-900);
  text-align: right;
  white-space: nowrap;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.related-list {
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  display: flex;
}

.related-row {
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  transition: background .14s;
  display: flex;
}

.related-row:hover {
  background: var(--bg-soft);
}

.rr-av {
  border-radius: var(--r-pill);
  width: 34px;
  height: 34px;
  font-family: var(--font-display);
  color: #fff;
  flex: none;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  display: grid;
}

.rr-av.square {
  border-radius: 10px;
}

.rr-av .lic {
  color: #fff;
}

.rr-text {
  flex-direction: column;
  flex: auto;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.rr-text b {
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.rr-text span {
  color: var(--ink-500);
  font-size: 12px;
}

.related-row > .lic {
  color: var(--ink-300);
  flex: none;
}

.d-empty {
  text-align: center;
  padding: 48px 24px;
}

.d-empty-ico {
  background: var(--teal-050);
  width: 56px;
  height: 56px;
  color: var(--teal-600);
  border-radius: 16px;
  place-items: center;
  margin: 0 auto 16px;
  display: grid;
}

.d-empty b {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 600;
  display: block;
}

.d-empty p {
  max-width: 320px;
  color: var(--ink-500);
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.55;
}

.graph-card .d-card-head {
  position: relative;
}

.graph-hint {
  font-family: var(--font-body);
  color: var(--ink-300);
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
}

.graph-hint .lic {
  color: var(--ink-300);
}

.graph {
  background-color: var(--bg-soft);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background-image: radial-gradient(#143a3b1a 1.3px, #0000 1.3px);
  background-position: -11px -11px;
  background-size: 22px 22px;
  width: 100%;
  height: 520px;
  position: relative;
  overflow: hidden;
}

.graph-edges {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.edge {
  stroke: #c7d7d7;
  stroke-width: 2px;
  transition: stroke .14s, stroke-width .14s;
}

.edge.on {
  stroke: var(--teal-500);
  stroke-width: 3px;
}

.edge-label {
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-body);
  border-radius: var(--r-pill);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--shadow-sm);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  transform: translate(-50%, -50%);
}

.gnode {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  max-width: 200px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  align-items: center;
  gap: 10px;
  padding: 8px 13px 8px 8px;
  transition: border-color .14s, box-shadow .14s, transform 60ms;
  display: flex;
  position: absolute;
  transform: translate(-50%, -50%);
}

.gnode:active {
  cursor: grabbing;
}

.gnode.on {
  border-color: var(--teal-400);
  box-shadow: var(--shadow-md);
  z-index: 4;
}

.gnode.center {
  border: 2px solid var(--teal-500);
  cursor: default;
  z-index: 3;
  padding: 9px 16px 9px 9px;
  box-shadow: 0 8px 24px #05a1aa2e;
}

.gn-text {
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
  display: flex;
}

.gn-text b {
  font-family: var(--font-display);
  color: var(--ink-900);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 130px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.gnode.center .gn-text b {
  max-width: 160px;
  font-size: 15px;
}

.gn-text span {
  color: var(--ink-500);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 140px;
  font-size: 12px;
  overflow: hidden;
}

.graph-legend {
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 13px 20px;
  display: flex;
}

.lg-item {
  color: var(--ink-500);
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
}

.lg-dot {
  border-radius: 50%;
  flex: none;
  width: 11px;
  height: 11px;
}

.lg-dot.org {
  background: var(--teal-500);
  border-radius: 3px;
}

.lg-dot.person {
  background: var(--teal-500);
}

.lg-dot.aanvraag {
  background: var(--orange-500);
  border-radius: 3px;
}

.lg-dot.medewerker {
  background: #51607a;
}

.detail-relations {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.rel-overview {
  flex-direction: column;
  display: flex;
}

.rel-overview .tbl {
  min-width: 0;
}

.subtable-title {
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  display: flex;
}

.subtable-title h3 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.subtable-title .lic {
  color: var(--teal-600);
}

.listview {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.view-switch {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  align-self: flex-end;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.seg-btn {
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  color: var(--ink-500);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .14s, color .14s;
  display: inline-flex;
}

.seg-btn .lic {
  color: var(--ink-300);
}

.seg-btn:hover {
  color: var(--ink-900);
}

.seg-btn.on {
  background: var(--teal-500);
  color: #fff;
}

.seg-btn.on .lic {
  color: #fff;
}

.pipeline {
  flex-direction: column;
  gap: 26px;
  display: flex;
}

.stages {
  align-items: stretch;
  gap: 4px;
  padding: 2px 2px 8px;
  display: flex;
  overflow-x: auto;
}

.stages::-webkit-scrollbar {
  height: 8px;
}

.stages::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 8px;
}

.stages::-webkit-scrollbar-track {
  background: none;
}

.stage {
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  min-width: 150px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  flex-direction: column;
  flex: 150px;
  gap: 11px;
  padding: 14px 16px 13px;
  transition: border-color .14s, box-shadow .14s, transform 80ms;
  display: flex;
  position: relative;
}

.stage:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stage.on {
  border-color: var(--stage);
  box-shadow: var(--shadow-sm);
}

.stage-top {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.stage-dot {
  background: var(--stage);
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
}

.stage-name {
  font-family: var(--font-display);
  color: var(--ink-700);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}

.stage.on .stage-name {
  color: var(--ink-900);
}

.stage-count {
  font-family: var(--font-display);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
}

.stage-track {
  background: var(--bg-soft);
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
}

.stage-fill {
  background: var(--stage);
  border-radius: 3px;
  height: 100%;
  transition: width .28s;
  display: block;
}

.stage-share {
  color: var(--ink-500);
  font-size: 11.5px;
}

.stage-arrow {
  color: var(--ink-300);
  flex: none;
  align-items: center;
  display: flex;
}

.pipeline-table .subtable-title {
  margin-bottom: 0;
}

.pt-dot {
  border-radius: 50%;
  flex: none;
  width: 11px;
  height: 11px;
}

.pipeline-table {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

@media (max-width: 860px) {
  .stage {
    min-width: 150px;
  }
}

.head-count {
  font-family: var(--font-body);
  color: var(--ink-500);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-align: center;
  min-width: 22px;
  margin-left: auto;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
}

.rel-list {
  padding: 8px 12px 12px;
}

.rel-group + .rel-group {
  margin-top: 6px;
}

.rel-group-head {
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-300);
  align-items: center;
  gap: 8px;
  padding: 12px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.rel-group-head span {
  font-family: var(--font-body);
  letter-spacing: 0;
  color: var(--ink-500);
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
}

.rel-row {
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  transition: background .14s;
  display: flex;
}

.rel-row:hover {
  background: var(--bg-soft);
}

.rel-row .rr-text {
  flex: auto;
}

.rel-kind {
  font-family: var(--font-body);
  border-radius: var(--r-pill);
  flex: none;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.rel-kind.org, .rel-kind.person {
  color: var(--teal-700);
  background: var(--teal-050);
}

.rel-kind.aanvraag {
  color: #c26f23;
  background: var(--orange-050);
}

.rel-kind.medewerker {
  color: #3f4c5f;
  background: #ebeef2;
}

.rel-row > .lic {
  color: var(--ink-300);
  flex: none;
}

.drawer-scrim {
  z-index: 60;
  background: #0f242657;
  justify-content: flex-end;
  animation: .16s scrim-in;
  display: flex;
  position: fixed;
  inset: 0;
}

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

  to {
    opacity: 1;
  }
}

.drawer {
  background: var(--bg-soft);
  flex-direction: column;
  width: 460px;
  max-width: 94vw;
  height: 100%;
  animation: .22s cubic-bezier(.22, 1, .36, 1) drawer-in;
  display: flex;
  box-shadow: -16px 0 44px #0f242633;
}

@keyframes drawer-in {
  from {
    opacity: .4;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.drawer-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
  padding: 22px 24px 20px;
  position: relative;
}

.drawer-tools {
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin: -6px -6px 6px 0;
  display: flex;
}

.drawer-menu-wrap {
  position: relative;
}

.drawer-id {
  align-items: center;
  gap: 14px;
  margin-top: 2px;
  display: flex;
}

.drawer-id-text {
  min-width: 0;
}

.drawer-title-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.drawer-title-row h2 {
  font-family: var(--font-display);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-size: 21px;
  font-weight: 600;
}

.drawer-sub {
  color: var(--ink-500);
  font-size: 14px;
}

.drawer-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.drawer-mail {
  flex: 1 1 0;
  justify-content: center;
  text-decoration: none;
}

.drawer-body > .rel-overview {
  flex: none;
}

.drawer .tbl {
  min-width: 0;
}

.edit-input {
  box-sizing: border-box;
  width: calc(100% + 18px);
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--bg-soft);
  border: 1px solid #0000;
  border-radius: 7px;
  margin: -5px -9px;
  padding: 5px 9px;
  font-size: 14.5px;
  line-height: 1.5;
  transition: background .14s, border-color .14s, box-shadow .14s;
  display: block;
}

.edit-input:hover {
  border-color: var(--line);
}

.edit-input:focus {
  background: var(--surface);
  border-color: var(--teal-400);
  box-shadow: 0 0 0 3px var(--teal-050);
  outline: none;
}

select.edit-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  width: calc(100% + 18px);
  padding-right: 30px;
}

.edit-title {
  width: auto;
  min-width: 0;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  flex: auto;
  margin: -4px -8px;
  padding: 4px 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.drawer .field dd {
  align-items: center;
  min-height: 27px;
  display: flex;
}

.token-edit {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.badge.token {
  align-items: center;
  gap: 5px;
  padding-right: 5px;
  display: inline-flex;
}

.token-x {
  width: 16px;
  height: 16px;
  color: inherit;
  cursor: pointer;
  opacity: .7;
  background: #00000014;
  border: none;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  transition: opacity .12s, background .12s;
  display: grid;
}

.token-x:hover {
  opacity: 1;
  background: #00000029;
}

.token-add-wrap {
  display: inline-flex;
  position: relative;
}

.token-add {
  font-family: var(--font-body);
  color: var(--ink-500);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  align-items: center;
  gap: 4px;
  padding: 4px 11px 4px 9px;
  font-size: 12.5px;
  font-weight: 600;
  transition: color .12s, border-color .12s, background .12s;
  display: inline-flex;
}

.token-add:hover {
  color: var(--teal-600);
  border-color: var(--teal-400);
  background: var(--teal-050);
}

.token-menu {
  z-index: 41;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
}

.token-menu.up {
  top: auto;
  bottom: calc(100% + 6px);
}

.token-menu-item {
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink-700);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-size: 13.5px;
  transition: background .12s;
  display: flex;
}

.token-menu-item:hover {
  background: var(--bg-soft);
}

.badge-dot {
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
}

.badge-dot.teal {
  background: var(--teal-500);
}

.badge-dot.orange {
  background: var(--orange-500);
}

.badge-dot.green {
  background: #1e9e69;
}

.badge-dot.grey {
  background: var(--ink-300);
}

.edit-chips {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.edit-chip {
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  transition: background .14s, border-color .14s, color .14s;
  display: inline-flex;
}

.edit-chip:hover {
  border-color: var(--teal-400);
  color: var(--ink-900);
}

.edit-chip.on {
  border-color: #0000;
  font-weight: 600;
}

.edit-chip.on.teal {
  background: var(--teal-050);
  color: var(--teal-700);
}

.edit-chip.on.orange {
  background: var(--orange-050);
  color: #c26f23;
}

.edit-chip.on.green {
  color: #157f53;
  background: #e4f4ec;
}

.edit-chip.on.grey {
  background: var(--bg-soft);
  color: var(--ink-700);
}

.menu-backdrop {
  z-index: 40;
  position: fixed;
  inset: 0;
}

.row-menu {
  z-index: 41;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  min-width: 180px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
}

.row-menu-item {
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink-700);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  font-size: 14px;
  transition: background .12s, color .12s;
  display: flex;
}

.row-menu-item:hover {
  background: var(--bg-soft);
}

.row-menu-item.danger {
  color: var(--danger);
}

.row-menu-item.danger:hover {
  background: #fbeae6;
}

.confirm-scrim {
  z-index: 60;
  background: #1428246b;
  place-items: center;
  animation: .14s fade-in;
  display: grid;
  position: fixed;
  inset: 0;
}

.confirm-box {
  background: var(--surface);
  border-radius: var(--r-xl);
  width: min(420px, 100vw - 48px);
  box-shadow: var(--shadow-lg);
  text-align: center;
  padding: 28px 28px 22px;
  animation: .16s cubic-bezier(.2, .9, .3, 1.2) pop-in;
}

.confirm-box h3 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 14px 0 8px;
  font-size: 19px;
  font-weight: 600;
}

.confirm-box p {
  color: var(--ink-500);
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.55;
}

.confirm-actions {
  justify-content: center;
  gap: 10px;
  display: flex;
}

.confirm-actions .btn {
  flex: 1 1 0;
  justify-content: center;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

  to {
    opacity: 1;
  }
}

.btn-ghost {
  background: var(--surface);
  color: var(--ink-700);
  border: 1px solid var(--line);
}

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

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

.btn-danger:hover {
  filter: brightness(.93);
}

.drawer-body {
  flex-direction: column;
  flex: auto;
  gap: 16px;
  padding: 18px 20px 24px;
  display: flex;
  overflow-y: auto;
}

.drawer-body > .d-card {
  flex: none;
}

.drawer-body > .d-card:has(.token-menu) {
  z-index: 5;
  position: relative;
  overflow: visible;
}

.drawer-foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  flex: none;
  gap: 12px;
  padding: 16px 20px;
  display: flex;
}

.drawer-foot .btn {
  flex: 1 1 0;
  justify-content: center;
}

.drawer-done {
  font-family: var(--font-body);
  color: var(--ink-700);
  flex: auto;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: flex;
}

.drawer-done b {
  font-weight: 700;
}

.drawer-done .lic {
  color: var(--teal-600);
}

.drawer .field-grid {
  grid-template-columns: 1fr;
  column-gap: 0;
  padding: 6px 20px 22px;
}

.drawer .field-grid .field {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.drawer .field-grid .field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.drawer .d-card-head {
  padding: 14px 20px;
}

.drawer .timeline {
  padding: 14px 20px 22px;
}

.drawer .timeline .tl-item:last-child {
  padding-bottom: 0;
}

.orgchart {
  flex-direction: column;
  align-items: center;
  padding: 30px 24px 26px;
  display: flex;
}

.oc-row {
  justify-content: center;
  display: flex;
}

.oc-conn {
  background: var(--line);
  width: 2px;
  height: 26px;
}

.oc-node {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  align-items: center;
  gap: 12px;
  min-width: 220px;
  max-width: 280px;
  padding: 11px 16px 11px 11px;
  display: flex;
}

.oc-node.borrower {
  border-color: var(--teal-400);
  box-shadow: 0 6px 18px #05a1aa24;
}

.oc-node.ph {
  opacity: .85;
  border-style: dashed;
}

.oc-text {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.oc-text b {
  font-family: var(--font-display);
  color: var(--ink-900);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
}

.oc-text > span {
  color: var(--ink-500);
  font-size: 12.5px;
}

.oc-tags {
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  display: flex;
}

.oc-tag {
  color: var(--teal-700);
  background: var(--teal-050);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.oc-principals {
  gap: 24px;
  width: 100%;
  max-width: 760px;
  padding-top: 26px;
  display: grid;
  position: relative;
}

.oc-hbar {
  top: 0;
  left: var(--inset);
  right: var(--inset);
  background: var(--line);
  height: 2px;
  position: absolute;
}

.oc-child {
  justify-content: center;
  display: flex;
  position: relative;
}

.oc-stub {
  background: var(--line);
  width: 2px;
  height: 26px;
  position: absolute;
  top: -26px;
  left: 50%;
}

.oc-note {
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-size: 12.5px;
  display: flex;
}

.oc-note .lic {
  color: var(--ink-300);
  flex: none;
}

@media (max-width: 720px) {
  .oc-principals {
    grid-template-columns: 1fr !important;
  }

  .oc-hbar, .oc-stub {
    display: none;
  }

  .oc-child {
    margin-top: 12px;
  }
}

.cmdk-scrim {
  z-index: 80;
  background: #0f242657;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  animation: .14s scrim-in;
  display: flex;
  position: fixed;
  inset: 0;
}

.cmdk {
  background: var(--surface);
  border-radius: 16px;
  flex-direction: column;
  width: 600px;
  max-width: 94vw;
  max-height: 72vh;
  animation: .17s cubic-bezier(.22, 1, .36, 1) cmdk-in;
  display: flex;
  overflow: hidden;
  box-shadow: 0 28px 64px #0f24264d;
}

@keyframes cmdk-in {
  from {
    opacity: .5;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.cmdk-input {
  border-bottom: 1px solid var(--line);
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 20px;
  display: flex;
}

.cmdk-input .lic {
  color: var(--ink-300);
}

.cmdk-input input {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: none;
  border: none;
  outline: none;
  flex: auto;
  font-size: 16px;
}

.cmdk-input input::placeholder {
  color: var(--ink-300);
}

.cmdk-esc {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-family: var(--font-body);
  color: var(--ink-500);
  cursor: pointer;
  border-radius: 6px;
  flex: none;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
}

.cmdk-results {
  flex: auto;
  padding: 8px;
  overflow-y: auto;
}

.cmdk-group + .cmdk-group {
  margin-top: 4px;
}

.cmdk-glabel {
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-300);
  padding: 9px 10px 5px;
  font-size: 11px;
  font-weight: 600;
}

.cmdk-item {
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  display: flex;
}

.cmdk-item.on {
  background: var(--teal-050);
}

.cmdk-ico {
  background: var(--bg-soft);
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.cmdk-item.on .cmdk-ico {
  background: #fff;
}

.cmdk-ico .lic {
  color: var(--teal-600);
}

.cmdk-text {
  flex-direction: column;
  flex: auto;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.cmdk-text b {
  color: var(--ink-900);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.cmdk-text span {
  color: var(--ink-500);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  overflow: hidden;
}

.cmdk-meta {
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 12px;
}

.cmdk-empty {
  text-align: center;
  color: var(--ink-500);
  padding: 40px 20px;
  font-size: 14px;
}

.cmdk-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  flex: none;
  gap: 18px;
  padding: 10px 18px;
  display: flex;
}

.cmdk-foot span {
  color: var(--ink-500);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.cmdk-foot kbd {
  font-family: var(--font-body);
  color: var(--ink-500);
  border: 1px solid var(--line);
  text-align: center;
  background: #fff;
  border-radius: 4px;
  min-width: 16px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
}

.card-pair {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 18px;
  display: grid;
}

@media (max-width: 900px) {
  .card-pair {
    grid-template-columns: 1fr;
  }
}

.field-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.field-grid.cols-3 .field:nth-last-child(2):nth-child(odd) {
  border-bottom: 1px solid var(--line);
}

.field-grid.cols-3 .field:nth-last-child(-n+3):nth-child(3n+1), .field-grid.cols-3 .field:nth-last-child(-n+2):nth-child(3n+2), .field-grid.cols-3 .field:last-child {
  border-bottom: none;
}

@media (max-width: 900px) {
  .field-grid.cols-3 {
    grid-template-columns: 1fr 1fr;
  }
}

.obj-body {
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 18px 20px;
  display: grid;
}

.obj-photo {
  background: linear-gradient(150deg, var(--teal-500), var(--teal-700));
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  min-height: 168px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.obj-photo:after {
  content: "";
  background-image: radial-gradient(#ffffff21 1.2px, #0000 1.2px);
  background-size: 18px 18px;
  position: absolute;
  inset: 0;
}

.obj-photo-ico {
  z-index: 1;
  color: #fff;
  background: #ffffff29;
  border-radius: 16px;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
  position: relative;
}

.obj-photo-ico .lic {
  color: #fff;
  line-height: 0;
  display: flex;
}

.energy-chip {
  color: #fff;
  border-radius: 6px;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
  display: inline-grid;
}

.energy-chip.green {
  background: #1e9e69;
}

.energy-chip.teal {
  background: var(--teal-500);
}

.energy-chip.orange {
  background: var(--orange-500);
}

.energy-chip.red {
  background: var(--danger);
}

.energy-chip.grey {
  background: var(--ink-300);
}

.obj-specs {
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 2px 24px;
  margin: 0;
  display: grid;
}

.osp {
  border-bottom: 1px solid var(--line);
  min-width: 0;
  padding: 9px 0;
}

.osp:last-child, .osp:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

.osp dt {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
}

.osp dd {
  color: var(--ink-900);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14.5px;
}

@media (max-width: 720px) {
  .obj-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .obj-specs {
    grid-template-columns: 1fr;
  }
}

.ltv-block {
  border-top: 1px solid var(--line);
  padding: 16px 20px 20px;
}

.ltv-block.no-line {
  border-top: none;
  padding-top: 6px;
  padding-bottom: 4px;
}

.ltv-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.ltv-head span {
  color: var(--ink-500);
  font-size: 13px;
}

.ltv-head b {
  font-family: var(--font-display);
  color: var(--teal-700);
  font-size: 16px;
  font-weight: 700;
}

.ltv-bar {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  height: 14px;
  position: relative;
  overflow: hidden;
}

.ltv-fill {
  background: linear-gradient(90deg, var(--teal-500), var(--teal-600));
  border-radius: 7px 0 0 7px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.ltv-legend {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 13px;
  display: flex;
}

.ll-item {
  color: var(--ink-700);
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  display: inline-flex;
}

.ll-dot {
  border-radius: 3px;
  flex: none;
  width: 11px;
  height: 11px;
}

.ll-dot.teal {
  background: var(--teal-500);
}

.ll-dot.soft {
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.ll-total {
  color: var(--ink-900);
  white-space: nowrap;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
}

.field .person-chip {
  white-space: nowrap;
}

.fund-chip {
  color: var(--teal-700);
  background: var(--teal-050);
  border-radius: var(--r-pill);
  white-space: nowrap;
  margin-left: auto;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
}

.card-note {
  color: var(--ink-500);
  margin: 0;
  padding: 16px 20px 20px;
  font-size: 13.5px;
}

.d-card > .related-list {
  border-bottom: 1px solid var(--line);
}

.structure-wrap {
  flex-direction: column;
  gap: 26px;
  display: flex;
}

.tree-elbow {
  border-left: 1.5px solid var(--line-strong, #c7d6d6);
  border-bottom: 1.5px solid var(--line-strong, #c7d6d6);
  border-bottom-left-radius: 7px;
  flex: none;
  width: 14px;
  height: 22px;
  margin-top: -14px;
}

.acties {
  flex-direction: column;
  margin: 0;
  padding: 8px 20px 16px;
  list-style: none;
  display: flex;
}

.actie {
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  display: flex;
}

.actie:last-child {
  border-bottom: none;
}

.act-check {
  border: 1.5px solid var(--line-strong, var(--line));
  background: var(--surface);
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 0;
  transition: background .14s, border-color .14s;
  display: grid;
}

.act-check:hover {
  border-color: var(--teal-500);
}

.actie.is-done .act-check {
  background: var(--teal-500);
  border-color: var(--teal-500);
}

.act-check .lic {
  color: inherit;
  line-height: 0;
  display: flex;
}

.act-text {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.act-text b {
  color: var(--ink-900);
  font-size: 13.5px;
  font-weight: 600;
}

.act-meta {
  color: var(--ink-500);
  font-size: 12px;
}

.actie.is-done .act-text b {
  color: var(--ink-300);
  text-decoration: line-through;
  -webkit-text-decoration-color: var(--ink-300);
  text-decoration-color: var(--ink-300);
}

.actie.is-done .act-meta {
  color: var(--ink-300);
}

.vorm-note {
  color: var(--ink-500);
  margin: 0;
  padding: 14px 20px 2px;
  font-size: 13.5px;
}

.vorm-kiezer {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 20px 20px;
  display: grid;
}

.vorm-opt {
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 16px;
  transition: border-color .14s, box-shadow .14s;
  display: flex;
}

.vorm-opt:hover {
  border-color: var(--teal-500);
  box-shadow: 0 6px 18px #143a3b14;
}

.vorm-opt b {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-size: 14.5px;
  font-weight: 600;
}

.vorm-opt > span:last-child {
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.45;
}

.vorm-opt .vo-ico {
  background: var(--teal-050);
  border-radius: 11px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.vorm-opt .vo-ico .lic {
  color: var(--teal-600);
}

@media (max-width: 860px) {
  .vorm-kiezer {
    grid-template-columns: 1fr;
  }
}

.vorm-switch {
  align-self: center;
  margin-left: auto;
}

.view-switch.sm .seg-btn {
  gap: 6px;
  padding: 5px 12px;
  font-size: 12.5px;
}

.ltv-fill.lite {
  background: var(--teal-400);
  opacity: .45;
}

.ll-dot.lite {
  background: var(--teal-400);
  opacity: .55;
}

.subtable-title .st-action {
  margin-left: auto;
}

.invest-card-foot {
  padding: 0 20px 20px;
}

.detail .field dd {
  align-items: center;
  min-height: 27px;
  display: flex;
}

.detail .field dd > * {
  min-width: 0;
}

.detail .osp dd {
  align-items: center;
  min-height: 27px;
  display: flex;
}

.kpi-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: grid;
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px 17px;
  display: flex;
}

.kpi-label {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-300);
  font-size: 12px;
  font-weight: 600;
}

.kpi-value {
  font-family: var(--font-display);
  color: var(--ink-900);
  white-space: nowrap;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.kpi-value.green {
  color: var(--success);
}

.kpi-value.orange {
  color: var(--orange-600);
}

.kpi-value.red {
  color: var(--danger);
}

.kpi-sub {
  color: var(--ink-500);
  font-size: 12.5px;
}

.kpi-bar {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  height: 8px;
  margin-top: 8px;
  display: block;
  overflow: hidden;
}

.kpi-bar i {
  background: linear-gradient(90deg, var(--teal-500), var(--teal-600));
  border-radius: 4px 0 0 4px;
  height: 100%;
  display: block;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

.kpi-grid.sub .kpi {
  gap: 3px;
  padding: 13px 16px 14px;
}

.kpi-grid.sub .kpi-value {
  font-size: 21px;
}

.energy-chip.xl {
  border-radius: 8px;
  min-width: 32px;
  height: 27px;
  font-size: 15px;
}

.calc {
  outline: none;
  align-items: baseline;
  gap: 4px;
  display: inline-flex;
  position: relative;
}

.calc-val {
  border-bottom: 1px dashed var(--teal-400);
  cursor: help;
}

.calc-pop {
  z-index: 1000;
  white-space: nowrap;
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  text-align: left;
  border-radius: 10px;
  flex-direction: column;
  gap: 9px;
  padding: 11px 15px 13px;
  font-size: 14px;
  font-weight: 400;
  animation: .14s calc-in;
  display: flex;
  position: fixed;
}

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

@media (prefers-reduced-motion: reduce) {
  .calc-pop {
    animation: none;
  }
}

.calc-pop .cp-name {
  font-family: var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff9;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
}

.calc-pop .cp-name .lic {
  color: var(--teal-400);
}

.calc-pop .cp-block {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.calc-pop .cp-block.filled {
  border-top: 1px solid #ffffff29;
  padding-top: 9px;
}

.calc-pop .cp-sec {
  font-family: var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff6b;
  font-size: 9.5px;
  font-weight: 600;
}

.f-line {
  align-items: center;
  gap: 8px;
  font-family: STIX Two Math, Cambria Math, Georgia, Times New Roman, serif;
  font-size: 14.5px;
  line-height: 1.3;
  display: inline-flex;
}

.f-var {
  font-style: italic;
}

.frac {
  text-align: center;
  flex-direction: column;
  align-items: stretch;
  line-height: 1.25;
  display: inline-flex;
}

.fr-num {
  border-bottom: 1px solid #ffffffd9;
  padding: 0 7px 2px;
}

.fr-den {
  padding: 2px 7px 0;
}

.chip-btn.primary {
  background: var(--orange-500);
  border-color: var(--orange-500);
  color: #fff;
}

.chip-btn.primary:hover {
  background: var(--orange-600);
  border-color: var(--orange-600);
}

.chip-btn.primary .lic {
  color: #fff;
}

:root {
  --ff-rail: 340px;
  --ff-grid-gap: 24px;
  --ff-col-gap: var(--ff-grid-gap);
}

.ff-record {
  gap: var(--ff-grid-gap);
  grid-template-columns: 1fr;
  align-items: start;
  display: grid;
}

.ff-record.has-rail {
  grid-template-columns: minmax(0, 1fr) var(--ff-rail);
}

.ff-record.has-rail.rail-left {
  grid-template-columns: var(--ff-rail) minmax(0, 1fr);
}

.ff-record.has-rail.rail-flex {
  grid-template-columns: 2fr 1fr;
}

.ff-record.has-rail.rail-flex.rail-left {
  grid-template-columns: 1fr 2fr;
}

.ff-record-content {
  gap: var(--ff-grid-gap);
  grid-template-columns: 1fr;
  align-items: start;
  min-width: 0;
  display: grid;
}

.ff-record-content.ff-cols-2 {
  grid-template-columns: 1fr 1fr;
}

.ff-record-content.ff-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ff-record-rail {
  gap: var(--ff-grid-gap);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

@media (max-width: 1100px) {
  .ff-record.has-rail, .ff-record.has-rail.rail-left, .ff-record.has-rail.rail-flex, .ff-record.has-rail.rail-flex.rail-left {
    grid-template-columns: 1fr;
  }

  .ff-record-rail {
    order: -1;
  }

  .ff-record.rail-stack-below .ff-record-rail {
    order: 1;
  }
}

@media (max-width: 860px) {
  .ff-record-content.ff-cols-2, .ff-record-content.ff-cols-3 {
    grid-template-columns: 1fr;
  }
}

.ff-infotip {
  display: inline-flex;
  position: relative;
}

.ff-infotip-btn {
  color: var(--ink-300);
  cursor: help;
  background: none;
  border: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: color .14s;
  display: inline-flex;
}

.ff-infotip-btn:hover, .ff-infotip-btn:focus-visible {
  color: var(--teal-600);
  outline: none;
}

.ff-infotip-bubble {
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  background: var(--ink-900);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 30;
  border-radius: 9px;
  width: max-content;
  max-width: 240px;
  padding: 8px 11px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  transition: opacity .14s, transform .14s, visibility .14s;
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%)translateY(4px);
  box-shadow: 0 6px 18px #143a3b38;
}

.ff-infotip-bubble:after {
  content: "";
  border: 5px solid #0000;
  border-top-color: var(--ink-900);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.ff-infotip:hover .ff-infotip-bubble, .ff-infotip-btn:focus-visible + .ff-infotip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%)translateY(0);
}

.name-flag {
  white-space: nowrap;
  color: #c26f23;
  background: var(--orange-050);
  border-radius: var(--r-pill);
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
}

.name-reset {
  height: 30px;
  font-family: var(--font-body);
  color: var(--teal-700);
  background: var(--teal-050);
  border: 1px solid var(--teal-400);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  transition: background .14s;
  display: inline-flex;
}

.name-reset:hover {
  background: var(--teal-100, #d6efef);
}

.ff-pop {
  z-index: 41;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  border-radius: 12px;
  max-height: 280px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  overflow: hidden auto;
}

.ff-pop-item {
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink-700);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  font-size: 14px;
  transition: background .12s, color .12s;
  display: flex;
}

.ff-pop-item + .ff-pop-item {
  margin-top: 1px;
}

.ff-pop-item:hover {
  background: var(--bg-soft);
}

.ff-pop-item .ff-pop-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.ff-pop-item .lic {
  color: var(--teal-600);
  flex: none;
}

.ff-pop-item.on {
  color: var(--teal-700);
  font-weight: 600;
}

.ff-pop-multi {
  min-width: 190px;
  left: 0;
  right: auto;
}

.ff-date {
  cursor: pointer;
  line-height: 40px;
  display: block;
}

.ff-date.ff-empty {
  color: var(--ink-300);
}

.ff-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
}

.ff-date::-webkit-calendar-picker-indicator:hover {
  opacity: .85;
}

.ff-multi-box {
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 5px 8px;
  transition: border-color .14s, box-shadow .14s;
  display: flex;
}

.ff-multi-box:focus-within {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 3px var(--teal-050);
}

.ff-multi-box.invalid {
  border-color: var(--danger);
}

.ff-multi-box.disabled {
  background: var(--bg-soft);
  opacity: .8;
}

.ff-chip {
  color: var(--ink-900);
  background: var(--teal-050);
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 9px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  display: inline-flex;
}

.ff-chip-x {
  color: var(--teal-700);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 1px;
  display: flex;
}

.ff-chip-x:hover {
  background: var(--teal-200, #cfe6e6);
}

.ff-multi-add-wrap {
  display: inline-flex;
  position: relative;
}

.ff-multi-add-mini {
  color: var(--teal-700);
  border: 1px dashed var(--teal-200, #cfe6e6);
  cursor: pointer;
  font-family: var(--font-body);
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 6px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .12s, border-color .12s;
  display: inline-flex;
}

.ff-multi-add-mini:hover {
  background: var(--teal-050);
  border-color: var(--teal-400);
}

.ff-multi-add-mini .lic {
  color: var(--teal-700);
}

.ff-file {
  text-align: center;
  cursor: pointer;
  background: var(--bg-soft);
  border: 1.5px dashed var(--line);
  color: var(--ink-500);
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 26px 20px;
  transition: border-color .14s, background .14s, color .14s;
  display: flex;
}

.ff-file:hover, .ff-file:focus-visible {
  border-color: var(--teal-400);
  color: var(--teal-700);
  outline: none;
}

.ff-file.over {
  border-color: var(--teal-500);
  background: var(--teal-050);
  color: var(--teal-700);
}

.ff-file-ico {
  color: var(--teal-500);
  display: flex;
}

.ff-file-hint {
  font-size: 13.5px;
}

.ff-file.disabled {
  opacity: .6;
  cursor: not-allowed;
}

.pager {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.pager .pg:disabled {
  opacity: .4;
  cursor: default;
}

.pager .pg:disabled:hover {
  background: #fff;
}

.pager .pg-gap {
  min-width: 20px;
  height: 32px;
  color: var(--ink-300);
  -webkit-user-select: none;
  user-select: none;
  place-items: center;
  font-size: 14px;
  display: grid;
}

.ff-tip {
  display: inline-flex;
  position: relative;
}

.ff-tip-bubble {
  z-index: 60;
  background: var(--ink-900);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  border-radius: 9px;
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity .13s, transform .13s;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%)translateY(3px);
  box-shadow: 0 6px 18px #143a3b38;
}

.ff-tip-bubble:after {
  content: "";
  border: 5px solid #0000;
  border-top-color: var(--ink-900);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.ff-tip:hover .ff-tip-bubble, .ff-tip:focus-within .ff-tip-bubble {
  opacity: 1;
  transform: translateX(-50%)translateY(0);
}

.ff-tip[data-side="bottom"] .ff-tip-bubble {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateX(-50%)translateY(-3px);
}

.ff-tip[data-side="bottom"]:hover .ff-tip-bubble, .ff-tip[data-side="bottom"]:focus-within .ff-tip-bubble {
  transform: translateX(-50%)translateY(0);
}

.ff-tip[data-side="bottom"] .ff-tip-bubble:after {
  border-top-color: #0000;
  border-bottom-color: var(--ink-900);
  top: auto;
  bottom: 100%;
}

.ff-tip[data-side="left"] .ff-tip-bubble {
  bottom: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(50%)translateX(3px);
}

.ff-tip[data-side="left"]:hover .ff-tip-bubble, .ff-tip[data-side="left"]:focus-within .ff-tip-bubble {
  transform: translateY(50%)translateX(0);
}

.ff-tip[data-side="left"] .ff-tip-bubble:after {
  border-top-color: #0000;
  border-left-color: var(--ink-900);
  top: 50%;
  bottom: auto;
  left: 100%;
  transform: translateY(-50%);
}

.ff-tip[data-side="right"] .ff-tip-bubble {
  bottom: 50%;
  left: calc(100% + 8px);
  right: auto;
  transform: translateY(50%)translateX(-3px);
}

.ff-tip[data-side="right"]:hover .ff-tip-bubble, .ff-tip[data-side="right"]:focus-within .ff-tip-bubble {
  transform: translateY(50%)translateX(0);
}

.ff-tip[data-side="right"] .ff-tip-bubble:after {
  border-top-color: #0000;
  border-right-color: var(--ink-900);
  inset: 50% 100% auto auto;
  transform: translateY(-50%);
}

.ff-toasts {
  z-index: 200;
  pointer-events: none;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, 100vw - 32px);
  display: flex;
  position: fixed;
}

.ff-toasts.bottom-right {
  align-items: flex-end;
  bottom: 20px;
  right: 20px;
}

.ff-toasts.bottom-left {
  align-items: flex-start;
  bottom: 20px;
  left: 20px;
}

.ff-toasts.top-right {
  align-items: flex-end;
  top: 20px;
  right: 20px;
}

.ff-toasts.top-left {
  align-items: flex-start;
  top: 20px;
  left: 20px;
}

.ff-toast {
  pointer-events: auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 13px 13px 13px 14px;
  animation: .2s both ff-toast-in;
  display: flex;
  box-shadow: 0 10px 30px #143a3b29;
}

@keyframes ff-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px)scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ff-toast {
    animation: none;
  }
}

.ff-toast-ico {
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.ff-toast-ico .lic {
  line-height: 0;
  display: flex;
}

.ff-toast.teal .ff-toast-ico {
  background: var(--teal-050);
  color: var(--teal-600);
}

.ff-toast.green .ff-toast-ico {
  color: #157f53;
  background: #e4f4ec;
}

.ff-toast.orange .ff-toast-ico {
  background: var(--orange-050);
  color: var(--orange-600);
}

.ff-toast.red .ff-toast-ico {
  background: var(--danger-050, #fdecea);
  color: var(--danger, #d4351c);
}

.ff-toast-body {
  flex-direction: column;
  flex: auto;
  gap: 1px;
  min-width: 0;
  padding-top: 4px;
  display: flex;
}

.ff-toast-body b {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 600;
}

.ff-toast-body span {
  color: var(--ink-700);
  font-size: 13.5px;
  line-height: 1.45;
}

.ff-toast-action {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  height: 30px;
  color: var(--teal-700);
  cursor: pointer;
  border-radius: 999px;
  flex: none;
  align-self: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background .13s, border-color .13s;
}

.ff-toast-action:hover {
  background: #fff;
  border-color: #d4e0e0;
}

.ff-toast-x {
  cursor: pointer;
  width: 26px;
  height: 26px;
  color: var(--ink-300);
  background: none;
  border: none;
  border-radius: 8px;
  flex: none;
  place-items: center;
  transition: background .13s, color .13s;
  display: grid;
}

.ff-toast-x:hover {
  background: var(--bg-soft);
  color: var(--ink-700);
}

.ff-toast-x .lic {
  line-height: 0;
  display: flex;
}

.dossier-tab {
  flex-direction: column;
  gap: 22px;
  display: flex;
}

.kpi.wide {
  grid-column: 1 / -1;
}

.dossier-top {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
  display: grid;
}

.dossier-meter-card {
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  display: flex;
}

.dossier-upload-card {
  flex-direction: column;
  padding: 14px;
  display: flex;
}

@media (max-width: 1100px) {
  .dossier-top {
    grid-template-columns: 1fr;
  }
}

.dossier-meter {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.dm-top {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.dm-title {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.dm-title b {
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 600;
}

.dm-title span {
  color: var(--ink-500);
  font-size: 13px;
}

.dm-pct {
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  font-size: 26px;
  font-weight: 700;
}

.dm-bar {
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  height: 10px;
  display: flex;
  overflow: hidden;
}

.dm-bar span {
  height: 100%;
  display: block;
}

.dm-bar span + span {
  box-shadow: inset 2px 0 0 var(--surface);
}

.dm-legend {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.dm-chip {
  border-radius: var(--r-pill);
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.dm-chip.green {
  color: #157f53;
  background: #e4f4ec;
}

.dm-chip.teal {
  color: var(--teal-700);
  background: var(--teal-050);
}

.dm-chip.orange {
  color: #c26f23;
  background: var(--orange-050);
}

.dm-chip.red {
  color: var(--danger);
  background: #fbeae6;
}

.dm-chip.grey {
  color: var(--ink-500);
  background: var(--bg-soft);
}

.dossier-meter.balk-inline {
  gap: 7px;
}

.dmi-row {
  align-items: center;
  gap: 14px;
  display: flex;
}

.dmi-title {
  color: var(--ink-900);
  white-space: nowrap;
  flex: none;
  font-size: 14.5px;
  font-weight: 600;
}

.dmi-bar {
  flex: auto;
}

.dm-pct.sm {
  flex: none;
  font-size: 18px;
}

.dmi-sub {
  color: var(--ink-500);
  font-size: 12.5px;
}

.dossier-meter.balk-links {
  flex-direction: row;
  align-items: center;
  gap: 22px;
}

.dml-big {
  border-right: 1px solid var(--line);
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 10px 22px 10px 4px;
  line-height: 1.1;
  display: flex;
}

.dml-big b {
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  font-size: 34px;
  font-weight: 700;
}

.dml-big span {
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 600;
}

.dml-side {
  flex-direction: column;
  flex: auto;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.dossier-meter-card.foot-bar {
  padding-bottom: 0;
  overflow: hidden;
}

.dossier-meter.balk-voet {
  gap: 12px;
}

.dm-bar.voet {
  border-radius: 0;
  height: 12px;
  margin: 6px -22px 0;
}

.dossier-meter.ring {
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.dr-ring {
  flex: none;
  width: 124px;
  height: 124px;
  position: relative;
}

.dr-ring svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dr-center {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  line-height: 1.15;
  display: flex;
  position: absolute;
  inset: 0;
}

.dr-center b {
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  font-size: 25px;
  font-weight: 700;
}

.dr-center span {
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 600;
}

.dr-side {
  flex-direction: column;
  flex: auto;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.dr-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
  display: grid;
}

.dr-row {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.dr-dot {
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
}

.dr-dot.green {
  background: var(--success, #1e9e69);
}

.dr-dot.teal {
  background: var(--teal-400);
}

.dr-dot.orange {
  background: var(--orange-500);
}

.dr-dot.red {
  background: #d9574a;
}

.dr-dot.grey {
  background: var(--ink-300);
}

.dr-label {
  color: var(--ink-700);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
}

.dr-n {
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
}

.dossier-meter.tegels {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.dt-cell {
  flex-direction: column;
  flex: 1 1 0;
  gap: 3px;
  min-width: 0;
  padding: 4px 18px;
  display: flex;
}

.dt-cell + .dt-cell {
  border-left: 1px solid var(--line);
}

.dt-cell:first-child {
  padding-left: 0;
}

.dt-cell:last-child {
  padding-right: 0;
}

.dt-label {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-300);
  font-size: 11.5px;
  font-weight: 600;
}

.dt-value {
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.dt-value.green {
  color: var(--success, #1e9e69);
}

.dt-value.orange {
  color: var(--orange-600);
}

.dt-value.red {
  color: var(--danger);
}

.dt-of {
  color: var(--ink-300);
  font-size: 15px;
  font-weight: 600;
}

.dt-sub {
  color: var(--ink-500);
  font-size: 12px;
}

.dt-bar {
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  max-width: 130px;
  height: 6px;
  margin-top: 6px;
  display: block;
  overflow: hidden;
}

.dt-bar i {
  background: var(--teal-500);
  border-radius: var(--r-pill);
  height: 100%;
  display: block;
}

@media (max-width: 760px) {
  .dossier-meter.tegels {
    flex-wrap: wrap;
    gap: 14px 0;
  }

  .dt-cell {
    flex: 45%;
  }

  .dt-cell:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

.dossier-uploader {
  flex-direction: column;
  flex: auto;
  gap: 12px;
  display: flex;
}

.dz {
  text-align: center;
  background: var(--bg-soft);
  cursor: pointer;
  border: 1.5px dashed #bfd6d6;
  border-radius: 14px;
  flex-direction: column;
  flex: auto;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 148px;
  padding: 20px 18px;
  transition: border-color .16s, background .16s;
  display: flex;
}

.dz:hover {
  border-color: var(--teal-400);
}

.dz.hot {
  border-color: var(--teal-500);
  background: var(--teal-050);
}

.dz-text {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.dz-text b {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 600;
}

.dz-text b span {
  color: var(--teal-600);
  font-weight: 500;
}

.dz-text > span {
  color: var(--ink-500);
  max-width: 340px;
  font-size: 12.5px;
}

.dz-demo {
  flex: none;
  height: 34px;
  margin-top: 2px;
  font-size: 13px;
}

.wizard {
  background: var(--surface);
  border-radius: var(--r-card);
  flex-direction: column;
  width: min(620px, 92vw);
  max-height: min(78vh, 720px);
  display: flex;
  overflow: hidden;
  box-shadow: 0 18px 50px #143a3b38;
}

.wiz-head {
  border-bottom: 1px solid var(--line);
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  display: flex;
}

.wiz-title {
  flex-direction: column;
  flex: auto;
  gap: 1px;
  min-width: 0;
  line-height: 1.35;
  display: flex;
}

.wiz-title b {
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 600;
}

.wiz-title span {
  color: var(--ink-500);
  font-size: 12.5px;
}

.wiz-scan {
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 22px;
  display: flex;
}

.wiz-scan-row {
  background: var(--bg-soft);
  border-radius: 10px;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  display: flex;
}

.wiz-scan-name {
  color: var(--ink-700);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
}

.wiz-spinner {
  border: 2px solid var(--teal-050);
  border-top-color: var(--teal-500);
  border-radius: 50%;
  flex: none;
  width: 15px;
  height: 15px;
}

@media (prefers-reduced-motion: no-preference) {
  .wiz-spinner {
    animation: .7s linear infinite wiz-spin;
  }

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

.wiz-body {
  background: var(--bg-soft);
  flex-direction: column;
  flex: auto;
  gap: 12px;
  padding: 16px 20px;
  display: flex;
  overflow-y: auto;
}

.wiz-row {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  border-radius: 13px;
  flex-direction: column;
  gap: 10px;
  padding: 13px 15px;
  display: flex;
}

.wiz-file {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.wiz-file-ico {
  background: var(--teal-050);
  width: 30px;
  height: 30px;
  color: var(--teal-600);
  border-radius: 9px;
  flex: none;
  place-items: center;
  display: grid;
}

.wiz-file b {
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}

.wiz-conf {
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  display: inline-flex;
}

.wiz-map {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.wiz-field {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.wiz-field > span {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-300);
  font-size: 11px;
  font-weight: 600;
}

.wiz-field select {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  width: 100%;
  height: 38px;
  font-family: var(--font-body);
  color: var(--ink-900);
  outline: none;
  padding: 0 10px;
  font-size: 13.5px;
  transition: border-color .14s;
}

.wiz-field select:focus {
  border-color: var(--teal-400);
}

@media (max-width: 560px) {
  .wiz-map {
    grid-template-columns: 1fr;
  }
}

.wiz-foot {
  border-top: 1px solid var(--line);
  flex: none;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  display: flex;
}

.wiz-foot .btn[disabled] {
  opacity: .5;
  cursor: default;
}

.btn-mini {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  height: 32px;
  font-family: var(--font-body);
  color: var(--ink-700);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
  transition: background .14s, border-color .14s;
  display: inline-flex;
}

.btn-mini:hover {
  background: var(--bg-soft);
}

.btn-mini.primary {
  background: var(--orange-500);
  border-color: var(--orange-500);
  color: #fff;
}

.btn-mini.primary:hover {
  background: #ec8c3c;
}

.btn-mini.danger {
  color: var(--danger);
  border-color: #f0cfc8;
}

.btn-mini.danger:hover {
  background: #fbeae6;
}

.ent-name {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.ent-name b {
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
}

.ent-badge {
  flex: none;
  padding: 1px 9px;
  font-size: 11px;
}

.ent-sub {
  color: var(--ink-500);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  overflow: hidden;
}

.doc-list {
  flex-direction: column;
  display: flex;
}

.doc-row {
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 13px;
  padding: 13px 18px;
  transition: background .14s, box-shadow .14s;
  display: flex;
}

.doc-row:last-child {
  border-bottom: 0;
}

.doc-row.drop-hot {
  background: var(--teal-050);
  box-shadow: inset 0 0 0 1.5px var(--teal-400);
  border-radius: 10px;
}

.doc-row.nvt .doc-title b, .doc-row.nvt .doc-hint {
  color: var(--ink-300);
}

.doc-ico {
  flex: none;
  margin-top: 2px;
  display: inline-flex;
}

.doc-ico.green {
  color: #1e9e69;
}

.doc-ico.teal {
  color: var(--teal-600);
}

.doc-ico.orange {
  color: #c26f23;
}

.doc-ico.red {
  color: var(--danger);
}

.doc-ico.grey {
  color: var(--ink-300);
}

.doc-main {
  flex-direction: column;
  flex: 260px;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.doc-title {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  display: flex;
}

.doc-title b {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 600;
}

.doc-hint {
  color: var(--ink-500);
  font-size: 12.5px;
}

.doc-meta {
  flex-wrap: wrap;
  gap: 6px 14px;
  display: flex;
}

.doc-flag {
  color: var(--ink-500);
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}

.doc-flag.red {
  color: var(--danger);
  font-weight: 600;
}

.doc-flag.teal {
  color: var(--teal-700);
  font-weight: 600;
}

.doc-flag.note {
  color: var(--ink-700);
  font-style: italic;
}

.doc-files {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.doc-file {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  display: flex;
}

.doc-file > .lic {
  color: var(--teal-600);
  flex: none;
}

.df-name {
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  flex: 0 auto;
  min-width: 60px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.df-name:hover {
  color: var(--teal-700);
  text-decoration: underline;
}

.df-meta {
  color: var(--ink-500);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: auto;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
}

.df-actions {
  opacity: 0;
  flex: none;
  gap: 2px;
  transition: opacity .14s;
  display: flex;
}

.doc-file:hover .df-actions, .doc-file:focus-within .df-actions {
  opacity: 1;
}

.df-btn {
  width: 28px;
  height: 28px;
  color: var(--ink-500);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  transition: background .12s, color .12s;
  display: grid;
}

.df-btn:hover {
  background: var(--teal-050);
  color: var(--teal-700);
}

.df-btn.danger:hover {
  color: var(--danger);
  background: #fbeae6;
}

.df-btn.approve {
  color: #1e9e69;
}

.df-btn.approve:hover {
  color: #157f53;
  background: #e4f4ec;
}

.doc-side {
  flex: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  display: flex;
}

.doc-status {
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.doc-actions {
  align-items: center;
  gap: 1px;
  display: flex;
}

.doc-menu-wrap {
  display: inline-flex;
  position: relative;
}

.doc-menu {
  top: calc(100% + 4px);
  right: 0;
}

.doc-afkeur {
  align-items: center;
  gap: 8px;
  display: flex;
}

.doc-afkeur input {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 0;
  height: 34px;
  font-family: var(--font-body);
  color: var(--ink-900);
  outline: none;
  flex: auto;
  padding: 0 11px;
  font-size: 13px;
}

.doc-afkeur input:focus {
  border-color: var(--teal-400);
}

.dossier-split {
  grid-template-columns: 296px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.ds-rail {
  flex-direction: column;
  gap: 14px;
  padding: 10px;
  display: flex;
}

.ds-group {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.ds-group-label {
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-300);
  align-items: center;
  gap: 7px;
  padding: 6px 10px 5px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
}

.ds-group-label .lic {
  color: var(--ink-300);
}

.ds-empty {
  color: var(--ink-300);
  margin: 0;
  padding: 2px 10px 6px;
  font-size: 12.5px;
}

.ds-ent {
  width: 100%;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  transition: background .13s;
  display: flex;
}

.ds-ent:hover {
  background: var(--bg-soft);
}

.ds-ent.active {
  background: var(--teal-050);
}

.ds-ent-text {
  flex-direction: column;
  flex: auto;
  gap: 0;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.ds-ent-text b {
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}

.ds-ent.active .ds-ent-text b {
  color: var(--teal-700);
}

.ds-ent-text span {
  color: var(--ink-500);
  font-size: 12px;
}

.ds-ok {
  color: #1e9e69;
  flex: none;
  display: inline-flex;
}

.ds-alert {
  color: var(--danger);
  flex: none;
  display: inline-flex;
}

.ds-panel {
  min-height: 320px;
}

.ds-panel-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 13px;
  padding: 16px 20px;
  display: flex;
}

.ds-panel-id {
  flex-direction: column;
  flex: auto;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.ds-panel-body {
  padding: 2px 2px 6px;
}

@media (max-width: 1100px) {
  .dossier-split {
    grid-template-columns: 1fr;
  }
}

.preview-box {
  background: var(--surface);
  border-radius: var(--r-card);
  width: min(560px, 92vw);
  overflow: hidden;
  box-shadow: 0 18px 50px #143a3b38;
}

.preview-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  display: flex;
}

.preview-head > .lic {
  color: var(--teal-600);
}

.preview-title {
  flex-direction: column;
  flex: auto;
  gap: 0;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.preview-title b {
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
}

.preview-title span {
  color: var(--ink-500);
  font-size: 12.5px;
}

.preview-page {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  margin: 20px;
  padding: 26px 24px 18px;
  display: flex;
}

.pp-line {
  border-radius: var(--r-pill);
  background: #dce7e7;
  height: 9px;
}

.pp-line.w40 {
  width: 40%;
}

.pp-line.w60 {
  width: 60%;
}

.pp-line.w70 {
  width: 70%;
}

.pp-line.w80 {
  width: 80%;
}

.pp-line.w85 {
  width: 85%;
}

.pp-line.w90 {
  width: 90%;
}

.pp-gap {
  height: 8px;
}

.pp-note {
  color: var(--ink-500);
  margin-top: 10px;
  font-size: 12.5px;
}

.ent-picker {
  position: relative;
}

.ent-picker-ico {
  color: var(--ink-300);
  pointer-events: none;
  z-index: 1;
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}

.ent-menu {
  z-index: 60;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  padding: 6px;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow-y: auto;
}

.ent-opt {
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink-900);
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  display: flex;
}

.ent-opt:hover {
  background: var(--teal-050);
}

.ent-opt > .lic {
  color: var(--ink-300);
  flex: none;
  margin-left: auto;
}

.ent-opt-text {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ent-opt-text b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.ent-opt-text span {
  color: var(--ink-500);
  font-size: 12px;
}

.ent-empty {
  color: var(--ink-500);
  margin: 0;
  padding: 12px 10px;
  font-size: 13px;
}

.ent-field {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.ent-picker-row {
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.ent-picker-row .ent-picker {
  flex: auto;
  min-width: 0;
}

.ent-create-wrap {
  flex: none;
  display: inline-flex;
  position: relative;
}

.ent-create-btn {
  white-space: nowrap;
  border: 1px solid var(--line);
  cursor: pointer;
  height: 36px;
  font-family: var(--font-body);
  color: var(--teal-600);
  background: #fff;
  border-radius: 9px;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
  display: inline-flex;
}

.ent-create-btn:hover {
  border-color: var(--teal-400);
  background: var(--teal-050);
}

.ent-create-menu {
  min-width: 200px;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
}

.ent-opt.ent-create {
  border-top: 1px solid var(--line);
  border-radius: 0 0 11px 11px;
}

.ent-opt.ent-create:hover {
  background: var(--teal-050);
}

.ent-create-ico {
  border: 1px dashed var(--teal-400);
  width: 30px;
  height: 30px;
  color: var(--teal-600);
  background: var(--teal-025, #fafcfc);
  border-radius: 8px;
  flex: none;
  place-items: center;
  display: grid;
}

.ent-chip {
  border: 1px solid var(--line);
  background: var(--teal-025, #fafcfc);
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 5px 8px 5px 6px;
  display: inline-flex;
}

.ent-chip-text {
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
  display: flex;
}

.ent-chip-text b {
  color: var(--ink-900);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}

.ent-chip-text span {
  color: var(--ink-500);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11.5px;
  overflow: hidden;
}

.ent-chip-x {
  cursor: pointer;
  width: 22px;
  height: 22px;
  color: var(--ink-400);
  background: none;
  border: none;
  border-radius: 6px;
  flex: none;
  place-items: center;
  margin-left: 2px;
  padding: 0;
  transition: background .12s, color .12s;
  display: grid;
}

.ent-chip-x:hover {
  color: var(--ink-700);
  background: #00000012;
}

.ent-multi {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ent-tag {
  border: 1px solid var(--line);
  color: var(--ink-900);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 4px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.ent-tag .token-x {
  margin-left: 1px;
}

.ent-field.is-multi {
  position: relative;
}

.ent-multi-row {
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  display: flex;
  overflow: hidden;
}

.ent-multi-row .ent-chip {
  flex: none;
  max-width: 230px;
}

.ent-multi-row .ent-add-mini {
  flex: none;
}

.ent-more-chip {
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: var(--teal-050);
  height: 42px;
  color: var(--teal-700);
  cursor: pointer;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color .12s, background .12s;
  display: inline-flex;
}

.ent-more-chip:hover {
  border-color: var(--teal-400);
  background: var(--teal-050);
}

.ent-meas {
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  gap: 8px;
  height: 0;
  display: flex;
  position: absolute;
  top: 0;
  left: -99999px;
  overflow: hidden;
}

.ent-meas .ent-chip {
  flex: none;
  max-width: 230px;
}

.ent-more-pop {
  z-index: 60;
  border: 1px solid var(--line);
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  padding: 8px;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 10px 28px #143a3b24;
}

.ent-more-pop .ent-chip.ent-more-row {
  width: 100%;
  max-width: 100%;
}

.ent-add-mini {
  box-sizing: border-box;
  border: 1px dashed var(--line);
  background: var(--bg-soft, #f4f8f8);
  color: var(--teal-700);
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
  display: inline-flex;
}

.ent-add-mini:hover, .ent-add-mini.on {
  border-style: solid;
  border-color: var(--teal-400);
  background: var(--teal-050);
}

.ent-pop {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  width: min(440px, 100vw - 32px);
  overflow: hidden;
  box-shadow: 0 18px 50px #143a3b38;
}

.ent-pop-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 11px;
  padding: 16px 16px 14px;
  display: flex;
}

.ent-pop-title {
  flex-direction: column;
  flex: auto;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.ent-pop-title b {
  color: var(--ink-900);
  font-size: 15.5px;
  font-weight: 700;
}

.ent-pop-title span {
  color: var(--teal-600);
  font-size: 12px;
}

.ent-pop-body {
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  padding: 16px;
  display: grid;
}

.ent-pop-field {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.ent-pop-field.full {
  grid-column: 1 / -1;
}

.ent-pop-field > span {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 700;
}

.ent-pop-foot {
  border-top: 1px solid var(--line);
  background: var(--teal-025, #fafcfc);
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 16px;
  display: flex;
}

.ent-pop-foot .btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sidebar a {
  text-decoration: none;
}

/*# sourceMappingURL=apps_web_app_globals_1lkgh9-.css.map*/